Commit 2d8c74b6 authored by Bruno Boiget's avatar Bruno Boiget
Browse files

add settings and dark theme

parent f846d5be
......@@ -57,5 +57,6 @@
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel="prefetch" aria-current={segment === 'blog' ? 'page' : undefined} href="blog">blog</a></li>
<li><a rel="prefetch" aria-current={segment === 'contact' ? 'page' : undefined} href="contact">contact</a></li>
<li><a rel="prefetch" aria-current={segment === 'settings' ? 'page' : undefined} href="settings">réglages</a></li>
</ul>
</nav>
<script context="module">
export async function preload({ params }) {
// the `slug` parameter is available because
// this file is called [slug].svelte
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
export async function preload({ params }) {
console.log('preload dans le contexte du module');
console.log('[slug] params', params);
// the `slug` parameter is available because
// this file is called [slug].svelte
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);
}
}
if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
export let post;
export let post;
console.log('preload HORS contexte du module [slug].svelte');
</script>
<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
......@@ -26,39 +29,39 @@
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(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) {
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(pre) :global(code) {
background-color: transparent;
padding: 0;
}
.content :global(ul) {
line-height: 1.5;
}
.content :global(ul) {
line-height: 1.5;
}
.content :global(li) {
margin: 0 0 0.5em 0;
}
.content :global(li) {
margin: 0 0 0.5em 0;
}
</style>
<svelte:head>
<title>{post.title}</title>
<title>{post.title}</title>
</svelte:head>
<h1>{post.title}</h1>
<div class="content">
{@html post.html}
{@html post.html}
</div>
<script context="module">
export async function preload() {
console.log(this);
console.log('settings preload');
}
// utiliser this.fetch() au lieu de fetch() (inconnu si executé côté serveur
</script>
<script>
console.log('settings');
let isDarkMode = false;
let moninput;
</script>
<svelte:head>
<title>Settings</title>
{#if isDarkMode}
<!-- load CSS in HEAD -->
<link rel="stylesheet" href="dark-theme.css" />
{/if}
</svelte:head>
<h1>settings</h1>
<input type="text" bind:this={moninput} />
<br />
<button
on:click={() => {
moninput.focus();
isDarkMode = !isDarkMode;
}}>dark mode</button>
body {
background-color: rgb(72, 71, 78);
color: white;
}
main {
background-color: rgb(72, 71, 78);
color: white;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment