denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replaced manually-added table of contents with automatic ContentSidebar toc where needed

Browse Source
This commit is contained in:
denizk0461
2026-04-26 22:22:29 +02:00
parent b24712ef4c
commit 3586d7eece
5 changed files with 21 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/lib/viewport/content-sidebar.svelte
View File

@@ -14,33 +14,31 @@
} = $props(); } = $props();
</script> </script>
<div class="banner-container"> <div class="container">
<Banner2 content={bannerContent}/> <Banner2 content={bannerContent}/>
</div>
<div class="content"> <div class="content">
<div class="main">
<div class="main"> <ScrollTopButton />
<ScrollTopButton /> {@render children()}
{@render children()} </div>
</div> <div class="side">
<div class="side"> <TableOfContents type="side" />
<TableOfContents type="side" /> </div>
</div> </div>
</div> </div>
<style> <style>
.banner-container { .container {
width: var(--page-width); width: var(--page-width);
margin: 0 auto; margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
} }
.content { .content {
max-width: var(--page-width);
margin: 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 24px;
} }
.side { .side {
width: fit-content; width: fit-content;

10
src/routes/blog/[year]/[date]/+page.svelte
View File

@@ -1,7 +1,5 @@
<script> <script>
import Banner2 from "$lib/banner2.svelte"; import ContentSidebar from "$lib/viewport/content-sidebar.svelte";
import Content from "$lib/viewport/content.svelte";
import TableOfContents from "$lib/components/table-of-contents.svelte";
export let data; export let data;
</script> </script>
@@ -12,7 +10,7 @@
<meta name="DCTERMS.created" content="{data.date}T{data.time}"> <meta name="DCTERMS.created" content="{data.date}T{data.time}">
</svelte:head> </svelte:head>
<Content bannerContent={{ <ContentSidebar bannerContent={{
title: data.title, title: data.title,
subtitle: data.subtitle, subtitle: data.subtitle,
date: data.date, date: data.date,
@@ -22,8 +20,6 @@
tags: data.tags, tags: data.tags,
}}> }}>
<!-- <TableOfContents /> -->
<svelte:component this={data.content} /> <svelte:component this={data.content} />
</Content> </ContentSidebar>

10
src/routes/feed/+page.svelte
View File

@@ -1,8 +1,6 @@
<script lang="ts"> <script lang="ts">
import Content from "$lib/viewport/content.svelte";
import Banner2 from "$lib/banner2.svelte";
import TableOfContents from "$lib/components/table-of-contents.svelte";
import ImageRow from "$lib/media/image-row.svelte"; import ImageRow from "$lib/media/image-row.svelte";
import ContentSidebar from "$lib/viewport/content-sidebar.svelte";
export let data; export let data;
</script> </script>
@@ -31,7 +29,7 @@
</div> </div>
{/snippet} {/snippet}
<Content bannerContent={{ <ContentSidebar bannerContent={{
title: "Creative Feed", title: "Creative Feed",
banner: "banner.webp", banner: "banner.webp",
bannerAlt: "A blue screen with the text 'how do you do art ? 1. face your fears 2. become your heroes'. The 'art' looks to have been edited in. The music artist Porter Robinson is standing in the bottom right corner.", bannerAlt: "A blue screen with the text 'how do you do art ? 1. face your fears 2. become your heroes'. The 'art' looks to have been edited in. The music artist Porter Robinson is standing in the bottom right corner.",
@@ -42,8 +40,6 @@
<p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p> <p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>
<!-- <TableOfContents /> -->
{@render pageButtons(data.currentPage)} {@render pageButtons(data.currentPage)}
{#each data.feedPosts as post} {#each data.feedPosts as post}
@@ -61,7 +57,7 @@
{@render pageButtons(data.currentPage)} {@render pageButtons(data.currentPage)}
</Content> </ContentSidebar>
<style> <style>
.page-button-container { .page-button-container {

5
src/routes/projects/[category]/[id]/+page.svelte
View File

@@ -1,8 +1,5 @@
<script> <script>
import Banner2 from "$lib/banner2.svelte";
import ContentSidebar from "$lib/viewport/content-sidebar.svelte"; import ContentSidebar from "$lib/viewport/content-sidebar.svelte";
import Content from "$lib/viewport/content.svelte";
// import TableOfContents from "$lib/components/table-of-contents.svelte";
export let data; export let data;
</script> </script>
@@ -22,8 +19,6 @@
bannerAlt: data.projectDetails.bannerAlt, bannerAlt: data.projectDetails.bannerAlt,
}}> }}>
<!-- <TableOfContents /> -->
{#if data.projectDetails.links.length > 0} {#if data.projectDetails.links.length > 0}
<div class="link-button-container"> <div class="link-button-container">
{#each data.projectDetails.links as l} {#each data.projectDetails.links as l}

10
src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
View File

@@ -1,7 +1,5 @@
<script> <script>
import Banner2 from "$lib/banner2.svelte"; import ContentSidebar from "$lib/viewport/content-sidebar.svelte";
import Content from "$lib/viewport/content.svelte";
import TableOfContents from "$lib/components/table-of-contents.svelte";
export let data; export let data;
</script> </script>
@@ -12,7 +10,7 @@
<meta name="DCTERMS.created" content="{data.date}"> <meta name="DCTERMS.created" content="{data.date}">
</svelte:head> </svelte:head>
<Content bannerContent={{ <ContentSidebar bannerContent={{
title: data.title, title: data.title,
subtitle: "Homesick Devlog", subtitle: "Homesick Devlog",
date: data.date, date: data.date,
@@ -20,8 +18,6 @@
bannerAlt: data.bannerAlt, bannerAlt: data.bannerAlt,
}}> }}>
<!-- <TableOfContents /> -->
<svelte:component this={data.content} /> <svelte:component this={data.content} />
</Content> </ContentSidebar>