├── .env ├── .gitignore ├── .nowignore ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ └── spec.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── now.json ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── client.js ├── components │ ├── CategoryList.svelte │ ├── Nav.svelte │ └── PostsList.svelte ├── routes │ ├── [slug].svelte │ ├── _error.svelte │ ├── _layout.svelte │ ├── articles │ │ └── [category] │ │ │ └── [slug].svelte │ ├── blog │ │ ├── [slug].json.js │ │ ├── [slug].svelte │ │ ├── _posts.js │ │ ├── index.json.js │ │ └── index.svelte │ ├── categories │ │ └── [slug] │ │ │ ├── index.svelte │ │ │ └── page │ │ │ └── [number].svelte │ ├── index.svelte │ └── page │ │ └── [number].svelte ├── server.js ├── service-worker.js └── template.html └── static ├── favicon.png ├── global.css ├── great-success.png ├── logo-192.png ├── logo-512.png └── manifest.json /.env: -------------------------------------------------------------------------------- 1 | SAPPER_APP_API_URL=http://sapperapi.localhost/wp-json 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules/ 3 | /src/node_modules/@sapper/ 4 | yarn-error.log 5 | /cypress/screenshots/ 6 | /__sapper__/ 7 | .idea 8 | -------------------------------------------------------------------------------- /.nowignore: -------------------------------------------------------------------------------- 1 | __sapper__ 2 | cypress 3 | node_modules 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a repository for "Creating Svelte, Sapper and WordPress Website" tutorial series. You can [check out the series here](http://watch-learn.com/series/creating-svelte-sapper-and-wordpress-website). 2 | 3 | You can go to [releases](https://github.com/ivandoric/creating-svelte-sapper-wp-site/releases) to download the code for most of the videos in the series. Releases are made per episode. 4 | -------------------------------------------------------------------------------- /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

[slug].svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 |

{page.title.rendered}

18 | 19 |

20 | {@html page.content.rendered} 21 |

22 | 23 | -------------------------------------------------------------------------------- /src/routes/_error.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 31 | {status} 32 | 33 | 34 |

{status}

35 | 36 |

{error.message}

37 | 38 | {#if dev && error.stack} 39 |

{error.stack}

40 | {/if} 41 | -------------------------------------------------------------------------------- /src/routes/_layout.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 | 27 | 28 | 39 | 40 |

41 | 42 |

43 | 44 | 45 |

46 | 47 |

48 |

49 | -------------------------------------------------------------------------------- /src/routes/articles/[category]/[slug].svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 17 | 18 |

{post.title.rendered}

19 | 20 |

21 | {@html post.content.rendered} 22 |

23 | -------------------------------------------------------------------------------- /src/routes/blog/[slug].json.js: -------------------------------------------------------------------------------- 1 | import posts from './_posts.js'; 2 | 3 | const lookup = new Map(); 4 | posts.forEach(post => { 5 | lookup.set(post.slug, JSON.stringify(post)); 6 | }); 7 | 8 | export function get(req, res, next) { 9 | // the `slug` parameter is available because 10 | // this file is called [slug].json.js 11 | const { slug } = req.params; 12 | 13 | if (lookup.has(slug)) { 14 | res.writeHead(200, { 15 | 'Content-Type': 'application/json' 16 | }); 17 | 18 | res.end(lookup.get(slug)); 19 | } else { 20 | res.writeHead(404, { 21 | 'Content-Type': 'application/json' 22 | }); 23 | 24 | res.end(JSON.stringify({ 25 | message: `Not found` 26 | })); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/routes/blog/[slug].svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | 20 | 55 | 56 | 57 | {post.title} 58 | 59 | 60 |

{post.title}

61 | 62 |

63 | {@html post.html} 64 |

65 | -------------------------------------------------------------------------------- /src/routes/blog/_posts.js: -------------------------------------------------------------------------------- 1 | // Ordinarily, you'd generate this data from markdown files in your 2 | // repo, or fetch them from a database of some kind. But in order to 3 | // avoid unnecessary dependencies in the starter template, and in the 4 | // service of obviousness, we're just going to leave it here. 5 | 6 | // This file is called `_posts.js` rather than `posts.js`, because 7 | // we don't want to create an `/blog/posts` route — the leading 8 | // underscore tells Sapper not to do that. 9 | 10 | const posts = [ 11 | { 12 | title: 'What is Sapper?', 13 | slug: 'what-is-sapper', 14 | html: ` 15 |

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

16 | 17 |

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

18 | 19 |

Code-splitting, dynamic imports and hot module replacement, powered by webpack
Server-side rendering (SSR) with client-side hydration
Service worker for offline support, and all the PWA bells and whistles
The nicest development experience you've ever had, or your money back

25 | 26 |

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

27 | ` 28 | }, 29 | 30 | { 31 | title: 'How to use Sapper', 32 | slug: 'how-to-use-sapper', 33 | html: ` 34 |

Step one

35 |

Create a new project, using degit:

36 | 37 |

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

42 | 43 |

Step two

44 |

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

45 | 46 |

Step three

47 |

...

48 | 49 |

Step four

50 |

Resist overdone joke formats.

51 | ` 52 | }, 53 | 54 | { 55 | title: 'Why the name?', 56 | slug: 'why-the-name', 57 | html: ` 58 |

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

59 | 60 |

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

61 | ` 62 | }, 63 | 64 | { 65 | title: 'How is Sapper different from Next.js?', 66 | slug: 'how-is-sapper-different-from-next', 67 | html: ` 68 |

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

69 | 70 |

It's powered by Svelte instead of React, so it's faster and your apps are smaller
Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is src/routes/blog/[slug].html
As well as pages (Svelte components, which render on server or client), you can create server routes in your routes directory. These are just .js files that export functions corresponding to HTTP methods, and receive Express request and response objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page
Links are just <a> elements, rather than framework-specific <Link> components. That means, for example, that this link right here, despite being inside a blob of HTML, works with the router as you'd expect.

76 | ` 77 | }, 78 | 79 | { 80 | title: 'How can I get involved?', 81 | slug: 'how-can-i-get-involved', 82 | html: ` 83 |

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

84 | ` 85 | } 86 | ]; 87 | 88 | posts.forEach(post => { 89 | post.html = post.html.replace(/^\t{3}/gm, ''); 90 | }); 91 | 92 | export default posts; 93 | -------------------------------------------------------------------------------- /src/routes/blog/index.json.js: -------------------------------------------------------------------------------- 1 | import posts from './_posts.js'; 2 | 3 | const contents = JSON.stringify(posts.map(post => { 4 | return { 5 | title: post.title, 6 | slug: post.slug 7 | }; 8 | })); 9 | 10 | export function get(req, res) { 11 | res.writeHead(200, { 12 | 'Content-Type': 'application/json' 13 | }); 14 | 15 | res.end(contents); 16 | } -------------------------------------------------------------------------------- /src/routes/blog/index.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 19 | 20 | 21 | Blog 22 | 23 | 24 |

Listing posts from {catName} category

53 | 54 | 55 | -------------------------------------------------------------------------------- /src/routes/categories/[slug]/page/[number].svelte: -------------------------------------------------------------------------------- 1 | 2 | Sapper WordPress Site 3 | 4 | 5 | 41 | 42 | 54 | 55 |

Listing posts from {catName} category

56 | 57 | 58 | -------------------------------------------------------------------------------- /src/routes/index.svelte: -------------------------------------------------------------------------------- 1 | 2 | Sapper WordPress Site 3 | 4 | 5 | 32 | 33 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/routes/page/[number].svelte: -------------------------------------------------------------------------------- 1 | 2 | Sapper WordPress Site 3 | 4 | 5 | 34 | 35 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/server.js: -------------------------------------------------------------------------------- 1 | import sirv from 'sirv'; 2 | import polka from 'polka'; 3 | import compression from 'compression'; 4 | import * as sapper from '@sapper/server'; 5 | 6 | const { PORT, NODE_ENV } = process.env; 7 | const dev = NODE_ENV === 'development'; 8 | 9 | const app = polka() // You can also use Express 10 | .use( 11 | compression({ threshold: 0 }), 12 | sirv('static', { dev }), 13 | sapper.middleware() 14 | ) 15 | .listen(PORT, err => { 16 | if (err) console.log('error', err); 17 | }); 18 | 19 | export default app.handler 20 | -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | import { timestamp, files, shell, routes } from '@sapper/service-worker'; 2 | 3 | const ASSETS = `cache${timestamp}`; 4 | 5 | // `shell` is an array of all the files generated by the bundler, 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 bundler-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 `service-worker-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('/service-worker-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 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | %sapper.base% 9 | 10 | 11 | 12 | 13 | 14 | 17 | %sapper.styles% 18 | 19 | 21 | %sapper.head% 22 | 23 | 24 | 26 |

%sapper.html%

27 | 28 | 31 | %sapper.scripts% 32 | 33 | 34 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivandoric/creating-svelte-sapper-wp-site/580c7d667a16e799a4fe4074caa7051721a118fa/static/favicon.png -------------------------------------------------------------------------------- /static/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 4 | font-size: 14px; 5 | line-height: 1.5; 6 | color: #333; 7 | } 8 | 9 | h1, h2, h3, h4, h5, h6 { 10 | margin: 0 0 0.5em 0; 11 | font-weight: 400; 12 | line-height: 1.2; 13 | } 14 | 15 | h1 { 16 | font-size: 2em; 17 | } 18 | 19 | a { 20 | color: inherit; 21 | } 22 | 23 | code { 24 | font-family: menlo, inconsolata, monospace; 25 | font-size: calc(1em - 2px); 26 | color: #555; 27 | background-color: #f0f0f0; 28 | padding: 0.2em 0.4em; 29 | border-radius: 2px; 30 | } 31 | 32 | @media (min-width: 400px) { 33 | body { 34 | font-size: 16px; 35 | } 36 | } -------------------------------------------------------------------------------- /static/great-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivandoric/creating-svelte-sapper-wp-site/580c7d667a16e799a4fe4074caa7051721a118fa/static/great-success.png -------------------------------------------------------------------------------- /static/logo-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivandoric/creating-svelte-sapper-wp-site/580c7d667a16e799a4fe4074caa7051721a118fa/static/logo-192.png -------------------------------------------------------------------------------- /static/logo-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivandoric/creating-svelte-sapper-wp-site/580c7d667a16e799a4fe4074caa7051721a118fa/static/logo-512.png -------------------------------------------------------------------------------- /static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#ffffff", 3 | "theme_color": "#333333", 4 | "name": "TODO", 5 | "short_name": "TODO", 6 | "display": "minimal-ui", 7 | "start_url": "/", 8 | "icons": [ 9 | { 10 | "src": "logo-192.png", 11 | "sizes": "192x192", 12 | "type": "image/png" 13 | }, 14 | { 15 | "src": "logo-512.png", 16 | "sizes": "512x512", 17 | "type": "image/png" 18 | } 19 | ] 20 | } 21 | --------------------------------------------------------------------------------