Improve regor docs.

Author: koculu

frontend/purestack.studio/guides/_nav.json

@@ -5,7 +5,7 @@
     "purestack-cli.mdx",
     "site-config.mdx",
     "vscode-extension.mdx",
-    "regor-mdx.mdx",
+    "regor.mdx",
     "typography.mdx",
     "utility-css-classes.mdx",
     "semantic-tones.mdx",

frontend/purestack.studio/guides/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Guides
-description: Learn how to build and style a PureStack site with the CLI, site configuration, VS Code extension, Regor MDX, typography, utility classes, semantic tones, icons, and themes.
+description: Learn how to build and style a PureStack site with the CLI, site configuration, VS Code extension, Regor, typography, utility classes, semantic tones, icons, and themes.
 template: doc
 layout:
   showNav: true
@@ -32,9 +32,9 @@ These guides follow the path from a content folder to a finished interface. Star
     <BtnLink href="/guides/vscode-extension/" tone="accent" variant="link">Set up the editor</BtnLink>
   </Panel>
   <Panel tone="neutral" bodyClass="p-3">
-    <h2 class="mt-0">Regor MDX</h2>
-    <p>Mix readable content with themed components and choose where browser behavior belongs.</p>
-    <BtnLink href="/guides/regor-mdx/" tone="accent" variant="link">Write a page</BtnLink>
+    <h2 class="mt-0">Regor</h2>
+    <p>Render pages at build time and add interactive apps in the browser with one component model.</p>
+    <BtnLink href="/guides/regor/" tone="accent" variant="link">Learn Regor</BtnLink>
   </Panel>
   <Panel tone="neutral" bodyClass="p-3">
     <h2 class="mt-0">Typography</h2>

frontend/purestack.studio/guides/purestack-cli.mdx

@@ -70,7 +70,7 @@ Open the URL printed as `serving at` after the first build. With the default set
 
 ## Understand the content folder
 
-The CLI recognizes `.md`, `.mdx`, and `.rmdx` as pages. Both `.mdx` and `.rmdx` use the Regor MDX pipeline. `.md` also uses that pipeline by default; `mdx.compileMdAsMdx` can change how `.md` is compiled. See [Regor MDX](/guides/regor-mdx/) for markup and component usage.
+The CLI recognizes `.md`, `.mdx`, and `.rmdx` as pages. Both `.mdx` and `.rmdx` use the Regor MDX pipeline. `.md` also uses that pipeline by default; `mdx.compileMdAsMdx` can change how `.md` is compiled. See the [Regor guide](/guides/regor/) for markup and component usage.
 
 Routes follow filenames and folders:
 

frontend/purestack.studio/guides/regor-launch-checklist.ts

@@ -0,0 +1,104 @@
+import {
+  defineBadgeComponents,
+  defineButtonComponents,
+  defineFlexComponents,
+  defineFormComponents,
+  defineIconComponents,
+  definePanelComponents,
+} from '@purestack/ts-components'
+import { tabler_rocket } from '@purestack/ts-svg-icons'
+import {
+  batch,
+  type ComputedRef,
+  computed,
+  createApp,
+  defineComponent,
+  html,
+  type Ref,
+  ref,
+} from 'regor'
+
+export interface Task {
+  id: string
+  title: string
+  done: Ref<boolean>
+}
+
+export interface TaskRow {
+  task: Task
+}
+
+const taskRow = defineComponent<TaskRow>(
+  html`<FormCheck :id="'launch-' + task.id" :label="task.title" :checked="task.done" />`,
+  { props: ['task'] },
+)
+
+export interface LaunchChecklist {
+  tasks: Task[]
+  completed: ComputedRef<number>
+  ready: ComputedRef<boolean>
+  launched: Ref<boolean>
+  launch: () => void
+  reset: () => void
+}
+
+const launchChecklistTemplate = html`<Panel tone="neutral" variant="surfaceAlt" bodyClass="p-3">
+  <Flex direction="column">
+    <Flex justify="between" align="center" wrap="true">
+      <strong>Launch checklist</strong>
+      <Badge :tone="ready ? 'success' : 'warning'" variant="surface">
+        {{ completed }} of {{ tasks.length }} done
+      </Badge>
+    </Flex>
+    <TaskRow r-for="task in tasks" :task="task" />
+    <Flex wrap="true">
+      <Btn tone="accent" icon="tabler:rocket" :disabled="!ready || launched" @click="launch">Launch</Btn>
+      <Btn tone="neutral" variant="surface" @click="reset">Start over</Btn>
+    </Flex>
+    <FormStatus r-if="launched" role="status">Launched. Every check passed.</FormStatus>
+  </Flex>
+</Panel>`
+
+function createLaunchChecklist(): LaunchChecklist {
+  const tasks: Task[] = [
+    { id: 'docs', title: 'Docs reviewed', done: ref(true) },
+    { id: 'tests', title: 'Tests passing', done: ref(false) },
+    { id: 'notes', title: 'Release notes written', done: ref(false) },
+  ]
+  const launched = ref(false)
+  const completed = computed(() => tasks.filter((task) => task.done()).length)
+  const ready = computed(() => completed() === tasks.length)
+  return {
+    tasks,
+    completed,
+    ready,
+    launched,
+    launch: () => launched(true),
+    reset: () =>
+      batch(() => {
+        for (const task of tasks) task.done(false)
+        launched(false)
+      }),
+  }
+}
+
+createApp(
+  {
+    components: {
+      LaunchChecklist: defineComponent<LaunchChecklist>(
+        launchChecklistTemplate,
+        { context: createLaunchChecklist },
+      ),
+      TaskRow: taskRow,
+      ...defineBadgeComponents(),
+      ...defineButtonComponents(),
+      ...defineFlexComponents(),
+      ...defineFormComponents(),
+      ...defineIconComponents((name) =>
+        name === 'tabler:rocket' ? tabler_rocket : '',
+      ),
+      ...definePanelComponents(),
+    },
+  },
+  { selector: 'app#launch-checklist', template: html`<LaunchChecklist />` },
+)