z0x/blog.z0x.ca
Code Activity Actions

chore: remove more slop

Browse source
This commit is contained in:
enscribe 2024-09-10 11:56:46 -07:00
parent 5d9940eddf
commit b9561ad2d0
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
22 changed files with 237 additions and 587 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/pages/about.astro
View file

@ -7,60 +7,56 @@ import { Image } from 'astro:assets'
<Layout title="About" description="About">
<Container>
<aside data-pagefind-ignore>
<div class="space-y-10">
<div class="animate font-semibold text-black dark:text-white">
About
<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 justify-center md:flex-row">
<div class="my-10 text-center">
<div
class="h-[250px] w-[350px] -rotate-6 overflow-hidden rounded-xl bg-neutral-300 object-cover"
>
<Image
src={'/astro-nano.png'}
alt={'life2'}
width={350}
height={250}
class="h-[250px] w-[350px] overflow-hidden rounded-xl object-cover"
/>
</div>
<p class="mt-4 text-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</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 justify-center md:flex-row">
<div class="my-10 text-center">
<div
class="h-[250px] w-[350px] -rotate-6 overflow-hidden rounded-xl bg-neutral-300 object-cover"
>
<Image
src={'/astro-nano.png'}
alt={'life2'}
width={350}
height={250}
class="h-[250px] w-[350px] overflow-hidden rounded-xl object-cover"
/>
</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="mx-auto h-[250px] w-[150px] rotate-6 rounded-xl bg-neutral-300 object-cover sm:ml-auto"
>
<Image
src={'/astro-micro.jpg'}
alt={'life2'}
width={150}
height={250}
class="h-[250px] w-[150px] rounded-xl object-cover"
/>
</div>
<p class="mt-4 text-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="mx-10 my-10 text-center">
<div
class="mx-auto h-[250px] w-[150px] rotate-6 rounded-xl bg-neutral-300 object-cover sm:ml-auto"
>
<Image
src={'/astro-micro.jpg'}
alt={'life2'}
width={150}
height={250}
class="h-[250px] w-[150px] rounded-xl object-cover"
/>
</div>
<p class="mt-4 text-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</aside>
</div>
</Container>
</Layout>

40
src/pages/authors/[...slug].astro Normal file
View file

@ -0,0 +1,40 @@
---
import { type CollectionEntry, getCollection, getEntry } from "astro:content";
import Layout from "@layouts/Layout.astro";
import MemberCard from "@components/MemberCard.astro";
export async function getStaticPaths() {
const authors = await getCollection("authors");
return authors.map((member) => ({
params: { slug: member.slug },
props: { member },
}));
}
type Props = {
member: CollectionEntry<"authors">;
};
const { member } = Astro.props;
const allPosts = await getCollection("blog");
const memberPosts = allPosts
.filter((post) => {
if (typeof post.data.author === 'string') {
return post.data.author === member.data.name && !post.data.draft;
} else if (post.data.author && 'slug' in post.data.author) {
return post.data.author.slug === member.slug && !post.data.draft;
}
return false;
})
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
<Layout
title={`${member.data.name} - Team Member`}
description={member.data.bio || `Profile of ${member.data.name}`}
>
<section class="mx-auto flex max-w-screen-xl flex-col gap-4">
<MemberCard member={member} />
</section>
</Layout>

23
src/pages/authors/index.astro Normal file
View file

@ -0,0 +1,23 @@
---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import MemberCard from "@components/MemberCard.astro";
const authors = await getCollection("authors");
---
<Layout title="authors" description="authors">
<section>
<ul
class="animate not-prose grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3"
>
{
authors.map((member) => (
<li>
<MemberCard member={member} />
</li>
))
}
</ul>
</section>
</Layout>

42
src/pages/blog/index.astro
View file

@ -26,29 +26,25 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
<Layout title="Blog" description="Blog">
<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 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>
</aside>
</div>
</Container>
</Layout>

74
src/pages/cv.astro
View file

@ -1,74 +0,0 @@
---
import { getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
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" description="CV">
<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>

156
src/pages/index.astro
View file

@ -6,158 +6,30 @@ 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" description="Home">
<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-dashed border-red-800 p-2 text-red-800 dark:border-red-400 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 scroll_bar flex max-h-[150px] flex-col gap-4 overflow-y-auto"
>
<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>
<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>
</aside>
<ul class="not-prose flex flex-col gap-4">
{
blog.map((post) => (
<li>
<ArrowCard entry={post} />
</li>
))
}
</ul>
</section>
</Container>
</Layout>

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

@ -1,32 +0,0 @@
---
import { getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
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" description="Research">
<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>

46
src/pages/tags/[...slug].astro
View file

@ -35,30 +35,28 @@ export async function getStaticPaths() {
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="mx-2 rounded-full bg-orange-300 px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
>#{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 class="space-y-10">
<div class="animate font-semibold text-black dark:text-white">
Tag: <span
class="mx-2 rounded-full bg-orange-300 px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
>#{tag}</span
>
</div>
</aside>
<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>
</Container>
</Layout>

36
src/pages/tags/index.astro
View file

@ -13,24 +13,22 @@ const tags = blog
<Layout title="Tags" description="Tags">
<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="mx-2 rounded-full bg-orange-300 px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
>
#{tag}
</a>
</li>
))
}
</ul>
</div>
</aside>
<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="mx-2 rounded-full bg-orange-300 px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
>
#{tag}
</a>
</li>
))
}
</ul>
</div>
</Container>
</Layout>