akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Llama: add blog-like section for llamas

Browse source
This commit is contained in:
Akemi Izuko 2023-12-31 18:15:29 -07:00
parent ad3e662b6f
commit cc01691a33
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
7 changed files with 154 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/Header.astro
View file

@ -6,9 +6,10 @@ import { SITE_TITLE } from '../consts';
<header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40"> <header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40">
<nav> <nav>
<div class="flex items-center space-x-8"> <div class="flex items-center space-x-8">
<HeaderLink href="/"><img src="/akemi_silly_transparent.png" /></HeaderLink> <HeaderLink href="/"><img style="padding: 2px;" src="/favicon.png" /></HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink> <HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/unix">Unix</HeaderLink> <HeaderLink href="/unix">Unix</HeaderLink>
<HeaderLink href="/llama">Llama</HeaderLink>
<HeaderLink href="/meow">Meow</HeaderLink> <HeaderLink href="/meow">Meow</HeaderLink>
</div> </div>
<div class="fun-quote" style="margin: 0"> <div class="fun-quote" style="margin: 0">

2
src/consts.ts
View file

@ -2,4 +2,4 @@
// You can import this data from anywhere in your site by using the `import` keyword. // You can import this data from anywhere in your site by using the `import` keyword.
export const SITE_TITLE = 'noway.moe'; export const SITE_TITLE = 'noway.moe';
export const SITE_DESCRIPTION = 'MoE website?'; export const SITE_DESCRIPTION = "Akemi's personal website!";

15
src/content/config.ts
View file

@ -10,6 +10,7 @@ const blog = defineCollection({
pubDate: z.coerce.date(), pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(), updatedDate: z.coerce.date().optional(),
heroImage: z.string().optional(), heroImage: z.string().optional(),
heroText: z.string().optional(),
}), }),
}); });
@ -25,4 +26,16 @@ const unix = defineCollection({
}), }),
}); });
export const collections = { blog, unix }; const llama = defineCollection({
type: 'content',
// Type-check frontmatter using a schema
schema: z.object({
title: z.string(),
description: z.string(),
// Transform string to Date object
updateDate: z.coerce.date(),
heroImage: z.string().optional(),
}),
});
export const collections = { blog, unix, llama };

0
src/content/unix/quantization.md → src/content/llama/quantization.md
View file

42
src/layouts/LlamaPost.astro Normal file
View file

@ -0,0 +1,42 @@
---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { Code } from 'astro:components';
import '../styles/markdown.css';
type Props = CollectionEntry<'llama'>['data'];
const { title, description, updateDate, heroImage } = Astro.props;
---
<html lang="en">
<head>
<BaseHead title={title} description={description} />
</head>
<body>
<Header />
<main>
<article>
<div class="markdown-title">
<h1 class="markdown-title">{title}</h1>
<div class="date">
Updated on <FormattedDate date={updateDate} />
</div>
</div>
<div class="prose">
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
</div>
<slot />
</div>
</article>
</main>
<Footer />
</body>
</html>

20
src/pages/llama/[...slug].astro Normal file
View file

@ -0,0 +1,20 @@
---
import { type CollectionEntry, getCollection } from 'astro:content';
import LlamaPost from '../../layouts/LlamaPost.astro';
export async function getStaticPaths() {
const posts = await getCollection('llama');
return posts.map((post) => ({
params: { slug: post.slug },
props: post,
}));
}
type Props = CollectionEntry<'llama'>;
const post = Astro.props;
const { Content } = await post.render();
---
<LlamaPost {...post.data}>
<Content />
</LlamaPost>

75
src/pages/llama/index.astro Normal file
View file

@ -0,0 +1,75 @@
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
import "../../styles/post-listing.css"
const posts = (await getCollection('llama')).sort(
(a, b) => b.data.updateDate.valueOf() - a.data.updateDate.valueOf()
);
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header />
<main class="post-listing">
<section>
<h1
class="text-center mt-8 mb-4 text-6xl"
style="font-family: var(--font-title);">
Local Llamas!
</h1>
<p
class="text-center mb-4 text-lg">
In the last year, the open source Large Language Model
(llama) community has made huge strides. In this exciting
time of innovation, I've decided to write down some of what
I learned!
</p>
<p
class="text-center mb-4 text-lg">
A "<i>local</i> llama" refers to an open-source llama that's
being hosted by an individual not a company, typically on a
high-end personal computer.
</p>
<p
class="text-center mb-4 text-lg">
</p>
<hr class="m-4" style="border: 1px solid black;" />
<ul>
{
posts.map((post) => (
<li>
<a href={`/llama/${post.slug}/`}>
<img
width={720}
height={360}
class="rounded-2xl grayscale"
src={ post.data.heroImage ? post.data.heroImage : "/terminal.webp" }
alt="" />
<h4
class="title text-xl">
{post.data.title}
</h4>
<p class="date">
Updated on <FormattedDate date={post.data.updateDate} />
</p>
</a>
</li>
))
}
</ul>
</section>
</main>
<Footer />
</body>
</html>