🎨 KitQL x Nextra 3 (#361)

* aa

* npm2yarn

* prettify

* ✨ UPDATE: typo

---------

Co-authored-by: jycouet <[email protected]>

README.md

@@ -28,7 +28,7 @@
 
 <br />
 
-# ⚡How to start?
+# ⚡How to start ?
 
 Demo Init 👇
 <p><a target="_blank"

packages/handles/scripts/package.js

@@ -8,9 +8,9 @@ delete pkg.publishConfig;
 delete pkg.bob;
 delete pkg.scripts;
 
-// It's not allowed to have an emtpy scripts object
+// It's not allowed to have an empty scripts object
 pkg.scripts = {
-	"test": "echo hello!"
+	test: 'echo hello!'
 };
 
 // write it to your output directory

website/next-sitemap.config.cjs

@@ -3,4 +3,5 @@
 module.exports = {
   siteUrl: 'https://www.kitql.dev/',
   generateIndexSitemap: false,
+  exclude: ['*/_meta'],
 }

website/package.json

@@ -24,17 +24,17 @@
     ]
   },
   "dependencies": {
-    "@theguild/components": "4.5.11",
-    "next": "13.4.2",
-    "next-sitemap": "4.0.9",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@theguild/components": "^6.0.1",
+    "next": "^13.5.4",
+    "next-sitemap": "^4.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@theguild/algolia": "1.1.7",
-    "@theguild/tailwind-config": "0.2.1",
-    "@types/node": "18.16.8",
-    "@types/react": "18.2.6",
-    "tailwindcss": "3.3.2"
+    "@theguild/algolia": "1.1.9",
+    "@theguild/tailwind-config": "0.3.0",
+    "@types/node": "20.8.4",
+    "@types/react": "18.2.28",
+    "tailwindcss": "3.3.3"
   }
 }

website/src/pages/_meta.ts

@@ -0,0 +1,14 @@
+export default {
+  index: {
+    title: 'Home',
+    type: 'page',
+    display: 'hidden',
+    theme: {
+      layout: 'raw',
+    },
+  },
+  docs: {
+    title: 'Docs',
+    type: 'page',
+  },
+}

website/src/pages/docs/_meta.ts

@@ -0,0 +1,7 @@
+export default {
+  index: 'Introduction',
+  'all-in': 'Getting Started',
+  demos: 'Demos',
+  setup: 'Setup',
+  extra: 'Extra',
+}

website/src/pages/docs/all-in.mdx

@@ -1,5 +1,3 @@
-import { PackageCmd } from '@theguild/components'
-
 # ⚡Let's go All-In!
 
 KitQL is primarily a list of tools/projects working together. You can opt-in or out of each any
@@ -16,11 +14,15 @@ Create a new SvelteKit project.
 npm create svelte my-graphql-app
 ```
 
-We recommend typescript, eslint, playwright, ... so answer `yes` to everything 🙃!
+We recommend TypeScript, ESLint, playwright, ... so answer `yes` to everything 🙃!
 
 ## Install `KitQL`
 
-<PackageCmd packages={['@kitql/all-in', 'houdini', '[email protected]']} />
+```sh npm2yarn
+npm i @kitql/all-in
+npm i houdini
+npm i [email protected]
+```
 
 Then depending on your needs, you can configure packages individually.
 

website/src/pages/docs/demos/_meta.ts

@@ -0,0 +1,3 @@
+export default {
+  '01_demo-init': 'Demo Init',
+}

website/src/pages/docs/setup/03_vite-plugin-watch-and-run.mdx

@@ -1,5 +1,3 @@
-import { PackageCmd } from '@theguild/components'
-
 # ⚡How to - vite-plugin-watch-and-run
 
 ## Installation
@@ -8,7 +6,9 @@ If you have `@kitql/all-in` you don't need to install this manually.
 
 If you want to install it stand alone, please do
 
-<PackageCmd packages={['-D vite-plugin-watch-and-run']} />
+```sh npm2yarn
+npm i -D vite-plugin-watch-and-run
+```
 
 ## Configuration
 

website/src/pages/docs/setup/_meta.ts

@@ -0,0 +1,5 @@
+export default {
+  '02_server': 'GraphQL Server - KitQL',
+  '01_houdini': 'GraphQL Client - Houdini',
+  '03_vite-plugin-watch-and-run': 'Vite Plugin - Watch-and-Run',
+}