apply formatting rules
This commit is contained in:
@@ -1,16 +1,15 @@
|
||||
---
|
||||
|
||||
import { getCollection, render } from "astro:content";
|
||||
import BlogHeader from "@components/BlogHeader.astro";
|
||||
import Tags from "@components/Tags.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: { post },
|
||||
}));
|
||||
const posts = await getCollection("blog");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
@@ -21,31 +20,30 @@ const { Content } = await render(post);
|
||||
---
|
||||
|
||||
<Layout title={data.title}>
|
||||
<h1></h1>
|
||||
<article>
|
||||
<BlogHeader title={data.title} date={data.pubDate} />
|
||||
<Content />
|
||||
<a href="https://notbyai.fyi/">
|
||||
<i class="not-by-ai"></i>
|
||||
</a>
|
||||
<Tags tags={data.tags} />
|
||||
</article>
|
||||
<article>
|
||||
<BlogHeader title={data.title} date={data.pubDate} />
|
||||
<Content />
|
||||
<a href="https://notbyai.fyi/">
|
||||
<i class="not-by-ai"></i>
|
||||
</a>
|
||||
<Tags tags={data.tags} />
|
||||
</article>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.not-by-ai {
|
||||
display: block;
|
||||
width: 134px;
|
||||
height: 45px;
|
||||
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.not-by-ai {
|
||||
display: block;
|
||||
width: 134px;
|
||||
height: 45px;
|
||||
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.not-by-ai {
|
||||
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-black.svg);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.not-by-ai {
|
||||
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-black.svg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,65 +1,64 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import PostPreview from "@components/PostPreview.astro";
|
||||
|
||||
import { type CollectionEntry, getCollection } from 'astro:content';
|
||||
import PostPreview from '@components/PostPreview.astro';
|
||||
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import type { Page } from 'astro';
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import type { Page } from "astro";
|
||||
|
||||
export async function getStaticPaths({ paginate }) {
|
||||
const allPosts = await getCollection('blog');
|
||||
const allPosts = await getCollection("blog");
|
||||
|
||||
allPosts.sort(
|
||||
(a, b) =>
|
||||
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
|
||||
);
|
||||
allPosts.sort(
|
||||
(a, b) =>
|
||||
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate)),
|
||||
);
|
||||
|
||||
return paginate(allPosts, { pageSize: 10 });
|
||||
return paginate(allPosts, { pageSize: 10 });
|
||||
}
|
||||
|
||||
interface Props {
|
||||
page: Page<CollectionEntry<'blog'>>;
|
||||
page: Page<CollectionEntry<"blog">>;
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title="Blog Archive">
|
||||
{page.data.map((post) => <PostPreview post={post} />)}
|
||||
{page.data.map((post) => <PostPreview post={post} />)}
|
||||
|
||||
<div class="pagination">
|
||||
{
|
||||
page.currentPage !== 1 ? (
|
||||
<a href={`/blog/page/${page.currentPage - 1}`}>Previous</a>
|
||||
) : (
|
||||
<span class="disabled">Previous</span>
|
||||
)
|
||||
}
|
||||
{
|
||||
page.currentPage !== page.lastPage ? (
|
||||
<a href={`/blog/page/${page.currentPage + 1}`}>Next</a>
|
||||
) : (
|
||||
<span class="disabled">Next</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div class="pagination">
|
||||
{
|
||||
page.currentPage !== 1 ? (
|
||||
<a href={`/blog/page/${page.currentPage - 1}`}>Previous</a>
|
||||
) : (
|
||||
<span class="disabled">Previous</span>
|
||||
)
|
||||
}
|
||||
{
|
||||
page.currentPage !== page.lastPage ? (
|
||||
<a href={`/blog/page/${page.currentPage + 1}`}>Next</a>
|
||||
) : (
|
||||
<span class="disabled">Next</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
margin-top: 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
margin-top: 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.disabled {
|
||||
color: var(--text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,73 +1,72 @@
|
||||
---
|
||||
|
||||
import { getCollection } from 'astro:content';
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { add, format } from 'date-fns';
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import { add, format } from "date-fns";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
const posts = await getCollection("blog");
|
||||
|
||||
const tags = ['all'];
|
||||
const tags = ["all"];
|
||||
|
||||
posts.forEach((post) => {
|
||||
post.data.tags.forEach((tag) => {
|
||||
if (!tags.includes(tag)) {
|
||||
tags.push(tag);
|
||||
}
|
||||
});
|
||||
});
|
||||
posts.forEach((post) => {
|
||||
post.data.tags.forEach((tag) => {
|
||||
if (!tags.includes(tag)) {
|
||||
tags.push(tag);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return tags.map((tag) => ({
|
||||
params: { tag },
|
||||
props: { tag },
|
||||
}));
|
||||
return tags.map((tag) => ({
|
||||
params: { tag },
|
||||
props: { tag },
|
||||
}));
|
||||
}
|
||||
|
||||
const { tag }: { tag?: string } = Astro.params;
|
||||
|
||||
const posts = await getCollection('blog', ({ data }) => {
|
||||
if (!tag) {
|
||||
return false;
|
||||
}
|
||||
const posts = await getCollection("blog", ({ data }) => {
|
||||
if (!tag) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (tag === 'all') {
|
||||
return true;
|
||||
}
|
||||
if (tag === "all") {
|
||||
return true;
|
||||
}
|
||||
|
||||
return data.tags.includes(tag);
|
||||
return data.tags.includes(tag);
|
||||
});
|
||||
|
||||
if (posts.length === 0) {
|
||||
return Astro.redirect('/404');
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
|
||||
posts.sort(
|
||||
(a, b) =>
|
||||
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
|
||||
(a, b) =>
|
||||
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate)),
|
||||
);
|
||||
---
|
||||
|
||||
<Layout title={`Blog - ${tag}`}>
|
||||
<h1>All posts tagged: {tag}</h1>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/posts/${post.id}`}>{post.data.title}</a> -
|
||||
<span>
|
||||
{format(
|
||||
add(new Date(post.data.pubDate), { hours: 6 }),
|
||||
'MMM do, y'
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<h1>All posts tagged: {tag}</h1>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/posts/${post.id}`}>{post.data.title}</a> -
|
||||
<span>
|
||||
{format(
|
||||
add(new Date(post.data.pubDate), { hours: 6 }),
|
||||
"MMM do, y",
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user