migrate files to new +page.svx format

migration stage 1

Author: James Bradbury

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -1,12 +1,8 @@
 module.exports = {
 	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
+	extends: ['eslint:recommended', 'prettier'],
+	plugins: ['svelte3'],
 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2020
@@ -15,8 +11,5 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
-	},
-	rules: {
-		'@typescript-eslint/no-inferrable-types': 'off'
 	}
 };

.gitattributes

@@ -1,7 +1,13 @@
 .DS_Store
 node_modules
-.svelte-kit
-build
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 
 # autogenerated files
 crumbs.json
@@ -18,3 +24,4 @@ pnpm-lock.yaml
 package-lock.json
 .pnpm-debug.log
 scripts/__pycache__
+

.gitignore

@@ -0,0 +1 @@
+16.19

.nvmrc

@@ -1,3 +1,17 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
 .git
 .gitignore
 static
@@ -20,3 +34,4 @@ pnpm-lock.yaml
 package-lock.json
 .pnpm-debug.log
 scripts/__pycache__
+

.prettierignore

@@ -4,5 +4,8 @@
 	"trailingComma": "none",
 	"printWidth": 120,
 	"tabWidth": 4,
-	"arrowParens": "avoid"
+	"arrowParens": "avoid",
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

.prettierrc

@@ -1,52 +1,38 @@
-# Learn
+# create-svelte
 
-[![Deployment](https://github.com/flucoma/learn/actions/workflows/deploy.yml/badge.svg)](https://github.com/flucoma/learn/actions/workflows/deploy.yml)
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
-To run this website you will need a package manager for js/node such as `pnpm`, `yarn` or `npm`.
+## Creating a project
 
-## Run Locally
+If you're seeing this, you've probably already done this step. Congrats!
 
-Inside this repository run:
+```bash
+# create a new project in the current directory
+npm create svelte@latest
 
-`pnpm i`
-
-and then to run a local server:
-
-`pnpm run dev`
+# create a new project in my-app
+npm create svelte@latest my-app
+```
 
-which will spawn a web server at http://localhost:3000
+## Developing
 
-## Run Static Site
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-`pnpm run build`
+```bash
+npm run dev
 
-which will create a static site in `./build`
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-# How does it work?
+## Building
 
-Pages are written in `.svx` format, which is a mix of markdown and svelte. Wrting is principally written in what you might know as normal markdown while bits of javascript (widgets, audio, pictures) are included as svelte widgets. There is also markdown frontmatter where you can include arbitrary information such as tags, a blurb, the title (so that you are not dependent on the name of the file itself). An example of a page describing how speakers work might look like this:
+To create a production version of your app:
 
+```bash
+npm run build
 ```
----
-title: 'How speakers work'
-blurb: |
-    Every wondered how sound is made by speakers? This article tells you all...
-tags:
-    - audio
-    - technology
----
-
-<script>
-import MyAmazingWidget from '$lib/demos/amazingwidget.svelte'
-</script>
-
-# Speakers
-They are very good at wiggling the air for us
-
-## How?
-Speaker move air wiggle. Simples. Look at the picture below
-
-<MyAmazingWidget /> <-- this is defined inside the script tag and imported
-```
 
-In the `scripts` folder you will find a file called `extract_structure.py`. This will parse the `.svx` pages and return some JSON data that is then stored in the `static` folder of this website. This is used to programatically generate the pages, links, tags and some content.
+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.

README.md

@@ -1,10 +1,17 @@
 {
+	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
 }

jsconfig.json

@@ -1,68 +1,70 @@
 {
-	"name": "learn",
+	"name": "learn-2.0",
 	"version": "0.0.1",
+	"private": true,
 	"scripts": {
-		"dev": "node scripts/metadata.js && node scripts/db.js && node scripts/related.js && svelte-kit dev --host",
-		"build": "node scripts/metadata.js && node scripts/db.js && node scripts/related.js && svelte-kit build",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path=.prettierignore .",
-		"format": "prettier --write --plugin-search-dir=. ."
+		"dev": "node scripts/metadata.js && node scripts/db.js && node scripts/related.js && vite dev",
+		"build": "node scripts/metadata.js && node scripts/db.js && node scripts/related.js && vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"test": "playwright test",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "next",
-		"@sveltejs/kit": "1.0.0-next.321",
-		"@typescript-eslint/eslint-plugin": "^4.33.0",
-		"@typescript-eslint/parser": "^4.33.0",
-		"autoprefixer": "^10.4.5",
-		"eslint": "^7.32.0",
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-static": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^3.4.1",
+		"eslint-plugin-svelte3": "^4.0.0",
 		"front-matter": "^4.0.2",
-		"github-slugger": "^1.4.0",
-		"glob": "^7.2.0",
-		"hastscript": "^7.0.2",
+		"github-slugger": "^1.5.0",
+		"glob": "^7.2.3",
+		"hastscript": "^7.1.0",
 		"markdown": "^0.5.0",
 		"markdown-link-extractor": "^1.3.1",
-		"postcss": "^8.4.12",
-		"prettier": "^2.6.2",
-		"prettier-plugin-svelte": "^2.7.0",
+		"mdsvex": "^0.10.6",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
 		"rehype-autolink-headings": "^6.1.1",
-		"rehype-slug": "^4.0.1",
-		"svelte": "^3.47.0",
-		"svelte-check": "^2.7.0",
-		"svelte-preprocess": "^4.10.6",
-		"tslib": "^2.4.0",
-		"typescript": "^4.6.4"
+		"rehype-slug": "^5.1.0",
+		"remark": "13.0.0",
+		"remark-html": "13.0.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^2.9.2",
+		"svelte-preprocess": "^5.0.0",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0",
+		"vitest": "^0.25.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@flucoma/tf-kmeans": "^0.0.3",
-		"@juggle/resize-observer": "^3.3.1",
-		"@tensorflow/tfjs": "^3.16.0",
+		"@juggle/resize-observer": "^3.4.0",
+		"@tensorflow/tfjs": "^3.21.0",
 		"array-smooth": "^1.0.0",
-		"chart.js": "^3.7.1",
+		"chart.js": "^3.9.1",
 		"chartjs-plugin-annotation": "^1.4.0",
-		"d3": "^7.4.4",
+		"d3": "^7.8.0",
 		"fuzzy-search": "^3.2.1",
-		"konva": "^8.3.6",
+		"konva": "^8.3.14",
 		"lodash": "^4.17.21",
 		"mdsvex": "^0.9.8",
-		"meyda": "^5.3.0",
+		"meyda": "^5.5.1",
 		"numpy-parser": "^1.2.3",
 		"peaks.js": "^0.27.0",
-		"pts": "^0.10.9",
+		"pts": "^0.10.12",
+		"rehype-jargon": "^2.22.2",
 		"remark": "13.0.0",
-		"remark-html": "13.0.1",
-		"remark-jargon": "^2.20.7",
 		"seedrandom": "~2.4.4",
-		"svelte-bricks": "^0.1.6",
+		"svelte-bricks": "^0.1.7",
 		"svelte-select": "^4.4.7",
 		"svelte-youtube": "^0.0.2",
 		"tone": "^14.7.77",
 		"umap-js": "^1.3.3",
-		"waveform-data": "^4.3.0",
-		"webgl-plot": "^0.7.0",
-		"youtube-player": "^5.5.2"
+		"waveform-data": "^4.3.0"
 	}
 }

package.json

@@ -0,0 +1,10 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;