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 { defineConfig } from 'astro/config'
-import netlify from "@astrojs/netlify/functions";
+import netlify from '@astrojs/netlify/functions'
+
+// https://astro.build/config
+import mdx from '@astrojs/mdx'
 
 // https://astro.build/config
 export default defineConfig({
-  output: "server",
+	output: 'server',
-  adapter: netlify()
+	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,12 +1,12 @@
 ---
-import FormattedDate from "@components/FormattedDate.astro";
+import FormattedDate from '@components/FormattedDate.astro'
 
 interface Props {
-  title: String;
+	title: String
-  date: String;
+	date: String
 }
 
-const { title, date } = Astro.props;
+const { title, date } = Astro.props
 ---
 
 <div class="blog-header">

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-const year = new Date().getFullYear();
+const year = new Date().getFullYear()
 ---
 
 <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,10 +1,10 @@
 ---
-const { pathname } = Astro.url;
+const { pathname } = Astro.url
 
 const navLinks = [
-  { label: "Blog", icon: "website-with-texticonImage24px", path: "/" },
+	{ label: 'Blog', icon: 'website-with-texticonImage24px', path: '/' },
-  { label: "About", icon: "usericonImage24px", path: "/about/" },
+	{ label: 'About', icon: 'usericonImage24px', path: '/about/' },
-];
+]
 ---
 
 <header>
@@ -15,7 +15,7 @@ const navLinks = [
 				navLinks.map((link) => (
 					<li>
 						<a
-              class={pathname === link.path ? "active-nav" : null}
+							class={pathname === link.path ? 'active-nav' : null}
 							href={link.path}
 						>
 							<img src={`/media/icons/${link.icon}.svg`} />

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 { post } = Astro.props
-const { data, slug } = post;
+const { data, slug } = post
-
-const preview = post.body.split("\n")[1];
 ---
 
 <article class="post-preview">
 	<div>
 		<BlogHeader title={post.data.title} date={post.data.pubDate} />
-    <p>{preview}</p>
+		<a href={`/posts/${slug}`}>Read Post</a>
-    <a href={`/posts/${slug}`}>Read More</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(),
 	}),
-});
+})
 
 export const collections = {
 	blog: blogCollection,
-};
+}

src/layouts/About.astro

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

src/layouts/Layout.astro

@@ -1,16 +1,16 @@
 ---
-import "@styles/global.css";
+import '@styles/global.css'
 
-import Header from "@components/Header.astro";
+import Header from '@components/Header.astro'
-import Footer from "@components/Footer.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.title
 ---
 
 <!DOCTYPE html>

src/pages/archive.astro

@@ -1,27 +1,27 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content'
-const sortParam = Astro.url.search.split("=")[1];
+const sortParam = Astro.url.search.split('=')[1]
 
-import Layout from "@layouts/Layout.astro";
+import Layout from '@layouts/Layout.astro'
-import FormattedDate from "@components/FormattedDate.astro";
+import FormattedDate from '@components/FormattedDate.astro'
 
-const posts = await getCollection("blog");
+const posts = await getCollection('blog')
 
 switch (sortParam) {
-  case "date-des":
+	case 'date-des':
 		posts.sort(
 			(a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
-    );
+		)
-    break;
+		break
-  case "date-asc":
+	case 'date-asc':
 		posts.sort(
 			(a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate)
-    );
+		)
-    break;
+		break
-  case "title":
+	case 'title':
-    posts.sort((a, b) => a.data.title - b.data.title);
+		posts.sort((a, b) => a.data.title - b.data.title)
 	default:
-    break;
+		break
 }
 ---
 
@@ -38,7 +38,7 @@ switch (sortParam) {
 	{
 		posts.map(({ slug, data }) => (
 			<div>
-        <a href={`/posts/${slug}`}>{data.title}</a> -{" "}
+				<a href={`/posts/${slug}`}>{data.title}</a> -{' '}
 				<FormattedDate date={data.pubDate} />
 			</div>
 		))
@@ -46,15 +46,15 @@ switch (sortParam) {
 </Layout>
 
 <script is:inline>
-  const sort = location.search.split("=")[1];
+	const sort = location.search.split('=')[1]
-  const sortEl = document.querySelector("#sort-by");
+	const sortEl = document.querySelector('#sort-by')
 
-  sortEl.value = sort || "title";
+	sortEl.value = sort || 'title'
 
 	sortEl.addEventListener(
-    "change",
+		'change',
 		() => (window.location.href = `/archive?sort=${sortEl.value}`)
-  );
+	)
 </script>
 
 <style>

src/pages/index.astro

@@ -1,11 +1,11 @@
 ---
-export const prerender = true;
+export const prerender = true
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content'
 
-import Layout from "@layouts/Layout.astro";
+import Layout from '@layouts/Layout.astro'
-import PostPreview from "@components/PostPreview.astro";
+import PostPreview from '@components/PostPreview.astro'
 
-const posts = await getCollection("blog");
+const posts = await getCollection('blog')
 ---
 
 <Layout title="Home">

src/pages/posts/[slug].astro

@@ -1,23 +1,23 @@
 ---
-export const prerender = true;
+export const prerender = true
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content'
 
-import Layout from "@layouts/Layout.astro";
+import Layout from '@layouts/Layout.astro'
-import BlogHeader from "@components/BlogHeader.astro";
+import BlogHeader from '@components/BlogHeader.astro'
 
 export async function getStaticPaths() {
-  const posts = await getCollection("blog");
+	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}>
@@ -34,4 +34,7 @@ const { Content } = await post.render();
 		display: block;
 		margin: auto;
 	}
+	.no-shadow {
+		box-shadow: none;
+	}
 </style>

src/pages/rss.xml.js

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