Finish Blog styling
Change-Id: I0acdd0b4665c7abca22acf3d3131330039ca049c
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/680
Tested-by: Samuel Shuert <coded@clicks.codes>
Reviewed-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/.vscode/extensions.json b/sites/blog/.vscode/extensions.json
deleted file mode 100644
index 56f043d..0000000
--- a/sites/blog/.vscode/extensions.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
- "unwantedRecommendations": []
-}
diff --git a/sites/blog/.vscode/launch.json b/sites/blog/.vscode/launch.json
deleted file mode 100644
index d642209..0000000
--- a/sites/blog/.vscode/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "version": "0.2.0",
- "configurations": [
- {
- "command": "./node_modules/.bin/astro dev",
- "name": "Development server",
- "request": "launch",
- "type": "node-terminal"
- }
- ]
-}
diff --git a/sites/blog/package.json b/sites/blog/package.json
index 71d5b72..4be48d6 100644
--- a/sites/blog/package.json
+++ b/sites/blog/package.json
@@ -12,6 +12,7 @@
"dependencies": {
"@astrojs/mdx": "^2.3.1",
"@astrojs/rss": "^4.0.5",
- "@astrojs/sitemap": "^3.1.4"
+ "@astrojs/sitemap": "^3.1.4",
+ "sharp": "^0.33.3"
}
}
\ No newline at end of file
diff --git a/sites/blog/public/blog-placeholder-1.jpg b/sites/blog/public/blog-placeholder-1.jpg
deleted file mode 100644
index 74d4009..0000000
--- a/sites/blog/public/blog-placeholder-1.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-2.jpg b/sites/blog/public/blog-placeholder-2.jpg
deleted file mode 100644
index c4214b0..0000000
--- a/sites/blog/public/blog-placeholder-2.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-3.jpg b/sites/blog/public/blog-placeholder-3.jpg
deleted file mode 100644
index fbe2ac0..0000000
--- a/sites/blog/public/blog-placeholder-3.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-4.jpg b/sites/blog/public/blog-placeholder-4.jpg
deleted file mode 100644
index f4fc88e..0000000
--- a/sites/blog/public/blog-placeholder-4.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-5.jpg b/sites/blog/public/blog-placeholder-5.jpg
deleted file mode 100644
index c564674..0000000
--- a/sites/blog/public/blog-placeholder-5.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/public/blog-placeholder-about.jpg b/sites/blog/public/blog-placeholder-about.jpg
deleted file mode 100644
index cf5f685..0000000
--- a/sites/blog/public/blog-placeholder-about.jpg
+++ /dev/null
Binary files differ
diff --git a/sites/blog/src/components/BaseHead.astro b/sites/blog/src/components/BaseHead.astro
index abe36fb..1bf7faa 100644
--- a/sites/blog/src/components/BaseHead.astro
+++ b/sites/blog/src/components/BaseHead.astro
@@ -6,12 +6,11 @@
interface Props {
title: string;
description: string;
- image?: string;
}
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
+const { title, description } = Astro.props;
---
<!-- Global Metadata -->
@@ -38,11 +37,9 @@
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
diff --git a/sites/blog/src/content/blog/using-mdx.mdx b/sites/blog/src/content/blog/using-mdx.mdx
deleted file mode 100644
index 8daf5bc..0000000
--- a/sites/blog/src/content/blog/using-mdx.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 'Using MDX'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 02 2022'
-heroImage: '/blog-placeholder-5.jpg'
----
-
-This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
-
-## Why MDX?
-
-MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts.
-
-If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
-
-## Example
-
-Here is how you import and use a UI component inside of MDX.
-When you open this page in the browser, you should see the clickable button below.
-
-## More Links
-
-- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
-- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)
-- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.
diff --git a/sites/blog/src/content/config.ts b/sites/blog/src/content/config.ts
index bb4d8a1..8f6ca9d 100644
--- a/sites/blog/src/content/config.ts
+++ b/sites/blog/src/content/config.ts
@@ -1,6 +1,6 @@
import { defineCollection, z } from 'astro:content';
-const blog = defineCollection({
+const post = defineCollection({
type: 'content',
// Type-check frontmatter using a schema
schema: z.object({
@@ -9,7 +9,8 @@
// Transform string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
+ pinned: z.coerce.boolean().optional()
}),
});
-export const collections = { blog };
+export const collections = { post };
diff --git a/sites/blog/src/layouts/BlogPost.astro b/sites/blog/src/layouts/BlogPost.astro
index 6b96dd7..1d87f76 100644
--- a/sites/blog/src/layouts/BlogPost.astro
+++ b/sites/blog/src/layouts/BlogPost.astro
@@ -4,7 +4,7 @@
import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<'post'>['data'];
const { title, description, pubDate, updatedDate } = Astro.props;
---
diff --git a/sites/blog/src/pages/index.astro b/sites/blog/src/pages/index.astro
index 13b3aef..3d66624 100644
--- a/sites/blog/src/pages/index.astro
+++ b/sites/blog/src/pages/index.astro
@@ -5,9 +5,12 @@
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()
-);
+
+const posts = await getCollection('post')
+
+const pinnedPosts = posts.filter(p => p.data.pinned);
+const otherPosts = posts.filter(p => !(p.data.pinned || false))
+
---
<!doctype html>
@@ -15,8 +18,8 @@
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
- <body class="bg-mantle px-72 min-h-dvh flex flex-col max-md:px-4 transition-all">
- <div class="w-full min-h-[90vh]">
+ <body class="bg-mantle min-h-screen flex flex-col items-center">
+ <div class="flex justify-center w-full flex-col gap-2 md:min-w-[768px] px-4 md:max-w-screen-lg">
<nav class="bg-mantle flex justify-center py-2 h-12">
<div class="flex flex-col items-center group">
<a href="/" class="text-text cursor-pointer hover:bg-surface0 rounded px-4 transition-colors">
@@ -25,24 +28,48 @@
<div class="bg-text h-[2px] w-8 -mt-1 rounded-full group-hover:w-10 transition-all" />
</div>
</nav>
- <main class="w-full bg-mantle mt-6 h-full">
- <section id="posts" class="flex justify-center rounded-2xl min-h-full">
- <div class="flex flex-wrap gap-4 m-0 p-0 w-full min-h-full">
+ <main class="w-full bg-mantle mt-6 min-h-[84vh]">
+ <section id="posts">
+ <div class="flex flex-wrap gap-4 justify-center mb-10">
{
- posts.map((post) => (
- <a href={`/blog/${post.slug}/`} class="
- min-w-72
- w-[calc(25%-0.75rem)] text-lg bg-base p-4 rounded-2xl
- first:w-[calc(50%-0.5rem)] first:text-center first:text-2xl
- first:max-md:text-lg first:max-md:text-left first:max-md:w-full first:max-md:h-auto
+ pinnedPosts.length > 0 ? pinnedPosts.map((post) => (
+ <a href={`/post/${post.slug}/`} class="
+ h-32 text-base bg-base p-4 rounded-2xl flex flex-col flex-grow border border-blue
+ hover:bg-surface0 hover:-translate-y-2 transition-all">
+ <h4 class="text-text w-full text-ellipsis">{post.data.title}</h4>
+ <div class="text-subtext0 flex">
+ <p title="Pinned">📌 </p>
+ <FormattedDate date={post.data.pubDate} />
+ </div>
+ </a>
+ )) : null
+ }
+ </div>
+ <div class="flex flex-wrap gap-4 justify-center">
+ {
+ otherPosts.length > 0 ? otherPosts.map((post, idx) => (
+ <a href={`/post/${post.slug}/`} class="
+ h-32 text-base bg-base p-4 rounded-2xl flex flex-col flex-grow
+ first:text-center first:text-xl first:border-yellow first:border first:box-border
+ first:max-md:text-left first:max-md:w-full
hover:bg-surface0 hover:-translate-y-2 transition-all
max-md:w-full">
- <h4 class="text-text">{post.data.title}</h4>
- <p class="text-subtext0">
+ <h4 class="text-text w-full text-ellipsis">{post.data.title}</h4>
+ <div class="text-subtext0 flex">
+ { idx === 0 ? <p title="Latest">✨ </p> : null }
<FormattedDate date={post.data.pubDate} />
- </p>
+ </div>
</a>
- ))
+ )) : null
+ }
+ </div>
+ <div class="flex justify-center h-40">
+ {
+ posts.length === 0 ?
+ <div class="border border-dashed border-surface0 rounded-xl flex justify-center items-center w-1/2">
+ No Posts Yet
+ </div> :
+ null
}
</div>
</section>
diff --git "a/sites/blog/src/pages/blog/\133...slug\135.astro" "b/sites/blog/src/pages/post/\133...slug\135.astro"
similarity index 82%
rename from "sites/blog/src/pages/blog/\133...slug\135.astro"
rename to "sites/blog/src/pages/post/\133...slug\135.astro"
index ecdd3da..9162df4 100644
--- "a/sites/blog/src/pages/blog/\133...slug\135.astro"
+++ "b/sites/blog/src/pages/post/\133...slug\135.astro"
@@ -3,13 +3,13 @@
import BlogPost from '../../layouts/BlogPost.astro';
export async function getStaticPaths() {
- const posts = await getCollection('blog');
+ const posts = await getCollection('post');
return posts.map((post: { slug: any; }) => ({
params: { slug: post.slug },
props: post,
}));
}
-type Props = CollectionEntry<'blog'>;
+type Props = CollectionEntry<'post'>;
const post = Astro.props;
const { Content } = await post.render();
diff --git a/sites/blog/src/pages/rss.xml.js b/sites/blog/src/pages/rss.xml.js
index 9ff9801..41b0d4a 100644
--- a/sites/blog/src/pages/rss.xml.js
+++ b/sites/blog/src/pages/rss.xml.js
@@ -3,14 +3,14 @@
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
export async function GET(context) {
- const posts = await getCollection('blog');
+ const posts = await getCollection('post');
return rss({
title: SITE_TITLE,
description: SITE_DESCRIPTION,
site: context.site,
items: posts.map((post) => ({
...post.data,
- link: `/blog/${post.slug}/`,
+ link: `/post/${post.slug}/`,
})),
});
}
