michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Svelte kit transition

Browse Source
This commit is contained in:
Michal Vanko
2021-04-24 18:24:17 +02:00
parent 59db328b4b
commit 58347b9ca6
29 changed files with 3451 additions and 7180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/template.html → src/app.html
View File

@ -11,35 +11,20 @@
<link rel="alternate" type="application/rss+xml" title="RSS feed for latest posts" href="https://michalvanko.dev/feed.xml" />
<link rel="alternate" title="JSON feed for latest posts" type="application/json" href="https://michalvanko.dev/feed.json" />
%sapper.base%
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="fonts.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/print.css" media="print" />
<link rel="stylesheet" href="/fonts.css" />
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i&display=swap&subset=latin-ext" rel="stylesheet"> -->
<link rel="manifest" href="manifest.json" />
<link rel="icon" type="image/svg+xml" href="m-svgfavicon-192x192.svg" />
<link rel="icon" type="image/png" href="m-svgfavicon-192x192.png" />
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->
%sapper.styles%
<link rel="manifest" href="/manifest.json" />
<link rel="icon" type="image/svg+xml" href="/m-svgfavicon-192x192.svg" />
<link rel="icon" type="image/png" href="/m-svgfavicon-192x192.png" />
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
%sapper.head%
%svelte.head%
<!-- Sapper creates a <script> tag containing `app/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts%
</head>
<body>
<!-- The application will be rendered inside this element,
because `app/client.js` references it -->
<div id="sapper">%sapper.html%</div>
%svelte.body%
</body>
</html>

5
src/client.ts
View File

@ -1,5 +0,0 @@
import * as sapper from '@sapper/app';
sapper.start({
target: document.querySelector('#sapper')
});

2
src/components/Nav.svelte
View File

@ -60,7 +60,7 @@
<section class="nav-main">
<ul>
<li>
<a class={classNames({ selected: segment === undefined })} href=".">
<a class={classNames({ selected: segment === undefined })} href="/">
Introduction
</a>
</li>

2
src/components/blog/article-footer.svelte
View File

@ -43,7 +43,7 @@
<ul class="tags-list">
{#each post.tags as tag}
<li>
<a href="blog?tag={tag}">{tag}</a>
<a href="/blog?tag={tag}">{tag}</a>
</li>
{/each}
</ul>

3
src/global.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />
/// <reference types="vite/client" />

6
src/routes/_layout.svelte → src/routes/$layout.svelte
View File

@ -1,11 +1,11 @@
<script context="module" lang="typescript">
import { take } from 'ramda'
export function preload({ params, query }) {
return this.fetch(`blog.json`)
export function load({ fetch }) {
return fetch(`/blog.json`)
.then((r) => r.json())
.then((posts) => {
return { latestPosts: take(5, posts) }
return { props: { latestPosts: take(5, posts) }}
})
}
</script>

41
src/routes/_error.svelte
View File

@ -1,41 +0,0 @@
<script lang="typescript">
export let status
export let error
const dev = process.env.NODE_ENV === 'development'
</script>
<style>
h1,
p {
margin: 0 auto;
}
h1 {
font-size: 2.8em;
font-weight: 700;
margin: 0 0 0.5em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
<svelte:head>
<title>{status}</title>
</svelte:head>
<h1>{status}</h1>
<p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}

23
src/routes/blog/[slug].json.ts
View File

@ -8,23 +8,25 @@ export interface SinglePost {
body: string
}
export async function get(req, res, next) {
export async function get({ params }) {
// the `slug` parameter is available because
// this file is called [slug].json.js
const { slug } = req.params
const { slug } = params
let postSource: string
try {
postSource = await promisify(readFile)(`_posts/blog/${slug}.md`, 'utf-8')
} catch (e) {
if (e.code === 'ENOENT') {
res.statusCode = 404
res.end('Post not found \n' + e.toString())
return
return {
status: 404,
body: 'Post not found \n' + e.toString(),
}
}
return {
status: 500,
body: 'Error loading post source file. \n' + e.toString(),
}
res.statusCode = 500
res.end('Error loading post source file. \n' + e.toString())
return
}
const parsedPost = fm<PostAttributes>(postSource)
@ -34,6 +36,7 @@ export async function get(req, res, next) {
body: parsedPost.body,
})
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify(response))
return {
body: response,
}
}

37
src/routes/blog/[slug].svelte
View File

@ -1,25 +1,37 @@
<script context="module">
export async function preload({ params, query }) {
const res = await this.fetch(`blog/${params.slug}.json`)
const data = await res.json()
if (res.status === 200) {
return { post: data }
} else {
this.error(res.status, data.message)
<script context="module" lang="typescript">
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ fetch, page: { params }}) {
try {
const res = await fetch(`${params.slug}.json`)
const data = await res.json()
if (res.ok) {
return { props: { post: data }}
}
return {
status: res.status,
error: new Error(`Could not load ${params.slug} post`)
}
} catch(e) {
return {
status: 500,
error: e
}
}
}
</script>
<script>
<script lang="typescript">
import { onMount } from 'svelte'
import ArticleFooter from '../../components/blog/article-footer.svelte'
import Prism from '../../../static/prism.js'
// import Prism from '../../../static/prism.js'
export let post
onMount(() => {
Prism.highlightAll()
// Prism.highlightAll()
})
</script>
@ -44,7 +56,6 @@
so we have to use the :global(...) modifier to target
all elements inside .content
*/
.content :global(pre) {
background-color: #f9f9f9;
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);

12
src/routes/blog/index.json.ts
View File

@ -1,10 +1,10 @@
import { getBlogListing } from './_content'
export async function get(req, res) {
const { tag } = req.query
export async function get({ query }) {
const { tag } = query
const filteredContents = await getBlogListing(tag)
res.writeHead(200, {
'Content-Type': 'application/json',
})
res.end(JSON.stringify(filteredContents))
return {
status: 200,
body: filteredContents,
}
}

9
src/routes/blog/index.svelte
View File

@ -1,15 +1,18 @@
<script context="module" lang="typescript">
export function preload({ params, query }) {
/**
* @type {import('@sveltejs/kit').Load}
*/
export function load({ fetch, page: { params, query }}) {
const blogQuery = query
? '?' +
Object.entries(query)
.map(q => q.join('='))
.join('&')
: ''
return this.fetch(`blog.json${blogQuery}`)
return fetch(`blog.json${blogQuery}`)
.then(r => r.json())
.then(posts => {
return { posts, query }
return {props: { posts, query }}
})
}
</script>

10
src/routes/feed/index.json.ts
View File

@ -1,10 +1,10 @@
import { getFeed } from './_feed'
export async function get(req, res) {
export async function get() {
const feed = await getFeed()
res.writeHead(200, {
'Content-Type': 'application/json',
})
res.end(feed.json1())
return {
status: 200,
body: feed.json1(),
}
}

11
src/routes/feed/index.xml.ts
View File

@ -3,8 +3,11 @@ import { getFeed } from './_feed'
export async function get(req, res) {
const feed = await getFeed()
res.writeHead(200, {
'Content-Type': 'application/xml',
})
res.end(feed.rss2())
return {
status: 200,
headers: {
'Content-Type': 'application/xml',
},
body: feed.rss2(),
}
}

6
src/routes/index.svelte
View File

@ -1,9 +1,3 @@
<script context="module">
// export async function preload() {
// return this.redirect(302, 'portfolio')
// }
</script>
<svelte:head>
<title>Introduction @michalvankodev</title>
</svelte:head>

15
src/routes/portfolio/index.json.ts
View File

@ -22,14 +22,15 @@ export interface PortfolioAttributes {
education: RecordAttributes[]
}
export async function get(req, res, next) {
export async function get() {
let pageSource: string
try {
pageSource = await promisify(readFile)('_pages/portfolio.md', 'utf-8')
} catch (e) {
res.statusCode = 500
res.end('Error loading portfolio source file. \n' + e.toString())
return
return {
status: 500,
body: 'Error loading portfolio source file. \n' + e.toString(),
}
}
const parsed = fm<PortfolioAttributes>(pageSource)
@ -52,6 +53,8 @@ export async function get(req, res, next) {
education,
}
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify(response))
return {
status: 200,
body: response,
}
}

11
src/routes/portfolio/index.svelte
View File

@ -1,9 +1,14 @@
<script context="module">
export async function preload() {
const res = await this.fetch('portfolio.json')
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ fetch }) {
const res = await fetch('portfolio.json')
const content = await res.json()
return {
content,
props: {
content,
}
}
}
</script>

17
src/server.ts
View File

@ -1,17 +0,0 @@
import sirv from 'sirv'
import polka from 'polka'
import compression from 'compression'
import * as sapper from '@sapper/server'
const { PORT, NODE_ENV } = process.env
const dev = NODE_ENV === 'development'
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, (err) => {
if (err) console.log('error', err)
})

4
src/service-worker.js
View File

@ -1,10 +1,10 @@
import { timestamp, files, shell } from '@sapper/service-worker'
import { timestamp, files, build } from '$service-worker'
const ASSETS = `cache${timestamp}`
// `shell` is an array of all the files generated by the bundler,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(files)
const to_cache = build.concat(files)
const staticAssets = new Set(to_cache)
self.addEventListener('install', (event) => {