diff --git a/docs2/package.json b/docs2/package.json index 6d7624209..68347a4d3 100644 --- a/docs2/package.json +++ b/docs2/package.json @@ -10,6 +10,7 @@ "astro": "astro" }, "dependencies": { + "@astrojs/prism": "^3.1.0", "@astrojs/tailwind": "^5.1.2", "astro": "^4.16.12", "tailwindcss": "^3.4.14" diff --git a/docs2/public/favicon.svg b/docs2/public/favicon.svg deleted file mode 100644 index f157bd1c5..000000000 --- a/docs2/public/favicon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - diff --git a/docs2/public/images/apple-touch-icon.png b/docs2/public/images/apple-touch-icon.png new file mode 100755 index 000000000..4c42b8ea4 Binary files /dev/null and b/docs2/public/images/apple-touch-icon.png differ diff --git a/docs2/public/images/favicon-16x16.png b/docs2/public/images/favicon-16x16.png new file mode 100755 index 000000000..d2de27579 Binary files /dev/null and b/docs2/public/images/favicon-16x16.png differ diff --git a/docs2/public/images/favicon-32x32.png b/docs2/public/images/favicon-32x32.png new file mode 100755 index 000000000..59540003a Binary files /dev/null and b/docs2/public/images/favicon-32x32.png differ diff --git a/docs2/src/components/CodeBlock.astro b/docs2/src/components/CodeBlock.astro index db5364353..383259bf7 100644 --- a/docs2/src/components/CodeBlock.astro +++ b/docs2/src/components/CodeBlock.astro @@ -1,5 +1,6 @@ --- import Code from '../icons/Code.astro'; +import { Prism } from '@astrojs/prism'; ---
{Astro.props.title && ( @@ -9,9 +10,9 @@ import Code from '../icons/Code.astro'; {Astro.props.title}
)} - 
-    {Astro.props.code}
-
+
+ +
diff --git a/docs2/src/components/CommonHead.astro b/docs2/src/components/CommonHead.astro new file mode 100644 index 000000000..f5e9f76fa --- /dev/null +++ b/docs2/src/components/CommonHead.astro @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/docs2/src/pages/api/index.astro b/docs2/src/pages/docs/index.astro similarity index 89% rename from docs2/src/pages/api/index.astro rename to docs2/src/pages/docs/index.astro index 9ee983425..1e286edb5 100644 --- a/docs2/src/pages/api/index.astro +++ b/docs2/src/pages/docs/index.astro @@ -4,6 +4,9 @@ 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'; //const [isSearchFocused, setIsSearchFocused] = React.useState(false); @@ -50,7 +53,7 @@ idle: { Robot Docs - +
@@ -116,9 +119,9 @@ idle: {

Basic Transition

- 
-            {basicExample}
-
+
+ +

Guards

@@ -127,9 +130,9 @@ idle: {

- 
-            {guardExample}
-
+
+ +

Actions

@@ -138,9 +141,9 @@ idle: {

- 
-            {actionExample}
-
+
+ +
diff --git a/docs2/src/pages/index.astro b/docs2/src/pages/index.astro index 2fb3e2c51..8ad9da438 100644 --- a/docs2/src/pages/index.astro +++ b/docs2/src/pages/index.astro @@ -11,12 +11,14 @@ import ArrowRight from '../icons/ArrowRight.astro'; import Github from '../icons/GitHub.astro'; import Terminal from '../icons/Terminal.astro'; import BookOpen from '../icons/BookOpen.astro'; +import CommonHead from '../components/CommonHead.astro'; +import '../styles/base.css'; --- Robot - +
@@ -24,7 +26,6 @@ import BookOpen from '../icons/BookOpen.astro';
{[...Array(20)].map((_, i) => (
- - +
@@ -143,25 +144,18 @@ import BookOpen from '../icons/BookOpen.astro'; diff --git a/docs2/src/styles/base.css b/docs2/src/styles/base.css new file mode 100644 index 000000000..26f55ffc2 --- /dev/null +++ b/docs2/src/styles/base.css @@ -0,0 +1,5 @@ +@import "./prism-vsc-dark-plus.css"; + +.language-js { + background: #080C13 !important; +} \ No newline at end of file diff --git a/docs2/src/styles/prism-atom-dark.css b/docs2/src/styles/prism-atom-dark.css new file mode 100644 index 000000000..749b17cd7 --- /dev/null +++ b/docs2/src/styles/prism-atom-dark.css @@ -0,0 +1,143 @@ +/** + * atom-dark theme for `prism.js` + * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax + * @author Joe Gibson (@gibsjose) + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #c5c8c6; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #1d1f21; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #7C7C7C; +} + +.token.punctuation { + color: #c5c8c6; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.keyword, +.token.tag { + color: #96CBFE; +} + +.token.class-name { + color: #FFFFB6; + text-decoration: underline; +} + +.token.boolean, +.token.constant { + color: #99CC99; +} + +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.number { + color: #FF73FD; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #A8FF60; +} + +.token.variable { + color: #C6C5FE; +} + +.token.operator { + color: #EDEDED; +} + +.token.entity { + color: #FFFFB6; + cursor: help; +} + +.token.url { + color: #96CBFE; +} + +.language-css .token.string, +.style .token.string { + color: #87C38A; +} + +.token.atrule, +.token.attr-value { + color: #F9EE98; +} + +.token.function { + color: #DAD085; +} + +.token.regex { + color: #E9C062; +} + +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} diff --git a/docs2/src/styles/prism-vsc-dark-plus.css b/docs2/src/styles/prism-vsc-dark-plus.css new file mode 100644 index 000000000..d3bd5010a --- /dev/null +++ b/docs2/src/styles/prism-vsc-dark-plus.css @@ -0,0 +1,275 @@ +pre[class*="language-"], +code[class*="language-"] { + color: #d4d4d4; + font-size: 13px; + text-shadow: none; + font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::selection, +code[class*="language-"]::selection, +pre[class*="language-"] *::selection, +code[class*="language-"] *::selection { + text-shadow: none; + background: #264F78; +} + +@media print { + pre[class*="language-"], + code[class*="language-"] { + text-shadow: none; + } +} + +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + background: #1e1e1e; +} + +:not(pre) > code[class*="language-"] { + padding: .1em .3em; + border-radius: .3em; + color: #db4c69; + background: #1e1e1e; +} +/********************************************************* +* Tokens +*/ +.namespace { + opacity: .7; +} + +.token.doctype .token.doctype-tag { + color: #569CD6; +} + +.token.doctype .token.name { + color: #9cdcfe; +} + +.token.comment, +.token.prolog { + color: #6a9955; +} + +.token.punctuation, +.language-html .language-css .token.punctuation, +.language-html .language-javascript .token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.inserted, +.token.unit { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.deleted { + color: #ce9178; +} + +.language-css .token.string.url { + text-decoration: underline; +} + +.token.operator, +.token.entity { + color: #d4d4d4; +} + +.token.operator.arrow { + color: #569CD6; +} + +.token.atrule { + color: #ce9178; +} + +.token.atrule .token.rule { + color: #c586c0; +} + +.token.atrule .token.url { + color: #9cdcfe; +} + +.token.atrule .token.url .token.function { + color: #dcdcaa; +} + +.token.atrule .token.url .token.punctuation { + color: #d4d4d4; +} + +.token.keyword { + color: #569CD6; +} + +.token.keyword.module, +.token.keyword.control-flow { + color: #c586c0; +} + +.token.function, +.token.function .token.maybe-class-name { + color: #dcdcaa; +} + +.token.regex { + color: #d16969; +} + +.token.important { + color: #569cd6; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name, +.token.maybe-class-name { + color: #4ec9b0; +} + +.token.console { + color: #9cdcfe; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property, +.token.variable, +.token.imports .token.maybe-class-name, +.token.exports .token.maybe-class-name { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.escape { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.tag .token.punctuation { + color: #808080; +} + +.token.cdata { + color: #808080; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value, +.token.attr-value .token.punctuation { + color: #ce9178; +} + +.token.attr-value .token.punctuation.attr-equals { + color: #d4d4d4; +} + +.token.entity { + color: #569cd6; +} + +.token.namespace { + color: #4ec9b0; +} +/********************************************************* +* Language Specific +*/ + +pre[class*="language-javascript"], +code[class*="language-javascript"], +pre[class*="language-jsx"], +code[class*="language-jsx"], +pre[class*="language-typescript"], +code[class*="language-typescript"], +pre[class*="language-tsx"], +code[class*="language-tsx"] { + color: #9cdcfe; +} + +pre[class*="language-css"], +code[class*="language-css"] { + color: #ce9178; +} + +pre[class*="language-html"], +code[class*="language-html"] { + color: #d4d4d4; +} + +.language-regex .token.anchor { + color: #dcdcaa; +} + +.language-html .token.punctuation { + color: #808080; +} +/********************************************************* +* Line highlighting +*/ +pre[class*="language-"] > code[class*="language-"] { + position: relative; + z-index: 1; +} + +.line-highlight.line-highlight { + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + z-index: 0; +} diff --git a/package-lock.json b/package-lock.json index 4982a23d8..3a2bc797f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "docs2": { "version": "0.0.1", "dependencies": { + "@astrojs/prism": "^3.1.0", "@astrojs/tailwind": "^5.1.2", "astro": "^4.16.12", "tailwindcss": "^3.4.14" @@ -17942,6 +17943,7 @@ "docs2": { "version": "file:docs2", "requires": { + "@astrojs/prism": "^3.1.0", "@astrojs/tailwind": "^5.1.2", "astro": "^4.16.12", "tailwindcss": "^3.4.14"