make tribute the main page
This commit is contained in:
parent
142d0876a6
commit
3875fccdcb
3 changed files with 133 additions and 133 deletions
71
src/pages/_index.astro
Normal file
71
src/pages/_index.astro
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
---
|
||||||
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
|
import { sortItem } from "../utils/sort.js";
|
||||||
|
import { getCollection } from "astro:content";
|
||||||
|
import type { PostCollection } from "../types";
|
||||||
|
|
||||||
|
const title = "Barrett Ruth";
|
||||||
|
const CATS: PostCollection[] = [
|
||||||
|
"algorithms",
|
||||||
|
"software",
|
||||||
|
"meditations",
|
||||||
|
"autonomous-racing",
|
||||||
|
];
|
||||||
|
|
||||||
|
type PostData = {
|
||||||
|
id: string;
|
||||||
|
slug: string;
|
||||||
|
data: {
|
||||||
|
title: string;
|
||||||
|
date: string | null;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const postsByCategory: Record<string, PostData[]> = {};
|
||||||
|
for (const c of CATS) {
|
||||||
|
const entries = await getCollection(c);
|
||||||
|
entries.sort(sortItem);
|
||||||
|
postsByCategory[c] = entries.map((e) => ({
|
||||||
|
id: `${c}/${e.slug}.mdx`,
|
||||||
|
slug: e.slug,
|
||||||
|
data: {
|
||||||
|
title: e.data.title ?? e.slug,
|
||||||
|
date: e.data.date ?? null,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={title}>
|
||||||
|
<slot name="head" slot="head">
|
||||||
|
<link rel="stylesheet" href="/styles/index.css" />
|
||||||
|
</slot>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<ul class="topics">
|
||||||
|
<li class="topic algorithms">
|
||||||
|
<a href="#algorithms" data-topic="algorithms">algorithms</a>
|
||||||
|
</li>
|
||||||
|
<li class="topic software">
|
||||||
|
<a href="#software" data-topic="software">software</a>
|
||||||
|
</li>
|
||||||
|
<li class="topic meditations">
|
||||||
|
<a href="#meditations" data-topic="meditations">meditations</a>
|
||||||
|
</li>
|
||||||
|
<li class="topic autonomous-racing">
|
||||||
|
<a href="#autonomous-racing" data-topic="autonomous-racing"
|
||||||
|
>autonomous racing</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="topic death">
|
||||||
|
<a href="/death.html" data-topic="death">death</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="posts" id="posts"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script slot="scripts" define:vars={{ postsByCategory }} is:inline>
|
||||||
|
window.postsByCategory = postsByCategory;
|
||||||
|
</script>
|
||||||
|
<script slot="scripts" src="/scripts/index.js" is:inline></script>
|
||||||
|
</BaseLayout>
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
---
|
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
||||||
const title = "my father";
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout title={title} useHeader={false}>
|
|
||||||
<div class="death-container">
|
|
||||||
<img id="death-image" src="/death/death.webp" alt="Philip Matthew Ruth" />
|
|
||||||
<div id="tribute-text" class="tribute">
|
|
||||||
rip philip matthew ruth<br />
|
|
||||||
february 8, 1967 – c. december 2, 2025
|
|
||||||
</div>
|
|
||||||
<div class="credit">
|
|
||||||
gary wray<br />
|
|
||||||
<em>waiting in line</em>, 2021
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background: black;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.death-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 1fr auto;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
grid-row: 1 / -1;
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.tribute {
|
|
||||||
grid-row: 2;
|
|
||||||
grid-column: 2;
|
|
||||||
justify-self: end;
|
|
||||||
align-self: end;
|
|
||||||
padding: 1.5rem;
|
|
||||||
font-size: clamp(1.5rem, 4vmin, 3em);
|
|
||||||
z-index: 10;
|
|
||||||
text-align: right;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.credit {
|
|
||||||
grid-row: 2;
|
|
||||||
grid-column: 1;
|
|
||||||
justify-self: start;
|
|
||||||
align-self: end;
|
|
||||||
padding: 1.5rem;
|
|
||||||
z-index: 10;
|
|
||||||
font-size: clamp(1.2rem, 3vmin, 2em);
|
|
||||||
text-align: left;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</BaseLayout>
|
|
||||||
|
|
@ -1,71 +1,68 @@
|
||||||
---
|
---
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
import { sortItem } from "../utils/sort.js";
|
const title = "barrett ruth";
|
||||||
import { getCollection } from "astro:content";
|
|
||||||
import type { PostCollection } from "../types";
|
|
||||||
|
|
||||||
const title = "Barrett Ruth";
|
|
||||||
const CATS: PostCollection[] = [
|
|
||||||
"algorithms",
|
|
||||||
"software",
|
|
||||||
"meditations",
|
|
||||||
"autonomous-racing",
|
|
||||||
];
|
|
||||||
|
|
||||||
type PostData = {
|
|
||||||
id: string;
|
|
||||||
slug: string;
|
|
||||||
data: {
|
|
||||||
title: string;
|
|
||||||
date: string | null;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const postsByCategory: Record<string, PostData[]> = {};
|
|
||||||
for (const c of CATS) {
|
|
||||||
const entries = await getCollection(c);
|
|
||||||
entries.sort(sortItem);
|
|
||||||
postsByCategory[c] = entries.map((e) => ({
|
|
||||||
id: `${c}/${e.slug}.mdx`,
|
|
||||||
slug: e.slug,
|
|
||||||
data: {
|
|
||||||
title: e.data.title ?? e.slug,
|
|
||||||
date: e.data.date ?? null,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title={title}>
|
<BaseLayout title={title} useHeader={false}>
|
||||||
<slot name="head" slot="head">
|
<div class="death-container">
|
||||||
<link rel="stylesheet" href="/styles/index.css" />
|
<img id="death-image" src="/death/death.webp" alt="Philip Matthew Ruth" />
|
||||||
</slot>
|
<div id="tribute-text" class="tribute">
|
||||||
|
rip philip matthew ruth<br />
|
||||||
<div class="content">
|
february 8, 1967 – c. december 2, 2025
|
||||||
<ul class="topics">
|
</div>
|
||||||
<li class="topic algorithms">
|
<div class="credit">
|
||||||
<a href="#algorithms" data-topic="algorithms">algorithms</a>
|
gary wray<br />
|
||||||
</li>
|
<em>waiting in line</em>, 2021
|
||||||
<li class="topic software">
|
</div>
|
||||||
<a href="#software" data-topic="software">software</a>
|
|
||||||
</li>
|
|
||||||
<li class="topic meditations">
|
|
||||||
<a href="#meditations" data-topic="meditations">meditations</a>
|
|
||||||
</li>
|
|
||||||
<li class="topic autonomous-racing">
|
|
||||||
<a href="#autonomous-racing" data-topic="autonomous-racing"
|
|
||||||
>autonomous racing</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="topic death">
|
|
||||||
<a href="/death.html" data-topic="death">death</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="posts" id="posts"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
<script slot="scripts" define:vars={{ postsByCategory }} is:inline>
|
html,
|
||||||
window.postsByCategory = postsByCategory;
|
body {
|
||||||
</script>
|
margin: 0;
|
||||||
<script slot="scripts" src="/scripts/index.js" is:inline></script>
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: black;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.death-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr auto;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
grid-row: 1 / -1;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.tribute {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 2;
|
||||||
|
justify-self: end;
|
||||||
|
align-self: end;
|
||||||
|
padding: 1.5rem;
|
||||||
|
font-size: clamp(1.5rem, 4vmin, 3em);
|
||||||
|
z-index: 10;
|
||||||
|
text-align: right;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.credit {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 1;
|
||||||
|
justify-self: start;
|
||||||
|
align-self: end;
|
||||||
|
padding: 1.5rem;
|
||||||
|
z-index: 10;
|
||||||
|
font-size: clamp(1.2rem, 3vmin, 2em);
|
||||||
|
text-align: left;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue