Create a Blog astro project as template for future
Change-Id: I1e8adbe1c9bdc6b2273a19407530323508adcbd5
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/674
Reviewed-by: Samuel Shuert <coded@clicks.codes>
Tested-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/src/pages/about.astro b/sites/blog/src/pages/about.astro
new file mode 100644
index 0000000..c9d5b02
--- /dev/null
+++ b/sites/blog/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/sites/blog/src/pages/blog/\133...slug\135.astro" "b/sites/blog/src/pages/blog/\133...slug\135.astro"
new file mode 100644
index 0000000..07dbce2
--- /dev/null
+++ "b/sites/blog/src/pages/blog/\133...slug\135.astro"
@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import BlogPost from '../../layouts/BlogPost.astro';
+
+export async function getStaticPaths() {
+ const posts = await getCollection('blog');
+ return posts.map((post) => ({
+ params: { slug: post.slug },
+ props: post,
+ }));
+}
+type Props = CollectionEntry<'blog'>;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<BlogPost {...post.data}>
+ <Content />
+</BlogPost>
diff --git a/sites/blog/src/pages/blog/index.astro b/sites/blog/src/pages/blog/index.astro
new file mode 100644
index 0000000..ebbcd30
--- /dev/null
+++ b/sites/blog/src/pages/blog/index.astro
@@ -0,0 +1,111 @@
+---
+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 posts = (await getCollection('blog')).sort(
+ (a, b) => a.data.pubDate.valueOf() - b.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.slug}/`}>
+ <img width={720} height={360} src={post.data.heroImage} alt="" />
+ <h4 class="title">{post.data.title}</h4>
+ <p class="date">
+ <FormattedDate date={post.data.pubDate} />
+ </p>
+ </a>
+ </li>
+ ))
+ }
+ </ul>
+ </section>
+ </main>
+ <Footer />
+ </body>
+</html>
diff --git a/sites/blog/src/pages/index.astro b/sites/blog/src/pages/index.astro
new file mode 100644
index 0000000..31269ef
--- /dev/null
+++ b/sites/blog/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/sites/blog/src/pages/rss.xml.js b/sites/blog/src/pages/rss.xml.js
new file mode 100644
index 0000000..9ff9801
--- /dev/null
+++ b/sites/blog/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.slug}/`,
+ })),
+ });
+}