diff --git a/package.json b/package.json
index 84d8932..94018ec 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,11 @@
"astro": "astro"
},
"dependencies": {
+ ",mmarked": "link:@types/,mmarked",
"@astrojs/rss": "^2.4.3",
+ "@types/marked": "^5.0.0",
"astro": "^2.6.4",
- "astro-icon": "^0.8.1"
+ "astro-icon": "^0.8.1",
+ "marked": "^5.1.0"
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef3dcb8..530816c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,14 +1,20 @@
lockfileVersion: 5.4
specifiers:
+ ',mmarked': link:@types/,mmarked
'@astrojs/rss': ^2.4.3
+ '@types/marked': ^5.0.0
astro: ^2.6.4
astro-icon: ^0.8.1
+ marked: ^5.1.0
dependencies:
+ ',mmarked': link:@types/,mmarked
'@astrojs/rss': 2.4.3
+ '@types/marked': 5.0.0
astro: 2.6.4
astro-icon: 0.8.1
+ marked: 5.1.0
packages:
@@ -672,6 +678,10 @@ packages:
resolution: {integrity: sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==}
dev: false
+ /@types/marked/5.0.0:
+ resolution: {integrity: sha512-YcZe50jhltsCq7rc9MNZC/4QB/OnA2Pd6hrOSTOFajtabN+38slqgDDCeE/0F83SjkKBQcsZUj7VLWR0H5cKRA==}
+ dev: false
+
/@types/mdast/3.0.11:
resolution: {integrity: sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==}
dependencies:
@@ -1858,6 +1868,12 @@ packages:
resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
dev: false
+ /marked/5.1.0:
+ resolution: {integrity: sha512-z3/nBe7aTI8JDszlYLk7dDVNpngjw0o1ZJtrA9kIfkkHcIF+xH7mO23aISl4WxP83elU+MFROgahqdpd05lMEQ==}
+ engines: {node: '>= 18'}
+ hasBin: true
+ dev: false
+
/mdast-util-definitions/5.1.2:
resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
dependencies:
diff --git a/public/images/favicon-16x16.png b/public/favicon-16x16.png
similarity index 100%
rename from public/images/favicon-16x16.png
rename to public/favicon-16x16.png
diff --git a/public/images/favicon-32x32.png b/public/favicon-32x32.png
similarity index 100%
rename from public/images/favicon-32x32.png
rename to public/favicon-32x32.png
diff --git a/public/images/favicon.ico b/public/favicon.ico
similarity index 100%
rename from public/images/favicon.ico
rename to public/favicon.ico
diff --git a/public/rss.xsl b/public/rss.xsl
new file mode 100644
index 0000000..921dcd1
--- /dev/null
+++ b/public/rss.xsl
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ RSS Feed
+
+
+ Hello, this is my blog's RSS Feed. Copy the URL from
+ the address bar, and add it to your RSS reader.
+
+
+
+
+
+
+
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
new file mode 100644
index 0000000..5dbc04f
--- /dev/null
+++ b/src/components/BlogPost.astro
@@ -0,0 +1,28 @@
+---
+import styles from "../styles/BlogPost.module.css"
+import Divider from "../components/Divider.astro"
+
+import type { CollectionEntry } from "astro:content"
+interface Props {
+ post: CollectionEntry<"blog">
+}
+
+const { data: post, render } = Astro.props.post
+const { Content } = await render()
+const pubDate = new Intl.DateTimeFormat("en-US", {
+ month: "long",
+ day: "numeric",
+ year: "numeric"
+}).format(post.pubDate)
+---
+
+
+ {pubDate}
+
+ {post.title}
+
+
+
+
+
+
diff --git a/src/components/Top.astro b/src/components/Top.astro
index df357a4..415a924 100644
--- a/src/components/Top.astro
+++ b/src/components/Top.astro
@@ -7,7 +7,7 @@ import styles from "../styles/Top.module.css"
-
diff --git a/src/pages/blog/rss.xml.js b/src/pages/blog/rss.xml.js
new file mode 100644
index 0000000..83e348c
--- /dev/null
+++ b/src/pages/blog/rss.xml.js
@@ -0,0 +1,24 @@
+import rss from "@astrojs/rss"
+import { getCollection } from "astro:content"
+import { marked } from "marked"
+
+export const get = async (context) => {
+ const blog = await getCollection("blog")
+ return rss({
+ title: "Henry Hiles' Blog",
+ description:
+ "A blog about Linux, Web Development, Discord Bots, and more.",
+ site: context.site,
+ items: blog.map((post) => ({
+ link: `/blog/${post.slug}/`,
+ content: marked.parse(post.body, {
+ mangle: false,
+ headerIds: false
+ }),
+ ...post.data
+ })),
+ customData: "en-us",
+ trailingSlash: false,
+ stylesheet: "/rss.xsl"
+ })
+}
diff --git a/src/styles/Blog.module.css b/src/styles/Blog.module.css
new file mode 100644
index 0000000..fb1ddf8
--- /dev/null
+++ b/src/styles/Blog.module.css
@@ -0,0 +1,52 @@
+.link {
+ display: flex;
+ width: 100%;
+ color: unset;
+ text-decoration: none;
+ justify-content: center;
+}
+
+.description {
+ border: 2px solid var(--primary);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.description h1 {
+ font-size: 2.8rem;
+ margin: 1rem;
+}
+
+.description p {
+ font-size: 1.5rem;
+ text-align: justify;
+ max-width: 40rem;
+}
+
+.right {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: inherit;
+}
+
+.sidebar {
+ display: flex;
+ position: sticky;
+ top: 8rem;
+ height: 80vh;
+ flex-direction: column;
+ width: 20rem;
+}
+
+.container {
+ display: flex;
+ gap: 2rem;
+ width: 100%;
+}
+
+[aria-hidden="true"] {
+ display: none;
+}
diff --git a/src/styles/BlogPost.module.css b/src/styles/BlogPost.module.css
new file mode 100644
index 0000000..286d365
--- /dev/null
+++ b/src/styles/BlogPost.module.css
@@ -0,0 +1,44 @@
+.jumbo {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ align-items: center;
+}
+
+.date {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ color: hsl(37 10% 58%);
+}
+
+.title {
+ font-size: 2.8em;
+ margin: 0.2em;
+ text-align: center;
+}
+
+.description p {
+ font-size: 1.3rem;
+ max-width: 40rem;
+ text-align: justify;
+}
+
+.description :is(h1, h2, h3) {
+ text-align: center;
+ margin: 1rem;
+}
+
+.description h1 {
+ font-size: 2.2rem;
+}
+
+.description h2 {
+ font-size: 1.6rem;
+}
+
+.description :is(strong, em) {
+ display: block;
+ width: 100%;
+ text-align: justify;
+}
diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
index 289d795..270421b 100644
--- a/src/styles/Button.module.css
+++ b/src/styles/Button.module.css
@@ -2,9 +2,9 @@
display: flex;
background: rgb(0 0 0 / 0.1);
border: 2px solid var(--primary);
- backdrop-filter: blur(20px);
- border-radius: 20px;
- padding: 20px;
+ backdrop-filter: blur(2rem);
+ border-radius: 2rem;
+ padding: 2rem;
text-decoration: none;
white-space: nowrap;
height: 100%;
diff --git a/src/styles/Jumbo.module.css b/src/styles/Jumbo.module.css
index f03064d..0b60b16 100644
--- a/src/styles/Jumbo.module.css
+++ b/src/styles/Jumbo.module.css
@@ -4,7 +4,7 @@
text-align: center;
padding: 0;
padding: 3rem 0 0;
- height: 100vh;
+ height: 85vh;
}
#jumbo i {
diff --git a/src/styles/Layout.css b/src/styles/Layout.css
index ab8d961..feb364d 100644
--- a/src/styles/Layout.css
+++ b/src/styles/Layout.css
@@ -31,26 +31,28 @@ img {
}
main {
+ --gap: min(8vw, 4rem);
display: flex;
- gap: 3rem;
+ gap: var(--gap);
+ padding: var(--gap);
+ width: 100%;
flex-direction: column;
- padding-bottom: 2rem;
align-items: center;
}
-main > section {
+:is(article, section, aside):not(section *, nav *, header *) {
display: flex;
flex-direction: column;
border-radius: 1rem;
background: rgb(0 0 0 / 0.3);
padding: 2rem;
- width: 90%;
+ width: 100%;
scroll-margin: 1rem;
transition: scale 0.2s;
}
-main > section:hover {
- scale: 1.03;
+:is(article, section, aside):not(section *, nav *, header *):hover {
+ scale: 102%;
}
@media (min-width: 500px) {
@@ -66,3 +68,17 @@ a {
a:not(:hover) {
text-decoration: none;
}
+
+input[type="text"] {
+ display: flex;
+ background: rgb(0 0 0 / 0.1);
+ border: 2px solid var(--primary);
+ backdrop-filter: blur(2rem);
+ border-radius: 1rem;
+ padding: 1rem;
+ text-decoration: none;
+ white-space: nowrap;
+ font-size: 1.5rem;
+ color: white;
+ justify-content: center;
+}