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 { 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,
|
||||
},
|
||||
}));
|
||||
}
|
||||
const title = "barrett ruth";
|
||||
---
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<script slot="scripts" define:vars={{ postsByCategory }} is:inline>
|
||||
window.postsByCategory = postsByCategory;
|
||||
</script>
|
||||
<script slot="scripts" src="/scripts/index.js" is:inline></script>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue