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",
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 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-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"
},
"dependencies": {
"@astrojs/mdx": "^0.17.0",
"@astrojs/netlify": "^2.1.2",
"@astrojs/rss": "^2.1.0",
"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 {
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
+6 -6
View File
@@ -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
+4 -4
View File
@@ -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
+22 -22
View File
@@ -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
+8 -11
View File
@@ -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
+8 -8
View File
@@ -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
+12 -12
View File
@@ -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
+24 -24
View File
@@ -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
+46 -46
View File
@@ -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
+23 -23
View File
@@ -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
+25 -22
View File
@@ -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
+20 -20
View File
@@ -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,
})),
})
}