thohlt/aurora
1
0
Fork 0
mirror of https://github.com/thiloho/aurora.git synced 2025-11-22 11:31:36 +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

46
src/components/ArticleSearch.svelte
View File

@@ -8,53 +8,53 @@
let searchTerm = "";
$: filteredArticles = articles.filter(article => {
const searchTermWords = searchTerm.trim().replace(/\s+/g, " ").toLowerCase().split(' ');
const articleTitle = article.data.title.trim().replace(/\s+/g, " ").toLowerCase();
const searchTermWords = searchTerm.trim().replace(/\s+/g, " ").toLowerCase().split(' ');
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>
<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>
<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>
<div class="article-search">
<label for="article-search">Search for an article:</label>
<input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} />
<label for="article-search">Search for an article:</label>
<input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} />
{#if filteredArticles.length > 0}
<p>Results: <strong>{filteredArticles.length}</strong></p>
<p>Results: <strong>{filteredArticles.length}</strong></p>
<ul>
{#each filteredArticles as article}
<li>
<a href="/{article.slug}">{article.data.title}</a>
</li>
{/each}
{#each filteredArticles as article}
<li>
<a href="/{article.slug}">{article.data.title}</a>
</li>
{/each}
</ul>
{:else if searchTerm.trim() !== ""}
<p>No results found</p>
<p>No results found</p>
{/if}
</div>
</Dropdown>
<style>
.article-search {
padding: 1rem;
position: absolute;
inset-inline: 0;
border: var(--standard-border);
inset-block-start: var(--nav-height);
background-color: var(--background-color);
display: grid;
overflow-x: auto;
padding: 1rem;
position: absolute;
inset-inline: 0;
border: var(--standard-border);
inset-block-start: var(--nav-height);
background-color: var(--background-color);
display: grid;
overflow-x: auto;
}
ul {
margin-block-start: 0;
margin-block-start: 0;
}
input {
max-inline-size: 100%;
max-inline-size: 100%;
}
</style>

68
src/components/Dropdown.svelte
View File

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

6
src/components/Footer.astro
View File

@@ -25,7 +25,11 @@ const currentDateYear = new Date().getFullYear();
footer {
margin-block-start: 4rem;
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 {

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" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<meta name="color-scheme" content="light">
<meta name="color-scheme" content="light" />
<title>{title}</title>
<meta name="author" content="Your Name" />
<meta name="description" content={description} />

6
src/components/Nav.astro
View File

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

2
src/components/TableOfContents.svelte
View File

@@ -7,7 +7,7 @@
</script>
<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>
<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>

2
src/components/ThemeToggle.svelte
View File

@@ -19,7 +19,7 @@
</script>
<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>
<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>