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

banner now controlled by Content and ContentSidebar components

Browse Source
This commit is contained in:
denizk0461
2026-04-26 22:13:15 +02:00
parent feebf17bd8
commit b24712ef4c
19 changed files with 191 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/banner2.svelte
View File

@@ -1,57 +1,43 @@
<script lang="ts">
import { type BannerContent } from './components/banner-content';
let {
title,
date = "", // date posted
dateUpdated = "",
dateIndeterminate = "", // raw date without an explanation marker next to it
subtitle = "",
banner = "",
bannerAlt = "",
tags = [],
pixelated,
content,
}: {
title: string;
date?: string;
dateUpdated?: string;
dateIndeterminate?: string;
subtitle?: string;
banner?: string;
bannerAlt?: string;
tags?: string[];
pixelated?: boolean;
content: BannerContent;
} = $props();
</script>
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
{#snippet titles()}
<div class="title-container">
<div class="title-text-container">
<h1 class="title">{title}</h1>
<h1 class="title">{content.title}</h1>
{#if subtitle}
<p class="subtitle">[ {subtitle} ]</p>
{#if content.subtitle}
<p class="subtitle">[ {content.subtitle} ]</p>
{/if}
{#if tags.length}
{#if content.tags && content.tags.length > 0}
<div class="tag-container">
{#each tags as tag}
{#each content.tags as tag}
<span class="post-tag">{tag}</span>
{/each}
</div>
{/if}
</div>
{#if date || dateUpdated || dateIndeterminate}
{#if content.date || content.dateUpdated || content.dateIndeterminate}
<div class="date-container">
{#if dateIndeterminate}
<p class="date">:: {dateIndeterminate}</p>
{#if content.dateIndeterminate && content.dateIndeterminate != "undefined"}
<p class="date">:: {content.dateIndeterminate}</p>
{/if}
{#if date}
<p class="date">posted :: {date}</p>
{#if content.date && content.date != "undefined"}
<p class="date">posted :: {content.date}</p>
{/if}
{#if dateUpdated}
<p class="date">last updated :: {dateUpdated}</p>
{#if content.dateUpdated && content.dateUpdated != "undefined"}
<p class="date">last updated :: {content.dateUpdated}</p>
{/if}
</div>
{/if}
@@ -59,13 +45,13 @@
{/snippet}
<div class="container">
{#if banner && banner !== ""}
<a class="banner-container" href={banner}>
<img class="banner {pixelated ? "pixelated-img" : ""}" src={banner} alt={bannerAlt}>
{#if content.banner && content.banner !== ""}
<a class="banner-container" href={content.banner}>
<img class="banner {content.pixelated ? "pixelated-img" : ""}" src={content.banner} alt={content.bannerAlt}>
</a>
{/if}
{@render titles({title, subtitle, date})}
{@render titles()}
<hr>
</div>

11
src/lib/components/banner-content.ts Normal file
View File

@@ -0,0 +1,11 @@
export interface BannerContent {
title: string;
date?: string; // date posted
dateUpdated?: string;
dateIndeterminate?: string; // raw date without an explanation marker next to it
subtitle?: string;
banner?: string;
bannerAlt?: string;
tags?: string[];
pixelated?: boolean;
}

29
src/lib/components/table-of-contents.svelte
View File

@@ -1,5 +1,12 @@
<script lang="ts">
import {onMount} from 'svelte';
import { onMount } from 'svelte';
let {
type,
}: {
// possible values: none, 'side'
type: string;
} = $props();
interface TocEntry {
text: string;
@@ -63,7 +70,7 @@
{/snippet}
{#if tocEntries.length > 0}
<div class="toc-container blurred-background">
<div class="{type ? "toc-container-side" : "toc-container"} blurred-background">
<ul class="toc-list">
{#each tocEntries as entry}
{@render tocEntryLine({ entry })}
@@ -78,17 +85,27 @@
--padding-indent-base: 44px;
--padding-level-indent: 24px;
}
.toc-container, .toc-container-side {
box-sizing: border-box;
padding: 16px 0;
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
border-radius: var(--border-radius);
}
.toc-container {
max-width: var(--width-toc);
margin-left: auto;
margin-right: auto;
margin-top: 12px;
box-sizing: border-box;
background-color: var(--color-background-highlight);
padding: 16px 0;
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
border-radius: var(--border-radius);
}
.toc-container-side {
width: 400px;
margin: 0 12px 0 12px;
position: sticky;
top: 64px;
}
.toc-list {

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

@@ -1,22 +1,49 @@
<script lang="ts">
import Banner2 from "$lib/banner2.svelte";
import type { BannerContent } from "$lib/components/banner-content";
import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
import TableOfContents from "$lib/components/table-of-contents.svelte";
import type { Snippet } from "svelte";
let {
children,
bannerContent,
}: {
children: Snippet,
bannerContent: BannerContent;
} = $props();
</script>
<div class="banner-container">
<Banner2 content={bannerContent}/>
</div>
<div class="content">
<div class="side">
<slot name="side-left" />
</div>
<div class="main">
<slot name="main" />
<ScrollTopButton />
{@render children()}
</div>
<div class="side">
<TableOfContents type="side" />
</div>
</div>
<style>
.banner-container {
width: var(--page-width);
margin: 0 auto;
}
.content {
max-width: 2000px;
max-width: var(--page-width);
margin: 0 auto;
display: flex;
flex-direction: row;
padding: 0 24px;
}
.side {
min-width: 400px;
width: fit-content;
}
@media screen and (max-width: 800px) {

15
src/lib/viewport/content.svelte
View File

@@ -1,10 +1,23 @@
<script lang="ts">
import Banner2 from "$lib/banner2.svelte";
import type { BannerContent } from "$lib/components/banner-content";
import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
import type { Snippet } from "svelte";
let { children } = $props();
let {
children,
bannerContent,
}: {
children: Snippet,
bannerContent?: BannerContent;
} = $props();
</script>
<div class="main-content">
{#if bannerContent}
<Banner2 content={bannerContent} />
{/if}
<ScrollTopButton />
{@render children()}
</div>

12
src/routes/art/music/+page.svelte
View File

@@ -7,12 +7,12 @@
<title>My Tracks | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="My Tracks"
subtitle=""
banner=""
bannerAlt="" />
<Content bannerContent={{
title: "My Tracks",
subtitle: "",
banner: "",
bannerAlt: "",
}}>
well this is awkward. there's nothing here yet. come back later?

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

@@ -24,11 +24,11 @@
<title>Blog | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Blog"
banner="robert.webp"
bannerAlt="View at a tram bridge rising and then curving to the left." />
<Content bannerContent={{
title: "Blog",
banner: "robert.webp",
bannerAlt: "View at a tram bridge rising and then curving to the left.",
}}>
<!-- TODO descriptions on filter click -->
<div class="tag-filters-alt">

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

@@ -12,17 +12,17 @@
<meta name="DCTERMS.created" content="{data.date}T{data.time}">
</svelte:head>
<Content>
<Banner2
title="{data.title}"
subtitle="{data.subtitle}"
date="{data.date}"
dateUpdated="{data.dateUpdated}"
banner="{data.banner}"
bannerAlt="Banner for blog post '{data.title}'"
tags={data.tags} />
<Content bannerContent={{
title: data.title,
subtitle: data.subtitle,
date: data.date,
dateUpdated: data.dateUpdated,
banner: data.banner,
bannerAlt: `Banner for blog post '${data.title}'`,
tags: data.tags,
}}>
<TableOfContents />
<!-- <TableOfContents /> -->
<svelte:component this={data.content} />

13
src/routes/drawings/+page.svelte
View File

@@ -12,13 +12,12 @@
<title>Drawing Gallery | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Drawing Gallery"
banner="banner.webp"
bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper."
subtitle="???"
/>
<Content bannerContent={{
title: "Drawing Gallery",
banner: "banner.webp",
bannerAlt: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
subtitle: "sketches & stuff",
}}>
<div class="selected-container">
<a class="selected-img-link" href={drawingsRev[selectedIndex].src}>

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

@@ -31,13 +31,12 @@
</div>
{/snippet}
<Content>
<Banner2
title="Creative Feed"
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."
subtitle="minor things I have worked on"
/>
<Content bannerContent={{
title: "Creative Feed",
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.",
subtitle: "minor things I have worked on",
}}>
<p>Welcome to my creative feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>

26
src/routes/meta/about/+page.svelte
View File

@@ -1,8 +1,6 @@
<script lang="ts">
import Banner2 from "$lib/banner2.svelte";
import Content from "$lib/viewport/content.svelte";
import TableOfContents from "$lib/components/table-of-contents.svelte";
import LinkList, { type LinkEntry } from "$lib/lists/link-list.svelte";
import ContentSidebar from "$lib/viewport/content-sidebar.svelte";
let favouriteAlbums: LinkEntry[] = [
{
@@ -108,17 +106,15 @@
</svelte:head>
<Content>
<Banner2
title="About Me & natconf.dev"
banner="/me.webp"
bannerAlt="Mirror picture of me, pixelated beyond recognition"
subtitle="If you'd like to learn more about me and my website"
date="2025-08-10"
dateUpdated="2026-04-03"
pixelated />
<TableOfContents />
<ContentSidebar bannerContent={{
title: "About Me & natconf.dev",
banner: "/me.webp",
bannerAlt: "Mirror picture of me, pixelated beyond recognition",
subtitle: "If you'd like to learn more about me and my website",
date: "2025-08-10",
dateUpdated: "2026-04-03",
pixelated: true,
}}>
<p>Hi there! I'm Deniz (they/them). Welcome to my website!</p>
@@ -199,7 +195,7 @@
<p>When I was recently replaying the original Ratchet & Clank (2002) in German, I noticed again that the dialogue translated into German is often longer than the original English dialogue, which makes characters' voice lines run into one another. This doesn't happen in the English original.</p>
<p>This is most noticeable in the cutscene that plays after you acquire the Hologuise on planet Kalebo III, where <a href="https://youtu.be/XIShUN7AUqg?t=3479">the narrator explains how the Hologuise works</a>. The narrations lags WAY behind the visuals, to the point that there's a brief black screen at the end while the narration is still ongoing, and then it just cuts off the narrator entirely.</p>
</Content>
</ContentSidebar>
<style>
.faq-question {

8
src/routes/meta/feeds/+page.svelte
View File

@@ -19,10 +19,10 @@
<title>Feeds | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Feeds"
subtitle="XML feeds" />
<Content bannerContent={{
title: "Feeds",
subtitle: "XML feeds",
}}>
<p>This is a list of RSS feeds I maintain on this website. You can subscribe to them by adding the link of any feed to an RSS reader of your liking.</p>

9
src/routes/meta/music-rotation/+page.svelte
View File

@@ -8,11 +8,10 @@
<title>Music Rotation | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Music Rotation"
dateUpdated="2026-04-14"
/>
<Content bannerContent={{
title: "Music Rotation",
dateUpdated: "2026-04-14",
}}>
<p>content coming soon.</p>

9
src/routes/meta/now/+page.svelte
View File

@@ -7,11 +7,10 @@
<title>Now | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Now"
dateUpdated="2026-04-14"
/>
<Content bannerContent={{
title: "Now",
dateUpdated: "2026-04-14",
}}>
<p>content coming soon.</p>

9
src/routes/other/privacy/+page.svelte
View File

@@ -7,11 +7,10 @@
<title>Privacy & Cookies | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Information on Privacy & Cookies"
dateUpdated="2025-09-10"
/>
<Content bannerContent={{
title: "Information on Privacy & Cookies",
dateUpdated: "2025-09-10",
}}>
<p>This page uses <b>no cookies</b> as of now. No data will be stored on your device while browsing this website. <b>No trackers</b> are used either – <b>no analytics</b>, not even a visit counter of any kind. Not by a third-party, and currently, none I built myself either.</p>

12
src/routes/projects/+page.svelte
View File

@@ -31,12 +31,12 @@
<title>Projects | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="My Disordered Projects"
banner="banner.webp"
bannerAlt="An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging."
subtitle="things I have worked on" />
<Content bannerContent={{
title: "My Disordered Projects",
banner: "banner.webp",
bannerAlt: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
subtitle: "things I have worked on",
}}>
<p>Welcome to my 💫new💫 projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>

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

@@ -1,5 +1,6 @@
<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";
@@ -12,15 +13,14 @@
<meta name="DCTERMS.created" content="{data.projectDetails.date}T12:00">
</svelte:head>
<Content>
<Banner2
title="{data.projectDetails.title}"
subtitle="{data.projectDetails.subtitle}"
dateIndeterminate="{data.projectDetails.date}"
dateUpdated="{data.projectDetails.dateUpdated}"
banner="{data.projectDetails.banner}"
bannerAlt="{data.projectDetails.bannerAlt}"
/>
<ContentSidebar bannerContent={{
title: data.projectDetails.title,
subtitle: data.projectDetails.subtitle,
dateIndeterminate: data.projectDetails.date,
dateUpdated: data.projectDetails.dateUpdated,
banner: data.projectDetails.banner,
bannerAlt: data.projectDetails.bannerAlt,
}}>
<!-- <TableOfContents /> -->
@@ -34,7 +34,7 @@
<svelte:component this={data.content} />
</Content>
</ContentSidebar>
<style>
.link-button-container {

10
src/routes/projects/projectn5/+page.svelte
View File

@@ -32,11 +32,11 @@
<title>Homesick | denizk0461</title>
</svelte:head>
<Content>
<Banner2
title="Homesick"
banner="/projects/projectn5/banner2.webp"
bannerAlt="The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky." />
<Content bannerContent={{
title: "Homesick",
banner: "/projects/projectn5/banner2.webp",
bannerAlt: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
}}>
<p>I am currently working on a game under the working title <b>Homesick</b> (fka Project N5)! I'm aiming for it to be an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>

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

@@ -12,17 +12,15 @@
<meta name="DCTERMS.created" content="{data.date}">
</svelte:head>
<Content>
<Content bannerContent={{
title: data.title,
subtitle: "Homesick Devlog",
date: data.date,
banner: "preview.webp",
bannerAlt: data.bannerAlt,
}}>
<Banner2
title="{data.title}"
subtitle="Homesick Devlog"
date="{data.date}"
banner="preview.webp"
bannerAlt="{data.bannerAlt}"
/>
<TableOfContents />
<!-- <TableOfContents /> -->
<svelte:component this={data.content} />