z0x/blog.z0x.ca
Code Activity Actions

chore: init

Browse source
This commit is contained in:
enscribe 2024-09-10 10:08:41 -07:00
commit f6dcc302d4
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
118 changed files with 13645 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/pages/404.astro Normal file
View file

@ -0,0 +1,20 @@
---
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import Link from "@components/Link.astro";
import BackToPrevious from "@components/BackToPrevious.astro";
import { SITE } from "@consts";
---
<Layout title="404" description={SITE.DESCRIPTION}>
<Container>
<div class="mt-16 grid place-items-center gap-3">
<h4 class="animate text-2xl font-semibold text-black dark:text-white">
404: Page not found
</h4>
<span class="animate">
<BackToPrevious href="/">Go to home page</BackToPrevious>
</span>
</div>
</Container>
</Layout>

53
src/pages/about.astro Normal file
View file

@ -0,0 +1,53 @@
---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { ABOUT } from "@consts";
import Image from "astro/components/Image.astro";
---
<Layout title={ABOUT.TITLE} description={ABOUT.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<div class="space-y-10">
<div class="animate font-semibold text-black dark:text-white">
About
</div>
<section class="animate not-prose flex flex-col gap-4 text-justify">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores porro hic minima incidunt explicabo obcaecati consectetur consequuntur at quisquam commodi.
</p>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores porro hic minima incidunt explicabo obcaecati consectetur consequuntur at quisquam commodi.
</p>
</section>
<div class="flex flex-col md:flex-row justify-center">
<div class="my-10 text-center">
<div class="bg-neutral-300 w-[350px] h-[250px] object-cover rounded-xl -rotate-6 overflow-hidden">
<Image
src={'/astro-nano.png'}
alt={'life2'}
width={350}
height={250}
class="w-[350px] h-[250px] object-cover rounded-xl overflow-hidden"
/>
</div>
<p class="mt-4 text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div class="mx-10 my-10 text-center">
<div class="bg-neutral-300 w-[150px] h-[250px] object-cover rounded-xl rotate-6 mx-auto sm:ml-auto">
<Image
src={'/astro-micro.jpg'}
alt={'life2'}
width={150}
height={250}
class="w-[150px] h-[250px] object-cover rounded-xl "
/>
</div>
<p class="mt-4 text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</aside>
</Container>
</Layout>

95
src/pages/blog/[...slug].astro Normal file
View file

@ -0,0 +1,95 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import FormattedDate from "@components/FormattedDate.astro";
import { readingTime } from "@lib/utils";
import BackToPrevious from "@components/BackToPrevious.astro";
import PostNavigation from "@components/PostNavigation.astro";
import TableOfContents from "@components/TableOfContents.astro";
import Giscus from "@components/Giscus.astro";
export async function getStaticPaths() {
const posts = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
return posts.map((post) => ({
params: { slug: post.slug },
props: post,
}));
}
type Props = CollectionEntry<"blog">;
const posts = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
function getPostIndex(slug: string): number {
return posts.findIndex((post) => post.slug === slug);
}
function getNextPost(slug: string): Props | null {
const postIndex = getPostIndex(slug);
return postIndex !== -1 && postIndex < posts.length - 1 ? posts[postIndex + 1] : null;
}
function getPrevPost(slug: string): Props | null {
const postIndex = getPostIndex(slug);
return postIndex > 0 ? posts[postIndex - 1] : null;
}
const currentPostSlug = Astro.params.slug;
const nextPost = getNextPost(currentPostSlug);
const prevPost = getPrevPost(currentPostSlug);
const post = Astro.props;
const { Content, headings } = await post.render();
---
<Layout title={post.data.title} description={post.data.description}>
<Container>
<div class="animate">
<BackToPrevious href="/blog">Back to blog</BackToPrevious>
</div>
<div class="my-10 space-y-4">
<div class="animate flex items-center gap-1.5">
<div class="font-base text-sm">
<FormattedDate date={post.data.date} />
</div>
&bull;
<div class="font-base text-sm">
{readingTime(post.body)}
</div>
</div>
<h1 class="animate text-4xl font-semibold text-black dark:text-white">
{post.data.title}
</h1>
<div class="font-base text-sm ">
{post.data.tags && post.data.tags.length > 0 ? (
post.data.tags.map((tag) => (
<div class="inline-block my-1">
<a
href={`/tags/${tag}`}
class="mx-1 rounded-full px-2 py-1 bg-orange-300 hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500 transition-colors duration-300 ease-in-out"
>
#{tag}
</a>
</div>
))
) : (
<span>No tags available</span>
)}
</div>
</div>
{headings.length > 0 && <TableOfContents headings={headings} />}
<article class="animate">
<Content />
<div class="mt-24">
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
</div>
<div class="mt-24">
<Giscus />
</div>
</article>
</Container>
</Layout>

55
src/pages/blog/index.astro Normal file
View file

@ -0,0 +1,55 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import ArrowCard from "@components/ArrowCard.astro";
import { BLOG } from "@consts";
const data = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
type Acc = {
[year: string]: CollectionEntry<"blog">[];
};
const posts = data.reduce((acc: Acc, post) => {
const year = post.data.date.getFullYear().toString();
if (!acc[year]) {
acc[year] = [];
}
acc[year].push(post);
return acc;
}, {});
const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a));
---
<Layout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<div class="space-y-10">
<div class="space-y-4">
{
years.map((year) => (
<section class="animate space-y-4">
<div class="font-semibold text-black dark:text-white">
{year}
</div>
<div>
<ul class="not-prose flex flex-col gap-4">
{posts[year].map((post) => (
<li>
<ArrowCard entry={post} />
</li>
))}
</ul>
</div>
</section>
))
}
</div>
</div>
</aside>
</Container>
</Layout>

41
src/pages/cv.astro Normal file
View file

@ -0,0 +1,41 @@
---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { CV } from "@consts";
import CVCard from "@components/CVCard.astro";
// TO Modify
const works = [
{company:"Company A", time: "2022-Present", job_title: "Research Scientist", location: "London, UK", description: "Your Notes about the job"},
{company:"Company A", time: "2022-Present", job_title: "Research Scientist", location: "London, UK", description: "Your Notes about the job"},
]
const educations = [
{school:"University 1", time: "2022-Present", job_title: "BEng in Electronic Information Engineering", location: "London, UK", description: "Your Notes about the study"},
]
---
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<div class="space-y-2 md:space-y-10">
<div class="animate font-semibold text-black dark:text-white">
Work Experience
</div>
<ul class="animate not-prose flex flex-col gap-4">
{works.map((work) => (
<CVCard institution={work.company} time={work.time} job_title={work.job_title} location={work.location} description={work.description} />)
)}
</ul>
<div class="animate font-semibold text-black dark:text-white">
Education
</div>
<ul class="animate not-prose flex flex-col gap-4">
{educations.map((education) => (
<CVCard institution={education.school} time={education.time} job_title={education.job_title} location={education.location} description={education.description} />)
)}
</ul>
</div>
</aside>
</Container>
</Layout>

158
src/pages/index.astro Normal file
View file

@ -0,0 +1,158 @@
---
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { SITE, HOME } from "@consts";
import ArrowCard from "@components/ArrowCard.astro";
import Link from "@components/Link.astro";
import { getCollection } from "astro:content";
import type { CollectionEntry } from "astro:content";
import PublicationCard from "@components/PublicationCard.astro";
import SocialIcons from "@components/SocialIcons.astro";
const blog = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, SITE.NUM_POSTS_ON_HOMEPAGE);
const publications: CollectionEntry<"publications">[] = (
await getCollection("publications")
)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, SITE.NUM_PUBLICATIONS_ON_HOMEPAGE);
---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<h1 class="animate font-semibold text-black dark:text-white">
Astro Micro Academics 🍄
</h1>
<div class="space-y-16">
<section>
<article class="space-y-4">
<span class="animate">
<p>
Astro Micro Academics is a theme for <Link
href="https://astro.build/">Astro</Link
> and tailored for academic users and researchers. It's built on <Link href="https://astro.build/themes/details/astro-micro/">Astro Micro</Link> and
<Link href="https://github.com/markhorn-dev">
Mark Horn's
</Link> popular theme <Link
href="https://astro.build/themes/details/astronano/"
>Astro Nano</Link
>.
</p>
<p>
Micro Academics adds features like <span class="text-red-500">tags, and blog math support</span> and also inherits <Link href="https://pagefind.app/"
>Pagefind</Link
> for search, <Link href="https://giscus.app">Giscus</Link> for comments,
from Astro Micro. See full changes this <Link
href="/blog/00-academic-astro">here</Link
>.
</p>
</span>
<span class="animate">
<p>
Micro Academics still comes with everything great about Micro and Nano — full type
safety, a sitemap, an RSS feed, and Markdown + MDX support.
Styled with TailwindCSS and preconfigured with system, light,
and dark themes.
</p>
<p>
Visit
<Link href="https://github.com/jingwu2121/astro-micro-academic">
Astro Micro Academics on GitHub
</Link>
to fork the repository to get started.
</p>
</span>
</article>
</section>
<section class="animate space-y-2 border-2 border-red-800 text-red-800 dark:border-red-400 border-dashed p-2 dark:text-red-400">
📢📢 Your important Information (Open for job/Recruiting students)
</section>
<section class="animate space-y-6">
<span class="animate">
<h4 class="font-semibold text-black dark:text-white">
Let's Connect
</h4>
<article>
<p>
If you want to get in touch with me about something or just to say
hi, reach out on social media or send me an email.
</p>
</article>
<SocialIcons icon_size={'text-3xl'} />
</span>
</section>
<section class="animate space-y-6">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">
Research Interests
</h2>
</div>
<ul class="not-prose flex flex-col gap-4">
<li>3D Vision</li>
<li>AIGC</li>
</ul>
</section>
<section class="animate space-y-6">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">
News
</h2>
</div>
<ul class="not-prose flex flex-col gap-4 overflow-y-auto max-h-[150px] scroll_bar">
<li>[06/2024]: Your News1</li>
<li>[06/2024]: Your <span class="text-red-600">News2</span></li>
<li>[06/2024]: Your <span class="text-red-600">News2</span></li>
<!-- <li>[06/2024]: Your <span class="text-red-600">News2</span></li>
<li>[06/2024]: Your <span class="text-red-600">News2</span></li> -->
</ul>
</section>
<section class="animate space-y-6">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">
Recent research
</h2>
<Link href="/publications"> See all research </Link>
</div>
<ul class="not-prose flex flex-col gap-4">
{
publications.map((publication) => (
<li>
<PublicationCard entry={publication} />
</li>
))
}
</ul>
</section>
<section class="animate space-y-6">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">
Latest posts
</h2>
<Link href="/blog"> See all posts </Link>
</div>
<ul class="not-prose flex flex-col gap-4">
{
blog.map((post) => (
<li>
<ArrowCard entry={post} />
</li>
))
}
</ul>
</section>
</div>
</aside>
</Container>
</Layout>

32
src/pages/publications/index.astro Normal file
View file

@ -0,0 +1,32 @@
---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { RESEARCH } from "@consts";
import PublicationCard from "@components/PublicationCard.astro";
// import PublicationCard from "@components/PublicationCard";
const publications = (await getCollection("publications"))
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
<Layout title={RESEARCH.TITLE} description={RESEARCH.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<div class="space-y-10">
<div class="animate font-semibold text-black dark:text-white">
Research
</div>
<ul class="animate not-prose flex flex-col gap-4">
{
publications.map((publication) => (
<li>
<PublicationCard entry={publication} />
</li>
))
}
</ul>
</div>
</aside>
</Container>
</Layout>

40
src/pages/rss.xml.js Normal file
View file

@ -0,0 +1,40 @@
import rss from "@astrojs/rss";
import { SITE } from "@consts";
import { getCollection } from "astro:content";
export async function GET(context) {
// const publications = (await getCollection("publications")).filter(
// (publication) => !publication.data.draft,
// );
// const items = [...blog, ...publications].sort(
// (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
// );
try {
const blog = (await getCollection("blog")).filter((post) => !post.data.draft);
// Filter posts by tag 'rss-feed'
const filteredBlogs = blog.filter(post => post.data.tags && post.data.tags.includes('rss-feed'));
// Sort posts by date
const items = [...filteredBlogs].sort(
(a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf()
);
// Return RSS feed
return rss({
title: SITE.TITLE,
description: SITE.DESCRIPTION,
site: context.site,
items: items.map((item) => ({
title: item.data.title,
description: item.data.description,
pubDate: item.data.date,
link: `/${item.collection}/${item.slug}/`,
})),
});
} catch (error) {
console.error('Error generating RSS feed:', error);
return new Response('Error generating RSS feed', { status: 500 });
}
}

54
src/pages/tags/[...slug].astro Normal file
View file

@ -0,0 +1,54 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import ArrowCard from "@components/ArrowCard.astro";
import { TAGS } from "@consts";
type BlogPost = CollectionEntry<'blog'>;
type Props = {
tag: string;
posts: BlogPost[];
};
const { tag, posts } = Astro.props;
export async function getStaticPaths() {
const posts = await getCollection('blog');
const tags = posts.flatMap((post) => post.data.tags || []);
const uniqueTags = Array.from(new Set(tags.filter((tag): tag is string => typeof tag === 'string')));
return uniqueTags.map((tag) => ({
params: { slug: tag },
props: { tag, posts: posts.filter((post) => post.data.tags?.includes(tag)) },
}));
}
---
<Layout title={`Posts tagged with "${tag}"`} description={`A collection of posts tagged with ${tag}.`}>
<Container>
<aside data-pagefind-ignore>
<div class="space-y-10">
<div class="animate font-semibold text-black dark:text-white">
Tag: <span class="px-3 py-2 rounded-full mx-2 bg-orange-300 hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500 transition-colors duration-300 ease-in-out">#{tag}</span>
</div>
<div class="space-y-4">
{
posts.map((post) => (
<section class="animate space-y-4">
<div>
<ul class="not-prose flex flex-col gap-4">
<li>
<ArrowCard entry={post} />
</li>
</ul>
</div>
</section>
))
}
</div>
</div>
</aside>
</Container>
</Layout>

33
src/pages/tags/index.astro Normal file
View file

@ -0,0 +1,33 @@
---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { TAGS } from "@consts";
import Image from "astro/components/Image.astro";
const blog = (await getCollection("blog"))
.filter((post) => !post.data.draft);
const tags = blog.flatMap(post => post.data.tags).filter((tag, index, self) => self.indexOf(tag) === index);
---
<Layout title={TAGS.TITLE} description={TAGS.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<div class="space-y-10">
<div class="animate font-semibold text-black dark:text-white">
Tags
</div>
<ul class="flex flex-wrap ">
{tags.map(tag => (
<li class="my-3">
<a href={`/tags/${tag}`} class="px-3 py-2 rounded-full mx-2 bg-orange-300 hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500 transition-colors duration-300 ease-in-out">
#{tag}
</a>
</li>
))}
</ul>
</div>
</aside>
</Container>
</Layout>