diff --git a/.github/assets/create-astro-ghostcms-2024.jan.27.png b/.github/assets/create-astro-ghostcms-2024.jan.27.png
new file mode 100644
index 00000000..d60bdac6
Binary files /dev/null and b/.github/assets/create-astro-ghostcms-2024.jan.27.png differ
diff --git a/README.md b/README.md
index 123c3697..15c8e704 100644
--- a/README.md
+++ b/README.md
@@ -18,9 +18,10 @@ In this Repo you will also find the Following:
 - `www`: [Public Site](https://astro-ghostcms.xyz)
 - `playground`: Development and Testing
 - `packages/`:
+  - `create-astro-ghostcms`: CLI Utility to quickly deploy new Astro-GhostCMS projects.
   - `astro-ghostcms`: The main Integration!
-  - `astro-ghostcms-theme-default`: The Default theme in integration mode
-  - `tsconfig`: *LOCAL* Development package for `@ts-ghost/core-api`
+  - `astro-ghostcms-theme-default`: The Default theme in integration mode.
+  - `tsconfig`: *LOCAL* Development package for `@ts-ghost/core-api`.
 
 ### Notices
 
diff --git a/package.json b/package.json
index 5ffbe2a4..e8428802 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,11 @@
 		"node": ">=18.19.0"
 	},
 	"scripts": {
+		"lint": "biome check .",
+		"lint:fix": "biome check --apply .",
 		"playground:dev": "pnpm --filter playground dev",
 		"www:dev": "pnpm --filter www dev",
 		"demo:dev": "pnpm --filter demo dev",
-		"lint": "biome check .",
-		"lint:fix": "biome check --apply .",
-		"base": "pnpm i --frozen-lockfile",
 		"api:test": "pnpm --filter astro-ghostcms test",
 		"api:test:watch": "pnpm --filter astro-ghostcms test:watch",
 		"api:test:coverage": "pnpm --filter astro-ghostcms test:coverage",
diff --git a/packages/create-astro-ghostcms/LICENSE b/packages/create-astro-ghostcms/LICENSE
new file mode 100644
index 00000000..848a13f2
--- /dev/null
+++ b/packages/create-astro-ghostcms/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Adam Matthiesen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/create-astro-ghostcms/README.md b/packages/create-astro-ghostcms/README.md
new file mode 100644
index 00000000..7ddfa4b3
--- /dev/null
+++ b/packages/create-astro-ghostcms/README.md
@@ -0,0 +1,33 @@
+# `@matthiesenxyz/create-astro-ghostcms`
+
+Utility to quickly get started with our Integration and astro.
+
+![Demo](./src/assets/create-astro-ghostcms.png)
+
+The Default install method requires `pnpm` if you dont have `pnpm` installed you can change this by using the command below with the following argument `--pkg-manager <pkg-mngr>` with the Package manager of your choice(i.e npm, yarn). 
+
+```sh
+npx @matthiesenxyz/create-astro-ghostcms
+
+# OR
+
+npx @matthiesenxyz/create-astro-ghostcms <template> <project_directory>
+```
+
+## Available command args:
+
+```sh
+npx @matthiesenxyz/create-astro-ghostcms --<arg>
+#  `--help`        : Calls internal getHelp Function
+#  `--install`     : Sets Install Dependencies to 'true'
+#  `--git`         : Initiates git Repo
+#  `--dry`         : Shows you what the command will do. (NO CHANGES WILL BE MADE)
+#  `--pkg-manager` : Specify your Package manager(i.e. npm, yarn | DEFAULT: pnpm)
+```
+
+## Available templates
+
+|   Template   |   Description                                         |
+| ------------ | ----------------------------------------------------- |
+| `basic`      | Basic Setup with astro-ghostcms and theme-default     |
+| `starterkit` | Integration in API-Only Mode with customizable theme  |
diff --git a/packages/create-astro-ghostcms/create-astro-ghostcms.mjs b/packages/create-astro-ghostcms/create-astro-ghostcms.mjs
new file mode 100644
index 00000000..8e8d15ac
--- /dev/null
+++ b/packages/create-astro-ghostcms/create-astro-ghostcms.mjs
@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+// biome-ignore lint/suspicious/noRedundantUseStrict: <explanation>
+'use strict';
+
+const currentVersion = process.versions.node;
+const requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);
+const minimumMajorVersion = 18;
+
+if (requiredMajorVersion < minimumMajorVersion) {
+	console.error(`Node.js v${currentVersion} is out of date and unsupported!`);
+	console.error(`Please use Node.js v${minimumMajorVersion} or higher.`);
+	process.exit(1);
+}
+
+import('./src/main.js').then(({ main }) => main());
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/index.d.ts b/packages/create-astro-ghostcms/index.d.ts
new file mode 100644
index 00000000..d971fd4e
--- /dev/null
+++ b/packages/create-astro-ghostcms/index.d.ts
@@ -0,0 +1,9 @@
+export interface Context {
+	dryRun: boolean;
+	installDeps: boolean;
+	initGitRepo: boolean;
+	pkgManager: "npm" | "yarn" | "pnpm" | null;
+	args: string[];
+}
+
+export type Template = ["basic","starterkit"];
diff --git a/packages/create-astro-ghostcms/package.json b/packages/create-astro-ghostcms/package.json
new file mode 100644
index 00000000..8de4ecb6
--- /dev/null
+++ b/packages/create-astro-ghostcms/package.json
@@ -0,0 +1,70 @@
+{
+	"name": "@matthiesenxyz/create-astro-ghostcms",
+	"version": "0.0.1-dev42",
+	"description": "Utility to quickly get started with our Integration and astro",
+	"type": "module",
+	"main": "./create-astro-ghostcms.mjs",
+	"bin": {
+		"create-astro-ghostcms": "./create-astro-ghostcms.mjs"
+	},
+	"exports": {
+		".": "./create-astro-ghostcms.mjs"
+	},
+	"scripts": {
+	},
+	"sideEffects": false,
+	"author": {
+	  "email": "adam@matthiesen.xyz",
+	  "name": "Adam Matthiesen - MatthiesenXYZ",
+	  "url": "https://matthiesen.xyz"
+	  },
+	"homepage": "https://astro-ghostcms.xyz/",
+	"repository": {
+	  "type": "git",
+	  "url": "git+https://github.com/MatthiesenXYZ/astro-ghostcms.git"
+	},
+	"bugs": {
+	  "url": "https://github.com/MatthiesenXYZ/astro-ghostcms/issues",
+	  "email": "issues@astro-ghostcms.xyz"
+	},
+	"license": "MIT",
+	"files": [
+		"src",
+		"create-astro-ghostcms",
+		"index.d.ts",
+		"LICENSE",
+		"README.md",
+		"types.d.ts"
+	],
+	"dependencies": {
+		"@clack/prompts": "^0.7.0",
+		"picocolors": "^1.0.0",
+		"arg": "^5.0.2",
+		"execa": "^7.0.0",
+		"fs-extra": "^11.1.0",
+		"read-pkg": "^5.2.0"
+	},
+	"devDependencies": {
+		"@types/fs-extra": "^11.0.1",
+		"@types/gunzip-maybe": "^1.4.0",
+		"@types/node": "^18.14.1",
+		"@types/tar-fs": "^2.0.1",
+		"@typescript-eslint/eslint-plugin": "^6.19.0",
+		"@typescript-eslint/parser": "^6.19.0",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-node": "^0.3.7",
+		"eslint-import-resolver-typescript": "^3.5.3",
+		"prettier": "^2.8.4",
+		"typescript": "^5.3.3",
+		"vitest": "^1.1.0",
+		"vite": "^5.0.12",
+		"vite-tsconfig-paths": "^4.2.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=18.14.1"
+	}
+}
diff --git a/packages/create-astro-ghostcms/src/assets/create-astro-ghostcms.png b/packages/create-astro-ghostcms/src/assets/create-astro-ghostcms.png
new file mode 100644
index 00000000..d60bdac6
Binary files /dev/null and b/packages/create-astro-ghostcms/src/assets/create-astro-ghostcms.png differ
diff --git a/packages/create-astro-ghostcms/src/lib/utils.js b/packages/create-astro-ghostcms/src/lib/utils.js
new file mode 100644
index 00000000..f5eb8e08
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/lib/utils.js
@@ -0,0 +1,61 @@
+import path from "node:path";
+import os from "node:os";
+import * as p from "@clack/prompts";
+import c from "picocolors";
+import { fileURLToPath } from "node:url";
+
+/**
+ * @param {string} url
+ */
+export function getModulePaths(url) {
+	const pathname = fileURLToPath(url);
+	const parts = pathname.split("/");
+	const basename = parts.pop();
+	const dirname = parts.join(path.sep);
+	return { pathname, dirname, basename };
+}
+
+/**
+ * @returns {never}
+ */
+export function exitPrompt() {
+	p.cancel(c.red("Operation Cancelled"));
+	process.exit(0);
+}
+
+/**
+ * @param {string} str
+ */
+export function isPathname(str) {
+	return str.includes(path.sep);
+}
+
+/**
+ * @param {string} pathname
+ */
+export function normalizePath(pathname) {
+	if (os.platform() === "win32") {
+		return path.win32.normalize(pathname);
+	}
+	return path.normalize(pathname);
+}
+
+/**
+ * @param {number} ms
+ */
+export async function wait(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ *
+ * @param {string} str
+ * @returns {str is PackageManager}
+ */
+export function isPackageManager(str) {
+	return str === "npm" || str === "yarn" || str === "pnpm";
+}
+
+/**
+ * @typedef {import("../../types").PackageManager} PackageManager
+ */
diff --git a/packages/create-astro-ghostcms/src/main.js b/packages/create-astro-ghostcms/src/main.js
new file mode 100644
index 00000000..c3462fcd
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/main.js
@@ -0,0 +1,128 @@
+import path from "node:path";
+import arg from "arg";
+import fse from "fs-extra";
+import * as p from "@clack/prompts";
+import c from 'picocolors';
+import { exitPrompt, getModulePaths, isPackageManager } from "./lib/utils.js";
+import { createBasic } from "./runners/basic.js";
+import { createStarterKit } from "./runners/starterkit.js";
+
+
+export async function main() {
+	const exit = () => process.exit(0);
+	process.on("SIGINT", exit);
+	process.on("SIGTERM", exit);
+
+	console.clear();
+
+	const argv = process.argv.slice(2).filter((arg) => arg !== "--");
+
+	const flags = arg(
+		{
+			"--help": Boolean,
+			"--install": Boolean,
+			"--git": Boolean,
+			"--dry": Boolean,
+			"--pkg-manager": String,
+			"-h": "--help",
+			"-i": "--install",
+			"-g": "--git",
+			"-p": "--pkg-manager",
+		},
+		{ argv, permissive: true }
+	);
+	const {
+		"--help": help,
+		"--install": installDeps,
+		"--git": initGitRepo,
+		"--dry": dryRun,
+		"--pkg-manager": pkgManager,
+	} = flags;
+
+	// 0. Show help text and bail
+	if (help) {
+		console.log(getHelp());
+		return;
+	}
+
+	// Get Package Version for Intro
+	const { pathname } = getModulePaths(import.meta.url);
+	const iJSON = path.resolve(pathname, "..", "..", 'package.json');
+	const pJSON = await fse.readJson(iJSON);
+	const pkgVer = pJSON.version;
+
+	// 1. Say hello!
+	p.intro(c.bgMagenta(c.black(` ${c.bold("Astro-GhostCMS Create Utility - By MatthiesenXYZ")} ${c.underline(c.bold(c.blue(`( v${pkgVer} )`)))} ${c.italic(dryRun ? "[Dry Run] ":" ")}`)))
+
+	const gettingStarted = `${c.white(c.bold('Want to Initiate a git repo at the same time as deploying your project?'))} \n - ${c.white(`Use ${c.yellow('--git')} at the end of the command`)} \n ${c.white(c.bold(`Using a package manager other than ${c.cyan(c.bold('pnpm'))}?`))} \n - ${c.white(`Use ${c.yellow('--pkg-manager npm')} or ${c.yellow('--pkg-manager yarn')}.`)}`
+
+	p.note(gettingStarted)
+
+	// 2. Get template to set up
+	let [template, ...args] = flags._;
+	if (template && !isValidTemplate(template)) {
+		p.log.warning(c.red(`"${template}" isn't a valid template`));
+		template = null;
+	}
+	if (!template) {
+		const answer = await p.select({
+			message: `${c.cyan('Which template would you like to use?')}`,
+			options: [
+				{ 
+					value: "basic", 
+					label: `${c.magenta('Basic')} - ${c.cyan(c.italic('Integration w/ Default Theme'))}` 
+				},
+				{
+					value: "starterkit",
+					label: `${c.magenta('Starter Kit')} - ${c.cyan(c.italic('Integration in API-Only Mode with customizable theme'))}`
+				}
+			],
+			initialValue: "basic",
+		});
+		if (p.isCancel(answer)) exitPrompt();
+		template = answer;
+	}
+
+	// 2. Construct context to pass to template functions
+	/** @type {Context} */
+	const ctx = {
+		dryRun,
+		installDeps,
+		initGitRepo,
+		pkgManager: isPackageManager(pkgManager) ? pkgManager : null,
+		args,
+	};
+
+	// 3. Call template functions
+	switch (template) {
+		case "basic":
+			await createBasic(ctx).catch(console.error);
+			break;
+		case "starterkit":
+			await createStarterKit(ctx).catch(console.error);
+			break;
+		default:
+			throw new Error(c.red(`Unknown template: ${template}`));
+	}
+
+	// 4. Huzzah!
+	p.outro(c.reset(`Problems? ${c.underline(c.cyan('https://github.com/MatthiesenXYZ/astro-ghostcms/issues'))}`));
+}
+
+function getHelp() {
+	return `${c.yellow('Need Help? Check the Docs!')} ${c.underline(c.cyan('https://astro-ghostcms.xyz/docs'))}`;
+}
+
+/**
+ * @param {string|null|undefined} template
+ * @returns {template is Template}
+ */
+function isValidTemplate(template) {
+	return ["basic","starterkit"].includes(template);
+}
+
+/**
+ * @typedef {import("../types").Template} Template
+ * @typedef {import("../types").PackageManager} PackageManager
+ * @typedef {import("../types").Context} Context
+ */
diff --git a/packages/create-astro-ghostcms/src/runners/basic.js b/packages/create-astro-ghostcms/src/runners/basic.js
new file mode 100644
index 00000000..3004b0a9
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/runners/basic.js
@@ -0,0 +1,245 @@
+import path from "node:path";
+import fse from "fs-extra";
+import c from 'picocolors';
+import * as p from "@clack/prompts";
+import { execa } from "execa";
+import { exitPrompt, getModulePaths, isPathname,
+	normalizePath, wait } from "../lib/utils.js";
+
+const runnerName = "basic";
+
+/** @param {Context} ctx */
+export async function createBasic(ctx) {
+	let { args, dryRun, initGitRepo, installDeps } = ctx;
+
+	const s = p.spinner();
+	let cwd = process.cwd();
+
+	// 1. Set up project directory
+	const project = await getProjectDetails(args[0], { cwd });
+	if (dryRun) {
+		await wait(1);
+	} else {
+		await fse.ensureDir(project.pathname);
+	}
+
+	// 2. Create the damned thing
+	cwd = project.pathname;
+	const relativePath = path.relative(process.cwd(), project.pathname);
+	s.start(`${c.yellow(`Creating a new Astro-GhostCMS project in ${relativePath}`)}`);
+	if (dryRun) {
+		await wait(2000);
+	} else {
+		await createApp(project.name, project.pathname, {
+			onError(error) {
+				s.stop(`${c.red('Failed to create new project')}`);
+				p.cancel();
+				console.error(error);
+				process.exit(1);
+			},
+		});
+	}
+	s.stop(`${c.green('New Astro-GhostCMS project')} '${project.name}' ${c.green('created')} 🚀`);
+	const fCheck = await p.group({
+		installDeps: () => p.confirm({
+			message: `${c.cyan('Install dependencies? (Recommended)')}`,
+			initialValue: false,
+		}), 
+		//GitRepo: () => p.confirm({
+		//	message: `${c.cyan('Initialize a Git repository?')} ${c.italic(c.gray("( Tip: This Option gets Stuck Press Enter Twice if you get no reponse! )"))}`,
+		//	initialValue: false,
+		//}),
+		readyCheck: () => p.confirm({
+			message: `${c.bgYellow(c.black(c.bold(' CONFIRM: Press Enter Twice to continue or `Ctrl+C` to Cancel. ')))}`,
+			initialValue: true,
+		}),
+	},
+	{ onCancel: () => { exitPrompt(); } });
+
+	if(fCheck.readyCheck){;
+		// 3. Initialize git repo
+		if (initGitRepo) {
+			if (dryRun) {
+				await wait(1);
+			} else {
+				await exec("git", ["init"], { cwd });
+			}
+			p.log.success(c.green("Initialized Git repository"));
+		} else {
+			p.log.info(`${c.gray("Skipped Git initialization")}`);
+		}
+	
+		const nextSteps = `If you didnt opt to install Dependencies dont forget to run: \n ${c.yellow('npm install')} / ${c.yellow('pnpm install')} / ${c.yellow('yarn install')} inside your project directory! \n \n ${c.bgYellow(c.black(c.bold(" Dont forget to modify your .env file for YOUR ghost install! ")))} `
+		
+		// 4. Install dependencies
+		installDeps = installDeps ?? fCheck.installDeps;
+		const pm = ctx.pkgManager ?? "pnpm";
+		if (installDeps) {
+			s.start(`${c.cyan(`Installing dependencies with ${pm}`)} `);
+			if (dryRun) {
+				await wait(1);
+			} else {
+				await installDependencies(pm, { cwd });
+			}
+			s.stop(`${c.green(`Dependencies installed with ${pm}`)}`);
+			success()
+		} else {
+			p.log.info(`${c.gray('Skipped dependency installation')}`);
+			success()
+		}
+	
+		async function success() {
+			p.note(nextSteps);
+			p.outro(c.green("Deployment Complete!"));
+		}
+
+	} else {
+		exitPrompt();
+	}
+}
+
+/**
+ *
+ * @param {string} projectName
+ * @param {string} projectPathname
+ * @param {{ onError: (err: unknown) => any }} opts
+ */
+async function createApp(projectName, projectPathname, { onError }) {
+	const { pathname } = getModulePaths(import.meta.url);
+	const templatesDir = path.resolve(pathname, "..", "..", "templates");
+	const sharedTemplateDir = path.join(templatesDir, "_shared");
+	const runnerTemplateDir = path.join(templatesDir, runnerName);
+
+	await fse.ensureDir(projectPathname);
+
+	// TODO: Detect if project directory is empty, otherwise we
+	// can't create a new project here.
+	await fse.copy(runnerTemplateDir, projectPathname);
+
+	// Copy misc files from shared
+	const filesToCopy = [
+		{
+			src: path.join(sharedTemplateDir, ".env"),
+			dest: path.join(projectPathname, ".env"),
+		},
+	];
+	await Promise.all(
+		filesToCopy.map(async ({ src, dest }) => await fse.copy(src, dest))
+	);
+
+	/** @type {Array<{ pathname: string; getUpdates: (contents: string) => string }>} */
+	const filesToUpdate = [
+		{
+			pathname: path.join(projectPathname, "package.json"),
+			getUpdates: updateProjectName,
+		},
+	];
+	await Promise.all(
+		filesToUpdate.map(async ({ pathname, getUpdates }) => {
+			const contents = await fse.readFile(pathname, "utf-8");
+			const updatedContents = getUpdates(contents);
+			await fse.writeFile(pathname, updatedContents, "utf-8");
+		})
+	);
+
+	/** @param {string} contents */
+	function updateProjectName(contents) {
+		return contents.replace(/{{PROJECT_NAME}}/g, projectName);
+	}
+}
+
+/**
+ * @param {string|undefined} projectNameInput
+ * @param {{ cwd: string }} opts
+ */
+async function getProjectDetails(projectNameInput, opts) {
+	let projectName = projectNameInput;
+	if (!projectName) {
+		const defaultProjectName = "my-astro-ghost";
+		let answer = await p.text({
+			message: `${c.cyan("Where would you like to create your project?")}`,
+			placeholder: `.${path.sep}${defaultProjectName}`,
+		});
+		if (p.isCancel(answer)) exitPrompt();
+
+		answer = answer?.trim();
+		projectName = answer || defaultProjectName;
+	}
+
+	/** @type {string} */
+	let pathname;
+
+	if (isPathname(projectName)) {
+		const dir = path.resolve(opts.cwd, path.dirname(normalizePath(projectName)));
+		projectName = toValidProjectName(path.basename(projectName));
+		pathname = path.join(dir, projectName);
+	} else {
+		projectName = toValidProjectName(projectName);
+		pathname = path.resolve(opts.cwd, projectName);
+	}
+
+	return {
+		name: projectName,
+		pathname,
+	};
+}
+
+/**
+ * @param {string} command
+ * @param {readonly string[]} args
+ * @param {{ cwd: string }} options
+ * @returns {Promise<{ code: number | null; signal: NodeJS.Signals | null }>}
+ */
+async function exec(command, args, options) {
+	const installExec = execa(command, ["init"], { ...options, stdio: "ignore" });
+	return new Promise((resolve, reject) => {
+		installExec.on("error", (error) => reject(error));
+		installExec.on("close", (code, signal) => resolve({ code, signal }));
+	});
+}
+
+/**
+ * @param {"npm" | "yarn" | "pnpm"} packageManager
+ * @param {{ cwd: string }} opts
+ * @returns
+ */
+async function installDependencies(packageManager, { cwd }) {
+	const installExec = execa(packageManager, ["install"], { cwd });
+	return new Promise((resolve, reject) => {
+		installExec.on("error", (error) => reject(error));
+		installExec.on("close", () => resolve());
+	});
+}
+
+/**
+ * @param {string} projectName
+ */
+function toValidProjectName(projectName) {
+	if (isValidProjectName(projectName)) {
+		return projectName;
+	}
+	return projectName
+		.trim()
+		.toLowerCase()
+		.replace(/\s+/g, "-")
+		.replace(/^[._]/, "")
+		.replace(/[^a-z\d\-~]+/g, "-")
+		.replace(/^-+/, "")
+		.replace(/-+$/, "");
+}
+
+/**
+ * @param {string} projectName
+ */
+function isValidProjectName(projectName) {
+	return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(
+		projectName
+	);
+}
+
+/**
+ * @typedef {import("../../types.js").Template} Template
+ * @typedef {import("../../types.js").PackageManager} PackageManager
+ * @typedef {import("../../types.js").Context} Context
+ * @typedef {import("../../types.js").Serializable} Serializable
+ */
diff --git a/packages/create-astro-ghostcms/src/runners/starterkit.js b/packages/create-astro-ghostcms/src/runners/starterkit.js
new file mode 100644
index 00000000..c51346f3
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/runners/starterkit.js
@@ -0,0 +1,245 @@
+import path from "node:path";
+import fse from "fs-extra";
+import c from 'picocolors';
+import * as p from "@clack/prompts";
+import { execa } from "execa";
+import { exitPrompt, getModulePaths, isPathname,
+	normalizePath, wait } from "../lib/utils.js";
+
+const runnerName = "starterkit";
+
+/** @param {Context} ctx */
+export async function createStarterKit(ctx) {
+	let { args, dryRun, initGitRepo, installDeps } = ctx;
+
+	const s = p.spinner();
+	let cwd = process.cwd();
+
+	// 1. Set up project directory
+	const project = await getProjectDetails(args[0], { cwd });
+	if (dryRun) {
+		await wait(1);
+	} else {
+		await fse.ensureDir(project.pathname);
+	}
+
+	// 2. Create the damned thing
+	cwd = project.pathname;
+	const relativePath = path.relative(process.cwd(), project.pathname);
+	s.start(`${c.yellow(`Creating a new Astro-GhostCMS project in ${relativePath}`)}`);
+	if (dryRun) {
+		await wait(2000);
+	} else {
+		await createApp(project.name, project.pathname, {
+			onError(error) {
+				s.stop(`${c.red('Failed to create new project')}`);
+				p.cancel();
+				console.error(error);
+				process.exit(1);
+			},
+		});
+	}
+	s.stop(`${c.green('New Astro-GhostCMS project')} '${project.name}' ${c.green('created')} 🚀`);
+	const fCheck = await p.group({
+		installDeps: () => p.confirm({
+			message: `${c.cyan('Install dependencies? (Recommended)')}`,
+			initialValue: false,
+		}), 
+		//GitRepo: () => p.confirm({
+		//	message: `${c.cyan('Initialize a Git repository?')} ${c.italic(c.gray("( Tip: This Option gets Stuck Press Enter Twice if you get no reponse! )"))}`,
+		//	initialValue: false,
+		//}),
+		readyCheck: () => p.confirm({
+			message: `${c.bgYellow(c.black(c.bold(' CONFIRM: Press Enter Twice to continue or `Ctrl+C` to Cancel. ')))}`,
+			initialValue: true,
+		}),
+	},
+	{ onCancel: () => { exitPrompt(); } });
+
+	if(fCheck.readyCheck){;
+		// 3. Initialize git repo
+		if (initGitRepo) {
+			if (dryRun) {
+				await wait(1);
+			} else {
+				await exec("git", ["init"], { cwd });
+			}
+			p.log.success(c.green("Initialized Git repository"));
+		} else {
+			p.log.info(`${c.gray("Skipped Git initialization")}`);
+		}
+	
+		const nextSteps = `If you didnt opt to install Dependencies dont forget to run: \n ${c.yellow('npm install')} / ${c.yellow('pnpm install')} / ${c.yellow('yarn install')} inside your project directory! \n \n ${c.bgYellow(c.black(c.bold(" Dont forget to modify your .env file for YOUR ghost install! ")))} `
+		
+		// 4. Install dependencies
+		installDeps = installDeps ?? fCheck.installDeps;
+		const pm = ctx.pkgManager ?? "pnpm";
+		if (installDeps) {
+			s.start(`${c.cyan(`Installing dependencies with ${pm}`)} `);
+			if (dryRun) {
+				await wait(1);
+			} else {
+				await installDependencies(pm, { cwd });
+			}
+			s.stop(`${c.green(`Dependencies installed with ${pm}`)}`);
+			success()
+		} else {
+			p.log.info(`${c.gray('Skipped dependency installation')}`);
+			success()
+		}
+	
+		async function success() {
+			p.note(nextSteps);
+			p.outro(c.green("Deployment Complete!"));
+		}
+
+	} else {
+		exitPrompt();
+	}
+}
+
+/**
+ *
+ * @param {string} projectName
+ * @param {string} projectPathname
+ * @param {{ onError: (err: unknown) => any }} opts
+ */
+async function createApp(projectName, projectPathname, { onError }) {
+	const { pathname } = getModulePaths(import.meta.url);
+	const templatesDir = path.resolve(pathname, "..", "..", "templates");
+	const sharedTemplateDir = path.join(templatesDir, "_shared");
+	const runnerTemplateDir = path.join(templatesDir, runnerName);
+
+	await fse.ensureDir(projectPathname);
+
+	// TODO: Detect if project directory is empty, otherwise we
+	// can't create a new project here.
+	await fse.copy(runnerTemplateDir, projectPathname);
+
+	// Copy misc files from shared
+	const filesToCopy = [
+		{
+			src: path.join(sharedTemplateDir, ".env"),
+			dest: path.join(projectPathname, ".env"),
+		},
+	];
+	await Promise.all(
+		filesToCopy.map(async ({ src, dest }) => await fse.copy(src, dest))
+	);
+
+	/** @type {Array<{ pathname: string; getUpdates: (contents: string) => string }>} */
+	const filesToUpdate = [
+		{
+			pathname: path.join(projectPathname, "package.json"),
+			getUpdates: updateProjectName,
+		},
+	];
+	await Promise.all(
+		filesToUpdate.map(async ({ pathname, getUpdates }) => {
+			const contents = await fse.readFile(pathname, "utf-8");
+			const updatedContents = getUpdates(contents);
+			await fse.writeFile(pathname, updatedContents, "utf-8");
+		})
+	);
+
+	/** @param {string} contents */
+	function updateProjectName(contents) {
+		return contents.replace(/{{PROJECT_NAME}}/g, projectName);
+	}
+}
+
+/**
+ * @param {string|undefined} projectNameInput
+ * @param {{ cwd: string }} opts
+ */
+async function getProjectDetails(projectNameInput, opts) {
+	let projectName = projectNameInput;
+	if (!projectName) {
+		const defaultProjectName = "my-astro-ghost";
+		let answer = await p.text({
+			message: `${c.cyan("Where would you like to create your project?")}`,
+			placeholder: `.${path.sep}${defaultProjectName}`,
+		});
+		if (p.isCancel(answer)) exitPrompt();
+
+		answer = answer?.trim();
+		projectName = answer || defaultProjectName;
+	}
+
+	/** @type {string} */
+	let pathname;
+
+	if (isPathname(projectName)) {
+		const dir = path.resolve(opts.cwd, path.dirname(normalizePath(projectName)));
+		projectName = toValidProjectName(path.basename(projectName));
+		pathname = path.join(dir, projectName);
+	} else {
+		projectName = toValidProjectName(projectName);
+		pathname = path.resolve(opts.cwd, projectName);
+	}
+
+	return {
+		name: projectName,
+		pathname,
+	};
+}
+
+/**
+ * @param {string} command
+ * @param {readonly string[]} args
+ * @param {{ cwd: string }} options
+ * @returns {Promise<{ code: number | null; signal: NodeJS.Signals | null }>}
+ */
+async function exec(command, args, options) {
+	const installExec = execa(command, ["init"], { ...options, stdio: "ignore" });
+	return new Promise((resolve, reject) => {
+		installExec.on("error", (error) => reject(error));
+		installExec.on("close", (code, signal) => resolve({ code, signal }));
+	});
+}
+
+/**
+ * @param {"npm" | "yarn" | "pnpm"} packageManager
+ * @param {{ cwd: string }} opts
+ * @returns
+ */
+async function installDependencies(packageManager, { cwd }) {
+	const installExec = execa(packageManager, ["install"], { cwd });
+	return new Promise((resolve, reject) => {
+		installExec.on("error", (error) => reject(error));
+		installExec.on("close", () => resolve());
+	});
+}
+
+/**
+ * @param {string} projectName
+ */
+function toValidProjectName(projectName) {
+	if (isValidProjectName(projectName)) {
+		return projectName;
+	}
+	return projectName
+		.trim()
+		.toLowerCase()
+		.replace(/\s+/g, "-")
+		.replace(/^[._]/, "")
+		.replace(/[^a-z\d\-~]+/g, "-")
+		.replace(/^-+/, "")
+		.replace(/-+$/, "");
+}
+
+/**
+ * @param {string} projectName
+ */
+function isValidProjectName(projectName) {
+	return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(
+		projectName
+	);
+}
+
+/**
+ * @typedef {import("../../types.js").Template} Template
+ * @typedef {import("../../types.js").PackageManager} PackageManager
+ * @typedef {import("../../types.js").Context} Context
+ * @typedef {import("../../types.js").Serializable} Serializable
+ */
diff --git a/packages/create-astro-ghostcms/src/templates/_shared/.env b/packages/create-astro-ghostcms/src/templates/_shared/.env
new file mode 100644
index 00000000..fbeecd6d
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/_shared/.env
@@ -0,0 +1,2 @@
+CONTENT_API_KEY=a33da3965a3a9fb2c6b3f63b48
+CONTENT_API_URL=https://ghostdemo.matthiesen.xyz
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/src/templates/basic/.gitignore b/packages/create-astro-ghostcms/src/templates/basic/.gitignore
new file mode 100644
index 00000000..6240da8b
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/.gitignore
@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/packages/create-astro-ghostcms/src/templates/basic/.vscode/extensions.json b/packages/create-astro-ghostcms/src/templates/basic/.vscode/extensions.json
new file mode 100644
index 00000000..22a15055
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/packages/create-astro-ghostcms/src/templates/basic/.vscode/launch.json b/packages/create-astro-ghostcms/src/templates/basic/.vscode/launch.json
new file mode 100644
index 00000000..d6422097
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
diff --git a/packages/create-astro-ghostcms/src/templates/basic/LICENSE b/packages/create-astro-ghostcms/src/templates/basic/LICENSE
new file mode 100644
index 00000000..88dd1335
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Matthiesen XYZ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/create-astro-ghostcms/src/templates/basic/astro.config.mjs b/packages/create-astro-ghostcms/src/templates/basic/astro.config.mjs
new file mode 100644
index 00000000..da73ee58
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/astro.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config';
+import GhostCMS from "@matthiesenxyz/astro-ghostcms";
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://example.com/",
+  integrations: [GhostCMS({
+    ghostURL: 'https://ghostdemo.matthiesen.xyz'
+  })]
+});
diff --git a/packages/create-astro-ghostcms/src/templates/basic/package.json b/packages/create-astro-ghostcms/src/templates/basic/package.json
new file mode 100644
index 00000000..17971422
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^4.2.4",
+    "@matthiesenxyz/astro-ghostcms": "^3.1.5",
+    "@matthiesenxyz/astro-ghostcms-theme-default": "^0.1.5"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.4.1",
+    "typescript": "^5.3.3",
+    "sass": "^1.70.0"
+  }
+}
diff --git a/packages/create-astro-ghostcms/src/templates/basic/public/favicon.svg b/packages/create-astro-ghostcms/src/templates/basic/public/favicon.svg
new file mode 100644
index 00000000..f157bd1c
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
diff --git a/packages/create-astro-ghostcms/src/templates/basic/src/env.d.ts b/packages/create-astro-ghostcms/src/templates/basic/src/env.d.ts
new file mode 100644
index 00000000..e8c8b171
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="astro/client" />
+interface ImportMetaEnv {
+  readonly CONTENT_API_KEY: string
+  readonly CONTENT_API_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/src/templates/basic/tsconfig.json b/packages/create-astro-ghostcms/src/templates/basic/tsconfig.json
new file mode 100644
index 00000000..77da9dd0
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/basic/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/.gitignore b/packages/create-astro-ghostcms/src/templates/starterkit/.gitignore
new file mode 100644
index 00000000..6240da8b
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/.gitignore
@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/.vscode/extensions.json b/packages/create-astro-ghostcms/src/templates/starterkit/.vscode/extensions.json
new file mode 100644
index 00000000..22a15055
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/.vscode/launch.json b/packages/create-astro-ghostcms/src/templates/starterkit/.vscode/launch.json
new file mode 100644
index 00000000..d6422097
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/LICENSE b/packages/create-astro-ghostcms/src/templates/starterkit/LICENSE
new file mode 100644
index 00000000..848a13f2
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Adam Matthiesen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/README.md b/packages/create-astro-ghostcms/src/templates/starterkit/README.md
new file mode 100644
index 00000000..c3cecab0
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/README.md
@@ -0,0 +1,15 @@
+# Astro Starter Kit: Astro-GhostCMS Integration
+
+To get started fork or clone this repo, and use one of the following commands:
+
+```
+npm install
+
+pnpm install
+
+yarn install
+```
+
+Then make sure you set your .env variables for DEV and environment variables on your server.
+
+Its just astro!  At this point you are free to start modifying what content/what your website will do, want to make it blog features only? go ahead!
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/astro.config.mjs b/packages/create-astro-ghostcms/src/templates/starterkit/astro.config.mjs
new file mode 100644
index 00000000..12261b3f
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/astro.config.mjs
@@ -0,0 +1,17 @@
+import GhostCMS from '@matthiesenxyz/astro-ghostcms';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+    // CHANGE THIS TO MATCH YOUR EXTERNAL DOMAIN
+    site: "http://localhost:4321",
+    integrations: [
+        // Includes GhostCMS API, @astrojs/rss, @astrojs/sitemap, and astro-robots-txt
+        GhostCMS({
+            // This Option Disables all default theme injection and allows DIY mode.
+            disableRouteInjection: true,
+            // Enable this to disable the extra console logs
+            disableConsoleOutput: false
+        })
+    ]
+});
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/package.json b/packages/create-astro-ghostcms/src/templates/starterkit/package.json
new file mode 100644
index 00000000..2ce05946
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.4.1",
+    "@matthiesenxyz/astro-ghostcms": "^3.1.4",
+    "astro": "^4.2.4",
+    "typescript": "^5.3.3",
+    "astro-font": "^0.0.77"
+  },
+  "devDependencies": {
+    "sass": "^1.70.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/public/favicon.svg b/packages/create-astro-ghostcms/src/templates/starterkit/public/favicon.svg
new file mode 100644
index 00000000..f157bd1c
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/AuthorCard.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/AuthorCard.astro
new file mode 100644
index 00000000..b2d1f2dd
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/AuthorCard.astro
@@ -0,0 +1,80 @@
+---
+import { getGhostImgPath } from "../utils";
+import type { Settings, Author } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  author: Author;
+  wide?: boolean;
+  addClass?: string;
+  settings: Settings;
+  showCover?: boolean;
+};
+const {
+  author,
+  wide = false,
+  settings,
+  showCover = true,
+} = Astro.props as Props;
+---
+
+<div class={`card author-card author-${author.slug} ${wide ? "wide" : ""}`}>
+  <figure class="author-card-cover">
+    {author.cover_image && showCover && (
+      <img
+        class="lazyautosizes lazyloaded"
+        data-srcset={`
+            ${getGhostImgPath(settings.url, author.cover_image, 300)} 300w,
+            ${getGhostImgPath(settings.url, author.cover_image, 600)} 600w
+          `}
+        srcset={`
+            ${getGhostImgPath(settings.url, author.cover_image, 300)} 300w,
+            ${getGhostImgPath(settings.url, author.cover_image, 600)} 600w
+        `}
+        data-sizes="auto"
+        data-src={getGhostImgPath(settings.url, author.cover_image, 300)}
+        src={getGhostImgPath(settings.url, author.cover_image, 300)}
+        alt={author.name}
+        sizes="316px"
+      />
+    )}
+  </figure>
+
+  {author.profile_image && (
+    <a href={`/author/${author.slug}`} class="author-card-media">
+      <img
+        class="author-card-img"
+        data-srcset={`
+            ${getGhostImgPath(settings.url, author.profile_image, 100)} 100w,
+            ${getGhostImgPath(settings.url, author.profile_image, 300)} 300w
+          `}
+        srcset={`
+            ${getGhostImgPath(settings.url, author.profile_image, 100)} 100w,
+            ${getGhostImgPath(settings.url, author.profile_image, 300)} 300w
+        `}
+        data-sizes="auto"
+        data-src={getGhostImgPath(settings.url, author.profile_image, 300)}
+        src={getGhostImgPath(settings.url, author.profile_image, 300)}
+        alt={author.name}
+        sizes="316px"
+      />
+    </a>
+  )}
+  <div class="author-card-content">
+    <div class="author-card-name">
+      <a href={`/author/${author.slug}`}>{author.name}</a>
+    </div>
+
+    {author.bio && <div class="author-card-descr">{author.bio}</div>}
+
+    <div class="author-card-details">
+      {author.count && author.count.posts && (
+        <div>
+          {author.count.posts > 0 ? `${author.count.posts} posts` : "No posts"}
+        </div>
+      )}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/AuthorList.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/AuthorList.astro
new file mode 100644
index 00000000..b20d5b35
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/AuthorList.astro
@@ -0,0 +1,76 @@
+---
+import { getGhostImgPath } from "../utils";
+import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  post: Post;
+  settings: Settings;
+};
+const { post, settings } = Astro.props as Props;
+---
+
+<ul class="author-list">
+  {post.authors && post.authors.map((author) => (
+    <li class="author-list-item">
+      {author.profile_image ? (
+        <a href={`/author/${author.slug}`} class="author-avatar">
+          <img
+            class="author-profile-image"
+            src={getGhostImgPath(settings.url, author.profile_image, 100)}
+            alt={author.name}
+          />
+        </a>
+      ) : (
+        <a href={`/author/${author.slug}`} class="author-avatar">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fill-rule="evenodd">
+              <path
+                d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z"
+                fill="#FFF"
+              />
+            </g>
+          </svg>
+        </a>
+      )}
+    </li>
+  ))}
+</ul>
+
+<style lang="scss">
+  @use "sass:color";
+  @import "../styles/variables";
+  .author-avatar {
+    display: block;
+    overflow: hidden;
+    margin: 0 -4px;
+    width: 50px;
+    height: 50px;
+    border: #fff 2px solid;
+    border-radius: 100%;
+    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
+  }
+
+  .author-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 0 0 4px;
+    padding: 0;
+    padding-inline-end: 1rem;
+    list-style: none;
+  }
+
+  .author-list-item {
+    position: relative;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .author-profile-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: color.scale($color-lightgrey, $lightness: +10%);
+    border-radius: 100%;
+    object-fit: cover;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/BaseHead.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/BaseHead.astro
new file mode 100644
index 00000000..92eac2e6
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/BaseHead.astro
@@ -0,0 +1,86 @@
+---
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+import { ViewTransitions } from 'astro:transitions';
+import { AstroFont } from "astro-font";
+
+export type Props = {
+  title: string;
+  description: string;
+  permalink?: string;
+  image?: string;
+  settings: Settings;
+};
+
+const { description, permalink, image, settings, title } = Astro.props as Props;
+---
+
+<AstroFont
+config={[
+  {
+    src: [],
+    name: "Inter",
+    preload: false,
+    display: "swap",
+    selector: "html",
+    fallback: "sans-serif",
+    googleFontsURL: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
+  },
+]}
+/>
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<title>{title}</title>
+<ViewTransitions />
+<meta name="title" content={title} />
+{description && <meta name="description" content={description} />}
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href={settings.icon} />
+<link rel="shortcut icon" type="image/png" sizes="16x16" href={settings.icon} />
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="msapplication-TileColor" content="#da532c" />
+<meta name="msapplication-config" content="/browserconfig.xml" />
+<meta name="theme-color" content="#ffffff" />
+
+<!-- Open Graph Tags (Facebook) -->
+<meta property="og:type" content="website" />
+<meta property="og:title" content={title} />
+{permalink && <meta property="og:url" content={permalink} />}
+{description && <meta property="og:description" content={description} />}
+{image && <meta property="og:image" content={image} />}
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:title" content={title} />
+{permalink && <meta property="twitter:url" content={permalink} />}
+{description && <meta property="twitter:description" content={description} />}
+{image && <meta property="twitter:image" content={image} />}
+
+<!-- Link to the global style, or the file that imports constructs -->
+<link
+  rel="preload"
+  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+  as="style"
+/>
+<link
+  rel="preload"
+  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+  as="script"
+/>
+<link
+  rel="preload stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+  as="style"
+  onload="this.onload=null;this.rel='stylesheet'"
+  crossorigin
+/>
+<script
+  async
+  defer
+  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+>
+
+</script>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/FeatureImage.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/FeatureImage.astro
new file mode 100644
index 00000000..2ce7e3c5
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/FeatureImage.astro
@@ -0,0 +1,32 @@
+---
+import { getGhostImgPath } from "../utils";
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  image: string;
+  alt?: string;
+  caption?: string;
+  settings: Settings;
+  transitionName?: string;
+};
+const { image, alt, caption = "", settings, transitionName } = Astro.props as Props;
+---
+
+<figure class="article-image">
+  <img
+    srcset={`
+          ${getGhostImgPath(settings.url, image, 300)}   300w,
+          ${getGhostImgPath(settings.url, image, 600)}   600w,
+          ${getGhostImgPath(settings.url, image, 1000)} 1000w,
+          ${getGhostImgPath(settings.url, image, 2000)} 2000w
+        `}
+    sizes="(min-width: 1400px) 1400px, 92vw"
+    src={getGhostImgPath(settings.url, image, 2000)}
+    alt={alt}
+    transition:name={transitionName}
+  />
+  {caption && <figcaption><Fragment set:html={caption}></figcaption>}
+</figure>
+
+<style lang="scss">
+
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Footer.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Footer.astro
new file mode 100644
index 00000000..84a8bd60
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Footer.astro
@@ -0,0 +1,112 @@
+---
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  settings: Settings;
+};
+const { settings } = Astro.props as Props;
+---
+
+<footer class="site-footer outer">
+  <div class="inner">
+    <section class="copyright">
+      <a href="/">{settings.title}</a> &copy; 2021
+    </section>
+    <nav class="site-footer-nav">
+      {settings.secondary_navigation.length > 0 && (
+        <ul class="nav secondary">
+          {settings.secondary_navigation.map(({ label, url }) => (
+            <li class="">
+              <a href={url}>{label}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </nav>
+    <div>
+      <a href="https://ghost.org/" target="_blank" rel="noopener"
+        >Powered by Ghost
+      </a>
+    </div>
+  </div>
+</footer>
+
+<style lang="scss">
+  .site-footer {
+    position: relative;
+    margin: 40px 0 0 0;
+    padding: 40px 4vmin 140px;
+    color: #fff;
+    background: var(--color-darkgrey);
+  }
+
+  .site-footer .inner {
+    display: grid;
+    grid-gap: 40px;
+    grid-template-columns: auto 1fr auto;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.3rem;
+  }
+
+  .site-footer .copyright a {
+    color: #fff;
+    letter-spacing: -0.015em;
+    font-weight: 500;
+  }
+
+  .site-footer a {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .site-footer a:hover {
+    color: rgba(255, 255, 255, 1);
+    text-decoration: none;
+  }
+
+  .site-footer-nav ul {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 0 0 20px;
+    padding: 0;
+    list-style: none;
+  }
+
+  .site-footer-nav li {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    line-height: 2em;
+  }
+
+  .site-footer-nav a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 10px;
+  }
+
+  .site-footer-nav li:not(:first-child) a:before {
+    content: "";
+    display: block;
+    width: 2px;
+    height: 2px;
+    margin: 0 10px 0 0;
+    background: #fff;
+    border-radius: 100%;
+  }
+
+  @media (max-width: 800px) {
+    .site-footer .inner {
+      max-width: 500px;
+      grid-template-columns: 1fr;
+      grid-gap: 0;
+      text-align: center;
+    }
+    .site-footer .copyright,
+    .site-footer .copyright a {
+      color: #fff;
+      font-size: 1.5rem;
+    }
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Header.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Header.astro
new file mode 100644
index 00000000..0de869c5
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Header.astro
@@ -0,0 +1,438 @@
+---
+import { twitter, facebook } from "@matthiesenxyz/astro-ghostcms/api";
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  settings: Settings;
+};
+const { settings } = Astro.props as Props;
+---
+
+<header
+  id="gh-head"
+  class={`gh-head has-cover js-header`}
+>
+  <nav class="gh-head-inner inner gh-container">
+    <div class="gh-head-brand">
+      <a class="gh-head-logo" href="/">
+        {settings.logo && <img src={settings.logo} alt={settings.title} />}
+        {!settings.logo && settings.title}
+      </a>
+      <a class="gh-burger" role="button">
+        <div class="gh-burger-box">
+          <div class="gh-burger-inner"></div>
+        </div>
+      </a>
+    </div>
+    <div class="gh-head-menu">
+      <ul class="nav">
+        {settings.navigation.map(({ label, url }) => (
+          <li class="nav__item">
+            <a href={url}>{label}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div class="gh-head-actions">
+      <div class="gh-social">
+        {settings.facebook && (
+          <a
+            class="gh-social-facebook"
+            href={facebook(settings.facebook)}
+            title="Facebook"
+            target="_blank"
+            rel="noopener"
+          >
+            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+              <path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" />
+            </svg>
+          </a>
+        )}
+        {settings.twitter && (
+          <a
+            class="gh-social-twitter"
+            href={twitter(settings.twitter)}
+            title="Twitter"
+            target="_blank"
+            rel="noopener"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+              <path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z" />
+            </svg>
+          </a>
+        )}
+      </div>
+    </div>
+  </nav>
+</header>
+
+<style lang="scss" is:global>
+  .gh-head {
+    padding: 1vmin 4vmin;
+    font-size: 1.6rem;
+    line-height: 1.3em;
+    color: #fff;
+    background: var(--ghost-accent-color);
+  }
+
+  .gh-head a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .gh-head-inner {
+    display: grid;
+    grid-gap: 2.5vmin;
+    grid-template-columns: auto auto 1fr;
+    grid-auto-flow: row dense;
+  }
+
+  /* Brand
+/* ---------------------------------------------------------- */
+
+  .gh-head-brand {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    max-width: 200px;
+    text-align: center;
+    word-break: break-all;
+  }
+
+  .gh-head-logo {
+    display: block;
+    padding: 10px 0;
+    font-weight: 700;
+    font-size: 2rem;
+    line-height: 1.2em;
+    letter-spacing: -0.02em;
+  }
+
+  .gh-head-logo img {
+    max-height: 26px;
+  }
+
+  /* Primary Navigation
+/* ---------------------------------------------------------- */
+
+  .gh-head-menu {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+  }
+
+  .gh-head-menu .nav {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .gh-head-menu .nav li {
+    margin: 0 2.5vmin 0 0;
+    padding: 0;
+  }
+
+  .gh-head-menu .nav a {
+    display: inline-block;
+    padding: 5px 0;
+    opacity: 0.8;
+  }
+
+  .gh-head-menu .nav a:hover {
+    opacity: 1;
+  }
+
+  /* Secondary Navigation
+/* ---------------------------------------------------------- */
+
+  .gh-head-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    list-style: none;
+    text-align: right;
+  }
+
+  .gh-head-actions-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .gh-head-actions-list a:not([class]) {
+    display: inline-block;
+    margin: 0 0 0 1.5vmin;
+    padding: 5px 0;
+  }
+
+  .gh-social {
+    margin: 0 1.5vmin 0 0;
+  }
+
+  .gh-social a {
+    opacity: 0.8;
+  }
+
+  .gh-social a + a {
+    margin-left: 0.8rem;
+  }
+
+  .gh-social a:hover {
+    opacity: 1;
+  }
+
+  .gh-social svg {
+    height: 22px;
+    width: 22px;
+    fill: #fff;
+  }
+
+  .gh-social-facebook svg {
+    height: 20px;
+    width: 20px;
+  }
+
+  a.gh-head-button {
+    display: block;
+    padding: 8px 15px;
+    color: var(--color-darkgrey);
+    font-weight: 500;
+    letter-spacing: -0.015em;
+    font-size: 1.5rem;
+    line-height: 1em;
+    background: #fff;
+    border-radius: 30px;
+  }
+
+  /* Mobile Menu Trigger
+/* ---------------------------------------------------------- */
+
+  .gh-burger {
+    position: relative;
+    display: none;
+    cursor: pointer;
+  }
+
+  .gh-burger-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 33px;
+    height: 33px;
+  }
+
+  .gh-burger-inner {
+    width: 100%;
+    height: 100%;
+  }
+
+  .gh-burger-box::before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: "";
+    width: 100%;
+    height: 1px;
+    background: currentcolor;
+    transition: transform 300ms cubic-bezier(0.2, 0.6, 0.3, 1),
+      width 300ms cubic-bezier(0.2, 0.6, 0.3, 1);
+    will-change: transform, width;
+  }
+
+  .gh-burger-inner::before,
+  .gh-burger-inner::after {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: "";
+    width: 100%;
+    height: 1px;
+    background: currentcolor;
+    transition: transform 250ms cubic-bezier(0.2, 0.7, 0.3, 1),
+      width 250ms cubic-bezier(0.2, 0.7, 0.3, 1);
+    will-change: transform, width;
+  }
+
+  .gh-burger-inner::before {
+    transform: translatey(-6px);
+  }
+  .gh-burger-inner::after {
+    transform: translatey(6px);
+  }
+
+  body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
+    transform: translatey(-8px);
+  }
+  body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
+    transform: translatey(8px);
+  }
+
+  .gh-head-open .gh-burger-box::before {
+    width: 0;
+    transform: translatex(19px);
+    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
+      width 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
+  }
+
+  .gh-head-open .gh-burger-inner::before {
+    width: 26px;
+    transform: translatex(6px) rotate(135deg);
+  }
+
+  .gh-head-open .gh-burger-inner::after {
+    width: 26px;
+    transform: translatex(6px) rotate(-135deg);
+  }
+
+  /* Mobile Menu
+/* ---------------------------------------------------------- */
+  /* IDs needed to ensure sufficient specificity */
+
+  @media (max-width: 900px) {
+    .gh-burger {
+      display: inline-block;
+    }
+    #gh-head {
+      transition: all 0.4s ease-out;
+      overflow: hidden;
+    }
+    #gh-head .gh-head-inner {
+      height: 100%;
+      grid-template-columns: 1fr;
+    }
+    #gh-head .gh-head-brand {
+      position: relative;
+      z-index: 10;
+      grid-column-start: auto;
+      max-width: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      user-select: none;
+    }
+    .home-template #gh-head .gh-head-brand {
+      justify-content: flex-end;
+    }
+    #gh-head .gh-head-menu {
+      align-self: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      margin: 0 0 10vh 0;
+      font-weight: 300;
+      font-size: 3.6rem;
+      line-height: 1.1em;
+    }
+    #gh-head .gh-head-menu .nav li {
+      margin: 5px 0;
+    }
+    #gh-head .gh-head-menu .nav a {
+      padding: 8px 0;
+    }
+    #gh-head .gh-head-menu .nav {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    #gh-head .gh-head-actions {
+      padding: 20px 0;
+      justify-content: center;
+      text-align: left;
+    }
+    #gh-head .gh-head-actions a {
+      margin: 0 10px;
+    }
+    /* Hide collapsed content */
+    #gh-head .gh-head-actions,
+    #gh-head .gh-head-menu {
+      display: none;
+    }
+    /* Open the menu */
+    .gh-head-open {
+      overflow: hidden;
+      height: 100vh;
+    }
+    .gh-head-open #gh-head {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 3999999;
+      overflow-y: scroll;
+    }
+    .gh-head-open #gh-head .gh-head-inner {
+      grid-template-rows: auto 1fr auto;
+    }
+    .gh-head-open #gh-head .gh-head-actions,
+    .gh-head-open #gh-head .gh-head-menu {
+      display: flex;
+    }
+  }
+
+  @media (max-width: 600px) {
+    #gh-head .gh-head-menu {
+      font-size: 6vmin;
+    }
+  }
+
+  .home-template .gh-head {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2000;
+  }
+
+  .home-template .gh-head.has-cover {
+    background: transparent;
+  }
+
+  .home-template.gh-head-open .gh-head {
+    background: var(--ghost-accent-color);
+  }
+
+  .home-template .gh-head-logo {
+    display: none;
+  }
+  .home-template .gh-head-menu {
+    margin-left: -2.5vmin;
+  }
+</style>
+
+<script lang="ts">
+  if (!window.handleMenu) {
+    window.handleMenu = () => {
+      // menu
+      const burgerButton = document.querySelector(".gh-burger");
+      if (burgerButton) {
+        burgerButton.addEventListener("click", () => {
+          const body = document.querySelector("body");
+          body.classList.toggle("gh-head-open");
+        });
+      }
+    };
+
+    const callback = () => {
+      window.handleMenu();
+    };
+
+    if (document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+  
+</script>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/HeroContent.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/HeroContent.astro
new file mode 100644
index 00000000..c68743dc
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/HeroContent.astro
@@ -0,0 +1,154 @@
+---
+import { getGhostImgPath } from "../utils";
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+import cover from "./cover.jpg";
+
+export type Props = {
+  featureImg: string;
+  mainTitle?: string;
+  settings: Settings;
+  description?: string;
+  addClass?: string;
+};
+const {
+  featureImg = cover.src,
+  mainTitle = "",
+  settings,
+  description = "",
+} = Astro.props as Props;
+---
+
+<div class="site-header-content">
+  {featureImg && (
+    <img
+      class="site-header-cover"
+      data-srcset={`
+            ${getGhostImgPath(settings.url, featureImg, 300)} 300w,
+            ${getGhostImgPath(settings.url, featureImg, 600)} 600w
+            ${getGhostImgPath(settings.url, featureImg, 1000)} 1000w
+            ${getGhostImgPath(settings.url, featureImg, 2000)} 2000w
+            `}
+      srcset={`
+            ${getGhostImgPath(settings.url, featureImg, 300)} 300w,
+            ${getGhostImgPath(settings.url, featureImg, 600)} 600w
+            ${getGhostImgPath(settings.url, featureImg, 1000)} 1000w
+            ${getGhostImgPath(settings.url, featureImg, 2000)} 2000w
+            `}
+      data-sizes="auto"
+      data-src={getGhostImgPath(settings.url, featureImg, 2000)}
+      src={getGhostImgPath(settings.url, featureImg, 2000)}
+      alt={mainTitle}
+      sizes="100vw"
+    />
+  )}
+  {!featureImg && (
+    <img
+      class="site-header-cover"
+      data-srcset={`
+            ${cover.src} 300w,
+            ${cover.src} 600w,
+            ${cover.src} 1000w,
+            ${cover.src} 2000w
+            `}
+      srcset={`
+            ${cover.src} 300w,
+            ${cover.src} 600w
+            ${cover.src} 1000w
+            ${cover.src} 2000w
+            `}
+      data-sizes="auto"
+      data-src={cover.src}
+      src={cover.src}
+      alt={mainTitle}
+      sizes="100vw"
+    />
+  )}
+  <slot name="title">
+    <h1 class="site-title">
+      {settings.logo ? (
+        <img
+          class="site-logo"
+          src={getGhostImgPath(settings.url, settings.logo, 300)}
+          alt={settings.title}
+        />
+      ) : (
+        settings.title
+      )}
+    </h1>
+  </slot>
+  <p>{description}</p>
+</div>
+
+<style lang="scss">
+  .site-header {
+    position: relative;
+    color: #fff;
+    background: var(--ghost-accent-color);
+  }
+
+  .site-header-cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .site-header-content {
+    position: relative;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 6vw 3vw;
+    min-height: 200px;
+    max-height: 340px;
+    text-align: center;
+  }
+
+  .site-title {
+    z-index: 10;
+    margin: 0 0 0.15em;
+    padding: 0;
+  }
+
+  .site-logo {
+    max-height: 55px;
+  }
+
+  .site-header-content p {
+    z-index: 10;
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.2em;
+    opacity: 0.8;
+  }
+
+  @media (max-width: 600px) {
+    .site-header-content p {
+      max-width: 80vmin;
+      font-size: 1.8rem;
+    }
+  }
+
+  /* 4.1 Home header
+/* ---------------------------------------------------------- */
+
+  .site-home-header {
+    position: relative;
+    z-index: 1000;
+    overflow: hidden;
+  }
+
+  .site-header-content {
+    padding: 18vmin 4vmin;
+    font-size: 2.5rem;
+    font-weight: 400;
+    color: #fff;
+    background: var(--ghost-accent-color);
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/MainLayout.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/MainLayout.astro
new file mode 100644
index 00000000..2a995405
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/MainLayout.astro
@@ -0,0 +1,23 @@
+---
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  settings: Settings;
+};
+const { settings } = Astro.props as Props;
+---
+
+<div class="viewport">
+  <Header settings={settings} />
+  <div class="site-content">
+    <slot></slot>
+  </div>
+  <Footer settings={settings} />
+</div>
+
+<style>
+  .content {
+    min-height: 580px;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Page.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Page.astro
new file mode 100644
index 00000000..6afb6491
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Page.astro
@@ -0,0 +1,569 @@
+---
+import FeatureImage from "../components/FeatureImage.astro";
+import type { Settings, Page } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  page: Page;
+  settings: Settings;
+  pageClass?: string;
+};
+const { page, settings, pageClass } = Astro.props as Props;
+---
+
+<main id="site-main" class="site-main">
+  <article class={`article page ${pageClass}`}>
+    <header class="article-header gh-canvas">
+      {page.feature_image && (
+        <FeatureImage
+          image={page.feature_image}
+          alt={page.feature_image_alt ? page.feature_image_alt : page.title}
+          caption={page.feature_image_caption || ""}
+          settings={settings}
+        />
+      )}
+    </header>
+
+    <section class="gh-content gh-canvas">
+      <h1 class="article-title">{page.title}</h1>
+      <Fragment set:html={page.html} />
+    </section>
+  </article>
+</main>
+
+<style lang="scss" is:global>
+  .article {
+    padding: 8vmin 0;
+    word-break: break-word;
+  }
+
+  .article-header {
+    padding: 0 0 6vmin 0;
+  }
+
+  .article-tag {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0 0 0.5rem;
+    color: var(--color-midgrey);
+    font-size: 1.3rem;
+    line-height: 1.4em;
+    letter-spacing: 0.02em;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .article-tag a {
+    color: var(--ghost-accent-color);
+  }
+
+  .article-title {
+    color: color-mod(var(--color-darkgrey) l(-5%));
+  }
+
+  .article-excerpt {
+    margin: 0 0 1rem;
+    font-size: 2rem;
+    line-height: 1.4em;
+    opacity: 0.6;
+  }
+
+  .gh-canvas .article-image {
+    grid-column: wide-start / wide-end;
+    width: 100%;
+    margin: 6vmin 0 0;
+  }
+
+  .gh-canvas .article-image img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  @media (max-width: 600px) {
+    .article-excerpt {
+      font-size: 1.8rem;
+    }
+  }
+
+  /* -------- */
+
+  /* Content grid
+/* ---------------------------------------------------------- */
+
+  /* Canvas creates a multi-column, centered grid which the post
+is laid out on top of. Canvas just defines the grid, we don't
+use it for applying any other styles. */
+
+  .gh-canvas {
+    display: grid;
+    grid-template-columns:
+      [full-start]
+      minmax(4vmin, auto)
+      [wide-start]
+      minmax(auto, 240px)
+      [main-start]
+      min(720px, calc(100% - 8vw))
+      [main-end]
+      minmax(auto, 240px)
+      [wide-end]
+      minmax(4vmin, auto)
+      [full-end];
+  }
+
+  .gh-canvas > * {
+    grid-column: main-start / main-end;
+  }
+
+  .kg-width-wide {
+    grid-column: wide-start / wide-end;
+  }
+
+  .kg-width-full {
+    grid-column: full-start / full-end;
+  }
+
+  .kg-width-full img {
+    width: 100%;
+  }
+
+  /* Default vertical spacing */
+  .gh-content > * + * {
+    margin-top: 4vmin;
+    margin-bottom: 0;
+  }
+
+  /* [id] represents all headings h1-h6, reset all margins */
+  .gh-content > [id] {
+    margin: 0;
+    color: var(--color-darkgrey);
+  }
+
+  /* Add back a top margin to all headings, unless a heading
+is the very first element in the post content */
+  .gh-content > [id]:not(:first-child) {
+    margin: 2em 0 0;
+  }
+
+  /* Add a small margin between a heading and anything after it */
+  .gh-content > [id] + * {
+    margin-top: 1.5rem !important;
+  }
+
+  /* A larger margin before/after HRs and blockquotes */
+  .gh-content > hr,
+  .gh-content > blockquote {
+    position: relative;
+    margin-top: 6vmin;
+  }
+  .gh-content > hr + *,
+  .gh-content > blockquote + * {
+    margin-top: 6vmin !important;
+  }
+
+  /* Now the content typography styles */
+  .gh-content a {
+    color: var(--ghost-accent-color);
+    text-decoration: underline;
+    word-break: break-word;
+  }
+
+  .gh-content > blockquote,
+  .gh-content > ol,
+  .gh-content > ul,
+  .gh-content > dl,
+  .gh-content > p {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: 2.1rem;
+    line-height: 1.6em;
+  }
+
+  .gh-content > ul,
+  .gh-content > ol,
+  .gh-content > dl {
+    padding-left: 1.9em;
+  }
+
+  .gh-content > blockquote {
+    position: relative;
+    font-style: italic;
+    padding: 0;
+  }
+
+  .gh-content > blockquote::before {
+    content: "";
+    position: absolute;
+    left: -1.5em;
+    top: 0;
+    bottom: 0;
+    width: 0.3rem;
+    background: var(--ghost-accent-color);
+  }
+
+  .gh-content :not(pre) > code {
+    vertical-align: middle;
+    padding: 0.15em 0.4em 0.15em;
+    border: #e1eaef 1px solid;
+    font-weight: 400 !important;
+    font-size: 0.9em;
+    line-height: 1em;
+    color: #15171a;
+    background: #f0f6f9;
+    border-radius: 0.25em;
+  }
+
+  .gh-content pre {
+    overflow: auto;
+    padding: 16px 20px;
+    color: var(--color-wash);
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    background: var(--color-darkgrey);
+    border-radius: 5px;
+    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
+  }
+
+  @media (max-width: 650px) {
+    .gh-content blockquote,
+    .gh-content ol,
+    .gh-content ul,
+    .gh-content dl,
+    .gh-content p {
+      font-size: 1.7rem;
+    }
+
+    .gh-content blockquote::before {
+      left: -4vmin;
+    }
+  }
+
+  /* Cards
+/* ---------------------------------------------------------- */
+
+  /* Cards are dynamic blocks of content which appear within Ghost
+posts, for example: embedded videos, tweets, galleries, or
+specially styled bookmark links. We add extra styling here to
+make sure they look good, and are given a bit of extra spacing. */
+
+  /* Add extra margin before/after any cards,
+except for when immediately preceeded by a heading */
+  .gh-content :not(.kg-card):not([id]) + .kg-card {
+    margin-top: 6vmin;
+    margin-bottom: 0;
+  }
+  .gh-content .kg-card + :not(.kg-card) {
+    margin-top: 6vmin;
+    margin-bottom: 0;
+  }
+
+  /* This keeps small embeds centered */
+  .kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* This keeps small iamges centered */
+  .kg-image-card img {
+    margin: auto;
+  }
+
+  /* Captions */
+  figcaption {
+    padding: 1.5rem 1.5rem 0;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 600;
+    font-size: 1.3rem;
+    line-height: 1.4em;
+  }
+  figcaption strong {
+    color: rgba(0, 0, 0, 0.8);
+  }
+  figcaption a {
+    color: var(--ghost-accent-color);
+  }
+
+  /* Highly specific styles for traditional Instagram embeds */
+  iframe.instagram-media {
+    margin-top: 6vmin !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin-bottom: 0 !important;
+  }
+
+  iframe.instagram-media + script + :not([id]) {
+    margin-top: 6vmin;
+  }
+
+  /* Galleries
+/* ---------------------------------------------------------- */
+
+  /* When there galleries are mixed with images, reduce margin
+between them, so it looks like 1 big gallery */
+  .kg-image-card + .kg-gallery-card,
+  .kg-gallery-card + .kg-image-card,
+  .kg-gallery-card + .kg-gallery-card {
+    margin-top: 0.75em;
+  }
+
+  .kg-image-card.kg-card-hascaption + .kg-gallery-card,
+  .kg-gallery-card.kg-card-hascaption + .kg-image-card,
+  .kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
+    margin-top: 1.75em;
+  }
+
+  .kg-gallery-container {
+    position: relative;
+  }
+
+  .kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+  }
+
+  .kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+  }
+
+  /* Bookmark Cards
+/* ---------------------------------------------------------- */
+
+  /* These are styled links with structured data, similar to a
+Twitter card. These styles roughly match what you see in the
+Ghost editor. */
+
+  .kg-bookmark-card,
+  .kg-bookmark-publisher {
+    position: relative;
+    width: 100%;
+  }
+
+  .kg-bookmark-container,
+  .kg-bookmark-container:hover {
+    display: flex;
+    color: currentColor;
+    font-family: var(--font-sans-serif);
+    text-decoration: none !important;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 5px;
+    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+  }
+
+  .kg-bookmark-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-basis: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 20px;
+  }
+
+  .kg-bookmark-title {
+    font-size: 1.5rem;
+    line-height: 1.4em;
+    font-weight: 600;
+    color: #15171a;
+  }
+
+  .kg-bookmark-description {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    margin-top: 3px;
+    color: #626d79;
+    font-weight: 400;
+    max-height: 44px;
+    overflow-y: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .kg-bookmark-metadata {
+    display: flex;
+    align-items: center;
+    margin-top: 22px;
+    width: 100%;
+    color: #394047;
+    font-size: 1.4rem;
+    font-weight: 500;
+  }
+
+  .kg-bookmark-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+
+  .kg-bookmark-author,
+  .kg-bookmark-publisher {
+    display: inline;
+  }
+
+  .kg-bookmark-publisher {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 240px;
+    white-space: nowrap;
+    display: block;
+    line-height: 1.65em;
+  }
+
+  .kg-bookmark-metadata > span:nth-of-type(2) {
+    color: #626d79;
+    font-weight: 400;
+  }
+
+  .kg-bookmark-metadata > span:nth-of-type(2):before {
+    content: "•";
+    color: #394047;
+    margin: 0 6px;
+  }
+
+  .kg-bookmark-thumbnail {
+    position: relative;
+    flex-grow: 1;
+    min-width: 33%;
+  }
+
+  .kg-bookmark-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 0 4px 4px 0;
+  }
+
+  /* Card captions
+/* ---------------------------------------------------------- */
+
+  .kg-width-full.kg-card-hascaption {
+    display: grid;
+    grid-template-columns: inherit;
+  }
+
+  .kg-width-wide.kg-card-hascaption img {
+    grid-column: wide-start / wide-end;
+  }
+  .kg-width-full.kg-card-hascaption img {
+    grid-column: 1 / -1;
+  }
+
+  .kg-width-full.kg-card-hascaption figcaption {
+    grid-column: main-start / main-end;
+  }
+
+  .article-comments {
+    margin: 6vmin 0 0 0;
+  }
+
+  /* -----old------ */
+
+  .footnotes-sep {
+    margin-bottom: 30px;
+  }
+
+  .footnotes {
+    font-size: 1.5rem;
+  }
+
+  .footnotes p {
+    margin: 0;
+  }
+
+  .footnote-backref {
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-decoration: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Tables */
+  .post-full-content table {
+    display: inline-block;
+    overflow-x: auto;
+    margin: 0.5em 0 2.5em;
+    max-width: 100%;
+    width: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+    font-family: var(--font-sans-serif);
+    font-size: 1.6rem;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+
+  .post-full-content table {
+    -webkit-overflow-scrolling: touch;
+    background: radial-gradient(
+          ellipse at left,
+          rgba(0, 0, 0, 0.2) 0%,
+          rgba(0, 0, 0, 0) 75%
+        )
+        0 center,
+      radial-gradient(
+          ellipse at right,
+          rgba(0, 0, 0, 0.2) 0%,
+          rgba(0, 0, 0, 0) 75%
+        )
+        100% center;
+    background-attachment: scroll, scroll;
+    background-size: 10px 100%, 10px 100%;
+    background-repeat: no-repeat;
+  }
+
+  .post-full-content table td:first-child {
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 1) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    background-size: 20px 100%;
+    background-repeat: no-repeat;
+  }
+
+  .post-full-content table td:last-child {
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 1) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    background-position: 100% 0;
+    background-size: 20px 100%;
+    background-repeat: no-repeat;
+  }
+
+  .post-full-content table th {
+    color: var(--color-darkgrey);
+    font-size: 1.2rem;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+    text-align: left;
+    text-transform: uppercase;
+    background-color: color-mod(var(--color-wash) l(+4%));
+  }
+
+  .post-full-content table th,
+  .post-full-content table td {
+    padding: 6px 12px;
+    border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Paginator.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Paginator.astro
new file mode 100644
index 00000000..cf0e572f
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Paginator.astro
@@ -0,0 +1,26 @@
+---
+import type { Page } from 'astro';
+const { page } = Astro.props as {page: Page};
+---
+
+<div class="page__actions">
+  {page.url.prev && (
+    <a class="action__go-to-x" href={page.url.prev} title="Go to Previous">
+      &larr; Prev
+    </a>
+  )}
+  {page.url.next && (
+    <a class="action__go-to-x" href={page.url.next} title="Go to Next">
+      Next &rarr;
+    </a>
+  )}
+</div>
+
+<style>
+  /* .page__actions {
+    @apply flex justify-center md:justify-end py-6 gap-2;
+  }
+  .action__go-to-x {
+    @apply text-base uppercase text-gray-500 dark:text-gray-400 hover:underline;
+  } */
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Post.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Post.astro
new file mode 100644
index 00000000..1f49f3d6
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/Post.astro
@@ -0,0 +1,569 @@
+---
+import PostHero from "../components/PostHero.astro";
+import PostFooter from "../components/PostFooter.astro";
+import {invariant, type Post, type Settings } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  post: Post;
+  settings: Settings;
+  postClass?: string;
+  posts: Post[];
+};
+const { post, settings, postClass, posts } = Astro.props as Props;
+invariant(settings, "Settings not found");
+---
+
+<main id="site-main" class="site-main">
+  <article class={`article post ${postClass}`}>
+    <PostHero post={post} settings={settings} />
+    <section class="gh-content gh-canvas">
+      <Fragment set:html={post.html} />
+    </section>
+  </article>
+  <PostFooter post={post} settings={settings} posts={posts} />
+</main>
+
+<style lang="scss" is:global>
+  .article {
+    padding: 8vmin 0;
+    word-break: break-word;
+  }
+
+  .article-header {
+    padding: 0 0 6vmin 0;
+  }
+
+  .article-tag {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0 0 0.5rem;
+    color: var(--color-midgrey);
+    font-size: 1.3rem;
+    line-height: 1.4em;
+    letter-spacing: 0.02em;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .article-tag a {
+    color: var(--ghost-accent-color);
+  }
+
+  .article-title {
+    color: color-mod(var(--color-darkgrey) l(-5%));
+  }
+
+  .article-excerpt {
+    margin: 0 0 1rem;
+    font-size: 2rem;
+    line-height: 1.4em;
+    opacity: 0.6;
+  }
+
+  .gh-canvas .article-image {
+    grid-column: wide-start / wide-end;
+    width: 100%;
+    margin: 6vmin 0 0;
+  }
+
+  .gh-canvas .article-image img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  @media (max-width: 600px) {
+    .article-excerpt {
+      font-size: 1.8rem;
+    }
+  }
+
+  /* -------- */
+
+  /* Content grid
+/* ---------------------------------------------------------- */
+
+  /* Canvas creates a multi-column, centered grid which the post
+is laid out on top of. Canvas just defines the grid, we don't
+use it for applying any other styles. */
+
+  .gh-canvas {
+    display: grid;
+    grid-template-columns:
+      [full-start]
+      minmax(4vmin, auto)
+      [wide-start]
+      minmax(auto, 240px)
+      [main-start]
+      min(720px, calc(100% - 8vw))
+      [main-end]
+      minmax(auto, 240px)
+      [wide-end]
+      minmax(4vmin, auto)
+      [full-end];
+  }
+
+  .gh-canvas > * {
+    grid-column: main-start / main-end;
+  }
+
+  .kg-width-wide {
+    grid-column: wide-start / wide-end;
+  }
+
+  .kg-width-full {
+    grid-column: full-start / full-end;
+  }
+
+  .kg-width-full img {
+    width: 100%;
+  }
+
+  /* Content
+/* ---------------------------------------------------------- */
+
+  /* Content refers to styling all page and post content that is
+created within the Ghost editor. The main content handles
+headings, text, images and lists. We deal with cards lower down. */
+
+  /* Default vertical spacing */
+  .gh-content > * + * {
+    margin-top: 4vmin;
+    margin-bottom: 0;
+  }
+
+  /* [id] represents all headings h1-h6, reset all margins */
+  .gh-content > [id] {
+    margin: 0;
+    color: var(--color-darkgrey);
+  }
+
+  /* Add back a top margin to all headings, unless a heading
+is the very first element in the post content */
+  .gh-content > [id]:not(:first-child) {
+    margin: 2em 0 0;
+  }
+
+  /* Add a small margin between a heading and anything after it */
+  .gh-content > [id] + * {
+    margin-top: 1.5rem !important;
+  }
+
+  /* A larger margin before/after HRs and blockquotes */
+  .gh-content > hr,
+  .gh-content > blockquote {
+    position: relative;
+    margin-top: 6vmin;
+  }
+  .gh-content > hr + *,
+  .gh-content > blockquote + * {
+    margin-top: 6vmin !important;
+  }
+
+  /* Now the content typography styles */
+  .gh-content a {
+    color: var(--ghost-accent-color);
+    text-decoration: underline;
+    word-break: break-word;
+  }
+
+  .gh-content > blockquote,
+  .gh-content > ol,
+  .gh-content > ul,
+  .gh-content > dl,
+  .gh-content > p {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: 2.1rem;
+    line-height: 1.6em;
+  }
+
+  .gh-content > ul,
+  .gh-content > ol,
+  .gh-content > dl {
+    padding-left: 1.9em;
+  }
+
+  .gh-content > blockquote {
+    position: relative;
+    font-style: italic;
+    padding: 0;
+  }
+
+  .gh-content > blockquote::before {
+    content: "";
+    position: absolute;
+    left: -1.5em;
+    top: 0;
+    bottom: 0;
+    width: 0.3rem;
+    background: var(--ghost-accent-color);
+  }
+
+  .gh-content :not(pre) > code {
+    vertical-align: middle;
+    padding: 0.15em 0.4em 0.15em;
+    border: #e1eaef 1px solid;
+    font-weight: 400 !important;
+    font-size: 0.9em;
+    line-height: 1em;
+    color: #15171a;
+    background: #f0f6f9;
+    border-radius: 0.25em;
+  }
+
+  .gh-content pre {
+    overflow: auto;
+    padding: 16px 20px;
+    color: var(--color-wash);
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    background: var(--color-darkgrey);
+    border-radius: 5px;
+    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
+  }
+
+  @media (max-width: 650px) {
+    .gh-content blockquote,
+    .gh-content ol,
+    .gh-content ul,
+    .gh-content dl,
+    .gh-content p {
+      font-size: 1.7rem;
+    }
+
+    .gh-content blockquote::before {
+      left: -4vmin;
+    }
+  }
+
+  /* Cards
+/* ---------------------------------------------------------- */
+
+  /* Cards are dynamic blocks of content which appear within Ghost
+posts, for example: embedded videos, tweets, galleries, or
+specially styled bookmark links. We add extra styling here to
+make sure they look good, and are given a bit of extra spacing. */
+
+  /* Add extra margin before/after any cards,
+except for when immediately preceeded by a heading */
+  .gh-content :not(.kg-card):not([id]) + .kg-card {
+    margin-top: 6vmin;
+    margin-bottom: 0;
+  }
+  .gh-content .kg-card + :not(.kg-card) {
+    margin-top: 6vmin;
+    margin-bottom: 0;
+  }
+
+  /* This keeps small embeds centered */
+  .kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* This keeps small iamges centered */
+  .kg-image-card img {
+    margin: auto;
+  }
+
+  /* Captions */
+  figcaption {
+    padding: 1.5rem 1.5rem 0;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 600;
+    font-size: 1.3rem;
+    line-height: 1.4em;
+  }
+  figcaption strong {
+    color: rgba(0, 0, 0, 0.8);
+  }
+  figcaption a {
+    color: var(--ghost-accent-color);
+  }
+
+  /* Highly specific styles for traditional Instagram embeds */
+  iframe.instagram-media {
+    margin-top: 6vmin !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin-bottom: 0 !important;
+  }
+
+  iframe.instagram-media + script + :not([id]) {
+    margin-top: 6vmin;
+  }
+
+  /* Galleries
+/* ---------------------------------------------------------- */
+
+  /* When there galleries are mixed with images, reduce margin
+between them, so it looks like 1 big gallery */
+  .kg-image-card + .kg-gallery-card,
+  .kg-gallery-card + .kg-image-card,
+  .kg-gallery-card + .kg-gallery-card {
+    margin-top: 0.75em;
+  }
+
+  .kg-image-card.kg-card-hascaption + .kg-gallery-card,
+  .kg-gallery-card.kg-card-hascaption + .kg-image-card,
+  .kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
+    margin-top: 1.75em;
+  }
+
+  .kg-gallery-container {
+    position: relative;
+  }
+
+  .kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+  }
+
+  .kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+  }
+
+  /* Bookmark Cards
+/* ---------------------------------------------------------- */
+
+  /* These are styled links with structured data, similar to a
+Twitter card. These styles roughly match what you see in the
+Ghost editor. */
+
+  .kg-bookmark-card,
+  .kg-bookmark-publisher {
+    position: relative;
+    width: 100%;
+  }
+
+  .kg-bookmark-container,
+  .kg-bookmark-container:hover {
+    display: flex;
+    color: currentColor;
+    font-family: var(--font-sans-serif);
+    text-decoration: none !important;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 5px;
+    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+  }
+
+  .kg-bookmark-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-basis: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 20px;
+  }
+
+  .kg-bookmark-title {
+    font-size: 1.5rem;
+    line-height: 1.4em;
+    font-weight: 600;
+    color: #15171a;
+  }
+
+  .kg-bookmark-description {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    margin-top: 3px;
+    color: #626d79;
+    font-weight: 400;
+    max-height: 44px;
+    overflow-y: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .kg-bookmark-metadata {
+    display: flex;
+    align-items: center;
+    margin-top: 22px;
+    width: 100%;
+    color: #394047;
+    font-size: 1.4rem;
+    font-weight: 500;
+  }
+
+  .kg-bookmark-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+
+  .kg-bookmark-author,
+  .kg-bookmark-publisher {
+    display: inline;
+  }
+
+  .kg-bookmark-publisher {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 240px;
+    white-space: nowrap;
+    display: block;
+    line-height: 1.65em;
+  }
+
+  .kg-bookmark-metadata > span:nth-of-type(2) {
+    color: #626d79;
+    font-weight: 400;
+  }
+
+  .kg-bookmark-metadata > span:nth-of-type(2):before {
+    content: "•";
+    color: #394047;
+    margin: 0 6px;
+  }
+
+  .kg-bookmark-thumbnail {
+    position: relative;
+    flex-grow: 1;
+    min-width: 33%;
+  }
+
+  .kg-bookmark-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 0 4px 4px 0;
+  }
+
+  /* Card captions
+/* ---------------------------------------------------------- */
+
+  .kg-width-full.kg-card-hascaption {
+    display: grid;
+    grid-template-columns: inherit;
+  }
+
+  .kg-width-wide.kg-card-hascaption img {
+    grid-column: wide-start / wide-end;
+  }
+  .kg-width-full.kg-card-hascaption img {
+    grid-column: 1 / -1;
+  }
+
+  .kg-width-full.kg-card-hascaption figcaption {
+    grid-column: main-start / main-end;
+  }
+
+  .article-comments {
+    margin: 6vmin 0 0 0;
+  }
+
+  /* -----old------ */
+
+  .footnotes-sep {
+    margin-bottom: 30px;
+  }
+
+  .footnotes {
+    font-size: 1.5rem;
+  }
+
+  .footnotes p {
+    margin: 0;
+  }
+
+  .footnote-backref {
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-decoration: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Tables */
+  .post-full-content table {
+    display: inline-block;
+    overflow-x: auto;
+    margin: 0.5em 0 2.5em;
+    max-width: 100%;
+    width: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+    font-family: var(--font-sans-serif);
+    font-size: 1.6rem;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+
+  .post-full-content table {
+    -webkit-overflow-scrolling: touch;
+    background: radial-gradient(
+          ellipse at left,
+          rgba(0, 0, 0, 0.2) 0%,
+          rgba(0, 0, 0, 0) 75%
+        )
+        0 center,
+      radial-gradient(
+          ellipse at right,
+          rgba(0, 0, 0, 0.2) 0%,
+          rgba(0, 0, 0, 0) 75%
+        )
+        100% center;
+    background-attachment: scroll, scroll;
+    background-size: 10px 100%, 10px 100%;
+    background-repeat: no-repeat;
+  }
+
+  .post-full-content table td:first-child {
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 1) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    background-size: 20px 100%;
+    background-repeat: no-repeat;
+  }
+
+  .post-full-content table td:last-child {
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 1) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    background-position: 100% 0;
+    background-size: 20px 100%;
+    background-repeat: no-repeat;
+  }
+
+  .post-full-content table th {
+    color: var(--color-darkgrey);
+    font-size: 1.2rem;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+    text-align: left;
+    text-transform: uppercase;
+    background-color: color-mod(var(--color-wash) l(+4%));
+  }
+
+  .post-full-content table th,
+  .post-full-content table td {
+    padding: 6px 12px;
+    border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostFooter.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostFooter.astro
new file mode 100644
index 00000000..ea8cc4f7
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostFooter.astro
@@ -0,0 +1,125 @@
+---
+import PostPreview from "../components/PostPreview.astro";
+import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  post: Post;
+  settings: Settings;
+  posts: Post[];
+};
+const { post, settings, posts } = Astro.props as Props;
+---
+
+<!--section class="footer-cta">
+  <div class="inner">
+    <h2>Sign up for more like this.</h2>
+    <a class="footer-cta-button" href="#/portal">
+      <div>Enter your email</div>
+      <span>Subscribe</span>
+    </a>
+  </div>
+</section-->
+
+<aside class="read-more-wrap">
+  <div class="read-more inner">
+    {posts
+      .filter((p: Post) => p.id !== post.id)
+      .slice(0, 3)
+      .map((post: Post) => <PostPreview post={post} settings={settings} />)}
+  </div>
+</aside>
+
+<style lang="scss">
+  /* 7.3. Subscribe
+/* ---------------------------------------------------------- */
+
+  .footer-cta {
+    position: relative;
+    padding: 9vmin 4vmin 10vmin;
+    color: #fff;
+    text-align: center;
+    background: var(--color-darkgrey);
+  }
+
+  /* Increases the default h2 size by 15%, for small and large screens */
+  .footer-cta h2 {
+    margin: 0 0 30px;
+    font-size: 3.2rem;
+  }
+
+  @media (max-width: 600px) {
+    .footer-cta h2 {
+      font-size: 2.65rem;
+    }
+  }
+
+  .footer-cta-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 500px;
+    padding: 5px 5px 5px 15px;
+    font-size: 1.8rem;
+    color: var(--color-midgrey);
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  .footer-cta-button span {
+    display: inline-block;
+    padding: 10px 20px;
+    color: #fff;
+    font-weight: 500;
+    background: var(--ghost-accent-color);
+    border-radius: 5px;
+  }
+
+  /* 7.4. Read more
+/* ---------------------------------------------------------- */
+
+  .read-more-wrap {
+    width: 100%;
+    padding: 4vmin;
+    margin: 0 auto -40px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    background: color-mod(var(--color-darkgrey) l(-5%));
+  }
+
+  .read-more {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 4vmin;
+  }
+
+  .read-more .post-card-title {
+    color: #fff;
+    opacity: 0.8;
+  }
+
+  .read-more .post-card-excerpt {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .read-more .post-card-byline-content a {
+    color: #fff;
+  }
+
+  @media (max-width: 1000px) {
+    .read-more {
+      grid-template-columns: 1fr 1fr;
+    }
+    .read-more article:nth-child(3) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 700px) {
+    .read-more {
+      grid-template-columns: 1fr;
+    }
+    .read-more article:nth-child(2) {
+      display: none;
+    }
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostHero.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostHero.astro
new file mode 100644
index 00000000..fb312717
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostHero.astro
@@ -0,0 +1,108 @@
+---
+import FeatureImage from "../components/FeatureImage.astro";
+import AuthorList from "../components/AuthorList.astro";
+import { formatDate } from "../utils";
+import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  post: Post;
+  settings: Settings;
+};
+const { post, settings } = Astro.props as Props;
+---
+
+<header class="article-header gh-canvas">
+  {post.primary_tag && (
+    <section class="article-tag">
+      <a href={`/tag/${post.primary_tag.slug}`}>{post.primary_tag.name}</a>
+    </section>
+  )}
+  <h1 class="article-title" transition:name={post.title}>{post.title}</h1>
+
+  {post.custom_excerpt && <p class="article-excerpt">{post.custom_excerpt}</p>}
+  <div class="article-byline">
+    <section class="article-byline-content">
+      <AuthorList post={post} settings={settings} />
+      <div class="article-byline-meta">
+        { post.authors && post.authors.length > 1 && (
+          <h4 class="author-name">
+          {post.authors.map((author) => author.name).join(", ")}
+        </h4>
+        )}
+        <div class="byline-meta-content">
+          <time class="byline-meta-date" datetime={formatDate(post.created_at)}
+            >{formatDate(post.created_at)}
+          </time>
+          <span class="byline-reading-time"
+            ><span class="bull">&bull;</span>
+            {post.reading_time} min read
+          </span>
+        </div>
+      </div>
+    </section>
+  </div>
+  {post.feature_image && (
+    <FeatureImage
+      image={post.feature_image}
+      alt={post.feature_image_alt ? post.feature_image_alt : post.title}
+      caption={post.feature_image_caption || "" }
+      settings={settings}
+      transitionName={`img-${post.title}`}
+    />
+  )}
+</header>
+
+<style lang="scss">
+  .article-byline {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0 0;
+  }
+
+  .article-byline-content {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .article-byline-content .author-list {
+    justify-content: flex-start;
+    padding: 0 12px 0 0;
+  }
+
+  .article-byline-meta {
+    color: color-mod(var(--color-midgrey));
+    font-size: 1.4rem;
+    line-height: 1.2em;
+  }
+
+  .article-byline-meta h4 {
+    margin: 0 0 3px;
+    font-size: 1.6rem;
+  }
+
+  .article-byline-meta .bull {
+    display: inline-block;
+    margin: 0 2px;
+    opacity: 0.6;
+  }
+
+  .basic-info .avatar-wrapper {
+    position: relative;
+    margin: 0;
+    width: 60px;
+    height: 60px;
+    border: none;
+    background: rgba(229, 239, 245, 0.1);
+  }
+
+  .basic-info .avatar-wrapper svg {
+    margin: 0;
+    width: 60px;
+    height: 60px;
+    opacity: 0.15;
+  }
+
+  .page-template .article-title {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostPreview.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostPreview.astro
new file mode 100644
index 00000000..c6bb6aa3
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostPreview.astro
@@ -0,0 +1,301 @@
+---
+import { getGhostImgPath, formatDate } from "../utils";
+import AuthorList from "../components/AuthorList.astro";
+import type { Settings, Post, Tag } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  post: Post;
+  settings: Settings;
+  index?: number;
+  isHome?: boolean;
+};
+const { post, settings, index, isHome = false } = Astro.props as Props;
+---
+
+<article
+  class={`post-card ${post.tags && post.tags
+    .map((tag: Tag) => `tag-${tag.slug}`)
+    .join(" ")} ${
+    isHome && post.feature_image && index == 0 ? "post-card-large" : ""
+  }`}
+>
+  <a class="post-card-image-link" href={`/${post.slug}`} data-astro-reload>
+    <img
+      class="post-card-image"
+      srcset={`
+        ${getGhostImgPath(settings.url, post.feature_image || "", 300)} 300w, 
+        ${getGhostImgPath(settings.url, post.feature_image || "", 600)} 600w
+        ${getGhostImgPath(settings.url, post.feature_image || "", 1000)} 1000w
+        ${getGhostImgPath(settings.url, post.feature_image || "", 2000)} 2000w
+      `}
+      src={`${getGhostImgPath(settings.url, post.feature_image || "", 600)}`}
+      alt={post.title}
+      sizes="(max-width: 1000px) 400px, 800px"
+      loading="lazy"
+      transition:name={`img-${post.title}`}
+    />
+  </a>
+  <div class="post-card-content">
+    <a class="post-card-content-link" href={`/${post.slug}`} data-astro-reload>
+      <header class="post-card-header">
+        {post.primary_tag && (
+          <div class="post-card-primary-tag">{post.primary_tag.name}</div>
+        )}
+        <h2 class="post-card-title" transition:name={post.title}>{post.title}</h2>
+      </header>
+      <div class="post-card-excerpt">
+        <p>{post.excerpt}</p>
+      </div>
+    </a>
+
+    <footer class="post-card-meta">
+      <AuthorList post={post} settings={settings} />
+      <div class="post-card-byline-content">
+        <span>{post.primary_author?.name ?? ""}</span>
+        <span class="post-card-byline-date"
+          ><time datetime={formatDate(post.created_at)}
+            >{formatDate(post.created_at)}
+          </time>
+          <span class="bull">&bull;</span>
+          {post.reading_time} min read
+        </span>
+      </div>
+    </footer>
+  </div>
+</article>
+
+<style lang="scss" is:global>
+  @use "sass:color";
+  @import "../styles/variables";
+  .post-card {
+    position: relative;
+    flex: 1 1 301px;
+    display: flex;
+    flex-direction: column;
+    min-height: 220px;
+    background-size: cover;
+    word-break: break-word;
+  }
+
+  .post-card-excerpt {
+    max-width: 56em;
+    color: color.scale($color-midgrey, $lightness: -8%);
+  }
+
+  .post-card-image-link {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: 3px;
+  }
+
+  .post-card-image {
+    width: 100%;
+    height: 200px;
+    background: $color-lightgrey no-repeat center center;
+
+    object-fit: cover;
+  }
+
+  .post-card-content-link {
+    position: relative;
+    display: block;
+    color: $color-darkgrey;
+  }
+
+  .post-card-content-link:hover {
+    text-decoration: none;
+  }
+
+  .post-card-header {
+    margin: 20px 0 0;
+  }
+
+  .post-feed .no-image .post-card-content-link {
+    padding: 0;
+  }
+
+  .no-image .post-card-header {
+    margin-top: 0;
+  }
+
+  .post-card-primary-tag {
+    margin: 0 0 0.2em;
+    color: var(--ghost-accent-color);
+    font-size: 1.2rem;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+    text-transform: uppercase;
+  }
+
+  .post-card-title {
+    margin: 0 0 0.4em;
+    font-size: 2.4rem;
+    transition: color 0.2s ease-in-out;
+  }
+
+  .no-image .post-card-title {
+    margin-top: 0;
+  }
+
+  .post-card-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-card-excerpt p {
+    margin-bottom: 1em;
+    display: -webkit-box;
+    overflow-y: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+
+  .post-card-meta {
+    display: flex;
+    align-items: center;
+    padding: 0;
+  }
+
+  .avatar-wrapper {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: color.scale($color-lightgrey, $lightness: +8%);
+    border-radius: 100%;
+
+    object-fit: cover;
+  }
+
+  .post-card-meta .profile-image-wrapper,
+  .post-card-meta .avatar-wrapper {
+    position: relative;
+  }
+
+  .static-avatar {
+    display: block;
+    overflow: hidden;
+    margin: 0 0 0 -6px;
+    width: 36px;
+    height: 36px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
+  }
+
+  .post-card-byline-content {
+    flex: 1 1 50%;
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 0 8px;
+    color: color.scale($color-midgrey, $lightness: +10%);
+    font-size: 1.4rem;
+    line-height: 1.2em;
+    font-weight: 400;
+  }
+
+  .post-card-byline-content span {
+    margin: 0;
+  }
+
+  .post-card-byline-content a {
+    color: color.scale($color-darkgrey, $lightness: +15%);
+    font-weight: 600;
+  }
+
+  .post-card-byline-date {
+    font-size: 1.3rem;
+    line-height: 1.5em;
+  }
+
+  .post-card-byline-date .bull {
+    display: inline-block;
+    margin: 0 2px;
+    opacity: 0.6;
+  }
+
+  .single-author-byline {
+    display: flex;
+    flex-direction: column;
+    margin-left: 5px;
+    color: color.scale($color-midgrey, $lightness: -10%);
+    font-size: 1.3rem;
+    line-height: 1.4em;
+    font-weight: 500;
+  }
+
+  .single-author {
+    display: flex;
+    align-items: center;
+  }
+
+  .single-author .static-avatar {
+    margin-left: -2px;
+  }
+
+  .single-author-name {
+    display: inline-block;
+  }
+
+  /* Special Styling for home page grid (below):
+
+The first post in the list is styled to be bigger than the others and take over
+the full width of the grid to give it more emphasis. Wrapped in a media query to
+make sure this only happens on large viewports / desktop-ish devices.
+
+ */
+
+  @media (min-width: 1001px) {
+    .post-card-large {
+      grid-column: 1 / span 3;
+      display: grid;
+      grid-gap: 4vmin;
+      grid-template-columns: 1fr 1fr 1fr;
+      min-height: 280px;
+      border-top: 0;
+    }
+
+    .post-card-large:not(.no-image) .post-card-header {
+      margin-top: 0;
+    }
+
+    .post-card-large .post-card-image-link {
+      position: relative;
+      grid-column: 1 / span 2;
+      margin-bottom: 0;
+      min-height: 380px;
+    }
+
+    .post-card-large .post-card-image {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    .post-card-large .post-card-content {
+      justify-content: center;
+    }
+
+    .post-card-large .post-card-title {
+      margin-top: 0;
+      font-size: 3.2rem;
+    }
+
+    .post-card-large .post-card-excerpt p {
+      margin-bottom: 1.5em;
+      font-size: 1.7rem;
+      line-height: 1.55em;
+      -webkit-line-clamp: 8;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .post-card-title {
+      font-size: 1.9rem;
+    }
+
+    .post-card-excerpt {
+      font-size: 1.6rem;
+    }
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostPreviewList.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostPreviewList.astro
new file mode 100644
index 00000000..c7790bba
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/PostPreviewList.astro
@@ -0,0 +1,43 @@
+---
+import PostPreview from "../components/PostPreview.astro";
+import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  posts: Post[];
+  settings: Settings;
+  isHome?: boolean;
+};
+const { posts, settings, isHome = false } = Astro.props as Props;
+---
+
+<div class="post-feed">
+  {posts.map((post: Post, index: number) => (
+    <PostPreview
+      post={post}
+      index={index}
+      settings={settings}
+      isHome={isHome}
+    />
+  ))}
+</div>
+
+<style lang="scss">
+  .post-feed {
+    position: relative;
+    display: grid;
+    grid-gap: 4vmin;
+    grid-template-columns: 1fr 1fr 1fr;
+    padding: 4vmin 0;
+  }
+
+  @media (max-width: 1000px) {
+    .post-feed {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  @media (max-width: 700px) {
+    .post-feed {
+      grid-template-columns: 1fr;
+      grid-gap: 40px;
+    }
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/TagCard.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/TagCard.astro
new file mode 100644
index 00000000..1b7f1536
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/TagCard.astro
@@ -0,0 +1,51 @@
+---
+import { getGhostImgPath } from "../utils";
+import type { Settings, Tag } from "@matthiesenxyz/astro-ghostcms/api";
+export type Props = {
+  tag: Tag;
+  addClass?: string;
+  settings: Settings;
+};
+const { tag, addClass = "", settings } = Astro.props;
+---
+
+<a
+  href={`/tag/${tag.slug}`}
+  title={tag.name}
+  aria-label={tag.name}
+  class={`tag-card ${addClass ? addClass : ""}`}
+  style={tag.accent_color ? `--color-accent:${tag.accent_color}` : ""}
+>
+  {
+    tag.feature_image && (
+      <div class="tag-card-media">
+        <img
+          class="tag-card-img"
+          data-srcset={`
+          ${getGhostImgPath(settings.url, tag.feature_image, 100)} 100w,
+          ${getGhostImgPath(settings.url, tag.feature_image, 300)} 300w
+        `}
+          srcset={`
+          ${getGhostImgPath(settings.url, tag.feature_image, 100)} 100w,
+          ${getGhostImgPath(settings.url, tag.feature_image, 300)} 300w
+        `}
+          data-sizes="auto"
+          data-src={getGhostImgPath(settings.url, tag.feature_image, 300)}
+          src={getGhostImgPath(settings.url, tag.feature_image, 300)}
+          alt={tag.name}
+          sizes="200px"
+        />
+      </div>
+    )
+  }
+  <div class="tag-card-content">
+    <h4 class="tag-card-name">{tag.name}</h4>
+    {tag.count && <span class="tag-card-count">{tag.count.posts}+ Posts</span>}
+  </div>
+</a>
+
+<style lang="scss">
+  .tag-card {
+    text-align: center;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/components/cover.jpg b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/cover.jpg
new file mode 100644
index 00000000..5ffba05e
Binary files /dev/null and b/packages/create-astro-ghostcms/src/templates/starterkit/src/components/cover.jpg differ
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/env.d.ts b/packages/create-astro-ghostcms/src/templates/starterkit/src/env.d.ts
new file mode 100644
index 00000000..f964fe0c
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/layouts/default.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/layouts/default.astro
new file mode 100644
index 00000000..3a7f48cd
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/layouts/default.astro
@@ -0,0 +1,128 @@
+---
+import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
+import { AstroFont } from "astro-font";
+import MainLayout from "../components/MainLayout.astro";
+import { ViewTransitions } from "astro:transitions";
+
+export type Props = {
+  content?: {
+    title: string;
+    description: string;
+  };
+  bodyClass?: string;
+  settings: Settings;
+  image?: string;
+  permalink?: string;
+};
+
+const { content, permalink, image, settings, bodyClass = "" } = Astro.props as Props;
+const ghostAccentColor = settings.accent_color;
+---
+
+<html lang="en">
+  <head>
+    <Fragment set:html={settings.codeinjection_head}>
+    
+    <AstroFont
+    config={[
+      {
+        src: [],
+        name: "Inter",
+        preload: false,
+        display: "swap",
+        selector: "html",
+        fallback: "sans-serif",
+        googleFontsURL: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
+      },
+    ]}
+    />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    
+    <title>{content ? content.title + "|" + settings.title : settings.title}</title>
+    <ViewTransitions />
+    <meta name="title" content={content ? content.title : settings.title} />
+    {content?.description && <meta name="description" content={content.description} />}
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href={settings.icon} />
+    <link rel="shortcut icon" type="image/png" sizes="16x16" href={settings.icon} />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+    
+    <!-- Open Graph Tags (Facebook) -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={content?.title} />
+    {permalink && <meta property="og:url" content={permalink} />}
+    {content?.description && <meta property="og:description" content={content.description} />}
+    {image && <meta property="og:image" content={image} />}
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content={content?.title} />
+    {permalink && <meta property="twitter:url" content={permalink} />}
+    {content?.description && <meta property="twitter:description" content={content.description} />}
+    {image && <meta property="twitter:image" content={image} />}
+    
+    <!-- Link to the global style, or the file that imports constructs -->
+    <link
+      rel="preload"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+      as="style"
+    />
+    <link
+      rel="preload"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+      as="script"
+    />
+    <link
+      rel="preload stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+      crossorigin
+    />
+    <script
+      async
+      defer
+      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+    >
+    </script>
+  </head>
+  <body class={bodyClass}>
+    <MainLayout settings={settings}>
+      <slot />
+    </MainLayout>
+    <style
+      lang="scss"
+      is:global
+      define:vars={{ "ghost-accent-color": ghostAccentColor }}
+    >
+      @import "../styles/reset.scss";
+      @import "../styles/app.scss";
+      @mixin mq-sm {
+        @media only screen and (min-width: 36em) {
+          @content;
+        }
+      }
+      @mixin mq-md {
+        @media only screen and (min-width: 48em) {
+          @content;
+        }
+      }
+      @mixin mq-lg {
+        @media only screen and (min-width: 62em) {
+          @content;
+        }
+      }
+      @mixin mq-xl {
+        @media only screen and (min-width: 75em) {
+          @content;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/[slug].astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/[slug].astro
new file mode 100644
index 00000000..30141c65
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/[slug].astro
@@ -0,0 +1,45 @@
+---
+import type { InferGetStaticPropsType } from 'astro';
+import DefaultPageLayout from "../layouts/default.astro";
+import Page from "../components/Page.astro";
+import Post from "../components/Post.astro";
+import { getSettings, getAllPages, getAllPosts, invariant } from "@matthiesenxyz/astro-ghostcms/api";
+
+export async function getStaticPaths() {
+  const [posts, pages, settings] = await Promise.all([getAllPosts(), await getAllPages(), await getSettings()]);
+  const allPosts = [...posts, ...pages];
+  return allPosts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post, posts, settings },
+  }));
+}
+
+export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const {post, posts, settings} = Astro.props as Props;
+invariant(settings, "Settings are required");
+const postClass = post.tags?.map((tag) => "tag-" + tag.slug).join(" ");
+const bodyClass = `post-template ${postClass}`;
+---
+
+<DefaultPageLayout
+  content={{ title: post.title, description: post.excerpt }}
+  settings={settings}
+  bodyClass={bodyClass}
+>
+  {
+    post.primary_author ? (
+    <Post
+        post={post}
+        settings={settings}
+        postClass={postClass}
+        posts={posts}
+      />
+      
+    ) : (
+    <Page page={post} settings={settings} pageClass={postClass} />
+    )
+  }
+</DefaultPageLayout>
+
+<style lang="scss"></style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/archives/[...page].astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/archives/[...page].astro
new file mode 100644
index 00000000..cf25fe26
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/archives/[...page].astro
@@ -0,0 +1,49 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import DefaultPageLayout from "../../layouts/default.astro";
+import PostPreviewList from "../../components/PostPreviewList.astro";
+import HeroContent from "../../components/HeroContent.astro";
+import Paginator from "../../components/Paginator.astro";
+import { getSettings, getAllPosts, invariant, type Post } from "@matthiesenxyz/astro-ghostcms/api";
+
+export async function getStaticPaths({ paginate }:GetStaticPathsOptions) {
+  const posts = await getAllPosts();
+  return paginate(posts, {
+    pageSize: 5,
+  });
+}
+
+export type Props = {
+  page: Page<Post>
+};
+
+const settings = await getSettings();
+invariant(settings, "Settings are required");
+
+const title = settings.title;
+const description = settings.description;
+const { page } = Astro.props as Props;
+---
+
+<DefaultPageLayout
+  content={{ title, description }}
+  settings={settings}
+  bodyClass={"home-template"}
+>
+  <HeroContent
+    mainTitle={"Archives"}
+    description={"All the posts"}
+    featureImg={settings.cover_image || ""}
+    settings={settings}
+    addClass={"hero-cta bg-gradient"}
+  >
+    <h1 class="site-title" slot="title">Archives</h1>
+  </HeroContent>
+
+  <main id="site-main" class="site-main outer">
+    <div class="inner posts">
+      <PostPreviewList posts={page.data} settings={settings} />
+      <Paginator {page} />
+    </div>
+  </main>
+</DefaultPageLayout>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/author/[slug].astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/author/[slug].astro
new file mode 100644
index 00000000..9231a1f4
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/author/[slug].astro
@@ -0,0 +1,120 @@
+---
+import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
+import DefaultPageLayout from "../../layouts/default.astro";
+import PostPreviewList from "../../components/PostPreviewList.astro";
+import { getAllPosts, getAllAuthors, getSettings, twitter, facebook, invariant } from "@matthiesenxyz/astro-ghostcms/api";
+
+export async function getStaticPaths() {
+  const posts = await getAllPosts();
+  const { authors } = await getAllAuthors();
+  const settings = await getSettings();
+
+  return authors.map((author) => {
+    const filteredPosts = posts.filter((post) =>
+      post.authors?.map((author) => author.slug).includes(author.slug)
+    );
+    return {
+      params: { slug: author.slug },
+      props: {
+        posts: filteredPosts,
+        settings,
+        author,
+      },
+    };
+  });
+}
+
+export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { posts, settings, author } = Astro.props;
+invariant(settings, "Settings are required");
+const title = `Posts by author: ${author.name}`;
+const description = `All of the articles we've posted and linked so far under the author: ${author.name}`;
+---
+
+<DefaultPageLayout
+  bodyClass={`author-template author-${author.slug}`}
+  content={{ title, description }}
+  settings={settings}
+>
+  <section class="outer author-template">
+    <div class="inner posts">
+      <header class="author-profile">
+        <div class="author-profile-content">
+          {author.profile_image ? (
+            <img
+              class="author-profile-pic"
+              src={author.profile_image}
+              alt={author.name}
+            />
+          ) : (
+            <span class="author-profile-pic">
+              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <g fill="none" fill-rule="evenodd">
+                  <path
+                    d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z"
+                    fill="#FFF"
+                  />
+                </g>
+              </svg>
+            </span>
+          )}
+          <h1>{author.name}</h1>
+          <p>
+            {author.bio
+              ? author.bio
+              : author.count?.posts || 0 > 0
+              ? `${author.count?.posts} Posts`
+              : "No posts"}
+          </p>
+
+          <div class="author-profile-meta">
+            {author.location && (
+              <div class="author-profile-location">📍 {author.location}</div>
+            )}
+
+            {author.website && (
+              <span>
+                <a
+                  class="author-profile-social-link"
+                  href={author.website}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {author.website}
+                </a>
+              </span>
+            )}
+            {author.twitter && (
+              <span>
+                <a
+                  class="author-profile-social-link"
+                  href={twitter(author.twitter)}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {author.twitter}
+                </a>
+              </span>
+            )}
+            {author.facebook && (
+              <span>
+                <a
+                  class="author-profile-social-link"
+                  href={facebook(author.facebook)}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {author.facebook}
+                </a>
+              </span>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <PostPreviewList posts={posts} settings={settings} />
+    </div>
+  </section>
+</DefaultPageLayout>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/authors.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/authors.astro
new file mode 100644
index 00000000..d7533013
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/authors.astro
@@ -0,0 +1,43 @@
+---
+import DefaultPageLayout from "../layouts/default.astro";
+import AuthorCard from "../components/AuthorCard.astro";
+import { getAllAuthors, getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
+
+let title = "All Authors";
+let description = "All the authors";
+const { authors } = await getAllAuthors();
+const settings = await getSettings();
+invariant(settings, 'Settings not found');
+---
+
+<DefaultPageLayout content={{ title, description }} settings={settings}>
+  <section class="outer">
+    <div class="inner posts">
+      <h1>
+        {settings.title}
+      </h1>
+      <div class="page__excerpt m-t text-acc-3 text-center text-lg">
+        Collection of Tags
+      </div>
+      <div class="author-feed">
+        {authors.map((author) => (
+          <article class="post-card ">
+            <AuthorCard author={author} settings={settings} />
+          </article>
+        ))}
+      </div>
+    </div>
+  </section>
+</DefaultPageLayout>
+
+<style lang="scss">
+  .author-feed {
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-auto-rows: 1fr;
+    grid-column-gap: 9vh;
+    grid-row-gap: 10vh;
+    padding: 4vmin 0;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/index.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/index.astro
new file mode 100644
index 00000000..374f35b3
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/index.astro
@@ -0,0 +1,31 @@
+---
+import DefaultPageLayout from "../layouts/default.astro";
+import PostPreviewList from "../components/PostPreviewList.astro";
+import HeroContent from "../components/HeroContent.astro";
+import { getPosts, getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
+const { posts } = await getPosts();
+const settings = await getSettings();
+invariant(settings, 'Settings not found');
+const title = settings.title;
+const description = settings.description;
+---
+
+<DefaultPageLayout
+  content={{ title, description }}
+  settings={settings}
+  bodyClass={"home-template"}
+>
+  <HeroContent
+    mainTitle={settings.title}
+    description={settings.description}
+    featureImg={settings?.cover_image || ""}
+    settings={settings}
+    addClass={"hero-cta bg-gradient"}
+  />
+
+  <main id="site-main" class="site-main outer">
+    <div class="inner posts">
+      <PostPreviewList posts={posts} settings={settings} isHome={true} />
+    </div>
+  </main>
+</DefaultPageLayout>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/tag/[slug].astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/tag/[slug].astro
new file mode 100644
index 00000000..4a52c26b
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/tag/[slug].astro
@@ -0,0 +1,101 @@
+---
+import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
+import DefaultPageLayout from "../../layouts/default.astro";
+import PostPreview from "../../components/PostPreview.astro";
+import { getAllPosts, getAllTags, getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
+import { getGhostImgPath } from "../../utils";
+
+export async function getStaticPaths() {
+  const posts = await getAllPosts();
+  const { tags } = await getAllTags();
+  const settings = await getSettings();
+
+  return tags.map((tag) => {
+    const filteredPosts = posts.filter((post) =>
+      post.tags?.map((tag) => tag.slug).includes(tag.slug)
+    );
+    return {
+      params: { slug: tag.slug },
+      props: {
+        posts: filteredPosts,
+        settings,
+        tag,
+      },
+    };
+  });
+}
+
+export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { posts, settings, tag } = Astro.props;
+invariant(settings, 'Settings not found');
+const title = `Posts by Tag: ${tag.name}`;
+const description = `all of the articles we've posted and linked so far under the tag: ${tag.name}`;
+---
+
+<DefaultPageLayout
+  bodyClass={`tag-template tag-${tag.slug}`}
+  content={{ title, description }}
+  settings={settings}
+>
+  <main id="site-main" class="site-main outer">
+    <div class="inner posts">
+      <div class="post-feed">
+        <section class="post-card post-card-large">
+          {tag.feature_image && (
+            <div class="post-card-image-link">
+              <img
+                class="post-card-image"
+                srcset={`${getGhostImgPath(
+                  settings.url,
+                  tag.feature_image,
+                  300
+                )} 300w,
+                          ${getGhostImgPath(
+                            settings.url,
+                            tag.feature_image,
+                            600
+                          )}  600w,
+                          ${getGhostImgPath(
+                            settings.url,
+                            tag.feature_image,
+                            1000
+                          )}  1000w,
+                          ${getGhostImgPath(
+                            settings.url,
+                            tag.feature_image,
+                            2000
+                          )} 2000w`}
+                sizes="(max-width: 1000px) 400px, 800px"
+                src={getGhostImgPath(settings.url, tag.feature_image, 600)}
+                alt={tag.name}
+                loading="lazy"
+              />
+            </div>
+          )}
+          <div class="post-card-content">
+            <div class="post-card-content-link">
+              <header class="post-card-header">
+                <div class="post-card-primary-tag">Tagged</div>
+                <h2 class="post-card-title">{tag.name}</h2>
+              </header>
+              <div class="post-card-excerpt">
+                <p>
+                  {tag.description
+                    ? tag.description
+                    : `A collection of ${tag.count?.posts || 0 } Post${
+                        tag.count?.posts ?? 0 > 1 ? "s" : ""
+                      }`}
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+        {posts.map((post, index) => (
+          <PostPreview post={post} index={index} settings={settings} />
+        ))}
+      </div>
+    </div>
+  </main>
+</DefaultPageLayout>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/tags.astro b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/tags.astro
new file mode 100644
index 00000000..2d62fdba
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/pages/tags.astro
@@ -0,0 +1,49 @@
+---
+import DefaultPageLayout from "../layouts/default.astro";
+import TagCard from "../components/TagCard.astro";
+import { getSettings, getAllTags, invariant } from "@matthiesenxyz/astro-ghostcms/api";
+
+
+let title = "All Tags";
+let description = "All the tags used so far...";
+
+const { tags } = await getAllTags();
+const settings = await getSettings();
+invariant(settings, "Settings not found");
+---
+
+<DefaultPageLayout content={{ title, description }} settings={settings}>
+  <section class="outer">
+    <div class="inner posts">
+      <h1>
+        {settings.title}
+      </h1>
+      <div class="page__excerpt m-t text-acc-3 text-center text-lg">
+        Collection of Tags
+      </div>
+      <div class="tag-feed">
+        {
+          tags
+            .filter((tag) => tag.slug && !tag.slug.startsWith("hash-"))
+            .map((tag) => (
+              <article class="post-card ">
+                <TagCard tag={tag} settings={settings} />
+              </article>
+            ))
+        }
+      </div>
+    </div>
+  </section>
+</DefaultPageLayout>
+
+<style lang="scss">
+  .tag-feed {
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-auto-rows: 1fr;
+    grid-column-gap: 9vh;
+    grid-row-gap: 10vh;
+    padding: 4vmin 0;
+  }
+</style>
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/app.scss b/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/app.scss
new file mode 100644
index 00000000..68e22e47
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/app.scss
@@ -0,0 +1,395 @@
+/* Reset
+/* ---------------------------------------------------------- */
+
+@import "./reset";
+@import "./variables";
+
+/* 1. Global - Set up the things
+/* ---------------------------------------------------------- */
+/* Import CSS reset and base styles */
+:root {
+  /* Colours */
+  --color-green: #a4d037;
+  --color-yellow: #fecd35;
+  --color-red: #f05230;
+  --color-darkgrey: #15171a;
+  --color-midgrey: #738a94;
+  --color-lightgrey: #c5d2d9;
+  --color-wash: #e5eff5;
+  --color-darkmode: #151719;
+
+  /*
+    An accent color is also set by Ghost itself in
+    Ghost Admin > Settings > Brand
+
+    --ghost-accent-color: {value};
+
+    You can use this variale throughout your styles
+     */
+
+  /* Fonts */
+  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  --font-serif: Georgia, Times, serif;
+  --font-mono: Menlo, Courier, monospace;
+}
+
+/* 2. Layout - Page building blocks
+/* ---------------------------------------------------------- */
+
+.viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-content {
+  flex-grow: 1;
+}
+
+/* Full width page blocks */
+.outer {
+  position: relative;
+  padding: 0 4vmin;
+}
+
+/* Centered content container blocks */
+.inner {
+  margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
+}
+
+/* 9. Error Template
+/* ---------------------------------------------------------- */
+
+.error-content {
+  padding: 14vw 4vw 6vw;
+}
+
+.error-message {
+  padding-bottom: 10vw;
+  text-align: center;
+}
+
+.error-code {
+  margin: 0;
+  color: var(--ghost-accent-color);
+  font-size: 12vw;
+  line-height: 1em;
+  letter-spacing: -5px;
+}
+
+.error-description {
+  margin: 0;
+  color: var(--color-midgrey);
+  font-size: 3.2rem;
+  line-height: 1.3em;
+  font-weight: 400;
+}
+
+.error-link {
+  display: inline-block;
+  margin-top: 5px;
+}
+
+@media (min-width: 940px) {
+  .error-content .post-card {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .error-content {
+    padding-top: 24vw;
+  }
+  .error-code {
+    font-size: 11.2rem;
+  }
+  .error-message {
+    padding-bottom: 16vw;
+  }
+  .error-description {
+    margin: 5px 0 0 0;
+    font-size: 1.8rem;
+  }
+}
+
+@media (max-width: 500px) {
+  .error-content {
+    padding-top: 28vw;
+  }
+  .error-message {
+    padding-bottom: 14vw;
+  }
+}
+
+.author-template .posts {
+  position: relative;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 200px 1fr 1fr;
+  grid-gap: 4vmin;
+}
+
+.author-template .posts .post-feed {
+  grid-column: 2 / 4;
+  grid-template-columns: 1fr 1fr;
+}
+@media (max-width: 900px) {
+  .author-template .posts .post-feed {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 650px) {
+  .author-template .posts {
+    grid-template-columns: 1fr;
+    grid-gap: 0;
+  }
+  .author-template .posts .post-feed {
+    grid-column: 1 / auto;
+  }
+  .author-profile {
+    padding-right: 0;
+  }
+  .author-profile-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding-right: auto;
+  }
+}
+
+/* 11. Site Footer
+/* ---------------------------------------------------------- */
+
+/* 12. Dark Mode
+/* ---------------------------------------------------------- */
+
+/* If you prefer a dark color scheme, you can enable dark mode
+by adding the following code to the Head section of "Code Injection"
+settings inside: Ghost Admin > Settings > Advanced
+
+<script>document.documentElement.classList.add('dark-mode');</script>
+
+Or you can just edit default.hbs and add the .dark-mode class directly
+to the html tag on the very first line of the file.
+
+ */
+
+html.dark-mode body {
+  color: rgba(255, 255, 255, 0.75);
+  background: var(--color-darkmode);
+}
+
+html.dark-mode img {
+  opacity: 0.9;
+}
+
+html.dark-mode .post-card,
+html.dark-mode .post-card:hover {
+  border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .post-card-byline-content a {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .post-card-byline-content a:hover {
+  color: #fff;
+}
+
+html.dark-mode .post-card-image {
+  background: var(--color-darkmode);
+}
+
+html.dark-mode .post-card-title {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+html.dark-mode .post-card-excerpt {
+  color: var(--color-midgrey);
+}
+
+html.dark-mode .post-full-content {
+  background: var(--color-darkmode);
+}
+
+html.dark-mode .article-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .article-excerpt {
+  color: color-mod(var(--color-midgrey) l(+10%));
+}
+
+html.dark-mode .post-full-image {
+  background-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .article-byline {
+  border-top-color: color-mod(var(--color-darkmode) l(+15%));
+}
+
+html.dark-mode .article-byline-meta h4 a {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .article-byline-meta h4 a:hover {
+  color: #fff;
+}
+
+html.dark-mode .no-image .author-social-link a {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .gh-content h1,
+html.dark-mode .gh-content h2,
+html.dark-mode .gh-content h3,
+html.dark-mode .gh-content h4,
+html.dark-mode .gh-content h5,
+html.dark-mode .gh-content h6 {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .gh-content pre {
+  background: color-mod(var(--color-darkgrey) l(-8%));
+}
+
+html.dark-mode .gh-content :not(pre) > code {
+  background: color-mod(var(--color-darkgrey) l(+6%));
+  border-color: color-mod(var(--color-darkmode) l(+8%));
+  color: var(--color-wash);
+}
+
+html.dark-mode .post-full-content a {
+  color: #fff;
+  box-shadow: inset 0 -1px 0 #fff;
+}
+
+html.dark-mode .post-full-content strong {
+  color: #fff;
+}
+
+html.dark-mode .post-full-content em {
+  color: #fff;
+}
+
+html.dark-mode .post-full-content code {
+  color: #fff;
+  background: #000;
+}
+
+html.dark-mode hr {
+  border-top-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .post-full-content hr:after {
+  background: color-mod(var(--color-darkmode) l(+8%));
+  box-shadow: var(--color-darkmode) 0 0 0 5px;
+}
+
+html.dark-mode .gh-content figcaption {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+html.dark-mode .post-full-content table td:first-child {
+  background-image: linear-gradient(
+    to right,
+    var(--color-darkmode) 50%,
+    color-mod(var(--color-darkmode) a(0%)) 100%
+  );
+}
+
+html.dark-mode .post-full-content table td:last-child {
+  background-image: linear-gradient(
+    to left,
+    var(--color-darkmode) 50%,
+    color-mod(var(--color-darkmode) a(0%)) 100%
+  );
+}
+
+html.dark-mode .post-full-content table th {
+  color: rgba(255, 255, 255, 0.85);
+  background-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .post-full-content table th,
+html.dark-mode .post-full-content table td {
+  border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
+}
+
+html.dark-mode .post-full-content .kg-bookmark-container,
+html.dark-mode .post-full-content .kg-bookmark-container:hover {
+  color: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .post-full-content input {
+  color: color-mod(var(--color-midgrey) l(-30%));
+}
+
+html.dark-mode .kg-bookmark-title {
+  color: #fff;
+}
+
+html.dark-mode .kg-bookmark-description {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .kg-bookmark-metadata {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark-mode .site-archive-header .no-image {
+  color: rgba(255, 255, 255, 0.9);
+  background: var(--color-darkmode);
+}
+
+html.dark-mode .subscribe-form {
+  border: none;
+  background: linear-gradient(
+    color-mod(var(--color-darkmode) l(-6%)),
+    color-mod(var(--color-darkmode) l(-3%))
+  );
+}
+
+html.dark-mode .subscribe-form-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+html.dark-mode .subscribe-form p {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+html.dark-mode .subscribe-email {
+  border-color: color-mod(var(--color-darkmode) l(+6%));
+  color: rgba(255, 255, 255, 0.9);
+  background: color-mod(var(--color-darkmode) l(+3%));
+}
+
+html.dark-mode .subscribe-email:focus {
+  border-color: color-mod(var(--color-darkmode) l(+25%));
+}
+
+html.dark-mode .subscribe-form button {
+  opacity: 0.9;
+}
+
+html.dark-mode .subscribe-form .invalid .message-error,
+html.dark-mode .subscribe-form .error .message-error {
+  color: color-mod(var(--color-red) l(+5%) s(-5%));
+}
+
+html.dark-mode .subscribe-form .success .message-success {
+  color: color-mod(var(--color-green) l(+5%) s(-5%));
+}
+
+html.dark-mode figcaption {
+  color: rgba(255, 255, 255, 0.6);
+}
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/reset.scss b/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/reset.scss
new file mode 100644
index 00000000..920eeb1b
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/reset.scss
@@ -0,0 +1,464 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+html {
+  box-sizing: border-box;
+  font-family: sans-serif;
+
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+b,
+strong {
+  font-weight: bold;
+}
+i,
+em,
+dfn {
+  font-style: italic;
+}
+h1 {
+  margin: 0.67em 0;
+  font-size: 2em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+mark {
+  background-color: #fdffb6;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; /* 3 */
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+}
+button {
+  overflow: visible;
+  border: none;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+/* 1 */
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer; /* 3 */
+
+  -webkit-appearance: button; /* 2 */
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+input {
+  line-height: normal;
+}
+input:focus {
+  outline: none;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type="search"] {
+  box-sizing: content-box; /* 2 */
+
+  -webkit-appearance: textfield; /* 1 */
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+legend {
+  padding: 0; /* 2 */
+  border: 0; /* 1 */
+}
+textarea {
+  overflow: auto;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+td,
+th {
+  padding: 0;
+}
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html {
+  font-size: 62.5%;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  color: #35373a;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 1.6rem;
+  line-height: 1.6em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: 0;
+  text-rendering: optimizeLegibility;
+  background: #fff;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
+}
+
+::selection {
+  text-shadow: none;
+  background: #daf2fd;
+}
+
+hr {
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 2.5em 0 3.5em;
+  padding: 0;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #f0f0f0;
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+::not(.gh-content) p,
+::not(.gh-content) ul,
+::not(.gh-content) ol,
+::not(.gh-content) dl,
+::not(.gh-content) blockquote {
+  margin: 0 0 1.5em 0;
+}
+
+ol,
+ul {
+  padding-left: 1.3em;
+  padding-right: 1.5em;
+}
+
+ol ol,
+ul ul,
+ul ol,
+ol ul {
+  margin: 0.5em 0 1em;
+}
+
+ul {
+  list-style: disc;
+}
+
+ol {
+  list-style: decimal;
+}
+
+ul,
+ol {
+  max-width: 100%;
+}
+
+li {
+  padding-left: 0.3em;
+  line-height: 1.6em;
+}
+
+li + li {
+  margin-top: 0.5em;
+}
+
+dt {
+  float: left;
+  margin: 0 20px 0 0;
+  width: 120px;
+  color: #daf2fd;
+  font-weight: 500;
+  text-align: right;
+}
+
+dd {
+  margin: 0 0 5px 0;
+  text-align: left;
+}
+
+blockquote {
+  margin: 1.5em 0;
+  padding: 0 1.6em 0 1.6em;
+  border-left: #daf2fd;
+}
+
+blockquote p {
+  margin: 0.8em 0;
+  font-size: 1.2em;
+  font-weight: 300;
+}
+
+blockquote small {
+  display: inline-block;
+  margin: 0.8em 0 0.8em 1.5em;
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+/* Quotation marks */
+blockquote small:before {
+  content: "\2014 \00A0";
+}
+
+blockquote cite {
+  font-weight: bold;
+}
+blockquote cite a {
+  font-weight: normal;
+}
+
+a {
+  color: #15171a;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  line-height: 1.15;
+  font-weight: 600;
+  text-rendering: optimizeLegibility;
+  letter-spacing: -0.01em;
+}
+
+h1 {
+  margin: 0 0 0.5em 0;
+  font-size: 4.8rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+@media (max-width: 600px) {
+  h1 {
+    font-size: 2.8rem;
+  }
+}
+
+h2 {
+  margin: 1.5em 0 0.5em 0;
+  font-size: 2.8rem;
+  font-weight: 700;
+}
+@media (max-width: 600px) {
+  h2 {
+    font-size: 2.3rem;
+  }
+}
+
+h3 {
+  margin: 1.5em 0 0.5em 0;
+  font-size: 2.4rem;
+  font-weight: 600;
+}
+@media (max-width: 600px) {
+  h3 {
+    font-size: 1.7rem;
+  }
+}
+
+h4 {
+  margin: 1.5em 0 0.5em 0;
+  font-size: 2.2rem;
+}
+
+h5 {
+  margin: 1.5em 0 0.5em 0;
+  font-size: 2rem;
+}
+
+h6 {
+  margin: 1.5em 0 0.5em 0;
+  font-size: 1.8rem;
+}
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/variables.scss b/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/variables.scss
new file mode 100644
index 00000000..b0774680
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/styles/variables.scss
@@ -0,0 +1,8 @@
+$color-green: #a4d037;
+$color-yellow: #fecd35;
+$color-red: #f05230;
+$color-darkgrey: #15171a;
+$color-midgrey: #738a94;
+$color-lightgrey: #c5d2d9;
+$color-wash: #e5eff5;
+$color-darkmode: #151719;
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/src/utils/index.ts b/packages/create-astro-ghostcms/src/templates/starterkit/src/utils/index.ts
new file mode 100644
index 00000000..d003b908
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/src/utils/index.ts
@@ -0,0 +1,32 @@
+export const getGhostImgPath = (
+  baseUrl: string,
+  imgUrl: string,
+  width = 0
+): string => {
+  if (!imgUrl) return "";
+  if (!imgUrl.startsWith(baseUrl)) {
+    return imgUrl;
+  }
+  const relativePath = imgUrl.substring(`${baseUrl}content/images`.length);
+  const cleanedBaseUrl = baseUrl.replace(/\/~/, "");
+  if (width && width > 0) {
+    return `${cleanedBaseUrl}content/images/size/w${width}/${relativePath}`;
+  }
+  return `${cleanedBaseUrl}content/images/${width}${relativePath}`;
+};
+
+export const truncate = (input: string, size: number): string =>
+  input.length > size ? `${input.substring(0, size)}...` : input;
+
+export const formatDate = (dateInput: string): string => {
+  const dateObject = new Date(dateInput);
+  return dateObject.toDateString();
+};
+
+export const uniqWith = <T>(
+  arr: Array<T>,
+  fn: (element: T, step: T) => number
+): Array<T> =>
+  arr.filter(
+    (element, index) => arr.findIndex((step) => fn(element, step)) === index
+  );
diff --git a/packages/create-astro-ghostcms/src/templates/starterkit/tsconfig.json b/packages/create-astro-ghostcms/src/templates/starterkit/tsconfig.json
new file mode 100644
index 00000000..77da9dd0
--- /dev/null
+++ b/packages/create-astro-ghostcms/src/templates/starterkit/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}
\ No newline at end of file
diff --git a/packages/create-astro-ghostcms/tsconfig.json b/packages/create-astro-ghostcms/tsconfig.json
new file mode 100644
index 00000000..ef6eb716
--- /dev/null
+++ b/packages/create-astro-ghostcms/tsconfig.json
@@ -0,0 +1,26 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"display": "Default",
+	"include": ["."],
+	"exclude": ["node_modules", "templates/*"],
+	"compilerOptions": {
+		"allowJs": true,
+		"allowSyntheticDefaultImports": true,
+		"checkJs": true,
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"target": "ES2022",
+		"noEmit": true,
+		"declaration": false,
+		"downlevelIteration": true,
+		"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true,
+		"inlineSources": false,
+		"isolatedModules": true,
+		"moduleResolution": "node",
+		"skipLibCheck": true,
+		"strict": true,
+		// Non-null assertions are a PITA when checking JS files
+		"strictNullChecks": false
+	}
+}
diff --git a/packages/create-astro-ghostcms/types.d.ts b/packages/create-astro-ghostcms/types.d.ts
new file mode 100644
index 00000000..fc102873
--- /dev/null
+++ b/packages/create-astro-ghostcms/types.d.ts
@@ -0,0 +1,3 @@
+export * from "./index";
+export type PackageManager = "npm" | "yarn" | "pnpm";
+export type Serializable = string | object | number | boolean | bigint;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 460316a3..b7951ed2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 2.27.1
       vitest:
         specifier: ^1.1.0
-        version: 1.2.1(@types/node@20.11.6)
+        version: 1.2.1(@types/node@18.19.10)
       vitest-fetch-mock:
         specifier: ^0.2.2
         version: 0.2.2(vitest@1.2.1)
@@ -24,14 +24,14 @@ importers:
   demo:
     dependencies:
       '@matthiesenxyz/astro-ghostcms':
-        specifier: 3.1.4
+        specifier: 3.1.5
         version: link:../packages/astro-ghostcms
       '@matthiesenxyz/astro-ghostcms-theme-default':
-        specifier: 0.1.3
-        version: 0.1.3(astro@4.2.4)(typescript@5.3.3)
+        specifier: 0.1.5
+        version: link:../packages/astro-ghostcms-theme-default
       astro:
         specifier: ^4.2.4
-        version: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
+        version: 4.2.4(typescript@5.3.3)
     devDependencies:
       '@astrojs/check':
         specifier: ^0.4.1
@@ -116,7 +116,7 @@ importers:
   packages/astro-ghostcms-theme-default:
     dependencies:
       '@matthiesenxyz/astro-ghostcms':
-        specifier: ^3.1.3
+        specifier: ^3.1.5
         version: link:../astro-ghostcms
       astro:
         specifier: ^4.2.1
@@ -124,17 +124,84 @@ importers:
       astro-font:
         specifier: ^0.0.77
         version: 0.0.77
+      sass:
+        specifier: ^1.70.0
+        version: 1.70.0
     devDependencies:
       '@astrojs/check':
         specifier: ^0.4.1
         version: 0.4.1(prettier-plugin-astro@0.13.0)(prettier@3.2.4)(typescript@5.3.3)
-      sass:
-        specifier: ^1.70.0
-        version: 1.70.0
       typescript:
         specifier: ^5.3.3
         version: 5.3.3
 
+  packages/create-astro-ghostcms:
+    dependencies:
+      '@clack/prompts':
+        specifier: ^0.7.0
+        version: 0.7.0
+      arg:
+        specifier: ^5.0.2
+        version: 5.0.2
+      execa:
+        specifier: ^7.0.0
+        version: 7.2.0
+      fs-extra:
+        specifier: ^11.1.0
+        version: 11.2.0
+      picocolors:
+        specifier: ^1.0.0
+        version: 1.0.0
+      read-pkg:
+        specifier: ^5.2.0
+        version: 5.2.0
+    devDependencies:
+      '@types/fs-extra':
+        specifier: ^11.0.1
+        version: 11.0.4
+      '@types/gunzip-maybe':
+        specifier: ^1.4.0
+        version: 1.4.2
+      '@types/node':
+        specifier: ^18.14.1
+        version: 18.19.10
+      '@types/tar-fs':
+        specifier: ^2.0.1
+        version: 2.0.4
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.19.0
+        version: 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser':
+        specifier: ^6.19.0
+        version: 6.19.1(eslint@8.56.0)(typescript@5.3.3)
+      eslint:
+        specifier: ^8.56.0
+        version: 8.56.0
+      eslint-config-prettier:
+        specifier: ^9.1.0
+        version: 9.1.0(eslint@8.56.0)
+      eslint-import-resolver-node:
+        specifier: ^0.3.7
+        version: 0.3.9
+      eslint-import-resolver-typescript:
+        specifier: ^3.5.3
+        version: 3.6.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
+      prettier:
+        specifier: ^2.8.4
+        version: 2.8.8
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+      vite:
+        specifier: ^5.0.12
+        version: 5.0.12(@types/node@18.19.10)
+      vite-tsconfig-paths:
+        specifier: ^4.2.2
+        version: 4.3.1(typescript@5.3.3)(vite@5.0.12)
+      vitest:
+        specifier: ^1.1.0
+        version: 1.2.1(@types/node@18.19.10)
+
   packages/tsconfig: {}
 
   playground:
@@ -147,7 +214,7 @@ importers:
         version: link:../packages/astro-ghostcms-theme-default
       astro:
         specifier: ^4.2.4
-        version: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
+        version: 4.2.4(typescript@5.3.3)
     devDependencies:
       '@astrojs/check':
         specifier: ^0.4.1
@@ -868,6 +935,23 @@ packages:
       prettier: 2.8.8
     dev: true
 
+  /@clack/core@0.3.3:
+    resolution: {integrity: sha512-5ZGyb75BUBjlll6eOa1m/IZBxwk91dooBWhPSL67sWcLS0zt9SnswRL0l26TVdBhb0wnWORRxUn//uH6n4z7+A==}
+    dependencies:
+      picocolors: 1.0.0
+      sisteransi: 1.0.5
+    dev: false
+
+  /@clack/prompts@0.7.0:
+    resolution: {integrity: sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==}
+    dependencies:
+      '@clack/core': 0.3.3
+      picocolors: 1.0.0
+      sisteransi: 1.0.5
+    dev: false
+    bundledDependencies:
+      - is-unicode-supported
+
   /@ctrl/tinycolor@3.6.1:
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
@@ -1411,53 +1495,6 @@ packages:
       read-yaml-file: 1.1.0
     dev: true
 
-  /@matthiesenxyz/astro-ghostcms-theme-default@0.1.3(astro@4.2.4)(typescript@5.3.3):
-    resolution: {integrity: sha512-ZWo5L5ZSYTWYcQjauDEQBiyH2nqnmoBs8F/cCttRzE6ms5LrWQ65nMuWQQomp5j/kMBBn2upVIi6bEUgoCxt6w==}
-    peerDependencies:
-      astro: ^4.2.1
-    dependencies:
-      '@matthiesenxyz/astro-ghostcms': 3.1.4(astro@4.2.4)(typescript@5.3.3)
-      astro: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
-      astro-font: 0.0.77
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-    dev: false
-
-  /@matthiesenxyz/astro-ghostcms@3.1.4(astro@4.2.4)(typescript@5.3.3):
-    resolution: {integrity: sha512-8jXKKG8IhL1M97+p4rjh8gW+6WM0uzQQEA6SARn68HtB3w7rek3rzfnbf/OsXrP9H8LHgYqAUFvZ1AYMWYVnJw==}
-    peerDependencies:
-      astro: ^4.2.3
-    dependencies:
-      '@astrojs/rss': 4.0.3
-      '@astrojs/sitemap': 3.0.5
-      '@matthiesenxyz/astro-ghostcms-theme-default': 0.1.3(astro@4.2.4)(typescript@5.3.3)
-      '@ts-ghost/core-api': 5.1.2
-      astro: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
-      astro-robots-txt: 1.0.0
-      vite: 5.0.12(@types/node@20.11.6)
-      vite-tsconfig-paths: 4.3.1(typescript@5.3.3)(vite@5.0.12)
-      zod: 3.22.4
-      zod-validation-error: 3.0.0(zod@3.22.4)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-    dev: false
-
   /@mdx-js/mdx@3.0.0:
     resolution: {integrity: sha512-Icm0TBKBLYqroYbNW3BPnzMGn+7mwpQOK310aZ7+fkCtiU3aqv2cdcX+nd0Ydo3wI5Rx8bX2Z2QmGb/XcAClCw==}
     dependencies:
@@ -1707,6 +1744,19 @@ packages:
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  /@types/fs-extra@11.0.4:
+    resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
+    dependencies:
+      '@types/jsonfile': 6.1.4
+      '@types/node': 18.19.10
+    dev: true
+
+  /@types/gunzip-maybe@1.4.2:
+    resolution: {integrity: sha512-2uqXZg1jTCKE1Pjbab8qb74+f2+i9h/jz8rQ+jRR+zaNJF75zWwrpbX8/TjF4m56m3KFOg9umHdCJ074KwiVxg==}
+    dependencies:
+      '@types/node': 18.19.10
+    dev: true
+
   /@types/hast@2.3.9:
     resolution: {integrity: sha512-pTHyNlaMD/oKJmS+ZZUyFUcsZeBZpC0lmGquw98CqRVNgAdJZJeD7GoeLiT6Xbx5rU9VCjSt0RwEvDgzh4obFw==}
     dependencies:
@@ -1723,6 +1773,16 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
+
+  /@types/jsonfile@6.1.4:
+    resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
+    dependencies:
+      '@types/node': 18.19.10
+    dev: true
+
   /@types/mdast@4.0.3:
     resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
     dependencies:
@@ -1755,6 +1815,11 @@ packages:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
     dev: false
 
+  /@types/node@18.19.10:
+    resolution: {integrity: sha512-IZD8kAM02AW1HRDTPOlz3npFava678pr8Ie9Vp8uRhBROXAv8MXT2pCnGZZAKYdromsNQLHQcfWQ6EOatVLtqA==}
+    dependencies:
+      undici-types: 5.26.5
+
   /@types/node@20.11.6:
     resolution: {integrity: sha512-+EOokTnksGVgip2PbYbr3xnR7kZigh4LbybAfBAw5BpnQ+FqBYUsvCEjYd70IXKlbohQ64mzEYmMtlWUY8q//Q==}
     dependencies:
@@ -1762,7 +1827,6 @@ packages:
 
   /@types/normalize-package-data@2.4.4:
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
-    dev: true
 
   /@types/parse5@6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@@ -1778,6 +1842,19 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
+  /@types/tar-fs@2.0.4:
+    resolution: {integrity: sha512-ipPec0CjTmVDWE+QKr9cTmIIoTl7dFG/yARCM5MqK8i6CNLIG1P8x4kwDsOQY1ChZOZjH0wO9nvfgBvWl4R3kA==}
+    dependencies:
+      '@types/node': 18.19.10
+      '@types/tar-stream': 3.1.3
+    dev: true
+
+  /@types/tar-stream@3.1.3:
+    resolution: {integrity: sha512-Zbnx4wpkWBMBSu5CytMbrT5ZpMiF55qgM+EpHzR4yIDu7mv52cej8hTkOc6K+LzpkOAbxwn/m7j3iO+/l42YkQ==}
+    dependencies:
+      '@types/node': 18.19.10
+    dev: true
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
@@ -2146,6 +2223,17 @@ packages:
       is-array-buffer: 3.0.2
     dev: true
 
+  /array-includes@3.1.7:
+    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
+      is-string: 1.0.7
+    dev: true
+
   /array-iterate@2.0.1:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
     dev: false
@@ -2155,6 +2243,17 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /array.prototype.findlastindex@1.2.3:
+    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+      get-intrinsic: 1.2.2
+    dev: true
+
   /array.prototype.flat@1.3.2:
     resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
     engines: {node: '>= 0.4'}
@@ -2165,6 +2264,16 @@ packages:
       es-shim-unscopables: 1.0.2
     dev: true
 
+  /array.prototype.flatmap@1.3.2:
+    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
   /arraybuffer.prototype.slice@1.0.2:
     resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
     engines: {node: '>= 0.4'}
@@ -2475,6 +2584,88 @@ packages:
       - typescript
     dev: false
 
+  /astro@4.2.4(typescript@5.3.3):
+    resolution: {integrity: sha512-z1f52lXkHf71M5HSLKrd5G1PH5/Zfq4kMp0iUT7Na5VHcPDma/NYFPFPewDxqV6UPmyxupj3xuooFaN3j8zaow==}
+    engines: {node: '>=18.14.1', npm: '>=6.14.0'}
+    hasBin: true
+    dependencies:
+      '@astrojs/compiler': 2.5.0
+      '@astrojs/internal-helpers': 0.2.1
+      '@astrojs/markdown-remark': 4.2.0
+      '@astrojs/telemetry': 3.0.4
+      '@babel/core': 7.23.7
+      '@babel/generator': 7.23.6
+      '@babel/parser': 7.23.6
+      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.7)
+      '@babel/traverse': 7.23.7
+      '@babel/types': 7.23.6
+      '@types/babel__core': 7.20.5
+      acorn: 8.11.3
+      aria-query: 5.3.0
+      axobject-query: 4.0.0
+      boxen: 7.1.1
+      chokidar: 3.5.3
+      ci-info: 4.0.0
+      clsx: 2.1.0
+      common-ancestor-path: 1.0.1
+      cookie: 0.6.0
+      debug: 4.3.4
+      deterministic-object-hash: 2.0.2
+      devalue: 4.3.2
+      diff: 5.1.0
+      dlv: 1.1.3
+      dset: 3.1.3
+      es-module-lexer: 1.4.1
+      esbuild: 0.19.12
+      estree-walker: 3.0.3
+      execa: 8.0.1
+      fast-glob: 3.3.2
+      flattie: 1.1.0
+      github-slugger: 2.0.0
+      gray-matter: 4.0.3
+      html-escaper: 3.0.3
+      http-cache-semantics: 4.1.1
+      js-yaml: 4.1.0
+      kleur: 4.1.5
+      magic-string: 0.30.5
+      mdast-util-to-hast: 13.0.2
+      mime: 3.0.0
+      ora: 7.0.1
+      p-limit: 5.0.0
+      p-queue: 8.0.1
+      path-to-regexp: 6.2.1
+      preferred-pm: 3.1.2
+      probe-image-size: 7.2.3
+      prompts: 2.4.2
+      rehype: 13.0.1
+      resolve: 1.22.8
+      semver: 7.5.4
+      server-destroy: 1.0.1
+      shikiji: 0.9.19
+      string-width: 7.1.0
+      strip-ansi: 7.1.0
+      tsconfck: 3.0.1(typescript@5.3.3)
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+      vite: 5.0.12(@types/node@18.19.10)
+      vitefu: 0.2.5(vite@5.0.12)
+      which-pm: 2.1.1
+      yargs-parser: 21.1.1
+      zod: 3.22.4
+    optionalDependencies:
+      sharp: 0.32.6
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - typescript
+    dev: false
+
   /astrojs-compiler-sync@0.3.5(@astrojs/compiler@2.5.0):
     resolution: {integrity: sha512-y420rhIIJ2HHDkYeqKArBHSdJNIIGMztLH90KGIX3zjcJyt/cr9Z2wYA8CP5J1w6KE7xqMh0DAkhfjhNDpQb2Q==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2941,7 +3132,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.3
-    dev: false
 
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -3083,6 +3273,13 @@ packages:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
     dev: false
 
+  /doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
   /doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -3128,6 +3325,14 @@ packages:
     dev: false
     optional: true
 
+  /enhanced-resolve@5.15.0:
+    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+    dev: true
+
   /enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -3144,7 +3349,6 @@ packages:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
       is-arrayish: 0.2.1
-    dev: true
 
   /es-abstract@1.22.3:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
@@ -3286,6 +3490,69 @@ packages:
       eslint: 8.56.0
     dev: true
 
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0):
+    resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+    dependencies:
+      debug: 4.3.4
+      enhanced-resolve: 5.15.0
+      eslint: 8.56.0
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      fast-glob: 3.3.2
+      get-tsconfig: 4.7.2
+      is-core-module: 2.13.1
+      is-glob: 4.0.3
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-node
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@5.3.3)
+      debug: 3.2.7
+      eslint: 8.56.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-astro@0.31.3(eslint@8.56.0):
     resolution: {integrity: sha512-dxNT4cusvLiWFT0ebTd7HP9GixZbua7QYARD1ilqhJEANCSJA7RIas57vnD1PHNDCdYyTit7JU4NDPLWkcG2HA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3304,6 +3571,41 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@5.3.3)
+      array-includes: 3.1.7
+      array.prototype.findlastindex: 1.2.3
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.56.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      hasown: 2.0.0
+      is-core-module: 2.13.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.7
+      object.groupby: 1.0.1
+      object.values: 1.1.7
+      semver: 6.3.1
+      tsconfig-paths: 3.15.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
   /eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3445,6 +3747,21 @@ packages:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
     dev: false
 
+  /execa@7.2.0:
+    resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
+    engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 4.3.1
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.2.0
+      onetime: 6.0.0
+      signal-exit: 3.0.7
+      strip-final-newline: 3.0.0
+    dev: false
+
   /execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -3607,6 +3924,15 @@ packages:
     dev: false
     optional: true
 
+  /fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+    dev: false
+
   /fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -3680,6 +4006,11 @@ packages:
       hasown: 2.0.0
     dev: true
 
+  /get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: false
+
   /get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
@@ -3692,6 +4023,12 @@ packages:
       get-intrinsic: 1.2.2
     dev: true
 
+  /get-tsconfig@4.7.2:
+    resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
   /github-from-package@0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
     requiresBuild: true
@@ -3759,7 +4096,6 @@ packages:
 
   /globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
-    dev: false
 
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
@@ -4083,7 +4419,6 @@ packages:
 
   /hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
-    dev: true
 
   /html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
@@ -4105,6 +4440,11 @@ packages:
     resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
     dev: true
 
+  /human-signals@4.3.1:
+    resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
+    engines: {node: '>=14.18.0'}
+    dev: false
+
   /human-signals@5.0.0:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
@@ -4126,6 +4466,7 @@ packages:
 
   /immutable@4.3.4:
     resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+    dev: false
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -4203,7 +4544,6 @@ packages:
 
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true
 
   /is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
@@ -4443,7 +4783,6 @@ packages:
 
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: true
 
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@@ -4453,6 +4792,13 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -4472,6 +4818,14 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
+  /jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: false
+
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
@@ -4501,7 +4855,6 @@ packages:
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /load-yaml-file@0.2.0:
     resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
@@ -5247,8 +5600,6 @@ packages:
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     requiresBuild: true
-    dev: false
-    optional: true
 
   /mixme@0.5.10:
     resolution: {integrity: sha512-5H76ANWinB1H3twpJ6JY8uvAtpmFvHNArpilJAjXRKXSDDLPIMoZArw5SH0q9z+lLs8IrMw7Q2VWpWimFKFT1Q==}
@@ -5279,7 +5630,6 @@ packages:
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: false
 
   /muggle-string@0.3.1:
     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
@@ -5355,7 +5705,6 @@ packages:
       resolve: 1.22.8
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
-    dev: true
 
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -5396,6 +5745,33 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /object.fromentries@2.0.7:
+    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /object.groupby@1.0.1:
+    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
+    dev: true
+
+  /object.values@1.1.7:
+    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -5548,7 +5924,6 @@ packages:
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
-    dev: true
 
   /parse-latin@5.0.1:
     resolution: {integrity: sha512-b/K8ExXaWC9t34kKeDV8kGXBkXZ1HCSAZRYE7HR14eA1GlXX5L8iWhs8USJNhQU9q5ci413jCKF0gOyovvyRBg==}
@@ -5821,7 +6196,6 @@ packages:
       normalize-package-data: 2.5.0
       parse-json: 5.2.0
       type-fest: 0.6.0
-    dev: true
 
   /read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
@@ -6002,6 +6376,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -6133,6 +6511,7 @@ packages:
       chokidar: 3.5.3
       immutable: 4.3.4
       source-map-js: 1.0.2
+    dev: false
 
   /sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
@@ -6149,12 +6528,10 @@ packages:
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
-    dev: true
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
-    dev: false
 
   /semver@7.5.4:
     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
@@ -6375,22 +6752,18 @@ packages:
     dependencies:
       spdx-expression-parse: 3.0.1
       spdx-license-ids: 3.0.16
-    dev: true
 
   /spdx-exceptions@2.3.0:
     resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
-    dev: true
 
   /spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
       spdx-exceptions: 2.3.0
       spdx-license-ids: 3.0.16
-    dev: true
 
   /spdx-license-ids@3.0.16:
     resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
-    dev: true
 
   /sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
@@ -6603,6 +6976,11 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tar-fs@2.1.1:
     resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
     requiresBuild: true
@@ -6725,7 +7103,15 @@ packages:
         optional: true
     dependencies:
       typescript: 5.3.3
-    dev: false
+
+  /tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
@@ -6777,7 +7163,6 @@ packages:
   /type-fest@0.6.0:
     resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
     engines: {node: '>=8'}
-    dev: true
 
   /type-fest@0.8.1:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
@@ -6989,6 +7374,11 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: false
+
   /update-browserslist-db@1.0.13(browserslist@4.22.2):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -7021,7 +7411,6 @@ packages:
     dependencies:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
-    dev: true
 
   /vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
@@ -7068,6 +7457,27 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
+  /vite-node@1.2.1(@types/node@18.19.10):
+    resolution: {integrity: sha512-fNzHmQUSOY+y30naohBvSW7pPn/xn3Ib/uqm+5wAJQJiqQsU0NBR78XdRJb04l4bOFKjpTWld0XAfkKlrDbySg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.0.12(@types/node@18.19.10)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vite-node@1.2.1(@types/node@20.11.6):
     resolution: {integrity: sha512-fNzHmQUSOY+y30naohBvSW7pPn/xn3Ib/uqm+5wAJQJiqQsU0NBR78XdRJb04l4bOFKjpTWld0XAfkKlrDbySg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -7104,7 +7514,41 @@ packages:
     transitivePeerDependencies:
       - supports-color
       - typescript
-    dev: false
+
+  /vite@5.0.12(@types/node@18.19.10):
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.19.10
+      esbuild: 0.19.12
+      postcss: 8.4.33
+      rollup: 4.9.6
+    optionalDependencies:
+      fsevents: 2.3.3
 
   /vite@5.0.12(@types/node@20.11.6):
     resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
@@ -7185,7 +7629,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.0.12(sass@1.70.0)
+      vite: 5.0.12(@types/node@18.19.10)
     dev: false
 
   /vitest-fetch-mock@0.2.2(vitest@1.2.1):
@@ -7195,11 +7639,68 @@ packages:
       vitest: '>=0.16.0'
     dependencies:
       cross-fetch: 3.1.8
-      vitest: 1.2.1(@types/node@20.11.6)
+      vitest: 1.2.1(@types/node@18.19.10)
     transitivePeerDependencies:
       - encoding
     dev: true
 
+  /vitest@1.2.1(@types/node@18.19.10):
+    resolution: {integrity: sha512-TRph8N8rnSDa5M2wKWJCMnztCZS9cDcgVTQ6tsTFTG/odHJ4l5yNVqvbeDJYJRZ6is3uxaEpFs8LL6QM+YFSdA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': ^1.0.0
+      '@vitest/ui': ^1.0.0
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/node': 18.19.10
+      '@vitest/expect': 1.2.1
+      '@vitest/runner': 1.2.1
+      '@vitest/snapshot': 1.2.1
+      '@vitest/spy': 1.2.1
+      '@vitest/utils': 1.2.1
+      acorn-walk: 8.3.2
+      cac: 6.7.14
+      chai: 4.4.1
+      debug: 4.3.4
+      execa: 8.0.1
+      local-pkg: 0.5.0
+      magic-string: 0.30.5
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 1.3.0
+      tinybench: 2.6.0
+      tinypool: 0.8.2
+      vite: 5.0.12(@types/node@18.19.10)
+      vite-node: 1.2.1(@types/node@18.19.10)
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vitest@1.2.1(@types/node@20.11.6):
     resolution: {integrity: sha512-TRph8N8rnSDa5M2wKWJCMnztCZS9cDcgVTQ6tsTFTG/odHJ4l5yNVqvbeDJYJRZ6is3uxaEpFs8LL6QM+YFSdA==}
     engines: {node: ^18.0.0 || >=20.0.0}