From 1d5632807a87fb573b9df360a4bbf55700dbfcc3 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Sat, 14 Dec 2024 08:05:37 -0500 Subject: [PATCH] more work on new docs site --- docs2/astro.config.mjs | 4 +- docs2/src/components/DocsSidebar.astro | 9 +- docs2/src/content/config.ts | 10 ++ docs2/src/content/docs/createMachine.md | 75 ++++++++++++++ docs2/src/pages/docs/[slug]/index.astro | 130 ++++++++++++++++++++++++ docs2/src/pages/docs/index.astro | 2 - docs2/src/styles/base.css | 25 ++++- 7 files changed, 249 insertions(+), 6 deletions(-) create mode 100644 docs2/src/content/config.ts create mode 100644 docs2/src/content/docs/createMachine.md create mode 100644 docs2/src/pages/docs/[slug]/index.astro diff --git a/docs2/astro.config.mjs b/docs2/astro.config.mjs index 2dbe9a0b..71e4537d 100644 --- a/docs2/astro.config.mjs +++ b/docs2/astro.config.mjs @@ -2,10 +2,12 @@ import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; -// https://astro.build/config export default defineConfig({ integrations: [tailwind()], devToolbar: { enabled: false, }, + markdown: { + syntaxHighlight: 'prism' + } }); diff --git a/docs2/src/components/DocsSidebar.astro b/docs2/src/components/DocsSidebar.astro index 67925e1e..a5268bfd 100644 --- a/docs2/src/components/DocsSidebar.astro +++ b/docs2/src/components/DocsSidebar.astro @@ -21,6 +21,9 @@ const activeItem = undefined; { title: "REACT", id: "react" }, { title: "VUE", id: "vue" }, { title: "SVELTE", id: "svelte" } + ], + 'API': [ + { title: 'createMachine', id: 'create-machine', slug: 'createMachine' } ] }; --- @@ -99,7 +102,11 @@ const activeItem = undefined; {items.map((item) => ( handleItemKeyDown(e, item.id)} diff --git a/docs2/src/content/config.ts b/docs2/src/content/config.ts new file mode 100644 index 00000000..2d30f750 --- /dev/null +++ b/docs2/src/content/config.ts @@ -0,0 +1,10 @@ +import { z, defineCollection } from 'astro:content'; + +const docs = defineCollection({ + schema: z.object({ + title: z.string(), + tags: z.string() + }) +}); + +export const collections = { docs }; diff --git a/docs2/src/content/docs/createMachine.md b/docs2/src/content/docs/createMachine.md new file mode 100644 index 00000000..a2d90ccb --- /dev/null +++ b/docs2/src/content/docs/createMachine.md @@ -0,0 +1,75 @@ +--- +title: createMachine +tags: api +permalink: api/createMachine.html +--- + +The `createMachine` function creates a state machine. It takes an object of *states* with the key being the state name. The value is usually [state](./state.html) but might also be [invoke](./invoke.html). + + +This is a common example that provides 2 states and a [context](#context) + +```js +import { createMachine, state } from 'robot3'; + +const context = () => ({ + first: 'Wilbur', + last: 'Phillips' +}); + +const machine = createMachine({ + idle: state(), + + input: state() +}, context); +``` + +## [initial] + +Optionally can provide the initial state as the first argument. If no initial state is provided then the first state listed will be the initial state. + +```js +const toggleMachine = initial => createMachine(initial, { + active: state( + transition('toggle', 'inactive') + ), + inactive: state( + transition('toggle', 'active') + ) +}); + +const myMachine = toggleMachine('inactive'); +const service = interpret(myMachine, () => {}); + +console.log(service.machine.current, 'inactive'); +``` + +## states + +An object of states, where each key is a state name, and the values are one of [state](./state.html) or [invoke](./invoke.html). + +## context + +context(initialContext) + +A second argument to `createMachine` is the `context` for the machine; a function that returns an object of [extended state values](https://patterns.eecs.berkeley.edu/?page_id=470#Context). This is useful for storing values coming from places like forms. + +The `context` function receives an `initialContext` argument. This is anything passed as the third argument to [interpret](./interpret.html) like so: + +```js +const context = initialContext => ({ + foo: initialContext.foo +}); + +const machine = createMachine({ + idle: state() +}, context); + +const initialContext = { + foo: 'bar' +}; + +interpret(machine, service => { + // Do stuff when the service changes. +}, initialContext); +``` diff --git a/docs2/src/pages/docs/[slug]/index.astro b/docs2/src/pages/docs/[slug]/index.astro new file mode 100644 index 00000000..d0a4e2a1 --- /dev/null +++ b/docs2/src/pages/docs/[slug]/index.astro @@ -0,0 +1,130 @@ +--- +import Search from '../../../icons/Search.astro'; +import BookOpen from '../../../icons/BookOpen.astro'; +import ChevronRight from '../../../icons/ChevronRight.astro'; +import Footer from '../../../components/Footer.astro'; +import Sidebar from '../../../components/DocsSidebar.astro'; +import { Prism } from '@astrojs/prism'; +import '../../../styles/base.css'; +import CommonHead from '../../../components/CommonHead.astro'; + +import { getCollection } from 'astro:content'; + +export async function getStaticPaths() { + const docs = await getCollection('docs'); + return docs.map(item => { + return { + params: { slug: item.data.title }, + props: { item } + } + }); +} + +const isSearchFocused = false; + +const { Content } = await Astro.props.item.render(); +--- + + + { Astro.props.item.data.title } + + + + +
+
+
+ {[...Array(20)].map((_, i) => ( +
+ ))} +
+
+ +
+
+
+
ROBOT_DOCS
+
+ + setIsSearchFocused(true)} + onBlur={() => setIsSearchFocused(false)} + /> +
+
+ +
+
+ +
+ + +
+
+
+ + DOCS + + CORE_CONCEPTS + + { Astro.props.item.data.title } +
+ +

+ { Astro.props.item.data.title } +

+ + +
+
+
+ + + +
+ + + + + + + + + diff --git a/docs2/src/pages/docs/index.astro b/docs2/src/pages/docs/index.astro index 1e286edb..9ad1181e 100644 --- a/docs2/src/pages/docs/index.astro +++ b/docs2/src/pages/docs/index.astro @@ -8,8 +8,6 @@ import { Prism } from '@astrojs/prism'; import '../../styles/base.css'; import CommonHead from '../../components/CommonHead.astro'; -//const [isSearchFocused, setIsSearchFocused] = React.useState(false); - const isSearchFocused = false; const basicExample = `const machine = createMachine({ diff --git a/docs2/src/styles/base.css b/docs2/src/styles/base.css index 26f55ffc..0cd85e9d 100644 --- a/docs2/src/styles/base.css +++ b/docs2/src/styles/base.css @@ -1,5 +1,26 @@ @import "./prism-vsc-dark-plus.css"; -.language-js { +pre.language-js { background: #080C13 !important; -} \ No newline at end of file + padding: 0; + position: relative; + border-width: 2px; + border-color: rgb(6 182 212 / 1); + border-radius: 0.75rem; + margin-bottom: 2rem; +} + +pre.language-js::before { + position: absolute; + width: 100%; + height: 100%; + content: ''; + padding: 1.5rem; + background: yellow; + background-color: rgb(17 24 39 / 1); +} + +pre.language-js > code.language-js { + display: block; + padding: 1.5rem; +}