wip: inferred frontmatter; raw styles; more

playgrounds/default/pages/index.mdx → playgrounds/default/docs/index.mdx

@@ -2,7 +2,7 @@
 title: Vocs
 ---
 
-import { Example } from '../components/Example'
+import { Example } from '../.vocs/components/Example'
 
 [Go to Viem example](./viem)
 

playgrounds/default/package.json

@@ -5,11 +5,15 @@
   "scripts": {
     "dev": "bun ../../src/cli.ts",
     "build": "NODE_ENV=production bun ../../src/cli.ts build",
-    "preview": "bun ../../src/cli.ts preview"
+    "preview": "bun ../../src/cli.ts preview",
+    "dist:dev": "vocs",
+    "dist:build": "NODE_ENV=production vocs build",
+    "dist:preview": "vocs preview"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.17.0",
+    "vocs": "workspace:*"
   }
 }

playgrounds/tailwind/styles.css

@@ -1,3 +1,2 @@
-@tailwind base;
 @tailwind components;
 @tailwind utilities;

site/docs/index.mdx

@@ -0,0 +1,79 @@
+# Getting Started [Get started with Vocs in under a minute]
+
+## Overview
+
+Vocs is a static documentation generator powered by [Vite](https://vitejs.dev) and [React](https://react.dev).
+
+Write your content in [Markdown](#TODO) or [MDX](#TODO), and Vocs will generate a static site with a default theme.
+
+## Quick Start
+
+Scaffold a new project with the command line:
+
+```bash
+npx vocs init
+```
+
+## Manual Installation
+
+You can install Vocs in an existing project, or start from scratch, by installing Vocs as a dependency.
+
+### 1. Install
+
+First, we will install `vocs` as a dependency in our project.
+
+:::code-group
+
+```bash [npm]
+npm i vocs
+```
+
+```bash [pnpm]
+pnpm i vocs
+```
+
+```bash [yarn]
+yarn add vocs
+```
+
+```bash [bun]
+bun i vocs
+```
+
+:::
+
+### 2. Add Scripts to `package.json`
+
+After that, let's add some scripts to our `package.json` for Vocs.
+
+```json [package.json]
+{
+  "name": "example",
+  "version": "0.0.0",
+  "scripts": { // [!code focus]
+    "docs:dev": "vocs", // [!code focus] 
+    "docs:build": "vocs build", // [!code focus]
+    "docs:preview": "vocs preview" // [!code focus]
+  } // [!code focus]
+}
+```
+
+### 3. Build your First Page
+
+Create a directory called `docs`, and add a file inside of it called `index.mdx`:
+
+```markdown [docs/index.mdx]
+# Hello, World! [This is my first page]
+
+Welcome to my docs. 
+```
+
+### 4. Run
+
+Next, run the development server:
+
+```bash
+npm run dev
+```
+
+Then open up your browser to `http://localhost:5173`, and you can see your first page!

site/pages/index.mdx → site/docs/kitchen-sink/index.mdx

@@ -1,15 +1,10 @@
----
-title: Vocs
----
 
-import { Example } from '../components/Example'
+import { Example } from '../../.vocs/components/Example'
 
 # Heading 1 [This is a subheading]
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero. Suspendisse bibendum placerat enim, vitae iaculis sapien tincidunt vel. Nunc nunc dui, varius eget diam vitae, sagittis rutrum ante. Vestibulum ut nulla in ante tincidunt lacinia. Suspendisse ex orci, elementum vitae enim sed, pellentesque fermentum tortor. In bibendum sapien at nisi pharetra tincidunt. Etiam eleifend lacus dictum lorem ornare euismod. Nunc ullamcorper nunc mi, ut volutpat libero gravida id. Pellentesque cursus mi id tortor convallis eleifend.
 
-[Go to Viem example](./viem)
-
 ## Heading 2
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero. Suspendisse bibendum placerat enim, vitae iaculis sapien tincidunt vel. Nunc nunc dui, varius eget diam vitae, sagittis rutrum ante. Vestibulum ut nulla in ante tincidunt lacinia. Suspendisse ex orci, elementum vitae enim sed, pellentesque fermentum tortor. In bibendum sapien at nisi pharetra tincidunt. Etiam eleifend lacus dictum lorem ornare euismod. Nunc ullamcorper nunc mi, ut volutpat libero gravida id. Pellentesque cursus mi id tortor convallis eleifend.

site/package.json

@@ -3,13 +3,12 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vocs",
-    "build": "vocs build",
-    "preview": "vocs preview"
+    "dev": "bun ../src/cli.ts",
+    "build": "NODE_ENV=production bun ../src/cli.ts build",
+    "preview": "bun ../src/cli.ts preview"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vocs": "workspace:*"
+    "react-dom": "^18.2.0"
   }
 }