├── .eslintrc.json
├── .gitignore
├── .travis.yml
├── README.md
├── appveyor.yml
├── content
    └── blog
    │   ├── 2016-11-26-frameworks-without-the-framework.md
    │   ├── 2017-08-07-the-easiest-way-to-get-started.md
    │   ├── 2017-09-06-the-zen-of-just-writing-css.md
    │   ├── 2017-12-31-sapper-towards-the-ideal-web-app-framework.md
    │   ├── 2018-04-18-version-2.md
    │   ├── 2018-12-26-svelte-css-in-js.md
    │   └── 2018-12-27-virtual-dom-is-pure-overhead.md
├── cypress.json
├── cypress
    ├── fixtures
    │   └── example.json
    ├── integration
    │   └── spec.js
    ├── plugins
    │   └── index.js
    └── support
    │   ├── commands.js
    │   └── index.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
    ├── client.js
    ├── components
    │   ├── Icon.html
    │   ├── InlineSvg.html
    │   └── TopNav.html
    ├── routes
    │   ├── _error.html
    │   ├── _layout.html
    │   ├── about.html
    │   ├── api
    │   │   └── blog
    │   │   │   ├── [slug].js
    │   │   │   ├── _posts.js
    │   │   │   └── index.js
    │   ├── auth
    │   │   └── me.json.js
    │   ├── blog
    │   │   ├── [slug].html
    │   │   ├── index.html
    │   │   └── rss.xml.js
    │   └── index.html
    ├── server.js
    ├── service-worker.js
    ├── template.html
    ├── user.js
    └── utils
    │   └── _process_markdown.js
└── static
    ├── favicon.ico
    ├── favicon.png
    ├── global.css
    ├── icons
        ├── arrow-right.svg
        ├── check.svg
        ├── chevron.svg
        ├── collapse.svg
        ├── download.svg
        ├── dropdown.svg
        ├── expand.svg
        ├── flip.svg
        ├── fork.svg
        ├── link.svg
        └── save.svg
    ├── manifest.json
    ├── media
        └── rethinking-best-practices.jpg
    └── workers
        ├── bundler.js
        └── compiler.js


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"root": true,
 3 | 	"rules": {
 4 | 		"indent": [2, "tab", { "SwitchCase": 1 }],
 5 | 		"semi": [2, "always"],
 6 | 		"keyword-spacing": [2, { "before": true, "after": true }],
 7 | 		"space-before-blocks": [2, "always"],
 8 | 		"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
 9 | 		"no-cond-assign": 0,
10 | 		"no-unused-vars": 2,
11 | 		"object-shorthand": [2, "always"],
12 | 		"no-const-assign": 2,
13 | 		"no-class-assign": 2,
14 | 		"no-this-before-super": 2,
15 | 		"no-var": 2,
16 | 		"no-unreachable": 2,
17 | 		"valid-typeof": 2,
18 | 		"quote-props": [2, "as-needed"],
19 | 		"one-var": [2, "never"],
20 | 		"prefer-arrow-callback": 2,
21 | 		"prefer-const": [2, { "destructuring": "all" }],
22 | 		"arrow-spacing": 2,
23 | 		"no-inner-declarations": 0
24 | 	},
25 | 	"env": {
26 | 		"es6": true,
27 | 		"browser": true,
28 | 		"node": true,
29 | 		"mocha": true
30 | 	},
31 | 	"extends": [
32 | 		"eslint:recommended",
33 | 		"plugin:import/errors",
34 | 		"plugin:import/warnings"
35 | 	],
36 | 	"plugins": ["svelte3"],
37 | 	"parserOptions": {
38 | 		"ecmaVersion": 8,
39 | 		"sourceType": "module"
40 | 	},
41 | 	"settings": {
42 | 		"import/core-modules": ["svelte"],
43 | 		"svelte3/extensions": [".html"]
44 | 	}
45 | }
46 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | __sapper__
4 | cypress/videos
5 | cypress/screenshots


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 |   - "stable"
 5 | env:
 6 |   global:
 7 |     - BUILD_TIMEOUT=10000
 8 | install:
 9 |   - npm install
10 |   - npm install cypress
11 | 
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-v3-blog
 2 | 
 3 | Based on version of the default [Sapper](https://github.com/sveltejs/sapper) template that uses Rollup instead of webpack. To clone it and get started:
 4 | 
 5 | ```bash
 6 | npx degit sveltejs/sapper-template#rollup my-app
 7 | cd my-app
 8 | npm install # or yarn!
 9 | npm run dev
10 | ```
11 | 
12 | Open up [localhost:3000](http://localhost:3000) and start clicking around.
13 | 
14 | Consult [sapper.svelte.technology](https://sapper.svelte.technology) for help getting started.
15 | 
16 | *[Click here for the webpack version of this template](https://github.com/sveltejs/sapper-template)*
17 | 
18 | ## Svelte Site
19 | 
20 | sveltejs/svelte/site is the second anchestor of this repository.
21 | 
22 | ## Structure
23 | 
24 | Sapper expects to find three directories in the root of your project —  `app`, `assets` and `routes`.
25 | 
26 | 
27 | ### app
28 | 
29 | The [app](app) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file.
30 | 
31 | 
32 | ### assets
33 | 
34 | The [assets](assets) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv).
35 | 
36 | In your [service-worker.js](app/service-worker.js) file, you can import these as `assets` from the generated manifest...
37 | 
38 | ```js
39 | import { assets } from './manifest/service-worker.js';
40 | ```
41 | 
42 | ...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
43 | 
44 | 
45 | ### routes
46 | 
47 | This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
48 | 
49 | **Pages** are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
50 | 
51 | **Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
52 | 
53 | There are three simple rules for naming the files that define your routes:
54 | 
55 | * A file called `routes/about.html` corresponds to the `/about` route. A file called `routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
56 | * The file `routes/index.html` (or `routes/index.js`) corresponds to the root of your app. `routes/about/index.html` is treated the same as `routes/about.html`.
57 | * Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
58 | 
59 | 
60 | ## Rollup config
61 | 
62 | Sapper uses Rollup to provide code-splitting and dynamic imports, as well as compiling your Svelte components. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
63 | 
64 | 
65 | ## Production mode and deployment
66 | 
67 | To start a production version of your app, run `npm run build && npm start`.
68 | 
69 | You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands:
70 | 
71 | ```bash
72 | npm install -g now
73 | now
74 | ```
75 | 
76 | 
77 | ## Bugs and feedback
78 | 
79 | Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).
80 | 


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | version: "{build}"
 2 | 
 3 | shallow_clone: true
 4 | 
 5 | init:
 6 |   - git config --global core.autocrlf false
 7 | 
 8 | build: off
 9 | 
10 | environment:
11 |   matrix:
12 |     # node.js
13 |     - nodejs_version: stable
14 | 
15 | install:
16 |   - ps: Install-Product node $env:nodejs_version
17 |   - npm install cypress
18 |   - npm install
19 | 


--------------------------------------------------------------------------------
/content/blog/2016-11-26-frameworks-without-the-framework.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Frameworks without the framework: why didn't we think of this sooner?
 3 | description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
 4 | pubdate: 2016-11-26
 5 | author: Rich Harris
 6 | authorURL: https://twitter.com/Rich_Harris
 7 | ---
 8 | 
 9 | > Wait, this new framework has a *runtime*? Ugh. Thanks, I'll pass.
10 | > **– front end developers in 2018**
11 | 
12 | We're shipping too much code to our users. Like a lot of front end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use [one less .jpg!](https://twitter.com/miketaylr/status/227056824275333120) – and that what *really* mattered was performance once your app was already interactive.
13 | 
14 | But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
15 | 
16 | If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
17 | 
18 | Perhaps we need to rethink the whole thing.
19 | 
20 | 
21 | ## What problem do frameworks *really* solve?
22 | 
23 | The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks *move the complexity around*, away from code that you had to write and into code you didn't.
24 | 
25 | Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your *concepts*. Frameworks are primarily a tool for structuring your thoughts, not your code.
26 | 
27 | Given that, what if the framework *didn't actually run in the browser*? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser.
28 | 
29 | 
30 | ## Introducing Svelte
31 | 
32 | Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.
33 | 
34 | The [Svelte implementation of TodoMVC](http://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
35 | 
36 | And once your app *is* up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
37 | 
38 | It's basically as fast as vanilla JS, which makes sense because it *is* vanilla JS – just vanilla JS that you didn't have to write.
39 | 
40 | 
41 | ## But that's not the important thing
42 | 
43 | Well, it *is* important – performance matters a great deal. What's really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development.
44 | 
45 | Consider interoperability. Want to `npm install cool-calendar-widget` and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if `cool-calendar-widget` was built in React and you're using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.)
46 | 
47 | Or [code splitting](https://twitter.com/samccone/status/797528710085652480). It's a great idea (only load the code the user needs for the initial view, then get the rest later), but there's a problem – even if you only initially serve one React component instead of 100, *you still have to serve React itself*. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny.
48 | 
49 | Finally, something I've wrestled with a great deal as an open source maintainer: your users always want *their* features prioritised, and underestimate the cost of those features to people who don't need them. A framework author must always balance the long-term health of the project with the desire to meet their users' needs. That's incredibly difficult, because it's hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn't important enough. But with an approach like Svelte's, many features can be added with absolutely no cost to people who don't use them, because the code that implements those features just doesn't get generated by the compiler if it's unnecessary.
50 | 
51 | 
52 | ## We're just getting started
53 | 
54 | Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on.
55 | 
56 | But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development.
57 | 


--------------------------------------------------------------------------------
/content/blog/2017-08-07-the-easiest-way-to-get-started.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: The easiest way to get started with Svelte
 3 | description: This'll only take a minute.
 4 | pubdate: 2017-08-07
 5 | author: Rich Harris
 6 | authorURL: https://twitter.com/Rich_Harris
 7 | ---
 8 | 
 9 | Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `<script src='svelte.js'>` tag on the page, or bringing it into your app with `import` or `require`, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
10 | 
11 | Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
12 | 
13 | 
14 | ## 1. Use the REPL
15 | 
16 | The [Svelte REPL](https://svelte.technology/repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
17 | 
18 | <aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
19 | 
20 | At some point, your app will outgrow the REPL. Click the **download** button to save a `svelte-app.zip` file to your computer and uncompress it.
21 | 
22 | Open a terminal window and set the project up...
23 | 
24 | ```bash
25 | cd /path/to/svelte-app
26 | npm install
27 | ```
28 | 
29 | ...then start up a development server:
30 | 
31 | ```bash
32 | npm run dev
33 | ```
34 | 
35 | This will serve your app on [localhost:5000](http://localhost:5000) and rebuild it with [Rollup](https://rollupjs.org) every time you make a change to the files in `svelte-app/src`.
36 | 
37 | 
38 | ## 2. Use degit
39 | 
40 | When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool.
41 | 
42 | In the terminal, install degit globally (you only need to do this once):
43 | 
44 | ```bash
45 | npm install -g degit
46 | ```
47 | 
48 | After that, you can instantly create a new project like so:
49 | 
50 | ```bash
51 | degit sveltejs/template my-new-project
52 | cd my-new-project
53 | 
54 | npm install
55 | npm run dev
56 | ```
57 | 
58 | Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
59 | 
60 | ```bash
61 | degit your-name/template my-new-project
62 | ```
63 | 
64 | And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Now](https://zeit.co/now) or [Surge](http://surge.sh/).
65 | 
66 | You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) or the [API](https://github.com/sveltejs/svelte#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://discord.gg/yy75DKs), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!


--------------------------------------------------------------------------------
/content/blog/2017-09-06-the-zen-of-just-writing-css.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: The zen of Just Writing CSS
 3 | description: I would say this is the future, but we're already doing it.
 4 | pubdate: 2017-09-06
 5 | author: Rich Harris
 6 | authorURL: https://twitter.com/Rich_Harris
 7 | ---
 8 | 
 9 | It's fashionable to dislike CSS. There are lots of reasons why that's the case, but it boils down to this: CSS is *unpredictable*. If you've never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you're trying to ship — then you're either new at this or you're a much better programmer than the rest of us.
10 | 
11 | So the JavaScript community rolled up its sleeves and got to work. Over the last couple of years, there's been a Cambrian explosion of libraries aimed at making CSS behave, collectively referred to as *CSS-in-JS*.
12 | 
13 | What you might not realise is that **the biggest problems with CSS can be solved without CSS-in-JS**. Without those problems, writing CSS isn't just tolerable — it's enjoyable. And you don't have to find solutions to the additional problems that CSS-in-JS introduces.
14 | 
15 | This article isn't in any way intended as criticism of the hard work the CSS-in-JS community has done. It's one of the most active corners of the JS ecosystem, and new ideas are springing up every week. Instead, my purpose is to illustrate why an alternative approach — based on Single File Components with real CSS — is so damn delightful.
16 | 
17 | 
18 | ## The biggest problem with CSS
19 | 
20 | Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of *that*, developers often resort to wild namespacing conventions (not 'rules', since they're very difficult to enforce) that mostly just increase your risk of RSI.
21 | 
22 | It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
23 | 
24 | The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
25 | 
26 | 
27 | ## Single File Components change all that
28 | 
29 | The idea behind SFCs is simple: you write your components in an HTML file that (optionally) contains a `<style>` and `<script>` attribute describing the component's styles and behaviour. Svelte, Ractive, Vue and Polymer all follow this basic pattern.
30 | 
31 | <aside>
32 | 	<p><a href="https://svelte.technology/blog/frameworks-without-the-framework">Read the introductory blog post</a> if you're new to Svelte. Or <a href="https://twitter.com/padolsey/status/899717303234908160">read</a> <a href="https://twitter.com/sveltejs/status/901818357644701696">the</a> <a href="https://twitter.com/sveltejs/status/901818106309476352">testimonials</a>.</p>
33 | </aside>
34 | 
35 | (For the rest of this article we'll be using Svelte, obviously. But if the idea of using a template language makes you shudder — your fears are misplaced, but that's a topic for another day — then just use Vue which lets you use JSX in your SFCs.)
36 | 
37 | Several wonderful things happen as a result:
38 | 
39 | * Your styles are *scoped to the component*. No more leakage, no more unpredictable cascade. And no more sesquipedalian classnames designed to prevent conflicts.
40 | * You don't need to go spelunking through your folder structure to find the rules that are breaking your stuff.
41 | * The compiler (in Svelte's case) can **identify and remove unused styles**. No more append-only stylesheets!
42 | 
43 | Let's see what that looks like in practice.
44 | 
45 | <figure>
46 | 	<video controls poster='https://svelte-technology-assets.surge.sh/just-write-css.jpg'>
47 | 		<source type='video/mp4' src='https://svelte-technology-assets.surge.sh/just-write-css.mp4'>
48 | 	</video>
49 | 
50 | 	<figcaption>
51 | 		Is this what they mean by 'use the platform'?
52 | 	</figcaption>
53 | </figure>
54 | 
55 | Every code editor already knows about CSS, so there's a good chance that you'll get autocomplete, linting, syntax highlighting and so on — all without additional JS-fatigue-inducing tools.
56 | 
57 | And because it's real CSS, rather than some camelCased quotes-everywhere impostor, we can take advantage of the 'tweak in devtools, paste back into our source code' workflow, which I personally couldn't live without. Notice that we get CSS sourcemaps out of the box, so you can instantly pinpoint the lines in question. It's hard to overstate the importance of this: when you're in WYSIWYG mode, you're not thinking in terms of your component tree, so having a robust way to figure out *where these damn styles came from* is essential. Doubly so if someone else originally wrote the component. (I promise you, this is the single biggest productivity boost to your CSS workflow. If you're writing styles without sourcemaps, you are almost certainly wasting a lot of time. I know I was.)
58 | 
59 | Svelte transforms your selectors (using an attribute that's also applied to affected elements, though the exact mechanism is unimportant and subject to change) to achieve the scoping. It warns on and removes any unused rules, then it minifies the result and lets you write it out to a `.css` file. There's also an experimental new option to compile to web components, using shadow DOM to encapsulate the styles, if that's your jam.
60 | 
61 | This is all possible because your CSS is parsed (with [css-tree](https://github.com/csstree/csstree)) and statically analysed in the context of your markup. Static analysis opens the doors to all kinds of exciting future possibilities — smarter optimisations, a11y hints — that are much harder if your styles are computed dynamically at runtime. We're just getting started.
62 | 
63 | 
64 | ## But we can add tools to do [x]!
65 | 
66 | If your reaction to the video was 'fine, but if we use TypeScript and write plugins for each editor then we can get all the autocomplete and syntax highlighting stuff' — in other words, if you believe that in order to achieve parity with CSS it makes sense to build, document, promote and maintain a fleet of ancillary projects — then, well, you and I may never see eye to eye!
67 | 
68 | 
69 | ## We don't have all the answers — yet
70 | 
71 | Having said all that, CSS-in-JS does point to answers to some lingering questions:
72 | 
73 | * How can we install styles from npm?
74 | * How can we reuse constants that are defined in a single place?
75 | * How can we compose declarations?
76 | 
77 | Personally, I haven't found these issues to outweigh the benefits of the approach outlined above. You may well have a different set of priorities, and they may be reason enough for you to abandon CSS.
78 | 
79 | But at the end of the day, you have to know CSS anyway. Love it or loathe it, you must at least *learn* it. As custodians of the web, we have a choice: create abstractions that steepen the web dev learning curve yet further, or work together to fix the bad parts of CSS. I know which I choose.
80 | 


--------------------------------------------------------------------------------
/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Sapper: Towards the ideal web app framework
 3 | description: Taking the next-plus-one step
 4 | pubdate: 2017-12-31
 5 | author: Rich Harris
 6 | authorURL: https://twitter.com/Rich_Harris
 7 | ---
 8 | 
 9 | > Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.technology), and the [starter template](https://github.com/sveltejs/sapper-template)
10 | 
11 | If you had to list the characteristics of the perfect Node.js web application framework, you'd probably come up with something like this:
12 | 
13 | 1. It should do server-side rendering, for fast initial loads and no caveats around SEO
14 | 2. As a corollary, your app's codebase should be universal — write once for server *and* client
15 | 3. The client-side app should *hydrate* the server-rendered HTML, attaching event listeners (and so on) to existing elements rather than re-rendering them
16 | 4. Navigating to subsequent pages should be instantaneous
17 | 5. Offline, and other Progressive Web App characteristics, must be supported out of the box
18 | 6. Only the JavaScript and CSS required for the first page should load initially. That means the framework should do automatic code-splitting at the route level, and support dynamic `import(...)` for more granular manual control
19 | 7. No compromise on performance
20 | 8. First-rate developer experience, with hot module reloading and all the trimmings
21 | 9. The resulting codebase should be easy to grok and maintain
22 | 10. It should be possible to understand and customise every aspect of the system — no webpack configs locked up in the framework, and as little hidden 'plumbing' as possible
23 | 11. Learning the entire framework in under an hour should be easy, and not just for experienced developers
24 | 
25 | [Next.js](https://github.com/zeit/next.js) is close to this ideal. If you haven't encountered it yet, I strongly recommend going through the tutorials at [learnnextjs.com](https://learnnextjs.com). Next introduced a brilliant idea: all the pages of your app are files in a `your-project/pages` directory, and each of those files is just a React component.
26 | 
27 | Everything else flows from that breakthrough design decision. Finding the code responsible for a given page is easy, because you can just look at the filesystem rather than playing 'guess the component name'. Project structure bikeshedding is a thing of the past. And the combination of SSR (server-side rendering) and code-splitting — something the React Router team [gave up on](https://reacttraining.com/react-router/web/guides/code-splitting), declaring 'Godspeed those who attempt the server-rendered, code-split apps' — is trivial.
28 | 
29 | But it's not perfect. As churlish as it might be to list the flaws in something *so, so good*, there are some:
30 | 
31 | * Next uses something called 'route masking' to create nice URLs (e.g. `/blog/hello-world` instead of `/post?slug=hello-world`). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms
32 | * All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an [API endpoint](/api/blog/sapper-towards-the-ideal-web-app-framework) that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your `server.js` file to handle these cases, but it feels at odds with the declarative approach taken for pages
33 | * To use the client-side router, links can't be standard `<a>` tags. Instead, you have to use framework-specific `<Link>` components, which is impossible in the markdown content for a blog post such as this one, for example
34 | 
35 | The real problem, though, is that all that goodness comes for a price. The simplest possible Next app — a single 'hello world' page that renders some static text — involves 66kb of gzipped JavaScript. Unzipped, it's 204kb, which is a non-trivial amount of code for a mobile device to parse at a time when performance is a critical factor determining whether or not your users will stick around. And that's the *baseline*.
36 | 
37 | We can do better!
38 | 
39 | 
40 | ## The compiler-as-framework paradigm shift
41 | 
42 | [Svelte introduced a radical idea](https://svelte.technology/blog/frameworks-without-the-framework): what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.
43 | 
44 | The JavaScript world is [moving towards this model](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/). [Stencil](https://stenciljs.com), a Svelte-inspired framework from the Ionic team, compiles to web components. [Glimmer](https://glimmerjs.com) *doesn't* compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is [getting in on the action](https://twitter.com/trueadm/status/944908776896978946), though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)
45 | 
46 | What happens if we use the new model as a starting point?
47 | 
48 | 
49 | ## Introducing Sapper
50 | 
51 | <aside><p>The <a href="https://sapper.svelte.technology/guide#why-the-name-">name comes from</a> the term for combat engineers, and is also short for Svelte app maker</p></aside>
52 | 
53 | [Sapper](https://sapper.svelte.technology) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise.
54 | 
55 | The same 'hello world' app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript *at all* for pages that aren't interactive, beyond the tiny Sapper runtime that handles client-side routing.
56 | 
57 | What about a more 'real world' example? Conveniently, the [RealWorld](https://github.com/gothinkster/realworld) project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The [Sapper implementation](http://svelte-realworld.now.sh/) takes 39.6kb (11.8kb zipped) to render an interactive homepage.
58 | 
59 | <aside><p>Code-splitting isn't free — if the reference implementation used code-splitting, it would be larger still</p></aside>
60 | 
61 | The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if was as large it would *feel* faster because of code-splitting. And that's a crucial point. We're told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there's a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that's no longer the case.
62 | 
63 | But size is only part of the story. Svelte apps are also extremely performant and memory-efficient, and the framework includes powerful features that you would sacrifice if you chose a 'minimal' or 'simple' UI library.
64 | 
65 | 
66 | ## Trade-offs
67 | 
68 | The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair.
69 | 
70 | If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://svelte.technology/guide#template-syntax)). You get [scoped CSS](the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://svelte.technology/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated!
71 | 
72 | But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those.
73 | 
74 | And then there's *ecosystem*. The universe around React in particular — the devtools, editor integrations, ancillary libraries, tutorials, StackOverflow answers, hell, even job opportunities — is unrivalled. While it's true that citing 'ecosystem' as the main reason to choose a tool is a sign that you're stuck on a local maximum, apt to be marooned by the rising waters of progress, it's still a major point in favour of incumbents.
75 | 
76 | 
77 | ## Roadmap
78 | 
79 | We're not at version 1.0.0 yet, and a few things may change before we get there. Once we do (soon!), there are a lot of exciting possibilities.
80 | 
81 | I believe the next frontier of web performance is 'whole-app optimisation'. Currently, Svelte's compiler operates at the component level, but a compiler that understood the boundaries *between* those components could generate even more efficient code. The React team's [Prepack research](https://twitter.com/trueadm/status/944908776896978946) is predicated on a similar idea, and the Glimmer team is doing some interesting work in this space. Svelte and Sapper are well positioned to take advantage of these ideas.
82 | 
83 | Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.
84 | 
85 | Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Gitter](https://gitter.im/sveltejs/svelte).


--------------------------------------------------------------------------------
/content/blog/2018-04-18-version-2.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Svelte v2 is out!
  3 | description: Here's what you need to know
  4 | pubdate: 2018-04-18
  5 | author: Rich Harris
  6 | authorURL: https://twitter.com/Rich_Harris
  7 | ---
  8 | 
  9 | <aside>Our motto is 'move slowly and break things'. No, wait, that came out wrong...</aside>
 10 | 
 11 | Almost a year after we first started talking about version 2 on the Svelte issue tracker, it's finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.
 12 | 
 13 | 
 14 | ## tl;dr
 15 | 
 16 | Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Gitter chatroom](https://gitter.im/sveltejs/svelte).
 17 | 
 18 | - Install Svelte v2 from npm
 19 | - Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade)
 20 | - Remove calls to `component.observe`, or add the `observe` method from [svelte-extras](https://github.com/sveltejs/svelte-extras)
 21 | - Rewrite calls to `component.get('foo')` as `component.get().foo`
 22 | - Return `destroy` from your custom event handlers, rather than `teardown`
 23 | - Make sure you're not passing numeric string props to components
 24 | 
 25 | 
 26 | ## New template syntax
 27 | 
 28 | The most visible change: we've made some improvements to the template syntax.
 29 | 
 30 | A common piece of feedback we heard was 'ewww, Mustache' or 'ewww, Handlebars'. A lot of people who used string-based templating systems in a previous era of web development *really* dislike them. Because Svelte adopted the `{{curlies}}` from those languages, a lot of people assumed that we somehow shared the limitations of those tools, such as weird scoping rules or an inability to use arbitrary JavaScript expressions.
 31 | 
 32 | <aside>If you need to show an actual `{` character, it's as easy as `&amp;#123;`</aside>
 33 | 
 34 | Beyond that, JSX proved that double curlies are unnecessary. So we've made our templates more... svelte, by adopting single curlies. The result feels much lighter to look at and is more pleasant to type:
 35 | 
 36 | ```html
 37 | <h1>Hello {name}!</h1>
 38 | ```
 39 | 
 40 | There are a few other updates. But you don't need to make them manually — just run [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) on your codebase:
 41 | 
 42 | ```bash
 43 | npx svelte-upgrade v2 src
 44 | ```
 45 | 
 46 | This assumes any `.html` files in `src` are Svelte components. You can specify whichever directory you like, or target a different directory — for example, you'd do `npx svelte-upgrade v2 routes` to update a [Sapper](https://sapper.svelte.technology) app.
 47 | 
 48 | To see the full set of changes, consult the [svelte-upgrade README](https://github.com/sveltejs/svelte-upgrade#svelte-v2-syntax-changes).
 49 | 
 50 | 
 51 | ## Computed properties
 52 | 
 53 | Another thing that people often found confusing about Svelte is the way computed properties work. To recap, if you had a component with this...
 54 | 
 55 | ```js
 56 | export default {
 57 | 	computed: {
 58 | 		d: (a, b, c) => a = b + c
 59 | 	}
 60 | };
 61 | ```
 62 | 
 63 | ...then Svelte would first look at the function arguments to see which values `d` depended on, and then it would write code that updated `d` whenever those values changed, by injecting them into the function. That's cool, because it allows you to derive complex values from your component's inputs without worrying about when they need to recomputed, but it's also... *weird*. JavaScript doesn't work that way!
 64 | 
 65 | In v2, we use [destructuring](http://www.jstips.co/en/javascript/use-destructuring-in-function-parameters/) instead:
 66 | 
 67 | ```js
 68 | export default {
 69 | 	computed: {
 70 | 		d: ({ a, b, c }) => a = b + c
 71 | 	}
 72 | };
 73 | ```
 74 | 
 75 | The Svelte compiler can still see which values `d` depends on, but it's no longer injecting values — it just passes the component state object into each computed property.
 76 | 
 77 | Again, you don't need to make this change manually — just run svelte-upgrade on your components, as shown above.
 78 | 
 79 | 
 80 | ## Sorry, IE11. It's not you, it's... well actually, yeah. It's you
 81 | 
 82 | Svelte v1 was careful to only emit ES5 code, so that you wouldn't be forced to faff around with transpilers in order to use it. But it's 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.
 83 | 
 84 | If you need to support IE11 and friends, you will need to use a transpiler like [Babel](http://babeljs.io/repl) or [Bublé](http://buble.surge.sh/).
 85 | 
 86 | 
 87 | ## New lifecycle hooks
 88 | 
 89 | In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](guide#lifecycle-hooks) for responding to state changes:
 90 | 
 91 | ```js
 92 | export default {
 93 | 	onstate({ changed, current, previous }) {
 94 | 		// this fires before oncreate, and
 95 | 		// whenever state changes
 96 | 	},
 97 | 
 98 | 	onupdate({ changed, current, previous }) {
 99 | 		// this fires after oncreate, and
100 | 		// whenever the DOM has been updated
101 | 		// following a state change
102 | 	}
103 | };
104 | ```
105 | 
106 | You can also listen to those events programmatically:
107 | 
108 | ```js
109 | component.on('state', ({ changed, current, previous }) => {
110 | 	// ...
111 | });
112 | ```
113 | 
114 | 
115 | ## component.observe
116 | 
117 | With the new lifecycle hooks, we no longer need the `component.observe(...)` method:
118 | 
119 | ```js
120 | // before
121 | export default {
122 | 	oncreate() {
123 | 		this.observe('foo', foo => {
124 | 			console.log(`foo is now ${foo}`);
125 | 		});
126 | 	}
127 | };
128 | 
129 | // after
130 | export default {
131 | 	onstate({ changed, current }) {
132 | 		if (changed.foo) {
133 | 			console.log(`foo is now ${current.foo}`);
134 | 		}
135 | 	}
136 | };
137 | ```
138 | 
139 | This shrinks the amount of code Svelte needs to generate, and gives you more flexibility. For example, it's now very easy to take action when any one of *several* properties have changed, such as redrawing a canvas without debouncing several observers.
140 | 
141 | However, if you prefer to use `component.observe(...)`, then you can install it from [svelte-extras](https://github.com/sveltejs/svelte-extras):
142 | 
143 | ```js
144 | import { observe } from 'svelte-extras';
145 | 
146 | export default {
147 | 	methods: {
148 | 		observe
149 | 	}
150 | };
151 | ```
152 | 
153 | 
154 | ## component.get
155 | 
156 | This method no longer takes an optional `key` argument — instead, it always returns the entire state object:
157 | 
158 | ```js
159 | // before
160 | const foo = this.get('foo');
161 | const bar = this.get('bar');
162 | 
163 | // after
164 | const { foo, bar } = this.get();
165 | ```
166 | 
167 | This change might seem annoying initially, but it's the right move: among other things, it's likely to play better with type systems as we explore that space more fully in future.
168 | 
169 | 
170 | ## event_handler.destroy
171 | 
172 | If your app has [custom event handlers](guide#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API).
173 | 
174 | 
175 | ## No more type coercion
176 | 
177 | Previously, numeric values passed to components were treated as numbers:
178 | 
179 | ```html
180 | <Counter start='1'/>
181 | ```
182 | 
183 | That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:
184 | 
185 | ```html
186 | <Counter start={1}/>
187 | ```
188 | 
189 | 
190 | ## Compiler changes
191 | 
192 | In most cases you'll never need to deal with the compiler directly, so this shouldn't require any action on your part. It's worth noting anyway: the compiler API has changed. Instead of an object with a mish-mash of properties, the compiler now returns `js`, `css`, `ast` and `stats`:
193 | 
194 | ```js
195 | const { js, css, ast, stats } = svelte.compile(source, options);
196 | ```
197 | 
198 | `js` and `css` are both `{ code, map }` objects, where `code` is a string and `map` is a sourcemap. The `ast` is an abstract syntax tree of your component, and the `stats` object contains metadata about the component, and information about the compilation.
199 | 
200 | Before, there was a `svelte.validate` method which checked your component was valid. That's been removed — if you want to check a component without actually compiling it, just pass the `generate: false` option.
201 | 
202 | 
203 | ## My app is broken! Help!
204 | 
205 | Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Gitter](https://gitter.im/sveltejs/svelte) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).


--------------------------------------------------------------------------------
/content/blog/2018-12-26-svelte-css-in-js.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Using CSS-in-JS with Svelte
 3 | description: You don't need to, but you can
 4 | pubdate: 2018-12-26
 5 | author: Rich Harris
 6 | authorURL: https://twitter.com/Rich_Harris
 7 | ---
 8 | 
 9 | CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished.
10 | 
11 | That's why Svelte allows you to add CSS in a component's `<style>` tag. Co-locating your CSS with your markup means we can [solve the biggest problems developers face when writing CSS](/blog/the-zen-of-just-writing-css) without introducing new ones, all while providing a rather nice development experience.
12 | 
13 | But Svelte's style handling does have some limitations. It's too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.
14 | 
15 | 
16 | ## For example
17 | 
18 | Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components:
19 | 
20 | <iframe
21 | 	title="Aphrodite example"
22 | 	src="/repl/embed?gist=ad495ff5ba9ceefe5984fe62c1f15e19"
23 | 	scrolling="no"
24 | ></iframe>
25 | 
26 | It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!
27 | 
28 | Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.
29 | 
30 | 


--------------------------------------------------------------------------------
/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Virtual DOM is pure overhead
  3 | description: Let's retire the 'virtual DOM is fast' myth once and for all
  4 | pubdate: 2018-12-27
  5 | author: Rich Harris
  6 | authorURL: https://twitter.com/Rich_Harris
  7 | ---
  8 | 
  9 | If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the *real* DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a virtual DOM.
 10 | 
 11 | It's time to take a closer look.
 12 | 
 13 | 
 14 | ## What is the virtual DOM?
 15 | 
 16 | In many frameworks, you build an app by creating `render()` functions, like this simple [React](https://reactjs.org/) component:
 17 | 
 18 | ```js
 19 | function HelloMessage(props) {
 20 | 	return (
 21 | 		<div className="greeting">
 22 | 			Hello {props.name}
 23 | 		</div>
 24 | 	);
 25 | }
 26 | ```
 27 | 
 28 | You can do the same thing without JSX...
 29 | 
 30 | ```js
 31 | function HelloMessage(props) {
 32 | 	return React.createElement(
 33 | 		'div',
 34 | 		{ className: 'greeting' },
 35 | 		'Hello ',
 36 | 		props.name
 37 | 	);
 38 | }
 39 | ```
 40 | 
 41 | ...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app's state updates (for example when the `name` prop changes), you create a new one. The framework's job is to *reconcile* the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.
 42 | 
 43 | 
 44 | ## How did the meme start?
 45 | 
 46 | Misunderstood claims about virtual DOM performance date back to the launch of React. In [Rethinking Best Practices](https://www.youtube.com/watch?v=x7cQ3mrcKaY), a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:
 47 | 
 48 | > This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames.
 49 | 
 50 | <figure>
 51 | 	<img alt="Pete Hunt at JSConfEU 2013" src="media/rethinking-best-practices.jpg">
 52 | 	<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
 53 | </figure>
 54 | 
 55 | But hang on a minute! The virtual DOM operations are *in addition to* the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:
 56 | 
 57 | ```js
 58 | onEveryStateChange(() => {
 59 | 	document.body.innerHTML = renderMyApp();
 60 | });
 61 | ```
 62 | 
 63 | Pete clarifies soon after...
 64 | 
 65 | > React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don't have to worry...about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.
 66 | 
 67 | ...but that's not the part that stuck.
 68 | 
 69 | 
 70 | 
 71 | ## So... is the virtual DOM *slow*?
 72 | 
 73 | Not exactly. It's more like 'the virtual DOM is usually fast enough', but with certain caveats.
 74 | 
 75 | The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don't think that's turned out to be accurate. If it was, there'd be no need for optimisations like `shouldComponentUpdate` (which is a way of telling React when it can safely skip a component).
 76 | 
 77 | Even with `shouldComponentUpdate`, updating your entire app's virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don't block the main thread for long periods of time, though it doesn't reduce the total amount of work or the time an update takes.
 78 | 
 79 | 
 80 | ## Where does the overhead come from?
 81 | 
 82 | Most obviously, [diffing isn't free](https://twitter.com/pcwalton/status/1015694528857047040). You can't apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier `HelloMessage` example, suppose the `name` prop changed from 'world' to 'everybody'.
 83 | 
 84 | 1. Both snapshots contain a single element. In both cases it's a `<div>`, which means we can keep the same DOM node
 85 | 2. We enumerate all the attributes on the old `<div>` and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a `className` with a value of `"greeting"`
 86 | 3. Descending into the element, we see that the text has changed, so we'll need to update the real DOM
 87 | 
 88 | Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:
 89 | 
 90 | ```js
 91 | if (changed.name) {
 92 | 	text.data = name;
 93 | }
 94 | ```
 95 | 
 96 | (This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at *build time* how things could change in your app, rather than waiting to do the work at *run time*.)
 97 | 
 98 | 
 99 | ## It's not just the diffing though
100 | 
101 | The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn't write code like this...
102 | 
103 | ```js
104 | function StrawManComponent(props) {
105 | 	const value = expensivelyCalculateValue(props.foo);
106 | 
107 | 	return (
108 | 		<p>the value is {value}</p>
109 | 	);
110 | }
111 | ```
112 | 
113 | ...because you'd be carelessly recalculating `value` on every update, regardless of whether `props.foo` had changed. But it's extremely common to do unnecessary computation and allocation in ways that seem much more benign:
114 | 
115 | ```js
116 | function MoreRealisticComponent(props) {
117 | 	const [selected, setSelected] = useState(null);
118 | 
119 | 	return (
120 | 		<div>
121 | 			<p>Selected {selected ? selected.name : 'nothing'}</p>
122 | 
123 | 			<ul>
124 | 				${props.items.map(item =>
125 | 					<li>
126 | 						<button onClick={() => setSelected(item)}>
127 | 							{item.name}
128 | 						</button>
129 | 					</li>
130 | 				)}
131 | 			</ul>
132 | 		</div>
133 | 	);
134 | }
135 | ```
136 | 
137 | Here, we're generating a new array of virtual `<li>` elements — each with their own inline event handler — on every state change, regardless of whether `props.items` has changed. Unless you're unhealthily obsessed with performance, you're not going to optimise that. There's no point. It's plenty fast enough. But you know what would be even faster? *Not doing that.*
138 | 
139 | <aside><p><a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a> doubles down on defaulting to doing unnecessary work, with <a href="https://twitter.com/thekitze/status/1078582382201131008">predictable results</a>.</p></aside>
140 | 
141 | The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to 'death by a thousand cuts' with no clear bottleneck to aim at once it's time to optimise.
142 | 
143 | Svelte is explicitly designed to prevent you from ending up in that situation.
144 | 
145 | 
146 | ## Why do frameworks use the virtual DOM then?
147 | 
148 | It's important to understand that virtual DOM *isn't a feature*. It's a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is *generally good enough*. That means less buggy code, and more time spent on creative tasks instead of tedious ones.
149 | 
150 | But it turns out that we can achieve a similar programming model without using virtual DOM — and that's where Svelte comes in.


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"baseUrl": "http://localhost:3000",
3 | 	"video": false
4 | }


--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }


--------------------------------------------------------------------------------
/cypress/integration/spec.js:
--------------------------------------------------------------------------------
 1 | describe('Sapper template app', () => {
 2 | 	beforeEach(() => {
 3 | 		cy.visit('/')
 4 | 	});
 5 | 
 6 | 	it('has the correct <h1>', () => {
 7 | 		cy.contains('h1', 'Great success!')
 8 | 	});
 9 | 
10 | 	it('navigates to /about', () => {
11 | 		cy.get('nav a').contains('about').click();
12 | 		cy.url().should('include', '/about');
13 | 	});
14 | 
15 | 	it('navigates to /blog', () => {
16 | 		cy.get('nav a').contains('blog').click();
17 | 		cy.url().should('include', '/blog');
18 | 	});
19 | });


--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example plugins/index.js can be used to load plugins
 3 | //
 4 | // You can change the location of this file or turn off loading
 5 | // the plugins file with the 'pluginsFile' configuration option.
 6 | //
 7 | // You can read more here:
 8 | // https://on.cypress.io/plugins-guide
 9 | // ***********************************************************
10 | 
11 | // This function is called when a project is opened or re-opened (e.g. due to
12 | // the project's config changing)
13 | 
14 | module.exports = (on, config) => {
15 |   // `on` is used to hook into various events Cypress emits
16 |   // `config` is the resolved Cypress config
17 | }
18 | 


--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-3-blog",
 3 |   "description": "this is a simple svelte v3 boilerplate",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "sapper dev",
 7 |     "build": "sapper build",
 8 |     "export": "sapper export",
 9 |     "start": "node __sapper__/build",
10 |     "cy:run": "cypress run",
11 |     "cy:open": "cypress open",
12 |     "test": "run-p --race dev cy:run"
13 |   },
14 |   "dependencies": {
15 |     "compression": "^1.7.3",
16 |     "devalue": "^1.1.0",
17 |     "do-not-zip": "^1.0.0",
18 |     "dotenv": "^6.2.0",
19 |     "express": "^4.16.4",
20 |     "express-session": "^1.15.6",
21 |     "golden-fleece": "^1.0.9",
22 |     "locate-character": "^2.0.5",
23 |     "marked": "^0.6.0",
24 |     "node-fetch": "^2.3.0",
25 |     "passport": "^0.4.0",
26 |     "passport-github": "^1.1.0",
27 |     "session-file-store": "^1.2.0",
28 |     "sirv": "^0.2.2"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.2.2",
32 |     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
33 |     "@babel/plugin-transform-runtime": "^7.2.0",
34 |     "@babel/preset-env": "^7.2.3",
35 |     "@babel/runtime": "^7.2.0",
36 |     "chokidar": "^2.0.4",
37 |     "eslint-plugin-svelte3": "sveltejs/eslint-plugin-svelte3.git#semver:*",
38 |     "npm-run-all": "^4.1.5",
39 |     "rollup": "^1.1.0",
40 |     "rollup-plugin-babel": "^4.2.0",
41 |     "rollup-plugin-commonjs": "^9.2.0",
42 |     "rollup-plugin-json": "^3.1.0",
43 |     "rollup-plugin-node-resolve": "^4.0.0",
44 |     "rollup-plugin-replace": "^2.1.0",
45 |     "rollup-plugin-svelte": "^5.0.1",
46 |     "rollup-plugin-terser": "^4.0.2",
47 |     "sapper": "sveltejs/sapper#svelte-3",
48 |     "svelte": "sveltejs/svelte#master"
49 |   },
50 |   "website": {
51 |     "title": "Blog",
52 |     "description": "A blog whatever about",
53 |     "url": "https://customdomain.blog"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import replace from 'rollup-plugin-replace';
 4 | import commonjs from 'rollup-plugin-commonjs';
 5 | import svelte from 'rollup-plugin-svelte';
 6 | import babel from 'rollup-plugin-babel';
 7 | import { terser } from 'rollup-plugin-terser';
 8 | import json from 'rollup-plugin-json';
 9 | import config from 'sapper/config/rollup.js';
10 | import pkg from './package.json';
11 | 
12 | const mode = process.env.NODE_ENV;
13 | const dev = mode === 'development';
14 | const legacy = !!process.env.SAPPER_LEGACY_BUILD;
15 | 
16 | export default {
17 | 	client: {
18 | 		input: config.client.input(),
19 | 		output: config.client.output(),
20 | 		plugins: [
21 | 			replace({
22 | 				'process.browser': true,
23 | 				'process.env.NODE_ENV': JSON.stringify(mode)
24 | 			}),
25 | 			svelte({
26 | 				dev,
27 | 				hydratable: true,
28 | 				emitCss: true
29 | 			}),
30 | 			resolve(),
31 | 			commonjs(),
32 | 			json(),
33 | 
34 | 			legacy && babel({
35 | 				extensions: ['.js', '.html'],
36 | 				runtimeHelpers: true,
37 | 				exclude: ['node_modules/@babel/**'],
38 | 				presets: [
39 | 					['@babel/preset-env', {
40 | 						targets: '> 0.25%, not dead'
41 | 					}]
42 | 				],
43 | 				plugins: [
44 | 					'@babel/plugin-syntax-dynamic-import',
45 | 					['@babel/plugin-transform-runtime', {
46 | 						useESModules: true
47 | 					}]
48 | 				]
49 | 			}),
50 | 
51 | 			!dev && terser({
52 | 				module: true
53 | 			})
54 | 		],
55 | 	},
56 | 
57 | 	server: {
58 | 		input: config.server.input(),
59 | 		output: config.server.output(),
60 | 		plugins: [
61 | 			replace({
62 | 				'process.browser': false,
63 | 				'process.env.NODE_ENV': JSON.stringify(mode)
64 | 			}),
65 | 			svelte({
66 | 				generate: 'ssr',
67 | 				dev
68 | 			}),
69 | 			resolve(),
70 | 			commonjs(),
71 | 			json()
72 | 		],
73 | 		external: Object.keys(pkg.dependencies).concat(
74 | 			require('module').builtinModules || Object.keys(process.binding('natives'))
75 | 		),
76 | 	},
77 | 
78 | 	serviceworker: {
79 | 		input: config.serviceworker.input(),
80 | 		output: config.serviceworker.output(),
81 | 		plugins: [
82 | 			resolve(),
83 | 			replace({
84 | 				'process.browser': true,
85 | 				'process.env.NODE_ENV': JSON.stringify(mode)
86 | 			}),
87 | 			commonjs(),
88 | 			!dev && terser(),
89 | 			// json()
90 | 		]
91 | 	}
92 | };


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | import * as sapper from '../__sapper__/client.js'
2 | 
3 | sapper.start({
4 | 	target: document.querySelector('#sapper')
5 | });


--------------------------------------------------------------------------------
/src/components/Icon.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | -----------------------------------------------
 3 | 	svg icon
 4 | 	- https://github.com/jacobmischka/svelte-feather-icon
 5 | 	- https://feathericons.com/
 6 | -----------------------------------------------
 7 | -->
 8 | 
 9 | <script>
10 | 	export let clas = '';
11 | 	export let name;
12 | 	export let size = 20;
13 | </script>
14 | 
15 | <!-- style="--color: {color ? color : 'currentColor'}" -->
16 | <svg class="{'icon ' + clas}" width={size} height={size}>
17 | 	<use xlink:href='#{name}' />
18 | </svg>
19 | 
20 | <style>
21 | 	.icon {
22 | 		position: relative;
23 | 		/* width: 1.2em;
24 | 		height: 1.2em;
25 | 		top: -0.123em; */
26 | 		overflow: hidden;
27 | 		vertical-align: middle;
28 | 		-o-object-fit: contain;
29 | 		object-fit: contain;
30 | 		-webkit-transform-origin: center center;
31 | 		transform-origin: center center;
32 | 
33 | 		stroke: currentColor;
34 | 		stroke-width: 2;
35 | 		stroke-linecap: round;
36 | 		stroke-linejoin: round;
37 | 		fill: none;
38 | 	}
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/InlineSvg.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | -----------------------------------------------
  3 | 	inline-svg sprite
  4 | 	- common used svg-stuff (feather-icons)
  5 | 	- advantage of css-styling
  6 | 	- https://github.com/jacobmischka/svelte-feather-icon
  7 | 	- https://feathericons.com/
  8 | 	- if requred we can split out app-controls to REPL only
  9 | -----------------------------------------------
 10 | -->
 11 | 
 12 | <svg style='display:none'>
 13 | 	<symbol id='arrow-left' class='icon' viewBox='0 0 24 24'>
 14 | 		<line x1='19' y1='12' x2='5' y2='12' />
 15 | 		<polyline points='12 19 5 12 12 5' />
 16 | 	</symbol>
 17 | 
 18 | 	<symbol id='arrow-right' class='icon' viewBox='0 0 24 24'>
 19 | 		<line x1='5' y1='12' x2='19' y2='12' />
 20 | 		<polyline points='12 5 19 12 12 19' />
 21 | 	</symbol>
 22 | 
 23 | 	<symbol id='arrow-up' class='icon' viewBox='0 0 24 24'>
 24 | 		<line x1='12' y1='19' x2='12' y2='5' />
 25 | 		<polyline points='5 12 12 5 19 12' />
 26 | 	</symbol>
 27 | 
 28 | 	<symbol id='arrow-down' class='icon' viewBox='0 0 24 24'>
 29 | 		<line x1='12' y1='5' x2='12' y2='19' />
 30 | 		<polyline points='19 12 12 19 5 12' />
 31 | 	</symbol>
 32 | 
 33 | 	<symbol id='check' class='icon' viewBox='0 0 24 24'>
 34 | 		<polyline points='20 6 9 17 4 12' />
 35 | 	</symbol>
 36 | 
 37 | 	<symbol id='close' class='icon' viewBox='0 0 24 24'>
 38 | 		<line x1='18' y1='6' x2='6' y2='18' />
 39 | 		<line x1='6' y1='6' x2='18' y2='18' />
 40 | 	</symbol>
 41 | 
 42 | 	<symbol id='download' class='icon' viewBox='0 0 24 24'>
 43 | 		<path d='M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15' />
 44 | 		<polyline points='7 10 12 15 17 10' />
 45 | 		<line x1='12' y1='15' x2='12' y2='3' />
 46 | 	</symbol>
 47 | 
 48 | 	<symbol id='edit' class='icon' viewBox='0 0 24 24'>
 49 | 		<path d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34' />
 50 | 		<polygon points='18 2 22 6 12 16 8 16 8 12 18 2' />
 51 | 	</symbol>
 52 | 
 53 | 	<symbol id='github' class='icon' viewBox='0 0 24 24'>
 54 | 		<path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22' />
 55 | 	</symbol>
 56 | 
 57 | 	<symbol id='git-branch' class='icon' viewBox='0 0 24 24'>
 58 | 		<line x1='6' y1='3' x2='6' y2='15' />
 59 | 		<circle cx='18' cy='6' r='3' />
 60 | 		<circle cx='6' cy='18' r='3' />
 61 | 		<path d='M18 9a9 9 0 0 1-9 9' />
 62 | 	</symbol>
 63 | 
 64 | 	<symbol id='log-in' class='icon' viewBox='0 0 24 24'>
 65 | 		<path d='M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15' />
 66 | 		<polyline points='10 17 15 12 10 7' />
 67 | 		<line x1='15' y1='12' x2='3' y2='12' />
 68 | 	</symbol>
 69 | 
 70 | 	<symbol id='maximize' class='icon' viewBox='0 0 24 24'>
 71 | 		<path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3' />
 72 | 	</symbol>
 73 | 
 74 | 	<symbol id='maximize-2' class='icon' viewBox='0 0 24 24'>
 75 | 		<polyline points='15 3 21 3 21 9' />
 76 | 		<polyline points='9 21 3 21 3 15' />
 77 | 		<line x1='21' y1='3' x2='14' y2='10' />
 78 | 		<line x1='3' y1='21' x2='10' y2='14' />
 79 | 	</symbol>
 80 | 
 81 | 	<symbol id='menu' class='icon' viewBox='0 0 24 24'>
 82 | 		<line x1='3' y1='12' x2='21' y2='12' />
 83 | 		<line x1='3' y1='6' x2='21' y2='6' />
 84 | 		<line x1='3' y1='18' x2='21' y2='18' />
 85 | 	</symbol>
 86 | 
 87 | 	<symbol id='message-square' class='icon' viewBox='0 0 24 24'>
 88 | 		<path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' />
 89 | 	</symbol>
 90 | 
 91 | 	<symbol id='minus' class='icon' viewBox='0 0 24 24'>
 92 | 		<line x1='5' y1='12' x2='19' y2='12' />
 93 | 	</symbol>
 94 | 
 95 | 	<symbol id='plus' class='icon' viewBox='0 0 24 24'>
 96 | 		<line x1='12' y1='5' x2='12' y2='19' />
 97 | 		<line x1='5' y1='12' x2='19' y2='12' />
 98 | 	</symbol>
 99 | 
100 | 	<symbol id='save' class='icon' viewBox='0 0 24 24'>
101 | 		<path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z' />
102 | 		<polyline points='17 21 17 13 7 13 7 21' />
103 | 		<polyline points='7 3 7 8 15 8' />
104 | 	</symbol>
105 | 
106 | 	<symbol id="link" class="icon" viewBox="0 0 24 24">
107 | 		<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
108 | 		<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
109 | 		<path d="M7,12L17,12"/>
110 | 	</symbol>
111 | 
112 | 	<symbol id="chevron" class="icon" viewBox="0 0 24 24">
113 | 		<path d="M2,7 L12,17 L20,7"/>
114 | 	</symbol>
115 | </svg>


--------------------------------------------------------------------------------
/src/components/TopNav.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { onMount } from 'svelte';
  3 | 	import { website as site } from '../../package.json';
  4 | 	//import Icon from './Icon.html';
  5 | 	// import Logo from './Logo.html';
  6 | 
  7 | 	export let segment;
  8 | 
  9 | 	let open = false;
 10 | 	let visible = true;
 11 | 
 12 | 	// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
 13 | 	let ul;
 14 | 	onMount(() => {
 15 | 		function handler(event) {
 16 | 			if (!open) {
 17 | 				event.preventDefault();
 18 | 				event.stopPropagation();
 19 | 				open = true;
 20 | 			}
 21 | 		}
 22 | 
 23 | 		ul.addEventListener('touchstart', handler, {
 24 | 			capture: true
 25 | 		});
 26 | 
 27 | 		return () => {
 28 | 			ul.removeEventListener('touchstart', handler, {
 29 | 				capture: true
 30 | 			});
 31 | 		};
 32 | 	});
 33 | 
 34 | 	let last_scroll = 0;
 35 | 	function handle_scroll() {
 36 | 		const scroll = window.pageYOffset;
 37 | 		visible = (scroll < 50 || scroll < last_scroll);
 38 | 
 39 | 		last_scroll = scroll;
 40 | 	}
 41 | </script>
 42 | 
 43 | <style>
 44 | 	header {
 45 | 		position: fixed;
 46 | 		display: flex;
 47 | 		align-items: center;
 48 | 		justify-content: space-between;
 49 | 		width: 100vw;
 50 | 		height: var(--nav-h);
 51 | 		padding: 0 var(--side-nav);
 52 | 		margin: 0 auto;
 53 | 		background-color: white;
 54 | 		box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
 55 | 		font-family: var(--font);
 56 | 		z-index: 10;
 57 | 		user-select: none;
 58 | 		transform: translate(0,calc(-100% - 1rem));
 59 | 		transition: transform 0.2s;
 60 | 	}
 61 | 
 62 | 	header.visible {
 63 | 		transform: none;
 64 | 	}
 65 | 
 66 | 	nav {
 67 | 		position: fixed;
 68 | 		top: 0;
 69 | 		left: 0;
 70 | 		width: 100vw;
 71 | 		height: var(--nav-h);
 72 | 		padding: 0 var(--side-nav) 0 var(--side-nav);
 73 | 		display: flex;
 74 | 		align-items: center;
 75 | 		justify-content: space-between;
 76 | 		background-color: transparent;
 77 | 		transform: none;
 78 | 		transition: none;
 79 | 		box-shadow: none;
 80 | 	}
 81 | 
 82 | 	h2 {
 83 | 		display: block;
 84 | 		text-transform: uppercase;
 85 | 		font-weight: 300;
 86 | 		font-size: 2.8rem;
 87 | 		letter-spacing: .12em;
 88 | 		line-height: 1;
 89 | 		margin: 0;
 90 | 		top: .1rem;
 91 | 	}
 92 | 
 93 | 	.primary {
 94 | 		list-style: none;
 95 | 		font-family: var(--font);
 96 | 		margin: 0;
 97 | 		line-height: 1;
 98 | 	}
 99 | 
100 | 	li {
101 | 		display: block;
102 | 		display: none;
103 | 	}
104 | 
105 | 	li.active {
106 | 		display: block;
107 | 	}
108 | 
109 | 	ul {
110 | 		position: relative;
111 | 		padding: 0 2em 0 0;
112 | 		background: url(/icons/chevron.svg) calc(100% - 1em) 0.05em no-repeat;
113 | 		background-size: 1em 1em;
114 | 	}
115 | 
116 | 	ul::after {
117 | 		/* prevent clicks from registering if nav is closed */
118 | 		position: absolute;
119 | 		content: '';
120 | 		width: 100%;
121 | 		height: 100%;
122 | 		left: 0;
123 | 		top: 0;
124 | 	}
125 | 
126 | 	ul.open {
127 | 		padding: 0 2em 1em 2em;
128 | 		background: white;
129 | 		border-left: 1px solid #eee;
130 | 		border-right: 1px solid #eee;
131 | 		border-bottom: 1px solid #eee;
132 | 		border-radius: 0 0 var(--border-r) var(--border-r);
133 | 		align-self: start;
134 | 	}
135 | 
136 | 	ul.open li {
137 | 		display: block;
138 | 		text-align: right
139 | 	}
140 | 
141 | 	ul.open::after {
142 | 		display: none;
143 | 	}
144 | 
145 | 	ul li a {
146 | 		font-size: var(--h6);
147 | 		padding: 0 .8rem;
148 | 	}
149 | 
150 | 	ul.open li a {
151 | 		padding: 2.3rem .7rem 0 .8rem;
152 | 		display: block;
153 | 	}
154 | 
155 | 	.primary :global(svg) {
156 | 		width: 2rem;
157 | 		height: 2rem;
158 | 	}
159 | 
160 | 	.menu-link {
161 | 		cursor: pointer;
162 | 		-webkit-tap-highlight-color: transparent;
163 | 		-webkit-touch-callout: none;
164 | 	}
165 | 
166 | 	.home {
167 | 		position: relative;
168 | 		top: 0;
169 | 		width: 18rem;
170 | 		color: var(--second);
171 | 		-webkit-tap-highlight-color: transparent;
172 | 		-webkit-touch-callout: none;
173 | 		z-index: 11;
174 | 		padding: 0.5rem 0 0.3rem 4.2rem;
175 | 		/* background: url(/logo.svg) 0 50% no-repeat; */
176 | 		background-size: auto 100%;
177 | 	}
178 | 
179 | 	.active {
180 | 		color: var(--prime)
181 | 	}
182 | 
183 | 	@media (min-width: 768px) {
184 | 		ul {
185 | 			padding: 0;
186 | 			background: none;
187 | 		}
188 | 
189 | 		ul.open {
190 | 			padding: 0;
191 | 			background: white;
192 | 			border: none;
193 | 			align-self: initial;
194 | 		}
195 | 
196 | 		ul.open li {
197 | 			display: inline;
198 | 			text-align: left;
199 | 		}
200 | 
201 | 		ul.open li a {
202 | 			font-size: var(--h6);
203 | 			padding: 0 .8rem;
204 | 			display: inline;
205 | 		}
206 | 
207 | 		ul::after {
208 | 			display: none;
209 | 		}
210 | 
211 | 		li {
212 | 			display: inline !important;
213 | 		}
214 | 
215 | 		.hide-if-desktop {
216 | 			display: none !important;
217 | 		}
218 | 	}
219 | </style>
220 | 
221 | <svelte:window on:click="{() => open = false}" on:scroll={handle_scroll}/>
222 | 
223 | <header class:visible="{visible || open}">
224 | 	<nav>
225 | 		<a rel="prefetch" href='.' class="home" title='Homepage'>
226 | 			<h2>{site.title}</h2>
227 | 		</a>
228 | 
229 | 		<ul
230 | 			bind:this={ul}
231 | 			class="primary"
232 | 			class:open
233 | 			on:mouseenter="{() => open = true}"
234 | 			on:mouseleave="{() => open = false}"
235 | 		>
236 | 			<li class="hide-if-desktop" class:active="{!segment}"><a rel="prefetch" href=".">Home</a></li>
237 | 			<!-- li class:active="{segment === 'repl'}"><a rel="prefetch" href="repl">REPL</a></li -->
238 | 			<li class:active="{segment === 'blog'}"><a rel="prefetch" href="blog">Archive</a></li>
239 | 			<li class:active="{segment === 'about'}"><a rel="prefetch" href="about">About</a></li>
240 | 			<!-- li><a href="https://sapper.svelte.technology">Sapper</a></li>
241 | 
242 | 			<li>
243 | 				<a href="https://discord.gg/yy75DKs" title="Discord Chat">
244 | 					<Icon name="message-square" />
245 | 				</a>
246 | 			</li>
247 | 
248 | 			<li>
249 | 				<a href="https://github.com/sveltejs/svelte" title="Github Repo">
250 | 					<Icon name="github" />
251 | 				</a>
252 | 			</li -->
253 | 		</ul>
254 | 	</nav>
255 | </header>


--------------------------------------------------------------------------------
/src/routes/_error.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	const dev = process.env.NODE_ENV === 'development';
 3 | 	export let status;
 4 | 	export let error;
 5 | </script>
 6 | 
 7 | <svelte:head>
 8 | 	<title>{status}</title>
 9 | </svelte:head>
10 | <section class="container">
11 | 	<h1>{status}</h1>
12 | 
13 | 	<p>{error.message}</p>
14 | 
15 | 	{#if dev && error.stack}
16 | 		<pre>{error.stack}</pre>
17 | 	{/if}
18 | </section>
19 | <style>
20 | 	.container {
21 | 		position: relative;
22 | 		margin: 10rem auto;
23 | 		max-width: 120rem;
24 | 	}
25 | 	h1, p {
26 | 		margin: 0 auto;
27 | 	}
28 | 
29 | 	h1 {
30 | 		font-size: 2.8em;
31 | 		font-weight: 700;
32 | 		margin: 0 0 0.5em 0;
33 | 	}
34 | 
35 | 	p {
36 | 		margin: 1em auto;
37 | 	}
38 | 
39 | 	@media (min-width: 480px) {
40 | 		h1 {
41 | 			font-size: 4em;
42 | 		}
43 | 	}
44 | </style>


--------------------------------------------------------------------------------
/src/routes/_layout.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import InlineSvg from '../components/InlineSvg.html';
 3 | 	import Nav from '../components/TopNav.html';
 4 | 
 5 | 	export let child;
 6 | 	export let path;
 7 | </script>
 8 | 
 9 | <InlineSvg />
10 | {#if path !== '/repl/embed'}
11 | 	<Nav segment={child.segment} />
12 | {/if}
13 | 
14 | <main>
15 | 	<svelte:component this={child.component} {...child.props} />
16 | </main>
17 | 
18 | <style>
19 | 	main {
20 | 		position: relative;
21 | 		margin: 0 auto;
22 | 		padding: var(--nav-h) var(--side-nav) 0 var(--side-nav);
23 | 		overflow-x: hidden;
24 | 	}
25 | </style>


--------------------------------------------------------------------------------
/src/routes/about.html:
--------------------------------------------------------------------------------
 1 | <svelte:head>
 2 | 	<title>About</title>
 3 | </svelte:head>
 4 | <section class="container">
 5 | 	<h1>About this site</h1>
 6 | 	
 7 | 	<p>This is the 'about' page. There's not much here.</p>
 8 | </section>
 9 | <script>
10 | export const preload = () => {}
11 | </script>
12 | <style>
13 | 	.container {
14 | 		position: relative;
15 | 		margin: 10rem auto;
16 | 		max-width: 120rem;
17 | 	}
18 | 	</style>


--------------------------------------------------------------------------------
/src/routes/api/blog/[slug].js:
--------------------------------------------------------------------------------
 1 | import get_posts from './_posts.js';
 2 | 
 3 | let lookup;
 4 | 
 5 | export function get(req, res) {
 6 | 	if (!lookup || process.env.NODE_ENV !== 'production') {
 7 | 		lookup = new Map();
 8 | 		get_posts().forEach(post => {
 9 | 			lookup.set(post.slug, JSON.stringify(post));
10 | 		});
11 | 	}
12 | 
13 | 	if (lookup.has(req.params.slug)) {
14 | 		res.set({
15 | 			'Content-Type': 'application/json',
16 | 			'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes
17 | 		});
18 | 		res.end(lookup.get(req.params.slug));
19 | 	}
20 | }


--------------------------------------------------------------------------------
/src/routes/api/blog/_posts.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs';
 2 | import path from 'path';
 3 | import process_markdown from '../../../utils/_process_markdown.js';
 4 | import marked from 'marked';
 5 | 
 6 | // import hljs from 'highlight.js';
 7 | //import prismjs from 'prismjs'; // prism-highlighter – smaller footprint [hljs: 192.5k]
 8 | //require('prismjs/components/prism-bash');
 9 | 
10 | // map lang to prism-language-attr
11 | /*const prismLang = {
12 |   bash: 'bash',
13 |   html: 'markup',
14 |   js: 'javascript',
15 |   css: 'css',
16 | };
17 | */
18 | export default function() {
19 |   return fs
20 |     .readdirSync('content/blog')
21 |     .map(file => {
22 |       if (path.extname(file) !== '.md') return;
23 | 
24 |       const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8');
25 | 
26 |       const { content, metadata } = process_markdown(markdown);
27 | 
28 |       const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack
29 |       metadata.dateString = date.toDateString();
30 | 
31 |       const renderer = new marked.Renderer();
32 |       /*
33 |       renderer.code = (source, lang) => {
34 |         let plang = prismLang[lang];
35 |         const highlighted = Prism.highlight(
36 |           source,
37 |           Prism.languages[plang],
38 |           lang,
39 |         );
40 | 
41 |         return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
42 |       };
43 |       */
44 |       const html = marked(
45 |         content.replace(/^\t+/gm, match => match.split('\t').join('  ')) || '',
46 |         {
47 |           renderer,
48 |         },
49 |       );
50 | 
51 |       return {
52 |         html,
53 |         metadata,
54 |         slug: file.replace(/^[\d-]+/, '').replace(/\.md$/, ''),
55 |       };
56 |     })
57 |     .sort((a, b) => {
58 |       return a.metadata.pubdate < b.metadata.pubdate ? 1 : -1;
59 |     });
60 | }
61 | 


--------------------------------------------------------------------------------
/src/routes/api/blog/index.js:
--------------------------------------------------------------------------------
 1 | import get_posts from './_posts.js';
 2 | 
 3 | let json;
 4 | 
 5 | export function get(req, res) {
 6 | 	if (!json || process.env.NODE_ENV !== 'production') {
 7 | 		json = JSON.stringify(get_posts().map(post => {
 8 | 			return {
 9 | 				slug: post.slug,
10 | 				metadata: post.metadata
11 | 			};
12 | 		}));
13 | 	}
14 | 
15 | 	res.set({
16 | 		'Content-Type': 'application/json',
17 | 		'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes
18 | 	});
19 | 	res.end(json);
20 | }


--------------------------------------------------------------------------------
/src/routes/auth/me.json.js:
--------------------------------------------------------------------------------
1 | export function get(req, res) {
2 | 	if (!req.session.passport || !req.session.passport.user) {
3 | 		res.send(null);
4 | 		return;
5 | 	}
6 | 
7 | 	const { id, username, displayName, photo } = req.session.passport && req.session.passport.user;
8 | 	res.send({ id, username, displayName, photo });
9 | }


--------------------------------------------------------------------------------
/src/routes/blog/[slug].html:
--------------------------------------------------------------------------------
  1 | <script context="module">
  2 | 	export async function preload({ params }) {
  3 | 		const post = await this.fetch(`api/blog/${params.slug}`).then(r => r.json());
  4 | 		return { post };
  5 | 	}
  6 | </script>
  7 | 
  8 | <script>
  9 | 	export let post;
 10 | </script>
 11 | 
 12 | <svelte:head>
 13 | 	<title>{post.metadata.title}</title>
 14 | </svelte:head>
 15 | 
 16 | <article class='post linkify listify'>
 17 | 	<p class='byline'><a href='{post.metadata.authorURL}'>{post.metadata.author}</a> <time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time></p>
 18 | 
 19 | 	<h1>{post.metadata.title}</h1>
 20 | 	<p class='standfirst'>{post.metadata.description}</p>
 21 | 
 22 | 	{@html post.html}
 23 | </article>
 24 | 
 25 | <style>
 26 | 	.post {
 27 | 		padding: var(--top-offset) 0;
 28 | 		max-width: var(--main-width);
 29 | 		margin: 0 auto;
 30 | 	}
 31 | 
 32 | 	.byline {
 33 | 		font-size: 0.8em;
 34 | 		border-bottom: 1px solid #eee;
 35 | 		padding: 0;
 36 | 	}
 37 | 
 38 | 	.post h1 {
 39 | 		color: var(--second);
 40 | 		max-width: 20em;
 41 | 		margin: 0 0 1.2rem 0;
 42 | 	}
 43 | 
 44 | 	.post :global(h2) {
 45 | 		margin: 2em 0 0.5em 0;
 46 | 		color: var(--second);
 47 | 	}
 48 | 
 49 | 	/* .post p,
 50 | 	.post :global(p) {
 51 | 		max-width: var(--linemax)
 52 | 	} */
 53 | 
 54 | 	.post :global(figure) {
 55 | 		margin: 1.6rem 0 3.2rem 0;
 56 | 	}
 57 | 
 58 | 	.post :global(figure) :global(img) {
 59 | 		max-width: 100%;
 60 | 	}
 61 | 
 62 | 	.post :global(figcaption) {
 63 | 		color: var(--second)
 64 | 	}
 65 | 
 66 | 	.post :global(video) {
 67 | 		width: 100%;
 68 | 	}
 69 | 
 70 | 	.post :global(blockquote) {
 71 | 		max-width: none;
 72 | 		border-left: 4px solid #eee;
 73 | 		background: #f9f9f9;
 74 | 		border-radius: 0 var(--border-r) var(--border-r) 0;
 75 | 	}
 76 | 
 77 | 	.post :global(code) {
 78 | 		padding: .3rem .8rem .3rem;
 79 | 		margin: 0 0.2rem;
 80 | 		top: -.1rem;
 81 | 		background: #f4f4f4;
 82 | 	}
 83 | 
 84 | 	.post :global(pre) :global(code) {
 85 | 		padding: 0;
 86 | 		margin: 0;
 87 | 		top: 0;
 88 | 		background: transparent;
 89 | 	}
 90 | 
 91 | 	.standfirst {
 92 | 		font-size: var(--h4);
 93 | 		color: var(--second);
 94 | 		margin: 0 0 2em 0;
 95 | 	}
 96 | 
 97 | 	.post :global(aside) {
 98 | 		float: right;
 99 | 		margin: 0 0 1em 1em;
100 | 		width: 16rem;
101 | 		color: var(--second);
102 | 		z-index: 2;
103 | 	}
104 | 
105 | 	.post :global(iframe) {
106 | 		width: 100%;
107 | 		height: 420px;
108 | 		margin: 2em 0;
109 | 		border-radius: var(--border-r);
110 | 		border: 0.8rem solid var(--second);
111 | 	}
112 | 
113 | 	@media (min-width: 910px) {
114 | 		.post :global(iframe) {
115 | 			width: calc(100vw - 2 * var(--side-nav));
116 | 			margin: 2em calc(400px + var(--side-nav) - 50vw);
117 | 		}
118 | 	}
119 | 
120 | 	@media (min-width: 1460px) {
121 | 		.post :global(iframe) {
122 | 			width: 1360px;
123 | 			margin: 2em -280px;
124 | 		}
125 | 	}
126 | 
127 | 	@media (min-height: 800px) {
128 | 		.post :global(iframe) {
129 | 			height: 640px;
130 | 		}
131 | 	}
132 | </style>


--------------------------------------------------------------------------------
/src/routes/blog/index.html:
--------------------------------------------------------------------------------
 1 | <script context="module">
 2 | 	export async function preload() {
 3 | 		const posts = await this.fetch(`api/blog`).then(r => r.json());
 4 | 		return { posts };
 5 | 	}
 6 | </script>
 7 | 
 8 | <script>
 9 | 	export let posts;
10 | </script>
11 | 
12 | <svelte:head>
13 | 	<title>Blog • Archive</title>
14 | </svelte:head>
15 | 
16 | <div class='posts stretch'>
17 | 	{#each posts as post}
18 | 		<article class='post' data-pubdate={post.metadata.dateString}>
19 | 			<a rel='prefetch' href='blog/{post.slug}' title='Read the article »'>
20 | 				<h2>{post.metadata.title}</h2>
21 | 				<p>{post.metadata.description}</p>
22 | 			</a>
23 | 		</article>
24 | 	{/each}
25 | </div>
26 | 
27 | <style>
28 | 	.posts {
29 | 		grid-template-columns: 1fr 1fr;
30 | 		grid-gap: 1em;
31 | 		min-height: calc(100vh - var(--nav-h));
32 | 		padding: var(--top-offset) 0;
33 | 		max-width: var(--main-width);
34 | 		margin: 0 auto;
35 | 	}
36 | 
37 | 	h2 {
38 | 		display: inline-block;
39 | 		margin: 2rem 0 0.5rem 0;
40 | 		color: var(--second);
41 | 		/* max-width: 18em; */
42 | 		font-size: 2rem;
43 | 	}
44 | 
45 | 	.post:first-child {
46 | 		margin: 0 0 2em 0;
47 | 		border-bottom: 1px solid #eee;
48 | 	}
49 | 
50 | 	.post:first-child h2 {
51 | 		font-size: 4rem;
52 | 	}
53 | 
54 | 	.post:first-child::before {
55 | 		content: 'Latest post • ' attr(data-pubdate);
56 | 		font-weight: 400;
57 | 		color: #aaa;
58 | 		text-transform: uppercase;
59 | 	}
60 | 
61 | 	.post:nth-child(2)::before {
62 | 		content: 'Older posts';
63 | 		font-weight: 400;
64 | 		color: #aaa;
65 | 		text-transform: uppercase;
66 | 	}
67 | 
68 | 	.post p {
69 | 		font-size: var(--h5);
70 | 		max-width: 30em;
71 | 		color: var(--second);
72 | 	}
73 | 
74 | 	.post > a {
75 | 		display: block;
76 | 	}
77 | 
78 | 	.posts a:hover,
79 | 	.posts a:hover > h2 {
80 | 		color: var(--flash)
81 | 	}
82 | </style>


--------------------------------------------------------------------------------
/src/routes/blog/rss.xml.js:
--------------------------------------------------------------------------------
 1 | import get_posts from '../api/blog/_posts.js';
 2 | import { website as site } from '../../../package.json';
 3 | 
 4 | const months = ',Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split( ',' );
 5 | 
 6 | function formatPubdate ( str ) {
 7 | 	const [ y, m, d ] = str? str.split( '-' ) : [2012, 12, 25]
 8 | 	return `${d} ${months[+m]} ${y}`;
 9 | }
10 | 
11 | const rss = `
12 | <?xml version="1.0" encoding="UTF-8" ?>
13 | <rss version="2.0">
14 | 
15 | <channel>
16 | 	<title>${site.title}</title>
17 | 	<link>${site.url}/blog</link>
18 | 	<description>${site.description}/description>
19 | 	<image>
20 | 		<url>${site.url}/favicon.png</url>
21 | 		<title>${site.title}</title>
22 | 		<link>${site.url}/blog</link>
23 | 	</image>
24 | 	${get_posts().map( post => `
25 | 		<item>
26 | 			<title>${post.metadata.title}</title>
27 | 			<link>${site.url}/blog/${post.slug}</link>
28 | 			<description>${post.metadata.description}</description>
29 | 			<pubDate>${formatPubdate(post.metadata.pubdate)}</pubDate>
30 | 		</item>
31 | 	` )}
32 | </channel>
33 | 
34 | </rss>
35 | `.replace( />[^\S]+/gm, '>' ).replace( /[^\S]+</gm, '<' ).trim();
36 | 
37 | export function get(req, res) {
38 | 	res.set({
39 | 		'Cache-Control': `max-age=${30 * 60 * 1e3}`,
40 | 		'Content-Type': 'application/rss+xml'
41 | 	});
42 | 	res.end(rss);
43 | }


--------------------------------------------------------------------------------
/src/routes/index.html:
--------------------------------------------------------------------------------
 1 | <script context="module">
 2 | 	export async function preload() {
 3 | 		const posts = await this.fetch(`api/blog`).then(r => r.json());
 4 | 		return { posts };
 5 | 	}
 6 | </script>
 7 | <script>
 8 | 	export let posts;
 9 | </script>
10 | <style>
11 | 	.container {
12 | 		position: relative;
13 | 		margin: 10rem auto;
14 | 		max-width: 120rem;
15 | 	}
16 | 
17 | 	.container ul {
18 | 		list-style: none;
19 | 	}
20 | 
21 | 	li.post-box {
22 | 		padding: 5%;
23 | 	}
24 | 
25 | 	li.post-box a.post-read {
26 | 		display: block;
27 | 		float: right;
28 | 		bottom: 0;
29 | 	}
30 | 
31 | 	/* max line-length ~60 chars */
32 | 	li:not(.post-box) > p {
33 | 		max-width: var(--linemax)
34 | 	}
35 | 
36 | 	h2 { color: white }
37 | 
38 | </style>
39 | 
40 | <svelte:head>
41 | 	<title>Blog • Homepage</title>
42 | </svelte:head>
43 | 
44 | <section class='container'>
45 | 	<ul class='grid stretch'>
46 | 		{#await posts}
47 | 			<p>loading</p>
48 | 		{:then posts}
49 | 			{#each posts.slice(0,5) as post}
50 | 
51 | 			<li class='post-box bg-second white'>
52 | 				<h2 style='padding:2.4rem 0 0 0'>{ post.metadata.title }</h2>
53 | 				<p>{ post.metadata.description }</p>
54 | 				<a class="post-read" href="blog/{ post.slug }">read</a>
55 | 			</li>
56 | 
57 | 			{/each}
58 | 		{/await}
59 | 	</ul>
60 | </section>


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
  1 | import 'dotenv/config';
  2 | import express from 'express';
  3 | import compression from 'compression';
  4 | import session from 'express-session';
  5 | import passport from 'passport';
  6 | import { Strategy } from 'passport-github';
  7 | import sessionFileStore from 'session-file-store';
  8 | import serve from 'serve-static';
  9 | import devalue from 'devalue';
 10 | import * as sapper from '../__sapper__/server.js';
 11 | 
 12 | const app = express();
 13 | 
 14 | if (process.env.GITHUB_CLIENT_ID) {
 15 | 	const FileStore = sessionFileStore(session);
 16 | 
 17 | 	passport.use(new Strategy({
 18 | 		clientID: process.env.GITHUB_CLIENT_ID,
 19 | 		clientSecret: process.env.GITHUB_CLIENT_SECRET,
 20 | 		callbackURL: `${process.env.BASEURL}/auth/callback`,
 21 | 		userAgent: 'svelte.technology'
 22 | 	}, (accessToken, refreshToken, profile, callback) => {
 23 | 		return callback(null, {
 24 | 			token: accessToken,
 25 | 			id: profile.id,
 26 | 			username: profile.username,
 27 | 			displayName: profile.displayName,
 28 | 			photo: profile.photos && profile.photos[0] && profile.photos[0].value
 29 | 		});
 30 | 	}));
 31 | 
 32 | 	passport.serializeUser((user, cb) => {
 33 | 		cb(null, user);
 34 | 	});
 35 | 
 36 | 	passport.deserializeUser((obj, cb) => {
 37 | 		cb(null, obj);
 38 | 	});
 39 | 
 40 | 	app
 41 | 		.use(session({
 42 | 			secret: 'svelte',
 43 | 			resave: true,
 44 | 			saveUninitialized: true,
 45 | 			cookie: {
 46 | 				maxAge: 31536000
 47 | 			},
 48 | 			store: new FileStore({
 49 | 				path: process.env.NOW ? `/tmp/sessions` : `.sessions`
 50 | 			})
 51 | 		}))
 52 | 
 53 | 		.use(passport.initialize())
 54 | 		.use(passport.session())
 55 | 
 56 | 		.get('/auth/login', (req, res, next) => {
 57 | 			const { returnTo } = req.query;
 58 | 			req.session.returnTo = returnTo ? decodeURIComponent(returnTo) : '/';
 59 | 			next();
 60 | 		}, passport.authenticate('github', { scope: ['gist', 'read:user'] }))
 61 | 
 62 | 		.post('/auth/logout', (req, res) => {
 63 | 			req.logout();
 64 | 			res.end('ok');
 65 | 		})
 66 | 
 67 | 		.get('/auth/callback', passport.authenticate('github', { failureRedirect: '/auth/error' }), (req, res) => {
 68 | 			const { id, username, displayName, photo } = req.session.passport && req.session.passport.user;
 69 | 
 70 | 			res.set({ 'Content-Type': 'text/html; charset=utf-8' });
 71 | 			res.end(`
 72 | 				<script>
 73 | 					window.opener.postMessage({
 74 | 						user: ${devalue({ id, username, displayName, photo })}
 75 | 					}, window.location.origin);
 76 | 				</script>
 77 | 			`);
 78 | 		});
 79 | } else {
 80 | 	app.get('/auth/login', (req, res) => {
 81 | 		res.writeHead(500);
 82 | 		res.end(`
 83 | 			<body style="font-family: sans-serif; background: rgb(255,215,215); border: 2px solid red; margin: 0; padding: 1em;">
 84 | 				<h1>Missing .env file</h1>
 85 | 				<p>In order to use GitHub authentication, you will need to <a target="_blank" href="https://github.com/settings/developers">register an OAuth application</a> with <code>gist</code> and <code>read:user</code> scopes, and create a .env file:</p>
 86 | 
 87 | 				<pre>GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:3000</pre>
 88 | 
 89 | 				<p>The <code>BASEURL</code> variable should match the callback URL specified for your app.</p>
 90 | 			</body>
 91 | 		`);
 92 | 	});
 93 | }
 94 | 
 95 | app.use(
 96 | 	compression({ threshold: 0 }),
 97 | 	serve('static'),
 98 | 	sapper.middleware({
 99 | 		// TODO update Sapper so that we can pass props to the client
100 | 		props: req => {
101 | 			const user = req.session && req.session.passport && req.session.passport.user;
102 | 
103 | 			return {
104 | 				user: user && {
105 | 					// strip access token
106 | 					id: user.id,
107 | 					username: user.username,
108 | 					displayName: user.displayName,
109 | 					photo: user.photo
110 | 				}
111 | 			};
112 | 		}
113 | 	})
114 | ).listen(process.env.PORT);


--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
 1 | import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
 2 | 
 3 | const ASSETS = `cache${timestamp}`;
 4 | 
 5 | // `shell` is an array of all the files generated by Rollup,
 6 | // `files` is an array of everything in the `static` directory
 7 | const to_cache = shell.concat(files);
 8 | const cached = new Set(to_cache);
 9 | 
10 | self.addEventListener('install', event => {
11 | 	event.waitUntil(
12 | 		caches
13 | 			.open(ASSETS)
14 | 			.then(cache => cache.addAll(to_cache))
15 | 			.then(() => {
16 | 				self.skipWaiting();
17 | 			})
18 | 	);
19 | });
20 | 
21 | self.addEventListener('activate', event => {
22 | 	event.waitUntil(
23 | 		caches.keys().then(async keys => {
24 | 			// delete old caches
25 | 			for (const key of keys) {
26 | 				if (key !== ASSETS) await caches.delete(key);
27 | 			}
28 | 
29 | 			self.clients.claim();
30 | 		})
31 | 	);
32 | });
33 | 
34 | self.addEventListener('fetch', event => {
35 | 	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
36 | 
37 | 	const url = new URL(event.request.url);
38 | 
39 | 	// don't try to handle e.g. data: URIs
40 | 	if (!url.protocol.startsWith('http')) return;
41 | 
42 | 	// ignore dev server requests
43 | 	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
44 | 
45 | 	// always serve static files and Rollup-generated assets from cache
46 | 	if (url.host === self.location.host && cached.has(url.pathname)) {
47 | 		event.respondWith(caches.match(event.request));
48 | 		return;
49 | 	}
50 | 
51 | 	// for pages, you might want to serve a shell `index.html` file,
52 | 	// which Sapper has generated for you. It's not right for every
53 | 	// app, but if it's right for yours then uncomment this section
54 | 	/*
55 | 	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
56 | 		event.respondWith(caches.match('/index.html'));
57 | 		return;
58 | 	}
59 | 	*/
60 | 
61 | 	if (event.request.cache === 'only-if-cached') return;
62 | 
63 | 	// for everything else, try the network first, falling back to
64 | 	// cache if the user is offline. (If the pages never change, you
65 | 	// might prefer a cache-first approach to a network-first one.)
66 | 	event.respondWith(
67 | 		caches
68 | 			.open(`offline${timestamp}`)
69 | 			.then(async cache => {
70 | 				try {
71 | 					const response = await fetch(event.request);
72 | 					cache.put(event.request, response.clone());
73 | 					return response;
74 | 				} catch(err) {
75 | 					const response = await cache.match(event.request);
76 | 					if (response) return response;
77 | 
78 | 					throw err;
79 | 				}
80 | 			})
81 | 	);
82 | });
83 | 


--------------------------------------------------------------------------------
/src/template.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang='en' class="theme-default typo-default">
 3 | <head>
 4 | 	<meta charset='utf-8'>
 5 | 	<meta name='viewport' content='width=device-width'>
 6 | 	<meta name='theme-color' content='#aa1e1e'>
 7 | 
 8 | 	%sapper.base%
 9 | 
10 | 	<link rel='stylesheet' href='global.css'>
11 | 	<!-- link href=prism.css rel=stylesheet -->
12 | 	<link rel='manifest' href='manifest.json'>
13 | 	<link rel='icon' type='image/png' href='favicon.png'>
14 | 
15 | 	<!-- Sapper generates a <style> tag containing critical CSS
16 | 	     for the current page. CSS for the rest of the app is
17 | 	     lazily loaded when it precaches secondary pages -->
18 | 	%sapper.styles%
19 | 
20 | 	<!-- This contains the contents of the <svelte:head> component, if
21 | 	     the current page has one -->
22 | 	%sapper.head%
23 | </head>
24 | <body>
25 | 	<!-- The application will be rendered inside this element,
26 | 	     because `app/client.js` references it -->
27 | 	<div id='sapper'>%sapper.html%</div>
28 | 
29 | 	<!-- Sapper creates a <script> tag containing `app/client.js`
30 | 	     and anything else it needs to hydrate the app and
31 | 	     initialise the router -->
32 | 	%sapper.scripts%
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/user.js:
--------------------------------------------------------------------------------
 1 | import { writable } from 'svelte/store';
 2 | 
 3 | export const user = writable(null);
 4 | 
 5 | if (process.browser) {
 6 | 	// TODO this is a workaround for the fact that there's currently
 7 | 	// no way to pass session data from server to client
 8 | 	fetch('/auth/me.json', { credentials: 'include' })
 9 | 		.then(r => r.json())
10 | 		.then(user.set);
11 | }
12 | 
13 | export async function logout() {
14 | 	const r = await fetch(`/auth/logout`, { method: 'POST' });
15 | 	if (r.ok) user.set(null);
16 | }


--------------------------------------------------------------------------------
/src/utils/_process_markdown.js:
--------------------------------------------------------------------------------
 1 | export default function process_markdown(markdown) {
 2 | 	const match = /---\n([\s\S]+?)\n---/.exec(markdown);
 3 | 	const frontMatter = match[1];
 4 | 	const content = markdown.slice(match[0].length);
 5 | 
 6 | 	const metadata = {};
 7 | 	frontMatter.split('\n').forEach(pair => {
 8 | 		const colonIndex = pair.indexOf(':');
 9 | 		metadata[pair.slice(0, colonIndex).trim()] = pair
10 | 			.slice(colonIndex + 1)
11 | 			.trim();
12 | 	});
13 | 
14 | 	return { metadata, content };
15 | }


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tonyrewin/svelte-3-blog/e4acfbc68bb0ac0a7e4ae9ac8f4cc68380af1250/static/favicon.ico


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tonyrewin/svelte-3-blog/e4acfbc68bb0ac0a7e4ae9ac8f4cc68380af1250/static/favicon.png


--------------------------------------------------------------------------------
/static/global.css:
--------------------------------------------------------------------------------
  1 | /* fonts */
  2 | 
  3 | /* /* overpass-100normal - latin 
  4 | @font-face {
  5 | 	font-family: 'Overpass';
  6 | 	font-style: normal;
  7 | 	font-weight: 100;
  8 | 	src:
  9 | 		local('Overpass Thin '),
 10 | 		local('Overpass-Thin'),
 11 | 		url('fonts/overpass/overpass-latin-100.woff2') format('woff2');
 12 | }
 13 | 
 14 | /* overpass-300normal - latin 
 15 | @font-face {
 16 | 	font-family: 'Overpass';
 17 | 	font-style: normal;
 18 | 	font-weight: 300;
 19 | 	src:
 20 | 		local('Overpass Light '),
 21 | 		local('Overpass-Light'),
 22 | 		url('fonts/overpass/overpass-latin-300.woff2') format('woff2');
 23 | }
 24 | 
 25 | /* overpass-400normal - latin 
 26 | @font-face {
 27 | 	font-family: 'Overpass';
 28 | 	font-style: normal;
 29 | 	font-weight: 400;
 30 | 	src:
 31 | 		local('Overpass Light '),
 32 | 		local('Overpass-Light'),
 33 | 		url('fonts/overpass/overpass-latin-400.woff2') format('woff2');
 34 | }
 35 | 
 36 | /* overpass-700normal - latin 
 37 | @font-face {
 38 | 	font-family: 'Overpass';
 39 | 	font-style: normal;
 40 | 	font-weight: 700;
 41 | 	src:
 42 | 		local('Overpass Bold '),
 43 | 		local('Overpass-Bold'),
 44 | 		url('fonts/overpass/overpass-latin-700.woff2') format('woff2');
 45 | }
 46 | 
 47 | /* fira-mono-400normal - latin 
 48 | @font-face {
 49 | 	font-family: 'Fira Mono';
 50 | 	font-style: normal;
 51 | 	font-weight: 400;
 52 | 	src:
 53 | 		local('Fira Mono Regular '),
 54 | 		local('Fira Mono-Regular'),
 55 | 		url('fonts/fira-mono/fira-mono-latin-400.woff2') format('woff2');
 56 | }
 57 | 
 58 | /* roboto-400normal - latin 
 59 | @font-face {
 60 | 	font-family: 'Roboto';
 61 | 	font-style: normal;
 62 | 	font-display: swap;
 63 | 	font-weight: 400;
 64 | 	src:
 65 | 		local('Roboto Regular '),
 66 | 		local('Roboto-Regular'),
 67 | 		url('fonts/roboto/roboto-latin-400.woff2') format('woff2');
 68 | }
 69 | 
 70 | /* roboto-400italic - latin 
 71 | @font-face {
 72 | 	font-family: 'Roboto';
 73 | 	font-style: italic;
 74 | 	font-display: swap;
 75 | 	font-weight: 400;
 76 | 	src:
 77 | 		local('Roboto Regular italic'),
 78 | 		local('Roboto-Regularitalic'),
 79 | 		url('fonts/roboto/roboto-latin-400italic.woff2') format('woff2');
 80 | }
 81 | 
 82 | /* roboto-500normal - latin 
 83 | @font-face {
 84 | 	font-family: 'Roboto';
 85 | 	font-style: normal;
 86 | 	font-display: swap;
 87 | 	font-weight: 500;
 88 | 	src:
 89 | 		local('Roboto Medium '),
 90 | 		local('Roboto-Medium'),
 91 | 		url('fonts/roboto/roboto-latin-500.woff2') format('woff2');
 92 | }
 93 | 
 94 | /* roboto-500italic - latin 
 95 | @font-face {
 96 | 	font-family: 'Roboto';
 97 | 	font-style: italic;
 98 | 	font-display: swap;
 99 | 	font-weight: 500;
100 | 	src:
101 | 		local('Roboto Medium italic'),
102 | 		local('Roboto-Mediumitalic'),
103 | 		url('fonts/roboto/roboto-latin-500italic.woff2') format('woff2');
104 | }
105 |  */
106 | 
107 | body {
108 | 	--font: 'Overpass', Helvetica, sans-serif;
109 | 	/* --font: 'Roboto', 'sans-serif'; */
110 | 	/* --font-mono: 'Overpass Mono', monospace; */
111 | 	/* --font-mono: 'IBM Plex Mono'; */
112 | 	--font-mono: 'Fira Mono', monospace;
113 | 	--font-ui: var(--font-mono);
114 | 	--font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
115 | }
116 | 
117 | /*	base reset ----------------------------- */
118 | html {
119 | 	font-size: 62.5%;
120 | 	-ms-text-size-adjust: 62.5%;
121 | 	-webkit-text-size-adjust: 62.5%;
122 | 	-ms-overflow-style: -ms-autohiding-scrollbar;
123 | 	box-sizing: border-box;
124 | 	border-collapse: collapse;
125 | }
126 | 
127 | * {
128 | 	box-sizing: inherit;
129 | 	margin: 0;
130 | 	padding: 0;
131 | }
132 | 
133 | /*	links reset ---------------------------- */
134 | a {
135 | 	text-decoration: none;
136 | 	cursor: pointer;
137 | 	color: inherit;
138 | }
139 | 
140 | a:hover,
141 | a:active {
142 | 	color: var(--flash);
143 | }
144 | 
145 | a:focus {
146 | 	outline: none
147 | }
148 | 
149 | /*
150 | -----------------------------------------------
151 | 	global styles
152 | 
153 | 	NOTE
154 | 	– !important overrides class-definitions
155 | 	- some vars change inside media-queries!
156 | -----------------------------------------------
157 | */
158 | 
159 | /*	constants and calc -----------------------
160 | 	- commonly used values
161 | 	- under normal conditions, there's no need to touch these
162 | 	- look confusing/cluttering at first,
163 | 		but they simplify life immensely
164 | -----------------------------------------------
165 | */
166 | :root {
167 | 	--nav-h:       6rem;
168 | 	--top-offset:  6rem;
169 | 	--sidebar-w:  24rem;
170 | 	--main-width: 80rem;
171 | 	--code-w:      72em;
172 | 	--side-nav:  1.6rem;
173 | 	--side-page:   var(--side-nav);
174 | 
175 | 	/* easings */
176 | 	--in-cubic:    cubic-bezier(0.55, 0.055, 0.675, 0.19);
177 | 	--out-cubic:   cubic-bezier(0.215, 0.61, 0.355, 1);
178 | 	--inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
179 | 
180 | 	--in-back:     cubic-bezier(0.6, -0.28, 0.735, 0.045);
181 | 	--out-back:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
182 | 	--inout-back:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
183 | }
184 | 
185 | /*	theme vars ----------------------------- */
186 | .theme-default {
187 | 	--back:       #ffffff;
188 | 	--back-light: #fbfcfd;
189 | 	--prime:      #ff3e00;
190 | 	--second:     #676778;
191 | 	--flash:       #40b3ff;
192 | 	--heading:    var(--second);
193 | 	--text:       #333; /* hsl(36, 3%, 62%) */
194 | 	--border-w:   .3rem;     /* border-width  */
195 | 	--border-r:   .4rem;     /* border-radius */
196 | }
197 | 
198 | /*	typo vars ------------------------------ */
199 | .typo-default {
200 | 	--unit:     .8rem;
201 | 	--code-fs: 1.3rem;
202 | 	--h6:      1.6rem;
203 | 	--h5:      1.6rem;
204 | 	--h4:      1.8rem;
205 | 	--h3:      2.4rem;
206 | 	--h2:        3rem;
207 | 	--h1:      3.2rem;
208 | 	--linemax:   42em;      /* max line-length */
209 | 	--lh:      calc(4/2.2); /* base line-height */
210 | }
211 | 
212 | /*	typography ----------------------------- */
213 | body {
214 | 	font: 400 var(--h4)/var(--lh) var(--font);
215 | 	background-color: var(--back);
216 | 	color: var(--text);
217 | }
218 | 
219 | h1, h2, h3, h4, h5, h6, blockquote {
220 | 	margin: 0;
221 | 	color: var(--heading);
222 | 	position: relative;
223 | }
224 | 
225 | h1, h2, h3, h4, h5, h6 { font-weight: 700 }
226 | h6 { font-size: var(--h6) }
227 | h5 { font-size: var(--h5) }
228 | h4 { font-size: var(--h4) }
229 | h3 { font-size: var(--h3) }
230 | h2 { font-size: var(--h2) }
231 | h1 { font-size: var(--h1) }
232 | 
233 | p, ol, ul {
234 | 	line-height: 1.5;
235 | 	margin: 0 0 1em 0;
236 | 	font-family: Roboto, sans-serif;
237 | 	-webkit-font-smoothing: antialiased;
238 | 	/* font-family: var(--font-system); */
239 | }
240 | 
241 | .b, b, strong { font-weight: 500 }
242 | 
243 | tt, code, kbd, samp {
244 | 	font: 400 var(--code-fs)/1.7 var(--font-mono);
245 | }
246 | 
247 | code {
248 | 	position: relative;
249 | 	border-radius: 0.3em;
250 | 	white-space: nowrap;
251 | 	/* border-top: .1rem solid #e5e5e9;
252 | 	border-left: .1rem solid #e5e5e9; */
253 | 	/* color: inherit; */
254 | 	color: #444;
255 | 	-webkit-font-smoothing: initial;
256 | }
257 | 
258 | pre code {
259 | 	top: 0;
260 | 	white-space: inherit;
261 | 	background-color: none;
262 | }
263 | 
264 | ::selection {
265 | 	background: var(--flash);
266 | 	color: white;
267 | }
268 | 
269 | /*	opinionated styles --------------------- */
270 | h1, h2 {
271 | 	font-family: var(--font);
272 | 	line-height: 1.2;
273 | }
274 | 
275 | li:not(.white) > h2 {
276 | 	color: var(--second)
277 | }
278 | 
279 | blockquote {
280 | 	position: relative;
281 | 	margin: 1.6rem 0 2.4rem;
282 | 	padding: 2rem 2.4rem 1.8rem 2.4rem;
283 | 	border-radius: var(--border-r);
284 | 	font-family: var(--font);
285 | 	max-width: var(--linemax);
286 | }
287 | 
288 | blockquote p {
289 | 	font-size: var(--h5);
290 | }
291 | 
292 | blockquote :last-child {
293 | 	margin: 0;
294 | }
295 | 
296 | 
297 | /*  buttons -------------------------------- */
298 | button {
299 | 	font-family: inherit;
300 | 	font-size: inherit;
301 | 	background-color: transparent;
302 | 	border: none;
303 | 	color: currentColor;
304 | }
305 | 
306 | button:focus { outline: 0 }
307 | 
308 | button[disabled] {
309 | 	opacity: .55;
310 | 	pointer-events: none;
311 | }
312 | 
313 | button > svg {
314 | 	position: relative;
315 | 	top: -.1rem;
316 | 	width: 2rem !important;
317 | 	height: 2rem !important;
318 | }
319 | 
320 | /*  options */
321 | button[outline] {
322 | 	min-height: var(--bttn-calc-h);
323 | 	line-height: var(--bttn-calc-h);
324 | 	border: var(--bttn-outline) solid currentColor;
325 | 	background-color: white;
326 | 	color: currentColor;
327 | }
328 | 
329 | /*  links -------------------------------------
330 | 		- idea from https://up.docs.apex.sh
331 | 
332 | 		How can this be solved?
333 | 		Setup for all links is risky/tricky
334 | 
335 | 		We need global <a>-styles and <ul>-styles inside markdown.
336 | 		These bleed into places, where not wanted (i.e. nav, homepage)
337 | 		Same with lists - see below
338 | 
339 | 		THIS WAY IS SHITTY!!
340 | 		I'm too blind to see...
341 | */
342 | .linkify a:not(.open-in-repl) {
343 | 	position: relative;
344 | 	padding: 0 0 .1rem 0;
345 | 	border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
346 | 	user-select: none;
347 | 	/* white-space: nowrap; */
348 | 	color: inherit;
349 | 	transition: color .2s, border .2s, padding .2s;
350 | }
351 | 
352 | .linkify a:not(.open-in-repl):hover  {
353 | 	color: var(--flash);
354 | }
355 | 
356 | .linkify a:not(.open-in-repl):hover {
357 | 	padding: 0;
358 | 	border-bottom: .2rem solid hsla(15, 100%, 50%, 1);
359 | }
360 | 
361 | /* .linkify a:not(.open-in-repl):before {
362 | 	content: '';
363 | 	position: absolute;
364 | 	width: 100%;
365 | 	height: .2rem;
366 | 	bottom: -.2rem;
367 | 	left: 0;
368 | 	white-space: nowrap;
369 | 	background: var(--prime);
370 | 	border-radius: var(--border-r);
371 | 	visibility: hidden;
372 | 	transform: scaleX(0);
373 | 	transform-origin: left center;
374 | 	transition: all .15s var(--out-cubic);
375 | 	z-index: -1;
376 | }
377 | 
378 | .linkify a:not(.open-in-repl):hover:before  {
379 | 	visibility: visible;
380 | 	transform: scaleX(1);
381 | } */
382 | 
383 | a:hover > .icon { stroke: var(--flash) }
384 | 
385 | /*  lists ---------------------------------- */
386 | .listify ol,
387 | .listify ul {
388 | 	--list-padding: 2.9rem;
389 | 
390 | 	list-style: none;
391 | 	color: currentColor;
392 | 	margin-left: var(--list-padding);
393 | }
394 | 
395 | .listify ol > li,
396 | .listify ul > li {
397 | 	max-width: calc(var(--linemax) - var(--list-padding));
398 | 	line-height: 1.5;
399 | 	margin: 0 0 0.4rem 0;
400 | }
401 | 
402 | .listify ul > li:before {
403 | 	content: '';
404 | 	position: absolute;
405 | 	margin-top: 1.1rem;
406 | 	margin-left: -1.8rem;
407 | 	background-color: var(--second);
408 | 	width: .8rem;
409 | 	height: 0.8rem;
410 | 	border-radius: 2px;
411 | 	opacity: 0.7;
412 | }
413 | 
414 | .listify ol { list-style: decimal }
415 | 
416 | /*  tables --------------------------------- */
417 | table {
418 | 	width: 100%;
419 | 	font-size: var(--h5);
420 | }
421 | 
422 | td, th {
423 | 	text-align: left;
424 | 	border-bottom: 1px solid #eee;
425 | 	padding: 0.4rem 0.8rem 0.4rem 0;
426 | }
427 | 
428 | table code,
429 | table span {
430 | 	white-space: pre;
431 | }
432 | 
433 | /*	grid ----------------------------------- */
434 | .grid,
435 | .grid.half {
436 | 	display: grid;
437 | 	grid-gap: 2.4rem;
438 | 	grid-template-columns: 1fr;
439 | 	align-items: center;
440 | }
441 | 
442 | .grid.stretch { align-items: stretch }
443 | 
444 | .grid > .cols-2,
445 | .grid > .cols-3 { grid-column: span 1 }
446 | 
447 | 
448 | /*	helper styles -------------------------- */
449 | .flex-auto { flex: 1 0 auto }
450 | 
451 | .py0 {
452 | 	padding-top: 0 !important;
453 | 	padding-bottom: 0 !important;
454 | }
455 | 
456 | .legend, figcaption,
457 | .post aside {
458 | 	max-width: none;
459 | 	margin: 0 auto;
460 | 	padding: 1.6rem 0 0 .8rem;
461 | 	font: 1.2rem/1.6 var(--font-ui);
462 | }
463 | 
464 | .filename {
465 | 	display: inline-block;
466 | 	padding: 1.6rem 0 0 1rem;
467 | 	font: var(--h6) var(--font-ui);
468 | }
469 | 
470 | .box {
471 | 	padding: 2.4rem 3.2rem;
472 | 	border-radius: var(--border-r);
473 | }
474 | 
475 | .open-in-repl {
476 | 	position: absolute;
477 | 	margin-top: 4rem;
478 | 	margin-left: -2.5rem;
479 | 	width: 3.6rem;
480 | 	height: 3.6rem;
481 | 	padding: .9rem;
482 | 	background-color: var(--back-light);
483 | 	border-radius: 50%;
484 | 	border-left: .1rem solid #c7c6c6;
485 | }
486 | 
487 | /*	theme colors --------------------------- */
488 | .prime      { color: var(--prime) !important }
489 | .second     { color: var(--second) !important }
490 | .flash       { color: var(--flash) !important }
491 | .black      { color: black !important }
492 | .white      { color: white !important }
493 | 
494 | .back       { background-color: var(--back) !important }
495 | .back-light { background-color: var(--back-light) !important }
496 | .bg-prime   { background-color: var(--prime) !important }
497 | .bg-second  { background-color: var(--second) !important }
498 | .bg-flash    { background-color: var(--flash) !important }
499 | 
500 | 
501 | /*
502 | -----------------------------------------------
503 |   inputs
504 | -----------------------------------------------
505 | */
506 | 
507 | input[type="checkbox"] {
508 | 	/* display: block; */
509 | 	position: relative;
510 | 	height: 1em;
511 | 	width: calc(100% - 0.6em);
512 | 	max-width: 2em;
513 | 	top: -2px;
514 | 	border-radius: 0.5em;
515 | 	-webkit-appearance: none;
516 | 	outline: none;
517 | 	margin: 0 0.6em 0 0;
518 | }
519 | 
520 | input[type="checkbox"]::before {
521 | 	content: "";
522 | 	position: absolute;
523 | 	display: block;
524 | 	height: 100%;
525 | 	width: 100%;
526 | 	border-radius: 1em;
527 | 	top: 0px;
528 | 	left: 0px;
529 | 	background: var(--second);
530 | 	box-sizing: border-box;
531 | 	-webkit-transition: .25s ease-out;
532 | 	padding: 2px;
533 | 	box-sizing: content-box;
534 | }
535 | 
536 | input[type="checkbox"]:checked::before {
537 | 	background: var(--prime);
538 | }
539 | 
540 | input[type="checkbox"]::after {
541 | 	content: "";
542 | 	position: absolute;
543 | 	display: block;
544 | 	height: 1em;
545 | 	width: 1em;
546 | 	top: 2px;
547 | 	left: 2px;
548 | 	border-radius: 1em;
549 | 	background: white;
550 | 	box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1);
551 | 	-webkit-transition: .2s ease-out;
552 | }
553 | 
554 | input[type="checkbox"]:checked::after {
555 | 	left: calc(100% - 9px);
556 | }
557 | 
558 | 
559 | /*
560 | -----------------------------------------------
561 |   media-queries
562 | -----------------------------------------------
563 | */
564 | @media screen and (min-width: 768px) {
565 | 	:root {
566 | 		--side-page:  14vw;
567 | 		--top-offset: 10rem;
568 | 		--side-nav: 4.8rem;
569 | 	}
570 | }
571 | 
572 | @media screen and (min-width: 840px) {
573 | 	.grid.half,
574 | 	.grid { grid-template-columns: repeat(2, 1fr) }
575 | 	.grid > .cols-2,
576 | 	.grid > .cols-3 { grid-column: span 2 }
577 | }
578 | 
579 | @media screen and (min-width: 1100px) {
580 | 	.grid { grid-template-columns: repeat(3, 1fr) }
581 | 	.grid > .cols-2 { grid-column: span 2 }
582 | 	.grid > .cols-3 { grid-column: span 3 }
583 | }
584 | 


--------------------------------------------------------------------------------
/static/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 | 	<g fill="none" stroke="white" stroke-width="2">
4 | 		<line x1='5' y1='12' x2='19' y2='12' />
5 | 		<polyline points='12 5 19 12 12 19' />
6 | 	</g>
7 | </svg>


--------------------------------------------------------------------------------
/static/icons/check.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 | 	<path style="fill: #aa1e1e" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/chevron.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 | 	<path style="stroke: #676778; stroke-width: 2; fill: none" d="M2,8 L12,16 L22,8"/>
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/collapse.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |    <path style="fill: #aa1e1e" d="M19.5,3.09L20.91,4.5L16.41,9H20V11H13V4H15V7.59L19.5,3.09M20.91,19.5L19.5,20.91L15,16.41V20H13V13H20V15H16.41L20.91,19.5M4.5,3.09L9,7.59V4H11V11H4V9H7.59L3.09,4.5L4.5,3.09M3.09,19.5L7.59,15H4V13H11V20H9V16.41L4.5,20.91L3.09,19.5Z" />
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/download.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |     <path fill="#aa1e1e" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/static/icons/dropdown.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |     <path fill="#999" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/expand.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |     <path style="fill: #aa1e1e" d="M9.5,13.09L10.91,14.5L6.41,19H10V21H3V14H5V17.59L9.5,13.09M10.91,9.5L9.5,10.91L5,6.41V10H3V3H10V5H6.41L10.91,9.5M14.5,13.09L19,17.59V14H21V21H14V19H17.59L13.09,14.5L14.5,13.09M13.09,9.5L17.59,5H14V3H21V10H19V6.41L14.5,10.91L13.09,9.5Z" />
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/flip.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |     <path fill="#aa1e1e" d="M12,5C16.97,5 21,7.69 21,11C21,12.68 19.96,14.2 18.29,15.29C19.36,14.42 20,13.32 20,12.13C20,9.29 16.42,7 12,7V10L8,6L12,2V5M12,19C7.03,19 3,16.31 3,13C3,11.32 4.04,9.8 5.71,8.71C4.64,9.58 4,10.68 4,11.88C4,14.71 7.58,17 12,17V14L16,18L12,22V19Z" />
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/fork.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |     <path fill="#aa1e1e" d="M3,4V12.5L6,9.5L9,13C10,14 10,15 10,15V21H14V14C14,14 14,13 13.47,12C12.94,11 12,10 12,10L9,6.58L11.5,4M18,4L13.54,8.47L14,9C14,9 14.93,10 15.47,11C15.68,11.4 15.8,11.79 15.87,12.13L21,7" />
4 | </svg>


--------------------------------------------------------------------------------
/static/icons/link.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 | 	<g fill="none" stroke="#333">
4 | 		<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
5 | 		<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
6 | 		<path d="M7,12L17,12"/>
7 | 	</g>
8 | </svg>


--------------------------------------------------------------------------------
/static/icons/save.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
3 |     <path fill="#aa1e1e" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
4 | </svg>


--------------------------------------------------------------------------------
/static/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"background_color": "#ffffff",
 3 | 	"theme_color": "#ff3e00",
 4 | 	"name": "Svelte",
 5 | 	"short_name": "Svelte",
 6 | 	"display": "minimal-ui",
 7 | 	"start_url": "/",
 8 | 	"icons": []
 9 | }
10 | 


--------------------------------------------------------------------------------
/static/media/rethinking-best-practices.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tonyrewin/svelte-3-blog/e4acfbc68bb0ac0a7e4ae9ac8f4cc68380af1250/static/media/rethinking-best-practices.jpg


--------------------------------------------------------------------------------
/static/workers/bundler.js:
--------------------------------------------------------------------------------
  1 | self.window = self; // egregious hack to get magic-string to work in a worker
  2 | 
  3 | let version;
  4 | 
  5 | let fulfil;
  6 | let ready = new Promise(f => fulfil = f);
  7 | 
  8 | self.addEventListener('message', async event => {
  9 | 	switch (event.data.type) {
 10 | 		case 'init':
 11 | 			version = event.data.version;
 12 | 
 13 | 			importScripts(
 14 | 				`https://unpkg.com/svelte@${version}/compiler.js`,
 15 | 				`https://unpkg.com/rollup@1.0.0/dist/rollup.browser.js`
 16 | 			);
 17 | 			fulfil();
 18 | 
 19 | 			break;
 20 | 
 21 | 		case 'bundle':
 22 | 			if (event.data.components.length === 0) return;
 23 | 
 24 | 			await ready;
 25 | 			const result = await bundle(event.data.components);
 26 | 			if (result) {
 27 | 				postMessage(result);
 28 | 			}
 29 | 
 30 | 			break;
 31 | 	}
 32 | });
 33 | 
 34 | const commonCompilerOptions = {
 35 | 	dev: true,
 36 | };
 37 | 
 38 | let cached = {
 39 | 	dom: null,
 40 | 	ssr: null
 41 | };
 42 | 
 43 | let currentToken;
 44 | 
 45 | const is_svelte_module = id => id === 'svelte' || id.startsWith('svelte/');
 46 | 
 47 | const cache = new Map();
 48 | function fetch_if_uncached(url) {
 49 | 	if (!cache.has(url)) {
 50 | 		cache.set(url, fetch(url)
 51 | 			.then(r => r.text())
 52 | 			.catch(err => {
 53 | 				console.error(err);
 54 | 				cache.delete(url);
 55 | 			}));
 56 | 	}
 57 | 
 58 | 	return cache.get(url);
 59 | }
 60 | 
 61 | async function getBundle(mode, cache, lookup) {
 62 | 	let bundle;
 63 | 	let error;
 64 | 	let warningCount = 0;
 65 | 
 66 | 	const info = {};
 67 | 
 68 | 	try {
 69 | 		bundle = await rollup.rollup({
 70 | 			input: './App.html',
 71 | 			external: id => {
 72 | 				if (id[0] === '.') return false;
 73 | 				if (is_svelte_module(id)) return false;
 74 | 				if (id.startsWith('https://')) return false;
 75 | 				return true;
 76 | 			},
 77 | 			plugins: [{
 78 | 				resolveId(importee, importer) {
 79 | 					// v3 hack
 80 | 					if (importee === `svelte`) return `https://unpkg.com/svelte@${version}/index.mjs`;
 81 | 					if (importee.startsWith(`svelte`)) return `https://unpkg.com/svelte@${version}/${importee.slice(7)}.mjs`;
 82 | 
 83 | 					if (importer && importer.startsWith(`https://`)) {
 84 | 						return new URL(`${importee}.mjs`, importer).href;
 85 | 					}
 86 | 
 87 | 					if (importee in lookup) return importee;
 88 | 				},
 89 | 				load(id) {
 90 | 					if (id.startsWith(`https://`)) return fetch_if_uncached(id);
 91 | 					if (id in lookup) return lookup[id].source;
 92 | 				},
 93 | 				transform(code, id) {
 94 | 					if (!/\.html$/.test(id)) return null;
 95 | 
 96 | 					const name = id.replace(/^\.\//, '').replace(/\.html$/, '');
 97 | 
 98 | 					const { js, css, stats } = svelte.compile(code, Object.assign({
 99 | 						generate: mode,
100 | 						format: 'esm',
101 | 						name: name,
102 | 						filename: name + '.html',
103 | 						onwarn: warning => {
104 | 							console.warn(warning.message);
105 | 							console.log(warning.frame);
106 | 							warningCount += 1;
107 | 						},
108 | 					}, commonCompilerOptions));
109 | 
110 | 					return js;
111 | 				}
112 | 			}],
113 | 			onwarn(warning) {
114 | 				console.warn(warning);
115 | 				warningCount += 1;
116 | 			},
117 | 			cache
118 | 		});
119 | 	} catch (error) {
120 | 		return { error, bundle: null, info: null, warningCount: null }
121 | 	}
122 | 
123 | 	return { bundle, info, error: null, warningCount };
124 | }
125 | 
126 | async function bundle(components) {
127 | 	// console.clear();
128 | 	console.log(`running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold');
129 | 
130 | 	const token = currentToken = {};
131 | 
132 | 	const lookup = {};
133 | 	components.forEach(component => {
134 | 		const path = `./${component.name}.${component.type}`;
135 | 		lookup[path] = component;
136 | 	});
137 | 
138 | 	let dom;
139 | 	let error;
140 | 
141 | 	try {
142 | 		dom = await getBundle('dom', cached.dom, lookup);
143 | 		if (dom.error) {
144 | 			throw dom.error;
145 | 		}
146 | 
147 | 		if (token !== currentToken) {
148 | 			console.error(`aborted`);
149 | 			return;
150 | 		}
151 | 
152 | 		cached.dom = dom.bundle;
153 | 
154 | 		let uid = 1;
155 | 		const importMap = new Map();
156 | 
157 | 		const domResult = await dom.bundle.generate({
158 | 			format: 'iife',
159 | 			name: 'SvelteComponent',
160 | 			globals: id => {
161 | 				const name = `import_${uid++}`;
162 | 				importMap.set(id, name);
163 | 				return name;
164 | 			},
165 | 			sourcemap: true
166 | 		});
167 | 
168 | 		if (token !== currentToken) return;
169 | 
170 | 		const ssr = dom.info.usesHooks
171 | 			? await getBundle('ssr', cached.ssr, lookup)
172 | 			: null;
173 | 
174 | 		if (ssr) {
175 | 			cached.ssr = ssr.bundle;
176 | 			if (ssr.error) {
177 | 				throw ssr.error;
178 | 			}
179 | 		}
180 | 
181 | 		if (token !== currentToken) return;
182 | 
183 | 		const ssrResult = ssr
184 | 			? await ssr.bundle.generate({
185 | 				format: 'iife',
186 | 				name: 'SvelteComponent',
187 | 				globals: id => importMap.get(id),
188 | 				sourcemap: true
189 | 			})
190 | 			: null;
191 | 
192 | 		return {
193 | 			bundle: {
194 | 				imports: dom.bundle.imports,
195 | 				importMap
196 | 			},
197 | 			dom: domResult,
198 | 			ssr: ssrResult,
199 | 			warningCount: dom.warningCount,
200 | 			error: null
201 | 		};
202 | 	} catch (err) {
203 | 		const e = error || err;
204 | 		delete e.toString;
205 | 
206 | 		return {
207 | 			bundle: null,
208 | 			dom: null,
209 | 			ssr: null,
210 | 			warningCount: dom.warningCount,
211 | 			error: Object.assign({}, e, {
212 | 				message: e.message,
213 | 				stack: e.stack
214 | 			})
215 | 		};
216 | 	}
217 | }


--------------------------------------------------------------------------------
/static/workers/compiler.js:
--------------------------------------------------------------------------------
 1 | self.window = self; // egregious hack to get magic-string to work in a worker
 2 | 
 3 | let fulfil_ready;
 4 | const ready = new Promise(f => {
 5 | 	fulfil_ready = f;
 6 | });
 7 | 
 8 | self.addEventListener('message', async event => {
 9 | 	switch (event.data.type) {
10 | 		case 'init':
11 | 			importScripts(`https://unpkg.com/svelte@${event.data.version}/compiler.js`);
12 | 			fulfil_ready();
13 | 			break;
14 | 
15 | 		case 'compile':
16 | 			await ready;
17 | 			postMessage(compile(event.data));
18 | 			break;
19 | 
20 | 	}
21 | });
22 | 
23 | const commonCompilerOptions = {
24 | 	dev: false,
25 | 	css: false
26 | };
27 | 
28 | function compile({ source, options, entry }) {
29 | 	try {
30 | 		const { js, css, stats } = svelte.compile(
31 | 			source,
32 | 			Object.assign({}, commonCompilerOptions, options)
33 | 		);
34 | 
35 | 		return { js: js.code, css: css.code, props: entry ? stats.props : null };
36 | 	} catch (err) {
37 | 		let result = `/* Error compiling component\n\n${err.message}`;
38 | 		if (err.frame) result += `\n${err.frame}`;
39 | 		result += `\n\n*/`;
40 | 		return { code: result, props: null };
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------