aboutsummaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/about.astro62
-rw-r--r--src/pages/blog/[event]/[...slug].astro50
-rw-r--r--src/pages/blog/[event]/index.astro126
-rw-r--r--src/pages/blog/index.astro120
-rw-r--r--src/pages/index.astro50
-rw-r--r--src/pages/rss.xml.js16
6 files changed, 424 insertions, 0 deletions
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..c9d5b02
--- /dev/null
+++ b/src/pages/about.astro
@@ -0,0 +1,62 @@
+---
+import Layout from '../layouts/BlogPost.astro';
+---
+
+<Layout
+ title="About Me"
+ description="Lorem ipsum dolor sit amet"
+ pubDate={new Date('August 08 2021')}
+ heroImage="/blog-placeholder-about.jpg"
+>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
+ viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
+ adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
+ et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
+ vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
+ sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
+ </p>
+
+ <p>
+ Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
+ tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
+ blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
+ porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
+ massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
+ Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
+ bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
+ massa massa ultricies mi.
+ </p>
+
+ <p>
+ Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
+ suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
+ nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
+ turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
+ dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
+ semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
+ vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
+ facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
+ vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
+ urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
+ </p>
+
+ <p>
+ Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
+ viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
+ scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
+ gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
+ pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
+ blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
+ cursus metus aliquam eleifend mi.
+ </p>
+
+ <p>
+ Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
+ nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
+ tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
+ ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
+ proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
+ </p>
+</Layout>
diff --git a/src/pages/blog/[event]/[...slug].astro b/src/pages/blog/[event]/[...slug].astro
new file mode 100644
index 0000000..2d7c495
--- /dev/null
+++ b/src/pages/blog/[event]/[...slug].astro
@@ -0,0 +1,50 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import BlogPost from "../../../layouts/BlogPost.astro";
+import { render } from "astro:content";
+import { object } from "astro:schema";
+
+export async function getStaticPaths() {
+ const posts = await getCollection("blog");
+ const events = Object.keys(
+ Object.groupBy(
+ posts.map((post) => ({
+ id: post.id,
+ event: post.id.split("/").at(-2) || "",
+ })),
+ (post) => post.event
+ )
+ ).filter((event) => event);
+
+ const postPaths = posts.map((post) => post.id.split("/").at(-1));
+ console.log(postPaths);
+
+ const paths = [];
+ for (const event of events) {
+ for (const post of postPaths) {
+ paths.push({
+ params: { event, slug: post },
+ props: { post: posts.find((p) => p.id.endsWith(post!!)) },
+ });
+ }
+ }
+
+ return paths;
+ // return posts.map((post) => ({
+ // params: { slug: post.id, event: post.id.split("/").at(-2) },
+ // props: { post },
+ // }));
+}
+// type Props = {
+// post: CollectionEntry<"blog">;
+// siblings: CollectionEntry<"blog">[];
+// };
+type Props = CollectionEntry<"blog">;
+
+const post = Astro.props;
+const { Content } = await render(post.post);
+---
+
+<BlogPost {...post.post.data}>
+ <Content />
+</BlogPost>
diff --git a/src/pages/blog/[event]/index.astro b/src/pages/blog/[event]/index.astro
new file mode 100644
index 0000000..5bab8f0
--- /dev/null
+++ b/src/pages/blog/[event]/index.astro
@@ -0,0 +1,126 @@
+---
+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";
+
+export async function getStaticPaths() {
+ const blogs = await getCollection("blog");
+ const events = Object.keys(
+ Object.groupBy(
+ blogs.map((b) => ({
+ id: b.id,
+ event: b.id.split("/").at(-2) || "",
+ })),
+ (b) => b.event
+ )
+ );
+ console.log(events);
+ return events.filter((e) => e).map((event) => ({ params: { event } }));
+}
+
+const event = Astro.params.event;
+
+const blogs = await getCollection("blog");
+
+const posts = blogs
+ .filter((b) => b.id.includes(event + "/"))
+ .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+---
+
+<!doctype html>
+<html lang="en">
+ <head>
+ <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+ <style>
+ main {
+ width: 960px;
+ }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+ ul li {
+ width: calc(50% - 1rem);
+ }
+ ul li * {
+ text-decoration: none;
+ transition: 0.2s ease;
+ }
+ ul li:first-child {
+ width: 100%;
+ margin-bottom: 1rem;
+ text-align: center;
+ }
+ ul li:first-child img {
+ width: 100%;
+ }
+ ul li:first-child .title {
+ font-size: 2.369rem;
+ }
+ ul li img {
+ margin-bottom: 0.5rem;
+ border-radius: 12px;
+ }
+ ul li a {
+ display: block;
+ }
+ .title {
+ margin: 0;
+ color: rgb(var(--black));
+ line-height: 1;
+ }
+ .date {
+ margin: 0;
+ color: rgb(var(--gray));
+ }
+ ul li a:hover h4,
+ ul li a:hover .date {
+ color: rgb(var(--accent));
+ }
+ ul a:hover img {
+ box-shadow: var(--box-shadow);
+ }
+ @media (max-width: 720px) {
+ ul {
+ gap: 0.5em;
+ }
+ ul li {
+ width: 100%;
+ text-align: center;
+ }
+ ul li:first-child {
+ margin-bottom: 0;
+ }
+ ul li:first-child .title {
+ font-size: 1.563em;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <Header />
+ <main>
+ <section>
+ <ul>
+ {
+ posts.map((post) => (
+ <li>
+ <a href={`/blog/${post.id}`}>
+ <h4 class="title">{post.data.title}</h4>
+ </a>
+ </li>
+ ))
+ }
+ </ul>
+ </section>
+ </main>
+ <Footer />
+ </body>
+</html>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..07cc838
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,120 @@
+---
+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";
+
+const blogs = await getCollection("blog");
+
+const posts = blogs.sort(
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+const events = Object.keys(
+ Object.groupBy(
+ blogs.map((b) => ({
+ id: b.id,
+ event: b.id.split("/").at(-2) || "",
+ })),
+ (b) => b.event
+ )
+).toSorted((a, b) => +a.split("-").at(-1)!! - +b.split("-").at(-1)!!);
+console.log(events);
+---
+
+<!doctype html>
+<html lang="en">
+ <head>
+ <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+ <style>
+ main {
+ width: 960px;
+ }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+ ul li {
+ width: calc(50% - 1rem);
+ }
+ ul li * {
+ text-decoration: none;
+ transition: 0.2s ease;
+ }
+ ul li:first-child {
+ width: 100%;
+ margin-bottom: 1rem;
+ text-align: center;
+ }
+ ul li:first-child img {
+ width: 100%;
+ }
+ ul li:first-child .title {
+ font-size: 2.369rem;
+ }
+ ul li img {
+ margin-bottom: 0.5rem;
+ border-radius: 12px;
+ }
+ ul li a {
+ display: block;
+ }
+ .title {
+ margin: 0;
+ color: rgb(var(--black));
+ line-height: 1;
+ }
+ .date {
+ margin: 0;
+ color: rgb(var(--gray));
+ }
+ ul li a:hover h4,
+ ul li a:hover .date {
+ color: rgb(var(--accent));
+ }
+ ul a:hover img {
+ box-shadow: var(--box-shadow);
+ }
+ @media (max-width: 720px) {
+ ul {
+ gap: 0.5em;
+ }
+ ul li {
+ width: 100%;
+ text-align: center;
+ }
+ ul li:first-child {
+ margin-bottom: 0;
+ }
+ ul li:first-child .title {
+ font-size: 1.563em;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <Header />
+ <main>
+ <section>
+ <ul>
+ {
+ events.map((event) => (
+ <li>
+ <a href={`/blog/${event}/`}>
+ <h4 class="title">{event}</h4>
+ </a>
+ </li>
+ ))
+ }
+ </ul>
+ </section>
+ </main>
+ <Footer />
+ </body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 0000000..31269ef
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,50 @@
+---
+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';
+---
+
+<!doctype html>
+<html lang="en">
+ <head>
+ <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+ </head>
+ <body>
+ <Header />
+ <main>
+ <h1>🧑‍🚀 Hello, Astronaut!</h1>
+ <p>
+ Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
+ template serves as a lightweight, minimally-styled starting point for anyone looking to build
+ a personal website, blog, or portfolio with Astro.
+ </p>
+ <p>
+ This template comes with a few integrations already configured in your
+ <code>astro.config.mjs</code> file. You can customize your setup with
+ <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
+ React, or Vue to your project.
+ </p>
+ <p>Here are a few ideas on how to get started with the template:</p>
+ <ul>
+ <li>Edit this page in <code>src/pages/index.astro</code></li>
+ <li>Edit the site header items in <code>src/components/Header.astro</code></li>
+ <li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
+ <li>Check out the included blog posts in <code>src/content/blog/</code></li>
+ <li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
+ </ul>
+ <p>
+ Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
+ >read the docs
+ </a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
+ </p>
+ <p>
+ Looking for a blog template with a bit more personality? Check out <a
+ href="https://github.com/Charca/astro-blog-template"
+ >astro-blog-template
+ </a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
+ </p>
+ </main>
+ <Footer />
+ </body>
+</html>
diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js
new file mode 100644
index 0000000..ae5e4c4
--- /dev/null
+++ b/src/pages/rss.xml.js
@@ -0,0 +1,16 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+
+export async function GET(context) {
+ const posts = await getCollection('blog');
+ return rss({
+ title: SITE_TITLE,
+ description: SITE_DESCRIPTION,
+ site: context.site,
+ items: posts.map((post) => ({
+ ...post.data,
+ link: `/blog/${post.id}/`,
+ })),
+ });
+}