Prettier config

.astro/types.d.ts

@@ -172,6 +172,13 @@ declare module 'astro:content' {
   collection: "blog",
   data: InferEntrySchema<"blog">
 },
+"the-right-way-to-code.md": {
+  id: "the-right-way-to-code.md",
+  slug: "the-right-way-to-code",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
 },
 
 	};

.prettierrc.json

@@ -1,3 +1,9 @@
 {
-	"plugins": ["./node_modules/prettier-plugin-astro"]
-}
+  "plugins": ["./node_modules/prettier-plugin-astro"],
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": true,
+  "semi": false,
+  "singleQuote": true,
+  "bracketSpacing": true
+}

astro.config.mjs

@@ -1,8 +1,12 @@
-import { defineConfig } from "astro/config";
-import netlify from "@astrojs/netlify/functions";
+import { defineConfig } from 'astro/config'
+import netlify from '@astrojs/netlify/functions'
+
+// https://astro.build/config
+import mdx from '@astrojs/mdx'
 
 // https://astro.build/config
 export default defineConfig({
-  output: "server",
-  adapter: netlify()
-});
+	output: 'server',
+	adapter: netlify(),
+	integrations: [mdx()],
+})

package.json

@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^0.17.0",
     "@astrojs/netlify": "^2.1.2",
     "@astrojs/rss": "^2.1.0",
     "astro": "^2.0.10",

src/components/BlogHeader.astro

@@ -1,27 +1,27 @@
 ---
-import FormattedDate from "@components/FormattedDate.astro";
+import FormattedDate from '@components/FormattedDate.astro'
 
 interface Props {
-  title: String;
-  date: String;
+	title: String
+	date: String
 }
 
-const { title, date } = Astro.props;
+const { title, date } = Astro.props
 ---
 
 <div class="blog-header">
-  <h2>{title}</h2>
-  <h3>
-    <img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
-    <FormattedDate date={date} />
-  </h3>
+	<h2>{title}</h2>
+	<h3>
+		<img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
+		<FormattedDate date={date} />
+	</h3>
 </div>
 
 <style>
-  h3 {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 1.1rem;
-  }
+	h3 {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 1.1rem;
+	}
 </style>

src/components/Footer.astro

@@ -1,11 +1,11 @@
 ---
-const year = new Date().getFullYear();
+const year = new Date().getFullYear()
 ---
 
 <footer>
-  <p>
-    Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
-      >Astro</a
-    >
-  </p>
+	<p>
+		Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
+			>Astro</a
+		>
+	</p>
 </footer>

src/components/FormattedDate.astro

@@ -1,11 +1,11 @@
 ---
-import { format, add } from "date-fns";
+import { format, add } from 'date-fns'
 
 interface Props {
-  date: Date;
+	date: Date
 }
 
-const { date } = Astro.props;
+const { date } = Astro.props
 ---
 
-<span>{format(add(new Date(date), { hours: 6 }), "MMM do, y")}</span>
+<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>

src/components/Header.astro

@@ -1,29 +1,29 @@
 ---
-const { pathname } = Astro.url;
+const { pathname } = Astro.url
 
 const navLinks = [
-  { label: "Blog", icon: "website-with-texticonImage24px", path: "/" },
-  { label: "About", icon: "usericonImage24px", path: "/about/" },
-];
+	{ label: 'Blog', icon: 'website-with-texticonImage24px', path: '/' },
+	{ label: 'About', icon: 'usericonImage24px', path: '/about/' },
+]
 ---
 
 <header>
-  <h1>Graham's Blog</h1>
-  <nav>
-    <ul>
-      {
-        navLinks.map((link) => (
-          <li>
-            <a
-              class={pathname === link.path ? "active-nav" : null}
-              href={link.path}
-            >
-              <img src={`/media/icons/${link.icon}.svg`} />
-              <span>{link.label}</span>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </nav>
+	<h1>Graham's Blog</h1>
+	<nav>
+		<ul>
+			{
+				navLinks.map((link) => (
+					<li>
+						<a
+							class={pathname === link.path ? 'active-nav' : null}
+							href={link.path}
+						>
+							<img src={`/media/icons/${link.icon}.svg`} />
+							<span>{link.label}</span>
+						</a>
+					</li>
+				))
+			}
+		</ul>
+	</nav>
 </header>

src/components/PostPreview.astro

@@ -1,20 +1,17 @@
 ---
-import BlogHeader from "@components/BlogHeader.astro";
+import BlogHeader from '@components/BlogHeader.astro'
 
 interface Props {
-  post: Object;
+	post: Object
 }
 
-const { post } = Astro.props;
-const { data, slug } = post;
-
-const preview = post.body.split("\n")[1];
+const { post } = Astro.props
+const { data, slug } = post
 ---
 
 <article class="post-preview">
-  <div>
-    <BlogHeader title={post.data.title} date={post.data.pubDate} />
-    <p>{preview}</p>
-    <a href={`/posts/${slug}`}>Read More</a>
-  </div>
+	<div>
+		<BlogHeader title={post.data.title} date={post.data.pubDate} />
+		<a href={`/posts/${slug}`}>Read Post</a>
+	</div>
 </article>

src/content/config.ts

@@ -1,12 +1,12 @@
-import { z, defineCollection } from "astro:content";
+import { z, defineCollection } from 'astro:content'
 
 const blogCollection = defineCollection({
-  schema: z.object({
-    title: z.string(),
-    pubDate: z.date(),
-  }),
-});
+	schema: z.object({
+		title: z.string(),
+		pubDate: z.date(),
+	}),
+})
 
 export const collections = {
-  blog: blogCollection,
-};
+	blog: blogCollection,
+}

src/layouts/About.astro

@@ -1,19 +1,19 @@
 ---
-export const prerender = true;
-import Layout from "@layouts/Layout.astro";
+export const prerender = true
+import Layout from '@layouts/Layout.astro'
 
 const styles = {
-  img: {
-    display: "block",
-    maxWidth: "300px",
-    margin: "auto",
-    marginBottom: "26px",
-    borderRadius: "200px",
-  },
-};
+	img: {
+		display: 'block',
+		maxWidth: '300px',
+		margin: 'auto',
+		marginBottom: '26px',
+		borderRadius: '200px',
+	},
+}
 ---
 
 <Layout title="About">
-  <img src="/portrait.jpg" alt="me" style={styles.img} />
-  <slot />
+	<img src="/portrait.jpg" alt="me" style={styles.img} />
+	<slot />
 </Layout>

src/layouts/Layout.astro

@@ -1,36 +1,36 @@
 ---
-import "@styles/global.css";
+import '@styles/global.css'
 
-import Header from "@components/Header.astro";
-import Footer from "@components/Footer.astro";
+import Header from '@components/Header.astro'
+import Footer from '@components/Footer.astro'
 
 export interface Props {
-  title: string;
+	title: string
 }
 
 const title = Astro.props.frontmatter
-  ? Astro.props.frontmatter.title
-  : Astro.props.title;
+	? Astro.props.frontmatter.title
+	: Astro.props.title
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <meta
-      name="description"
-      content="My personal blog about life, gaming, tech, and whatever else I feel like writing about."
-    />
-    <title>{`ghall.blog - ${title}`}</title>
-  </head>
-  <body class="container">
-    <Header />
-    <main>
-      <slot />
-    </main>
-    <Footer />
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<meta
+			name="description"
+			content="My personal blog about life, gaming, tech, and whatever else I feel like writing about."
+		/>
+		<title>{`ghall.blog - ${title}`}</title>
+	</head>
+	<body class="container">
+		<Header />
+		<main>
+			<slot />
+		</main>
+		<Footer />
+	</body>
 </html>

src/pages/archive.astro

@@ -1,64 +1,64 @@
 ---
-import { getCollection } from "astro:content";
-const sortParam = Astro.url.search.split("=")[1];
+import { getCollection } from 'astro:content'
+const sortParam = Astro.url.search.split('=')[1]
 
-import Layout from "@layouts/Layout.astro";
-import FormattedDate from "@components/FormattedDate.astro";
+import Layout from '@layouts/Layout.astro'
+import FormattedDate from '@components/FormattedDate.astro'
 
-const posts = await getCollection("blog");
+const posts = await getCollection('blog')
 
 switch (sortParam) {
-  case "date-des":
-    posts.sort(
-      (a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
-    );
-    break;
-  case "date-asc":
-    posts.sort(
-      (a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate)
-    );
-    break;
-  case "title":
-    posts.sort((a, b) => a.data.title - b.data.title);
-  default:
-    break;
+	case 'date-des':
+		posts.sort(
+			(a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
+		)
+		break
+	case 'date-asc':
+		posts.sort(
+			(a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate)
+		)
+		break
+	case 'title':
+		posts.sort((a, b) => a.data.title - b.data.title)
+	default:
+		break
 }
 ---
 
 <Layout title="Blog Archive">
-  <div class="archive-options">
-    <div class="select-container">
-      <select name="sort by" id="sort-by">
-        <option value="title">Title (Alphabetically)</option>
-        <option value="date-des">Publish Date (Newest First)</option>
-        <option value="date-asc">Publish Date (Oldest First)</option>
-      </select>
-    </div>
-  </div>
-  {
-    posts.map(({ slug, data }) => (
-      <div>
-        <a href={`/posts/${slug}`}>{data.title}</a> -{" "}
-        <FormattedDate date={data.pubDate} />
-      </div>
-    ))
-  }
+	<div class="archive-options">
+		<div class="select-container">
+			<select name="sort by" id="sort-by">
+				<option value="title">Title (Alphabetically)</option>
+				<option value="date-des">Publish Date (Newest First)</option>
+				<option value="date-asc">Publish Date (Oldest First)</option>
+			</select>
+		</div>
+	</div>
+	{
+		posts.map(({ slug, data }) => (
+			<div>
+				<a href={`/posts/${slug}`}>{data.title}</a> -{' '}
+				<FormattedDate date={data.pubDate} />
+			</div>
+		))
+	}
 </Layout>
 
 <script is:inline>
-  const sort = location.search.split("=")[1];
-  const sortEl = document.querySelector("#sort-by");
+	const sort = location.search.split('=')[1]
+	const sortEl = document.querySelector('#sort-by')
 
-  sortEl.value = sort || "title";
+	sortEl.value = sort || 'title'
 
-  sortEl.addEventListener(
-    "change",
-    () => (window.location.href = `/archive?sort=${sortEl.value}`)
-  );
+	sortEl.addEventListener(
+		'change',
+		() => (window.location.href = `/archive?sort=${sortEl.value}`)
+	)
 </script>
 
 <style>
-  .archive-options {
-    padding: 10px 0 20px;
-  }
+	.archive-options {
+		padding: 10px 0 20px;
+	}
 </style>

src/pages/index.astro

@@ -1,33 +1,33 @@
 ---
-export const prerender = true;
-import { getCollection } from "astro:content";
+export const prerender = true
+import { getCollection } from 'astro:content'
 
-import Layout from "@layouts/Layout.astro";
-import PostPreview from "@components/PostPreview.astro";
+import Layout from '@layouts/Layout.astro'
+import PostPreview from '@components/PostPreview.astro'
 
-const posts = await getCollection("blog");
+const posts = await getCollection('blog')
 ---
 
 <Layout title="Home">
-  {
-    posts
-      .sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
-      .slice(0, 5)
-      .map((post) => <PostPreview post={post} />)
-  }
-  {
-    posts.length < 5 ? null : (
-      <div class="more-posts">
-        <a class="link-button blue-btn" href="/archive">
-          All Posts
-        </a>
-      </div>
-    )
-  }
+	{
+		posts
+			.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
+			.slice(0, 5)
+			.map((post) => <PostPreview post={post} />)
+	}
+	{
+		posts.length < 5 ? null : (
+			<div class="more-posts">
+				<a class="link-button blue-btn" href="/archive">
+					All Posts
+				</a>
+			</div>
+		)
+	}
 </Layout>
 
 <style>
-  .more-posts {
-    text-align: center;
-  }
+	.more-posts {
+		text-align: center;
+	}
 </style>

src/pages/posts/[slug].astro

@@ -1,37 +1,40 @@
 ---
-export const prerender = true;
-import { getCollection } from "astro:content";
+export const prerender = true
+import { getCollection } from 'astro:content'
 
-import Layout from "@layouts/Layout.astro";
-import BlogHeader from "@components/BlogHeader.astro";
+import Layout from '@layouts/Layout.astro'
+import BlogHeader from '@components/BlogHeader.astro'
 
 export async function getStaticPaths() {
-  const posts = await getCollection("blog");
-  return posts.map((post) => ({
-    params: { slug: post.slug },
-    props: { post },
-  }));
+	const posts = await getCollection('blog')
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: { post },
+	}))
 }
 
-const { post } = Astro.props;
+const { post } = Astro.props
 
-const { data } = post;
+const { data } = post
 
-const { Content } = await post.render();
+const { Content } = await post.render()
 ---
 
 <Layout title={data.title}>
-  <BlogHeader title={data.title} date={data.pubDate} />
-  <article>
-    <Content />
-  </article>
+	<BlogHeader title={data.title} date={data.pubDate} />
+	<article>
+		<Content />
+	</article>
 </Layout>
 
 <style is:global>
-  article img {
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    display: block;
-    margin: auto;
-  }
+	article img {
+		border-radius: var(--radius);
+		box-shadow: var(--shadow);
+		display: block;
+		margin: auto;
+	}
+	.no-shadow {
+		box-shadow: none;
+	}
 </style>

src/pages/rss.xml.js

@@ -1,23 +1,23 @@
-import rss from "@astrojs/rss";
-import { getCollection } from "astro:content";
-import sanitizeHtml from "sanitize-html";
-import MarkdownIt from "markdown-it";
-const parser = new MarkdownIt({ html: true });
+import rss from '@astrojs/rss'
+import { getCollection } from 'astro:content'
+import sanitizeHtml from 'sanitize-html'
+import MarkdownIt from 'markdown-it'
+const parser = new MarkdownIt({ html: true })
 
 export async function get(context) {
-  const blog = await getCollection("blog");
-  console.log(blog);
-  return rss({
-    title: "ghall.blog",
-    description:
-      "My personal blog about life, gaming, tech, and whatever else I feel like writing about.",
-    site: "https://ghall.blog",
-    items: blog
-      .sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
-      .map((post) => ({
-        link: `/posts/${post.slug}/`,
-        content: sanitizeHtml(parser.render(post.body)),
-        ...post.data,
-      })),
-  });
+	const blog = await getCollection('blog')
+	console.log(blog)
+	return rss({
+		title: 'ghall.blog',
+		description:
+			'My personal blog about life, gaming, tech, and whatever else I feel like writing about.',
+		site: 'https://ghall.blog',
+		items: blog
+			.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
+			.map((post) => ({
+				link: `/posts/${post.slug}/`,
+				content: sanitizeHtml(parser.render(post.body)),
+				...post.data,
+			})),
+	})
 }