thohlt/aurora
1
0
Fork 0
mirror of https://github.com/thiloho/aurora.git synced 2025-11-22 03:21:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
thiloho
2023-05-18 22:17:46 +02:00
parent 40411fd328
commit a1c12866ae
14 changed files with 109 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
astro.config.ts
View File

@@ -7,19 +7,25 @@ import svelte from "@astrojs/svelte";
export default defineConfig({ export default defineConfig({
experimental: { experimental: {
assets: true, assets: true,
inlineStylesheets: "auto" inlineStylesheets: "auto",
}, },
scopedStyleStrategy: "class", scopedStyleStrategy: "class",
markdown: { markdown: {
rehypePlugins: [rehypeHeadingIds, [rehypeAutolinkHeadings, { rehypePlugins: [
behavior: "wrap", rehypeHeadingIds,
properties: { [
class: "heading-linker" rehypeAutolinkHeadings,
} {
}]] behavior: "wrap",
properties: {
class: "heading-linker",
},
},
],
],
}, },
image: { image: {
service: sharpImageService() service: sharpImageService(),
}, },
integrations: [svelte()] integrations: [svelte()],
}); });

2
public/favicon.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" /> <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
</svg> </svg>
<style> <style>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 726 B

After

Width:  |  Height:  |  Size: 724 B

46
src/components/ArticleSearch.svelte
View File

@@ -8,53 +8,53 @@
let searchTerm = ""; let searchTerm = "";
$: filteredArticles = articles.filter(article => { $: filteredArticles = articles.filter(article => {
const searchTermWords = searchTerm.trim().replace(/\s+/g, " ").toLowerCase().split(' '); const searchTermWords = searchTerm.trim().replace(/\s+/g, " ").toLowerCase().split(' ');
const articleTitle = article.data.title.trim().replace(/\s+/g, " ").toLowerCase(); const articleTitle = article.data.title.trim().replace(/\s+/g, " ").toLowerCase();
return searchTermWords.every(word => articleTitle.includes(word)) && searchTerm.trim() !== ""; return searchTermWords.every(word => articleTitle.includes(word)) && searchTerm.trim() !== "";
}); });
</script> </script>
<Dropdown shortcut="S"> <Dropdown shortcut="S">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
<title>Search for an article (Shift + s)</title> <title>Search for an article (Shift + s)</title>
<path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" />
</svg> </svg>
<div class="article-search"> <div class="article-search">
<label for="article-search">Search for an article:</label> <label for="article-search">Search for an article:</label>
<input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} /> <input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} />
{#if filteredArticles.length > 0} {#if filteredArticles.length > 0}
<p>Results: <strong>{filteredArticles.length}</strong></p> <p>Results: <strong>{filteredArticles.length}</strong></p>
<ul> <ul>
{#each filteredArticles as article} {#each filteredArticles as article}
<li> <li>
<a href="/{article.slug}">{article.data.title}</a> <a href="/{article.slug}">{article.data.title}</a>
</li> </li>
{/each} {/each}
</ul> </ul>
{:else if searchTerm.trim() !== ""} {:else if searchTerm.trim() !== ""}
<p>No results found</p> <p>No results found</p>
{/if} {/if}
</div> </div>
</Dropdown> </Dropdown>
<style> <style>
.article-search { .article-search {
padding: 1rem; padding: 1rem;
position: absolute; position: absolute;
inset-inline: 0; inset-inline: 0;
border: var(--standard-border); border: var(--standard-border);
inset-block-start: var(--nav-height); inset-block-start: var(--nav-height);
background-color: var(--background-color); background-color: var(--background-color);
display: grid; display: grid;
overflow-x: auto; overflow-x: auto;
} }
ul { ul {
margin-block-start: 0; margin-block-start: 0;
} }
input { input {
max-inline-size: 100%; max-inline-size: 100%;
} }
</style> </style>

68
src/components/Dropdown.svelte
View File

@@ -1,49 +1,49 @@
<script lang="ts"> <script lang="ts">
export let shortcut: string; export let shortcut: string;
const possibleShortcuts = ["S", "C", "T"]; const possibleShortcuts = ["S", "C", "T"];
let detailsElement: HTMLDetailsElement; let detailsElement: HTMLDetailsElement;
let summaryElement: HTMLElement; let summaryElement: HTMLElement;
function openMenu() { function openMenu() {
detailsElement.setAttribute("open", ""); detailsElement.setAttribute("open", "");
} }
export function closeMenu() { export function closeMenu() {
detailsElement.removeAttribute("open"); detailsElement.removeAttribute("open");
} }
function handleKeydown(event: KeyboardEvent) { function handleKeydown(event: KeyboardEvent) {
if (event.key === "Escape") closeMenu(); if (event.key === "Escape") closeMenu();
if (event.key === shortcut) { if (event.key === shortcut) {
summaryElement.focus(); summaryElement.focus();
openMenu(); openMenu();
} else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) { } else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) {
closeMenu(); closeMenu();
} }
} }
function handleClick(event: MouseEvent) { function handleClick(event: MouseEvent) {
if (!detailsElement.contains(event.target as Node)) { if (!detailsElement.contains(event.target as Node)) {
closeMenu(); closeMenu();
} }
} }
</script> </script>
<svelte:window on:keydown={handleKeydown} on:click={handleClick} /> <svelte:window on:keydown="{handleKeydown}" on:click="{handleClick}" />
<details bind:this={detailsElement}> <details bind:this="{detailsElement}">
<summary bind:this={summaryElement}> <summary bind:this="{summaryElement}">
<slot name="icon" /> <slot name="icon" />
</summary> </summary>
<slot /> <slot />
</details> </details>
<style> <style>
summary { summary {
display: grid; display: grid;
padding: 0.5rem; padding: 0.5rem;
} }
</style> </style>

6
src/components/Footer.astro
View File

@@ -25,7 +25,11 @@ const currentDateYear = new Date().getFullYear();
footer { footer {
margin-block-start: 4rem; margin-block-start: 4rem;
padding-block: 1rem; padding-block: 1rem;
background: linear-gradient(0deg, var(--tertiary-background-color) 0%, var(--background-color) 100%); background: linear-gradient(
0deg,
var(--tertiary-background-color) 0%,
var(--background-color) 100%
);
} }
.container { .container {

2
src/components/Head.astro
View File

@@ -7,7 +7,7 @@ const { title, description } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="color-scheme" content="light"> <meta name="color-scheme" content="light" />
<title>{title}</title> <title>{title}</title>
<meta name="author" content="Your Name" /> <meta name="author" content="Your Name" />
<meta name="description" content={description} /> <meta name="description" content={description} />

6
src/components/Nav.astro
View File

@@ -5,9 +5,7 @@ import ThemeToggle from "../components/ThemeToggle.svelte";
<nav> <nav>
<div class="container"> <div class="container">
<a href="/"> <a href="/"> Logo</a>
Logo
</a>
<slot /> <slot />
<ArticleSearchWrapper /> <ArticleSearchWrapper />
<ThemeToggle client:only="svelte" /> <ThemeToggle client:only="svelte" />
@@ -29,7 +27,7 @@ import ThemeToggle from "../components/ThemeToggle.svelte";
position: relative; position: relative;
} }
a { .container > *:first-child {
margin-inline-end: auto; margin-inline-end: auto;
} }
</style> </style>

2
src/components/TableOfContents.svelte
View File

@@ -7,7 +7,7 @@
</script> </script>
<Dropdown shortcut="C"> <Dropdown shortcut="C">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
<title>Table of contents (Shift + c)</title> <title>Table of contents (Shift + c)</title>
<path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg> </svg>

2
src/components/ThemeToggle.svelte
View File

@@ -19,7 +19,7 @@
</script> </script>
<Dropdown shortcut="T"> <Dropdown shortcut="T">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
<title>Toggle theme (Shift + t)</title> <title>Toggle theme (Shift + t)</title>
<path fill-rule="evenodd" d="M2.25 5.25a3 3 0 013-3h13.5a3 3 0 013 3V15a3 3 0 01-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 01-.53 1.28h-9a.75.75 0 01-.53-1.28l.621-.622a2.25 2.25 0 00.659-1.59V18h-3a3 3 0 01-3-3V5.25zm1.5 0v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M2.25 5.25a3 3 0 013-3h13.5a3 3 0 013 3V15a3 3 0 01-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 01-.53 1.28h-9a.75.75 0 01-.53-1.28l.621-.622a2.25 2.25 0 00.659-1.59V18h-3a3 3 0 01-3-3V5.25zm1.5 0v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5z" clip-rule="evenodd" />
</svg> </svg>

2
src/content/blog/markdown-style-guide.md
View File

@@ -39,7 +39,7 @@ hello **bold** the brown fox jumps _italicized text_ over the `code` high fence
## Image ## Image
![Minke Whale breaching in Antarctica](../../assets/blog/markdown-style-guide/example-image.jpg) ![A deer with its head resting on its back. The animal has a brown fur coat and long ears, and it appears to be standing in an outdoor setting. Its snout is visible, as well as the white markings around its eyes.](../../assets/blog/markdown-style-guide/example-image.jpg)
## Table ## Table

7
src/layouts/ArticleLayout.astro
View File

@@ -1,5 +1,5 @@
--- ---
const { title, description, publicationDate, headings } = Astro.props; const { id, title, description, publicationDate, headings } = Astro.props;
import PageLayout from "./PageLayout.astro"; import PageLayout from "./PageLayout.astro";
import TableOfContents from "../components/TableOfContents.svelte"; import TableOfContents from "../components/TableOfContents.svelte";
@@ -15,7 +15,10 @@ import PublicationDate from "../components/PublicationDate.astro";
<PublicationDate {publicationDate} /> <PublicationDate {publicationDate} />
</strong> </strong>
</p> </p>
<a href="#">Edit this page</a> <a
href={`https://github.com/thiloho/aurora/edit/main/src/content/blog/${id}`}
>Edit this page</a
>
</Fragment> </Fragment>
<slot /> <slot />
</PageLayout> </PageLayout>

2
src/pages/[...slug].astro
View File

@@ -14,6 +14,6 @@ const { entry } = Astro.props;
const { Content, headings } = await entry.render(); const { Content, headings } = await entry.render();
--- ---
<ArticleLayout {...entry.data} {headings}> <ArticleLayout id={entry.id} {...entry.data} {headings}>
<Content /> <Content />
</ArticleLayout> </ArticleLayout>

23
src/styles/global.css
View File

@@ -54,7 +54,10 @@ body {
color: var(--text-color); color: var(--text-color);
} }
nav, header, main, footer { nav,
header,
main,
footer {
padding-inline: 1rem; padding-inline: 1rem;
} }
@@ -63,7 +66,12 @@ nav, header, main, footer {
margin-inline: auto; margin-inline: auto;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
scroll-margin-block-start: var(--nav-height); scroll-margin-block-start: var(--nav-height);
} }
@@ -73,7 +81,7 @@ img {
block-size: auto; block-size: auto;
} }
svg { .icon {
inline-size: 1.5rem; inline-size: 1.5rem;
block-size: 1.5rem; block-size: 1.5rem;
vertical-align: middle; vertical-align: middle;
@@ -85,7 +93,8 @@ table {
overflow-x: auto; overflow-x: auto;
} }
td, th { td,
th {
border: var(--standard-border); border: var(--standard-border);
padding-inline: 0.5rem; padding-inline: 0.5rem;
padding-block: 0.25rem; padding-block: 0.25rem;
@@ -116,7 +125,8 @@ input {
padding-inline: 0.5rem; padding-inline: 0.5rem;
} }
summary, button { summary,
button {
cursor: pointer; cursor: pointer;
} }
@@ -124,7 +134,8 @@ button {
color: inherit; color: inherit;
} }
ul, ol { ul,
ol {
line-height: 2; line-height: 2;
} }