Compare commits
2 Commits
86ad0c5ee7
...
57b87d318c
| Author | SHA1 | Date |
|---|---|---|
 Jill
|
57b87d318c | |
|
Jill
|
734dcca462 |
24
src/app.css
24
src/app.css
|
|
@ -19,15 +19,6 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
|
|
@ -48,3 +39,18 @@ a:hover {
|
|||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
body > main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
body > footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -8,6 +8,6 @@
|
|||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div>%svelte.body%</div>
|
||||
%svelte.body%
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<style>
|
||||
.footer {
|
||||
background-color: rgb(220, 226, 221);
|
||||
|
||||
padding: 2em;
|
||||
|
||||
font-size: small;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
}
|
||||
a:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.footer {
|
||||
background-color: rgb(20, 21, 21);
|
||||
color: #888;
|
||||
}
|
||||
a {
|
||||
color: #aaa;
|
||||
}
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer">
|
||||
<a href="https://git.oat.zone/oat/guidebook" target="_blank"><b>Guidebook</b></a> is maintained by <b>Jill "oatmealine" Monoids</b> and is licensed under <a href="https://git.oat.zone/oat/guidebook/src/branch/main/LICENSE" target="_blank"><b>GPL-3.0</b></a>.
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
width: calc(100%);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: 0px 2px 15px rgba(10, 10, 10, 0.4);
|
||||
box-shadow: 0px 2px 8px rgba(10, 10, 10, 0.2);
|
||||
background-color: rgb(140, 241, 100);
|
||||
color: rgb(30,31,31);
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import Markdown from 'svelte-exmarkdown';
|
||||
import { gfmPlugin } from 'svelte-exmarkdown/gfm';
|
||||
import Code from './Code.svelte';
|
||||
import Link from './Link.svelte';
|
||||
import Section from './Section.svelte';
|
||||
import Code from './markdown/Code.svelte';
|
||||
import Link from './markdown/Link.svelte';
|
||||
import Section from './markdown/Section.svelte';
|
||||
|
||||
const highlightPlugin = {
|
||||
renderer: {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</style>
|
||||
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a {...properties} {target}>
|
||||
<a {...properties} {target} rel={isExternal ? 'nofollow noreferrer external' : ''}>
|
||||
<Children {children} />
|
||||
{#if isExternal}
|
||||
<span class="icon">
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import Children from 'svelte-exmarkdown/renderer/Children.svelte';
|
||||
import { toAnchor } from './anchors';
|
||||
import { toAnchor } from '$lib/anchors';
|
||||
export let children;
|
||||
export let properties;
|
||||
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import themeDark from 'svelte-highlight/styles/apprentice';
|
||||
import themeLight from 'svelte-highlight/styles/atelier-forest-light';
|
||||
import Header from '$lib/Header.svelte';
|
||||
import Footer from '$lib/Footer.svelte';
|
||||
|
||||
let theme = `<style>
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
|
@ -20,9 +21,31 @@ ${themeDark.slice(7, -7)}
|
|||
{@html theme}
|
||||
</svelte:head>
|
||||
|
||||
<style>
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<Header/>
|
||||
</header>
|
||||
<main>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<Footer/>
|
||||
</footer>
|
||||
|
|
@ -10,6 +10,10 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Guidebook</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="shortdesc">
|
||||
<Page content=
|
||||
{`
|
||||
|
|
|
|||
|
|
@ -2,18 +2,19 @@ import { getPost, getPostsFlat, isDir } from "$lib/pages";
|
|||
|
||||
export async function get({ params }) {
|
||||
let dir = await isDir(params.name);
|
||||
let split = params.name.split('/');
|
||||
if (dir === null) {
|
||||
return {status: 404};
|
||||
} else if (dir) {
|
||||
return {
|
||||
body: {
|
||||
pages: await getPostsFlat(params.name)
|
||||
pages: await getPostsFlat(params.name),
|
||||
loc: split[split.length - 1]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let pages = [];
|
||||
|
||||
let split = params.name.split('/');
|
||||
if (split.length > 1) {
|
||||
pages = await getPostsFlat(split[split.length - 2]);
|
||||
}
|
||||
|
|
@ -25,7 +26,8 @@ export async function get({ params }) {
|
|||
return {
|
||||
body: {
|
||||
page: post,
|
||||
pages: pages
|
||||
pages: pages,
|
||||
loc: split[split.length - 2]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,22 @@
|
|||
import PageRenderer from './_page.svelte';
|
||||
export let page;
|
||||
export let pages;
|
||||
export let loc;
|
||||
</script>
|
||||
|
||||
{#if page}
|
||||
<PageRenderer {page} {pages}/>
|
||||
<PageRenderer {page} {pages} {loc}/>
|
||||
{:else if pages}
|
||||
<style>
|
||||
.pagesin {
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="pagesin">Pages in <b>{loc}</b>:</div>
|
||||
|
||||
<Pages {pages}/>
|
||||
{:else}
|
||||
404!
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import Pages from "$lib/Pages.svelte";
|
||||
export let page;
|
||||
export let pages;
|
||||
export let loc;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -11,6 +12,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
max-width: 100%;
|
||||
}
|
||||
.side {
|
||||
min-width: 120px;
|
||||
|
|
@ -29,6 +31,24 @@
|
|||
padding: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.other {
|
||||
color: #888;
|
||||
margin-top: 2em;
|
||||
max-width: 90%;
|
||||
padding-left: 4em;
|
||||
padding-right: 4em;
|
||||
text-align: center;
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
|
||||
.viewall {
|
||||
margin-top: 2em;
|
||||
font-size: 0.9em;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.side {
|
||||
display: none;
|
||||
|
|
@ -80,10 +100,13 @@
|
|||
</nav>
|
||||
</div>
|
||||
<content>
|
||||
<Page content={page.content}></Page>
|
||||
<Page content={page.content}/>
|
||||
</content>
|
||||
</div>
|
||||
|
||||
{#if pages}
|
||||
{#if pages && pages.length > 0}
|
||||
<div class="other">Other pages in this category:</div>
|
||||
<br>
|
||||
<Pages pages={pages.slice(0, 3)}/>
|
||||
<a class="viewall" href="/p/{page.path.split('/').slice(0, -1).join('/') + '/'}">View all pages in <b>{loc}</b></a>
|
||||
{/if}
|
||||
Loading…
Reference in New Issue