Skip to content

Commit

Permalink
some progress
Browse files Browse the repository at this point in the history
  • Loading branch information
matthewp committed Nov 20, 2024
1 parent 4895cf0 commit bf7c6a3
Show file tree
Hide file tree
Showing 13 changed files with 467 additions and 48 deletions.
1 change: 1 addition & 0 deletions docs2/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
9 changes: 0 additions & 9 deletions docs2/public/favicon.svg

This file was deleted.

Binary file added docs2/public/images/apple-touch-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs2/public/images/favicon-16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs2/public/images/favicon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions docs2/src/components/CodeBlock.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
import Code from '../icons/Code.astro';
import { Prism } from '@astrojs/prism';
---
<div class="bg-gray-900 rounded-lg p-6 my-6">
{Astro.props.title && (
Expand All @@ -9,9 +10,9 @@ import Code from '../icons/Code.astro';
<span>{Astro.props.title}</span>
</div>
)}
<pre class
="overflow-x-auto p-4 bg-black/50 rounded-lg text-gray-300 font-mono text-sm">
{Astro.props.code}
</pre>
<div class
="overflow-x-auto p-4 bg-black/50 rounded-lg text-gray-300 font-mono text-lg">
<Prism lang="js" code={Astro.props.code} />
</div>
</div>

4 changes: 4 additions & 0 deletions docs2/src/components/CommonHead.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<meta charset="utf-8">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -50,7 +53,7 @@ idle: {
<html lang="en">
<head>
<title>Robot Docs</title>
<meta charset="utf-8">
<CommonHead />
</head>
<body>
<div class="min-h-screen bg-gradient-to-b from-purple-900 via-indigo-900 to-blue-900 text-gray-100">
Expand Down Expand Up @@ -116,9 +119,9 @@ idle: {

<div class="bg-gray-900 rounded-xl p-6 border-2 border-cyan-500 mb-8">
<h2 class="font-mono text-xl text-cyan-400 mb-4">Basic Transition</h2>
<pre class="bg-black/50 p-4 rounded-lg font-mono text-sm text-gray-300">
{basicExample}
</pre>
<div class="bg-black/50 rounded-lg font-mono text-lg text-gray-300">
<Prism lang="js" code={basicExample} />
</div>
</div>

<h2 class="font-mono text-2xl font-bold text-cyan-400 mb-4">Guards</h2>
Expand All @@ -127,9 +130,9 @@ idle: {
</p>

<div class="bg-gray-900 rounded-xl p-6 border-2 border-cyan-500 mb-8">
<pre class="font-mono text-sm text-gray-300">
{guardExample}
</pre>
<div class="font-mono text-lg text-gray-300">
<Prism lang="js" code={guardExample} />
</div>
</div>

<h2 class="font-mono text-2xl font-bold text-cyan-400 mb-4">Actions</h2>
Expand All @@ -138,9 +141,9 @@ idle: {
</p>

<div class="bg-gray-900 rounded-xl p-6 border-2 border-cyan-500">
<pre class="font-mono text-sm text-gray-300">
{actionExample}
</pre>
<div class="font-mono text-lg text-gray-300">
<Prism lang="js" code={actionExample} />
</div>
</div>
</div>
</main>
Expand Down
44 changes: 19 additions & 25 deletions docs2/src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,21 @@ 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';
---

<html lang="en">
<head>
<title>Robot</title>
<meta charset="utf-8">
<CommonHead />
</head>
<body>
<div class="min-h-screen bg-gradient-to-b from-purple-900 via-indigo-900 to-blue-900 text-gray-100">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute inset-0 opacity-10">
{[...Array(20)].map((_, i) => (
<div
key={i}
class="absolute left-0 right-0 h-px bg-cyan-400"
style={{
top: `${i * 5}%`,
Expand Down Expand Up @@ -63,14 +64,14 @@ import BookOpen from '../icons/BookOpen.astro';
</div>

<div class="flex gap-6 mt-8">
<button class="group bg-cyan-500 hover:bg-cyan-400 text-black font-mono px-8 py-4 rounded-xl flex items-center gap-2 transform hover:scale-105 transition-all">
<a href="/docs/" class="group bg-cyan-500 hover:bg-cyan-400 text-black font-mono px-8 py-4 rounded-xl flex items-center gap-2 transform hover:scale-105 transition-all">
BOOT UP
<ArrowRight class="group-hover:translate-x-1 transition-transform" />
</button>
<button class="group bg-gray-800 hover:bg-gray-700 font-mono px-8 py-4 rounded-xl flex items-center gap-2 border-2 border-cyan-500 transform hover:scale-105 transition-all">
</a>
<a href="https://github.com/matthewp/robot" class="group bg-gray-800 hover:bg-gray-700 font-mono px-8 py-4 rounded-xl flex items-center gap-2 border-2 border-cyan-500 transform hover:scale-105 transition-all">
<Github />
SOURCE_CODE
</button>
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -143,25 +144,18 @@ import BookOpen from '../icons/BookOpen.astro';

<CodeBlock
title="STATE_MACHINE.robot"
code={`const titleMachine = createMachine({
states: {
viewing: {
on: { EDIT: 'editing' }
},
editing: {
on: {
SAVE: 'saving',
CANCEL: 'viewing'
}
},
saving: {
on: {
SUCCESS: 'viewing',
ERROR: 'editing'
}
}
},
initial: 'viewing'
code={`const titleMachine = createMachine('viewing', {
viewing: state({
transition('edit', 'editing')
}),
editing: state({
transition('save', 'saving'),
transition('cancel', 'viewing')
}),
saving: state({
transition('success', 'viewing'),
transition('error', 'editing')
})
});`}
/>

Expand Down
5 changes: 5 additions & 0 deletions docs2/src/styles/base.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import "./prism-vsc-dark-plus.css";

.language-js {
background: #080C13 !important;
}
143 changes: 143 additions & 0 deletions docs2/src/styles/prism-atom-dark.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit bf7c6a3

Please sign in to comment.