Components

Try a component, copy an example, and add your own content.

Examples use the current source packages. Put data and models in your site's public/ directory; use the corresponding URL in src.

AlkChart

Chart reference

CSV to line, bar, scatter, pie, donut, or heatmap. Inspect the data table or zoom a line or scatter plot.

Synthetic dataset · line

Damped oscillator

A synthetic trajectory with damping ratio 0.12.

CSV

Shift + scroll to zoom · drag to pan

Data table

The table loads alongside the chart.

Code

oscillator.mdxmdx

import AlkChart from '@alkemist/ui/AlkChart.astro';

<AlkChart
  src="/test/oscillation.csv"
  type="line" x="time" y="position"
  title="Damped oscillator"
  description="A synthetic trajectory with damping ratio 0.12."
  xLabel="Time (s)" yLabel="Position (m)"
  height={220} sample
/>

AlkModel

Model reference

Uncompressed GLB or glTF with orbit controls, wireframe, and a static poster.

Static view of A torus knot — 3D model · glTF 2.0
A torus knot
A generated teaching mesh. Drag to inspect it.

Code

model.mdxmdx

import AlkModel from '@alkemist/ui/AlkModel.astro';

<AlkModel
  src="/test/torus-knot.glb"
  poster="/test/torus-knot.svg"
  title="A torus knot"
  description="A generated teaching mesh. Drag to inspect it."
/>

AlkMath

Math reference

TeX equations with accessible MathML. Inline and display math also work directly in Markdown.

\int_{\partial\Omega} \omega = \int_\Omega d\omega

Stokes’ theorem

Code

equation.mdxmdx

import AlkMath from '@alkemist/ui/AlkMath.astro';

<AlkMath
  tex={String.raw`\int_{\partial\Omega} \omega = \int_\Omega d\omega`}
  label="Stokes’ theorem"
/>

AlkCode

Code reference

Highlighted source with a file title, line numbers, and a copy button. Markdown code fences use the same styling.

integrator.tstypescript

function advance(position: number, velocity: number, dt: number) {
  return position + velocity * dt;
}

Usage

code.mdxmdx

import AlkCode from '@alkemist/ui/AlkCode.astro';
import source from './integrator.ts?raw';

<AlkCode
  code={source} lang="typescript"
  title="integrator.ts" highlightLines={[2]}
/>

AlkShader

Shader reference

A two-source interference study with frequency and angle controls. This component currently renders this fixed study.

Shader · two wave sources

Two wave sources

GLSL

Frequency 9.0Source angle 24°

Code

field.mdxmdx

import AlkShader from '@alkemist/ui/AlkShader.astro';

<AlkShader title="Two wave sources" frequency={9} angle={24} />

AlkLayout

Layout reference

The shell used by this page: Ubuntu, board themes, responsive navigation, and print styles. Set your site name and navigation; keep your content inside.

index.astroastro

---
import AlkLayout from '@alkemist/ui/AlkLayout.astro';
---

<AlkLayout title="Research notes" siteName="My lab">
  <h1>Research notes</h1>
  <p>What we are working on.</p>
</AlkLayout>

See all specimens together

Point clouds, splats, robotics, and custom shader authoring are planned.