Merge pull request #32 from ajcwebdev/dev

Astro Autosite Generator and Package Restructuring

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 .DS_Store
-content
+/content
 whisper.cpp
 package-lock.json
 .env

package.json

@@ -27,8 +27,8 @@
     "u": "node --env-file=.env --no-warnings src/autoshow.js --whisper large --urls",
     "p": "node --env-file=.env --no-warnings src/autoshow.js --whisper large --playlist",
     "f": "node --env-file=.env --no-warnings src/autoshow.js --whisper large --file",
-    "serve": "node --env-file=.env --no-warnings --watch server/index.js",
-    "fetch": "node --env-file=.env --no-warnings server/fetch.js",
+    "serve": "node --env-file=.env --no-warnings --watch packages/server/index.js",
+    "fetch": "node --env-file=.env --no-warnings packages/server/fetch.js",
     "test-local": "node --test test/local.test.js",
     "test-all": "node --test test/all.test.js"
   },

packages/astro/.gitignore

@@ -0,0 +1,25 @@
+# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+package-lock.json
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# misc
+*.pem
+.cache
+.astro

packages/astro/.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

packages/astro/README.md

@@ -0,0 +1,3 @@
+# Astro Autoshow
+
+TODO

packages/astro/astro.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "astro/config"
+import mdx from "@astrojs/mdx"
+import sitemap from "@astrojs/sitemap"
+import icon from "astro-icon"
+import expressiveCode from "astro-expressive-code"
+import { expressiveCodeOptions } from "./src/site.config"
+
+// https://astro.build/config
+export default defineConfig({
+	site: "https://autoshow.sh/",
+	integrations: [
+		expressiveCode(expressiveCodeOptions),
+		icon(),
+		sitemap(),
+		mdx(),
+	],
+	// https://docs.astro.build/en/guides/prefetch/
+	prefetch: true,
+})

packages/astro/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "astro-autogen",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"check": "astro check"
+	},
+	"dependencies": {
+		"@astrojs/mdx": "^3.1.5",
+		"@astrojs/rss": "^4.0.7",
+		"@astrojs/sitemap": "^3.1.6",
+		"astro": "^4.15.4",
+		"astro-expressive-code": "^0.36.1",
+		"astro-icon": "^1.1.1",
+		"satori": "^0.10.14",
+		"satori-html": "^0.3.2",
+		"sharp": "^0.33.5"
+	},
+	"devDependencies": {
+		"@iconify-json/mdi": "^1.2.0",
+		"@resvg/resvg-js": "^2.6.2",
+		"mdast-util-to-string": "^4.0.0",
+		"typescript": "^5.6.2"
+	}
+}

packages/astro/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://autoshow.sh/sitemap-index.xml

packages/astro/src/components/BaseHead.astro

@@ -0,0 +1,70 @@
+---
+import type { SiteMeta } from "@/types"
+import { siteConfig } from "@/site-config"
+import "../styles/global.css"
+
+type Props = SiteMeta
+
+const { articleDate, description, ogImage, title } = Astro.props
+
+const titleSeparator = "•"
+const siteTitle = `${title} ${titleSeparator} ${siteConfig.title}`
+const canonicalURL = new URL(Astro.url.pathname, Astro.site)
+const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url).href
+---
+
+<meta charset="utf-8" />
+<meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport" />
+<meta content="IE=edge" http-equiv="X-UA-Compatible" />
+<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css">
+<title>{siteTitle}</title>
+
+{/* Icons / Favicon */}
+<link href="/favicon.ico" rel="icon" sizes="any" />
+<link href="/icon.svg" rel="icon" type="image/svg+xml" />
+<link href="/apple-touch-icon.png" rel="apple-touch-icon" />
+<link href="/manifest.webmanifest" rel="manifest" />
+<link href={canonicalURL} rel="canonical" />
+
+{/* Primary Meta Tags */}
+<meta content={siteTitle} name="title" />
+<meta content={description} name="description" />
+<meta content={siteConfig.author} name="author" />
+
+{/* Theme Colour */}
+<meta content="" name="theme-color" />
+
+{/* Open Graph / Facebook */}
+<meta content={articleDate ? "article" : "website"} property="og:type" />
+<meta content={title} property="og:title" />
+<meta content={description} property="og:description" />
+<meta content={canonicalURL} property="og:url" />
+<meta content={siteConfig.title} property="og:site_name" />
+<meta content={siteConfig.ogLocale} property="og:locale" />
+<meta content={socialImageURL} property="og:image" />
+<meta content="1200" property="og:image:width" />
+<meta content="630" property="og:image:height" />
+{
+	articleDate && (
+		<>
+			<meta content={siteConfig.author} property="article:author" />
+			<meta content={articleDate} property="article:published_time" />
+		</>
+	)
+}
+
+{/* Twitter */}
+<meta content="summary_large_image" property="twitter:card" />
+<meta content={canonicalURL} property="twitter:url" />
+<meta content={title} property="twitter:title" />
+<meta content={description} property="twitter:description" />
+<meta content={socialImageURL} property="twitter:image" />
+
+{/* Sitemap */}
+<link href="/sitemap-index.xml" rel="sitemap" />
+
+{/* RSS auto-discovery */}
+<link href="/rss.xml" rel="alternate" title={siteConfig.title} type="application/rss+xml" />
+
+<meta content={Astro.generator} name="generator" />

packages/astro/src/components/FormattedDate.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { getFormattedDate } from "@/utils"
+
+type Props = HTMLAttributes<"time"> & {
+	date: Date
+	dateTimeOptions?: Intl.DateTimeFormatOptions
+}
+
+const { date, dateTimeOptions, ...attrs } = Astro.props
+
+const postDate = getFormattedDate(date, dateTimeOptions)
+---
+
+<time datetime={date.toISOString()} {...attrs}>
+	{postDate}
+</time>

packages/astro/src/components/Paginator.astro

@@ -0,0 +1,29 @@
+---
+import type { PaginationLink } from "@/types"
+
+interface Props {
+	nextUrl?: PaginationLink
+	prevUrl?: PaginationLink
+}
+
+const { nextUrl, prevUrl } = Astro.props
+---
+
+{
+	(prevUrl || nextUrl) && (
+		<nav>
+			{prevUrl && (
+				<a data-astro-prefetch href={prevUrl.url}>
+					{prevUrl.srLabel && <span>{prevUrl.srLabel}</span>}
+					{prevUrl.text ? prevUrl.text : "Previous"}
+				</a>
+			)}
+			{nextUrl && (
+				<a data-astro-prefetch href={nextUrl.url}>
+					{nextUrl.srLabel && <span>{nextUrl.srLabel}</span>}
+					{nextUrl.text ? nextUrl.text : "Next"}
+				</a>
+			)}
+		</nav>
+	)
+}

packages/astro/src/components/blog/Hero.astro

@@ -0,0 +1,47 @@
+---
+import type { CollectionEntry } from "astro:content"
+import { Image } from "astro:assets"
+import FormattedDate from "../FormattedDate.astro"
+
+interface Props {
+	content: CollectionEntry<"post">
+}
+
+const {
+	content: { data },
+} = Astro.props
+
+const dateTimeOptions: Intl.DateTimeFormatOptions = {
+	month: "long",
+}
+---
+
+{
+	data.coverImage && (
+		<div>
+			<Image
+				alt={data.coverImage.alt}
+				fetchpriority="high"
+				loading="eager"
+				src={data.coverImage.src}
+			/>
+		</div>
+	)
+}
+{data.draft ? <span>(Draft)</span> : null}
+<h1>
+	{data.title}
+</h1>
+<div>
+	<p>
+		<FormattedDate date={data.publishDate} dateTimeOptions={dateTimeOptions} />
+	</p>
+	{
+		data.updatedDate && (
+			<span>
+				Last Updated:
+				<FormattedDate date={data.updatedDate} dateTimeOptions={dateTimeOptions} />
+			</span>
+		)
+	}
+</div>

packages/astro/src/components/blog/PostPreview.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+import type { CollectionEntry } from "astro:content"
+import { getPostSortDate } from "@/data/post"
+import FormattedDate from "../FormattedDate.astro"
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+	post: CollectionEntry<"post">
+	withDesc?: boolean
+}
+
+const { as: Tag = "div", post, withDesc = true } = Astro.props
+const postDate = getPostSortDate(post)
+---
+
+<Tag>
+	{post.data.draft && <span>(Draft) </span>}
+	<a data-astro-prefetch href={`/posts/${post.slug}/`}>
+		{post.data.title}
+	</a> - 
+	<FormattedDate date={postDate} />
+	<br><br>
+	{withDesc && <q>{post.data.description}</q>}
+</Tag>
+<br>

packages/astro/src/components/blog/TOC.astro

@@ -0,0 +1,20 @@
+---
+import type { MarkdownHeading } from "astro"
+import { generateToc } from "@/utils"
+import TOCHeading from "./TOCHeading.astro"
+
+interface Props {
+	headings: MarkdownHeading[]
+}
+
+const { headings } = Astro.props
+
+const toc = generateToc(headings)
+---
+
+<aside>
+	<h2>Table of Contents</h2>
+	<ul>
+		{toc.map((heading) => <TOCHeading heading={heading} />)}
+	</ul>
+</aside>

packages/astro/src/components/blog/TOCHeading.astro

@@ -0,0 +1,27 @@
+---
+import type { TocItem } from "@/utils"
+
+interface Props {
+	heading: TocItem
+}
+
+const {
+	heading: { slug, children, text },
+} = Astro.props
+---
+
+<li>
+	<a
+		aria-label={`Scroll to section: ${text}`}
+		href={`#${slug}`}>{text}</a
+	>
+	{
+		!!children.length && (
+			<ul>
+				{children.map((subheading) => (
+					<Astro.self heading={subheading} />
+				))}
+			</ul>
+		)
+	}
+</li>

packages/astro/src/content/config.ts

@@ -0,0 +1,16 @@
+import { defineCollection, z } from "astro:content"
+
+const post = defineCollection({
+  schema: ({ image }) =>
+    z.object({
+      title: z.string().max(60),
+	  description: z.string().min(10).max(200),
+	  publishDate: z.string().or(z.date()).transform((val) => new Date(val)),
+      updatedDate: z.string().optional().transform((str) => (str ? new Date(str) : undefined)),
+	  coverImage: z.object({alt: z.string(),src: image()}).optional(),
+	  ogImage: z.string().optional(),
+    }),
+  type: "content",
+})
+
+export const collections = { post }