removed art and art feed pages; added blurb to project page, which is half-merged with that of the former art feed
This commit is contained in:
@@ -1,39 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/viewport/content.svelte";
|
||||
import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
|
||||
|
||||
const subpages: GalleryRowEntry[] = [
|
||||
{
|
||||
title: "Drawing Gallery",
|
||||
description: "Some cool things I've drawn!",
|
||||
img: "drawings/banner.webp",
|
||||
altText: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
|
||||
link: "drawings",
|
||||
},
|
||||
{
|
||||
title: "Discography",
|
||||
description: "Small stories about my past music",
|
||||
img: "/main/hypertext.webp",
|
||||
altText: "",
|
||||
link: "music",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Art | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
<Content>
|
||||
<Banner2
|
||||
title="Art"
|
||||
banner="banner.webp"
|
||||
bannerAlt="A rainbow-like holographic effect produced by bending a reflective sheet of cardboard."
|
||||
subtitle="my creative side" />
|
||||
|
||||
<p>Here I have collected the products of some of my creative endeavours. Check them out below!</p>
|
||||
|
||||
<GalleryRow entries={subpages} />
|
||||
|
||||
</Content>
|
||||
@@ -1,123 +0,0 @@
|
||||
<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";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Art Feed | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
{#snippet pageButtons(currentIndex: number)}
|
||||
<div class="page-button-container blurred-background">
|
||||
{#if currentIndex == 1}
|
||||
<p class="page-button page-button-left">x</p>
|
||||
{:else}
|
||||
<a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}"><</a>
|
||||
{/if}
|
||||
|
||||
{#each { length: data.maxPages }, index}
|
||||
<a class="page-index" href="?p={index + 1}">{index + 1}</a>
|
||||
{/each}
|
||||
|
||||
{#if currentIndex == data.maxPages}
|
||||
<p class="page-button page-button-right">x</p>
|
||||
{:else}
|
||||
<a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">></a>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<Content>
|
||||
<Banner2
|
||||
title="Art & Project Feed"
|
||||
banner="banner.webp"
|
||||
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
||||
subtitle="subtitle missing"
|
||||
/>
|
||||
|
||||
{@render pageButtons(data.currentPage)}
|
||||
|
||||
<p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>
|
||||
|
||||
<p>This page is intended to offer a shared space for all my projects without the need to create strictly-separated pages for each hobby. Some other pages on this website have been merged into this one; namely the "Small Projects" and "Drawing Gallery" pages, so don't be surprised if content from those pages shows up here.</p>
|
||||
|
||||
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>
|
||||
|
||||
<p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</p>
|
||||
|
||||
<TableOfContents />
|
||||
|
||||
{#each data.feedEntries as entry}
|
||||
<h2>{entry.title}</h2>
|
||||
<p class="subtitle">{entry.subtitle}</p>
|
||||
<p class="subtitle">{entry.date}</p>
|
||||
<svelte:component this={entry.content} />
|
||||
{/each}
|
||||
|
||||
</Content>
|
||||
|
||||
<style>
|
||||
.page-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
margin: 12px auto;
|
||||
border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
||||
border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
||||
}
|
||||
|
||||
.page-button, .page-index {
|
||||
font-family: var(--font-mono);
|
||||
padding: 8px 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
transition: background-color var(--duration-animation) var(--anim-curve);
|
||||
}
|
||||
|
||||
.page-button {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.page-button-left {
|
||||
border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
||||
}
|
||||
.page-button-right {
|
||||
border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
||||
}
|
||||
.page-button-clickable:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-index:link, .page-index:visited {
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.page-index:hover, .page-button-clickable:hover {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-background-highlight-alt);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--font-mono);
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
color: var(--color-highlight-alt);
|
||||
}
|
||||
|
||||
.subtitle::before {
|
||||
content: "<!-- ";
|
||||
}
|
||||
|
||||
.subtitle::after {
|
||||
content: " -->";
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
import { entries } from './feed';
|
||||
|
||||
interface FeedEntry {
|
||||
content: any;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
let entriesPerPage = 8;
|
||||
|
||||
export async function load({ params, url }) {
|
||||
// Get page index
|
||||
let pageIndex = Number(url.searchParams.get('p'));
|
||||
if (pageIndex == 0) {
|
||||
pageIndex = 1;
|
||||
}
|
||||
|
||||
// TODO check if index exceeds maximum permitted and redirect (to max page?)
|
||||
|
||||
let feedEntries: FeedEntry[] = [];
|
||||
let start = (pageIndex - 1) * entriesPerPage;
|
||||
|
||||
for (let i = start; i < start + entriesPerPage; i += 1) {
|
||||
// Stop iterating when end reached
|
||||
if (i >= entries.length) {
|
||||
break;
|
||||
}
|
||||
// Vite complains if I don't do this even though it's stupid
|
||||
const path = entries[i].split("/");
|
||||
const page = await import(`./${path[0]}/${path[1]}.md`);
|
||||
const md = page.metadata;
|
||||
|
||||
feedEntries.push({
|
||||
content: page.default,
|
||||
title: md.title,
|
||||
subtitle: md.subtitle,
|
||||
date: md.date,
|
||||
});
|
||||
}
|
||||
|
||||
let currentPage = pageIndex;
|
||||
let maxPages = Math.ceil(entries.length / entriesPerPage);
|
||||
|
||||
return {
|
||||
currentPage,
|
||||
maxPages,
|
||||
feedEntries,
|
||||
};
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export let entries: string[] = [
|
||||
// 2026
|
||||
"misc/lightyears-font",
|
||||
"drawings/firstmonth",
|
||||
// 2024
|
||||
"electronics/3ds-usb-c",
|
||||
"electronics/deej0461",
|
||||
];
|
||||
@@ -36,33 +36,13 @@
|
||||
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 projects page! Here I show off all the things I have done. Projects are ordered by general topic, sorted reverse-chronologically, and have a status marker assigned that shows whether they are active or not. have fun browsing~!</p> -->
|
||||
<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>
|
||||
|
||||
<!-- <p>The projects page also has two sister pages that go into detail about specific subgroups of projects:</p>
|
||||
<p>This page, in its current form, is inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>
|
||||
|
||||
<GalleryRow entries={subpages} /> -->
|
||||
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages.</p>
|
||||
|
||||
<!-- <TableOfContents /> -->
|
||||
|
||||
<!-- <h2 id="games">Games</h2>
|
||||
{#each games as project}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/each}
|
||||
|
||||
<h2 id="hardware">Hardware</h2>
|
||||
{#each hardware as project}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/each}
|
||||
|
||||
<h2 id="apps">Apps</h2>
|
||||
{#each apps as project}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/each}
|
||||
|
||||
<h2 id="music">Music</h2>
|
||||
{#each music as project}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/each} -->
|
||||
<hr>
|
||||
|
||||
<div class="project-container">
|
||||
{#each projects as p}
|
||||
@@ -73,12 +53,22 @@
|
||||
|
||||
{#snippet project(p: Project)}
|
||||
{#if p.directLink}
|
||||
<a href={p.directLink}>{p.title}</a>
|
||||
<a class="project-wrapper" href={p.directLink}>
|
||||
{@render projectContent(p)}
|
||||
</a>
|
||||
{:else}
|
||||
<a href="{p.category}/{p.id}">{p.title}</a>
|
||||
<a class="project-wrapper" href="{p.category}/{p.id}">
|
||||
{@render projectContent(p)}
|
||||
</a>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet projectContent(p: Project)}
|
||||
<p>{p.title}</p>
|
||||
<p>{p.subtitle}</p>
|
||||
<p>{p.date}</p>
|
||||
{/snippet}
|
||||
|
||||
<!-- {#snippet projectSummary({
|
||||
project
|
||||
}: {
|
||||
@@ -113,7 +103,18 @@
|
||||
<style>
|
||||
.project-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* grid-template-columns: 1fr 1fr; */
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* gap: 4px; */
|
||||
}
|
||||
|
||||
.project-wrapper p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* .project-subtitle {
|
||||
|
||||
Reference in New Issue
Block a user