From 5fab0381b308eb5a1c837ffdd5e0ddd757e769d3 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Wed, 24 Jan 2024 22:50:02 -0500 Subject: Starting to work on blog --- astro.config.mjs | 1 + bun.lockb | Bin 281545 -> 286413 bytes package.json | 3 + src/content/blog/hello.md | 241 +++++++++++++++++++++++++++++++++++++++++ src/content/config.ts | 16 +++ src/layouts/BlogPost.astro | 50 +++++++++ src/layouts/Default.astro | 17 ++- src/layouts/PageMarkdown.astro | 8 +- src/pages/blog/[...slug].astro | 22 ++++ src/pages/blog/index.astro | 8 ++ src/pages/rss.xml.js | 31 ++++++ 11 files changed, 390 insertions(+), 7 deletions(-) create mode 100644 src/content/blog/hello.md create mode 100644 src/content/config.ts create mode 100644 src/layouts/BlogPost.astro create mode 100644 src/pages/blog/[...slug].astro create mode 100644 src/pages/blog/index.astro create mode 100644 src/pages/rss.xml.js diff --git a/astro.config.mjs b/astro.config.mjs index fbcb3c1..d2dbc06 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,6 +6,7 @@ import vercel from "@astrojs/vercel/serverless"; // https://astro.build/config export default defineConfig({ + site: 'https://alee14.me', integrations: [icon(), vue()], output: "server", adapter: vercel(), diff --git a/bun.lockb b/bun.lockb index 1c06951..63d80f6 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index efa5ac4..4d62368 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,15 @@ "astro": "astro" }, "dependencies": { + "@astrojs/rss": "^4.0.3", "@astrojs/vercel": "^6.1.3", "@astrojs/vue": "^4.0.8", "@iconify-json/fa6-brands": "^1.1.18", "@vitejs/plugin-vue": "^5.0.3", "astro": "^4.1.1", "astro-icon": "^1.0.2", + "markdown-it": "^14.0.0", + "sanitize-html": "^2.11.0", "vue": "^3.4.15" } } \ No newline at end of file diff --git a/src/content/blog/hello.md b/src/content/blog/hello.md new file mode 100644 index 0000000..d24552d --- /dev/null +++ b/src/content/blog/hello.md @@ -0,0 +1,241 @@ +--- +title: Hello world +description: This is a test post +date: 2024-01-24 +tags: ["tag1", "tag2"] +slug: hello-world +--- + +# h1 Heading 8-) +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rules + +___ + +--- + +*** + + +## Typographic replacements + +Enable typographer option to see result. + +(c) (C) (r) (R) (tm) (TM) (p) (P) +- + +test.. test... test..... test?..... test!.... + +!!!!!! ???? ,, -- --- + +"Smartypants, double quotes" and 'single quotes' + + +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + + +## Blockquotes + + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as `1.` + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +``` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +## Tables + +| Option | Description | +| ------ | ----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| ------:| -----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +## Links + +[link text](http://dev.nodeca.com) + +[link with title](http://nodeca.github.io/pica/demo/ "title text!") + +Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +Like links, Images also have a footnote style syntax + +![Alt text][id] + +With a reference later in the document defining the URL location: + +[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" + + +## Plugins + +The killer feature of `markdown-it` is very effective support of +[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). + + +### [Emojies](https://github.com/markdown-it/markdown-it-emoji) + +> Classic markup: :wink: :cry: :laughing: :yum: +> +> Shortcuts (emoticons): :-) :-( 8-) ;) + +see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. + + +### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) + +- 19^th^ +- H~2~O + + +### [\](https://github.com/markdown-it/markdown-it-ins) + +++Inserted text++ + + +### [\](https://github.com/markdown-it/markdown-it-mark) + +==Marked text== + + +### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + +Footnote 1 link[^first]. + +Footnote 2 link[^second]. + +Inline footnote^[Text of inline footnote] definition. + +Duplicated footnote reference[^second]. + +[^first]: Footnote **can have markup** + + and multiple paragraphs. + +[^second]: Footnote text. + + +### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) + +Term 1 + +: Definition 1 +with lazy continuation. + +Term 2 with *inline markup* + +: Definition 2 + + { some code, part of Definition 2 } + + Third paragraph of definition 2. + +_Compact style:_ + +Term 1 +~ Definition 1 + +Term 2 +~ Definition 2a +~ Definition 2b + + +### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) + +This is HTML abbreviation example. + +It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. + +*[HTML]: Hyper Text Markup Language + +### [Custom containers](https://github.com/markdown-it/markdown-it-container) + +::: warning +*here be dragons* +::: diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..694e87d --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,16 @@ +import { defineCollection, z } from "astro:content"; +import { rssSchema } from '@astrojs/rss'; + +const blogCollection = defineCollection({ + type: 'content', + schema: z.object({ + title: z.string(), + description: z.string(), + date: z.date(), + tags: z.array(z.string()), + }), +}); + +export const collections = { + blog: blogCollection, +}; diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro new file mode 100644 index 0000000..60baee6 --- /dev/null +++ b/src/layouts/BlogPost.astro @@ -0,0 +1,50 @@ +--- +import Layout from './Default.astro'; +const { title, description } = Astro.props; +--- + + +
+

{title}

+

{description}

+
+
+
+
+ +
+
+
+ + + diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index cc05e25..185a807 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -4,7 +4,7 @@ interface Props { description: string; } -const { title, description } = Astro.props; +const { title = "Andrew Lee", description = "Andrew Lee Website" } = Astro.props; import { ViewTransitions, slide } from 'astro:transitions'; import Navbar from '../components/Navbar.vue'; --- @@ -13,17 +13,25 @@ import Navbar from '../components/Navbar.vue'; - - + + + + + + + + - + + + {title} @@ -33,6 +41,7 @@ import Navbar from '../components/Navbar.vue';
+

Made with {Astro.generator} and Hosted on Vercel

Copyright © 2024 Andrew Lee

diff --git a/src/layouts/PageMarkdown.astro b/src/layouts/PageMarkdown.astro index 1250dd5..f6e76ab 100644 --- a/src/layouts/PageMarkdown.astro +++ b/src/layouts/PageMarkdown.astro @@ -9,9 +9,11 @@ const { frontmatter } = Astro.props;

{frontmatter.description}

-
- -
+
+
+ +
+
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro new file mode 100644 index 0000000..7db75bb --- /dev/null +++ b/src/pages/blog/[...slug].astro @@ -0,0 +1,22 @@ +--- +import Page from '../../layouts/BlogPost.astro'; +import { getEntry } from 'astro:content'; +const { slug } = Astro.params; + +if (slug === undefined) { + throw new Error('Slug is required'); +} + +const entry = await getEntry('blog', slug); + +if(entry === undefined) { + return Astro.redirect('/404'); +} + +const { Content } = await entry.render(); +--- + +
+ +
+ diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro new file mode 100644 index 0000000..556be15 --- /dev/null +++ b/src/pages/blog/index.astro @@ -0,0 +1,8 @@ +--- +import Page from "../../layouts/Page.astro"; +--- + +
+ +
+ diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js new file mode 100644 index 0000000..df0645d --- /dev/null +++ b/src/pages/rss.xml.js @@ -0,0 +1,31 @@ +import rss from '@astrojs/rss'; +import { getCollection } from "astro:content"; +import sanitizeHtml from 'sanitize-html'; +import MarkdownIt from 'markdown-it'; +const parser = new MarkdownIt(); + +export async function GET(context) { + const blog = await getCollection('blog'); + return rss({ + // `` field in output xml + title: 'Andrew Lee', + // `<description>` field in output xml + description: 'Andrew Lee\'s Personal Blog', + // Pull in your project "site" from the endpoint context + // https://docs.astro.build/en/reference/api-reference/#contextsite + site: context.site, + // Array of `<item>`s in output xml + // See "Generating items" section for examples using content collections and glob imports + items: blog.map((post) => ({ + title: post.data.title, + pubDate: post.data.date, + description: post.data.description, + // Compute RSS link from post `slug` + // This example assumes all posts are rendered as `/blog/[slug]` routes + link: `/blog/${post.slug}/`, + content: sanitizeHtml(parser.render(post.body)), + // (optional) inject custom xml + customData: `<language>en-us</language>`, + })), + }); +} -- cgit v1.2.3