feat: Add jsrepo (#64)

* initial config

* update README

* Update README.md

* format

* add build-registry workflow

* fix build registry

* update jsrepo

* upgrade to `1.17.2` and configure rules

* format

* fix a few linting errors

These pop up in my project when I install

* move theme-switcher

* bump deps

* update jsrepo

* add project setup instructions

* meh

* Update README.md

* import statement

* Update README.md

* test

---------

Co-authored-by: Davis SHYAKA <[email protected]>

.github/workflows/build-registry.yml

@@ -0,0 +1,43 @@
+name: build-registry
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      # we need to install here so that .svelte-kit is generated for path aliases
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build jsrepo-manifest.json
+        run: pnpm build:registry
+
+      - name: Create pull request with changes
+        uses: peter-evans/create-pull-request@v7
+        with:
+          title: 'chore: update `jsrepo-manifest.json`'
+          body: |
+            - Update `jsrepo-manifest.json`
+
+            *This PR was auto generated*
+          branch: build-manifest
+          commit-message: build `jsrepo-manifest.json`

.vscode/ltex.dictionary.en-GB.txt

@@ -1,3 +1,5 @@
 Geist
 Vercel
 shadcn-svelte
+jsrepo
+SvelteKit

.vscode/settings.json

@@ -14,13 +14,16 @@
 		"geoffrich",
 		"Gonz",
 		"huntabyte",
+		"ieedan",
+		"jsrepo",
 		"labelledby",
 		"legos",
 		"lukeed",
 		"nums",
 		"ollema",
 		"Paperclip",
 		"poppanator",
+		"pyncz",
 		"runed",
 		"shadcn",
 		"shiki",

README.md

@@ -2,14 +2,140 @@
 
 This is a [Svelte](https://svelte.dev/) implementation of the [Geist](https://vercel.com/geist/introduction) Design System by [Vercel](https://vercel.com/).
 
-## Notes
+<details>
+<summary>Notes</b></summary>
 
 - Work in progress.
 - Not affiliated with Vercel.
 - Not a component library.
 - Will try and keep the API's as close to the original as possible.
 - Built with [shadcn-svelte](https://www.shadcn-svelte.com/)
 
-## Contributing
+</details>
+
+<details>
+<summary>Setup</b></summary>
+
+### 1. **Initialize SvelteKit**:
+
+```bash
+pnpm dlx sv create
+# add tailwind, prettier, eslint
+```
+
+### 2. **Copy Config Files**:
+
+Copy [app.css](https://github.com/shyakadavis/geist/blob/main/src/app.css) to `src/app.css`
+
+Copy [tailwind.config.ts](https://github.com/shyakadavis/geist/blob/main/tailwind.config.ts) to `tailwind.config.ts`
+
+Install tailwind plugins:
+
+```bash
+pnpm add -D @pyncz/tailwind-mask-image @tailwindcss/typography tailwindcss-animate
+```
+
+### 3. Setup SVG plugin:
+
+Install plugin:
+
+```bash
+pnpm add -D @poppanator/sveltekit-svg
+```
+
+Add plugin in `vite.config.ts`:
+
+```diff
++import svg from '@poppanator/sveltekit-svg';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		sveltekit(),
++		svg()
+	]
+});
+```
+
+> [!TIP]
+> For Typescript support of `file.svg?component`, add this import to any `.d.ts` file in your project path:
+
+```diff
++ import '@poppanator/sveltekit-svg/dist/svg';
+```
+
+### 4. Install fonts
+
+```bash
+pnpm add -D @fontsource/geist-sans @fontsource/geist-mono
+```
+
+### 5. Setup Theming
+
+```bash
+pnpm add -D mode-watcher
+```
+
+Add `<ModeWatcher/>` to `src/routes/+layout.svelte`
+
+```diff
+<script lang="ts">
++	import { ModeWatcher } from 'mode-watcher';
+	import '../app.css';
+	let { children } = $props();
+</script>
+
++<ModeWatcher/>
+{@render children()}
+```
+
+</details>
+
+<details>
+<summary>Add components with jsrepo</b></summary>
+
+We have set up [jsrepo](https://github.com/ieedan/jsrepo) so that you can install our components just like `shadcn/ui`.
+
+**Setup jsrepo**:
+
+```bash
+pnpm dlx jsrepo init --project --repos github/shyakadavis/geist
+```
+
+Configure paths in `jsrepo.json`:
+
+```diff
+{
+	"$schema": "https://unpkg.com/[email protected]/schemas/project-config.json",
+	"repos": ["github/shyakadavis/geist"],
+	"includeTests": false,
+	"watermark": true,
+	"formatter": "prettier",
+	"paths": {
+		"*": "./src/lib/ts/blocks",
++       "ui": "$lib/components/ui",
++       "icons": "$lib/assets/icons",
++       "lib": "$lib/"
+	}
+}
+```
+
+**Add components**:
+
+```bash
+# list components
+pnpm dlx jsrepo add
+
+# add specific component
+pnpm dlx jsrepo add ui/avatar
+```
+
+</details>
+
+<details>
+<summary>Contributing</b></summary>
 
 If you would like to contribute, please read the [CONTRIBUTING.md](./CONTRIBUTING.md) file to get started.
+
+</details>

jsrepo-build-config.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://unpkg.com/[email protected]/schemas/registry-config.json",
+	"dirs": ["./src/lib/components", "./src/lib/assets", "./src"],
+	"includeBlocks": [],
+	"includeCategories": ["ui", "lib", "icons"],
+	"doNotListBlocks": [],
+	"doNotListCategories": ["icons", "lib"],
+	"excludeDeps": ["svelte"],
+	"rules": {
+		"no-category-index-file-dependency": "off",
+		"require-local-dependency-exists": "error",
+		"max-local-dependencies": ["off", 10]
+	}
+}