Initial commit

.gitignore

@@ -0,0 +1,9 @@
+**/node_modules/
+/dist/
+.DS_Store
+**/.history
+src/tmp/
+.routify
+.netlify
+assets/build
+.vercel

.nolluprc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  hot: true,
+  contentBase: 'assets',
+  publicPath: 'build',
+  historyApiFallback: '__app.html',
+  port: 5000
+}

README.md

@@ -0,0 +1,67 @@
+# routify-starter
+
+Starter template for [Routify](https://github.com/sveltech/routify).
+
+### Get started
+
+#### Starter templates
+| Template                                  | Description                                                 |
+|-------------------------------------------|-------------------------------------------------------------|
+| [master](https://example.routify.dev/)    | Default template, includes examples folder                  |
+| [blog](https://blog-example.routify.dev/) | Generates a blog from local markdown posts. Includes mdsvex |
+| [auth](https://auth-example.routify.dev/) | Embedded login on protected pages. Includes Auth0           |
+
+To use a template, run:
+
+`npx @sveltech/routify init`
+
+or
+
+`npx @sveltech/routify init --branch <branch-name>`
+
+The above commands will populate the current directory, they don't create a new one.
+
+### npm scripts
+
+| Syntax           | Description                                                                       |
+|------------------|-----------------------------------------------------------------------------------|
+| `dev`            | Development (port 5000)                                                           |
+| `dev:nollup`     | Development with crazy fast rebuilds (port 5000)                                  |
+| `dev-dynamic`    | Development with dynamic imports                                                  |
+| `build`          | Build a bundled app with SSR + prerendering and dynamic imports                   |
+| `serve`          | Run after a build to preview. Serves SPA on 5000 and SSR on 5005                  |
+| `deploy:*`       | Deploy to netlify or now                                                          |
+| `export`         | Create static pages from content in dist folder (used by `npm run build`)         |
+
+### SSR and pre-rendering
+
+SSR and pre-rendering are included in the default build process.
+
+`npm run deploy:(now|netlify)` will deploy the app with SSR and prerendering included.
+
+To render async data, call the `$ready()` helper whenever your data is ready.
+
+If $ready() is present, rendering will be delayed till the function has been called.
+
+Otherwise it will be rendered instantly.
+
+See [src/pages/example/api/[showId].svelte](https://github.com/sveltech/routify-starter/blob/master/src/pages/example/api/%5BshowId%5D.svelte) for an example.
+
+### Production
+
+* For SPA or SSR apps please make sure that url rewrite is enabled on the server.
+* For SPA redirect to `__dynamic.html`.
+* For SSR redirect to the lambda function or express server.
+
+### Typescript
+
+For Typescript, we recommend [@lamualfa](https://github.com/lamualfa) excellent [routify-ts](https://github.com/lamualfa/routify-ts/)
+
+New project: `npx routify-ts init <project-name> [routify-init-args]`
+
+Existing project: `npx routify-ts convert [project-directory]`
+
+
+### Issues?
+
+File on Github! See https://github.com/sveltech/routify/issues .

api/netlify/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "ssr",
+  "version": "1.0.0",
+  "description": "",
+  "main": "ssr.js",
+  "scripts": {
+    "build": "node utils/build.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "esbuild": "^0.8.8",
+    "tossr": "^1.3.1"
+  }
+}

api/netlify/ssr.js

@@ -0,0 +1,11 @@
+const fs = require('fs')
+const { tossr } = require('tossr')
+const { script, template } = require('./bundle.json')
+
+exports.handler = async (event, context) => {
+    const qs = Object.entries(event.queryStringParameters)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('&');
+    const body = await tossr(template, script, `${event.path}?${qs}`);
+    return { statusCode: 200, body: body + '\n<!--ssr rendered-->' }
+}

api/netlify/utils/build.js

@@ -0,0 +1,26 @@
+/**
+ * Creates a JSON and inlines it with esbuild for ssr.js to consume
+ * {
+ *   data: duh,
+ *   script: inlined main.js
+ *   template: __app.html
+ * }
+ */
+
+const { resolve } = require('path')
+const { readFileSync, writeFileSync } = require('fs')
+const { build } = require('esbuild')
+
+const scriptPath = resolve(__dirname, '../../../dist/build/main.js')
+const templatePath = resolve(__dirname, '../../../dist/__app.html')
+const bundlePath = resolve(__dirname, '../build/bundle.js')
+
+build({ entryPoints: [scriptPath], outfile: bundlePath, bundle: true }).then(() => {
+    const bundle = {
+        date: new Date,
+        script: readFileSync(bundlePath, 'utf8'),
+        template: readFileSync(templatePath, 'utf8')
+    }
+
+    writeFileSync(resolve(__dirname, '../bundle.json'), JSON.stringify(bundle, null, 2))
+})

api/vercel-ssr/build.js

@@ -0,0 +1,36 @@
+const { resolve } = require('path')
+const { existsSync } = require('fs')
+const { execSync } = require('child_process')
+const { rollup } = require('rollup')
+
+const shouldBuildSpa = process.env.NOW_GITHUB_DEPLOYMENT || process.env.NOW_BUILDER
+const script = resolve(__dirname, '../../dist/build/main.js')
+const bundlePath = resolve(__dirname, '../../dist/build/bundle.js')
+
+build()
+
+
+async function build() {
+    if (shouldBuildSpa)
+        execSync('npm install && npm run build:app', { cwd: resolve('..', '..'), stdio: 'inherit' })
+    else
+        await waitForAppToExist()
+
+    buildSSRBundle()
+}
+
+async function waitForAppToExist() {
+    while (!existsSync(script)) {
+        console.log(`checking if "${script}" exists`)
+        await new Promise(r => setTimeout(r, 2000))
+    }
+    console.log(`found "${script}"`)
+}
+
+async function buildSSRBundle() {
+    const bundle = await rollup({
+        input: script,
+        inlineDynamicImports: true,
+    })
+    await bundle.write({ format: 'umd', file: bundlePath, name: 'roxi-ssr' })
+}

api/vercel-ssr/index.js

@@ -0,0 +1,11 @@
+const fs = require('fs')
+const { tossr } = require('tossr')
+
+const script = fs.readFileSync(require.resolve('../../dist/build/bundle.js'), 'utf8')
+const template = fs.readFileSync(require.resolve('../../dist/__app.html'), 'utf8')
+
+module.exports = async (req, res) => {
+    const html = await tossr(template, script, req.url, {})
+    res.send(html + '\n<!--ssr rendered-->')
+}
+

api/vercel-ssr/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "vercel-build": "node ./build.js"
+  },
+  "devDependencies": {
+    "rollup": "^2.28.2"
+  }
+}

assets/__app.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<meta name="theme-color" content="#E938C2">
+	<link rel="apple-touch-icon" href="images/touch-icons/logo-192.png">
+
+	<link rel="manifest" href="/manifest.json">
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel="modulepreload" href="/build/main.js" />
+
+	<script type="module" src="/build/main.js"></script>
+</head>
+
+<body>
+	<noscript>Please enable Javascript for best experience.</noscript>
+</body>
+</html>

assets/global.css

@@ -0,0 +1,66 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

assets/manifest.json

@@ -0,0 +1,21 @@
+{
+  "background_color": "#ffffff",
+  "theme_color": "#E938C2",
+  "name": "Routify app",
+  "short_name": "Routify app",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/images/touch-icons/logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/touch-icons/logo-800.png",
+      "sizes": "800x800",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

assets/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

netlify.toml

@@ -0,0 +1,23 @@
+
+[build]
+  publish = "dist"
+  functions = "api/netlify"
+  command = "npm run build && cd api/netlify && npm run build"
+
+# Dev doesn't work yet. Any takers?
+# [dev]  
+  # command = "npm run dev:ssr"
+  # targetPort = 5000
+  # publish = "assets"
+  # autoLaunch = true
+
+[[redirects]]
+  # SSR and SPA
+  from = "/*"
+  to = "/.netlify/functions/ssr"
+  status = 200
+
+  # SPA only
+  # from = "/*"
+  # to = "/__app.html"
+  # status = 200