diff --git a/packages/site/.gitignore b/packages/site/.gitignore index 8c1592e4..d076dd10 100644 --- a/packages/site/.gitignore +++ b/packages/site/.gitignore @@ -1,4 +1,6 @@ .DS_Store -/node_modules +node_modules +yarn-error.log /cypress/screenshots/ -/.svelte-kit +/__sapper__/ +dist diff --git a/packages/site/package.json b/packages/site/package.json index 32c4d9e0..3c7c0f51 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -4,9 +4,10 @@ "version": "0.0.1", "type": "module", "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", + "dev": "sapper dev --ext '.svelte .svx'", + "build:site": "sapper build --legacy --ext '.svelte .svx'", + "export": "sapper export --legacy --ext '.svelte .svx'", + "start": "node __sapper__/build", "cy:run": "cypress run", "cy:open": "cypress open", "test": "run-p --race dev cy:run", @@ -14,8 +15,11 @@ }, "private": "true", "dependencies": { + "compression": "^1.7.1", "mdsvex": "^0.7.1-beta.3", + "polka": "^0.5.0", "refractor": "^2.10.0", + "sirv": "^0.4.0", "yootils": "^0.0.15" }, "devDependencies": { @@ -29,22 +33,20 @@ "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.0.5", "@rollup/plugin-replace": "^3.0.0", - "@sveltejs/kit": "next", - "@sveltejs/adapter-auto": "next", "codemirror": "^5.49.2", "npm-run-all": "^4.1.5", - "prism-svelte": "^0.5.0", + "prism-svelte": "^0.4.4", "rehype-autolink-headings": "^2.0.5", "rehype-slug": "^2.0.3", "remark-syntax-highlight": "^0.1.3", "rollup": "^2.58.0", "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", - "svelte": "^3.49.0", + "sapper": "^0.29.3", + "svelte": "^3.7.1", "svelte-json-tree": "^0.0.7", "typeface-catamaran": "^0.0.72", "typeface-roboto": "^0.0.75", - "unist-util-visit": "^2.0.1", - "vite": "^3.0.4" + "unist-util-visit": "^2.0.1" } } diff --git a/packages/site/rollup.config.js b/packages/site/rollup.config.js new file mode 100644 index 00000000..e1f2b9a0 --- /dev/null +++ b/packages/site/rollup.config.js @@ -0,0 +1,150 @@ +import 'prismjs'; +import "prism-svelte"; +import "./prism/svx.js"; + + + +import resolve from "@rollup/plugin-node-resolve"; +import replace from "@rollup/plugin-replace"; +import commonjs from "@rollup/plugin-commonjs"; +import svelte from "rollup-plugin-svelte"; +import babel from "@rollup/plugin-babel"; +import { terser } from "rollup-plugin-terser"; +import config from "sapper/config/rollup.js"; +import pkg from "./package.json"; + +import slug from "rehype-slug"; +import link from "rehype-autolink-headings"; + +import { highlight, highlighter } from "./prism/prism.js"; + +import { extname } from "path"; + +const mode = process.env.NODE_ENV; +const dev = mode === "development"; +const legacy = !!process.env.SAPPER_LEGACY_BUILD; + +import { mdsvex } from "mdsvex"; + +function mdsvex_transform() { + return { + async transform(code, id) { + if (extname(id) !== ".svtext") return; + + const c = ( + await mdsvex({ + highlight: { + alias: { + ts: "typescript", + mdx: "markdown", + svelte: "svelte", + svx: "svx", + mdsvex: "svx", + sig: "ts", + } + }, + extension: '.svtext', + rehypePlugins: [slug, link] + }).markup({ content: code, filename: id }) + ).code; + return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`; + } + }; +} + +export default { + client: { + input: config.client.input(), + output: config.client.output(), + globals: { + global: "window" + }, + plugins: [ + replace({ + "process.browser": true, + "process.env.NODE_ENV": JSON.stringify(mode) + }), + mdsvex_transform(), + svelte({ + extensions: [".svelte", ".svx"], + compilerOptions: { + dev, + hydratable: true + }, + emitCss: true, + preprocess: mdsvex({ extension: '.svx' }) + }), + resolve({ preferBuiltins: false, browser: true }), + commonjs(), + + legacy && + babel({ + extensions: [".js", ".mjs", ".html", ".svelte"], + babelHelpers: "runtime", + exclude: ["node_modules/@babel/**"], + presets: [ + [ + "@babel/preset-env", + { + targets: "> 0.25%, not dead" + } + ] + ], + plugins: [ + "@babel/plugin-syntax-dynamic-import", + [ + "@babel/plugin-transform-runtime", + { + useESModules: true + } + ] + ] + }), + + !dev && + terser({ + module: true + }) + ] + }, + + server: { + input: config.server.input(), + output: config.server.output(), + plugins: [ + replace({ + "process.browser": false, + "process.env.NODE_ENV": JSON.stringify(mode) + }), + mdsvex_transform(), + svelte({ + extensions: [".svelte", ".svx"], + compilerOptions: { + generate: "ssr", + dev + }, + preprocess: mdsvex({ extension: '.svx' }) + }), + resolve({ browser: true }), + commonjs() + ], + external: Object.keys(pkg.dependencies).concat( + require("module").builtinModules || + Object.keys(process.binding("natives")) + ) + }, + + serviceworker: { + input: config.serviceworker.input(), + output: config.serviceworker.output(), + plugins: [ + resolve(), + replace({ + "process.browser": true, + "process.env.NODE_ENV": JSON.stringify(mode) + }), + commonjs(), + !dev && terser() + ] + } +}; diff --git a/packages/site/src/client.js b/packages/site/src/client.js new file mode 100644 index 00000000..cec91725 --- /dev/null +++ b/packages/site/src/client.js @@ -0,0 +1,5 @@ +import * as sapper from '@sapper/app'; + +sapper.start({ + target: document.querySelector('#sapper') +}); \ No newline at end of file diff --git a/packages/site/src/components/Nav.svelte b/packages/site/src/components/Nav.svelte index 736abd07..2ff6e6d1 100644 --- a/packages/site/src/components/Nav.svelte +++ b/packages/site/src/components/Nav.svelte @@ -1,7 +1,9 @@