67 lines
1.2 KiB
HTML
67 lines
1.2 KiB
HTML
|
<:Head>
|
||
|
|
<title>{{post.title}}</title>
|
||
|
|
</:Head>
|
||
|
|
|
||
|
|
<Layout page='blog'>
|
||
|
|
<h1>{{post.title}}</h1>
|
||
|
|
|
||
|
|
<div class='content'>
|
||
|
|
{{{post.html}}}
|
||
|
|
</div>
|
||
|
|
</Layout>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/*
|
||
|
|
By default, CSS is locally scoped to the component,
|
||
|
|
and any unused styles are dead-code-eliminated.
|
||
|
|
In this page, Svelte can't know which elements are
|
||
|
|
going to appear inside the {{{post.html}}} block,
|
||
|
|
so we have to use the :global(...) modifier to target
|
||
|
|
all elements inside .content
|
||
|
|
*/
|
||
|
|
.content :global(h2) {
|
||
|
|
font-size: 1.4em;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content :global(pre) {
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
|
||
|
|
padding: 0.5em;
|
||
|
|
border-radius: 2px;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content :global(pre) :global(code) {
|
||
|
|
background-color: transparent;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content :global(ul) {
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content :global(li) {
|
||
|
|
margin: 0 0 0.5em 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Layout from '../_components/Layout.html';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout
|
||
|
|
},
|
||
|
|
|
||
|
|
preload({ params, query }) {
|
||
|
|
// the `slug` parameter is available because this file
|
||
|
|
// is called [slug].html
|
||
|
|
const { slug } = params;
|
||
|
|
|
||
|
|
return fetch(`/api/blog/${slug}`).then(r => r.json()).then(post => {
|
||
|
|
return { post };
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|