graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier config

Browse Source
This commit is contained in:
Graham Hall
2023-02-25 17:56:35 +00:00
parent eaa1ccfd9e
commit b60f598ba2
17 changed files with 1381 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.astro/types.d.ts
Vendored
+7
View File
@@ -172,6 +172,13 @@ declare module 'astro:content' {
collection: "blog", collection: "blog",
data: InferEntrySchema<"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
+7 -1
View File
@@ -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
+9 -5
View File
@@ -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 // https://astro.build/config
export default defineConfig({ export default defineConfig({
output: "server", output: 'server',
adapter: netlify() adapter: netlify(),
}); integrations: [mdx()],
})
package-lock.json
Generated
+1143
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -11,6 +11,7 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^0.17.0",
"@astrojs/netlify": "^2.1.2", "@astrojs/netlify": "^2.1.2",
"@astrojs/rss": "^2.1.0", "@astrojs/rss": "^2.1.0",
"astro": "^2.0.10", "astro": "^2.0.10",
src/components/BlogHeader.astro
+15 -15
View File
@@ -1,27 +1,27 @@
--- ---
import FormattedDate from "@components/FormattedDate.astro"; import FormattedDate from '@components/FormattedDate.astro'
interface Props { interface Props {
title: String; title: String
date: String; date: String
} }
const { title, date } = Astro.props; const { title, date } = Astro.props
--- ---
<div class="blog-header"> <div class="blog-header">
<h2>{title}</h2> <h2>{title}</h2>
<h3> <h3>
<img src="/media/icons/calendar-2iconImage24px.svg" alt="" /> <img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
<FormattedDate date={date} /> <FormattedDate date={date} />
</h3> </h3>
</div> </div>
<style> <style>
h3 { h3 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 1.1rem; font-size: 1.1rem;
} }
</style> </style>
src/components/Footer.astro
+6 -6
View File
@@ -1,11 +1,11 @@
--- ---
const year = new Date().getFullYear(); const year = new Date().getFullYear()
--- ---
<footer> <footer>
<p> <p>
Copyright {year}, Graham Hall – Built with <a href="https://astro.build" Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
>Astro</a >Astro</a
> >
</p> </p>
</footer> </footer>
src/components/FormattedDate.astro
+4 -4
View File
@@ -1,11 +1,11 @@
--- ---
import { format, add } from "date-fns"; import { format, add } from 'date-fns'
interface Props { 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
+22 -22
View File
@@ -1,29 +1,29 @@
--- ---
const { pathname } = Astro.url; const { pathname } = Astro.url
const navLinks = [ 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> <header>
<h1>Graham's Blog</h1> <h1>Graham's Blog</h1>
<nav> <nav>
<ul> <ul>
{ {
navLinks.map((link) => ( navLinks.map((link) => (
<li> <li>
<a <a
class={pathname === link.path ? "active-nav" : null} class={pathname === link.path ? 'active-nav' : null}
href={link.path} href={link.path}
> >
<img src={`/media/icons/${link.icon}.svg`} /> <img src={`/media/icons/${link.icon}.svg`} />
<span>{link.label}</span> <span>{link.label}</span>
</a> </a>
</li> </li>
)) ))
} }
</ul> </ul>
</nav> </nav>
</header> </header>
src/components/PostPreview.astro
+8 -11
View File
@@ -1,20 +1,17 @@
--- ---
import BlogHeader from "@components/BlogHeader.astro"; import BlogHeader from '@components/BlogHeader.astro'
interface Props { 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"> <article class="post-preview">
<div> <div>
<BlogHeader title={post.data.title} date={post.data.pubDate} /> <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>
</div>
</article> </article>
src/content/config.ts
+8 -8
View File
@@ -1,12 +1,12 @@
import { z, defineCollection } from "astro:content"; import { z, defineCollection } from 'astro:content'
const blogCollection = defineCollection({ const blogCollection = defineCollection({
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
pubDate: z.date(), pubDate: z.date(),
}), }),
}); })
export const collections = { export const collections = {
blog: blogCollection, blog: blogCollection,
}; }
src/layouts/About.astro
+12 -12
View File
@@ -1,19 +1,19 @@
--- ---
export const prerender = true; export const prerender = true
import Layout from "@layouts/Layout.astro"; import Layout from '@layouts/Layout.astro'
const styles = { const styles = {
img: { img: {
display: "block", display: 'block',
maxWidth: "300px", maxWidth: '300px',
margin: "auto", margin: 'auto',
marginBottom: "26px", marginBottom: '26px',
borderRadius: "200px", borderRadius: '200px',
}, },
}; }
--- ---
<Layout title="About"> <Layout title="About">
<img src="/portrait.jpg" alt="me" style={styles.img} /> <img src="/portrait.jpg" alt="me" style={styles.img} />
<slot /> <slot />
</Layout> </Layout>
src/layouts/Layout.astro
+24 -24
View File
@@ -1,36 +1,36 @@
--- ---
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 { export interface Props {
title: string; title: string
} }
const title = Astro.props.frontmatter const title = Astro.props.frontmatter
? Astro.props.frontmatter.title ? Astro.props.frontmatter.title
: Astro.props.title; : Astro.props.title
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta <meta
name="description" name="description"
content="My personal blog about life, gaming, tech, and whatever else I feel like writing about." content="My personal blog about life, gaming, tech, and whatever else I feel like writing about."
/> />
<title>{`ghall.blog - ${title}`}</title> <title>{`ghall.blog - ${title}`}</title>
</head> </head>
<body class="container"> <body class="container">
<Header /> <Header />
<main> <main>
<slot /> <slot />
</main> </main>
<Footer /> <Footer />
</body> </body>
</html> </html>
src/pages/archive.astro
+46 -46
View File
@@ -1,64 +1,64 @@
--- ---
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) { switch (sortParam) {
case "date-des": case 'date-des':
posts.sort( posts.sort(
(a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate) (a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
); )
break; break
case "date-asc": case 'date-asc':
posts.sort( posts.sort(
(a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate) (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: default:
break; break
} }
--- ---
<Layout title="Blog Archive"> <Layout title="Blog Archive">
<div class="archive-options"> <div class="archive-options">
<div class="select-container"> <div class="select-container">
<select name="sort by" id="sort-by"> <select name="sort by" id="sort-by">
<option value="title">Title (Alphabetically)</option> <option value="title">Title (Alphabetically)</option>
<option value="date-des">Publish Date (Newest First)</option> <option value="date-des">Publish Date (Newest First)</option>
<option value="date-asc">Publish Date (Oldest First)</option> <option value="date-asc">Publish Date (Oldest First)</option>
</select> </select>
</div> </div>
</div> </div>
{ {
posts.map(({ slug, data }) => ( posts.map(({ slug, data }) => (
<div> <div>
<a href={`/posts/${slug}`}>{data.title}</a> -{" "} <a href={`/posts/${slug}`}>{data.title}</a> -{' '}
<FormattedDate date={data.pubDate} /> <FormattedDate date={data.pubDate} />
</div> </div>
)) ))
} }
</Layout> </Layout>
<script is:inline> <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( sortEl.addEventListener(
"change", 'change',
() => (window.location.href = `/archive?sort=${sortEl.value}`) () => (window.location.href = `/archive?sort=${sortEl.value}`)
); )
</script> </script>
<style> <style>
.archive-options { .archive-options {
padding: 10px 0 20px; padding: 10px 0 20px;
} }
</style> </style>
src/pages/index.astro
+23 -23
View File
@@ -1,33 +1,33 @@
--- ---
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"> <Layout title="Home">
{ {
posts posts
.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)) .sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
.slice(0, 5) .slice(0, 5)
.map((post) => <PostPreview post={post} />) .map((post) => <PostPreview post={post} />)
} }
{ {
posts.length < 5 ? null : ( posts.length < 5 ? null : (
<div class="more-posts"> <div class="more-posts">
<a class="link-button blue-btn" href="/archive"> <a class="link-button blue-btn" href="/archive">
All Posts All Posts
</a> </a>
</div> </div>
) )
} }
</Layout> </Layout>
<style> <style>
.more-posts { .more-posts {
text-align: center; text-align: center;
} }
</style> </style>
src/pages/posts/[slug].astro
+25 -22
View File
@@ -1,37 +1,40 @@
--- ---
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() { export async function getStaticPaths() {
const posts = await getCollection("blog"); const posts = await getCollection('blog')
return posts.map((post) => ({ return posts.map((post) => ({
params: { slug: post.slug }, params: { slug: post.slug },
props: { post }, 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}> <Layout title={data.title}>
<BlogHeader title={data.title} date={data.pubDate} /> <BlogHeader title={data.title} date={data.pubDate} />
<article> <article>
<Content /> <Content />
</article> </article>
</Layout> </Layout>
<style is:global> <style is:global>
article img { article img {
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
display: block; display: block;
margin: auto; margin: auto;
} }
.no-shadow {
box-shadow: none;
}
</style> </style>
src/pages/rss.xml.js
+20 -20
View File
@@ -1,23 +1,23 @@
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) { export async function get(context) {
const blog = await getCollection("blog"); const blog = await getCollection('blog')
console.log(blog); console.log(blog)
return rss({ return rss({
title: "ghall.blog", title: 'ghall.blog',
description: 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 items: blog
.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)) .sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
.map((post) => ({ .map((post) => ({
link: `/posts/${post.slug}/`, link: `/posts/${post.slug}/`,
content: sanitizeHtml(parser.render(post.body)), content: sanitizeHtml(parser.render(post.body)),
...post.data, ...post.data,
})), })),
}); })
} }