[docs]: Migrate docs to Sveltekit (#372)

* [docs]: Migrated docs to Sveltekit (#273)

* [docs]: Migrated docs to SvelteKit

* [docs]: Ran tests and linted code

* [docs]: Add back alerts with icons

Co-authored-by: Margarida Silva <ana.silva@replai.io>

* [docs]: small TS fixes

* [docs]: remove flyin animation since it causes elements to pop in

* [docs]: switch to TS

* [docs]: add SSR hook solution

* [docs]: remove and move includes/ files

* [docs]: Added a slash to search links

* [docs]: Changed design of headers and changed structure of html

* [docs]: Use media queries instead of <svelte:window> for Sidebar

* [docs]: Removed ComponentPreview in /components

* [docs]: Use media queries instead of <svelte:window> for Topbar

* [docs]: Fixed styling in Topbar Menu component

* [docs]: Deleted unused window_width variable in layout

* [docs]: Implemented suggested changes

* [docs]: Updated the design of the search bar

* [docs]: Changed 'Search' text to paragraph tag

* [docs]: Enforce 100% width

* [docs]: Removed blue background color of search modal

* [docs]: Made the search links keyboard focusable

* [docs]: Corrected wrong language declarations in code blocks

* fix: links in changelog docs

* [docs]: fix dark mode styles in docs

* [@svelteui/demos]: fix dark theme demo

* [docs]: Tweaks and fixes in dark theme

* [docs]: Fixed dark theme in tables

* [docs]: Implemented suggested changes

* [docs]: Fix dark theme in mobile

* [docs]: Store colorScheme value in localStorage

* [docs]: Change backgroundColor of Heading and MinorHeading to match active link on sidebar

* [docs]: Linted and tested code

* [docs]: changed dark mode heading background color

* [docs](docs): fix source code button color

* [fix](docs): fix highlight in code blocks in the docs

Added missing key to each block that allowed reactivity when the sections of Progress changed

* [feat](docs): Refactor the whole docs structure and set deployment setup

* [fix](docs): set correct base path

* [feat](docs): trigger docs deploy workflow manually

* [fix](docs): merge conflict

* [fix](core): revert svelte-preprocess version and fix scripts

---------

Co-authored-by: Caladan <tnambiar2008@gmail.com>

.github/workflows/deploy-docs.yml

@@ -0,0 +1,51 @@
+name: Deploy Docs to GitHub Pages
+
+on: workflow_dispatch
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: yarn --immutable
+
+      - name: build
+        env:
+          BASE_PATH: ''
+        run: |
+          cd apps/docs
+          yarn build
+          touch build/.nojekyll
+          touch apps/docs/__DOCS__/dist/CNAME && echo 'www.svelteui.org' > apps/docs/__DOCS__/dist/CNAME
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1

apps/docs/.gitignore

@@ -1,2 +1,10 @@
+.DS_Store
 node_modules
-__DOCS__
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/docs/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

apps/docs/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

apps/docs/package.json

@@ -1,28 +1,26 @@
 {
-  "private": true,
   "name": "svelteui-docs",
   "version": "0.11.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "type": "module",
   "dependencies": {
-    "@svelte-docs/server": "0.1.6",
     "radix-icons-svelte": "1.2.1"
   },
   "devDependencies": {
-    "@svelte-docs/core": "0.10.13",
-    "@svelte-docs/publisher": "0.2.3",
-    "@svelte-docs/themes": "1.0.1",
-    "npm-run-all": "4.1.5",
-    "svelte-tooltip": "1.2.0",
-    "rollup": "2.79.1"
-  },
-  "scripts": {
-    "build": "rollup -c ../../node_modules/@svelte-docs/core/rollup.config.js",
-    "autobuild": "rollup -c ../../node_modules/@svelte-docs/core/rollup.config.js -w",
-    "prepare:docs": "deno run --unstable --allow-read --allow-write ./prepare.ts",
-    "dev": "yarn prepare:docs & yarn start:dev & yarn autobuild",
-    "start": "node ../../node_modules/@svelte-docs/server",
-    "start:dev": "PORT=3002 node ../../node_modules/@svelte-docs/server --dev --single",
-    "start:pagewatch": "node ../../node_modules/@svelte-docs/core/watcher",
-    "deploy": "yarn prepare:docs & yarn build && deno run -A --unstable ../../scripts/docs/build.ts",
-    "deploy:nobuild": "node ../../node_modules/@svelte-docs/publisher"
+    "@sveltejs/adapter-static": "2.0.2",
+    "@sveltejs/kit": "1.15.9",
+    "mdsvex": "0.10.6",
+    "svelte": "3.58.0",
+    "svelte-check": "3.2.0",
+    "tslib": "2.5.0",
+    "typescript": "4.9.3",
+    "vite": "4.3.3"
   }
 }

apps/docs/src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}

apps/docs/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>