Initial commit from Astro

.astro/types.d.ts

@@ -0,0 +1,187 @@
+declare module 'astro:content' {
+	interface Render {
+		'.md': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	export { z } from 'astro/zod';
+
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	// This needs to be in sync with ImageMetadata
+	export type ImageFunction = () => import('astro/zod').ZodObject<{
+		src: import('astro/zod').ZodString;
+		width: import('astro/zod').ZodNumber;
+		height: import('astro/zod').ZodNumber;
+		format: import('astro/zod').ZodUnion<
+			[
+				import('astro/zod').ZodLiteral<'png'>,
+				import('astro/zod').ZodLiteral<'jpg'>,
+				import('astro/zod').ZodLiteral<'jpeg'>,
+				import('astro/zod').ZodLiteral<'tiff'>,
+				import('astro/zod').ZodLiteral<'webp'>,
+				import('astro/zod').ZodLiteral<'gif'>,
+				import('astro/zod').ZodLiteral<'svg'>,
+				import('astro/zod').ZodLiteral<'avif'>,
+			]
+		>;
+	}>;
+
+	type BaseSchemaWithoutEffects =
+		| import('astro/zod').AnyZodObject
+		| import('astro/zod').ZodUnion<[BaseSchemaWithoutEffects, ...BaseSchemaWithoutEffects[]]>
+		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
+		| import('astro/zod').ZodIntersection<BaseSchemaWithoutEffects, BaseSchemaWithoutEffects>;
+
+	type BaseSchema =
+		| BaseSchemaWithoutEffects
+		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
+
+	export type SchemaContext = { image: ImageFunction };
+
+	type DataCollectionConfig<S extends BaseSchema> = {
+		type: 'data';
+		schema?: S | ((context: SchemaContext) => S);
+	};
+
+	type ContentCollectionConfig<S extends BaseSchema> = {
+		type?: 'content';
+		schema?: S | ((context: SchemaContext) => S);
+	};
+
+	type CollectionConfig<S> = ContentCollectionConfig<S> | DataCollectionConfig<S>;
+
+	export function defineCollection<S extends BaseSchema>(
+		input: CollectionConfig<S>
+	): CollectionConfig<S>;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[]
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[]
+	): Promise<CollectionEntry<C>[]>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+			  }
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+			  }
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		
+	};
+
+	type DataEntryMap = {
+		
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	type ContentConfig = never;
+}

.gitattributes

@@ -0,0 +1 @@
+*xsl linguist-vendored

.gitignore

@@ -0,0 +1,19 @@
+# build output
+dist/
+
+# 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

.prettierignore

@@ -0,0 +1 @@
+node_modules/**

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"semi": true,
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 nicdun
+
+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.

README.md

@@ -0,0 +1,74 @@
+# Astro & Tailwind CSS Starter Kit
+
+## 🔥 Features
+
+Explore the Astro.js Personal Blog Template – a sleek and feature-rich platform for your personal blog:
+
+- **Astro.js Powered**: Dynamic and efficient JavaScript-driven experience.
+- **Tailwind CSS Integration**: Ensures a stylish and responsive design.
+- **RSS Feed Support**: Keeps your audience updated effortlessly.
+- **Markdown Compatibility**: Streamlines content creation with easy formatting.
+- **Syntax Highlighting**: Enhances code snippet readability for tech enthusiasts.
+- **SEO-Optimized**: Includes a sitemap for optimal search engine visibility.
+- **Vercel Deployment:** preconfigured Vercel deployment & web analytics.
+- **Framework of your choice:** 100% Astro.js only template - choose your JS Framework (react preinstalled)
+
+Unlock a seamless blend of aesthetics and functionality to share your unique voice with the world.
+
+## 💻 Showcase
+
+![showcase](/public/showcase.png 'AstroPress - Tech Blog Template')
+
+## 📦 Template Integrations
+
+- @astrojs/tailwind - https://docs.astro.build/en/guides/integrations-guide/tailwind/
+- @astrojs/react - https://docs.astro.build/en/guides/integrations-guide/react/
+- @astrojs/sitemap - https://docs.astro.build/en/guides/integrations-guide/sitemap/
+- @astrojs/rss - https://docs.astro.build/en/guides/rss/
+- @vercel/analytics - https://vercel.com/docs/analytics/
+- rehype-pretty-code - https://rehype-pretty-code.netlify.app/
+
+## 🏛️ Template Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🚀 Getting started
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `npm install`          | Installs dependencies                            |
+| `npm run dev`          | Starts local dev server at `localhost:3000`      |
+| `npm run build`        | Build your production site to `./dist/`          |
+| `npm run preview`      | Preview your build locally, before deploying     |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro --help` | Get help using the Astro CLI                     |
+
+
+## ❤️ Helping out
+
+If you find that something isn't working right then I'm always happy to hear it to improve this starter! You can contribute in many ways and forms. Let me know by either:
+
+1. [Filing an issue](https://github.com/nicdun/astro-tech-blog/issues)
+2. [Submitting a pull request](https://github.com/nicdun/astro-tech-blog/pulls)
+3. [Starting a discussion](https://github.com/nicdun/astro-tech-blog/discussions)
+4. [Buying me a coffee!](https://www.buymeacoffee.com/nicdun)
+
+## ☕ Thank you!
+A big thank you to the creators of the awesome Astro static site generator and to all using this starter to make the web a bit more accessible for all people around the world :)

astro.config.mjs

@@ -0,0 +1,47 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import { remarkReadingTime } from './src/utils/readingTime';
+import rehypePrettyCode from 'rehype-pretty-code';
+import vercelStatic from '@astrojs/vercel/static';
+import react from '@astrojs/react';
+import sitemap from "@astrojs/sitemap";
+const options = {
+  // Specify the theme to use or a custom theme json, in our case
+  // it will be a moonlight-II theme from
+  // https://github.com/atomiks/moonlight-vscode-theme/blob/master/src/moonlight-ii.json
+  // Callbacks to customize the output of the nodes
+  //theme: json,
+  onVisitLine(node) {
+    // Prevent lines from collapsing in `display: grid` mode, and
+    // allow empty lines to be copy/pasted
+    if (node.children.length === 0) {
+      node.children = [{
+        type: 'text',
+        value: ' '
+      }];
+    }
+  },
+  onVisitHighlightedLine(node) {
+    // Adding a class to the highlighted line
+    node.properties.className = ['highlighted'];
+  }
+};
+
+
+// https://astro.build/config
+export default defineConfig({
+	site: 'https://astro-tech-blog-ten.vercel.app/',
+	markdown: {
+		syntaxHighlight: false,
+		// Disable syntax built-in syntax hightlighting from astro
+		rehypePlugins: [[rehypePrettyCode, options]],
+		remarkPlugins: [remarkReadingTime]
+	},
+	integrations: [tailwind(), react(), sitemap()],
+	output: 'static',
+	adapter: vercelStatic({
+		webAnalytics: {
+			enabled: true
+		}
+	})
+});

package.json

@@ -0,0 +1,38 @@
+{
+	"name": "website",
+	"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.9.0",
+		"@astrojs/react": "^3.0.8",
+		"@astrojs/rss": "^4.0.1",
+		"@astrojs/sitemap": "^3.0.4",
+		"@astrojs/tailwind": "^5.0.4",
+		"@astrojs/vercel": "^7.0.0",
+		"@types/react": "^18.2.45",
+		"@types/react-dom": "^18.2.18",
+		"@vercel/analytics": "^1.2.2",
+		"astro": "^4.0.7",
+		"canvas-confetti": "^1.9.2",
+		"mdast-util-to-string": "^4.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"reading-time": "^1.5.0",
+		"rehype-pretty-code": "^0.14.0",
+		"tailwindcss": "^3.4.0",
+		"typescript": "^5.3.3"
+	},
+	"devDependencies": {
+		"@tailwindcss/typography": "^0.5.10",
+		"prettier": "^3.1.1",
+		"prettier-plugin-astro": "^0.14.0",
+		"prettier-plugin-tailwindcss": "^0.6.0"
+	}
+}

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>

public/robots.txt

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

renovate.json

@@ -0,0 +1,23 @@
+{
+	"extends": ["config:base", ":dependencyDashboard", ":prHourlyLimitNone"],
+	"schedule": ["after 6pm"],
+	"packageRules": [
+		{
+			"matchUpdateTypes": ["minor", "patch"],
+			"schedule": ["after 6pm"],
+			"automerge": true,
+			"platformAutomerge": true,
+			"labels": ["minor", "patch"],
+			"requiredStatusChecks": null
+		},
+		{
+			"matchPackageNames": ["astro"],
+			"matchPackagePatterns": ["^@astrojs/"],
+			"matchUpdateTypes": ["major"],
+			"schedule": ["after 6pm"],
+			"labels": ["astro", "major"],
+			"automerge": false,
+			"requiredStatusChecks": null
+		}
+	]
+}

src/components/Card.astro

@@ -0,0 +1,40 @@
+---
+import { formatDate } from '@/utils/data.util';
+import Tags from './Tags.astro';
+interface Props {
+	post: any;
+}
+
+const { post } = Astro.props;
+---
+
+<a href={post.url}>
+	<div
+		class="h-full rounded-2xl bg-stone-200/50 from-orange-900 via-amber-700 to-white p-[1px] text-sm shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)] hover:bg-gradient-to-r dark:bg-gray-900"
+	>
+		<div
+			class="flex h-full w-full
+		flex-col
+    rounded-[1rem]
+		bg-stone-300
+		p-4
+		text-gray-900
+    opacity-90
+    dark:bg-stone-800
+		dark:text-white"
+		>
+			<div class="flex-auto">
+				<div class="flex justify-between pb-4 text-xs">
+					<p>{formatDate(post.frontmatter.pubDate)}</p>
+					<p>{post.frontmatter.minutesRead}</p>
+				</div>
+
+				<p class="pb-4 text-lg font-bold">{post.frontmatter.title}</p>
+
+				<Tags tags={post.frontmatter.tags} />
+				<p class="line-clamp-6 pt-4">{post.frontmatter.excerpt}</p>
+			</div>
+			<p class="pt-4 underline">read more →</p>
+		</div>
+	</div>
+</a>

src/components/Footer.astro

@@ -0,0 +1,12 @@
+---
+import Section from './Section.astro';
+
+const year = new Date();
+---
+
+<Section>
+	<footer class="text-center">
+		© {year.getFullYear()} - <a class="underline hover:text-orange-600" href="/imprint/">Imprint</a> - made with
+		♥️ by <a class="underline hover:text-orange-600" href="http://nicdun.dev" target="_blank">nicdun.dev</a> 
+	</footer>
+</Section>

src/components/Heading.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<p class="text-bold pt-6 text-center text-4xl">{title}</p>

src/components/Hero.astro

@@ -0,0 +1,56 @@
+---
+import Section from './Section.astro';
+import Social from './Social.astro';
+
+const site = Astro.site;
+---
+
+<Section>
+	<br />
+	<p class="pb-2 pt-6 text-4xl font-bold">Hello, I'm your new Astro.js Blog Template 🚀</p>
+	<div class="text-sm">
+		<p class="py-2">
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.Lorem ipsum dolor sit amet <span class="font-black text-orange-600">Angular</span> adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.Lorem ipsum dolor sit amet consectetur <span class="font-black text-orange-600">Angular</span> elit. Tenetur vero esse non molestias eos <span class="font-black text-orange-600">Angular</span>, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+		</p>
+		<p class="py-2">
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.Lorem ipsum dolor sit amet <span class="font-black text-orange-600">Angular</span> adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+		</p>
+		<p class="py-2">
+			Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.Lorem ipsum dolor sit amet consectetur <span class="font-black text-orange-600">Angular</span> elit. Tenetur vero esse non molestias eos <span class="font-black text-orange-600">Angular</span>, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+		</p>
+	</div>
+	<div class="flex">
+		<Social href="https://github.com/#">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4"
+				fill="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+				></path>
+			</svg>
+		</Social>
+		<Social href="https://www.linkedin.com/#">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4"
+				fill="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"
+				></path>
+			</svg>
+		</Social>
+		<Social href={`${site}rss.xml`}>
+			<svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
+				><path
+					fill="currentColor"
+					d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"
+				></path></svg
+			>
+		</Social>
+	</div>
+</Section>

src/components/LatestPosts.astro

@@ -0,0 +1,27 @@
+---
+import { MarkdownInstance } from 'astro/dist/@types/astro';
+import Section from './Section.astro';
+import Card from './Card.astro';
+
+interface Props {
+	posts: MarkdownInstance<any>[];
+}
+
+const { posts } = Astro.props;
+---
+
+<Section>
+	<div class="flex justify-between pb-4">
+		<p class="text-xl font-bold">Latest Posts</p>
+		<a href="/posts" class="underline hover:text-orange-600">all posts →</a>
+	</div>
+	<div class="flex flex-col pb-4 md:flex-row">
+		{
+			posts.map((post: any) => (
+				<div class="mb-4 basis-1 last:mr-0 md:mr-4 md:basis-1/3">
+					<Card post={post} />
+				</div>
+			))
+		}
+	</div>
+</Section>

src/components/Navbar.astro

@@ -0,0 +1,73 @@
+---
+import Section from './Section.astro';
+---
+
+<Section>
+	<div class="flex justify-between">
+		<div class="text-3xl font-bold">
+			<a href="/"
+				>💻 <span class="pr-2 text-2xl text-gray-500">{'<'}</span>astro<span
+					class="text-orange-600">.</span
+				>js<span class="pl-2 text-2xl text-gray-500">{'/>'}</span></a
+			>
+		</div>
+		<div class="flex items-center">
+			<nav>
+				<ul class="hidden flex-row sm:flex">
+					<li><a href="/tags" class="mr-3 hover:text-orange-600">TAGS</a></li>
+					<li><a href="/" class="hover:text-orange-600">BLOG</a></li>
+				</ul>
+			</nav>
+			<div class="ml-3 flex flex-col justify-center">
+				<input type="checkbox" id="light-switch" class="light-switch sr-only" />
+				<label class="tada relative cursor-pointer p-2" for="light-switch">
+					<svg class="dark:hidden" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+						<path
+							class="fill-stone-800"
+							d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z"
+						></path>
+						<path class="fill-gray-900" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z"
+						></path>
+					</svg>
+					<svg class="hidden dark:block" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+						<path
+							class="fill-slate-400"
+							d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z"
+						></path>
+						<path
+							class="fill-slate-500"
+							d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z"
+						></path>
+					</svg>
+					<span class="sr-only">Switch to light / dark version</span>
+				</label>
+			</div>
+		</div>
+	</div>
+</Section>
+
+<script>
+	const lightSwitches = document.querySelectorAll('.light-switch');
+	if (lightSwitches.length > 0) {
+		lightSwitches.forEach((lightSwitch: any, i) => {
+			if (localStorage.getItem('dark-mode') === 'true') {
+				lightSwitch.checked = true;
+			}
+			lightSwitch.addEventListener('click', () => {
+				const { checked } = lightSwitch;
+				lightSwitches.forEach((el: any, n) => {
+					if (n !== i) {
+						el.checked = checked;
+					}
+				});
+				if (lightSwitch.checked) {
+					document.documentElement.classList.add('dark');
+					localStorage.setItem('dark-mode', 'true');
+				} else {
+					document.documentElement.classList.remove('dark');
+					localStorage.setItem('dark-mode', 'false');
+				}
+			});
+		});
+	}
+</script>

src/components/PostContent.astro

@@ -0,0 +1,81 @@
+---
+import Section from './Section.astro';
+---
+
+<Section>
+	<div
+		class="content prose mt-8 max-w-none text-base leading-8 text-black dark:prose-invert prose-code:rounded-lg prose-code:bg-stone-800 prose-code:p-1 prose-code:text-orange-600 prose-img:rounded-lg prose-img:shadow-xl dark:text-white prose-img:dark:shadow-stone-800"
+	>
+		<slot />
+	</div>
+</Section>
+
+<style is:global>
+	.content pre {
+		background-color: #cdc8ff0d;
+		border-radius: 0.5rem;
+		font-size: 0.9rem;
+	}
+
+	.content code {
+		overflow-x: auto;
+	}
+
+	.content [data-rehype-pretty-code-figure] code {
+		padding: 0 !important;
+	}
+	.content pre > code span[data-line] {
+		border-left: 0.5rem solid transparent;
+		padding: 0 0.5rem;
+	}
+
+	.content pre > code span:first-of-type {
+		border-top-left-radius: 0.5rem;
+		border-top-right-radius: 0.5rem;
+		padding-top: 0.5rem;
+	}
+	.content pre > code span:last-of-type {
+		border-bottom-left-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+		padding-bottom: 0.5rem;
+	}
+
+	.content pre > code .highlighted {
+		border-left: 0.5rem solid rgba(209, 213, 219, 0.6) !important;
+		background-color: rgba(229, 231, 235, 0.05);
+	}
+	/** 
+     *  data-line-numbers will be enabled on markdown  
+     *  with `showLineNumbers` meta string on it
+     */
+	.content pre > code[data-line-numbers] {
+		counter-reset: line;
+	}
+	.content pre > code[data-line-numbers] > span[data-line]::before {
+		counter-increment: line;
+		content: counter(line);
+		display: inline-block;
+		margin-right: 2rem;
+		width: 1rem;
+		text-align: left;
+		color: #7ca2dfad;
+	}
+	.content pre > code > span[data-line]::before {
+		content: '';
+		display: inline-block;
+		width: 1rem;
+		text-align: right;
+	}
+
+	/** 
+     *  we'll need to adjust the space required 
+     *  the number depending on the number of digits 
+     */
+	.content pre > code[data-line-numbers-max-digits='2'] > span[data-line]::before {
+		width: 2rem;
+	}
+
+	.content code[data-line-numbers-max-digits='3'] > span[data-line]::before {
+		width: 3rem;
+	}
+</style>

src/components/PostHeader.astro

@@ -0,0 +1,35 @@
+---
+import { formatDate } from '@/utils/data.util';
+import Section from './Section.astro';
+import Tags from './Tags.astro';
+
+interface Props {
+	title: string;
+	author: string;
+	tags: string[];
+	minutesRead: string;
+	pubDate: string;
+	img: {
+		src: string;
+		alt: string;
+	};
+}
+
+const { title, pubDate, tags, minutesRead, img } = Astro.props;
+
+const formattedDate = formatDate(pubDate);
+---
+
+<Section>
+	<div class="flex flex-col items-center">
+		<p class="px-14 pb-4 pt-6 text-center text-4xl font-bold">{title}</p>
+		<div class="pb-4">
+			<Tags tags={tags} withHref={true} />
+		</div>
+		<div class="text-sm">
+			<span>{formattedDate}</span> - <span>{minutesRead}</span>
+		</div>
+
+		{img.src ? <img src={img.src} alt={img.alt} /> : null}
+	</div>
+</Section>

src/components/Section.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="mx-auto w-full max-w-screen-lg px-4 py-6">
+	<slot />
+</div>

src/components/Social.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+	href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<div
+	class="mr-3 h-10 w-24 rounded-xl bg-stone-200/50 from-orange-900 via-amber-700 to-white p-[1px] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)] hover:bg-gradient-to-r"
+>
+	<a
+		href={href}
+		target="_blank"
+		class="flex h-full w-full items-center justify-center rounded-[0.7rem] bg-stone-300
+		p-4
+		text-gray-900
+    opacity-90
+    dark:bg-stone-800
+		dark:text-white"
+	>
+		<slot />
+	</a>
+</div>

src/components/Tags.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+	tags: string[];
+	withHref?: boolean;
+}
+
+const { tags, withHref } = Astro.props;
+---
+
+<div class="flex flex-wrap">
+	{
+		tags.map((tag: string) => {
+			const element = (
+				<span class="mb-2 mr-2 rounded-xl bg-stone-600 px-3 py-1 text-xs font-bold uppercase text-white hover:bg-stone-500">
+					#{tag}
+				</span>
+			);
+			return withHref ? <a href={`/tags/${tag}`}>{element}</a> : element;
+		})
+	}
+</div>

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -0,0 +1,58 @@
+---
+import Footer from '@/components/Footer.astro';
+import Navbar from '@/components/Navbar.astro';
+import { AppConfig } from '@/utils/AppConfig';
+
+export interface Props {
+	head: {
+		title: string;
+		description: string;
+	};
+}
+
+const {
+	head: { title, description }
+} = Astro.props as Props;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>{title}</title>
+		<meta name="description" content={description} />
+		<meta name="author" content={AppConfig.author} />
+
+    <link rel="sitemap" href="/sitemap-index.xml" />
+		<link rel="alternate" type="application/rss+xml" href="/rss.xml" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>">
+
+		<script>
+			if (
+				localStorage.getItem('dark-mode') === 'true' ||
+				(!('dark-mode' in localStorage) &&
+					window.matchMedia('(prefers-color-scheme: dark)').matches)
+			) {
+				localStorage.setItem('dark-mode', 'true');
+				document.querySelector('html')?.classList.add('dark');
+			} else {
+				localStorage.setItem('dark-mode', 'false');
+				document.querySelector('html')?.classList.remove('dark');
+			}
+		</script>
+	</head>
+	<body
+		class="flex min-h-screen flex-col bg-stone-100 font-mono text-gray-950 dark:bg-stone-900 dark:text-white"
+	>
+		<Navbar />
+		<div class="flex-1">
+			<slot />
+		</div>
+
+		<Footer />
+	</body>
+</html>
+<style is:global>
+	:root {
+	}
+</style>

src/layouts/post.astro

@@ -0,0 +1,25 @@
+---
+import { AppConfig } from '@/utils/AppConfig';
+import Base from '@/layouts/Base.astro';
+import PostHeader from '@/components/PostHeader.astro';
+import PostContent from '@/components/PostContent.astro';
+
+const { description } = AppConfig;
+
+const { frontmatter } = Astro.props;
+---
+
+<Base head={{ title: frontmatter.title, description }}>
+	<div class="mx-auto w-full max-w-screen-md">
+		<PostHeader
+			title={frontmatter.title}
+			author={frontmatter.author}
+			tags={frontmatter.tags}
+			minutesRead={frontmatter.minutesRead}
+			pubDate={frontmatter.pubDate}
+			img={{ src: frontmatter.image.src, alt: frontmatter.image.alt }}
+		/>
+		<PostContent><slot /></PostContent>
+	</div>
+</Base>
+

src/pages/imprint.astro

@@ -0,0 +1,81 @@
+---
+import Section from '@/components/Section.astro';
+import Base from '@/layouts/Base.astro';
+import { AppConfig } from '@/utils/AppConfig';
+
+const { title } = AppConfig;
+const { description } = AppConfig;
+---
+
+<Base head={{ title, description }}>
+	<Section>
+		<div class="text-sm">
+			<p class="pt-6 text-4xl">Imprint</p>
+
+			<p class="pb-4 pt-10 text-lg font-bold">Information according to § 5 TMG:</p>
+			<p>Niolas Dunke</p>
+			<p>Neuburgerstraße 25c</p>
+			<p>76287 Rheinstetten</p>
+			<p>Germany</p>
+
+			<p class="pb-4 pt-10 text-lg font-bold">Contact</p>
+			<p>E-Mail: <a href="mailto:nicolas.dunke@nd-solution.de">nicolas.dunke@nd-solution.de</a></p>
+			<p>
+				Internet-Adress: <a class="underline" href="https://astro-tech-blog-ten.vercel.app/"
+					>https://astro-tech-blog-ten.vercel.app/</a
+				>
+			</p>
+
+			<p class="pb-4 pt-10 text-lg font-bold">Editorially Responsible</p>
+			<p>See Information according to § 5 TMG.</p>
+
+			<p class="pb-4 pt-10 text-lg font-bold">Graphics and images</p>
+			<p>Unless specified differently, Nicolas Dunke is the creator of all graphics and images.</p>
+
+			<p class="pt-10 text-lg font-bold">Disclaimer</p>
+			<p class="pb-4 pt-10 text-base font-bold">Liability for content</p>
+
+			<p>
+				All content on our website has been created with the utmost care and to the best of our
+				knowledge. However, we cannot guarantee the accuracy, completeness, and timeliness of the
+				content. As a service provider, we are responsible for our own content on these pages in
+				accordance with § 7 (1) TMG. According to §§ 8 to 10 TMG, we as service providers are not
+				obligated to monitor transmitted or stored third-party information or to investigate
+				circumstances that indicate illegal activity. Obligations to remove or block the use of
+				information under general law remain unaffected by this.
+			</p>
+			<p>
+				However, liability in this regard is only possible from the time of knowledge of a specific
+				legal violation. Upon becoming aware of such legal violations, we will remove this content
+				immediately.
+			</p>
+
+			<p class="pb-4 pt-10 text-base font-bold">Limitation of liability for external links</p>
+			<p>
+				Our website contains links to external websites of third parties. We have no influence on
+				the content of these directly or indirectly linked websites. Therefore, we cannot assume any
+				liability for the "external links." The respective provider or operator (author) of the
+				pages is responsible for the content of the external links.
+			</p>
+			<p>
+				If we become aware of legal violations, the external links will be removed by us
+				immediately.
+			</p>
+
+			<p class="pb-4 pt-10 text-base font-bold">Copyright</p>
+			<p>
+				The content and works published on our website are subject to <a
+					class="underline"
+					href="http://www.gesetze-im-internet.de/bundesrecht/urhg/gesamt.pdf"
+					>German copyright law</a
+				>. The reproduction, processing, distribution, and any kind of exploitation beyond the
+				limits of copyright require the prior written consent of the respective author in
+				intellectual and material terms. Downloads and copies of this page are only permitted for
+				private and non-commercial use. If the content on our website was not created by us, the
+				copyrights of third parties must be observed. Third-party content is identified as such. If
+				you nevertheless become aware of a copyright infringement, please inform us accordingly. If
+				we become aware of legal violations, we will remove such content immediately.
+			</p>
+		</div>
+	</Section>
+</Base>

src/pages/index.astro

@@ -0,0 +1,19 @@
+---
+import { AppConfig } from '@/utils/AppConfig';
+import Base from '@/layouts/Base.astro';
+import Hero from '@/components/Hero.astro';
+import LatestPosts from '@/components/LatestPosts.astro';
+import { sortPostsByDate } from '@/utils/data.util';
+
+const { title } = AppConfig;
+const { description } = AppConfig;
+
+const allPosts = await Astro.glob('./posts/*.md');
+allPosts.sort(sortPostsByDate);
+const latestPosts = allPosts.slice(0, 3);
+---
+
+<Base head={{ title, description }}>
+	<Hero />
+	<LatestPosts posts={latestPosts} />
+</Base>

src/pages/posts/first_blog_post.md

@@ -0,0 +1,163 @@
+---
+layout: ../../layouts/post.astro
+title: "This is the first post of my new Astro blog."
+pubDate: 2023-12-23
+description: "This is the first post of my new Astro blog."
+author: "nicdun"
+excerpt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+image:
+  src:
+  alt:
+tags: ["tag1", "tag2", "tag3"]
+---
+
+This is a paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## Headings
+
+# H1 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## H2 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+### H3 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+#### H4 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+##### H5 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+###### H6 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## Emphasis
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+## Blockquotes
+
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
+
+## Horizontal separator
+
+This is a horizontal separator:
+
+---
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+---
+
+## List types
+
+### Ordered list
+
+1. List item 1
+2. List item 2
+   1. Nested list item A
+   2. Nested list item B
+3. List item 3
+
+### Unordered list
+
+- List item
+- List item
+  - Nested list item
+  - Nested list item
+    - Double nested list item
+    - Double nested list item
+- List item
+
+### Mixed list
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+4. And another item.
+
+## Links
+
+[Inline-style link](https://www.google.com)
+
+[Inline-style link with title](https://www.google.com "Google's Homepage")
+
+[Reference-style link][arbitrary case-insensitive reference text]
+
+[You can use numbers for reference-style link definitions][1]
+
+Or leave it empty and use the [link text itself].
+
+Some text to show that the reference links can follow later.
+
+[arbitrary case-insensitive reference text]: https://www.mozilla.org
+[1]: http://slashdot.org
+[link text itself]: http://www.reddit.com
+
+## Images
+
+Images included in _\_posts_ folder are lazy loaded.
+
+Inline-style:
+![alt text](/src/images/random.jpeg "Logo Title Text 1")
+
+## Table
+
+| Tables        |      Are      | Cool |
+| ------------- | :-----------: | ---: |
+| col 3 is      | right-aligned | 1600 |
+| col 2 is      |   centered    |   12 |
+| zebra stripes |   are neat    |    1 |
+
+| Markdown | Less      | Pretty     |
+| -------- | --------- | ---------- |
+| _Still_  | `renders` | **nicely** |
+| 1        | 2         | 3          |
+
+## Syntax highlight
+
+```ts title="astro.config.mjs" showLineNumbers {1-2,5-6}
+import { defineConfig } from "astro/config";
+import vercelStatic from "@astrojs/vercel/static";
+
+export default defineConfig({
+  output: "static",
+  adapter: vercelStatic({
+    webAnalytics: {
+      enabled: true,
+    },
+  }),
+});
+```
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+```python showLineNumbers
+s = "Python syntax highlighting"
+print s
+```

src/pages/posts/index.astro

@@ -0,0 +1,27 @@
+---
+import { AppConfig } from '@/utils/AppConfig';
+import Base from '@/layouts/Base.astro';
+import Section from '@/components/Section.astro';
+import Card from '@/components/Card.astro';
+import Heading from '@/components/Heading.astro';
+import { sortPostsByDate } from '@/utils/data.util';
+
+const { title } = AppConfig;
+const { description } = AppConfig;
+
+const allPosts = await Astro.glob('./*.md');
+allPosts.sort(sortPostsByDate);
+---
+
+<Base head={{ title, description }}>
+	<Section><Heading title="Posts" /></Section>
+	<Section>
+		{
+			allPosts.map((post: any) => (
+				<div class="mb-4 basis-1 last:mb-0">
+					<Card post={post} />
+				</div>
+			))
+		}
+	</Section>
+</Base>

src/pages/posts/second_blog_post.md

@@ -0,0 +1,163 @@
+---
+layout: ../../layouts/post.astro
+title: "This is the second post of my new Astro blog."
+pubDate: 2023-12-24
+description: "This is the second post of my new Astro blog."
+author: "nicdun"
+excerpt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+image:
+  src:
+  alt:
+tags: ["tag1", "tag2", "tag3"]
+---
+
+This is a paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## Headings
+
+# H1 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## H2 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+### H3 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+#### H4 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+##### H5 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+###### H6 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## Emphasis
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+## Blockquotes
+
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
+
+## Horizontal separator
+
+This is a horizontal separator:
+
+---
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+---
+
+## List types
+
+### Ordered list
+
+1. List item 1
+2. List item 2
+   1. Nested list item A
+   2. Nested list item B
+3. List item 3
+
+### Unordered list
+
+- List item
+- List item
+  - Nested list item
+  - Nested list item
+    - Double nested list item
+    - Double nested list item
+- List item
+
+### Mixed list
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+4. And another item.
+
+## Links
+
+[Inline-style link](https://www.google.com)
+
+[Inline-style link with title](https://www.google.com "Google's Homepage")
+
+[Reference-style link][arbitrary case-insensitive reference text]
+
+[You can use numbers for reference-style link definitions][1]
+
+Or leave it empty and use the [link text itself].
+
+Some text to show that the reference links can follow later.
+
+[arbitrary case-insensitive reference text]: https://www.mozilla.org
+[1]: http://slashdot.org
+[link text itself]: http://www.reddit.com
+
+## Images
+
+Images included in _\_posts_ folder are lazy loaded.
+
+Inline-style:
+![alt text](/src/images/random.jpeg "Logo Title Text 1")
+
+## Table
+
+| Tables        |      Are      | Cool |
+| ------------- | :-----------: | ---: |
+| col 3 is      | right-aligned | 1600 |
+| col 2 is      |   centered    |   12 |
+| zebra stripes |   are neat    |    1 |
+
+| Markdown | Less      | Pretty     |
+| -------- | --------- | ---------- |
+| _Still_  | `renders` | **nicely** |
+| 1        | 2         | 3          |
+
+## Syntax highlight
+
+```ts title="astro.config.mjs" showLineNumbers {1-2,5-6}
+import { defineConfig } from "astro/config";
+import vercelStatic from "@astrojs/vercel/static";
+
+export default defineConfig({
+  output: "static",
+  adapter: vercelStatic({
+    webAnalytics: {
+      enabled: true,
+    },
+  }),
+});
+```
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+```python showLineNumbers
+s = "Python syntax highlighting"
+print s
+```

src/pages/posts/third_blog_post.md

@@ -0,0 +1,163 @@
+---
+layout: ../../layouts/post.astro
+title: "This is the third post of my new Astro blog."
+pubDate: 2023-12-25
+description: "This is the third post of my new Astro blog."
+author: "nicdun"
+excerpt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+image:
+  src:
+  alt:
+tags: ["tag1", "tag2", "tag3"]
+---
+
+This is a paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## Headings
+
+# H1 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## H2 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+### H3 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+#### H4 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+##### H5 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+###### H6 For example
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+## Emphasis
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+## Blockquotes
+
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
+
+## Horizontal separator
+
+This is a horizontal separator:
+
+---
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+---
+
+## List types
+
+### Ordered list
+
+1. List item 1
+2. List item 2
+   1. Nested list item A
+   2. Nested list item B
+3. List item 3
+
+### Unordered list
+
+- List item
+- List item
+  - Nested list item
+  - Nested list item
+    - Double nested list item
+    - Double nested list item
+- List item
+
+### Mixed list
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+4. And another item.
+
+## Links
+
+[Inline-style link](https://www.google.com)
+
+[Inline-style link with title](https://www.google.com "Google's Homepage")
+
+[Reference-style link][arbitrary case-insensitive reference text]
+
+[You can use numbers for reference-style link definitions][1]
+
+Or leave it empty and use the [link text itself].
+
+Some text to show that the reference links can follow later.
+
+[arbitrary case-insensitive reference text]: https://www.mozilla.org
+[1]: http://slashdot.org
+[link text itself]: http://www.reddit.com
+
+## Images
+
+Images included in _\_posts_ folder are lazy loaded.
+
+Inline-style:
+![alt text](/src/images/random.jpeg "Logo Title Text 1")
+
+## Table
+
+| Tables        |      Are      | Cool |
+| ------------- | :-----------: | ---: |
+| col 3 is      | right-aligned | 1600 |
+| col 2 is      |   centered    |   12 |
+| zebra stripes |   are neat    |    1 |
+
+| Markdown | Less      | Pretty     |
+| -------- | --------- | ---------- |
+| _Still_  | `renders` | **nicely** |
+| 1        | 2         | 3          |
+
+## Syntax highlight
+
+```ts title="astro.config.mjs" showLineNumbers {1-2,5-6}
+import { defineConfig } from "astro/config";
+import vercelStatic from "@astrojs/vercel/static";
+
+export default defineConfig({
+  output: "static",
+  adapter: vercelStatic({
+    webAnalytics: {
+      enabled: true,
+    },
+  }),
+});
+```
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.
+
+```python showLineNumbers
+s = "Python syntax highlighting"
+print s
+```

src/pages/rss.xml.js

@@ -0,0 +1,14 @@
+import rss, {pagesGlobToRssItems} from '@astrojs/rss';
+
+export async function GET(context) {
+  return rss({
+    title: 'nicdun.dev - blog',
+    description: 'Crafting the Digital Future with Web Development Wonders',
+    site: context.site,
+    items: await pagesGlobToRssItems(
+      import.meta.glob('./posts/*.{md,mdx}'),
+    ),
+    stylesheet: './rss/styles.xsl',
+    customData: `<language>en-us</language>`,
+  });
+}

src/pages/tags/[tag].astro

@@ -0,0 +1,52 @@
+---
+import Section from '@/components/Section.astro';
+import Card from '@/components/Card.astro';
+import Base from '@/layouts/Base.astro';
+import Heading from '@/components/Heading.astro';
+import { AppConfig } from '@/utils/AppConfig';
+import { MarkdownInstance } from 'astro/dist/@types/astro';
+
+export async function getStaticPaths(): Promise<any> {
+	const allPosts = await Astro.glob('../posts/*.md');
+
+	const allTags: Set<string> = new Set(
+		allPosts.map((post: MarkdownInstance<Record<string, any>>) => post.frontmatter.tags).flat()
+	);
+
+	return [...allTags].map((tag) => ({
+		params: { tag: tag },
+		props: {
+			posts: allPosts.filter((post: MarkdownInstance<Record<string, any>>) =>
+				post.frontmatter.tags.includes(tag)
+			)
+		}
+	}));
+}
+
+interface Props {
+	posts: MarkdownInstance<Record<string, any>>[];
+}
+
+const { tag } = Astro.params;
+const title = AppConfig.title;
+const description = AppConfig.description;
+
+const { posts } = Astro.props;
+---
+
+<Base head={{ title, description }}>
+	<Section>
+		<Heading title={`Posts with #${tag}`} />
+	</Section>
+	<Section>
+		{
+			posts
+				.filter((post: any) => post.frontmatter.tags?.includes(tag))
+				.map((post: any) => (
+					<div class="mb-4 basis-1 last:mb-0">
+						<Card post={post} />
+					</div>
+				))
+		}
+	</Section>
+</Base>

src/pages/tags/index.astro

@@ -0,0 +1,21 @@
+---
+import { AppConfig } from '@/utils/AppConfig';
+import Base from '@/layouts/Base.astro';
+import Section from '@/components/Section.astro';
+import Tags from '@/components/Tags.astro';
+import Heading from '@/components/Heading.astro';
+
+const { title } = AppConfig;
+const { description } = AppConfig;
+
+const allPosts = await Astro.glob('../posts/*.md');
+
+const allTags: Set<string> = new Set(allPosts.map((post) => post.frontmatter.tags).flat());
+---
+
+<Base head={{ title, description }}>
+	<Section><Heading title="Tags" /></Section>
+	<div class="mx-auto w-full max-w-screen-md">
+		<Tags tags={[...allTags]} withHref={true} />
+	</div>
+</Base>

src/utils/AppConfig.ts

@@ -0,0 +1,8 @@
+export const AppConfig = {
+	site_name: 'AstroPress',
+	title: 'AstroPress | Astro and Tailwind CSS',
+	description: 'Boilerplate built with Astro and Tailwind CSS',
+	author: 'Nicolas',
+	locale_region: 'de-en',
+	locale: 'en'
+};

src/utils/data.util.ts

@@ -0,0 +1,24 @@
+import { MarkdownInstance } from "astro";
+
+export const formatDate = (pubDate: string) => {
+  var options: Intl.DateTimeFormatOptions = {
+	weekday: 'short',
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric'
+};
+
+  return new Date(pubDate).toLocaleDateString('en-US', options);
+}
+
+export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
+  const pubDateA = new Date(a.frontmatter.pubDate);
+  const pubDateB = new Date(b.frontmatter.pubDate);
+  if (pubDateA < pubDateB) {
+    return 1;
+  }
+  if(pubDateA > pubDateB) {
+    return -1;
+  }
+  return 0;
+} 

src/utils/readingTime.ts

@@ -0,0 +1,10 @@
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+
+export function remarkReadingTime() {
+	return function (tree: any, { data }: any) {
+		const textOnPage = toString(tree);
+		const readingTime = getReadingTime(textOnPage);
+		data.astro.frontmatter.minutesRead = readingTime.text;
+	};
+}

tailwind.config.mjs

@@ -0,0 +1,28 @@
+
+const disabledCss = {
+	'code::before': false,
+	'code::after': false,
+	'blockquote p:first-of-type::before': false,
+	'blockquote p:last-of-type::after': false,
+	pre: false,
+	code: false,
+	'pre code': false
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+	darkMode: 'class',
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			typography: {
+				DEFAULT: { css: disabledCss },
+				sm: { css: disabledCss },
+				lg: { css: disabledCss },
+				xl: { css: disabledCss },
+				'2xl': { css: disabledCss }
+			}
+		}
+	},
+	plugins: [require('@tailwindcss/typography')]
+};

tsconfig.json

@@ -0,0 +1,46 @@
+{
+	"compilerOptions": {
+		// Enable top-level await, and other modern ESM features.
+		"target": "ESNext",
+		"module": "ESNext",
+		// Enable node-style module resolution, for things like npm package imports.
+		"moduleResolution": "node",
+		// Enable JSON imports.
+		"resolveJsonModule": true,
+
+		"removeComments": true,
+		"preserveConstEnums": true,
+		"strict": true,
+		"alwaysStrict": true,
+		"strictNullChecks": true,
+		"noUncheckedIndexedAccess": true,
+
+		"noImplicitAny": true,
+		"noImplicitReturns": true,
+		"noImplicitThis": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"allowUnreachableCode": false,
+		"noFallthroughCasesInSwitch": true,
+
+		"declaration": true,
+
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"allowJs": false,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+
+		"jsx": "react-jsx",
+		// Enable stricter transpilation for better output.
+		"isolatedModules": true,
+		// Add type definitions for our Vite runtime.
+		"types": ["vite/client"],
+
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.astro", "src/components/PostOverview.tsx"]
+}