├── .npmrc
├── static
    └── favicon.png
├── .gitignore
├── src
    ├── styles
    │   ├── reset.css
    │   └── globals.css
    ├── lib
    │   ├── prismicio.js
    │   └── nav.svelte
    ├── app.html
    └── routes
    │   ├── index.js
    │   ├── [uid].js
    │   ├── __layout.svelte
    │   ├── [uid].svelte
    │   └── index.svelte
├── netlify.toml
├── svelte.config.js
├── jsconfig.json
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samlfair/svelte-tutorial/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 | 


--------------------------------------------------------------------------------
/src/styles/reset.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 | }
5 | 
6 | * {
7 |   box-sizing: border-box;
8 | }
9 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = "build"
4 | 
5 | [functions]
6 |   node_bundler = "esbuild"


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | 
 3 | /** @type {import('@sveltejs/kit').Config} */
 4 | const config = {
 5 | 	kit: {
 6 | 		adapter: adapter()
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"baseUrl": ".",
 4 | 		"paths": {
 5 | 			"$lib": ["src/lib"],
 6 | 			"$lib/*": ["src/lib/*"]
 7 | 		}
 8 | 	},
 9 | 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | .container {
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   align-items: center;
 9 |   padding: 0px 20px;
10 | }
11 | 
12 | .container > * {
13 |   width: 100%;
14 |   max-width: 700px;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lib/prismicio.js:
--------------------------------------------------------------------------------
 1 | import * as prismic from '@prismicio/client'
 2 | 
 3 | // Update your repository name here
 4 | const repositoryName = 'svelte-tutorial'
 5 | 
 6 | const createClient = (params) => {
 7 |   return prismic.createClient(repositoryName, params)
 8 | }
 9 | 
10 | export default createClient
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Svelte Tutorial Example Repo
2 | 
3 | [See this project live](https://lucid-murdock-988f01.netlify.app/).
4 | 
5 | Want to learn Svelte and SvelteKit? Check out [this tutorial](https://prismic.io/blog/svelte-sveltekit-tutorial).
6 | 
7 | This repo is the final product of the above tutorial. It is a two-page website using Svelte and Sveltekit with content managed in Prismic.
8 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="description" content="" />
 6 | 		<link rel="icon" href="%svelte.assets%/favicon.png" />
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 		%svelte.head%
 9 | 	</head>
10 | 	<body>
11 | 		<div>%svelte.body%</div>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
 1 | // ~/src/routes/index.js
 2 | 
 3 | import createClient from '$lib/prismicio'
 4 | 
 5 | export async function get({ fetch }) {
 6 |   const client = createClient({ fetch })
 7 |   const document = await client.getByUID('page', 'homepage')
 8 | 
 9 |   if (document)
10 |     return {
11 |       body: {
12 |         document,
13 |       },
14 |     }
15 | 
16 |   return {
17 |     status: 404,
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/routes/[uid].js:
--------------------------------------------------------------------------------
 1 | // ~/src/routes/[uid]].js
 2 | 
 3 | import createClient from '$lib/prismicio'
 4 | 
 5 | export async function get({ fetch, params }) {
 6 |   const client = createClient({ fetch })
 7 |   const { uid } = params
 8 |   const document = await client.getByUID('page', uid)
 9 | 
10 |   if (document)
11 |     return {
12 |       body: {
13 |         document,
14 |       },
15 |     }
16 | 
17 |   return {
18 |     status: 404,
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/lib/nav.svelte:
--------------------------------------------------------------------------------
 1 | <!-- ~/src/lib/nav.svelte -->
 2 | 
 3 | <nav class="container">
 4 |   <div class="menu">
 5 |     <a href="/">Home</a>
 6 |     <a href="/about">About</a>
 7 |   </div>
 8 | </nav>
 9 | 
10 | <style>  
11 |   nav {
12 |     width: 100%;
13 |     padding-top: 25px;
14 |     padding-bottom: 25px;
15 |     text-shadow: 0px 1px 3px rgba(0,0,0,.8), 0px 0px 6px rgba(0,0,0,.8);
16 |   }
17 |   
18 |   nav a {
19 |     color: white;
20 |     text-decoration: none;
21 |     padding-right: 1rem;
22 |   }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-kit-app",
 3 |   "version": "0.0.1",
 4 |   "scripts": {
 5 |     "dev": "svelte-kit dev",
 6 |     "build": "svelte-kit build",
 7 |     "package": "svelte-kit package",
 8 |     "preview": "svelte-kit preview"
 9 |   },
10 |   "devDependencies": {
11 |     "@sveltejs/adapter-auto": "next",
12 |     "@sveltejs/adapter-netlify": "^1.0.0-next.46",
13 |     "@sveltejs/kit": "next",
14 |     "svelte": "^3.44.0"
15 |   },
16 |   "type": "module",
17 |   "dependencies": {
18 |     "@prismicio/client": "^6.3.0",
19 |     "@prismicio/helpers": "^2.1.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
 1 | <!-- ~/src/routes/__layout.svelte -->
 2 | 
 3 | <script>
 4 |   import Nav from "./../lib/nav.svelte"
 5 |   import "./../styles/reset.css";
 6 |   import "./../styles/globals.css"
 7 | </script>
 8 | 
 9 | <div class="flex-layout">
10 |   <header class="absolute">
11 |     <Nav />
12 |   </header>
13 |   <slot></slot>
14 |   <p class="footer">© Acme Corp, 1951</p>
15 | </div>
16 | 
17 | <style>
18 |   .absolute {
19 |     position: absolute;
20 |     width: 100%;
21 |   }
22 | 
23 |   .footer {
24 |     margin: 3rem 0;
25 |     text-align: center;
26 |   }
27 | 
28 |   .flex-layout {
29 |     min-height: 100vh;
30 |     display: flex;
31 |     flex-direction: column;
32 |     justify-content: space-between;
33 |   }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/routes/[uid].svelte:
--------------------------------------------------------------------------------
 1 | <!-- ~/src/routes/index.svelte -->
 2 | 
 3 | <script>
 4 |   import * as prismicH from '@prismicio/helpers';
 5 |   
 6 |   export let document;
 7 | </script>
 8 | 
 9 | <main>
10 |   <div class="header container" style="background-image: url('{document.data.image.url}')">	 
11 |     <h1>
12 |       {document.data.title}
13 |     </h1>
14 |   </div>
15 |   <div class="container">
16 |     <div class="text">
17 |       {@html prismicH.asHTML(document.data.content)}
18 |     </div>
19 |   </div>
20 | </main>
21 | 
22 | <style>
23 |   .container > * {
24 |     width: 100%;
25 |     max-width: 700px;
26 |   }
27 | 
28 |   .header {
29 |     color: white;
30 |     background-size: cover;
31 |     min-height: 25vw;
32 |     padding-top: 2rem;
33 |     justify-content: flex-end;
34 |   }
35 | </style>


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <!-- ~/src/routes/index.svelte -->
 2 | 
 3 | <script>
 4 |   import * as prismicH from '@prismicio/helpers';
 5 |   
 6 |   export let document;
 7 | </script>
 8 | 
 9 | <main>
10 |   <div class="header container" style="background-image: url('{document.data.image.url}')">	 
11 |     <h1>
12 |       {document.data.title}
13 |     </h1>
14 |   </div>
15 |   <div class="container">
16 |     <div class="text">
17 |       {@html prismicH.asHTML(document.data.content)}
18 |     </div>
19 |   </div>
20 | </main>
21 | 
22 | <style>
23 |   .container > * {
24 |     width: 100%;
25 |     max-width: 700px;
26 |   }
27 | 
28 |   .header {
29 |     color: white;
30 |     background-size: cover;
31 |     min-height: 25vw;
32 |     padding-top: 2rem;
33 |     justify-content: flex-end;
34 |   }
35 | </style>


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