From 08b33971935f8a55543dc2c033d7d676a1569e5b Mon Sep 17 00:00:00 2001 From: Nosov Konstantin Date: Sun, 10 Jan 2021 12:08:01 +0200 Subject: [PATCH] implement svx blog demo converts posts to svx add gray-matter to fetch frontmatter (probably could be done by mdsvex somehow) add posts search o rollup.config.js --- package-lock.json | 80 ++++++++++++++++++ package.json | 7 +- rollup.config.js | 21 ++++- src/routes/blog/_posts.js | 84 +------------------ src/routes/blog/how-can-i-get-involved.svx | 7 ++ .../how-is-sapper-different-from-next.svx | 12 +++ src/routes/blog/how-to-use-sapper.svx | 26 ++++++ src/routes/blog/index.json.js | 6 +- src/routes/blog/what-is-sapper.svx | 20 +++++ src/routes/blog/why-the-name.svx | 8 ++ 10 files changed, 182 insertions(+), 89 deletions(-) create mode 100644 src/routes/blog/how-can-i-get-involved.svx create mode 100644 src/routes/blog/how-is-sapper-different-from-next.svx create mode 100644 src/routes/blog/how-to-use-sapper.svx create mode 100644 src/routes/blog/what-is-sapper.svx create mode 100644 src/routes/blog/why-the-name.svx diff --git a/package-lock.json b/package-lock.json index 0cad18b..994c5d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1168,6 +1168,15 @@ "color-convert": "^1.9.0" } }, + "argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "requires": { + "sprintf-js": "~1.0.2" + } + }, "babel-plugin-dynamic-import-node": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", @@ -1466,6 +1475,12 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "dev": true }, + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true + }, "estree-walker": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", @@ -1478,6 +1493,15 @@ "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", "dev": true }, + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -1539,6 +1563,18 @@ "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==", "dev": true }, + "gray-matter": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.2.tgz", + "integrity": "sha512-7hB/+LxrOjq/dd8APlK0r24uL/67w7SkYnfwhNFwg/VDIGWGmduTDYf3WNstLW2fbbmRwrDGCVSJ2isuf2+4Hw==", + "dev": true, + "requires": { + "js-yaml": "^3.11.0", + "kind-of": "^6.0.2", + "section-matter": "^1.0.0", + "strip-bom-string": "^1.0.0" + } + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -1636,6 +1672,12 @@ "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==", "dev": true }, + "is-extendable": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", + "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=", + "dev": true + }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -1709,6 +1751,16 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "dev": true }, + "js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + } + }, "jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", @@ -1730,6 +1782,12 @@ "minimist": "^1.2.5" } }, + "kind-of": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", + "dev": true + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -2201,6 +2259,16 @@ "string-hash": "^1.1.3" } }, + "section-matter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", + "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1", + "kind-of": "^6.0.0" + } + }, "select": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", @@ -2322,6 +2390,12 @@ "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==", "dev": true }, + "sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "dev": true + }, "string-hash": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", @@ -2364,6 +2438,12 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, + "strip-bom-string": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", + "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=", + "dev": true + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index 0ee64c0..0d9b766 100644 --- a/package.json +++ b/package.json @@ -22,13 +22,14 @@ "@babel/plugin-transform-runtime": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/runtime": "^7.0.0", + "@rollup/plugin-babel": "^5.0.2", + "@rollup/plugin-commonjs": "^14.0.0", + "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-replace": "^2.2.0", + "gray-matter": "^4.0.2", "mdsvex": "^0.8.3", "npm-run-all": "^4.1.5", "rollup": "^2.23.1", - "@rollup/plugin-babel": "^5.0.2", - "@rollup/plugin-commonjs": "^14.0.0", - "@rollup/plugin-node-resolve": "^8.4.0", "rollup-plugin-svelte": "^5.0.1", "rollup-plugin-terser": "^6.1.0", "sapper": "^0.28.0", diff --git a/rollup.config.js b/rollup.config.js index a2dea9b..052dc5d 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -6,12 +6,27 @@ 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 * as matter from 'gray-matter'; import { mdsvex } from "mdsvex"; +import {extname, join} from "path"; +import {readdirSync} from "fs"; const mode = process.env.NODE_ENV; const dev = mode === "development"; const legacy = !!process.env.SAPPER_LEGACY_BUILD; +function get_routes() { + const blog_path = join(process.cwd(), 'src', 'routes', 'blog'); + return readdirSync(blog_path).filter(p => extname(p) === ".svx").map(post => { + return matter.read(join(blog_path, post)) + }); +} + +const replaceConstants = { + 'process.env.NODE_ENV': JSON.stringify(mode), + '__ROUTES__': JSON.stringify(get_routes()), +}; + const onwarn = (warning, onwarn) => (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) || (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || @@ -24,8 +39,8 @@ export default { output: config.client.output(), plugins: [ replace({ + ...replaceConstants, "process.browser": true, - "process.env.NODE_ENV": JSON.stringify(mode) }), svelte({ extensions, @@ -78,8 +93,8 @@ export default { output: config.server.output(), plugins: [ replace({ + ...replaceConstants, "process.browser": false, - "process.env.NODE_ENV": JSON.stringify(mode) }), svelte({ extensions, @@ -104,8 +119,8 @@ export default { plugins: [ resolve(), replace({ + ...replaceConstants, "process.browser": true, - "process.env.NODE_ENV": JSON.stringify(mode) }), commonjs(), !dev && terser() diff --git a/src/routes/blog/_posts.js b/src/routes/blog/_posts.js index a2a8903..c0ae3e5 100644 --- a/src/routes/blog/_posts.js +++ b/src/routes/blog/_posts.js @@ -7,86 +7,10 @@ // we don't want to create an `/blog/posts` route — the leading // underscore tells Sapper not to do that. -const posts = [ - { - title: 'What is Sapper?', - slug: 'what-is-sapper', - html: ` -

First, you have to know what Svelte is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the introductory blog post, you should!

+const posts = __ROUTES__; -

Sapper is a Next.js-style framework (more on that here) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:

- - - -

It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.

- ` - }, - - { - title: 'How to use Sapper', - slug: 'how-to-use-sapper', - html: ` -

Step one

-

Create a new project, using degit:

- - 
npx degit "sveltejs/sapper-template#rollup" my-app
-			cd my-app
-			npm install # or yarn!
-			npm run dev
-
- -

Step two

-

Go to localhost:3000. Open my-app in your editor. Edit the files in the src/routes directory or add new ones.

- -

Step three

-

...

- -

Step four

-

Resist overdone joke formats.

- ` - }, - - { - title: 'Why the name?', - slug: 'why-the-name', - html: ` -

In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as sappers.

- -

For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for Svelte app maker, is your courageous and dutiful ally.

- ` - }, - - { - title: 'How is Sapper different from Next.js?', - slug: 'how-is-sapper-different-from-next', - html: ` -

Next.js is a React framework from Zeit, and is the inspiration for Sapper. There are a few notable differences, however:

- - - ` - }, - - { - title: 'How can I get involved?', - slug: 'how-can-i-get-involved', - html: ` -

We're so glad you asked! Come on over to the Svelte and Sapper repos, and join us in the Discord chatroom. Everyone is welcome, especially you!

- ` - } -]; - -posts.forEach(post => { - post.html = post.html.replace(/^\t{3}/gm, ''); -}); +// posts.forEach(post => { +// post.html = post.html.replace(/^\t{3}/gm, ''); +// }); export default posts; diff --git a/src/routes/blog/how-can-i-get-involved.svx b/src/routes/blog/how-can-i-get-involved.svx new file mode 100644 index 0000000..1343a3e --- /dev/null +++ b/src/routes/blog/how-can-i-get-involved.svx @@ -0,0 +1,7 @@ +--- +title: How can I get involved? +slug: how-can-i-get-involved +--- +We're so glad you asked! Come on over to the [Svelte](https://github.com/sveltejs/svelte) and +[Sapper](https://github.com/sveltejs/sapper) repos, and join us in the [Discord chatroom](https://svelte.dev/chat). +Everyone is welcome, especially you! diff --git a/src/routes/blog/how-is-sapper-different-from-next.svx b/src/routes/blog/how-is-sapper-different-from-next.svx new file mode 100644 index 0000000..11487f5 --- /dev/null +++ b/src/routes/blog/how-is-sapper-different-from-next.svx @@ -0,0 +1,12 @@ +--- +title: How is Sapper different from Next.js? +slug: how-is-sapper-different-from-next +--- + +[Next.js](https://github.com/zeit/next.js) is a React framework from [Zeit](https://zeit.co), and is the inspiration +for Sapper. There are a few notable differences, however: + +* It's powered by [Svelte](https://svelte.dev) instead of React, so it's faster and your apps are smaller +* Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is `src/routes/blog/[slug].html` +* As well as pages (Svelte components, which render on server or client), you can create _server routes_ in your `routes` directory. These are just `.js` files that export functions corresponding to HTTP methods, and receive Express `request` and `response` objects as arguments. This makes it very easy to, for example, add a JSON API such as the one [powering this very page](blog/how-is-sapper-different-from-next.json) +* Links are just `` elements, rather than framework-specific `` components. That means, for example, that [this link right here](blog/how-can-i-get-involved), despite being inside a blob of HTML, works with the router as you'd expect. diff --git a/src/routes/blog/how-to-use-sapper.svx b/src/routes/blog/how-to-use-sapper.svx new file mode 100644 index 0000000..a331ab7 --- /dev/null +++ b/src/routes/blog/how-to-use-sapper.svx @@ -0,0 +1,26 @@ +--- +title: How to use Sapper +slug: how-to-use-sapper +--- + +## Step one + +Create a new project, using [degit](https://github.com/Rich-Harris/degit): + +> npx degit "sveltejs/sapper-template#rollup" my-app +> cd my-app +> npm install # or yarn! +> npm run dev + + +## Step two + +Go to [localhost:3000](http://localhost:3000). Open `my-app` in your editor. Edit the files in the `src/routes` directory or add new ones. + +## Step three + +... + +## Step four + +Resist overdone joke formats. diff --git a/src/routes/blog/index.json.js b/src/routes/blog/index.json.js index bfd9389..414699e 100644 --- a/src/routes/blog/index.json.js +++ b/src/routes/blog/index.json.js @@ -2,8 +2,8 @@ import posts from './_posts.js'; const contents = JSON.stringify(posts.map(post => { return { - title: post.title, - slug: post.slug + title: post.data.title, + slug: post.data.slug }; })); @@ -13,4 +13,4 @@ export function get(req, res) { }); res.end(contents); -} \ No newline at end of file +} diff --git a/src/routes/blog/what-is-sapper.svx b/src/routes/blog/what-is-sapper.svx new file mode 100644 index 0000000..ba56fdf --- /dev/null +++ b/src/routes/blog/what-is-sapper.svx @@ -0,0 +1,20 @@ +--- +title: What is Sapper? +slug: what-is-sapper +--- + +First, you have to know what [Svelte](https://svelte.dev) is. Svelte is a UI framework with a bold new idea: rather than +providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your +components into highly optimized vanilla JavaScript. If you haven't already read the +[introductory blog post](https://svelte.dev/blog/frameworks-without-the-framework), you should! + +Sapper is a Next.js-style framework ([more on that here](blog/how-is-sapper-different-from-next)) built around Svelte. +It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get: + +* Code-splitting, dynamic imports and hot module replacement, powered by webpack +* Server-side rendering (SSR) with client-side hydration +* Service worker for offline support, and all the PWA bells and whistles +* The nicest development experience you've ever had, or your money back + +It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete +control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be. diff --git a/src/routes/blog/why-the-name.svx b/src/routes/blog/why-the-name.svx new file mode 100644 index 0000000..563df50 --- /dev/null +++ b/src/routes/blog/why-the-name.svx @@ -0,0 +1,8 @@ +--- +title: Why the name? +slug: why-the-name +--- + +In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as _sappers_. + +For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for **S**velte **app** mak**er**, is your courageous and dutiful ally.