✨📚 adding synced docs

README.md

@@ -1,3 +1,7 @@
+---
+title: Vision
+---
+
 # SHIFTY - Vision
 
 A new and intuitive way of controlling intelligent devices developed from first principles for the event industry.

package.json

@@ -26,7 +26,7 @@
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
-		"@mxssfd/typedoc-theme": "^1.1.2",
+		"@mxssfd/typedoc-theme": "^1.1.3",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-node": "^1.3.1",
@@ -41,6 +41,7 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"mdsvex": "^0.11.0",
 		"nodemon": "^3.0.1",
 		"polka": "^0.5.2",
 		"prettier": "^2.8.0",
@@ -49,7 +50,7 @@
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",
 		"tsx": "^3.12.7",
-		"typedoc": "^0.24.8",
+		"typedoc": "^0.25.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
 		"vitest": "^0.32.2"
@@ -63,6 +64,7 @@
 		"fast-xml-parser": "^4.2.7",
 		"fetch-cookie": "^2.1.0",
 		"gdtf-types": "^1.0.0",
+		"github-markdown-css": "^5.2.0",
 		"json-schema-to-typescript": "^13.0.2",
 		"jszip": "^3.10.1",
 		"three": "^0.155.0",

src/routes/+page.md

@@ -0,0 +1,5 @@
+<script>
+	import Readme from '../../README.md';
+</script>
+
+<Readme />

src/routes/md.css

@@ -0,0 +1,3 @@
+body {
+	background-color: #0d1117;
+}

src/routes/md.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import 'github-markdown-css/github-markdown-dark.css';
+	import './md.css';
+
+	export let layout = 'ghDark';
+	export let title = 'My Document';
+</script>
+
+<svelte:head>
+	<title>{title} | SHIFTY</title>
+</svelte:head>
+
+<article class="markdown-body {layout}">
+	<slot />
+</article>
+
+<style>
+	.markdown-body {
+		box-sizing: border-box;
+		min-width: 200px;
+		max-width: 980px;
+		margin: 0 auto;
+		padding: 45px;
+	}
+
+	@media (max-width: 767px) {
+		.markdown-body {
+			padding: 15px;
+		}
+	}
+</style>

src/routes/src/routes/visualizer/+page.md

@@ -0,0 +1,5 @@
+<script>
+	import Readme from '../../../visualizer/README.md';
+</script>
+
+<Readme />

src/routes/src/routes/visualizer/remote/+page.md

@@ -0,0 +1,5 @@
+<script>
+	import Readme from '../../../../visualizer/remote/README.md';
+</script>
+
+<Readme />

src/routes/src/routes/webSocketDemo/+page.md

@@ -0,0 +1,5 @@
+<script>
+	import Readme from '../../../webSocketDemo/README.md';
+</script>
+
+<Readme />

src/routes/visualizer/README.md

@@ -1,5 +1,11 @@
+---
+title: Visualizer
+---
+
 # Visualizer
 
 This proof-of-concept shows an environment ([World](https://oshifty.github.io/vision/classes/World.html)) build with [three.js](https://threejs.org). Upon load it fetches a fixture model from GDTF Share and loads it into the environment to be visualized. The poc currently supports Pan / Tilt Attributes only and a very limited selection of fixtures but it can be extended easily in the future. It comes with a remote that is implemented over [here](/src/routes/visualizer/remote).
 
+[dev server link](/visualizer)
+
 ![Robe Robin Tetra X inside of the visualizer](./poc-tetrax.png)

src/routes/visualizer/remote/README.md

@@ -1,5 +1,11 @@
+---
+title: Remote
+---
+
 # Remote
 
 This poc shows how a minimum implementation of a remote could look like. For more information check out [Visualizer](/src/routes/visualizer).
 
-![creenshot of the PoC](./poc-remote.png)
+[dev server link](/visualizer/remote)
+
+![Screenshot of the PoC](./poc-remote.png)

src/routes/webSocketDemo/README.md

@@ -1,5 +1,11 @@
+---
+title: WebSocket Demo
+---
+
 # WebSocket Demo
 
 This is a minimal example of establishing a WebSocket connection to the server the page is retrieved from. Using Socket.IO it inititates the connection in `polling` mode and then upgrades it to `websocket` or even `webtransport` when there will be support for it in the future.
 
 Upon connection the WebSocket Server greets the client with a warm and welcoming `Hello, World 👋` message in the terminal and states the connection status as `Connected`.
+
+[dev server link](/webSocketDemo)

svelte.config.js

@@ -1,11 +1,25 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex } from 'mdsvex';
+import { join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const dirname = resolve(fileURLToPath(import.meta.url), '../');
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	extensions: ['.svelte', '.svx', '.md'],
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess({}),
+		mdsvex({
+			extensions: ['.svx', '.md'],
+			layout: {
+				_: join(dirname, './src/routes/md.svelte')
+			}
+		})
+	],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

tests/test.ts

@@ -2,5 +2,5 @@ import { expect, test } from '@playwright/test';
 
 test('index page has expected h1', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'SHIFTY - Vision' })).toBeVisible();
 });

typedoc.json

@@ -5,6 +5,7 @@
 	"tsconfig": "tsconfig.docs.json",
 	// "excludePrivate": true,
 	"plugin": ["@mxssfd/typedoc-theme"],
+	"stripYamlFrontmatter": true,
 	"theme": "my-theme",
 	"name": "Home",
 	"visibilityFilters": {

vite.config.ts

@@ -15,6 +15,9 @@ export default defineConfig({
 	server: {
 		watch: {
 			ignored: ['**/public/**']
+		},
+		fs: {
+			allow: ['./README.md']
 		}
 	},
 	plugins: [sveltekit(), webSocketServer],