build: switch Gridsome to Astro

- use astro as static site generator
2024-11-21 17:24:22 +03:00 · 2022-10-24 15:24:07 +02:00 · 2022-10-24 15:24:07 +02:00 · b664672161
commit b664672161
parent 78bd699bd8
76 changed files with 10245 additions and 34026 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,9 +1,21 @@
-*.log
-.cache
+node_modules/
+dist/
+*.tsbuildinfo
 .DS_Store
-src/.temp
-node_modules
-dist
-.env
-.env.*
-static/rss.xml
+.vercel
+_site/
+scripts/smoke/*-main/
+scripts/memory/project/src/pages/
+*.log
+package-lock.json
+.turbo/
+
+# ignore top-level vscode settings
+/.vscode/settings.json
+
+# do not commit .env files or any files that end with `.env`
+*.env
+
+packages/astro/src/**/*.prebuilt.ts
+!packages/astro/vendor/vite/dist
+packages/integrations/**/.netlify/
--- a/.node-version
+++ b/.node-version
@ -1 +0,0 @@
-16
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true
--- a/.tailwind-hint.md
+++ b/.tailwind-hint.md
@ -1,4 +0,0 @@
-https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
-
-npm uninstall tailwindcss @tailwindcss/postcss7-compat
-npm install tailwindcss@latest postcss@latest autoprefixer@latest
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,12 +0,0 @@
-{
-  "vetur.grammar.customBlocks": {
-    // https://github.com/vuejs/vetur/issues/975#issuecomment-461197031
-    "docs": "md",
-    "i18n": "json",
-    "page-query": "graphql",
-    "static-query": "graphql"
-  },
-  "emmet.includeLanguages": {
-    "vue": "html"
-  },
-}
--- a/README.md
+++ b/README.md
@ -5,38 +5,41 @@ The goal of this repository is to collect mechanical keyboard related projects (

 View the pages on [Keebfolio.netlify.app](https://keebfolio.netlify.app/) or GitHub:

- [Keyboards](docs/README.md)
- [Tools](docs/tools.md)
- [Firmware](docs/firmware.md)
- [Tutorials](docs/tutorials.md)
- [Miscellaneous](docs/miscellaneous.md)
+- [Staggered](src/pages/en/staggered.md)
+- [Ortho](src/pages/en/ortholinear.md)
+- [Split](src/pages/en/split.md)
+- [Other](src/pages/en/other.md
+- [Firmware](src/pages/en/firmware.md)
+- [Miscellaneous](src/pages/en/miscellaneous.md)
+- [Tools](src/pages/en/tools.md)
+- [Tutorials](src/pages/en/tutorials.md)

-### Contributing
+## Contributing

 Contributions are welcome!  
-To add content, edit the Markdown file in the [docs](docs/) folder and open a [Pull Request](https://help.github.com/en/articles/about-pull-requests). You can also open a new [Issue](https://github.com/BenRoe/awesome-mechanical-keyboard/issues).  
-Please use this [commit message conventions](https://www.conventionalcommits.org/en/v1.0.0/#summary).
+To add content, edit the Markdown file in the [src/pages/en](src/pages/en/) folder and open a [Pull Request](https://help.github.com/en/articles/about-pull-requests). You can also open a new [Issue](https://github.com/BenRoe/awesome-mechanical-keyboard/issues).  
+Please use this [commit message conventions](https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13).

-The project uses [Gridsome](https://gridsome.org) as a Static Site Generator.
+The project uses [Astro](https://astro.build) as a Static Site Generator.
 [![Netlify Status](https://api.netlify.com/api/v1/badges/06821f1d-3e33-4bd4-92b2-4e44f3583060/deploy-status)](https://app.netlify.com/sites/keebfolio/deploys)

 #### Creating local development environment

 ##### Creating Github Auth Token

-1. Go to `https://github.com/settings/tokens`
-2. Click "Generate new token"
-3. Set note and expiration, then click "Generate token"
-4. Copy generated token, you will need it in another step
+1. ~~Go to `https://github.com/settings/tokens`~~
+2. ~~Click "Generate new token"~~
+3. ~~Set note and expiration, then click "Generate token"~~
+4. ~~Copy generated token, you will need it in another step~~

 ##### Installation and running local version

-1. Create environment variables:
-   - `GITHUB_AUTH_TOKEN` with generated token as its value.
-   - `GITHUB_API_V4_URL` with value `https://api.github.com/graphql`
-2. Clone repository
-3. `npm install`
-5. `npm run develop`
+1. ~~Create environment variables:~~
+   - ~~`GITHUB_AUTH_TOKEN` with generated token as its value.~~
+   - ~~`GITHUB_API_V4_URL` with value `https://api.github.com/graphql`~~
+2. ~~Clone repository~~
+3. ~~`npm install`~~
+5. ~~`npm run develop`~~

 ### License

--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -0,0 +1,13 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+
+import image from "@astrojs/image";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [// Enable Preact to support Preact JSX components.
+  preact(), // Enable React for the Algolia search component.
+  react(), image()],
+  site: `https://keebfolio.netlify.app`
+});
--- a/docs/README.md
+++ b/docs/README.md
@ -1,254 +0,0 @@
-
-## Keyboards
-| Name | Available Files | Tags | Image |
-| --- | --- | :---: | :---: |
-| [_33-Keyboard](https://github.com/tominabox1/_33-Keyboard) | pcb, case | gerber-only, stl | <img src="https://camo.githubusercontent.com/d722817b92b9dc25fba6a236ac0a128f76339854/68747470733a2f2f692e696d6775722e636f6d2f305775663861542e706e67" width="200px" /> |
-| [00Key](https://github.com/jefjef/00Key) | pcb, case | 75%, teensy, ssd1306, oled, backlight, through hole | <img src="https://github.com/jefjef/00Key/blob/master/images/build/DSCF2616.JPG?raw=true" width="200px" /> |
-| [ANHEDRAL](https://github.com/eswai/anhedral) | pcb, case | pro micro | <img src="https://github.com/eswai/anhedral/raw/master/anhedral1-1.jpeg" width="200px" /> |
-| ~~Akihabara~~ | pcb, case | 40%, 3d print | |
-| [Alpha](https://github.com/PyrooL/Alpha) | pcb, case | <30% | <img src="https://i.imgur.com/alNWnhZ.jpg" width="200px" /> |
-| [Arisu Keyboard PCB](https://github.com/FateNozomi/arisu-pcb) | pcb, case |  | <img src="https://camo.githubusercontent.com/52126fe22185eb48a922b8f7a2a2726cb2f19226/68747470733a2f2f692e696d6775722e636f6d2f6b6e74353138452e6a7067" width="200px" /> |
-| [Atreus](https://github.com/technomancy/atreus) | pcb, case | 40% | <img src="https://github.com/technomancy/atreus/raw/master/atreus.jpg" width="200px" /> |
-| [Atreus62](https://github.com/profet23/atreus62) | pcb, case | 60% | <img src="https://raw.githubusercontent.com/profet23/atreus62/master/images/nantucket-atreus62.jpg" width="200px" /> |
-| [Bakeneko 60](https://github.com/kkatano/bakeneko-60) | pcb, case | 60%, usb-c, atmega32U4 | <img src="https://i.imgur.com/GM0IH8R.jpg" width="200px" /> |
-| [Bakeneko 65](https://github.com/kkatano/bakeneko-65) | pcb, case | 65%, usb-c, atmega32U4 | <img src="https://i.imgur.com/Va1caBv.jpg" width="200px" /> |
-| [Bevi](https://github.com/sendyyeah/bevi) | pcb, case | 60%, numpad, pro micro, atmega32U4 | <img src="https://user-images.githubusercontent.com/3537856/115094858-48ef3f80-9f49-11eb-9e5f-1ed481c59b7c.jpg" width="200px" /> |
-| [BMEK - Bemeier Ergonomic Keyboard](https://github.com/Bemeier/bmek) | pcb, case | ergo, hotswap, usb-c | <img src="https://camo.githubusercontent.com/35605dc5a4f1219613ac62d6c23c24716f7039cd/68747470733a2f2f692e696d6775722e636f6d2f5a4d323775506f2e6a7067" width="200px" /> |
-| [CozyKeys Bloomer](https://github.com/cozykeys/bloomer) | pcb, case | 75%, underglow | <img src="https://camo.githubusercontent.com/d06fa0fd471810b747137c0828502567c2323fe3/687474703a2f2f6173736574732e636f7a796b6579732e78797a2f696d616765732f6b6579626f617264732f626c6f6f6d65722f626c6f6f6d65722d616e676c652d325f383030783830302e6a7067" width="200px" /> |
-| [CPM43](https://github.com/Gtrx0/cpm43) | pcb | 40%, 4x12, underglow, atmega32U4, usb-c, esd | <img src="https://raw.githubusercontent.com/Gtrx0/cpm43/master/Renders/Render_Unpopulated_Front.png" width="200px" /> |
-| [CW40](https://github.com/ktec-hq/CW40) | pcb | 40%, underglow, alps | |
-| [Discipline](https://github.com/coseyfannitutti/discipline) | pcb, case | 65%, staggered, through hole, usb-c,  | <img src="https://github.com/coseyfannitutti/discipline/blob/master/doc/images/discipline.jpeg?raw=true" width="200px" /> |
-| [Env-KB](https://github.com/Envious-Data/Env-KB) | pcb, case | 65%, staggered, through hole, usb-c, rpi-pico  | <img src="https://github.com/Envious-Data/Env-KB/blob/main/_pictures/PCB3.JPG?raw=true" width="200px" /> |
-| [Flounder](https://hackaday.io/project/167912-flounder-keyboard) | pcb | micro-usb, kailh-choc, low-profile | <img src="https://cdn.hackaday.io/images/4931491573980185604.JPG" width="200px" /> |
-| [~~Gameboy Keyboard case~~](https://web.archive.org/web/20200521235621/https://www.thingiverse.com/thing:3007828) | case, pcb | 3d print, pcb | |
-| [GH60](https://github.com/komar007/gh60) | pcb | 60%, atmega32U4 | <img src="https://camo.githubusercontent.com/fdc087b8362f264e37c17212c78026bfaaa285be/687474703a2f2f626c6f672e6b6f6d61722e62652f77702d636f6e74656e742f75706c6f6164732f323031332f30322f747474312d363430783235372e6a7067" width="200px" /> |
-| [Grabert](https://github.com/KoBussLLC/grabert-hardware) | pcb, case | 60%, usb-c, oled, rotary-encoder, stm32f072v8t6 | <img src="https://raw.githubusercontent.com/KoBussLLC/grabert-hardware/e04fabde3759e065457ee6ca55711569b234af34/doc/grabert_white_canvas_angled.jpg" width="200px" /> |
-| [HacKeyboard](https://github.com/masaleiro/HacKeyboard) | pcb, case |  | <img src="https://i0.wp.com/lh3.googleusercontent.com/-_3srWrw52N0/VkKU25cRm-I/AAAAAAAAME8/l_oKwqZEeyk/w2048-o/Hackeyboard%252520photoshoot%25252041.JPG?w=200" width="200px" /> |
-| [Isometria75](https://github.com/ebastler/isometria-75) | pcb, case | 75%, iso, sk6812-mini, rotary-encoder, stm32f072cbt6 | <img src="https://camo.githubusercontent.com/ba20d0e50fa859956382800780cadcf3bd9a7d2b2f69852b7a40aff89d78442f/68747470733a2f2f6d7077722e78797a2f70726f6a656374732f69736f6d657472696137352f66756c6c2f70726f746f5f76315f342e4a5047" width="200px" /> |
-| [Launch](https://github.com/system76/launch) | pcb, case | usb-hub, staggered, per-switch-rgb, rgb,  | <img src="https://media.githubusercontent.com/media/system76/launch/master/chassis/launch-chassis.png" width="200px" /> |
-| [Le Chiffre](https://github.com/tominabox1/Le-Chiffre-Keyboard) | pcb, case | atmega32u4, ergo, smd, stl, 3d print | <img src="https://camo.githubusercontent.com/f5bc3eaabb92bb103ba741b7530000153e5bf182/68747470733a2f2f692e696d6775722e636f6d2f515834744e6f6d2e706e67" width="200px" /> |
-| [Litl](https://github.com/mohoyt/litl) | pcb, case | pro micro, 40%, oled, rotary-encoder, through hole | <img src="https://raw.githubusercontent.com/mohoyt/litl/main/img/litl_3.jpeg" width="200px" /> |
-| ~~Mullet~~ | pcb, case | staggered, smd, usb-c, underglow, atmega32u4 | <img src="https://camo.githubusercontent.com/2dac93377903e99500664ec9f6908cd68746fd63/68747470733a2f2f692e696d6775722e636f6d2f45424f4d6268482e6a7067" width="200px" /> |
-| [Mysterium](https://github.com/coseyfannitutti/mysterium) | pcb, case | tkl, ATMEGA32A, usb-c | <img src="https://github.com/coseyfannitutti/mysterium/blob/master/doc/images/mysterium.jpg?raw=true" width="200px" /> |
-| [Ph0enix](https://github.com/shockdesign/ph0enix-keyboard) | pcb | 40%, rp2040, raspberry pi pico | <img src="https://raw.githubusercontent.com/shockdesign/ph0enix-keyboard/main/Images/pcb-render.png" width="200px" /> |
-| [Pheromone](https://github.com/luantty2/pheromone_keyboard) | pcb, case | atmega32U4,midi encoder, midi slider, oled | <img src="https://i.imgur.com/Tf8zDl9.jpg" width="200px" /> |
-| [Plain60-c](https://github.com/Maartenwut/plain60-c) | pcb | 60%, usb-c, atmega32U4 | <img src="https://camo.githubusercontent.com/85b21ccd9dfe95a86407fda6b1ee7ba14ec57bf4/68747470733a2f2f692e696d6775722e636f6d2f4f774f503956622e706e67" width="200px" /> |
-| [Pteron](https://github.com/FSund/pteron-keyboard) | case | 3x5, 3x6, 4x6, handwiring, pro micro | <img src="https://camo.githubusercontent.com/9f0a06184893760528f1c5db991c5463d403b528/68747470733a2f2f692e696d6775722e636f6d2f395168506c56442e6a7067" width="200px" /> |
-| [Reviung](https://github.com/gtips/reviung) | pcb, case | ergo, vertically staggered, pro micro, ws2812b, underglow | <img src="https://raw.githubusercontent.com/gtips/reviung/master/reviung41/image/REVIUNG41B-1.jpg" width="200px" /> |
-| [Sesame](https://github.com/kb-elmo/sesame) | pcb, case | ergonomic, through-hole, atmega32A, usb-c | <img src="https://i.imgur.com/IdudbWjl.jpg" width="200px" /> |
-| [SB-147](https://github.com/sealclubber/SB-147) | case | 3d print, handwiring | <img src="https://i.imgur.com/VWGHzfU.jpg" width="200px" /> |
-| [Solheim68 (Varmilo VA68M replacement)](https://github.com/evyd13/solheim68) | pcb | 65%, atmega328p | <img src="https://camo.githubusercontent.com/ed41f8d7c540835426b0271ec79824c8f86bba7e43628aecff6c129ff017c247/68747470733a2f2f692e696d6775722e636f6d2f694370794554792e706e67" width="200px" /> |
-| [Tanuki](https://github.com/SethSenpai/Tanuki) | pcb, case | 40%, underglow | <img src="https://github.com/SethSenpai/Tanuki/raw/master/Img/glamour1.jpg" width="200px" /> |
-| [Entropy](https://github.com/joshajohnson/entropy) | pcb, case | 96%, southpaw, rgb, led, split space, encoder | <img src="https://raw.githubusercontent.com/joshajohnson/entropy/master/docs/entropy.jpeg" width="200px" /> |
-| [Tartan](https://github.com/hsgw/tartan) | pcb, case | 60%, through hole, Atmega328p | <img src="https://github.com/hsgw/tartan/raw/master/doc/img/tartan.jpg" width="200px" /> |
-| [Tesseract](https://github.com/Electroner/Teclado-Teseracto) | pcb, case | spanish, full-105 iso, atmega32u4, moddable | <img src="https://raw.githubusercontent.com/Electroner/Teclado-Teseracto/main/Imagenes/Keyboard0.jpg" width="200px" /> |
-| [Tg4x](https://github.com/MythosMann/tg4x) | pcb, case | pro micro, 40% | <img src="https://raw.githubusercontent.com/MythosMann/tg4x/master/pcb.jpg" width="200px" /> |
-| [Voyager](https://github.com/ai03-2725/Voyager) | pcb | 60%, ansi, iso, rgb, led | <img src="https://raw.githubusercontent.com/ai03-2725/Voyager104/master/Renders/Front.png" width="200px" /> |
-| [XMMX TKL](https://geekhack.org/index.php?topic=93422.0) | pcb |  | <img src="https://i.imgur.com/otn8LT3.jpg" width="200px" /> |
-| []() |  |  | <img src="" width="200px" /> |
-
-## Ortholinear Keyboards
-| Name | Available Files | Tags | Image |
-| --- | --- | :---: | :---: |
-| [Alpsie](https://github.com/larrbo/odd-rocket/tree/master/alpsie) | pcb, case | 4x12, pro micro, alps, plate | <img src="https://3.bp.blogspot.com/-IAVUSnTmtZA/XArbAHFK5wI/AAAAAAAABeE/FKTl072R1CkIZwXr4AVCZ-_qG7uRjHw9wCLcBGAs/s640/IMG_20181128_194036.jpg" width="200px" /> |
-| [Cheap_boi](https://github.com/MangoIV/cheap_boi) | pcb, case | atmega32u4, ssd1306, oled | <img src="https://github.com/MangoIV/cheap_boi/blob/master/renders/pcb_front.jpg?raw=true" width="200px" /> |
-| [Contra](https://github.com/ai03-2725/Contra) | pcb | 4x12 | <img src="https://raw.githubusercontent.com/ai03-2725/Contra/master/Images/back-2.0.jpg" width="200px" /> |
-| [Crisco](https://github.com/ch604/crisco) | pcb | 2x12, pro micro, kailh-choc, oled, ssd1306, steno, led | <img src="https://raw.githubusercontent.com/ch604/crisco/main/crisco-v0.3.png" width="200px" /> |
-| [DIY Low-Profile Ortholinear](https://www.reddit.com/r/MechanicalKeyboards/comments/8sy17h/diy_low_profile_ortho/) ([PCB File](https://easyeda.com/7zark7/Kailh-Ortholinear)) | pcb | 14x6, low profile, teensy | <img src="https://i.imgur.com/cfNpqEE.jpg" width="200px" /> |
-| [Dorsch 40k](https://hackaday.io/project/174095-dorsch-40k-keyboard) | pcb | 4x10, micro-usb, kailh-choc, low-profile | <img src="https://cdn.hackaday.io/images/3652331597248546262.jpg" width="200px" /> |
-| [Dorsch 48k](https://hackaday.io/project/174917-dorsch-48k-keyboard) | pcb | 4x12, micro-usb, kailh-choc, low-profile | <img src="https://cdn.hackaday.io/images/1324301600590596407.jpg" width="200px" /> |
-| [Eternal Keypad](https://github.com/duckyb/eternal-keypad) | pcb, case | 5x7, pro micro, gaming, keypad | <img src="https://user-images.githubusercontent.com/27895007/144914161-c3f6f8ba-5b78-4c85-b8e2-320ba73d80ce.png" width="200px" /> |
-| [Framework](https://github.com/stevennguyen/framework) | pcb, case | 5x12, through-hole, usb-c, rotary-encoder | <img src="https://raw.githubusercontent.com/stevennguyen/framework/master/images/1.jpg" width="200px" /> |
-| [Gherkin](https://git.40percent.club/di0ib/Misc/src/branch/master/gherkin%20pack) | pcb | 30%, 3x10 |  <img src="https://git.40percent.club/di0ib/Misc/raw/branch/master/gherkin%20pack/gherkinpack.png" width="200px" /> |
-| [Helix](https://github.com/MakotoKurauchi/helix) | pcb, case | split, oled | <img src="https://camo.githubusercontent.com/348c95ff3baea20626e282b1a719eea49d0897b9/68747470733a2f2f692e696d6775722e636f6d2f5842416d796e4e2e6a7067" width="200px" /> |
-| [Lumberjack](https://github.com/peej/lumberjack-keyboard) | pcb | 5x12, through-hole, usb-mini, ATMEGA328P-PU | <img src="https://raw.githubusercontent.com/peej/lumberjack-keyboard/master/images/tofu-sa-vilebloom.jpg" width="200px" /> |
-| [Koda](https://github.com/larrbo/odd-rocket/tree/master/koda) | pcb, case | 4x12, pro micro, kailh-choc | <img src="https://4.bp.blogspot.com/-E9gGZbziicI/WwoNKDP-YPI/AAAAAAAABYk/IXV4gGrcQKo5Bqf7CRVpR_zYH2SCxAXwACLcBGAs/s400/IMG_20180522_231738.jpg" width="200px" /> |
-| [Otterlinear-keyboard](https://github.com/Jana-Marie/otterlinear-keyboard) | pcb, case | 5x12, stm32f042, kailh-choc | <img src="https://raw.githubusercontent.com/Jana-Marie/otterlinear-keyboard/main/img/FG7vpoGXIAYDPLb.jpeg" width="200px" /> |
-| [Plaid](https://github.com/hsgw/plaid) | pcb | 4x12, atmega328p, through hole | <img src="https://user-images.githubusercontent.com/2714926/49872071-481ae000-fe5b-11e8-963d-8aaa3a653e4d.jpg" width="200px" /> |
-| [Planck THK](https://github.com/olkb/planck_thk) | pcb, case | 4x12, rotary encoder | <img src="https://i.imgur.com/Jiy1jLN.jpg" width="200px" /> |
-| [PouetPouet](https://github.com/dkm/pouetpouet-board) | pcb  | 5x12, smd, usb-c, STM32F072CBT6 | <img src="https://raw.githubusercontent.com/dkm/pouetpouet-board/master/images/nyan-keeb.jpg" width="200px" /> |
-| [PRKL30](https://github.com/ErkHal/prkl30) | pcb, case | 30%, pro micro, bluetooth, underglow | <img src="https://camo.githubusercontent.com/9b39ee253a7cdcbfdbe80f7ef36ddd3ad5b17382/68747470733a2f2f692e696d6775722e636f6d2f4e6b67493339492e6a7067" width="200px"/> |
-| [Punk75](https://github.com/dsanchezseco/punk75) | pcb, case | 5x15, through-hole, usb-c, rotary-encoder, atmega32a-pu | <img src="https://raw.githubusercontent.com/dsanchezseco/punk75/master/generated/images/punk75_front.jpg" width="200px" /> |
-| [QOL56](https://github.com/eswai/QOL56) | pcb, case | 4x14, pro micro, underglow, rgb | <img src="https://github.com/eswai/QOL56/raw/master/qol56-7.jpg" width="200px" /> |
-| [SharkPCB](https://github.com/Gondolindrim/SharkPCB) | pcb, case | 4x12, rotary encoder, STM32, underglow, 3d print | <img src="https://raw.githubusercontent.com/Gondolindrim/SharkPCB/master/graphics/renders/top.png" width="200px" /> |
-| [Splitish](https://github.com/RSchneyer/splitish) | pcb | 4x12, ortho, choc, pro micro | <img src="https://camo.githubusercontent.com/24188937548af34ccc12458d4243dc0a079b424f3fd0b5161b935e8f1a96fe4b/68747470733a2f2f692e696d6775722e636f6d2f36676e595049702e6a7067" width="200px" /> |
-| [Ukiha](https://github.com/e3w2q/ukiha-keyboard) | pcb, case | 5x12, smd, micro-usb | <img src="https://raw.githubusercontent.com/e3w2q/ukiha-keyboard/main/doc/ukiha.jpg" width="200px" /> |
-| [The Uni](https://github.com/petercpark/The_Uni) | pcb, keycaps | ortho, steno, pro micro | <img src="https://raw.githubusercontent.com/petercpark/The_Uni/main/Pics/close-up-uni.jpg" width="200px" /> |
-| []() |  |  | <img src="" width="200px" /> |
-
-## Split Keyboards
-| Name | Available Files | Tags | Image |
-| --- | --- | :---: | :---: |
-| [36keys](https://github.com/davidphilipbarr/36keys) | pcb | 4x5, vertically staggered, thumb keys, caseless, pro micro | <img src="https://raw.githubusercontent.com/davidphilipbarr/36keys/master/34Keys/Cradio%20F/34.png" width="200px" /> |
-| [5plit](https://github.com/larrbo/odd-rocket/tree/master/5plit%20-kailh) | pcb, case | 4x5, plate, pro micro, kailh choc | <img src="https://2.bp.blogspot.com/-bmGeoE6LDsY/WuntJ_vPaJI/AAAAAAAABPs/hSzlyzQB9x0DCwZeqpAm8_qTjESYyPDIACLcBGAs/s400/yijoz5ywkzg01.jpg" width="200px" /> |
-| [Apoptosis](https://github.com/pseudoku/Apoptosis) | pcb | 3x6, vertically staggered, thumb keys | <img src="https://raw.githubusercontent.com/pseudoku/Apoptosis/master/Apoptosis_PCB.jpg" width="200px" /> |
-| [Chimera Ortho](https://github.com/GlenPickle/Chimera) | pcb | split, wireless | <img src="https://i.imgur.com/WqYzK5J.jpg" width="200px" /> |
-| [Chimera Ergo/Ergo Mini/Ergo 42](https://github.com/GlenPickle/Chimera) | pcb | split, wireless, vertically staggered | <img src="https://i.imgur.com/AA6ycMQ.jpg" width="200px"> <img src="https://i.imgur.com/LAny3ue.jpg" width="200px" /> <img src="https://i.imgur.com/wfTsIKV.jpg" width="200px" /> |
-| [Comet46](https://github.com/satt99/comet46-hardware) | pcb, case | split, wireless, 40%, column-staggered, atmega32u4, nrf51822 | <img src="https://user-images.githubusercontent.com/39004890/50396817-a1660600-07af-11e9-8611-3156c635db43.jpg" width="200px" /> |
-| [Crkbd](https://github.com/foostan/crkbd) | pcb, case | split, oled, 3x6, vertically staggered, thumb keys, kailh choc | <img src="https://user-images.githubusercontent.com/736191/40575636-6fba63a4-6123-11e8-9ca0-3f990f1f9f4c.jpg" width="200px" /> |
-| [Crkbd x jian](https://github.com/kluelesskk/crkbd) | pcb, case | split, oled, 3x6, vertically staggered, thumb keys, kailh choc | <img src="https://i.imgur.com/QqnAWvG.jpg" width="200px" /> |
-| [Dactyl](https://github.com/adereth/dactyl-keyboard) | pcb, case | split, thumb keys, 5x6, 60%, 3d print | <img src="https://raw.githubusercontent.com/adereth/dactyl-cave/master/resources/glamourshot.png" width="200px" /> |
-| [Dactyl-ManuForm](https://github.com/tshort/dactyl-keyboard) | pcb, case | split, thumb keys, 4x5, 5x6, 40%, 60%, 3d print | <img src="https://camo.githubusercontent.com/a8dc88b0a973913a28a2373a7f3a9a3031af2672/687474703a2f2f692e696d6775722e636f6d2f4c646a456872522e6a7067" width="200px" /> |
-| [Djinn](https://github.com/tzarc/djinn) | pcb, case | 4x7, split, rotary encoder, underglow  | <img src="https://camo.githubusercontent.com/662433910ee7010207ec21f736a1d2841608ebab/68747470733a2f2f692e696d6775722e636f6d2f695a6d454732652e6a7067" width="200px" /> |
-| [DMOTE](https://github.com/veikman/dactyl-keyboard) | case | concave, thumb keys, split, alps, mx | <img src="https://camo.githubusercontent.com/85b0066d64467a10e0d0bcbdde26e6726eb95fde/687474703a2f2f76696b746f722e65696b6d616e2e73652f696d6167652f646d6f74652d322d746f702d646f776e2d766965772f646973706c6179" width="200px" /> |
-| [DracuLad](https://github.com/MangoIV/dracuLad) | pcb, case | 3x5, 36keys, split, rotary encoder, underglow  | <img src="https://raw.githubusercontent.com/mangoiv/draculad/master/pictures/rev2/fr4_glamour2.jpeg" width="200px" /> |
-| [Elephant42](https://github.com/illness072/elephant42) | pcb, case | split, pro micro | <img src="https://github.com/illness072/elephant42/blob/master/what-is-this.jpg?raw=true" width="200px" /> |
-| [Ergo42](https://github.com/Biacco42/Ergo42) | pcb, case | split, 4x7 | <img src="https://raw.githubusercontent.com/Biacco42/Ergo42/readme/readme_image/ergo42_image.jpg" width="200px" /> |
-| [ErgoDash](https://github.com/omkbd/ErgoDash) | pcb, case | 5x7, plate, led, split, thumb key | <img src="https://github.com/omkbd/picture/blob/master/Ergodash.jpg?raw=true" width="200px" /> |
-| [ErgoDash Mini](https://github.com/omkbd/ErgoDash/tree/master/mini) | pcb, case | 4x7, plate, led, split, thumb key | <img src="https://github.com/omkbd/picture/blob/master/Ergodashmini.jpg?raw=true" width="200px" /> |
-| [ErgoDone](https://github.com/ktec-hq/ErgoDone) | pcb | pro micro | |
-| [ErgoDox official](https://github.com/Ergodox-io) | pcb, acryl case, 3d printable case | split, thumb keys, 5x7, 3d print | <img src="https://github.com/Ergodox-io/ergodox-io/blob/master/src/img/ErgoDox-original-min.png?raw=true" width="200px" /> |
-| [Ergoinu](https://github.com/hsgw/ergoinu) | pcb, case | split, plate, mx, pro micro | <img src="https://raw.githubusercontent.com/wiki/hsgw/ergoinu/images/keyboard_top.JPG" width="200px" /> |
-| [ErgoMac](https://github.com/LilBigMacky/ergomac) | pcb | split, vertically staggered, thumb keys | <img src="https://i.redd.it/6ndsci0gt0x11.jpg" width="200px" /> |
-| [ErgoMax](https://github.com/LouWii/ErgoMax) | pcb, case | split, pro micro, thumb keys, hotswap | <img src="https://raw.githubusercontent.com/LouWii/ErgoMax/master/Guide/img/ergomax-assembled.jpg" width="200px" /> |
-| [ErgoTravel](https://github.com/jpconstantineau/ErgoTravel) | pcb, case | split, vertically staggered, thumb keys | <img src="https://i.imgur.com/DY0FxcM.jpg" width="200px" /> |
-| [Ferris](https://github.com/pierrechevalier83/ferris) | pcb, case | split, pro micro, thumb keys, choc | <img src="https://camo.githubusercontent.com/d68fa1c55c9b2507ee6ae27944c717cba341ae1b/68747470733a2f2f692e696d6775722e636f6d2f714f76345844652e6a706567" width="200px" /> |
-| [Fortitude60](https://github.com/Pekaso/fortitude60) | pcb, case | 60%, 4x6, split, vertically staggered | <img src="https://camo.githubusercontent.com/b5a0fefe70132b6c9777bbba546fcd872d97ceae/68747470733a2f2f692e696d6775722e636f6d2f54627a6e7767672e6a7067" width="200px" /> |
-| [Fourier](https://github.com/keebio/fourier) | pcb | split, staggered | <img src="https://camo.githubusercontent.com/3dadc57ab6cb05e7d43de5b1570f60c645914347/68747470733a2f2f63646e2e73686f706966792e636f6d2f732f66696c65732f312f313835312f353132352f70726f64756374732f696d6167655f31643338373933632d656262362d346466382d626162352d3933333136323632386665355f3130323478313032344032782e6a70673f763d31353139393731373937" width="200px" /> |
-| [Jiran](https://github.com/Ladniy/jiran-breakoff) | pcb, case | split, pro micro, thumb keys, hotswap | <img src="https://camo.githubusercontent.com/7097bb276026ce3e9a1ae02c34cc7b094c1c6d54/68747470733a2f2f692e696d6775722e636f6d2f486e41324f6e632e706e67" width="200px" /> |
-| [Jorne](https://github.com/joric/jorne) | pcb, case | split, pro micro, thumb keys, oled, underglow | <img src="https://camo.githubusercontent.com/b78430a5f5b8c28401e374afc1fa30fb7ef74041/68747470733a2f2f692e696d6775722e636f6d2f36706f775a31482e6a7067" width="200px" /> |
-| [KeySeeBee](https://github.com/TeXitoi/keyseebee) | pcb | split, STM32F072CBT6, smd, choc | <img src="https://github.com/TeXitoi/keyseebee/blob/master/images/keyseebee.jpg?raw=true" width="200px" /> |
-| [Kissboard](https://github.com/fhtagnn/kissboard) | pcb, case | split, thumb keys, vertically staggered, mx, bluetooth, pro micro, 3d print | <img src="https://github.com/fhtagnn/kissboard/blob/master/schematics/kissboard_top.png?raw=true" width="200px" /> |
-| [Kotonoha-BONSAI](https://github.com/MasayukiFukada/kotonoha_keyboards/tree/master/bonsai) | pcb, case | split, pro micro | <img src="https://github.com/MasayukiFukada/kotonoha_keyboards/blob/master/docs/images/kotonoha_bonsai.jpg?raw=true" width="200px" /> |
-| [Kotonoha-IAI](https://github.com/MasayukiFukada/kotonoha_keyboards/tree/master/iai) | pcb, case | split, pro micro | <img src="https://github.com/MasayukiFukada/kotonoha_keyboards/blob/master/docs/images/kotonoha_iai.jpg?raw=true" width="200px" /> |
-| [Kotonoha-WABISABI](https://github.com/MasayukiFukada/kotonoha_keyboards/tree/master/wabisabi) | pcb, case | split, pro micro | <img src="https://github.com/MasayukiFukada/kotonoha_keyboards/blob/master/docs/images/kotonoha_wabisabi.jpg?raw=true" width="200px" /> |
-| [Lily58](https://github.com/kata0510/Lily58) | pcb, case | split, oled,  4x6 | <img src="https://user-images.githubusercontent.com/6285554/47264498-53384a80-d553-11e8-907a-a03c6f2c5893.JPG" width="200px" /> |
-| [Let's Split](https://github.com/climbalima/let-s-Split-v2) | pcb, [case](https://qmk.fm/keyboards/lets_split/) | split | <img src="https://camo.githubusercontent.com/dfbf83ee712079b862fccb951aefbb508b8a631d/687474703a2f2f692e696d6775722e636f6d2f797551754e4a552e6a7067" width="200px" /> |
-| [Lyra](https://github.com/park-csu/Lyra) | pcb, case | split, ortho, pro micro, rotary-encoder | <img src="https://raw.githubusercontent.com/park-csu/Lyra/main/assets/built.jpg" width="200px" /> |
-| [Manta 60](https://github.com/KamoNanban/Manta60) | pcb, case | 5x14, split, pro micro | <img src="https://pbs.twimg.com/media/Dy80wXGU0AAGZdK.jpg:large" width="200px" /> |
-| [Medusa](https://github.com/Gtrx0/Medusa) | pcb, case | 5x7, split, plate, bluetooth, nrf51822 | <img src="https://raw.githubusercontent.com/Gtrx0/Medusa/master/Renders/Front_Unpopulated.png?token=Anj1gDvVpb9Dt8Z8Zj3Az4azN7Fm_8hTks5bm9WJwA%3D%3D" width="200px" /> |
-| [MiniDox pcb](https://github.com/That-Canadian/MiniDox_pcb) | pcb | split, 3x5, vertically staggered, thumb keys | <img src="https://camo.githubusercontent.com/d8925d5e754c3a8998db4ad9874c1d8b093901f2/687474703a2f2f692e696d6775722e636f6d2f69576233794f302e6a7067" width="200px" /> |
-| [Minisplit](https://github.com/kata0510/minisplit) | pcb, case | split, 4x6 | <img src="https://camo.githubusercontent.com/74766a3dbaf2b8a9ab8dae5c6cf656a7a0b9a9ac/68747470733a2f2f692e696d6775722e636f6d2f7a7767417251562e706e67" width="200px" /> |
-| [Mitosis](https://github.com/reversebias/mitosis-hardware) | pcb, case | split, wireless | <img src="https://i.imgur.com/gApMkzz.jpg" width="200px" /> |
-| [Orbit](https://github.com/ai03-2725/Orbit) | pcb | split, 5x7, thumb keys, usb-c | <img src="https://raw.githubusercontent.com/ai03-2725/Orbit/master/Images/PCB-R1.5.jpg" width="200px" /> |
-| [Ortholink-5x4](https://easyeda.com/andrew_8176/ortholink-5x4) [Build Guide](https://imgur.com/gallery/scsFThK) | pcb, case | 38keys, split, smd | <img src="https://i.imgur.com/1Yydd96.jpg" width="200px" /> |
-| [Pinky2](https://github.com/tamanishi/Pinky2) [Pinky3](https://github.com/tamanishi/Pinky3) [Pinky4](https://github.com/tamanishi/Pinky4) | pcb, case | 2x5 / 3x7 / 4x7, vertically staggered, thumb keys, split, through hole | <img src="https://raw.githubusercontent.com/tamanishi/Pinky3/master/product.jpg" width="200px" /> |
-| [Pteron36](https://github.com/harshitgoel96/pteron36-split-keyboard) | pcb, case | 3x5, split, oled, rotary encoder, pro micro, through hole, vertically staggered, thumb keys | <img src="https://github.com/harshitgoel96/pteron36-split-keyboard/blob/main/images/built.jpeg?raw=true" width="200px" /> |
-| [Redox](https://github.com/mattdibi/redox-keyboard) | case | split, thumb keys, opensCad, 3d print | <img src="https://cdn.thingiverse.com/renders/62/c5/d6/91/6f/f23021b44a5e59a6838fc8b440fb8b56_preview_featured.jpg" width="200px" /> |
-| [Science](https://github.com/peej/for-science-keyboard) | pcb | split, arduino, 5x5 | <img src="https://camo.githubusercontent.com/fecf6f7bca9ec8b93e4031caa1ca3442cfb5a5f1/68747470733a2f2f692e696d6775722e636f6d2f666a6e546b42312e6a7067" width="200px" /> |
-| [Sector](https://github.com/omkbd/Sector) | pcb, case | split, arduino, pro micro, oled | <img src="https://raw.githubusercontent.com/omkbd/Sector/master/Picture/SectorC.jpg" width="200px" /> |
-| [Sofle Keyboard](https://github.com/josefadamcik/SofleKeyboard?utm_source=share&utm_medium=ios_app&utm_name=iossmf) | pcb, case | 5x6, rotary, pro micro, split | <img src="https://github.com/josefadamcik/SofleKeyboard/blob/master/Images/IMG_20200126_114622.jpg?raw=true" width="200px" /> |
-| [Space_ginny](https://github.com/MangoIV/space_ginny) | pcb, case | asetniop, ssd1306, oledsplit, pro micro | <img src="https://github.com/MangoIV/space_ginny/blob/main/pictures/space_ginny_04.jpg?raw=true" width="200px" /> |
-| [Split Infinitive](https://github.com/peej/for-split-keyboard/blob/master/README.md) | pcb | split, 5x6, pro micro | <img src="https://github.com/peej/for-split-keyboard/raw/master/pcb.png" width="200px" /> |
-| [Steal This Keyboard](https://github.com/obosob/steal_this_keyboard) | pcb | split, 3x5, vertically staggered, thumb keys, pro micro | <img src="https://raw.githubusercontent.com/obosob/steal_this_keyboard/master/pcb_front.png" width="200px" /> |
-| [Taira](https://github.com/strayer/taira-keyboard) | pcb, case | 5x6, vertically staggered, thumb keys, kailh choc, pro micro | <img src="https://github.com/strayer/taira-keyboard/raw/main/docs/taira-1.0.jpg" width="200px" /> |
-| [Torn](https://github.com/rtitmuss/torn) | pcb, case | split, rotary-encoder, oled, 3x6, vertically staggered, thumb keys, atmega328p, through hole | <img src="https://raw.githubusercontent.com/rtitmuss/torn/master/doc/img/torn.jpg" width="200px" /> |
-| [Ultimate Hacking Keyboard](https://github.com/UltimateHackingKeyboard/electronics) | pcb | split, display, 31FL3731 | <img src="https://ultimatehackingkeyboard.com/wordpress/wp-content/uploads/2018/07/uhk-split-palm-rest-1920.jpg" width="200px" /> |
-| [Xenon Keyboard](https://github.com/narinari/xenon-keyboard) | pcb, case | split, vertically staggered, thumb keys, oled, pro micro | <img src="https://raw.githubusercontent.com/narinari/xenon-keyboard/master/resources/example/xenon-classic_godspeed-custom-sa.jpg" width="200px" /> |
-| [YAEMK Keyboard](https://karlk90.github.io/yaemk-split-kb/) | pcb, case | split, 5x8, vertically staggered, hotswap, thumb keys, oled, rgb led, arm, risc-v, usb-c | <img src="https://raw.githubusercontent.com/KarlK90/yaemk-split-kb/main/docs/images/1_yaemk_wide.jpg" width="200px" /> |
-| [Zen (RGBKB)](https://github.com/RGBKB/Keyboard-files/tree/master/Zen) [Build Guide](https://legonut.gitbooks.io/zen-keyboard/content/) | pcb, case | split, ergo, ortho, thumb keys, rgb led | <img src="https://camo.githubusercontent.com/6bf0257847f1e1972cfd6b9f289a6e8180163ff8/68747470733a2f2f692e696d6775722e636f6d2f7a337630416b732e6a7067" width="200px" /> |
-| []() |  |  | <img src="" width="200px" /> |
-
-## Drop-in replacement PCB
- [AEK II USB](https://github.com/kb-elmo/aek2_usb) - Apple Extended Keyboard II (QMK compatible)
- [E80-1800](https://github.com/ebastler/E80-1800) - Cherry G80-1800 (QMK compatible)
- [GH80 Series](https://github.com/evyd13/gh80-series) - GH80-1800, GH80-3003, GH80-3700
- [M0110a USB](https://github.com/kb-elmo/m0110a_usb) - Apple M0110a (QMK compatible)
- [M0116 USB](https://github.com/kb-elmo/m0116_usb) - Apple M0116 (QMK compatible, Mini-USB)
- [Model M Type C](https://github.com/ashpil/Model-M-Type-C) -  IBM Model M keyboard
- [MX-5160](https://github.com/evyd13/mx-5160) - Chicony 5160c
- [NT-Series](https://github.com/evyd13/nt-series) - Leopold FC660m, FC750r and FC980m
- [WY-60 USB](https://github.com/kb-elmo/wy60_usb) - Wyse ASCII WY-60QMK (QMK compatible, Mini-USB)
-
-## Handwired
-| Name | Available Files | Tags | Image |
-| --- | --- | :---: | :---: |
-| [52Te](https://github.com/culturalsnow/52Te) | case | pro micro, split | <img src="https://raw.githubusercontent.com/culturalsnow/52Te/master/img/52Te_Left.jpg" width="200px" /> |
-| [60% Fixed Split Mechanical Keyboard](https://www.thingiverse.com/thing:3647216) | case | 3d print, split | <img src="https://cdn.thingiverse.com/renders/38/b8/e5/18/98/e6a29d3218baab572c7461f4e953d584_preview_featured.jpg" width="200px"> |
-| [~~Arke~~](https://web.archive.org/web/20201204050758/https://www.thingiverse.com/thing:2879329) | case | 3d print, split, pro micro | |
-| [Atreis](https://github.com/dekonnection/atreis) | case | handwiring | <img src="https://github.com/dekonnection/atreis/raw/master/pictures/GPI0El4.jpg" width="200px" /> |
-| [Atreus Split Keyboard](https://www.thingiverse.com/thing:1646718) | case | 3d print, split, pro micro | <img src="https://cdn.thingiverse.com/renders/2a/35/f6/bd/51/ee77cfa99ac6c721974f6eb92a52cce9_preview_featured.jpg" width="200px" /> |
-| [Bloid40](https://github.com/hanhanhan-kim/bloid40) | case | 3d print, bluefruit-32u4-le, bluetooth | <img src="https://github.com/hanhanhan-kim/bloid40/blob/master/docs/bloid40.jpg?raw=true" width="200px" />
-| [Ergo-Warped](https://github.com/pseudoku/ErgoWarp) | case | 3d print, split, ergo | <img src="https://raw.githubusercontent.com/pseudoku/Warped-keyboard/master/Photo/Proto6.jpg" width="200px" /> |
-| [fAuxLICE](https://github.com/ramonimbao/Alice-like_Handwired) | case | 3d print, handwiring, stm32, ergo | <img src="https://raw.githubusercontent.com/ramonimbao/Alice-like_Handwired/master/images/outside.jpg" width="200px"> |
-| [Freoduo](https://www.thingiverse.com/thing:4565609) | case | 3d print, split, ergo | <img src="https://i.imgur.com/Fvgm3Y5.jpg" width="200px" /> |
-| [Keyberon](https://github.com/TeXitoi/keyberon) | case, firmware | 3d print, handwiring, blue pill, ortholinear | <img src="https://raw.githubusercontent.com/TeXitoi/keyberon/master/images/keyberon.jpg" width="200px" /> |
-| [Keyberon-f4](https://github.com/TeXitoi/keyberon-f4) | case | stm32f401, usb-c, handwiring, 3d print | <img src="https://github.com/TeXitoi/keyberon-f4/blob/master/images/keyberon-56.jpg?raw=true" width="200px" /> |
-| [MECH - TKL](https://www.thingiverse.com/thing:4225961) | case | 3d print, handwiring, teensy, tkl | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/TKL.JPG" width="200px" /> |
-| [METATRON](https://www.thingiverse.com/thing:4228314) | case | 3d print, handwiring, teensy, 65 percent | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/metatron.JPG" width="200px" /> |
-| [MHKB](https://www.thingiverse.com/thing:4220301) | case | 3d print, handwiring, teensy, HHKB Style, Happy Hacking Keyboard | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/MHKB.JPG" width="200px" /> |
-| [Mech-104](https://www.thingiverse.com/thing:4205065) | case | 3d print, handwiring, teensy, full size, 104 key | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/Mech-104.JPG" width="200px" /> |
-| [Mech-60](https://www.thingiverse.com/thing:4215193) | case | 3d print, handwiring, teensy, 60 percent | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/Mech-60.JPG" width="200px" /> |
-| [Mechagodzilla](https://www.thingiverse.com/thing:4210984) | case | 3d print, handwiring, teensy, no number pad, no function row | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/mechagodzilla.JPG" width="200px" /> |
-| [Mechanical Gamepad](https://www.thingiverse.com/thing:2593692) | case | 3d print, handwiring, pro micro, ortholinear | <img src="https://cdn.thingiverse.com/renders/61/74/20/bf/6f/387305d39edce0ec7409172e37eee126_preview_featured.jpg" width="200px" /> |
-| [Mechanical Keypad](https://www.thingiverse.com/thing:3810124) | case | 3d print, handwiring | <img src="https://cdn.thingiverse.com/renders/60/68/36/7a/e0/4b1c59c7728e2b1cb65f6cb20aaf5cf9_preview_featured.jpg" width="200px" /> |
-| [Monolith](https://www.thingiverse.com/thing:4228304) | case | 3d print, handwiring, teensy, 65 percent | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/monolith.JPG" width="200px" /> |
-| [Redox Manuform](https://www.thingiverse.com/thing:3503380) | case | 3d print, split, pro micro, underglow | <img src="https://cdn.thingiverse.com/renders/f5/89/b2/6b/a1/8d89de5ce484ac624324fb657f01e06e_preview_featured.jpg" width="200px" /> |
-| [SiCK-68](https://www.thingiverse.com/thing:3478494) | case | staggered, tkl, 3d print, handwiring, teensy | <img src="https://cdn.thingiverse.com/renders/b3/55/75/9b/d4/f20d6cca0ecda40347ad1802a63e518c_preview_featured.JPG" width="200px" /> |
-| [Steno keyboard](https://www.thingiverse.com/thing:4073814) | case | 3d print, handwiring | <img src="https://cdn.thingiverse.com/assets/fc/79/06/8b/9c/featured_preview_20191229_134223.jpg" width="200px" /> |
-| [Tada68](https://www.thingiverse.com/thing:3372910) | case | 3d print, handwiring, teensy, tkl, staggered | <img src="https://cdn.thingiverse.com/renders/46/14/9d/aa/0e/8b1db0b24fc25d806e61f7b51671bd08_preview_featured.JPG" width="200px" /> |
-| []() |  |  | <img src="" width="200px" /> |
-
-## Numpad/Macropad
-| Name | Available Files | Tags | Image |
-| --- | --- | :---: | :---: |
-| [2% Milk](https://github.com/Rionlion100/Spaceboards/tree/master/Keyboards/2%25%20Milk) | pcb, case | 1x2, pro micro | <img src="https://camo.githubusercontent.com/04ba54fa2fb06710bc98e8ee23baa0c8ee9962ca/68747470733a2f2f692e696d6775722e636f6d2f5564393675586e2e706e67" width="200px" /> |
-| [4x5-wireless-keypad-pcb](https://github.com/ogatatsu/4x5-wireless-keypad-pcb) | pcb | 4x5, bluetooth | <img src="https://github.com/ogatatsu/4x5-wireless-keypad-pcb/blob/master/images/1.png?raw=true" width="200px" /> |
-| [Amoeba Single-Switch PCB](https://github.com/mtl/keyboard-pcbs) | pcb | single-switch, handwiring | <img src="https://deskthority.net/resources/image/25215" width="200px" /> |
-| [ANAVI Macro Pad 2](https://github.com/AnaviTechnology/anavi-macro-pad-2) | pcb, case | pcb, stl, attiny85, openscad, kicad | <img src="https://github.com/AnaviTechnology/anavi-macro-pad-2/blob/main/anavi-macro-pad-2.jpg?raw=true" width="200px" /> |
-| [ANAVI Macro Pad 8](https://github.com/AnaviTechnology/anavi-macro-pad-8) | pcb, case | pcb, stl, atmega32u4, openscad, kicad | <img src="https://github.com/AnaviTechnology/anavi-macro-pad-8/blob/master/anavi-macro-pad-8.jpg?raw=true" width="200px" /> |
-| [Ardu Keyboard](https://www.hackster.io/palsayantan/ardu-keyboard-ef4d46) | pcb | 3x3, ATmega328P | <img src="https://hackster.imgix.net/uploads/attachments/1077918/_3zAOyxufXh.blob?auto=compress%2Cformat&w=900&h=675&fit=min" width="200px" /> |
-| [Cherry-Mx-Bitboard-Re](https://github.com/ogatatsu/Cherry-Mx-Bitboard-Re) | pcb | single-switch, handwiring, hotswap | <img src="https://github.com/ogatatsu/Cherry-Mx-Bitboard-Re/raw/master/Images/a.jpeg" width="200px" /> |
-| [Cherry MX Keypad](http://syncchannel.blogspot.com/2016/06/cherry-mx-keypad.html?m=1) | pcb | 1x4, led | <img src="https://1.bp.blogspot.com/-Mur6fIsKDwU/V1NmGd7T4QI/AAAAAAAAAyU/Fh40F8Zl41YVosa03zkJl2WPSQ7sGS_AwCLcB/s280/CherryMXkeypad1.jpg" width="200px" /> |
-| [CHOCO](https://github.com/hsgw/choco) | pcb, case | 4x7, choc, usb-c, STM32F072C8T6, smd | <img src="https://camo.githubusercontent.com/0f5e76c4bb7ab1fb4afcdd0db4985aaa1d235843/68747470733a2f2f692e696d6775722e636f6d2f6e32553952484f2e6a7067" width="200px" /> |
-| [Cookpad Pad](https://github.com/cookpad/cookpad-pad) | pcb, case | 2x3, pro micro, ws2812b, underglow | <img src="https://github.com/cookpad/cookpad-pad/raw/master/docs/images/cookpad-pad.jpg" width="200px" /> |
-| [Discipad](https://github.com/coseyfannitutti/discipad) | pcb, case | 4x5, through hole, usb-c, | <img src="https://images.squarespace-cdn.com/content/v1/5c533d33348cd92b886e544d/1569605273813-X4W1ZK24U81C0U381LW7/ke17ZwdGBToddI8pDm48kK60W-ob1oA2Fm-j4E_9NQB7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0kD6Ec8Uq9YczfrzwR7e2Mh5VMMOxnTbph8FXiclivDQnof69TlCeE0rAhj6HUpXkw/discipad-white.jpeg?format=750w" width="200px" /> |   |   |   |   |
-| [Dumbpad](https://github.com/imchipwood/dumbpad) | pcb | pcb, atmega32u4, rotary encoder | <img src="https://i.imgur.com/sS3fq1Z.jpg" width="200px" /> |
-| [Env-MCRO](https://github.com/Envious-Data/Env-MCRO) | pcb | pcb, rpi-pico | <img src="https://github.com/Envious-Data/Env-MCRO/blob/main/EnvMCRO.png?raw=true" width="200px" /> |
-| [Env-NPD](https://github.com/Envious-Data/Env-NPD) | pcb | pcb, numpad, rpi-pico | <img src="https://github.com/Envious-Data/Env-NPD/blob/main/env-npd.png?raw=true" width="200px" /> |
-| ~~Game cart macropad~~ | pcb, case | 4x4, 3d print | |
-| [GeekPad](https://git.bthlabs.pl/tomekwojcik/geekpad/) | pcb, case | 3x3, 3d print | <img src="https://i.imgur.com/FEzO81l.jpg" width="200px" /> |
-| [Hub16](https://github.com/joshajohnson/Hub16) | pcb, case | 4x4, rotary encoder, usb hub, hotswap, underglow, ws2812  | <img src="https://github.com/joshajohnson/Hub16/raw/master/Documents/imgs/header-img.JPG" width="200px" /> |
-| [duckyPad](https://github.com/dekuNukem/duckyPad) | pcb, case | 5x3, oled, rgb, sd-card | <img src="https://github.com/dekuNukem/duckyPad/raw/master/resources/pics/title.png" width="200px" /> |
-| [Labbe-Mini](https://github.com/alabbe9545/Labbe-Mini) | pcb, case | hotswap, atmega32U4, usb-c, per-switch-rgb, rgb | <img src="https://raw.githubusercontent.com/alabbe9545/Labbe-Mini/main/images/IMG_1783.jpg" width="200px" /> |
-| [LFK17](https://github.com/lfkeyboards/lfk17) | pcb | 5x4, numpad, hotswap, rgb | <img src="https://i.imgur.com/N4x5wXp.jpg" width="200px" /> |
-| [Lysergic 25](https://github.com/Gtrx0/lysergic25) | pcb, plate | 5x5, pro micro, plate, underglow, ws2812b, esd, usb-c | <img src="https://raw.githubusercontent.com/Gtrx0/lysergic25/master/Renders/Backside_populated.png" width="200px" /> |
-| [Meishi2](https://github.com/Biacco42/meishi2) | pcb | 1x4, pro micro | <img src="https://i.imgur.com/2SQqVlZ.png" width="200px" /> |
-| [Mulletpad](https://github.com/coseyfannitutti/mulletpad) | pcb, case | numpad, usb-c, atmega32u4, smd | <img src="https://camo.githubusercontent.com/a57afd3b24b297f74daf1b31e864845fbd1f31cc/68747470733a2f2f692e696d6775722e636f6d2f3676374a764c4e2e706e67" width="200px" /> |
-| [Pix](https://github.com/sendz/pix) | pcb, case | pro micro, 1x4, rotary encoder, oled, desk mounted, monitor mounted | <img src="https://i.imgur.com/ZcuDN6z.jpg" width="200px" /> |
-| [Remnant](https://github.com/hsgw/Remnant) | pcb, case | 2x4, through hole, attiny85 | <img src="https://github.com/hsgw/Remnant/raw/master/doc/img/remnant.jpg" width="200px" /> |
-| [SAMD21 Bridge Module Cherry Board](https://www.pcbway.com/project/shareproject/DIY_RGB_Cherry_MX_Hotkey_Board.html) | pcb, case | plate | <img src="https://file.pcbway.com/websponsor/18/07/26/195654072.jpg" width="200px" /> |
-| [SAN](https://github.com/hsgw/san) | pcb, case | 1x3, STM32F042F6P6, hotswap | <img src="https://github.com/hsgw/san/raw/master/san.JPG" width="200px" /> |
-| [Yampad](https://github.com/mattdibi/yampad)| pcb, case | numpad, pro micro, oled, hotswap, underglow, ws2812 | <img src="https://github.com/mattdibi/yampad/blob/master/img/yampad2.jpg?raw=true" width="200px" /> |
-| [Zesty 25](https://github.com/Gtrx0/zesty25) | pcb, case | 5x5, pro micro, plate, underglow, ws2812b | <img src="https://raw.githubusercontent.com/Gtrx0/zesty25/master/Renders/Backside_Unpopulated.png" width="200px" /> |
-| []() |  |  | <img src="" width="200px" /> |
-
-## Case
-| Name | Tags | Image |
-| --- | :---: | :---: |
-| [60% (Poker II, Pok3r) Keyboard Case 2.0](https://www.thingiverse.com/thing:983332) | 3d print | <img src="https://cdn.thingiverse.com/renders/8a/ac/f9/d8/ad/zanmYsB_-_Imgur_preview_featured.jpg" width="200px" /> |
-| [Alpha keyboard case](https://www.myminifactory.com/object/3d-print-alpha-keyboard-case-pyrool-28-key-pcb-103767) | 3d print | <img src="https://cdn.myminifactory.com/assets/object-assets/5db6033fc6df3/images/720X720-cases.jpg" width="200px" /> |
-| [Arisu Keyboard Case](https://github.com/FateNozomi/arisu-case) | plate | <img src="https://camo.githubusercontent.com/52126fe22185eb48a922b8f7a2a2726cb2f19226/68747470733a2f2f692e696d6775722e636f6d2f6b6e74353138452e6a7067" width="200px" /> |
-| [Atom47 for Vortex Core](https://github.com/evyd13/atom47) | 3d print | <img src="https://i.imgur.com/uUfzeCa.png" width="200px" /> |
-| [Atreus62 High Profile Keyboard Case](https://www.thingiverse.com/thing:3246981) | 3d print | <img src="https://cdn.thingiverse.com/renders/e5/f1/48/84/33/5c363031158a92007b63b0468cea95c6_preview_featured.jpg" width="200px" /> |
-| [Chimera Egro 42 Tenting Case](https://github.com/wizarddata/Chimera-Egro-42-Case) | 3d print, tenting, split |  |
-| [Cospad Case](https://www.thingiverse.com/thing:3233852) | 3d print, numpad | <img src="https://cdn.thingiverse.com/renders/23/ce/51/e6/60/c529ac4f1f85fb603e729532d6a4e3a5_preview_featured.jpg" width="200px" /> |
-| [Cospad Diamond Case](https://www.thingiverse.com/thing:3389713) | 3d print, numpad | <img src="https://cdn.thingiverse.com/renders/85/59/4f/c2/34/05af4ff61e5c7829934b3206dd96247e_preview_featured.jpg" width="200px" /> |
-| [CRKBD Case](https://www.thingiverse.com/thing:4039133) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/52/9b/1f/05/0b/featured_preview_20191211_113759.jpg" width="200px" />
-| [CRKBD Case Cloud](https://www.thingiverse.com/thing:4047797) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/ce/f2/81/fd/94/featured_preview_20191214_104210.jpg" width="200px" />
-| [CRKBD SpaceCase](https://www.thingiverse.com/thing:4003113) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/2f/3d/a8/cc/e9/featured_preview_Right.jpg" width="200px" /> |
-| [CRKBD Case VOID Ergo S](https://www.thingiverse.com/thing:4628137) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/82/5a/99/b6/cf/featured_preview_resized_IMG_20201005_133140.jpg" width="200px" />
-| [Dactyl extended bottom case with gel wrist rests](https://www.thingiverse.com/thing:2436848) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/36/ef/6d/5f/59/c7a62cce09db90af7db2c013ccf94171_preview_featured.jpg" width="200px" /> |
-| [Dactyl Manuform 5x6 keyboard wrist rests](https://www.thingiverse.com/thing:2964741) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/1c/ed/76/59/b5/d054143d7a52b02d6d7d55cc49839b8e_preview_featured.JPG" width="200px" /> |
-| [ErgoDash Tenting Case](https://github.com/wizarddata/Ergodash-Case) | 3d printing, split, tenting | |
-| [ErgoDox-Case](https://github.com/CharlesLenk/ErgoDox-Case) | split, thumb keys, 7x5 | |
-| [Ergodox Case](https://www.thingiverse.com/thing:753448) | 3d print | <img src="https://cdn.thingiverse.com/renders/4e/a2/85/36/dd/TopRightCase_preview_featured.jpg" width="200px" /> |
-| [Ergodox Case PrintDox](https://www.thingiverse.com/thing:2533064) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/cf/a4/a1/db/34/c62c3dfe57add30ddfdd10bba6959503_preview_featured.jpg" width="200px" /> |
-| [Fourier - Split 40% Keybaord](https://www.thingiverse.com/thing:3456985) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/95/4a/57/83/a5/c67e7861a9923e60be38f20b33bc8989_preview_featured.jpg" width="200px" /> |
-| [Iris Case](https://www.thingiverse.com/thing:3545130) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/c7/49/9a/e9/85/9781426efbd02367f1796f20f4918e63_preview_featured.jpg" width="200px" /> |
-| [Iris Case V2](https://www.thingiverse.com/thing:3186129) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/ce/f1/6f/c4/1c/b10ee16c8aef868230d6b430237876b4_preview_featured.jpg" width="200px" /> |
-| [Iris Mech Build](https://github.com/lukeg101/Iris-Mech-Build) | acrylic, brushed copper, led  | <img src="https://github.com/lukeg101/Iris-Mech-Build/raw/master/images/IMG_8335.JPG" width="200px" /> |
-| [Iris Ice Project](https://github.com/rs/iris-ice) | 3d print, acrylic, white, led | <img src="https://github.com/rs/iris-ice/blob/master/img/iris-ice.jpg?raw=true" width="200px" /> |
-| [Iris Tenting Cases (High & Low Profile)](https://github.com/wizarddata/Iris-Case) | 3d print, tenting, split | |
-| [Kyria](https://github.com/splitkb/kyria) | acrylic, split  | <img src="https://github.com/splitkb/kyria/blob/master/High%20Profile%20Case/High%20Profile%20Case.png?raw=true" width="200px" /> |
-| [Let's Split Keyboard Angled Case](https://www.thingiverse.com/thing:2626039) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/e8/05/1a/03/99/429c22d5f6e9df54f0b98e73d0ec0a19_preview_featured.jpg" width="200px" /> |
-| [Let's Split Keyboard Case](https://www.thingiverse.com/thing:2482218) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/0f/cb/dc/ad/ac/f3ccdd27d2000e3f9255a7e3e2c48800_preview_featured.jpg" width="200px" /> |
-| [Let's Split Keyboard Plate & Case](https://www.thingiverse.com/thing:2335558) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/79/08/a0/f0/87/73727bf9538c5aa7b80ac16c14c6686b_preview_featured.jpg" width="200px" /> |
-| [Minidox Case](https://github.com/dotdash32/cases/tree/master/Minidox) | split, 3x6, vertically staggered, thumb keys | <img src="https://camo.githubusercontent.com/b345769866acbd0ad76c22250941aa4ab23667e5/68747470733a2f2f692e696d6775722e636f6d2f686d6e6b56646e2e6a7067" width="200px" /> |
-| [Minidox Tenting Case](https://github.com/wizarddata/Minidox-Cases) | 3d print, tenting, split |  |
-| [Miuni32-Case](https://github.com/wizarddata/Miuni32-Case) | 3d print, ortholinear, 3x11 | <img src="https://preview.redd.it/da5ey5fxfyp21.jpg?width=960&crop=smart&auto=webp&s=470ec31cd4ad760dd30c16591740b238fa8a59cc" width="200px" /> |
-| [Nyquist Plate + Case](https://www.thingiverse.com/thing:2389357) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/81/82/66/eb/3d/7b3575db20022d9ffa547ea4deb728d1_preview_featured.jpg" width="200px" /> |
-| [OLKB (Planck, Preonic & Atomic)](https://github.com/olkb/olkb_parts) | 3d print, plate |  |
-| [Preonic & Planck 5 Degree like keyboard case](https://www.thingiverse.com/thing:4538824/files) | 3d print, ortholinear | <img src="https://cdn.thingiverse.com/assets/dd/8b/50/30/d8/featured_preview_image0.jpg" width="200px" />
-| [Redox-Case](https://github.com/Lenbok/scad-redox-case) | split, thumb keys, opensCad, 3d print | <img src="https://github.com/Lenbok/scad-redox-case/raw/master/images/redox-exploded.png" width="200px" /> |
-| [Sofle v2 5 degree high profile](https://www.thingiverse.com/thing:4822438) | split, thumb keys, stl, 3d print | <img src="https://i.imgur.com/JOBm0cm.jpg" width="200px" />|
--- a/gridsome.config.js
+++ b/gridsome.config.js
@ -1,79 +0,0 @@
-// This is where project configuration and plugin options are located.
-// Learn more: https://gridsome.org/docs/config
-
-// Changes here require a server restart.
-// To restart press CTRL + C in terminal and run `gridsome develop`
-
-module.exports = {
-  siteName: "Keebfol.io",
-  siteDescription: "Curated list of mechanical keyboard resources.",
-  siteUrl: "https://keebfol.io",
-  chainWebpack(config) {
-    config.mode("development");
-    const svgRule = config.module.rule("svg");
-    svgRule.uses.clear();
-    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
-  },
-  plugins: [
-    {
-      use: "gridsome-plugin-tailwindcss",
-      options: {
-        tailwindConfig: "./tailwind.config.js",
-        presetEnvConfig: {},
-        shouldImport: false,
-        shouldTimeTravel: false,
-      },
-    },
-    {
-      use: "@gridsome/source-filesystem",
-      options: {
-        index: ["README"],
-        path: "**/*.md",
-        baseDir: "./docs",
-        typeName: "DocPage",
-        remark: {
-          autolinkHeadings: {
-            content: {
-              type: "text",
-              value: "#",
-            },
-          },
-        },
-      },
-    },
-    {
-      use: "gridsome-plugin-rss",
-      options: {
-        contentTypeName: "CommitMessages",
-        feedOptions: {
-          title: "Keebfol.io - A Mechanical Keyboard Wiki",
-          feed_url: "https://keebfol.io/rss.xml",
-          site_url: "https://keebfol.io",
-        },
-        feedItemOptions: (node) => ({
-          guid: node.id,
-          date: node.date,
-          title: node.message,
-          description: node.body,
-          author: node.author,
-          url: "https://keebfol.io/",
-        }),
-        output: {
-          dir: "./static/",
-          name: "rss.xml",
-        },
-        latest: true,
-      },
-    },
-    {
-      use: "gridsome-plugin-modal",
-    },
-  ],
-  transformers: {
-    remark: {
-      externalLinksTarget: "_blank",
-      externalLinksRel: ["nofollow", "noopener", "noreferrer"],
-      anchorClassName: "icon icon-link",
-    },
-  },
-};
--- a/gridsome.server.js
+++ b/gridsome.server.js
@ -1,157 +0,0 @@
-// Server API makes it possible to hook into various parts of Gridsome
-// on server-side and add custom data to the GraphQL data layer.
-// Learn more: https://gridsome.org/docs/server-api
-
-// Changes here require a server restart.
-// To restart press CTRL + C in terminal and run `gridsome develop`
-
-const { GraphQLClient } = require('graphql-request')
-
-const axios = require('axios')
-
-module.exports = function (api) {
-  api.loadSource(async actions => {
-    
-    const graphqlClient = new GraphQLClient(process.env.GITHUB_API_V4_URL, {
-      headers: {
-        Authorization: `Bearer ${process.env.GITHUB_AUTH_TOKEN}`,
-      },
-    })
-    
-    // get repo's commit history via graphql for the rss feed and
-    // news page
-    const commitHistoryQuery = `
-      {
-        repository(owner: "benroe", name: "awesome-mechanical-keyboard") {
-          ref(qualifiedName: "master") {
-            target {
-              ... on Commit {
-                history(first: 30) {
-                  edges {
-                    node {
-                      oid
-                      committedDate
-                      messageHeadline
-                      messageBody
-                      author {
-                        date
-                        name
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }`
-    const commitMessages = actions.addCollection({
-      typeName: 'CommitMessages'
-    })
-    const commitMessagesData = await graphqlClient.request(commitHistoryQuery)
-
-    // add each node the the collection
-    commitMessagesData.repository.ref.target.history.edges.forEach(function(item) { 
-      const coHeadline = item.node.messageHeadline
-      // add only commit messages which are relevant for website user
-      if(coHeadline.startsWith('feat') || coHeadline.startsWith('docs')) {
-        commitMessages.addNode({
-          id: item.node.oid,
-          date: item.node.committedDate,
-          message: item.node.messageHeadline,
-          body: item.node.messageBody,
-          author: item.node.author.name,
-        })
-      }
-    }) 
-    
-    
-    // get the sponsor list
-    const sponsorsQuery = `
-      {
-        user(login: "BenRoe") {
-          sponsorshipsAsMaintainer(first: 5) {
-            totalCount
-            edges {
-              node {
-                sponsor {
-                  id
-                  name
-                  login
-                  avatarUrl
-                  url
-                }
-              }
-            }
-          }
-        }
-      }`
-      const sponsors = actions.addCollection({
-        typeName: 'Sponsors'
-      })
-      const sponsorsData = await graphqlClient.request(sponsorsQuery)
-      
-      if (sponsorsData.user.sponsorshipsAsMaintainer.edges.node) {
-        // add each node the the collection
-        sponsorsData.user.sponsorshipsAsMaintainer.edges.forEach(function(item) {         
-          sponsors.addNode({
-            id: item.node.sponsor.id,
-            login: item.node.sponsor.login,
-            avatarUrl: item.node.sponsor.avatarUrl,
-            url: item.node.sponsor.url,
-          })
-        }) 
-      } else {
-        // fill node with data, to prevent an error during build process
-        sponsors.addNode({
-          id: '0',
-          login: 'Support This Project',
-          avatarUrl: 'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/batman_hero_avatar_comics-512.png',
-          url: 'https://github.com/sponsors/BenRoe',
-        })   
-      }
-    
-    // Get contributor list and add to GraphQL
-    const { data } = await axios.get('https://api.github.com/repos/BenRoe/awesome-mechanical-keyboard/contributors?q=contributions&order=desc') 
-    const contributors = actions.addCollection({
-      typeName: 'Contributors'
-    })   
-    
-    for (const item of data) {
-      contributors.addNode({
-        id: item.id,
-        name: item.login,
-        avatar_url: item.avatar_url,
-        url: item.html_url,
-        contribution: item.contributions,
-        path: '/contributor/' + item.login
-      })
-    }
-    
-    // const { data } = await axios.get('https://benroe.github.io/switch-database/mechanical-keyboard-switches.json')
-
-    // const contentType = store.addContentType({
-    //   typeName: 'Switches',
-    //   route: '/switch/:id'
-    // })
-
-    // for (const item of data) {
-    //   contentType.addNode({
-    //     id: item.id,
-    //     brand: item.brand,
-    //     type: item.type,
-    //     path: '/switch/' + item.id
-    //   })
-    // }
-    
-    // contentType.addNode({
-    //   fields: {
-    //     items: data.map(item => {
-    //       // Reference a node with typeName 'Item'
-    //       return store.createReference('Item', item.id)
-    //     })
-    //   }
-    // })
-    
-  })
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,57 +1,28 @@
 {
-  "name": "awesome-mechanical-keyboard",
-  "private": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/BenRoe/awesome-mechanical-keyboard.git"
-  },
-  "keywords": [
-    "mechanical-keyboards",
-    "gridsome",
-    "wiki",
-    "awesome-list"
-  ],
-  "homepage": "https://keebfol.io",
-  "author": {
-    "name": "Ben Roe",
-    "url": "https://twitter.com/ben_roe"
-  },
-  "license": "CC-BY-NC-SA-4.0",
+  "name": "@example/docs",
+  "version": "0.0.1",
+  "private": true,
  "scripts": {
-    "build": "gridsome build",
-    "develop": "gridsome develop",
-    "explore": "gridsome explore"
+    "dev": "astro dev",
+    "start": "astro dev",
+    "check": "astro check && tsc",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.3",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
-    "autoprefixer": "^10.3.7",
-    "axios": "^0.23.0",
-    "gridsome": "^0.7.23",
-    "gridsome-plugin-modal": "^0.1.1",
-    "lodash": "^4.17.21",
-    "postcss": "^8.3.9",
-    "vue-js-modal": "^2.0.1",
-    "vuetable-2": "^2.0.0-beta.4"
-  },
-  "devDependencies": {
-    "@gridsome/source-filesystem": "^0.6.2",
-    "@gridsome/source-graphql": "^0.1.0",
-    "@gridsome/transformer-csv": "^0.2.2",
-    "@gridsome/transformer-remark": "^0.6.4",
-    "@gridsome/transformer-yaml": "^0.2.1",
-    "fs-extra": "^10.0.0",
-    "graphql-request": "^3.6.0",
-    "gridsome-plugin-rss": "^1.2.0",
-    "gridsome-plugin-tailwindcss": "^4.1.1",
-    "js-yaml": "^4.1.0",
-    "postcss-import": "^14.0.2",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^2.2.17",
-    "vue-svg-loader": "^0.16.0"
+    "@algolia/client-search": "^4.14.2",
+    "@astrojs/image": "^0.10.0",
+    "@astrojs/preact": "^1.2.0",
+    "@astrojs/react": "^1.2.0",
+    "@docsearch/css": "^3.2.1",
+    "@docsearch/react": "^3.2.1",
+    "@types/node": "^18.11.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^1.5.0",
+    "preact": "^10.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  }
 }
--- a/public/default-og-image.png
+++ b/public/default-og-image.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="keyboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="mr-2 text-primary-light hover:text-primary svg-inline--fa fa-keyboard fa-w-18 fa-2x"><path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" class=""></path></svg>
--- a/public/keebfolio-logo.svg
+++ b/public/keebfolio-logo.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="keyboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="mr-2 text-primary-light hover:text-primary svg-inline--fa fa-keyboard fa-w-18 fa-2x"><path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" class=""></path></svg>
--- a/public/make-scrollable-code-focusable.js
+++ b/public/make-scrollable-code-focusable.js
@ -0,0 +1,3 @@
+Array.from(document.getElementsByTagName('pre')).forEach((element) => {
+	element.setAttribute('tabindex', '0');
+});
--- a/runtime.txt
+++ b/runtime.txt
@ -1 +0,0 @@
-3.7
--- a/sandbox.config.json
+++ b/sandbox.config.json
@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@ -1,67 +0,0 @@
-@tailwind base;
-
-body {
-  @apply text-primary-dark;
-}
-.active--exact {
-  @apply font-bold;
-  @apply text-primary-default;
-}
-a:hover{
-    @apply text-primary-default;
-}
-h1 {
-  @apply text-3xl;
-  @apply font-bold;
-  @apply mb-4;
-}
-
-h2 {
-  @apply text-2xl;
-  @apply font-bold;
-  @apply mt-8;
-}
-
-h3 {
-  @apply text-xl;
-  @apply mt-4;
-}
-tr {
-  @apply border-b;
-}
-td {
-  @apply py-2;
-}
-.content {
-  @apply leading-loose;
-}
-.content a {
-  @apply border-b-2;
-}
-.content a:hover {
-  @apply border-primary-default;
-}
-.content ul {
-  @apply ml-5;
-  @apply list-disc;
-}
-
-@screen dark-mode {
-  body {
-    @apply text-gray-400;
-  }
-  .content a:hover {
-    @apply border-primary-light;
-  }
-  tr {
-    @apply border-gray-800;
-  }
-  .v--modal {
-    @apply bg-gray-900 !important;
-    @apply border-2 border-gray-500;
-    
-  }
-}
-
-@tailwind components;
-@tailwind utilities;
--- a/src/components/Footer/AvatarList.astro
+++ b/src/components/Footer/AvatarList.astro
@ -0,0 +1,167 @@
+---
+// fetch all commits for just this page's path
+type Props = {
+	path: string;
+};
+const { path } = Astro.props as Props;
+const resolvedPath = `examples/docs/${path}`;
+const url = `https://api.github.com/repos/BenRoe/awesome-mechanical-keyboard/commits?path=${resolvedPath}`;
+const commitsURL = `https://github.com/BenRoe/awesome-mechanical-keyboard/commits/main/${resolvedPath}`;
+
+type Commit = {
+	author: {
+		id: string;
+		login: string;
+	};
+};
+
+async function getCommits(url: string) {
+	try {
+		const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello';
+		if (!token) {
+			throw new Error(
+				'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
+			);
+		}
+
+		const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
+
+		const res = await fetch(url, {
+			method: 'GET',
+			headers: {
+				Authorization: auth,
+				'User-Agent': 'astro-docs/1.0',
+			},
+		});
+
+		const data = await res.json();
+
+		if (!res.ok) {
+			throw new Error(
+				`Request to fetch commits failed. Reason: ${res.statusText}
+       Message: ${data.message}`
+			);
+		}
+
+		return data as Commit[];
+	} catch (e) {
+		console.warn(`[error]  /src/components/AvatarList.astro 
+    ${(e as any)?.message ?? e}`);
+		return [] as Commit[];
+	}
+}
+
+function removeDups(arr: Commit[]) {
+	const map = new Map<string, Commit['author']>();
+
+	for (let item of arr) {
+		const author = item.author;
+		// Deduplicate based on author.id
+		map.set(author.id, { login: author.login, id: author.id });
+	}
+
+	return [...map.values()];
+}
+
+const data = await getCommits(url);
+const unique = removeDups(data);
+const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors
+const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
+---
+
+<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
+<div class="contributors">
+	<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
+		{recentContributors.map((item) => (
+			<li>
+				<a href={`https://github.com/${item.login}`}>
+					<img
+						alt={`Contributor ${item.login}`}
+						title={`Contributor ${item.login}`}
+						width="64"
+						height="64"
+						src={`https://avatars.githubusercontent.com/u/${item.id}`}
+					/>
+				</a>
+			</li>
+		))}
+	</ul>
+	{additionalContributors > 0 && (
+		<span>
+			<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
+				additionalContributors > 1 ? 's' : ''
+			}.`}</a>
+		</span>
+	)}
+	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
+</div>
+
+<style>
+	.avatar-list {
+		--avatar-size: 2.5rem;
+		--avatar-count: 3;
+
+		display: grid;
+		list-style: none;
+		/* Default to displaying most of the avatar to
+  enable easier access on touch devices, ensuring
+  the WCAG touch target size is met or exceeded */
+		grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
+		/* `padding` matches added visual dimensions of
+  the `box-shadow` to help create a more accurate
+  computed component size */
+		padding: 0.08em;
+		font-size: var(--avatar-size);
+	}
+
+	@media (any-hover: hover) and (any-pointer: fine) {
+		.avatar-list {
+			/* We create 1 extra cell to enable the computed 
+    width to match the final visual width */
+			grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
+		}
+	}
+
+	.avatar-list li {
+		width: var(--avatar-size);
+		height: var(--avatar-size);
+	}
+
+	.avatar-list li:hover ~ li a,
+	.avatar-list li:focus-within ~ li a {
+		transform: translateX(33%);
+	}
+
+	.avatar-list img,
+	.avatar-list a {
+		display: block;
+		border-radius: 50%;
+	}
+
+	.avatar-list a {
+		transition: transform 180ms ease-in-out;
+	}
+
+	.avatar-list img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		background-color: #fff;
+		box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
+	}
+
+	.avatar-list a:focus {
+		outline: 2px solid transparent;
+		/* Double-layer trick to work for dark and light backgrounds */
+		box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+	}
+
+	.contributors {
+		display: flex;
+		align-items: center;
+	}
+
+	.contributors > * + * {
+		margin-left: 0.75rem;
+	}
+</style>
--- a/src/components/Footer/Footer.astro
+++ b/src/components/Footer/Footer.astro
@ -0,0 +1,19 @@
+---
+import AvatarList from './AvatarList.astro';
+type Props = {
+	path: string;
+};
+const { path } = Astro.props as Props;
+---
+
+<footer>
+	<AvatarList path={path} />
+</footer>
+
+<style>
+	footer {
+		margin-top: auto;
+		padding: 2rem;
+		border-top: 3px solid var(--theme-divider);
+	}
+</style>
--- a/src/components/HeadCommon.astro
+++ b/src/components/HeadCommon.astro
@ -0,0 +1,46 @@
+---
+import '../styles/theme.css';
+import '../styles/index.css';
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<meta name="generator" content={Astro.generator} />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+<link rel="sitemap" href="/sitemap.xml" />
+
+<!-- Preload Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap"
+	rel="stylesheet"
+/>
+
+<!-- Scrollable a11y code helper -->
+<script src="/make-scrollable-code-focusable.js" is:inline>
+
+</script>
+
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+	const root = document.documentElement;
+	const theme = localStorage.getItem('theme');
+	if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+		root.classList.add('theme-dark');
+	} else {
+		root.classList.remove('theme-dark');
+	}
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-TEL60V1WM9');
+</script> -->
--- a/src/components/HeadSEO.astro
+++ b/src/components/HeadSEO.astro
@ -0,0 +1,46 @@
+---
+import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
+
+export interface Props {
+	frontmatter: Frontmatter;
+	canonicalUrl: URL;
+}
+
+const { frontmatter, canonicalUrl } = Astro.props as Props;
+const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`;
+const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src;
+const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+
+<!-- Page Metadata -->
+<link rel="canonical" href={canonicalUrl} />
+
+<!-- OpenGraph Tags -->
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalUrl} />
+<meta property="og:locale" content={frontmatter.ogLocale ?? SITE.defaultLanguage} />
+<meta property="og:image" content={canonicalImageSrc} />
+<meta property="og:image:alt" content={imageAlt} />
+<meta
+	name="description"
+	property="og:description"
+	content={frontmatter.description ?? SITE.description}
+/>
+<meta property="og:site_name" content={SITE.title} />
+
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={frontmatter.description ?? SITE.description} />
+<meta name="twitter:image" content={canonicalImageSrc} />
+<meta name="twitter:image:alt" content={imageAlt} />
+
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+-->
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@ -0,0 +1,149 @@
+---
+import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
+import * as CONFIG from '../../config';
+import KeebfolioLogo from './KeebfolioLogo.astro';
+import SkipToContent from './SkipToContent.astro';
+import SidebarToggle from './SidebarToggle';
+import LanguageSelect from './LanguageSelect';
+import Search from './Search';
+
+type Props = {
+	currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+const lang = getLanguageFromURL(currentPage);
+---
+
+<header>
+	<SkipToContent />
+	<nav class="nav-wrapper" title="Top Navigation">
+		<div class="menu-toggle">
+			<SidebarToggle client:idle />
+		</div>
+		<div class="logo flex">
+			<a href="/">
+				<KeebfolioLogo size={40} />
+				<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
+			</a>
+		</div>
+		<div style="flex-grow: 1;"></div>
+		{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
+		<div class="search-item">
+			<!--<Search client:idle />-->
+		</div>
+	</nav>
+</header>
+
+<style>
+	header {
+		z-index: 11;
+		height: var(--theme-navbar-height);
+		width: 100%;
+		background-color: var(--theme-navbar-bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		position: sticky;
+		top: 0;
+	}
+
+	.logo {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+		width: 30px;
+		font-size: 2rem;
+		flex-shrink: 0;
+		font-weight: 600;
+		line-height: 1;
+		color: hsla(var(--color-base-white), 100%, 1);
+		gap: 0.25em;
+		z-index: -1;
+	}
+
+	.logo a {
+		display: flex;
+		padding: 0.5em 0.25em;
+		margin: -0.5em -0.25em;
+		text-decoration: none;
+		font-weight: bold;
+	}
+
+	.logo a {
+		transition: color 100ms ease-out;
+		color: var(--theme-text);
+	}
+
+	.logo a:hover,
+	.logo a:focus {
+		color: var(--theme-text-accent);
+	}
+
+	.logo h1 {
+		display: none;
+		font: inherit;
+		color: inherit;
+		margin: 0;
+	}
+
+	.nav-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 1em;
+		width: 100%;
+		max-width: 82em;
+		padding: 0 1rem;
+	}
+
+	@media (min-width: 50em) {
+		header {
+			position: static;
+			padding: 2rem 0rem;
+		}
+
+		.logo {
+			width: auto;
+			margin: 0;
+			z-index: 0;
+		}
+
+		.logo h1 {
+			display: initial;
+		}
+
+		.menu-toggle {
+			display: none;
+		}
+	}
+
+	/** Style Algolia */
+	:root {
+		--docsearch-primary-color: var(--theme-accent);
+		--docsearch-logo-color: var(--theme-text);
+	}
+
+	.search-item {
+		display: none;
+		position: relative;
+		z-index: 10;
+		flex-grow: 1;
+		padding-right: 0.7rem;
+		display: flex;
+		max-width: 200px;
+	}
+
+	@media (min-width: 50em) {
+		.search-item {
+			max-width: 400px;
+		}
+	}
+</style>
+
+<style is:global>
+	.search-item > * {
+		flex-grow: 1;
+	}
+</style>
--- a/src/components/Header/KeebfolioLogo.astro
+++ b/src/components/Header/KeebfolioLogo.astro
@ -0,0 +1,28 @@
+---
+type Props = {
+	size: number;
+};
+const { size } = Astro.props as Props;
+---
+
+<svg
+	class="logo"
+	width={size}
+	height={size}
+	viewBox="0 0 576 512"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<style>
+		#keyboard {
+			fill: var(--theme-text-accent);
+		}
+	</style>
+	<title>Logo</title>
+	<path
+		id="keyboard"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"
+	>
+</svg>
--- a/src/components/Header/LanguageSelect.css
+++ b/src/components/Header/LanguageSelect.css
@ -0,0 +1,47 @@
+.language-select {
+	flex-grow: 1;
+	width: 48px;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0.33em 0.5em;
+	overflow: visible;
+	font-weight: 500;
+	font-size: 1rem;
+	font-family: inherit;
+	line-height: inherit;
+	background-color: var(--theme-bg);
+	border-color: var(--theme-text-lighter);
+	color: var(--theme-text-light);
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 0.25rem;
+	outline: 0;
+	cursor: pointer;
+	transition-timing-function: ease-out;
+	transition-duration: 0.2s;
+	transition-property: border-color, color;
+	-webkit-font-smoothing: antialiased;
+	padding-left: 30px;
+	padding-right: 1rem;
+}
+.language-select-wrapper .language-select:hover,
+.language-select-wrapper .language-select:focus {
+	color: var(--theme-text);
+	border-color: var(--theme-text-light);
+}
+.language-select-wrapper {
+	color: var(--theme-text-light);
+	position: relative;
+}
+.language-select-wrapper > svg {
+	position: absolute;
+	top: 7px;
+	left: 10px;
+	pointer-events: none;
+}
+
+@media (min-width: 50em) {
+	.language-select {
+		width: 100%;
+	}
+}
--- a/src/components/Header/LanguageSelect.tsx
+++ b/src/components/Header/LanguageSelect.tsx
@ -0,0 +1,49 @@
+/** @jsxImportSource react */
+import type { FunctionComponent } from 'react';
+import './LanguageSelect.css';
+import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
+
+const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => {
+	return (
+		<div className="language-select-wrapper">
+			<svg
+				aria-hidden="true"
+				focusable="false"
+				role="img"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 88.6 77.3"
+				height="1.2em"
+				width="1.2em"
+			>
+				<path
+					fill="currentColor"
+					d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z"
+				/>
+				<path
+					fill="currentColor"
+					d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8          c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z"
+				/>
+			</svg>
+			<select
+				className="language-select"
+				value={lang}
+				onChange={(e) => {
+					const newLang = e.target.value;
+					let actualDest = window.location.pathname.replace(langPathRegex, '/');
+					if (actualDest == '/') actualDest = `/introduction`;
+					window.location.pathname = '/' + newLang + actualDest;
+				}}
+			>
+				{Object.entries(KNOWN_LANGUAGES).map(([key, value]) => {
+					return (
+						<option value={value} key={value}>
+							<span>{key}</span>
+						</option>
+					);
+				})}
+			</select>
+		</div>
+	);
+};
+
+export default LanguageSelect;
--- a/src/components/Header/Search.css
+++ b/src/components/Header/Search.css
@ -0,0 +1,76 @@
+/** Style Algolia */
+:root {
+	--docsearch-primary-color: var(--theme-accent);
+	--docsearch-logo-color: var(--theme-text);
+}
+.search-input {
+	flex-grow: 1;
+	box-sizing: border-box;
+	width: 100%;
+	margin: 0;
+	padding: 0.33em 0.5em;
+	overflow: visible;
+	font-weight: 500;
+	font-size: 1rem;
+	font-family: inherit;
+	line-height: inherit;
+	background-color: var(--theme-divider);
+	border-color: var(--theme-divider);
+	color: var(--theme-text-light);
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 0.25rem;
+	outline: 0;
+	cursor: pointer;
+	transition-timing-function: ease-out;
+	transition-duration: 0.2s;
+	transition-property: border-color, color;
+	-webkit-font-smoothing: antialiased;
+}
+.search-input:hover,
+.search-input:focus {
+	color: var(--theme-text);
+	border-color: var(--theme-text-light);
+}
+.search-input:hover::placeholder,
+.search-input:focus::placeholder {
+	color: var(--theme-text-light);
+}
+.search-input::placeholder {
+	color: var(--theme-text-light);
+}
+.search-hint {
+	position: absolute;
+	top: 7px;
+	right: 19px;
+	padding: 3px 5px;
+	display: none;
+	display: none;
+	align-items: center;
+	justify-content: center;
+	letter-spacing: 0.125em;
+	font-size: 13px;
+	font-family: var(--font-mono);
+	pointer-events: none;
+	border-color: var(--theme-text-lighter);
+	color: var(--theme-text-light);
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 0.25rem;
+	line-height: 14px;
+}
+
+@media (min-width: 50em) {
+	.search-hint {
+		display: flex;
+	}
+}
+
+/* ------------------------------------------------------------ *\
+	DocSearch (Algolia)
+\* ------------------------------------------------------------ */
+
+.DocSearch-Modal .DocSearch-Hit a {
+	box-shadow: none;
+	border: 1px solid var(--theme-accent);
+}
--- a/src/components/Header/Search.tsx
+++ b/src/components/Header/Search.tsx
@ -0,0 +1,97 @@
+/** @jsxImportSource react */
+import { useState, useCallback, useRef } from 'react';
+import { ALGOLIA } from '../../config';
+import '@docsearch/css';
+import './Search.css';
+
+import { createPortal } from 'react-dom';
+import * as docSearchReact from '@docsearch/react';
+
+/** FIXME: This is still kinda nasty, but DocSearch is not ESM ready. */
+const DocSearchModal =
+	docSearchReact.DocSearchModal || (docSearchReact as any).default.DocSearchModal;
+const useDocSearchKeyboardEvents =
+	docSearchReact.useDocSearchKeyboardEvents ||
+	(docSearchReact as any).default.useDocSearchKeyboardEvents;
+
+export default function Search() {
+	const [isOpen, setIsOpen] = useState(false);
+	const searchButtonRef = useRef<HTMLButtonElement>(null);
+	const [initialQuery, setInitialQuery] = useState('');
+
+	const onOpen = useCallback(() => {
+		setIsOpen(true);
+	}, [setIsOpen]);
+
+	const onClose = useCallback(() => {
+		setIsOpen(false);
+	}, [setIsOpen]);
+
+	const onInput = useCallback(
+		(e) => {
+			setIsOpen(true);
+			setInitialQuery(e.key);
+		},
+		[setIsOpen, setInitialQuery]
+	);
+
+	useDocSearchKeyboardEvents({
+		isOpen,
+		onOpen,
+		onClose,
+		onInput,
+		searchButtonRef,
+	});
+
+	return (
+		<>
+			<button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input">
+				<svg width="24" height="24" fill="none">
+					<path
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</svg>
+
+				<span>Search</span>
+
+				<span className="search-hint">
+					<span className="sr-only">Press </span>
+
+					<kbd>/</kbd>
+
+					<span className="sr-only"> to search</span>
+				</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<DocSearchModal
+						initialQuery={initialQuery}
+						initialScrollY={window.scrollY}
+						onClose={onClose}
+						indexName={ALGOLIA.indexName}
+						appId={ALGOLIA.appId}
+						apiKey={ALGOLIA.apiKey}
+						transformItems={(items) => {
+							return items.map((item) => {
+								// We transform the absolute URL into a relative URL to
+								// work better on localhost, preview URLS.
+								const a = document.createElement('a');
+								a.href = item.url;
+								const hash = a.hash === '#overview' ? '' : a.hash;
+								return {
+									...item,
+									url: `${a.pathname}${hash}`,
+								};
+							});
+						}}
+					/>,
+					document.body
+				)}
+		</>
+	);
+}
--- a/src/components/Header/SidebarToggle.tsx
+++ b/src/components/Header/SidebarToggle.tsx
@ -0,0 +1,44 @@
+/** @jsxImportSource preact */
+import type { FunctionalComponent } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+const MenuToggle: FunctionalComponent = () => {
+	const [sidebarShown, setSidebarShown] = useState(false);
+
+	useEffect(() => {
+		const body = document.querySelector('body')!;
+		if (sidebarShown) {
+			body.classList.add('mobile-sidebar-toggle');
+		} else {
+			body.classList.remove('mobile-sidebar-toggle');
+		}
+	}, [sidebarShown]);
+
+	return (
+		<button
+			type="button"
+			aria-pressed={sidebarShown ? 'true' : 'false'}
+			id="menu-toggle"
+			onClick={() => setSidebarShown(!sidebarShown)}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="1em"
+				height="1em"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M4 6h16M4 12h16M4 18h16"
+				/>
+			</svg>
+			<span className="sr-only">Toggle sidebar</span>
+		</button>
+	);
+};
+
+export default MenuToggle;
--- a/src/components/Header/SkipToContent.astro
+++ b/src/components/Header/SkipToContent.astro
@ -0,0 +1,26 @@
+---
+type Props = {};
+---
+
+<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
+
+<style>
+	.skiplink,
+	.skiplink:focus,
+	.skiplink:focus-visible {
+		position: absolute;
+		padding: 0.25em;
+		font-size: larger;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 9;
+		display: block;
+		text-align: center;
+		background-color: var(--theme-text-accent);
+		color: var(--theme-bg);
+		border-radius: 0.25em;
+		outline: var(--theme-bg) solid 1px;
+		outline-offset: 0;
+	}
+</style>
--- a/src/components/LeftSidebar/LeftSidebar.astro
+++ b/src/components/LeftSidebar/LeftSidebar.astro
@ -0,0 +1,115 @@
+---
+import { getLanguageFromURL } from '../../languages';
+import { SIDEBAR } from '../../config';
+
+type Props = {
+	currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+const currentPageMatch = currentPage.slice(1);
+const langCode = getLanguageFromURL(currentPage);
+const sidebar = SIDEBAR[langCode];
+---
+
+<nav aria-labelledby="grid-left">
+	<ul class="nav-groups">
+		{Object.entries(sidebar).map(([header, children]) => (
+			<li>
+				<div class="nav-group">
+					<h2>{header}</h2>
+					<ul>
+						{children.map((child) => {
+							const url = Astro.site?.pathname + child.link;
+							return (
+								<li class="nav-link">
+									<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
+										{child.text}
+									</a>
+								</li>
+							);
+						})}
+					</ul>
+				</div>
+			</li>
+		))}
+	</ul>
+</nav>
+
+<script is:inline>
+	window.addEventListener('DOMContentLoaded', () => {
+		var target = document.querySelector('[aria-current="page"]');
+		if (target && target.offsetTop > window.innerHeight - 100) {
+			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+		}
+	});
+</script>
+
+<style>
+	nav {
+		width: 100%;
+		margin-right: 1rem;
+	}
+
+	.nav-groups {
+		height: 100%;
+		padding: 2rem 0;
+		overflow-x: visible;
+		overflow-y: auto;
+		max-height: 100vh;
+	}
+
+	.nav-groups > li + li {
+		margin-top: 2rem;
+	}
+
+	.nav-groups > :first-child {
+		padding-top: var(--doc-padding);
+	}
+
+	.nav-groups > :last-child {
+		padding-bottom: 2rem;
+		margin-bottom: var(--theme-navbar-height);
+	}
+
+	.nav-group-title {
+		font-size: 1rem;
+		font-weight: 700;
+		padding: 0.1rem 1rem;
+		text-transform: uppercase;
+		margin-bottom: 0.5rem;
+	}
+
+	.nav-link a {
+		font-size: 1rem;
+		margin: 1px;
+		padding: 0.3rem 1rem;
+		font: inherit;
+		color: inherit;
+		text-decoration: none;
+		display: block;
+	}
+
+	.nav-link a:hover,
+	.nav-link a:focus {
+		background-color: var(--theme-bg-hover);
+	}
+
+	.nav-link a[aria-current='page'] {
+		color: var(--theme-text-accent);
+		background-color: var(--theme-bg-accent);
+		font-weight: 600;
+	}
+
+	@media (min-width: 50em) {
+		.nav-groups {
+			padding: 0;
+		}
+	}
+</style>
+
+<style is:global>
+	:root.theme-dark .nav-link a[aria-current='page'] {
+		color: hsla(var(--color-base-white), 100%, 1);
+	}
+</style>
--- a/src/components/PageContent/PageContent.astro
+++ b/src/components/PageContent/PageContent.astro
@ -0,0 +1,53 @@
+---
+import type { Frontmatter } from '../../config';
+import MoreMenu from '../RightSidebar/MoreMenu.astro';
+import TableOfContents from '../RightSidebar/TableOfContents';
+import type { MarkdownHeading } from 'astro';
+
+type Props = {
+	frontmatter: Frontmatter;
+	headings: MarkdownHeading[];
+	githubEditUrl: string;
+};
+
+const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
+const title = frontmatter.title;
+---
+
+<article id="article" class="content">
+	<section class="main-section">
+		<h1 class="content-title" id="overview">{title}</h1>
+		<nav class="block sm:hidden">
+			<TableOfContents client:media="(max-width: 50em)" headings={headings} />
+		</nav>
+		<slot />
+	</section>
+	<nav class="block sm:hidden">
+		<MoreMenu editHref={githubEditUrl} />
+	</nav>
+</article>
+
+<style>
+	.content {
+		padding: 0;
+		max-width: 75ch;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.content > section {
+		margin-bottom: 4rem;
+	}
+
+	.block {
+		display: block;
+	}
+
+	@media (min-width: 50em) {
+		.sm\:hidden {
+			display: none;
+		}
+	}
+</style>
--- a/src/components/README.md
+++ b/src/components/README.md
@ -1,4 +0,0 @@
-Add components that will be imported to Pages and Layouts to this folder.
-Learn more about components here: https://gridsome.org/docs/components
-
-You can delete this file.
--- a/src/components/RightSidebar/MoreMenu.astro
+++ b/src/components/RightSidebar/MoreMenu.astro
@ -0,0 +1,75 @@
+---
+import ThemeToggleButton from './ThemeToggleButton';
+import * as CONFIG from '../../config';
+
+type Props = {
+	editHref: string;
+};
+
+const { editHref } = Astro.props as Props;
+const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
+---
+
+{showMoreSection && <h2 class="heading">More</h2>}
+<ul>
+	{editHref && (
+		<li class={`heading-link depth-2`}>
+			<a class="edit-on-github" href={editHref} target="_blank">
+				<svg
+					aria-hidden="true"
+					focusable="false"
+					data-prefix="fas"
+					data-icon="pen"
+					class="svg-inline--fa fa-pen fa-w-16"
+					role="img"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 512 512"
+					height="1em"
+					width="1em"
+				>
+					<path
+						fill="currentColor"
+						d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+					/>
+				</svg>
+				<span>Edit this page</span>
+			</a>
+		</li>
+	)}
+	{CONFIG.COMMUNITY_INVITE_URL && (
+		<li class={`heading-link depth-2`}>
+			<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
+				<svg
+					aria-hidden="true"
+					focusable="false"
+					data-prefix="fas"
+					data-icon="comment-alt"
+					class="svg-inline--fa fa-comment-alt fa-w-16"
+					role="img"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 512 512"
+					height="1em"
+					width="1em"
+				>
+					<path
+						fill="currentColor"
+						d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+					/>
+				</svg>
+				<span>Join our community</span>
+			</a>
+		</li>
+	)}
+</ul>
+<div style="margin: 2rem 0; text-align: center;">
+	<ThemeToggleButton client:visible />
+</div>
+
+<style>
+	.edit-on-github {
+		text-decoration: none;
+		font: inherit;
+		color: inherit;
+		font-size: 1rem;
+	}
+</style>
--- a/src/components/RightSidebar/RightSidebar.astro
+++ b/src/components/RightSidebar/RightSidebar.astro
@ -0,0 +1,34 @@
+---
+import TableOfContents from './TableOfContents';
+import MoreMenu from './MoreMenu.astro';
+import type { MarkdownHeading } from 'astro';
+
+type Props = {
+	headings: MarkdownHeading[];
+	githubEditUrl: string;
+};
+
+const { headings, githubEditUrl } = Astro.props as Props;
+---
+
+<nav class="sidebar-nav" aria-labelledby="grid-right">
+	<div class="sidebar-nav-inner">
+		<TableOfContents client:media="(min-width: 50em)" headings={headings} />
+		<MoreMenu editHref={githubEditUrl} />
+	</div>
+</nav>
+
+<style>
+	.sidebar-nav {
+		width: 100%;
+		position: sticky;
+		top: 0;
+	}
+
+	.sidebar-nav-inner {
+		height: 100%;
+		padding: 0;
+		padding-top: var(--doc-padding);
+		overflow: auto;
+	}
+</style>
--- a/src/components/RightSidebar/TableOfContents.tsx
+++ b/src/components/RightSidebar/TableOfContents.tsx
@ -0,0 +1,56 @@
+import type { FunctionalComponent } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import type { MarkdownHeading } from 'astro';
+
+type ItemOffsets = {
+	id: string;
+	topOffset: number;
+};
+
+const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
+	headings = [],
+}) => {
+	const itemOffsets = useRef<ItemOffsets[]>([]);
+	// FIXME: Not sure what this state is doing. It was never set to anything truthy.
+	const [activeId] = useState<string>('');
+	useEffect(() => {
+		const getItemOffsets = () => {
+			const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
+			itemOffsets.current = Array.from(titles).map((title) => ({
+				id: title.id,
+				topOffset: title.getBoundingClientRect().top + window.scrollY,
+			}));
+		};
+
+		getItemOffsets();
+		window.addEventListener('resize', getItemOffsets);
+
+		return () => {
+			window.removeEventListener('resize', getItemOffsets);
+		};
+	}, []);
+
+	return (
+		<>
+			<h2 className="heading">On this page</h2>
+			<ul>
+				<li className={`heading-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
+					<a href="#overview">Overview</a>
+				</li>
+				{headings
+					.filter(({ depth }) => depth > 1 && depth < 4)
+					.map((heading) => (
+						<li
+							className={`heading-link depth-${heading.depth} ${
+								activeId === heading.slug ? 'active' : ''
+							}`.trim()}
+						>
+							<a href={`#${heading.slug}`}>{heading.text}</a>
+						</li>
+					))}
+			</ul>
+		</>
+	);
+};
+
+export default TableOfContents;
--- a/src/components/RightSidebar/ThemeToggleButton.css
+++ b/src/components/RightSidebar/ThemeToggleButton.css
@ -0,0 +1,37 @@
+.theme-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25em;
+	padding: 0.33em 0.67em;
+	border-radius: 99em;
+	background-color: var(--theme-code-inline-bg);
+}
+
+.theme-toggle > label:focus-within {
+	outline: 2px solid transparent;
+	box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+}
+
+.theme-toggle > label {
+	color: var(--theme-code-inline-text);
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0.5;
+}
+
+.theme-toggle .checked {
+	color: var(--theme-accent);
+	opacity: 1;
+}
+
+input[name='theme-toggle'] {
+	position: absolute;
+	opacity: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+}
--- a/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/src/components/RightSidebar/ThemeToggleButton.tsx
@ -0,0 +1,82 @@
+import type { FunctionalComponent } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import './ThemeToggleButton.css';
+
+const themes = ['light', 'dark'];
+
+const icons = [
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="currentColor"
+	>
+		<path
+			fillRule="evenodd"
+			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+			clipRule="evenodd"
+		/>
+	</svg>,
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="currentColor"
+	>
+		<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+	</svg>,
+];
+
+const ThemeToggle: FunctionalComponent = () => {
+	const [theme, setTheme] = useState(() => {
+		if (import.meta.env.SSR) {
+			return undefined;
+		}
+		if (typeof localStorage !== undefined && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+		return 'light';
+	});
+
+	useEffect(() => {
+		const root = document.documentElement;
+		if (theme === 'light') {
+			root.classList.remove('theme-dark');
+		} else {
+			root.classList.add('theme-dark');
+		}
+	}, [theme]);
+
+	return (
+		<div className="theme-toggle">
+			{themes.map((t, i) => {
+				const icon = icons[i];
+				const checked = t === theme;
+				return (
+					<label className={checked ? ' checked' : ''}>
+						{icon}
+						<input
+							type="radio"
+							name="theme-toggle"
+							checked={checked}
+							value={t}
+							title={`Use ${t} theme`}
+							aria-label={`Use ${t} theme`}
+							onChange={() => {
+								localStorage.setItem('theme', t);
+								setTheme(t);
+							}}
+						/>
+					</label>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ThemeToggle;
--- a/src/components/SwitchDetailRow.vue
+++ b/src/components/SwitchDetailRow.vue
@ -1,71 +0,0 @@
-<template>
-  <div class="p-4 bg-gray-200 dark-mode:bg-gray-900 rounded-b">
-    <div class="flex flex-wrap">
-      <div class="md:w-1/4 w-1/3 mb-4">
-        <div class="font-bold mb-1">
-          Colors
-        </div>
-        <ul>
-          <li>Stem: {{ rowData.stem_color }}</li>
-          <li>Housing Top: {{ rowData.housing_color.top }}</li>
-          <li>Housing Bottom: {{ rowData.housing_color.bottom }}</li>
-          <li>Spring: {{ rowData.spring_color }}</li>
-        </ul>
-      </div>
-      <div class="md:w-1/4 w-1/3 mb-4">
-        <div class="font-bold mb-1">
-          Travel
-        </div>
-        <ul>
-          <li>Actuation: {{ rowData.travel.actuation }}mm</li>
-          <li>Bottom Out: {{ rowData.travel.bottom_out }}mm</li>
-        </ul>
-      </div>
-      <div class="md:w-1/4 w-1/3 mb-4">
-        <div class="font-bold mb-1">
-          Mic
-        </div>
-        <ul>
-          <li>Sense Method: {{ rowData.sense_method }}</li>
-          <li>Led Style: {{ rowData.led_style }}</li>
-          <li v-if="rowData.datasheet">
-            <a :href="rowData.datasheet">Datasheet</a>
-          </li>
-        </ul>
-      </div>
-      <div :v-if="rowData.images.length > 0" class="md:w-1/4 w-full md:justify-center">
-        <img :src="rowData.images[0]" :alt="rowData.brand + rowData.model">
-      </div>
-    </div>
-    <div class="mt-4">
-        <div class="font-bold">
-          Notes
-        </div>
-      <p>{{ rowData.notes }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "switch-detail-row",
-  props: {
-    rowData: {
-      type: Object,
-      required: true
-    },
-    rowIndex: {
-      type: Number
-    },
-    options: {
-      type: Object,
-    }
-  }
-}
-</script>
-
-<style>
-.vuetable-detail-row td {
-  padding-top: 0;
-}
-</style>
--- a/src/config.ts
+++ b/src/config.ts
@ -0,0 +1,63 @@
+export const SITE = {
+	title: 'Keebfolio',
+	description: 'A awesome mechanical keyboard list.',
+	defaultLanguage: 'en_US',
+};
+
+export const OPEN_GRAPH = {
+	image: {
+		src: 'https://github.com/withastro/astro/blob/main/assets/social/banner.jpg?raw=true',
+		alt:
+			'astro logo on a starry expanse of space,' +
+			' with a purple saturn-like planet floating in the right foreground',
+	},
+	// twitter: '',
+};
+
+// This is the type of the frontmatter you put in the docs markdown files.
+export type Frontmatter = {
+	title: string;
+	description: string;
+	layout: string;
+	image?: { src: string; alt: string };
+	dir?: 'ltr' | 'rtl';
+	ogLocale?: string;
+	lang?: string;
+};
+
+export const KNOWN_LANGUAGES = {
+	English: 'en',
+} as const;
+export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
+
+export const GITHUB_EDIT_URL = `https://github.com/BenRoe/awesome-mechanical-keyboard`;
+
+export const COMMUNITY_INVITE_URL = `https://github.com/BenRoe/awesome-mechanical-keyboard/discussions`;
+
+// See "Algolia" section of the README for more information.
+export const ALGOLIA = {
+	indexName: '',
+	appId: '',
+	apiKey: '',
+};
+
+export type Sidebar = Record<
+	typeof KNOWN_LANGUAGE_CODES[number],
+	Record<string, { text: string; link: string }[]>
+>;
+export const SIDEBAR: Sidebar = {
+	en: {
+		'Keyboards': [
+			{ text: 'Staggered', link: 'en/staggered' },
+			{ text: 'Ortho', link: 'en/ortholinear' },
+			{ text: 'Split', link: 'en/split' },
+			{ text: 'Other', link: 'en/other' },
+		],
+		'-------': [
+			{ text: 'Firmware', link: 'en/firmware' },
+			{ text: 'Miscellaneous', link: 'en/miscellaneous' },
+			{ text: 'Tools', link: 'en/tools' },
+			{ text: 'Tutorials', link: 'en/tutorials' }
+		],
+	},
+};
--- a/src/data/doc-links.yaml
+++ b/src/data/doc-links.yaml
@ -1,12 +0,0 @@
- title: Section 1
-  items:
-    - title: Keyboards
-      link:  /
-    - title: Firmware
-      link: /firmware
-    - title: Tools
-      link: /tools
-    - title: Tutorials
-      link: /tutorials
-    - title: Miscellaneous
-      link:  /miscellaneous
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -0,0 +1 @@
+/// <reference types="astro/client" />
--- a/src/favicon.png
+++ b/src/favicon.png
--- a/src/languages.ts
+++ b/src/languages.ts
@ -0,0 +1,10 @@
+import { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES } from './config';
+export { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES };
+
+export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//;
+
+export function getLanguageFromURL(pathname: string) {
+	const langCodeMatch = pathname.match(langPathRegex);
+	const langCode = langCodeMatch ? langCodeMatch[1] : 'en';
+	return langCode as typeof KNOWN_LANGUAGE_CODES[number];
+}
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@ -1,32 +0,0 @@
-<template>
-  <div class="content-wrapper dark-mode:bg-gray-900">
-    <Header />
-
-    <div class="container w-full flex flex-wrap mx-auto px-4 pb-4">
-      <slot/>
-    </div>
-
-    <Footer />
-
-  </div>
-</template>
-
-<static-query>
-query {
-  metadata {
-    siteName
-  }
-}
-</static-query>
-
-<script>
-import Header from './partials/Header'
-import Footer from './partials/Footer'
-
-export default {
-  components: {
-    Header,
-    Footer,
-  }
-};
-</script>
--- a/src/layouts/Docs.vue
+++ b/src/layouts/Docs.vue
@ -1,256 +0,0 @@
-<template>
-  <Layout>
-      <!-- Sidebar Nav -->
-      <div v-if="links" class="w-full lg:w-1/5 p-6 pl-0 text-gray-800 dark-mode:text-gray-400 leading-normal"> 
-        <template v-for="(group, i1) in links">
-          <!-- Section headline not needed -->
-          <!-- <p class="font-bold py-2 lg:pb-6 text-gray-700"
-            :key="`title-${i1}`">
-            {{ group.title }}
-          </p> -->
-          <!-- Fake dropdown field as menu toggle for mobile view -->
-          <div class="block lg:hidden sticky inset-0">
-            <button id="side-nav-toggle"
-                    class="flex w-full justify-end px-3 py-3 bg-white dark-mode:bg-gray-900 lg:bg-transparent border rounded border-gray-500 dark-mode:border-gray-700 hover:border-primary appearance-none focus:outline-none">
-              <svg class="fill-current h-4 float-right" 
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg">
-                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
-              </svg>
-            </button>
-          </div>    
-          <div id="menu-content"
-              class="w-full inset-0 h-64 lg:h-auto overflow-x-hidden overflow-y-scroll lg:overflow-y-hidden lg:block mt-0 border border-gray-400 rounded-b lg:border-transparent dark-mode:border-transparent shadow lg:shadow-none lg:bg-transparent z-20"
-              :class="{hidden: !showDropdownMenu}">
-            <ul class="list-reset ml-4 lg:ml-0 mt-4 lg:mt-0">
-              <li v-for="(item, i2) in group.items"
-                  class="py-1">
-                <g-link :to="item.link" :key="`link-${i1}-${i2}`"
-                        class="block my-2 pl-0 align-middle border-transparent lg:border-secondary lg:hover:border-secondary-light">
-                  {{ item.title }}
-                </g-link>
-                <!-- Submenu -->
-                <ul v-if="item.link === currentPath && subtitles && subtitles.length" :key="`submenu-${i1}-${i2}`"
-                    class="ml-0">
-                  <li v-for="subtitle in subtitles"
-                      class="block py-1 pl-4 align-middle hover:text-primary-dark border-transparent lg:border-l-4 lg:border-primary lg:hover:border-secondary">
-                    <g-link :to="item.link + subtitle.anchor"
-                            class="hover:text-primary">
-                      {{ subtitle.value }}
-                    </g-link>
-                  </li>
-                </ul>
-                <!-- /Submenu -->
-              </li>
-            </ul>
-            <button
-              v-on:click="modalShow"
-              class="hidden lg:inline-block mt-10 font-mono text-sm font-bold"
-            >
-              Suggest a Project
-            </button>
-          </div>
-        </template>
-      </div>
-      <!-- /Sidebar Nav -->
-      
-      <div class="w-full text-center font-mono lg:hidden text-primary hover:text-primary-light">
-        <button v-on:click="modalShow">
-          Suggest a Project
-        </button>
-      </div>
-      
-      <!-- Content -->
-      <div class="w-full lg:w-4/5 py-6 lg:p-6 lg:mt-0 leading-normal">
-        <slot />
-        <!--Back link -->
-        <div class="w-full lg:ml-auto mt-8 text-base">        
-          <nav class="flex">
-            <div class="flex-grow text-left">
-              <g-link v-if="previousPage" :to="previousPage.link"
-                      class="text-base md:text-sm font-bold text-gray-600">
-                <font-awesome :icon="['fas', 'caret-left']" class="mr-1"/>
-                {{ previousPage.title }}
-              </g-link>
-            </div>
-            <div class="flex-grow text-right">
-              <g-link v-if="nextPage" :to="nextPage.link"
-                      class="text-base md:text-sm font-bold text-gray-600">
-                {{ nextPage.title }}
-                <font-awesome :icon="['fas', 'caret-right']" class="mr-1"/>
-              </g-link>
-            </div>
-          </nav>
-        </div>    
-        <!-- /Content -->
-        <!-- <hr class="mb-6 border-b border-gray-400"> -->
-        <p class="mt-20">
-          <a :href="editLink" target="_blank">
-            <font-awesome :icon="['fab', 'github']" class="mr-1"/>
-            <span>Edit this page on GitHub</span>
-          </a>
-        </p>
-        
-        <ClientOnly>    
-          <modal
-            name="contact-form"
-            :adaptive="true"
-            :scrollable="true"
-            height="auto"
-          >
-            <div class="mb-4 mt-4 pb-4 border-b dark-mode:border-gray-800 font-bold text-xl text-center text-primary">
-              Suggest new content
-            </div>
-            <div class="absolute top-0 right-0">
-              <button v-on:click="modalHide">
-                <font-awesome :icon="['far', 'window-close']" class="m-6 text-gray-500 hover:text-primary-light"/>
-              </button>
-            </div>
-            
-            <div class="m-6">
-              <form 
-                name="newContent"
-                method="post"
-                v-on:submit.prevent="handleSubmit"
-                action="/success/"
-                data-netlify="true"
-                data-netlify-honeypot="bot-field"
-              > 
-
-                <input type="hidden" name="form-name" value="newContent" />
-                <p hidden>
-                  <label>
-                    Don’t fill this out: <input name="bot-field" />
-                  </label>
-                </p>
-
-                <div class="md:flex md:items-center mb-6">
-                  <div class="md:w-1/3 pb-2">
-                    <label for="name" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
-                      Project Name
-                    </label>
-                  </div>
-                  <div class="md:w-2/3">
-                    <input type="text" name="name" v-model="formData.name" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
-                  </div>
-                </div>
-
-                <div class="md:flex md:items-center mb-6">
-                  <div class="md:w-1/3 pb-2">
-                    <label for="link" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
-                      Link
-                    </label>
-                  </div>
-                  <div class="md:w-2/3">
-                    <input type="url" name="link" v-model="formData.link" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
-                  </div>
-                </div>
-                
-                <div class="md:flex md:items-center mb-6">
-                  <div class="md:w-1/3 self-start">
-                    <label for="description" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
-                      Short Description
-                    </label>
-                  </div>
-                  <div class="md:w-2/3">
-                    <textarea name="description" maxlength="300" v-model="formData.description" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
-                  </div>
-                </div>
-
-                <div class="md:flex md:items-center">
-                  <div class="md:w-1/3"></div>
-                  <div class="md:w-1/3">
-                    <button type="submit" class="shadow bg-primary hover:bg-primary-light focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">Submit</button>
-                  </div>
-                </div>
-              
-              </form>
-            </div>
-          </modal>
-        </ClientOnly>
-
-      </div>
-  </Layout>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      showDropdownMenu: false,
-      formData: {},
-    }
-  },
-  methods: {
-    modalShow () {
-      if (process.isClient) {
-      this.$modal.show('contact-form');
-      }
-    },
-    modalHide () {
-      if (process.isClient) {
-      this.$modal.hide('contact-form');
-      }
-    },
-    encode(data) {
-      return Object.keys(data)
-        .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
-        .join('&')
-    },
-    handleSubmit(e) {
-      fetch('/', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: this.encode({
-          'form-name': e.target.getAttribute('name'),
-          ...this.formData,
-        }),
-      })
-      .then(() => this.$router.push('/success'))
-      .catch(error => alert(error))
-    }
-  },
-  mounted: function () {
-    const that = this
-    
-    // Attach event listener to the root vue element
-    this.$el.addEventListener('click', function (ev) {
-      if (ev.target.id === 'side-nav-toggle') {        
-        // click on the sidebar menu fake dropdown in mobile view
-        that.showDropdownMenu = !that.showDropdownMenutrue
-
-      } else {
-        // click not on the sidebar menu fake dropdown in mobile view
-        that.showDropdownMenu = false
-      }
-    })
-  },
-  props: {
-    subtitles: Array,
-    links: Array
-  },
-  computed: {
-    currentPath () {
-      return this.$route.path
-    },
-    editLink () {
-      let path = this.currentPath
-      if((path.match(new RegExp("/(.+)", "g")) || []).length == 0) path = path + 'README'
-      return `https://github.com/BenRoe/awesome-mechanical-keyboard/blob/master/docs${path}.md`
-    },
-    items () {
-      return this.links.reduce((acc, group) => (acc.push(...group.items), acc), [])
-    },
-    currentIndex () {
-      return this.items.findIndex(item => item.link === this.$route.path)
-    },
-    nextPage () {
-      return this.items[this.currentIndex + 1]
-    },
-    previousPage () {
-      return this.items[this.currentIndex - 1]
-    }
-  }
-}
-</script>
-
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@ -0,0 +1,140 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
+import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
+import * as CONFIG from '../config';
+import type { MarkdownHeading } from 'astro';
+import Footer from '../components/Footer/Footer.astro';
+import { Image, Picture } from '@astrojs/image/components';
+
+type Props = {
+	frontmatter: CONFIG.Frontmatter;
+	headings: MarkdownHeading[];
+};
+
+const { frontmatter, headings } = Astro.props as Props;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const currentPage = Astro.url.pathname;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
+const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
+---
+
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
+	<head>
+		<HeadCommon />
+		<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+		<title>
+			{frontmatter.title ? `${frontmatter.title} - ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+		</title>
+		<style>
+			body {
+				width: 100%;
+				display: grid;
+				grid-template-rows: var(--theme-navbar-height) 1fr;
+				--gutter: 0.5rem;
+				--doc-padding: 2rem;
+			}
+
+			.layout {
+				display: grid;
+				grid-auto-flow: column;
+				grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(
+						var(--gutter),
+						1fr
+					);
+				overflow-x: hidden;
+			}
+
+			.grid-sidebar {
+				height: 100vh;
+				position: sticky;
+				top: 0;
+				padding: 0;
+			}
+
+			#grid-left {
+				position: fixed;
+				background-color: var(--theme-bg);
+				z-index: 10;
+				display: none;
+			}
+
+			#grid-main {
+				padding: var(--doc-padding) var(--gutter);
+				grid-column: 2;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			#grid-right {
+				display: none;
+			}
+
+			@media (min-width: 50em) {
+				.layout {
+					overflow: initial;
+					grid-template-columns: 20rem minmax(0, var(--max-width));
+					gap: 1em;
+				}
+
+				#grid-left {
+					display: flex;
+					padding-left: 2rem;
+					position: sticky;
+					grid-column: 1;
+				}
+			}
+
+			@media (min-width: 72em) {
+				.layout {
+					grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
+					padding-left: 0;
+					padding-right: 0;
+					margin: 0 auto;
+				}
+
+				#grid-right {
+					grid-column: 3;
+					display: flex;
+				}
+			}
+		</style>
+		<style is:global>
+			.layout > * {
+				width: 100%;
+				height: 100%;
+			}
+
+			.mobile-sidebar-toggle {
+				overflow: hidden;
+			}
+
+			.mobile-sidebar-toggle #grid-left {
+				display: block;
+				top: 2rem;
+			}
+		</style>
+	</head>
+
+	<body>
+		<Header currentPage={currentPage} />
+		<main class="layout">
+			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+				<LeftSidebar currentPage={currentPage} />
+			</aside>
+			<div id="grid-main">
+				<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
+					<slot />
+				</PageContent>
+			</div>
+			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
+				<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
+			</aside>
+		</main>
+		<Footer path={currentFile} />
+	</body>
+</html>
--- a/src/layouts/README.md
+++ b/src/layouts/README.md
@ -1,5 +0,0 @@
-Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
-
-Learn more about Layouts: https://gridsome.org/docs/layouts
-
-You can delete this file.
--- a/src/layouts/partials/Footer.vue
+++ b/src/layouts/partials/Footer.vue
@ -1,79 +0,0 @@
-<template>
-  <footer class="bg-gray-100 dark-mode:bg-gray-900 border-t border-gray-300 dark-mode:border-gray-800">
-      <div class="container mx-auto flex py-8">
-        <div class="w-full mx-auto flex flex-wrap">
-          <div class="flex w-full">
-            <div class="px-8">
-                <h3 class="font-bold text-gray-900 dark-mode:text-gray-600">
-                  <font-awesome :icon="['fas', 'heart']" class="mr-1" size="xs"></font-awesome>
-                  Sponsor
-                </h3>
-                <ul class="flex flex-wrap">
-                  <li v-for="edge in $static.allSponsors.edges" :key="edge.node.id"
-                      class="m-4 text-xs text-gray-600">
-                    <a v-bind:href="edge.node.url">
-                      <img v-bind:src="edge.node.avatarUrl"
-                            class="mx-auto mb-1 w-10 h-10 rounded-full"/>
-                      {{ edge.node.login }}
-                    </a>
-                  </li>
-                </ul>
-            </div>
-          </div>
-
-          <div class="flex w-full">
-            <div class="px-8">
-                <h3 class="font-bold text-gray-900 dark-mode:text-gray-600">
-                  Contributors
-                </h3>
-                <ul class="flex flex-wrap">
-                  <li v-for="edge in $static.allContributors.edges" :key="edge.node.id"
-                      class="m-4 text-xs text-gray-600">
-                    <a v-bind:href="edge.node.url">
-                      <img v-bind:src="edge.node.avatar_url"
-                            class="mx-auto mb-1 w-10 h-10 rounded-full"/>
-                      {{ edge.node.name }}
-                    </a>
-                  </li>
-                </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-  </footer>
-</template>
-
-<static-query>
-query {
-  allContributors (sortBy: "contribution"){
-    edges{
-      node{
-        id
-        name
-        avatar_url
-        url
-      }
-    }
-  }
-  allSponsors {
-    edges {
-      node {
-        id
-        login
-        avatarUrl
-        url
-      }
-    }
-  }
-}
-</static-query>
-
-<script>
-export default {
-  components: {
-  }
-}
-</script>
-
-<style>
-</style>
--- a/src/layouts/partials/Header.vue
+++ b/src/layouts/partials/Header.vue
@ -1,100 +0,0 @@
-<template>
-  <header>
-    <nav id="header" class="w-full z-10 top-0 border-b border-gray-300 dark-mode:border-gray-800">
-      <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-4">
-        <!-- Logo -->
-        <div class="pl-4 flex items-center">
-          <g-link to="/">
-            <font-awesome
-              :icon="['fas', 'keyboard']"
-              class="mr-2 text-primary-light hover:text-primary"
-              size="2x"
-            ></font-awesome>
-          </g-link>
-          <g-link
-            to="/"
-            class="text-secondary group-hover:text-secondary-dark text-base no-underline hover:no-underline font-extrabold text-xl"
-          >Keebfol.io</g-link>
-        </div>
-        <!-- Mobile Menu Button -->
-        <div class="block lg:hidden pr-4">
-          <button
-            id="main-nav-toggle"
-            class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-500 hover:text-primary hover:border-primary appearance-none focus:outline-none"
-          >
-            <svg
-              class="fill-current h-3 w-3"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>Menu</title>
-              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-            </svg>
-          </button>
-        </div>
-        <!-- /Mobile Menu Button -->
-        <div
-          id="nav-content"
-          class="w-full flex-grow lg:flex lg:content-center lg:items-center lg:w-auto lg:block mt-2 lg:mt-0 z-20"
-          :class="{hidden: !showMobileMenu}"
-        >
-          <div class="flex-1 w-full mx-auto max-w-sm content-center py-4 lg:py-0">
-            <div class="relative pull-right pl-4 pr-4 md:pr-0">
-              <!-- <input type="search" placeholder="Search" class="w-full bg-gray-100 text-sm text-gray-800 transition border focus:outline-none focus:border-purple-500 rounded py-1 px-2 pl-10 appearance-none leading-normal">
-                     <div class="absolute search-icon" style="top: 0.375rem;left: 1.75rem;">
-                        <svg class="fill-current pointer-events-none text-gray-800 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                           <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
-                        </svg>
-              </div>-->
-            </div>
-          </div>
-          <ul class="list-reset lg:flex justify-end items-center">
-            <li class="mr-3 py-2 lg:py-0">
-              <g-link to="/" class="inline-block py-2 px-4">Open Source Projects</g-link>
-            </li>
-            <li class="mr-3 py-2 lg:py-0">
-              <g-link to="/switch-database" class="inline-block py-2 px-4">Switch Database</g-link>
-            </li>
-            <li>
-              <g-link to="/news" class="inline-block py-2 pl-4">What Is New</g-link>
-              <a href="/rss.xml" class="inline-block py-2 px-2">
-                <font-awesome :icon="['fas', 'rss']"></font-awesome>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  </header>
-</template>
-
-<script>
-// import SearchInput from "../../components/SearchInput";
-
-export default {
-  components: {
-    //  SearchInput
-  },
-  data() {
-    return {
-      showMobileMenu: false,
-      theme: ""
-    };
-  },
-  methods: {},
-  mounted: function() {
-    const that = this;
-
-    // Attach event listener to the root vue element
-    this.$el.addEventListener("click", function(ev) {
-      if (ev.target.id === "main-nav-toggle") {
-        // clicked on the nav button in mobile view
-        that.showMobileMenu = !that.showMobileMenu;
-      } else {
-        // click somewhere else, not on the nav button
-        that.showMobileMenu = false;
-      }
-    });
-  }
-};
-</script>
--- a/src/main.js
+++ b/src/main.js
@ -1,46 +0,0 @@
-// This is the main.js file. Import global CSS and scripts here.
-// The Client API can be used here. Learn more: gridsome.org/docs/client-api
-
-// Add global components
-import DefaultLayout from '~/layouts/Default.vue'
-import DocsLayout from '~/layouts/Docs.vue'
-
-import { config, library } from '@fortawesome/fontawesome-svg-core'
-import { faGithub, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
-import { faKeyboard, faRss, faCaretLeft, faCaretRight, faUserNinja, faHeart} from '@fortawesome/free-solid-svg-icons'
-import { faWindowClose } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-import '@fortawesome/fontawesome-svg-core/styles.css'
-import '~/assets/css/tailwind.css'
-
-// Make sure you tell Font Awesome to skip auto-inserting CSS into the <head>
-config.autoAddCss = false
-library.add(faGithub, faKeyboard, faRss, faCaretLeft, faCaretRight, faWindowClose, faUserNinja, faHeart)
-
-export default function (Vue, { router, head, isClient }) {
-  // Set default layout as a global component
-  Vue.component('Layout', DefaultLayout)
-  Vue.component('DocsLayout', DocsLayout)
-  Vue.component('font-awesome', FontAwesomeIcon)
-  
-  if (isClient) {
-    // prevent tracking on development
-    if (!window.location.host.startsWith('localhost')) {
-      // Fathom
-      (function(f, a, t, h, o, m){
-        a[h]=a[h]||function(){
-          (a[h].q=a[h].q||[]).push(arguments)
-        };
-        o=f.createElement('script'),
-        m=f.getElementsByTagName('script')[0];
-        o.async=1; o.src=t; o.id='fathom-script';
-        m.parentNode.insertBefore(o,m)
-      })(document, window, '//analytics.panapro.de/tracker.js', 'fathom');
-      fathom('set', 'siteId', 'XQYAD');
-      fathom('trackPageview');
-    }
-  }
-}
-
-
--- a/src/pages/404.vue
+++ b/src/pages/404.vue
@ -1,18 +0,0 @@
-<template>
-  <Layout>
-    <div class="container-inner mx-auto text-center py-16">
-      <g-image class="mx-auto lg:w-3/4" src="../../static/404.svg" />
-      <h2 class="text-4xl font-bold">Page Not Found</h2>
-    </div>
-
-  </Layout>
-</template>
-
-<script>
-export default {
-  metaInfo: {
-    title: 'Page Not Found'
-  }
-}
-</script>
-
--- a/src/pages/README.md
+++ b/src/pages/README.md
@ -1,5 +0,0 @@
-Pages are usually used for normal pages or for listing items from a GraphQL collection.
-Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
-Learn more about pages: https://gridsome.org/docs/pages
-
-You can delete this file.
--- a/src/pages/en/firmware.md
+++ b/src/pages/en/firmware.md
@ -1,4 +1,8 @@
-# Firmware
+---
+title: Firmware
+description: Keyboard Firmware List
+layout: ../../layouts/MainLayout.astro
+---

 - [BlueMicro_BLE](https://github.com/jpconstantineau/BlueMicro_BLE) - A Bluetooth Firmware for the NRF52832.
 - [Bluetosis](https://github.com/geoah/bluetosis) - Bluetooth firmware for the Mitosis keyboard.
@ -15,12 +19,12 @@
 - [TMK](https://github.com/tmk/tmk_keyboard) - Keyboard firmwares for Atmel AVR and Cortex-M.
 - [ZMK](https://zmkfirmware.dev) - MIT-licensed firmware built on top of the Zephyr RTOS that is “wireless first”.

-## QMK
+## QMK Tools
 - [kbd-prettier](https://github.com/blakedietz/kbd-prettier) - Automatically format your keyboard layout
 - [Keyboard Firmware Builder](https://kbfirmware.com) - Online QMK Firmware Builder (2+ years behind QMK firmware master)
 - [Q2K](https://github.com/2hwk/Q2K) - A python based utility for parsing QMK Firmware keymaps to various outputs
 - [QMK Configurator](https://config.qmk.fm/) - An open source configurator for QMK Firmware
 - [qmk_emote_macro_generator](https://github.com/klardotsh/qmk_emote_macro_generator) - Easily generate QMK macro/leader sequences for arbitrary unicode sequences.

-## TMK
+## TMK Tools
 - [TMK Firmware Builder](http://kb.sized.io) - Online TMK Firmware Builder
--- a/src/pages/en/miscellaneous.md
+++ b/src/pages/en/miscellaneous.md
@ -1,4 +1,8 @@
-# Miscellaneous
+---
+title: Miscellaneous
+description:
+layout: ../../layouts/MainLayout.astro
+---

 - [Chimera-Battery-Mod](https://github.com/wizarddata/Chimera-Battery-Mod) - This is a mod designed to add a convenient battery holder and power switch to the Chimera family of wireless keyboards.
 - [Keyrigami](https://github.com/geckopfote/keyrigami) - Keycaps made from paper.
--- a/src/pages/en/ortholinear.md
+++ b/src/pages/en/ortholinear.md
@ -0,0 +1,33 @@
+---
+title: Ortholinear Keyboards
+description: Ortholinear Keyboards List
+layout: ../../layouts/MainLayout.astro
+---
+
+| Name | Available Files | Tags | Image |
+| --- | --- | :---: | :---: |
+| [Alpsie](https://github.com/larrbo/odd-rocket/tree/master/alpsie) | pcb, case | 4x12, pro micro, alps, plate | <img src="https://3.bp.blogspot.com/-IAVUSnTmtZA/XArbAHFK5wI/AAAAAAAABeE/FKTl072R1CkIZwXr4AVCZ-_qG7uRjHw9wCLcBGAs/s640/IMG_20181128_194036.jpg" width="200px" /> |
+| [Cheap_boi](https://github.com/MangoIV/cheap_boi) | pcb, case | atmega32u4, ssd1306, oled | <img src="https://github.com/MangoIV/cheap_boi/blob/master/renders/pcb_front.jpg?raw=true" width="200px" /> |
+| [Contra](https://github.com/ai03-2725/Contra) | pcb | 4x12 | <img src="https://raw.githubusercontent.com/ai03-2725/Contra/master/Images/back-2.0.jpg" width="200px" /> |
+| [Crisco](https://github.com/ch604/crisco) | pcb | 2x12, pro micro, kailh-choc, oled, ssd1306, steno, led | <img src="https://raw.githubusercontent.com/ch604/crisco/main/crisco-v0.3.png" width="200px" /> |
+| [DIY Low-Profile Ortholinear](https://www.reddit.com/r/MechanicalKeyboards/comments/8sy17h/diy_low_profile_ortho/) ([PCB File](https://easyeda.com/7zark7/Kailh-Ortholinear)) | pcb | 14x6, low profile, teensy | <img src="https://i.imgur.com/cfNpqEE.jpg" width="200px" /> |
+| [Dorsch 40k](https://hackaday.io/project/174095-dorsch-40k-keyboard) | pcb | 4x10, micro-usb, kailh-choc, low-profile | <img src="https://cdn.hackaday.io/images/3652331597248546262.jpg" width="200px" /> |
+| [Dorsch 48k](https://hackaday.io/project/174917-dorsch-48k-keyboard) | pcb | 4x12, micro-usb, kailh-choc, low-profile | <img src="https://cdn.hackaday.io/images/1324301600590596407.jpg" width="200px" /> |
+| [Eternal Keypad](https://github.com/duckyb/eternal-keypad) | pcb, case | 5x7, pro micro, gaming, keypad | <img src="https://user-images.githubusercontent.com/27895007/144914161-c3f6f8ba-5b78-4c85-b8e2-320ba73d80ce.png" width="200px" /> |
+| [Framework](https://github.com/stevennguyen/framework) | pcb, case | 5x12, through-hole, usb-c, rotary-encoder | <img src="https://raw.githubusercontent.com/stevennguyen/framework/master/images/1.jpg" width="200px" /> |
+| [Gherkin](https://git.40percent.club/di0ib/Misc/src/branch/master/gherkin%20pack) | pcb | 30%, 3x10 |  <img src="https://git.40percent.club/di0ib/Misc/raw/branch/master/gherkin%20pack/gherkinpack.png" width="200px" /> |
+| [Helix](https://github.com/MakotoKurauchi/helix) | pcb, case | split, oled | <img src="https://camo.githubusercontent.com/348c95ff3baea20626e282b1a719eea49d0897b9/68747470733a2f2f692e696d6775722e636f6d2f5842416d796e4e2e6a7067" width="200px" /> |
+| [Lumberjack](https://github.com/peej/lumberjack-keyboard) | pcb | 5x12, through-hole, usb-mini, ATMEGA328P-PU | <img src="https://raw.githubusercontent.com/peej/lumberjack-keyboard/master/images/tofu-sa-vilebloom.jpg" width="200px" /> |
+| [Koda](https://github.com/larrbo/odd-rocket/tree/master/koda) | pcb, case | 4x12, pro micro, kailh-choc | <img src="https://4.bp.blogspot.com/-E9gGZbziicI/WwoNKDP-YPI/AAAAAAAABYk/IXV4gGrcQKo5Bqf7CRVpR_zYH2SCxAXwACLcBGAs/s400/IMG_20180522_231738.jpg" width="200px" /> |
+| [Otterlinear-keyboard](https://github.com/Jana-Marie/otterlinear-keyboard) | pcb, case | 5x12, stm32f042, kailh-choc | <img src="https://raw.githubusercontent.com/Jana-Marie/otterlinear-keyboard/main/img/FG7vpoGXIAYDPLb.jpeg" width="200px" /> |
+| [Plaid](https://github.com/hsgw/plaid) | pcb | 4x12, atmega328p, through hole | <img src="https://user-images.githubusercontent.com/2714926/49872071-481ae000-fe5b-11e8-963d-8aaa3a653e4d.jpg" width="200px" /> |
+| [Planck THK](https://github.com/olkb/planck_thk) | pcb, case | 4x12, rotary encoder | <img src="https://i.imgur.com/Jiy1jLN.jpg" width="200px" /> |
+| [PouetPouet](https://github.com/dkm/pouetpouet-board) | pcb  | 5x12, smd, usb-c, STM32F072CBT6 | <img src="https://raw.githubusercontent.com/dkm/pouetpouet-board/master/images/nyan-keeb.jpg" width="200px" /> |
+| [PRKL30](https://github.com/ErkHal/prkl30) | pcb, case | 30%, pro micro, bluetooth, underglow | <img src="https://camo.githubusercontent.com/9b39ee253a7cdcbfdbe80f7ef36ddd3ad5b17382/68747470733a2f2f692e696d6775722e636f6d2f4e6b67493339492e6a7067" width="200px"/> |
+| [Punk75](https://github.com/dsanchezseco/punk75) | pcb, case | 5x15, through-hole, usb-c, rotary-encoder, atmega32a-pu | <img src="https://raw.githubusercontent.com/dsanchezseco/punk75/master/generated/images/punk75_front.jpg" width="200px" /> |
+| [QOL56](https://github.com/eswai/QOL56) | pcb, case | 4x14, pro micro, underglow, rgb | <img src="https://github.com/eswai/QOL56/raw/master/qol56-7.jpg" width="200px" /> |
+| [SharkPCB](https://github.com/Gondolindrim/SharkPCB) | pcb, case | 4x12, rotary encoder, STM32, underglow, 3d print | <img src="https://raw.githubusercontent.com/Gondolindrim/SharkPCB/master/graphics/renders/top.png" width="200px" /> |
+| [Splitish](https://github.com/RSchneyer/splitish) | pcb | 4x12, ortho, choc, pro micro | <img src="https://camo.githubusercontent.com/24188937548af34ccc12458d4243dc0a079b424f3fd0b5161b935e8f1a96fe4b/68747470733a2f2f692e696d6775722e636f6d2f36676e595049702e6a7067" width="200px" /> |
+| [Ukiha](https://github.com/e3w2q/ukiha-keyboard) | pcb, case | 5x12, smd, micro-usb | <img src="https://raw.githubusercontent.com/e3w2q/ukiha-keyboard/main/doc/ukiha.jpg" width="200px" /> |
+| [The Uni](https://github.com/petercpark/The_Uni) | pcb, keycaps | ortho, steno, pro micro | <img src="https://raw.githubusercontent.com/petercpark/The_Uni/main/Pics/close-up-uni.jpg" width="200px" /> |
+| []() |  |  | <img src="" width="200px" /> |
--- a/src/pages/en/other.md
+++ b/src/pages/en/other.md
@ -0,0 +1,119 @@
+---
+title: Other
+description: Macro Pads, Handwired, Drop-in
+layout: ../../layouts/MainLayout.astro
+---
+
+## Drop-in replacement PCB
+- [AEK II USB](https://github.com/kb-elmo/aek2_usb) - Apple Extended Keyboard II (QMK compatible)
+- [E80-1800](https://github.com/ebastler/E80-1800) - Cherry G80-1800 (QMK compatible)
+- [GH80 Series](https://github.com/evyd13/gh80-series) - GH80-1800, GH80-3003, GH80-3700
+- [M0110a USB](https://github.com/kb-elmo/m0110a_usb) - Apple M0110a (QMK compatible)
+- [M0116 USB](https://github.com/kb-elmo/m0116_usb) - Apple M0116 (QMK compatible, Mini-USB)
+- [Model M Type C](https://github.com/ashpil/Model-M-Type-C) -  IBM Model M keyboard
+- [MX-5160](https://github.com/evyd13/mx-5160) - Chicony 5160c
+- [NT-Series](https://github.com/evyd13/nt-series) - Leopold FC660m, FC750r and FC980m
+- [WY-60 USB](https://github.com/kb-elmo/wy60_usb) - Wyse ASCII WY-60QMK (QMK compatible, Mini-USB)
+
+## Handwired
+| Name | Available Files | Tags | Image |
+| --- | --- | :---: | :---: |
+| [52Te](https://github.com/culturalsnow/52Te) | case | pro micro, split | <img src="https://raw.githubusercontent.com/culturalsnow/52Te/master/img/52Te_Left.jpg" width="200px" /> |
+| [60% Fixed Split Mechanical Keyboard](https://www.thingiverse.com/thing:3647216) | case | 3d print, split | <img src="https://cdn.thingiverse.com/renders/38/b8/e5/18/98/e6a29d3218baab572c7461f4e953d584_preview_featured.jpg" width="200px"> |
+| [~~Arke~~](https://web.archive.org/web/20201204050758/https://www.thingiverse.com/thing:2879329) | case | 3d print, split, pro micro | |
+| [Atreis](https://github.com/dekonnection/atreis) | case | handwiring | <img src="https://github.com/dekonnection/atreis/raw/master/pictures/GPI0El4.jpg" width="200px" /> |
+| [Atreus Split Keyboard](https://www.thingiverse.com/thing:1646718) | case | 3d print, split, pro micro | <img src="https://cdn.thingiverse.com/renders/2a/35/f6/bd/51/ee77cfa99ac6c721974f6eb92a52cce9_preview_featured.jpg" width="200px" /> |
+| [Bloid40](https://github.com/hanhanhan-kim/bloid40) | case | 3d print, bluefruit-32u4-le, bluetooth | <img src="https://github.com/hanhanhan-kim/bloid40/blob/master/docs/bloid40.jpg?raw=true" width="200px" />
+| [Ergo-Warped](https://github.com/pseudoku/ErgoWarp) | case | 3d print, split, ergo | <img src="https://raw.githubusercontent.com/pseudoku/Warped-keyboard/master/Photo/Proto6.jpg" width="200px" /> |
+| [fAuxLICE](https://github.com/ramonimbao/Alice-like_Handwired) | case | 3d print, handwiring, stm32, ergo | <img src="https://raw.githubusercontent.com/ramonimbao/Alice-like_Handwired/master/images/outside.jpg" width="200px"> |
+| [Freoduo](https://www.thingiverse.com/thing:4565609) | case | 3d print, split, ergo | <img src="https://i.imgur.com/Fvgm3Y5.jpg" width="200px" /> |
+| [Keyberon](https://github.com/TeXitoi/keyberon) | case, firmware | 3d print, handwiring, blue pill, ortholinear | <img src="https://raw.githubusercontent.com/TeXitoi/keyberon/master/images/keyberon.jpg" width="200px" /> |
+| [Keyberon-f4](https://github.com/TeXitoi/keyberon-f4) | case | stm32f401, usb-c, handwiring, 3d print | <img src="https://github.com/TeXitoi/keyberon-f4/blob/master/images/keyberon-56.jpg?raw=true" width="200px" /> |
+| [MECH - TKL](https://www.thingiverse.com/thing:4225961) | case | 3d print, handwiring, teensy, tkl | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/TKL.JPG" width="200px" /> |
+| [METATRON](https://www.thingiverse.com/thing:4228314) | case | 3d print, handwiring, teensy, 65 percent | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/metatron.JPG" width="200px" /> |
+| [MHKB](https://www.thingiverse.com/thing:4220301) | case | 3d print, handwiring, teensy, HHKB Style, Happy Hacking Keyboard | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/MHKB.JPG" width="200px" /> |
+| [Mech-104](https://www.thingiverse.com/thing:4205065) | case | 3d print, handwiring, teensy, full size, 104 key | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/Mech-104.JPG" width="200px" /> |
+| [Mech-60](https://www.thingiverse.com/thing:4215193) | case | 3d print, handwiring, teensy, 60 percent | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/Mech-60.JPG" width="200px" /> |
+| [Mechagodzilla](https://www.thingiverse.com/thing:4210984) | case | 3d print, handwiring, teensy, no number pad, no function row | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/mechagodzilla.JPG" width="200px" /> |
+| [Mechanical Gamepad](https://www.thingiverse.com/thing:2593692) | case | 3d print, handwiring, pro micro, ortholinear | <img src="https://cdn.thingiverse.com/renders/61/74/20/bf/6f/387305d39edce0ec7409172e37eee126_preview_featured.jpg" width="200px" /> |
+| [Mechanical Keypad](https://www.thingiverse.com/thing:3810124) | case | 3d print, handwiring | <img src="https://cdn.thingiverse.com/renders/60/68/36/7a/e0/4b1c59c7728e2b1cb65f6cb20aaf5cf9_preview_featured.jpg" width="200px" /> |
+| [Monolith](https://www.thingiverse.com/thing:4228304) | case | 3d print, handwiring, teensy, 65 percent | <img src="https://raw.githubusercontent.com/joeyvigil/MechanicalKeys/master/img/misc/monolith.JPG" width="200px" /> |
+| [Redox Manuform](https://www.thingiverse.com/thing:3503380) | case | 3d print, split, pro micro, underglow | <img src="https://cdn.thingiverse.com/renders/f5/89/b2/6b/a1/8d89de5ce484ac624324fb657f01e06e_preview_featured.jpg" width="200px" /> |
+| [SiCK-68](https://www.thingiverse.com/thing:3478494) | case | staggered, tkl, 3d print, handwiring, teensy | <img src="https://cdn.thingiverse.com/renders/b3/55/75/9b/d4/f20d6cca0ecda40347ad1802a63e518c_preview_featured.JPG" width="200px" /> |
+| [Steno keyboard](https://www.thingiverse.com/thing:4073814) | case | 3d print, handwiring | <img src="https://cdn.thingiverse.com/assets/fc/79/06/8b/9c/featured_preview_20191229_134223.jpg" width="200px" /> |
+| [Tada68](https://www.thingiverse.com/thing:3372910) | case | 3d print, handwiring, teensy, tkl, staggered | <img src="https://cdn.thingiverse.com/renders/46/14/9d/aa/0e/8b1db0b24fc25d806e61f7b51671bd08_preview_featured.JPG" width="200px" /> |
+| []() |  |  | <img src="" width="200px" /> |
+
+## Numpad/Macropad
+| Name | Available Files | Tags | Image |
+| --- | --- | :---: | :---: |
+| [2% Milk](https://github.com/Rionlion100/Spaceboards/tree/master/Keyboards/2%25%20Milk) | pcb, case | 1x2, pro micro | <img src="https://camo.githubusercontent.com/04ba54fa2fb06710bc98e8ee23baa0c8ee9962ca/68747470733a2f2f692e696d6775722e636f6d2f5564393675586e2e706e67" width="200px" /> |
+| [4x5-wireless-keypad-pcb](https://github.com/ogatatsu/4x5-wireless-keypad-pcb) | pcb | 4x5, bluetooth | <img src="https://github.com/ogatatsu/4x5-wireless-keypad-pcb/blob/master/images/1.png?raw=true" width="200px" /> |
+| [Amoeba Single-Switch PCB](https://github.com/mtl/keyboard-pcbs) | pcb | single-switch, handwiring | <img src="https://deskthority.net/resources/image/25215" width="200px" /> |
+| [ANAVI Macro Pad 2](https://github.com/AnaviTechnology/anavi-macro-pad-2) | pcb, case | pcb, stl, attiny85, openscad, kicad | <img src="https://github.com/AnaviTechnology/anavi-macro-pad-2/blob/main/anavi-macro-pad-2.jpg?raw=true" width="200px" /> |
+| [ANAVI Macro Pad 8](https://github.com/AnaviTechnology/anavi-macro-pad-8) | pcb, case | pcb, stl, atmega32u4, openscad, kicad | <img src="https://github.com/AnaviTechnology/anavi-macro-pad-8/blob/master/anavi-macro-pad-8.jpg?raw=true" width="200px" /> |
+| [Ardu Keyboard](https://www.hackster.io/palsayantan/ardu-keyboard-ef4d46) | pcb | 3x3, ATmega328P | <img src="https://hackster.imgix.net/uploads/attachments/1077918/_3zAOyxufXh.blob?auto=compress%2Cformat&w=900&h=675&fit=min" width="200px" /> |
+| [Cherry-Mx-Bitboard-Re](https://github.com/ogatatsu/Cherry-Mx-Bitboard-Re) | pcb | single-switch, handwiring, hotswap | <img src="https://github.com/ogatatsu/Cherry-Mx-Bitboard-Re/raw/master/Images/a.jpeg" width="200px" /> |
+| [Cherry MX Keypad](http://syncchannel.blogspot.com/2016/06/cherry-mx-keypad.html?m=1) | pcb | 1x4, led | <img src="https://1.bp.blogspot.com/-Mur6fIsKDwU/V1NmGd7T4QI/AAAAAAAAAyU/Fh40F8Zl41YVosa03zkJl2WPSQ7sGS_AwCLcB/s280/CherryMXkeypad1.jpg" width="200px" /> |
+| [CHOCO](https://github.com/hsgw/choco) | pcb, case | 4x7, choc, usb-c, STM32F072C8T6, smd | <img src="https://camo.githubusercontent.com/0f5e76c4bb7ab1fb4afcdd0db4985aaa1d235843/68747470733a2f2f692e696d6775722e636f6d2f6e32553952484f2e6a7067" width="200px" /> |
+| [Cookpad Pad](https://github.com/cookpad/cookpad-pad) | pcb, case | 2x3, pro micro, ws2812b, underglow | <img src="https://github.com/cookpad/cookpad-pad/raw/master/docs/images/cookpad-pad.jpg" width="200px" /> |
+| [Discipad](https://github.com/coseyfannitutti/discipad) | pcb, case | 4x5, through hole, usb-c, | <img src="https://images.squarespace-cdn.com/content/v1/5c533d33348cd92b886e544d/1569605273813-X4W1ZK24U81C0U381LW7/ke17ZwdGBToddI8pDm48kK60W-ob1oA2Fm-j4E_9NQB7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0kD6Ec8Uq9YczfrzwR7e2Mh5VMMOxnTbph8FXiclivDQnof69TlCeE0rAhj6HUpXkw/discipad-white.jpeg?format=750w" width="200px" /> |   |   |   |   |
+| [Dumbpad](https://github.com/imchipwood/dumbpad) | pcb | pcb, atmega32u4, rotary encoder | <img src="https://i.imgur.com/sS3fq1Z.jpg" width="200px" /> |
+| [Env-MCRO](https://github.com/Envious-Data/Env-MCRO) | pcb | pcb, rpi-pico | <img src="https://github.com/Envious-Data/Env-MCRO/blob/main/EnvMCRO.png?raw=true" width="200px" /> |
+| [Env-NPD](https://github.com/Envious-Data/Env-NPD) | pcb | pcb, numpad, rpi-pico | <img src="https://github.com/Envious-Data/Env-NPD/blob/main/env-npd.png?raw=true" width="200px" /> |
+| ~~Game cart macropad~~ | pcb, case | 4x4, 3d print | |
+| [GeekPad](https://git.bthlabs.pl/tomekwojcik/geekpad/) | pcb, case | 3x3, 3d print | <img src="https://i.imgur.com/FEzO81l.jpg" width="200px" /> |
+| [Hub16](https://github.com/joshajohnson/Hub16) | pcb, case | 4x4, rotary encoder, usb hub, hotswap, underglow, ws2812  | <img src="https://github.com/joshajohnson/Hub16/raw/master/Documents/imgs/header-img.JPG" width="200px" /> |
+| [duckyPad](https://github.com/dekuNukem/duckyPad) | pcb, case | 5x3, oled, rgb, sd-card | <img src="https://github.com/dekuNukem/duckyPad/raw/master/resources/pics/title.png" width="200px" /> |
+| [Labbe-Mini](https://github.com/alabbe9545/Labbe-Mini) | pcb, case | hotswap, atmega32U4, usb-c, per-switch-rgb, rgb | <img src="https://raw.githubusercontent.com/alabbe9545/Labbe-Mini/main/images/IMG_1783.jpg" width="200px" /> |
+| [LFK17](https://github.com/lfkeyboards/lfk17) | pcb | 5x4, numpad, hotswap, rgb | <img src="https://i.imgur.com/N4x5wXp.jpg" width="200px" /> |
+| [Lysergic 25](https://github.com/Gtrx0/lysergic25) | pcb, plate | 5x5, pro micro, plate, underglow, ws2812b, esd, usb-c | <img src="https://raw.githubusercontent.com/Gtrx0/lysergic25/master/Renders/Backside_populated.png" width="200px" /> |
+| [Meishi2](https://github.com/Biacco42/meishi2) | pcb | 1x4, pro micro | <img src="https://i.imgur.com/2SQqVlZ.png" width="200px" /> |
+| [Mulletpad](https://github.com/coseyfannitutti/mulletpad) | pcb, case | numpad, usb-c, atmega32u4, smd | <img src="https://camo.githubusercontent.com/a57afd3b24b297f74daf1b31e864845fbd1f31cc/68747470733a2f2f692e696d6775722e636f6d2f3676374a764c4e2e706e67" width="200px" /> |
+| [Pix](https://github.com/sendz/pix) | pcb, case | pro micro, 1x4, rotary encoder, oled, desk mounted, monitor mounted | <img src="https://i.imgur.com/ZcuDN6z.jpg" width="200px" /> |
+| [Remnant](https://github.com/hsgw/Remnant) | pcb, case | 2x4, through hole, attiny85 | <img src="https://github.com/hsgw/Remnant/raw/master/doc/img/remnant.jpg" width="200px" /> |
+| [SAMD21 Bridge Module Cherry Board](https://www.pcbway.com/project/shareproject/DIY_RGB_Cherry_MX_Hotkey_Board.html) | pcb, case | plate | <img src="https://file.pcbway.com/websponsor/18/07/26/195654072.jpg" width="200px" /> |
+| [SAN](https://github.com/hsgw/san) | pcb, case | 1x3, STM32F042F6P6, hotswap | <img src="https://github.com/hsgw/san/raw/master/san.JPG" width="200px" /> |
+| [Yampad](https://github.com/mattdibi/yampad)| pcb, case | numpad, pro micro, oled, hotswap, underglow, ws2812 | <img src="https://github.com/mattdibi/yampad/blob/master/img/yampad2.jpg?raw=true" width="200px" /> |
+| [Zesty 25](https://github.com/Gtrx0/zesty25) | pcb, case | 5x5, pro micro, plate, underglow, ws2812b | <img src="https://raw.githubusercontent.com/Gtrx0/zesty25/master/Renders/Backside_Unpopulated.png" width="200px" /> |
+| []() |  |  | <img src="" width="200px" /> |
+
+## Case
+| Name | Tags | Image |
+| --- | :---: | :---: |
+| [60% (Poker II, Pok3r) Keyboard Case 2.0](https://www.thingiverse.com/thing:983332) | 3d print | <img src="https://cdn.thingiverse.com/renders/8a/ac/f9/d8/ad/zanmYsB_-_Imgur_preview_featured.jpg" width="200px" /> |
+| [Alpha keyboard case](https://www.myminifactory.com/object/3d-print-alpha-keyboard-case-pyrool-28-key-pcb-103767) | 3d print | <img src="https://cdn.myminifactory.com/assets/object-assets/5db6033fc6df3/images/720X720-cases.jpg" width="200px" /> |
+| [Arisu Keyboard Case](https://github.com/FateNozomi/arisu-case) | plate | <img src="https://camo.githubusercontent.com/52126fe22185eb48a922b8f7a2a2726cb2f19226/68747470733a2f2f692e696d6775722e636f6d2f6b6e74353138452e6a7067" width="200px" /> |
+| [Atom47 for Vortex Core](https://github.com/evyd13/atom47) | 3d print | <img src="https://i.imgur.com/uUfzeCa.png" width="200px" /> |
+| [Atreus62 High Profile Keyboard Case](https://www.thingiverse.com/thing:3246981) | 3d print | <img src="https://cdn.thingiverse.com/renders/e5/f1/48/84/33/5c363031158a92007b63b0468cea95c6_preview_featured.jpg" width="200px" /> |
+| [Chimera Egro 42 Tenting Case](https://github.com/wizarddata/Chimera-Egro-42-Case) | 3d print, tenting, split |  |
+| [Cospad Case](https://www.thingiverse.com/thing:3233852) | 3d print, numpad | <img src="https://cdn.thingiverse.com/renders/23/ce/51/e6/60/c529ac4f1f85fb603e729532d6a4e3a5_preview_featured.jpg" width="200px" /> |
+| [Cospad Diamond Case](https://www.thingiverse.com/thing:3389713) | 3d print, numpad | <img src="https://cdn.thingiverse.com/renders/85/59/4f/c2/34/05af4ff61e5c7829934b3206dd96247e_preview_featured.jpg" width="200px" /> |
+| [CRKBD Case](https://www.thingiverse.com/thing:4039133) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/52/9b/1f/05/0b/featured_preview_20191211_113759.jpg" width="200px" />
+| [CRKBD Case Cloud](https://www.thingiverse.com/thing:4047797) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/ce/f2/81/fd/94/featured_preview_20191214_104210.jpg" width="200px" />
+| [CRKBD SpaceCase](https://www.thingiverse.com/thing:4003113) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/2f/3d/a8/cc/e9/featured_preview_Right.jpg" width="200px" /> |
+| [CRKBD Case VOID Ergo S](https://www.thingiverse.com/thing:4628137) | 3d print, split | <img src="https://cdn.thingiverse.com/assets/82/5a/99/b6/cf/featured_preview_resized_IMG_20201005_133140.jpg" width="200px" />
+| [Dactyl extended bottom case with gel wrist rests](https://www.thingiverse.com/thing:2436848) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/36/ef/6d/5f/59/c7a62cce09db90af7db2c013ccf94171_preview_featured.jpg" width="200px" /> |
+| [Dactyl Manuform 5x6 keyboard wrist rests](https://www.thingiverse.com/thing:2964741) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/1c/ed/76/59/b5/d054143d7a52b02d6d7d55cc49839b8e_preview_featured.JPG" width="200px" /> |
+| [ErgoDash Tenting Case](https://github.com/wizarddata/Ergodash-Case) | 3d printing, split, tenting | |
+| [ErgoDox-Case](https://github.com/CharlesLenk/ErgoDox-Case) | split, thumb keys, 7x5 | |
+| [Ergodox Case](https://www.thingiverse.com/thing:753448) | 3d print | <img src="https://cdn.thingiverse.com/renders/4e/a2/85/36/dd/TopRightCase_preview_featured.jpg" width="200px" /> |
+| [Ergodox Case PrintDox](https://www.thingiverse.com/thing:2533064) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/cf/a4/a1/db/34/c62c3dfe57add30ddfdd10bba6959503_preview_featured.jpg" width="200px" /> |
+| [Fourier - Split 40% Keybaord](https://www.thingiverse.com/thing:3456985) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/95/4a/57/83/a5/c67e7861a9923e60be38f20b33bc8989_preview_featured.jpg" width="200px" /> |
+| [Iris Case](https://www.thingiverse.com/thing:3545130) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/c7/49/9a/e9/85/9781426efbd02367f1796f20f4918e63_preview_featured.jpg" width="200px" /> |
+| [Iris Case V2](https://www.thingiverse.com/thing:3186129) | 3d print, split | <img src="https://cdn.thingiverse.com/renders/ce/f1/6f/c4/1c/b10ee16c8aef868230d6b430237876b4_preview_featured.jpg" width="200px" /> |
+| [Iris Mech Build](https://github.com/lukeg101/Iris-Mech-Build) | acrylic, brushed copper, led  | <img src="https://github.com/lukeg101/Iris-Mech-Build/raw/master/images/IMG_8335.JPG" width="200px" /> |
+| [Iris Ice Project](https://github.com/rs/iris-ice) | 3d print, acrylic, white, led | <img src="https://github.com/rs/iris-ice/blob/master/img/iris-ice.jpg?raw=true" width="200px" /> |
+| [Iris Tenting Cases (High & Low Profile)](https://github.com/wizarddata/Iris-Case) | 3d print, tenting, split | |
+| [Kyria](https://github.com/splitkb/kyria) | acrylic, split  | <img src="https://github.com/splitkb/kyria/blob/master/High%20Profile%20Case/High%20Profile%20Case.png?raw=true" width="200px" /> |
+| [Let's Split Keyboard Angled Case](https://www.thingiverse.com/thing:2626039) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/e8/05/1a/03/99/429c22d5f6e9df54f0b98e73d0ec0a19_preview_featured.jpg" width="200px" /> |
+| [Let's Split Keyboard Case](https://www.thingiverse.com/thing:2482218) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/0f/cb/dc/ad/ac/f3ccdd27d2000e3f9255a7e3e2c48800_preview_featured.jpg" width="200px" /> |
+| [Let's Split Keyboard Plate & Case](https://www.thingiverse.com/thing:2335558) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/79/08/a0/f0/87/73727bf9538c5aa7b80ac16c14c6686b_preview_featured.jpg" width="200px" /> |
+| [Minidox Case](https://github.com/dotdash32/cases/tree/master/Minidox) | split, 3x6, vertically staggered, thumb keys | <img src="https://camo.githubusercontent.com/b345769866acbd0ad76c22250941aa4ab23667e5/68747470733a2f2f692e696d6775722e636f6d2f686d6e6b56646e2e6a7067" width="200px" /> |
+| [Minidox Tenting Case](https://github.com/wizarddata/Minidox-Cases) | 3d print, tenting, split |  |
+| [Miuni32-Case](https://github.com/wizarddata/Miuni32-Case) | 3d print, ortholinear, 3x11 | <img src="https://preview.redd.it/da5ey5fxfyp21.jpg?width=960&crop=smart&auto=webp&s=470ec31cd4ad760dd30c16591740b238fa8a59cc" width="200px" /> |
+| [Nyquist Plate + Case](https://www.thingiverse.com/thing:2389357) | 3d print, split, ortholinear | <img src="https://cdn.thingiverse.com/renders/81/82/66/eb/3d/7b3575db20022d9ffa547ea4deb728d1_preview_featured.jpg" width="200px" /> |
+| [OLKB (Planck, Preonic & Atomic)](https://github.com/olkb/olkb_parts) | 3d print, plate |  |
+| [Preonic & Planck 5 Degree like keyboard case](https://www.thingiverse.com/thing:4538824/files) | 3d print, ortholinear | <img src="https://cdn.thingiverse.com/assets/dd/8b/50/30/d8/featured_preview_image0.jpg" width="200px" />
+| [Redox-Case](https://github.com/Lenbok/scad-redox-case) | split, thumb keys, opensCad, 3d print | <img src="https://github.com/Lenbok/scad-redox-case/raw/master/images/redox-exploded.png" width="200px" /> |
+| [Sofle v2 5 degree high profile](https://www.thingiverse.com/thing:4822438) | split, thumb keys, stl, 3d print | <img src="https://i.imgur.com/JOBm0cm.jpg" width="200px" />|
--- a/src/pages/en/split.md
+++ b/src/pages/en/split.md
@ -0,0 +1,67 @@
+---
+title: Split Keyboards
+description: Split Keyboards
+layout: ../../layouts/MainLayout.astro
+---
+
+| Name | Available Files | Tags | Image |
+| --- | --- | :---: | :---: |
+| [36keys](https://github.com/davidphilipbarr/36keys) | pcb | 4x5, vertically staggered, thumb keys, caseless, pro micro | <img src="https://raw.githubusercontent.com/davidphilipbarr/36keys/master/34Keys/Cradio%20F/34.png" width="200px" /> |
+| [5plit](https://github.com/larrbo/odd-rocket/tree/master/5plit%20-kailh) | pcb, case | 4x5, plate, pro micro, kailh choc | <img src="https://2.bp.blogspot.com/-bmGeoE6LDsY/WuntJ_vPaJI/AAAAAAAABPs/hSzlyzQB9x0DCwZeqpAm8_qTjESYyPDIACLcBGAs/s400/yijoz5ywkzg01.jpg" width="200px" /> |
+| [Apoptosis](https://github.com/pseudoku/Apoptosis) | pcb | 3x6, vertically staggered, thumb keys | <img src="https://raw.githubusercontent.com/pseudoku/Apoptosis/master/Apoptosis_PCB.jpg" width="200px" /> |
+| [Chimera Ortho](https://github.com/GlenPickle/Chimera) | pcb | split, wireless | <img src="https://i.imgur.com/WqYzK5J.jpg" width="200px" /> |
+| [Chimera Ergo/Ergo Mini/Ergo 42](https://github.com/GlenPickle/Chimera) | pcb | split, wireless, vertically staggered | <img src="https://i.imgur.com/AA6ycMQ.jpg" width="200px"> <img src="https://i.imgur.com/LAny3ue.jpg" width="200px" /> <img src="https://i.imgur.com/wfTsIKV.jpg" width="200px" /> |
+| [Comet46](https://github.com/satt99/comet46-hardware) | pcb, case | split, wireless, 40%, column-staggered, atmega32u4, nrf51822 | <img src="https://user-images.githubusercontent.com/39004890/50396817-a1660600-07af-11e9-8611-3156c635db43.jpg" width="200px" /> |
+| [Crkbd](https://github.com/foostan/crkbd) | pcb, case | split, oled, 3x6, vertically staggered, thumb keys, kailh choc | <img src="https://user-images.githubusercontent.com/736191/40575636-6fba63a4-6123-11e8-9ca0-3f990f1f9f4c.jpg" width="200px" /> |
+| [Crkbd x jian](https://github.com/kluelesskk/crkbd) | pcb, case | split, oled, 3x6, vertically staggered, thumb keys, kailh choc | <img src="https://i.imgur.com/QqnAWvG.jpg" width="200px" /> |
+| [Dactyl](https://github.com/adereth/dactyl-keyboard) | pcb, case | split, thumb keys, 5x6, 60%, 3d print | <img src="https://raw.githubusercontent.com/adereth/dactyl-cave/master/resources/glamourshot.png" width="200px" /> |
+| [Dactyl-ManuForm](https://github.com/tshort/dactyl-keyboard) | pcb, case | split, thumb keys, 4x5, 5x6, 40%, 60%, 3d print | <img src="https://camo.githubusercontent.com/a8dc88b0a973913a28a2373a7f3a9a3031af2672/687474703a2f2f692e696d6775722e636f6d2f4c646a456872522e6a7067" width="200px" /> |
+| [Djinn](https://github.com/tzarc/djinn) | pcb, case | 4x7, split, rotary encoder, underglow  | <img src="https://camo.githubusercontent.com/662433910ee7010207ec21f736a1d2841608ebab/68747470733a2f2f692e696d6775722e636f6d2f695a6d454732652e6a7067" width="200px" /> |
+| [DMOTE](https://github.com/veikman/dactyl-keyboard) | case | concave, thumb keys, split, alps, mx | <img src="https://camo.githubusercontent.com/85b0066d64467a10e0d0bcbdde26e6726eb95fde/687474703a2f2f76696b746f722e65696b6d616e2e73652f696d6167652f646d6f74652d322d746f702d646f776e2d766965772f646973706c6179" width="200px" /> |
+| [DracuLad](https://github.com/MangoIV/dracuLad) | pcb, case | 3x5, 36keys, split, rotary encoder, underglow  | <img src="https://raw.githubusercontent.com/mangoiv/draculad/master/pictures/rev2/fr4_glamour2.jpeg" width="200px" /> |
+| [Elephant42](https://github.com/illness072/elephant42) | pcb, case | split, pro micro | <img src="https://github.com/illness072/elephant42/blob/master/what-is-this.jpg?raw=true" width="200px" /> |
+| [Ergo42](https://github.com/Biacco42/Ergo42) | pcb, case | split, 4x7 | <img src="https://raw.githubusercontent.com/Biacco42/Ergo42/readme/readme_image/ergo42_image.jpg" width="200px" /> |
+| [ErgoDash](https://github.com/omkbd/ErgoDash) | pcb, case | 5x7, plate, led, split, thumb key | <img src="https://github.com/omkbd/picture/blob/master/Ergodash.jpg?raw=true" width="200px" /> |
+| [ErgoDash Mini](https://github.com/omkbd/ErgoDash/tree/master/mini) | pcb, case | 4x7, plate, led, split, thumb key | <img src="https://github.com/omkbd/picture/blob/master/Ergodashmini.jpg?raw=true" width="200px" /> |
+| [ErgoDone](https://github.com/ktec-hq/ErgoDone) | pcb | pro micro | |
+| [ErgoDox official](https://github.com/Ergodox-io) | pcb, acryl case, 3d printable case | split, thumb keys, 5x7, 3d print | <img src="https://github.com/Ergodox-io/ergodox-io/blob/master/src/img/ErgoDox-original-min.png?raw=true" width="200px" /> |
+| [Ergoinu](https://github.com/hsgw/ergoinu) | pcb, case | split, plate, mx, pro micro | <img src="https://raw.githubusercontent.com/wiki/hsgw/ergoinu/images/keyboard_top.JPG" width="200px" /> |
+| [ErgoMac](https://github.com/LilBigMacky/ergomac) | pcb | split, vertically staggered, thumb keys | <img src="https://i.redd.it/6ndsci0gt0x11.jpg" width="200px" /> |
+| [ErgoMax](https://github.com/LouWii/ErgoMax) | pcb, case | split, pro micro, thumb keys, hotswap | <img src="https://raw.githubusercontent.com/LouWii/ErgoMax/master/Guide/img/ergomax-assembled.jpg" width="200px" /> |
+| [ErgoTravel](https://github.com/jpconstantineau/ErgoTravel) | pcb, case | split, vertically staggered, thumb keys | <img src="https://i.imgur.com/DY0FxcM.jpg" width="200px" /> |
+| [Ferris](https://github.com/pierrechevalier83/ferris) | pcb, case | split, pro micro, thumb keys, choc | <img src="https://camo.githubusercontent.com/d68fa1c55c9b2507ee6ae27944c717cba341ae1b/68747470733a2f2f692e696d6775722e636f6d2f714f76345844652e6a706567" width="200px" /> |
+| [Fortitude60](https://github.com/Pekaso/fortitude60) | pcb, case | 60%, 4x6, split, vertically staggered | <img src="https://camo.githubusercontent.com/b5a0fefe70132b6c9777bbba546fcd872d97ceae/68747470733a2f2f692e696d6775722e636f6d2f54627a6e7767672e6a7067" width="200px" /> |
+| [Fourier](https://github.com/keebio/fourier) | pcb | split, staggered | <img src="https://camo.githubusercontent.com/3dadc57ab6cb05e7d43de5b1570f60c645914347/68747470733a2f2f63646e2e73686f706966792e636f6d2f732f66696c65732f312f313835312f353132352f70726f64756374732f696d6167655f31643338373933632d656262362d346466382d626162352d3933333136323632386665355f3130323478313032344032782e6a70673f763d31353139393731373937" width="200px" /> |
+| [Jiran](https://github.com/Ladniy/jiran-breakoff) | pcb, case | split, pro micro, thumb keys, hotswap | <img src="https://camo.githubusercontent.com/7097bb276026ce3e9a1ae02c34cc7b094c1c6d54/68747470733a2f2f692e696d6775722e636f6d2f486e41324f6e632e706e67" width="200px" /> |
+| [Jorne](https://github.com/joric/jorne) | pcb, case | split, pro micro, thumb keys, oled, underglow | <img src="https://camo.githubusercontent.com/b78430a5f5b8c28401e374afc1fa30fb7ef74041/68747470733a2f2f692e696d6775722e636f6d2f36706f775a31482e6a7067" width="200px" /> |
+| [KeySeeBee](https://github.com/TeXitoi/keyseebee) | pcb | split, STM32F072CBT6, smd, choc | <img src="https://github.com/TeXitoi/keyseebee/blob/master/images/keyseebee.jpg?raw=true" width="200px" /> |
+| [Kissboard](https://github.com/fhtagnn/kissboard) | pcb, case | split, thumb keys, vertically staggered, mx, bluetooth, pro micro, 3d print | <img src="https://github.com/fhtagnn/kissboard/blob/master/schematics/kissboard_top.png?raw=true" width="200px" /> |
+| [Kotonoha-BONSAI](https://github.com/MasayukiFukada/kotonoha_keyboards/tree/master/bonsai) | pcb, case | split, pro micro | <img src="https://github.com/MasayukiFukada/kotonoha_keyboards/blob/master/docs/images/kotonoha_bonsai.jpg?raw=true" width="200px" /> |
+| [Kotonoha-IAI](https://github.com/MasayukiFukada/kotonoha_keyboards/tree/master/iai) | pcb, case | split, pro micro | <img src="https://github.com/MasayukiFukada/kotonoha_keyboards/blob/master/docs/images/kotonoha_iai.jpg?raw=true" width="200px" /> |
+| [Kotonoha-WABISABI](https://github.com/MasayukiFukada/kotonoha_keyboards/tree/master/wabisabi) | pcb, case | split, pro micro | <img src="https://github.com/MasayukiFukada/kotonoha_keyboards/blob/master/docs/images/kotonoha_wabisabi.jpg?raw=true" width="200px" /> |
+| [Lily58](https://github.com/kata0510/Lily58) | pcb, case | split, oled,  4x6 | <img src="https://user-images.githubusercontent.com/6285554/47264498-53384a80-d553-11e8-907a-a03c6f2c5893.JPG" width="200px" /> |
+| [Let's Split](https://github.com/climbalima/let-s-Split-v2) | pcb, [case](https://qmk.fm/keyboards/lets_split/) | split | <img src="https://camo.githubusercontent.com/dfbf83ee712079b862fccb951aefbb508b8a631d/687474703a2f2f692e696d6775722e636f6d2f797551754e4a552e6a7067" width="200px" /> |
+| [Lyra](https://github.com/park-csu/Lyra) | pcb, case | split, ortho, pro micro, rotary-encoder | <img src="https://raw.githubusercontent.com/park-csu/Lyra/main/assets/built.jpg" width="200px" /> |
+| [Manta 60](https://github.com/KamoNanban/Manta60) | pcb, case | 5x14, split, pro micro | <img src="https://pbs.twimg.com/media/Dy80wXGU0AAGZdK.jpg:large" width="200px" /> |
+| [Medusa](https://github.com/Gtrx0/Medusa) | pcb, case | 5x7, split, plate, bluetooth, nrf51822 | <img src="https://raw.githubusercontent.com/Gtrx0/Medusa/master/Renders/Front_Unpopulated.png?token=Anj1gDvVpb9Dt8Z8Zj3Az4azN7Fm_8hTks5bm9WJwA%3D%3D" width="200px" /> |
+| [MiniDox pcb](https://github.com/That-Canadian/MiniDox_pcb) | pcb | split, 3x5, vertically staggered, thumb keys | <img src="https://camo.githubusercontent.com/d8925d5e754c3a8998db4ad9874c1d8b093901f2/687474703a2f2f692e696d6775722e636f6d2f69576233794f302e6a7067" width="200px" /> |
+| [Minisplit](https://github.com/kata0510/minisplit) | pcb, case | split, 4x6 | <img src="https://camo.githubusercontent.com/74766a3dbaf2b8a9ab8dae5c6cf656a7a0b9a9ac/68747470733a2f2f692e696d6775722e636f6d2f7a7767417251562e706e67" width="200px" /> |
+| [Mitosis](https://github.com/reversebias/mitosis-hardware) | pcb, case | split, wireless | <img src="https://i.imgur.com/gApMkzz.jpg" width="200px" /> |
+| [Orbit](https://github.com/ai03-2725/Orbit) | pcb | split, 5x7, thumb keys, usb-c | <img src="https://raw.githubusercontent.com/ai03-2725/Orbit/master/Images/PCB-R1.5.jpg" width="200px" /> |
+| [Ortholink-5x4](https://easyeda.com/andrew_8176/ortholink-5x4) [Build Guide](https://imgur.com/gallery/scsFThK) | pcb, case | 38keys, split, smd | <img src="https://i.imgur.com/1Yydd96.jpg" width="200px" /> |
+| [Pinky2](https://github.com/tamanishi/Pinky2) [Pinky3](https://github.com/tamanishi/Pinky3) [Pinky4](https://github.com/tamanishi/Pinky4) | pcb, case | 2x5 / 3x7 / 4x7, vertically staggered, thumb keys, split, through hole | <img src="https://raw.githubusercontent.com/tamanishi/Pinky3/master/product.jpg" width="200px" /> |
+| [Pteron36](https://github.com/harshitgoel96/pteron36-split-keyboard) | pcb, case | 3x5, split, oled, rotary encoder, pro micro, through hole, vertically staggered, thumb keys | <img src="https://github.com/harshitgoel96/pteron36-split-keyboard/blob/main/images/built.jpeg?raw=true" width="200px" /> |
+| [Redox](https://github.com/mattdibi/redox-keyboard) | case | split, thumb keys, opensCad, 3d print | <img src="https://cdn.thingiverse.com/renders/62/c5/d6/91/6f/f23021b44a5e59a6838fc8b440fb8b56_preview_featured.jpg" width="200px" /> |
+| [Science](https://github.com/peej/for-science-keyboard) | pcb | split, arduino, 5x5 | <img src="https://camo.githubusercontent.com/fecf6f7bca9ec8b93e4031caa1ca3442cfb5a5f1/68747470733a2f2f692e696d6775722e636f6d2f666a6e546b42312e6a7067" width="200px" /> |
+| [Sector](https://github.com/omkbd/Sector) | pcb, case | split, arduino, pro micro, oled | <img src="https://raw.githubusercontent.com/omkbd/Sector/master/Picture/SectorC.jpg" width="200px" /> |
+| [Sofle Keyboard](https://github.com/josefadamcik/SofleKeyboard?utm_source=share&utm_medium=ios_app&utm_name=iossmf) | pcb, case | 5x6, rotary, pro micro, split | <img src="https://github.com/josefadamcik/SofleKeyboard/blob/master/Images/IMG_20200126_114622.jpg?raw=true" width="200px" /> |
+| [Space_ginny](https://github.com/MangoIV/space_ginny) | pcb, case | asetniop, ssd1306, oledsplit, pro micro | <img src="https://github.com/MangoIV/space_ginny/blob/main/pictures/space_ginny_04.jpg?raw=true" width="200px" /> |
+| [Split Infinitive](https://github.com/peej/for-split-keyboard/blob/master/README.md) | pcb | split, 5x6, pro micro | <img src="https://github.com/peej/for-split-keyboard/raw/master/pcb.png" width="200px" /> |
+| [Steal This Keyboard](https://github.com/obosob/steal_this_keyboard) | pcb | split, 3x5, vertically staggered, thumb keys, pro micro | <img src="https://raw.githubusercontent.com/obosob/steal_this_keyboard/master/pcb_front.png" width="200px" /> |
+| [Taira](https://github.com/strayer/taira-keyboard) | pcb, case | 5x6, vertically staggered, thumb keys, kailh choc, pro micro | <img src="https://github.com/strayer/taira-keyboard/raw/main/docs/taira-1.0.jpg" width="200px" /> |
+| [Torn](https://github.com/rtitmuss/torn) | pcb, case | split, rotary-encoder, oled, 3x6, vertically staggered, thumb keys, atmega328p, through hole | <img src="https://raw.githubusercontent.com/rtitmuss/torn/master/doc/img/torn.jpg" width="200px" /> |
+| [Ultimate Hacking Keyboard](https://github.com/UltimateHackingKeyboard/electronics) | pcb | split, display, 31FL3731 | <img src="https://ultimatehackingkeyboard.com/wordpress/wp-content/uploads/2018/07/uhk-split-palm-rest-1920.jpg" width="200px" /> |
+| [Xenon Keyboard](https://github.com/narinari/xenon-keyboard) | pcb, case | split, vertically staggered, thumb keys, oled, pro micro | <img src="https://raw.githubusercontent.com/narinari/xenon-keyboard/master/resources/example/xenon-classic_godspeed-custom-sa.jpg" width="200px" /> |
+| [YAEMK Keyboard](https://karlk90.github.io/yaemk-split-kb/) | pcb, case | split, 5x8, vertically staggered, hotswap, thumb keys, oled, rgb led, arm, risc-v, usb-c | <img src="https://raw.githubusercontent.com/KarlK90/yaemk-split-kb/main/docs/images/1_yaemk_wide.jpg" width="200px" /> |
+| [Zen (RGBKB)](https://github.com/RGBKB/Keyboard-files/tree/master/Zen) [Build Guide](https://legonut.gitbooks.io/zen-keyboard/content/) | pcb, case | split, ergo, ortho, thumb keys, rgb led | <img src="https://camo.githubusercontent.com/6bf0257847f1e1972cfd6b9f289a6e8180163ff8/68747470733a2f2f692e696d6775722e636f6d2f7a337630416b732e6a7067" width="200px" /> |
+| []() |  |  | <img src="" width="200px" /> |
--- a/src/pages/en/staggered.md
+++ b/src/pages/en/staggered.md
@ -0,0 +1,52 @@
+---
+title: Staggered Keyboards
+description: Staggered / Normal Keyboards
+layout: ../../layouts/MainLayout.astro
+---
+
+| Name | Available Files | Tags | Image |
+| --- | --- | :---: | :---: |
+| [_33-Keyboard](https://github.com/tominabox1/_33-Keyboard) | pcb, case | gerber-only, stl | <Image src="https://camo.githubusercontent.com/d722817b92b9dc25fba6a236ac0a128f76339854/68747470733a2f2f692e696d6775722e636f6d2f305775663861542e706e67" width={300} aspectRatio={16/9} /> |
+| [00Key](https://github.com/jefjef/00Key) | pcb, case | 75%, teensy, ssd1306, oled, backlight, through hole | <img src="https://github.com/jefjef/00Key/blob/master/images/build/DSCF2616.JPG?raw=true" width="200px" /> |
+| [ANHEDRAL](https://github.com/eswai/anhedral) | pcb, case | pro micro | <img src="https://github.com/eswai/anhedral/raw/master/anhedral1-1.jpeg" width="200px" /> |
+| ~~Akihabara~~ | pcb, case | 40%, 3d print | |
+| [Alpha](https://github.com/PyrooL/Alpha) | pcb, case | <30% | <Image src="https://i.imgur.com/alNWnhZ.jpg" width={300} aspectRatio={16/9} format="webp" /> |
+| [Arisu Keyboard PCB](https://github.com/FateNozomi/arisu-pcb) | pcb, case |  | <img src="https://camo.githubusercontent.com/52126fe22185eb48a922b8f7a2a2726cb2f19226/68747470733a2f2f692e696d6775722e636f6d2f6b6e74353138452e6a7067" width="200px" /> |
+| [Atreus](https://github.com/technomancy/atreus) | pcb, case | 40% | <img src="https://github.com/technomancy/atreus/raw/master/atreus.jpg" width="200px" /> |
+| [Atreus62](https://github.com/profet23/atreus62) | pcb, case | 60% | <img src="https://raw.githubusercontent.com/profet23/atreus62/master/images/nantucket-atreus62.jpg" width="200px" /> |
+| [Bakeneko 60](https://github.com/kkatano/bakeneko-60) | pcb, case | 60%, usb-c, atmega32U4 | <img src="https://i.imgur.com/GM0IH8R.jpg" width="200px" /> |
+| [Bakeneko 65](https://github.com/kkatano/bakeneko-65) | pcb, case | 65%, usb-c, atmega32U4 | <img src="https://i.imgur.com/Va1caBv.jpg" width="200px" /> |
+| [Bevi](https://github.com/sendyyeah/bevi) | pcb, case | 60%, numpad, pro micro, atmega32U4 | <img src="https://user-images.githubusercontent.com/3537856/115094858-48ef3f80-9f49-11eb-9e5f-1ed481c59b7c.jpg" width="200px" /> |
+| [BMEK - Bemeier Ergonomic Keyboard](https://github.com/Bemeier/bmek) | pcb, case | ergo, hotswap, usb-c | <img src="https://camo.githubusercontent.com/35605dc5a4f1219613ac62d6c23c24716f7039cd/68747470733a2f2f692e696d6775722e636f6d2f5a4d323775506f2e6a7067" width="200px" /> |
+| [CozyKeys Bloomer](https://github.com/cozykeys/bloomer) | pcb, case | 75%, underglow | <img src="https://camo.githubusercontent.com/d06fa0fd471810b747137c0828502567c2323fe3/687474703a2f2f6173736574732e636f7a796b6579732e78797a2f696d616765732f6b6579626f617264732f626c6f6f6d65722f626c6f6f6d65722d616e676c652d325f383030783830302e6a7067" width="200px" /> |
+| [CPM43](https://github.com/Gtrx0/cpm43) | pcb | 40%, 4x12, underglow, atmega32U4, usb-c, esd | <img src="https://raw.githubusercontent.com/Gtrx0/cpm43/master/Renders/Render_Unpopulated_Front.png" width="200px" /> |
+| [CW40](https://github.com/ktec-hq/CW40) | pcb | 40%, underglow, alps | |
+| [Discipline](https://github.com/coseyfannitutti/discipline) | pcb, case | 65%, staggered, through hole, usb-c,  | <img src="https://github.com/coseyfannitutti/discipline/blob/master/doc/images/discipline.jpeg?raw=true" width="200px" /> |
+| [Env-KB](https://github.com/Envious-Data/Env-KB) | pcb, case | 65%, staggered, through hole, usb-c, rpi-pico  | <img src="https://github.com/Envious-Data/Env-KB/blob/main/_pictures/PCB3.JPG?raw=true" width="200px" /> |
+| [Flounder](https://hackaday.io/project/167912-flounder-keyboard) | pcb | micro-usb, kailh-choc, low-profile | <img src="https://cdn.hackaday.io/images/4931491573980185604.JPG" width="200px" /> |
+| [~~Gameboy Keyboard case~~](https://web.archive.org/web/20200521235621/https://www.thingiverse.com/thing:3007828) | case, pcb | 3d print, pcb | |
+| [GH60](https://github.com/komar007/gh60) | pcb | 60%, atmega32U4 | <img src="https://camo.githubusercontent.com/fdc087b8362f264e37c17212c78026bfaaa285be/687474703a2f2f626c6f672e6b6f6d61722e62652f77702d636f6e74656e742f75706c6f6164732f323031332f30322f747474312d363430783235372e6a7067" width="200px" /> |
+| [Grabert](https://github.com/KoBussLLC/grabert-hardware) | pcb, case | 60%, usb-c, oled, rotary-encoder, stm32f072v8t6 | <img src="https://raw.githubusercontent.com/KoBussLLC/grabert-hardware/e04fabde3759e065457ee6ca55711569b234af34/doc/grabert_white_canvas_angled.jpg" width="200px" /> |
+| [HacKeyboard](https://github.com/masaleiro/HacKeyboard) | pcb, case |  | <img src="https://i0.wp.com/lh3.googleusercontent.com/-_3srWrw52N0/VkKU25cRm-I/AAAAAAAAME8/l_oKwqZEeyk/w2048-o/Hackeyboard%252520photoshoot%25252041.JPG?w=200" width="200px" /> |
+| [Isometria75](https://github.com/ebastler/isometria-75) | pcb, case | 75%, iso, sk6812-mini, rotary-encoder, stm32f072cbt6 | <img src="https://camo.githubusercontent.com/ba20d0e50fa859956382800780cadcf3bd9a7d2b2f69852b7a40aff89d78442f/68747470733a2f2f6d7077722e78797a2f70726f6a656374732f69736f6d657472696137352f66756c6c2f70726f746f5f76315f342e4a5047" width="200px" /> |
+| [Launch](https://github.com/system76/launch) | pcb, case | usb-hub, staggered, per-switch-rgb, rgb,  | <img src="https://media.githubusercontent.com/media/system76/launch/master/chassis/launch-chassis.png" width="200px" /> |
+| [Le Chiffre](https://github.com/tominabox1/Le-Chiffre-Keyboard) | pcb, case | atmega32u4, ergo, smd, stl, 3d print | <img src="https://camo.githubusercontent.com/f5bc3eaabb92bb103ba741b7530000153e5bf182/68747470733a2f2f692e696d6775722e636f6d2f515834744e6f6d2e706e67" width="200px" /> |
+| [Litl](https://github.com/mohoyt/litl) | pcb, case | pro micro, 40%, oled, rotary-encoder, through hole | <img src="https://raw.githubusercontent.com/mohoyt/litl/main/img/litl_3.jpeg" width="200px" /> |
+| ~~Mullet~~ | pcb, case | staggered, smd, usb-c, underglow, atmega32u4 | <img src="https://camo.githubusercontent.com/2dac93377903e99500664ec9f6908cd68746fd63/68747470733a2f2f692e696d6775722e636f6d2f45424f4d6268482e6a7067" width="200px" /> |
+| [Mysterium](https://github.com/coseyfannitutti/mysterium) | pcb, case | tkl, ATMEGA32A, usb-c | <img src="https://github.com/coseyfannitutti/mysterium/blob/master/doc/images/mysterium.jpg?raw=true" width="200px" /> |
+| [Ph0enix](https://github.com/shockdesign/ph0enix-keyboard) | pcb | 40%, rp2040, raspberry pi pico | <img src="https://raw.githubusercontent.com/shockdesign/ph0enix-keyboard/main/Images/pcb-render.png" width="200px" /> |
+| [Pheromone](https://github.com/luantty2/pheromone_keyboard) | pcb, case | atmega32U4,midi encoder, midi slider, oled | <img src="https://i.imgur.com/Tf8zDl9.jpg" width="200px" /> |
+| [Plain60-c](https://github.com/Maartenwut/plain60-c) | pcb | 60%, usb-c, atmega32U4 | <img src="https://camo.githubusercontent.com/85b21ccd9dfe95a86407fda6b1ee7ba14ec57bf4/68747470733a2f2f692e696d6775722e636f6d2f4f774f503956622e706e67" width="200px" /> |
+| [Pteron](https://github.com/FSund/pteron-keyboard) | case | 3x5, 3x6, 4x6, handwiring, pro micro | <img src="https://camo.githubusercontent.com/9f0a06184893760528f1c5db991c5463d403b528/68747470733a2f2f692e696d6775722e636f6d2f395168506c56442e6a7067" width="200px" /> |
+| [Reviung](https://github.com/gtips/reviung) | pcb, case | ergo, vertically staggered, pro micro, ws2812b, underglow | <img src="https://raw.githubusercontent.com/gtips/reviung/master/reviung41/image/REVIUNG41B-1.jpg" width="200px" /> |
+| [Sesame](https://github.com/kb-elmo/sesame) | pcb, case | ergonomic, through-hole, atmega32A, usb-c | <img src="https://i.imgur.com/IdudbWjl.jpg" width="200px" /> |
+| [SB-147](https://github.com/sealclubber/SB-147) | case | 3d print, handwiring | <img src="https://i.imgur.com/VWGHzfU.jpg" width="200px" /> |
+| [Solheim68 (Varmilo VA68M replacement)](https://github.com/evyd13/solheim68) | pcb | 65%, atmega328p | <img src="https://camo.githubusercontent.com/ed41f8d7c540835426b0271ec79824c8f86bba7e43628aecff6c129ff017c247/68747470733a2f2f692e696d6775722e636f6d2f694370794554792e706e67" width="200px" /> |
+| [Tanuki](https://github.com/SethSenpai/Tanuki) | pcb, case | 40%, underglow | <img src="https://github.com/SethSenpai/Tanuki/raw/master/Img/glamour1.jpg" width="200px" /> |
+| [Entropy](https://github.com/joshajohnson/entropy) | pcb, case | 96%, southpaw, rgb, led, split space, encoder | <img src="https://raw.githubusercontent.com/joshajohnson/entropy/master/docs/entropy.jpeg" width="200px" /> |
+| [Tartan](https://github.com/hsgw/tartan) | pcb, case | 60%, through hole, Atmega328p | <img src="https://github.com/hsgw/tartan/raw/master/doc/img/tartan.jpg" width="200px" /> |
+| [Tesseract](https://github.com/Electroner/Teclado-Teseracto) | pcb, case | spanish, full-105 iso, atmega32u4, moddable | <img src="https://raw.githubusercontent.com/Electroner/Teclado-Teseracto/main/Imagenes/Keyboard0.jpg" width="200px" /> |
+| [Tg4x](https://github.com/MythosMann/tg4x) | pcb, case | pro micro, 40% | <img src="https://raw.githubusercontent.com/MythosMann/tg4x/master/pcb.jpg" width="200px" /> |
+| [Voyager](https://github.com/ai03-2725/Voyager) | pcb | 60%, ansi, iso, rgb, led | <img src="https://raw.githubusercontent.com/ai03-2725/Voyager104/master/Renders/Front.png" width="200px" /> |
+| [XMMX TKL](https://geekhack.org/index.php?topic=93422.0) | pcb |  | <img src="https://i.imgur.com/otn8LT3.jpg" width="200px" /> |
+| []() |  |  | <img src="" width="200px" /> |
--- a/src/pages/en/tools.md
+++ b/src/pages/en/tools.md
@ -1,4 +1,9 @@
-# Tools
+---
+title: Tools
+description:
+layout: ../../layouts/MainLayout.astro
+---
+
 - [ai03 Plate Generator](https://kbplate.ai03.me) - An advanced plate generator which doesn't result in 13.99999mm cutouts. [Github Repo](https://github.com/ai03-2725/another-keyboard-builder)
 - [Kalerator](https://kalerator.clueboard.co) - Pcb generator for keyboard-layout-editor generated layouts. [GitHub Site](https://github.com/skullydazed/kalerator), [Eagle Parts Library](https://github.com/skullydazed/clueboard_eagle)
 - [Karabiner-Elements](https://github.com/tekezo/Karabiner-Elements) - Karabiner-Elements is a powerful utility for keyboard customization on macOS Sierra (10.12) or later.
--- a/src/pages/en/tutorials.md
+++ b/src/pages/en/tutorials.md
@ -1,4 +1,9 @@
-# Tutorials
+---
+title: Tutorials
+description: DIY keyboard tutorials
+layout: ../../layouts/MainLayout.astro
+---
+
 - [A modern handwiring guide](https://geekhack.org/index.php?topic=87689.0)
 - [ai03 PCB Designer Guide](https://wiki.ai03.me/books/pcb-design) - Learn how to make mech keyboard PCBs.
 - Blog post about ["search of the best custom keyboard layout"](https://josef-adamcik.cz/electronics/in-search-of-the-best-custom-keyboard-layout.html).
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,5 @@
+<script is:inline>
+	// Redirect your homepage to the first page of documentation.
+	// If you have a landing page, remove this script and add it here!
+	window.location.pathname = `/en/staggered`;
+</script>
--- a/src/pages/news.vue
+++ b/src/pages/news.vue
@ -1,48 +0,0 @@
-<template>
-  <Layout>
-    <div class="w-full mx-auto">
-      <h2 class="text-4xl font-bold mb-4">What is new on keebfol.io</h2>
-      <div v-for="edge in $page.allCommitMessages.edges" :key="edge.node.id">
-        <div class="mb-4">
-        
-          <div class="font-bold text-xl">
-            {{ edge.node.message }}
-          </div>
-          
-          <p v-if="edge.node.body" class="text-base whitespace-pre-line -mt-5">
-            {{ edge.node.body }}
-          </p>
-          
-          <div class="text-sm mt-1">
-            <div class="text-gray-500 dark-mode:text-gray-600 leading-none">
-              <font-awesome :icon="['fas', 'user-ninja']" class="mr-1 text-gray-300 dark-mode:text-gray-600"></font-awesome>
-              {{ edge.node.author }}
-              {{ edge.node.date }}
-            </div>
-          </div>
-    
-        </div>
-      </div>
-    </div>
-
-  </Layout>
-</template>
-
-<page-query>
-  query {
-    allCommitMessages {
-      edges {
-        node {
-          id
-          date
-          message
-          body
-          author
-        }
-      }
-    }
-  }
-</page-query>
-
-<script>
-</script>
--- a/src/pages/success.vue
+++ b/src/pages/success.vue
@ -1,17 +0,0 @@
-<template>
-  <Layout>
-    <div class="container-inner mx-auto text-center py-16">
-      <h2 class="text-4xl font-bold">Submit success</h2>
-    </div>
-
-  </Layout>
-</template>
-
-<script>
-export default {
-  metaInfo: {
-    title: 'Submit success'
-  }
-}
-</script>
-
--- a/src/pages/switch-database.vue
+++ b/src/pages/switch-database.vue
@ -1,115 +0,0 @@
-<template>
-  <Layout>
-    <div class="w-full mx-auto py-16">
-      <h2 class="text-4xl font-bold mb-16">Mechanical Keyboard Switch Database</h2>
-      <div>
-        <ClientOnly>
-        <vuetable ref="vuetable"
-          :api-mode="false"
-          :fields="fields"
-          :per-page="perPage"
-          :data-manager="dataManager"
-          pagination-path="pagination"
-          :detail-row-component="detailRow"
-          :css="css.table"
-          @vuetable:row-clicked="toggleDetailRow($event)"
-        ></vuetable>
-         </ClientOnly>
-      </div>
-    </div>
-
-  </Layout>
-</template>
-
-<page-query>
-
-</page-query>
-
-<script>
-import _ from "lodash";
-import axios from "axios"
-import Vuetable from 'vuetable-2'
-import SwitchDetailRow from '~/components/SwitchDetailRow.vue'
-
-export default {
-  metaInfo: {
-    title: 'Mechanical Keyboard Switch Database'
-  },
-  components: {
-    Vuetable,
-  },
-  data(){
-    return {
-      perPage: 3,
-      data: [],
-      detailRow: SwitchDetailRow,
-      fields: [
-        { name: 'id',visible: false },
-        { name: 'brand', sortField: 'brand', titleClass: 'text-left' },
-        { name: 'model', sortField: 'model', titleClass: 'text-left' },
-        { name: 'action', titleClass: 'text-left'},
-        { name: 'keycap_mount', title: 'Keycap Mount', titleClass: 'text-left' },
-        { name: 'switch_mount', title: 'Switch Mount', titleClass: 'text-left' },
-        { name: 'force.actuation', sortField: 'force.actuation',  dataClass: 'text-center', formatter: (value) => `${value} gf`},
-        { name: 'force.peak', sortField: 'force.peak',  dataClass: 'text-center', formatter: (value) => `${value} gf` },
-      ],
-      sortOrder: [
-        {
-          field: "brand",
-          direction: "asc"
-        }
-      ],
-      css: {
-        table: {
-          tableBodyClass: 'block overflow-x-auto w-full',
-        },
-      },
-    };
-  },
-  watch: {
-    data(newVal, oldVal) {
-      this.$refs.vuetable.refresh();
-    }
-  },
-  mounted: function () {
-    axios
-    .get('https://benroe.github.io/switch-database/mechanical-keyboard-switches.json')
-    .then(response => (this.data = response.data))
-  },
-  methods: {
-    toggleDetailRow(event) {
-      this.$refs.vuetable.toggleDetailRow(event.data.id);
-    },
-    dataManager(sortOrder, pagination) {      
-      if (this.data.length < 1) return;
-
-      let local = this.data;
-
-      // sortOrder can be empty, so we have to check for that as well
-      if (sortOrder.length > 0) {
-        // console.log("orderBy:", sortOrder[0].sortField, sortOrder[0].direction);
-        local = _.orderBy(
-          local,
-          sortOrder[0].sortField,
-          sortOrder[0].direction
-        );
-      }
-      
-      pagination = this.$refs.vuetable.makePagination(
-        local.length,
-        this.perPage
-      );
-      // console.log('pagination:', pagination)
-      let from = pagination.from - 1;
-      let to = from + this.perPage;
-
-      return {
-        pagination: pagination,
-        data: _.slice(local, from, to)
-      };
-
-    },
-  },
-}
-</script>
-
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -0,0 +1,385 @@
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+/* Global focus outline reset */
+*:focus:not(:focus-visible) {
+	outline: none;
+}
+
+:root {
+	--user-font-scale: 1rem - 16px;
+	--max-width: calc(100% - 1rem);
+}
+
+@media (min-width: 50em) {
+	:root {
+		--max-width: 46em;
+	}
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	font-family: var(--font-body);
+	font-size: 1rem;
+	font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
+	line-height: 1.5;
+	max-width: 100vw;
+}
+
+nav ul {
+	list-style: none;
+	padding: 0;
+}
+
+.content > section > * + * {
+	margin-top: 1.25rem;
+}
+
+.content > section > :first-child {
+	margin-top: 0;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-bottom: 1rem;
+	font-weight: bold;
+	line-height: 1;
+}
+
+h1,
+h2 {
+	max-width: 40ch;
+}
+
+:is(h2, h3):not(:first-child) {
+	margin-top: 3rem;
+}
+
+:is(h4, h5, h6):not(:first-child) {
+	margin-top: 2rem;
+}
+
+h1 {
+	font-size: 3.25rem;
+	font-weight: 800;
+}
+
+h2 {
+	font-size: 2.5rem;
+}
+
+h3 {
+	font-size: 1.75rem;
+}
+
+h4 {
+	font-size: 1.3rem;
+}
+
+h5 {
+	font-size: 1rem;
+}
+
+p {
+	line-height: 1.65em;
+}
+
+.content ul {
+	line-height: 1.1em;
+}
+
+p,
+.content ul {
+	color: var(--theme-text-light);
+}
+
+small,
+.text_small {
+	font-size: 0.833rem;
+}
+
+a {
+	color: var(--theme-text-accent);
+	font-weight: 400;
+	text-underline-offset: 0.08em;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+article > section :is(ul, ol) > * + * {
+	margin-top: 0.75rem;
+}
+
+article > section nav :is(ul, ol) > * + * {
+	margin-top: inherit;
+}
+
+article > section li > :is(p, pre, blockquote):not(:first-child) {
+	margin-top: 1rem;
+}
+
+article > section :is(ul, ol) {
+	padding-left: 1em;
+}
+
+article > section nav :is(ul, ol) {
+	padding-left: inherit;
+}
+
+article > section nav {
+	margin-top: 1rem;
+	margin-bottom: 2rem;
+}
+
+article > section ::marker {
+	font-weight: bold;
+	color: var(--theme-text-light);
+}
+
+article > section iframe {
+	width: 100%;
+	height: auto;
+	aspect-ratio: 16 / 9;
+}
+
+a > code {
+	position: relative;
+	color: var(--theme-text-accent);
+	background: transparent;
+	text-underline-offset: var(--padding-block);
+}
+
+a > code::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+	background: var(--theme-accent);
+	opacity: var(--theme-accent-opacity);
+	border-radius: var(--border-radius);
+}
+
+a:hover,
+a:focus {
+	text-decoration: underline;
+}
+
+a:focus {
+	outline: 2px solid currentColor;
+	outline-offset: 0.25em;
+}
+
+strong {
+	font-weight: 600;
+	color: inherit;
+}
+
+/* Supporting Content */
+
+code {
+	--border-radius: 3px;
+	--padding-block: 0.2rem;
+	--padding-inline: 0.33rem;
+
+	font-family: var(--font-mono);
+	font-size: 0.85em;
+	color: inherit;
+	background-color: var(--theme-code-inline-bg);
+	padding: var(--padding-block) var(--padding-inline);
+	margin: calc(var(--padding-block) * -1) -0.125em;
+	border-radius: var(--border-radius);
+	word-break: break-word;
+}
+
+pre.astro-code > code {
+	all: unset;
+}
+
+pre > code {
+	font-size: 1em;
+}
+
+table,
+pre {
+	position: relative;
+	--padding-block: 1rem;
+	--padding-inline: 2rem;
+	padding: var(--padding-block) var(--padding-inline);
+	padding-right: calc(var(--padding-inline) * 2);
+	margin-left: calc(var(--padding-inline) * -1);
+	margin-right: calc(var(--padding-inline) * -1);
+	font-family: var(--font-mono);
+
+	line-height: 1.5;
+	font-size: 0.85em;
+	overflow-y: hidden;
+	overflow-x: auto;
+}
+
+table {
+	width: 100%;
+	padding: var(--padding-block) 0;
+	margin: 0;
+	border-collapse: collapse;
+}
+
+/* Zebra striping */
+tr:nth-of-type(odd) {
+	/* background: var(--theme-bg-hover); */
+}
+tr {
+	border-bottom: 1px dashed var(--theme-bg-hover);
+}
+th {
+	background: var(--color-black);
+	color: var(--theme-color);
+	font-weight: bold;
+}
+td,
+th {
+	padding: 6px;
+	text-align: left;
+}
+
+pre {
+	background-color: var(--theme-code-bg);
+	color: var(--theme-code-text);
+}
+
+blockquote code {
+	background-color: var(--theme-bg);
+}
+
+@media (min-width: 37.75em) {
+	pre {
+		--padding-inline: 1.25rem;
+		border-radius: 8px;
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+
+blockquote {
+	margin: 2rem 0;
+	padding: 1.25em 1.5rem;
+	border-left: 3px solid var(--theme-text-light);
+	background-color: var(--theme-bg-offset);
+	border-radius: 0 0.25rem 0.25rem 0;
+	line-height: 1.7;
+}
+
+img {
+	max-width: 100%;
+}
+
+.flex {
+	display: flex;
+	align-items: center;
+}
+
+button {
+	display: flex;
+	align-items: center;
+	justify-items: center;
+	gap: 0.25em;
+	padding: 0.33em 0.67em;
+	border: 0;
+	background: var(--theme-bg);
+	display: flex;
+	font-size: 1rem;
+	align-items: center;
+	gap: 0.25em;
+	border-radius: 99em;
+	color: var(--theme-text);
+	background-color: var(--theme-bg);
+}
+
+h2.heading {
+	font-size: 1rem;
+	font-weight: 700;
+	padding: 0.1rem 1rem;
+	text-transform: uppercase;
+	margin-bottom: 0.5rem;
+}
+
+.heading-link {
+	font-size: 1rem;
+	padding: 0.1rem 0 0.1rem 1rem;
+	border-left: 4px solid var(--theme-divider);
+}
+
+.heading-link:hover,
+.heading-link:focus {
+	border-left-color: var(--theme-accent);
+	color: var(--theme-accent);
+}
+.heading-link:focus-within {
+	color: var(--theme-text-light);
+	border-left-color: hsla(var(--color-gray-40), 1);
+}
+.heading-link svg {
+	opacity: 0.6;
+}
+.heading-link:hover svg {
+	opacity: 0.8;
+}
+.heading-link a {
+	display: inline-flex;
+	gap: 0.5em;
+	width: 100%;
+	padding: 0.15em 0 0.15em 0;
+}
+
+.heading-link.depth-3 {
+	padding-left: 2rem;
+}
+.heading-link.depth-4 {
+	padding-left: 3rem;
+}
+
+.heading-link a {
+	font: inherit;
+	color: inherit;
+	text-decoration: none;
+}
+
+/* Screenreader Only Text */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}
+
+.focus\:not-sr-only:focus,
+.focus\:not-sr-only:focus-visible {
+	position: static;
+	width: auto;
+	height: auto;
+	padding: 0;
+	margin: 0;
+	overflow: visible;
+	clip: auto;
+	white-space: normal;
+}
+
+:target {
+	scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem;
+}
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@ -0,0 +1,125 @@
+:root {
+	--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+		Apple Color Emoji, Segoe UI Emoji;
+	--font-body: system-ui, var(--font-fallback);
+	--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
+		'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+		'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+
+	/*
+   * Variables with --color-base prefix define
+   * the hue, and saturation values to be used for
+   * hsla colors.
+   *
+   * ex:
+   *
+   * --color-base-{color}: {hue}, {saturation};
+   *
+   */
+
+	--color-base-white: 0, 0%;
+	--color-base-black: 240, 100%;
+	--color-base-gray: 215, 14%;
+	--color-base-blue: 212, 100%;
+	--color-base-blue-dark: 212, 72%;
+	--color-base-green: 158, 79%;
+	--color-base-orange: 22, 100%;
+	--color-base-purple: 269, 79%;
+	--color-base-red: 351, 100%;
+	--color-base-yellow: 41, 100%;
+
+	/*
+   * Color palettes are made using --color-base 
+   * variables, along with a lightness value to
+   * define different variants.
+   *
+   */
+
+	--color-gray-5: var(--color-base-gray), 5%;
+	--color-gray-10: var(--color-base-gray), 10%;
+	--color-gray-20: var(--color-base-gray), 20%;
+	--color-gray-30: var(--color-base-gray), 30%;
+	--color-gray-40: var(--color-base-gray), 40%;
+	--color-gray-50: var(--color-base-gray), 50%;
+	--color-gray-60: var(--color-base-gray), 60%;
+	--color-gray-70: var(--color-base-gray), 70%;
+	--color-gray-80: var(--color-base-gray), 80%;
+	--color-gray-90: var(--color-base-gray), 90%;
+	--color-gray-95: var(--color-base-gray), 95%;
+
+	--color-blue: var(--color-base-blue), 61%;
+	--color-blue-dark: var(--color-base-blue-dark), 39%;
+	--color-green: var(--color-base-green), 42%;
+	--color-orange: var(--color-base-orange), 50%;
+	--color-purple: var(--color-base-purple), 54%;
+	--color-red: var(--color-base-red), 54%;
+	--color-yellow: var(--color-base-yellow), 59%;
+}
+
+:root {
+	color-scheme: light;
+	--theme-accent: hsla(var(--color-blue), 1);
+	--theme-text-accent: hsla(var(--color-blue), 1);
+	--theme-accent-opacity: 0.15;
+	--theme-divider: hsla(var(--color-gray-95), 1);
+	--theme-text: hsla(var(--color-gray-10), 1);
+	--theme-text-light: hsla(var(--color-gray-40), 1);
+	/* @@@: not used anywhere */
+	--theme-text-lighter: hsla(var(--color-gray-80), 1);
+	--theme-bg: hsla(var(--color-base-white), 100%, 1);
+	--theme-bg-hover: hsla(var(--color-gray-95), 1);
+	--theme-bg-offset: hsla(var(--color-gray-90), 1);
+	--theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity));
+	--theme-code-inline-bg: hsla(var(--color-gray-95), 1);
+	--theme-code-inline-text: var(--theme-text);
+	--theme-code-bg: hsla(217, 19%, 27%, 1);
+	--theme-code-text: hsla(var(--color-gray-95), 1);
+	--theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
+	--theme-navbar-height: 6rem;
+	--theme-selection-color: hsla(var(--color-blue), 1);
+	--theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity));
+}
+
+body {
+	background: var(--theme-bg);
+	color: var(--theme-text);
+}
+
+:root.theme-dark {
+	color-scheme: dark;
+	--theme-accent-opacity: 0.15;
+	--theme-accent: hsla(var(--color-blue), 1);
+	--theme-text-accent: hsla(var(--color-blue), 1);
+	--theme-divider: hsla(var(--color-gray-10), 1);
+	--theme-text: hsla(var(--color-gray-90), 1);
+	--theme-text-light: hsla(var(--color-gray-80), 1);
+
+	/* @@@: not used anywhere */
+	--theme-text-lighter: hsla(var(--color-gray-40), 1);
+	--theme-bg: hsla(215, 28%, 17%, 1);
+	--theme-bg-hover: hsla(var(--color-gray-40), 1);
+	--theme-bg-offset: hsla(var(--color-gray-5), 1);
+	--theme-code-inline-bg: hsla(var(--color-gray-10), 1);
+	--theme-code-inline-text: hsla(var(--color-base-white), 100%, 1);
+	--theme-code-bg: hsla(var(--color-gray-5), 1);
+	--theme-code-text: hsla(var(--color-base-white), 100%, 1);
+	--theme-navbar-bg: hsla(215, 28%, 17%, 1);
+	--theme-selection-color: hsla(var(--color-base-white), 100%, 1);
+	--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
+
+	/* DocSearch [Algolia] */
+	--docsearch-modal-background: var(--theme-bg);
+	--docsearch-searchbox-focus-background: var(--theme-divider);
+	--docsearch-footer-background: var(--theme-divider);
+	--docsearch-text-color: var(--theme-text);
+	--docsearch-hit-background: var(--theme-divider);
+	--docsearch-hit-shadow: none;
+	--docsearch-hit-color: var(--theme-text);
+	--docsearch-footer-shadow: inset 0 2px 10px #000;
+	--docsearch-modal-shadow: inset 0 0 8px #000;
+}
+
+::selection {
+	color: var(--theme-selection-color);
+	background-color: var(--theme-selection-bg);
+}
--- a/src/templates/DocPage.vue
+++ b/src/templates/DocPage.vue
@ -1,41 +0,0 @@
-<template>
-  <DocsLayout :subtitles="$page.doc.subtitles" :links="links">
-    <div class="md content" v-html="$page.doc.content"></div>
-  </DocsLayout>
-</template>
-
-<page-query>
-query DocPage ($path: String!) {
-  doc: docPage (path: $path) {
-    path
-    title
-    content
-    headings (depth: h1) {
-      value
-    }
-    subtitles: headings (depth: h2) {
-      value
-      anchor
-    }
-  }
-}
-</page-query>
-
-<script>
-import links from '@/data/doc-links.yaml'
-
-export default {
-  computed: {
-    links () {
-      return links
-    }
-  },
-  metaInfo () {
-    const { title, headings } = this.$page.doc
-
-    return {
-      title: title || (headings.length ? headings[0].value : undefined)
-    }
-  }
-}
-</script>
--- a/src/templates/README.md
+++ b/src/templates/README.md
@ -1,7 +0,0 @@
-Templates for **GraphQL collections** should be added here.
-To create a template for a collection called `WordPressPost`
-create a file named `WordPressPost.vue` in this folder.
-
-Learn more: https://gridsome.org/docs/templates
-
-You can delete this file.
--- a/static/404.svg
+++ b/static/404.svg
--- a/static/README.md
+++ b/static/README.md
@ -1,3 +0,0 @@
-Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
-
-This file should be deleted.
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,32 +0,0 @@
-module.exports = {
-  theme: {
-    extend: {
-      screens: {
-        'dark-mode': { raw: '(prefers-color-scheme: dark)' },
-      },
-      colors: {
-        'primary': {
-          light: '#4ECDC4',
-          default: '#00B5A8',
-          dark: '#0B4C51',
-        },
-        'secondary': {
-          light: '#FF8C8C',
-          default: '#FF6B6B',
-          dark: '#DD3939',
-        },
-      },
-      'highlight': {
-        light: '#FFED96',
-        default: '#FFE66D',
-        dark: '#D6B513',
-      },
-    },
-  },
-  variants: {
-    // Some useful comment
-  },
-  plugins: [
-    // Some useful comment
-  ]
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "skipLibCheck": true
+  },
+  "compilerOptions": {
+    // Replace `astro/client` with `@astrojs/image/client`
+    "types": ["@astrojs/image/client"]
+  }
+}
				`@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="keyboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="mr-2 text-primary-light hover:text-primary svg-inline--fa fa-keyboard fa-w-18 fa-2x"><path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" class=""></path></svg>