paperastro 1.0.3

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
+  "unwantedRecommendations": []
+}

package/.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"
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,125 @@
+
+# PaperAstro  
+
+PaperAstro is a lightweight, professional Astro starter template styled with PaperCSS.  
+It provides a clean, sketch‑inspired aesthetic while maintaining strong performance, clarity, and simplicity.
+
+This template includes built‑in support for form handling through the Fabform backend.  
+Learn more at: [https://fabform.io](https://fabform.io)
+
+---
+
+## Installation
+
+### Install with npm (recommended)
+
+```sh
+npm create astro@latest -- --template @fabform/paperastro
+```
+
+This scaffolds a fresh project using the latest version of the PaperAstro starter.  
+You can explore npm installation.
+
+### Install with Git
+
+```sh
+git clone https://github.com/fabformhub/paperastro
+cd paperastro
+npm install
+npm run dev
+```
+
+You can explore Git installation.
+
+---
+
+## Screenshot
+
+![PaperAstro Screenshot](public/screenshot.png)
+
+
+---
+
+## Demo
+
+Live Demo: [https://paperastro.vercel.app/](https://paperastro.vercel.app/)
+
+---
+
+## Features
+
+- Built with Astro 5
+- Styled entirely with PaperCSS
+- MDX support included
+- RSS and Sitemap integrations
+- Sharp for image optimization
+- Native form handling powered by Fabform
+- Minimal, well‑structured project layout
+- Suitable for blogs, documentation, and lightweight content sites
+
+---
+
+## Project Structure
+
+```
+/
+├── public/
+├── src/
+│   ├── components/
+│   ├── layouts/
+│   ├── pages/
+│   ├── consts.ts
+│   └── styles/
+└── package.json
+```
+
+You can explore project structure.
+
+---
+
+## Commands
+
+```sh
+npm run dev       # Start the development server
+npm run build     # Build the site for production
+npm run preview   # Preview the production build
+```
+
+You can explore Astro commands.
+
+---
+
+## Form Handling with Fabform
+
+PaperAstro includes ready‑to‑use form integration powered by the Fabform backend.  
+You can connect any form by adding your Fabform endpoint URL.
+
+Learn more at: [https://fabform.io](https://fabform.io)
+
+---
+
+## Deploy with Vercel
+
+Deploy PaperAstro to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/fabformhub/paperastro)
+
+---
+
+## License
+
+MIT License  
+© 2026 Geoffrey Callaghan
+
+---
+
+## Repository
+
+GitHub: [https://github.com/fabformhub/paperastro](https://github.com/fabformhub/paperastro)
+
+## npm Package
+
+[https://www.npmjs.com/package/@fabform/paperastro](https://www.npmjs.com/package/@fabform/paperastro)  
+You can explore the npm package.
+
+---

package/astro.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	site: 'https://example.com',
+	integrations: [mdx(), sitemap()],
+});

package/package.json

@@ -0,0 +1,41 @@
+	{
+  "name": "paperastro",
+  "version": "1.0.3",
+  "type": "module",
+  "description": "A lightweight, professional Astro starter template styled with PaperCSS and powered by Fabform.",
+  "author": "Geoffrey Callaghan",
+  "license": "MIT",
+  "homepage": "https://github.com/fabformhub/paperastro#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fabformhub/paperastro.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fabformhub/paperastro/issues"
+  },
+  "keywords": [
+    "astro",
+    "starter",
+    "template",
+    "papercss",
+    "blog",
+    "documentation",
+    "fabform",
+    "static-site",
+    "astro-theme"
+  ],
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/rss": "^4.0.15",
+    "@astrojs/sitemap": "^3.7.0",
+    "astro": "^5.17.1",
+    "sharp": "^0.34.3"
+  }
+}
+

package/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>

package/src/components/BaseHead.astro

@@ -0,0 +1,63 @@
+---
+// Import the global.css file here so that it is included on
+// all pages through the use of the <BaseHead /> component.
+import '../styles/global.css';
+import type { ImageMetadata } from 'astro';
+import FallbackImage from '../assets/scrap-placeholder.png';
+import { SITE_TITLE } from '../consts';
+
+interface Props {
+        title: string;
+        description: string;
+        image?: ImageMetadata;
+}
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
+const { title, description, image = FallbackImage } = Astro.props;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" href="/favicon.ico" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<!-- Global CSS -->
+<link rel="stylesheet" href="https://unpkg.com/papercss@1.9.2/dist/paper.min.css" />
+
+<link
+        rel="alternate"
+        type="application/rss+xml"
+        title={SITE_TITLE}
+        href={new URL('rss.xml', Astro.site)}
+/>
+<meta name="generator" content={Astro.generator} />
+
+<!-- Font preloads -->
+<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin />
+<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
+
+<!-- Canonical URL -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={new URL(image.src, Astro.url)} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
+

package/src/components/Footer.astro

@@ -0,0 +1,34 @@
+---
+const year = new Date().getFullYear();
+---
+
+<footer class="paper padding-large text-center margin-top-large">
+
+  <p class="paper">
+    © {year} PaperAstro. Built with Astro and styled using PaperCSS. Forms powered by the 
+    <a href="https://fabform.io" target="_blank">form backend service</a> fabform.io.
+  </p>
+
+  <div class="social-links flex justify-center gap-small margin-top-large">
+
+    <!-- GitHub -->
+    <a href="https://github.com/fabformhub/paperastro" target="_blank" class="paper-btn btn-small flex align-center gap-small">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 2a10 10 0 0 0-3 19.5c.5.1.7-.2.7-.5v-2c-3 .7-3.6-1.5-3.6-1.5-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1 .1 1.6 1 1.6 1 .9 1.6 2.4 1.1 3 .8.1-.7.4-1.1.7-1.4-2.4-.3-5-1.2-5-5.4 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.6 0 0 .8-.3 2.7 1a9.3 9.3 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.3.2 2.3.1 2.6.6.7 1 1.6 1 2.7 0 4.2-2.6 5.1-5 5.4.4.3.8 1 .8 2v3c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/>
+      </svg>
+      GitHub
+    </a>
+
+  </div>
+
+</footer>
+
+<style>
+  .gap-small {
+    gap: 0.5rem;
+  }
+  svg {
+    display: inline-block;
+  }
+</style>
+

package/src/components/FormattedDate.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+	date: Date;
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+	{
+		date.toLocaleDateString('en-us', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+		})
+	}
+</time>

package/src/components/Header.astro

@@ -0,0 +1,21 @@
+---
+import { SITE_TITLE } from '../consts';
+import HeaderLink from './HeaderLink.astro';
+---
+
+<header class="paper">
+  <div class="container">
+    <nav class="padding-small flex align-center space-between">
+
+      <!-- Navigation Links -->
+      <div class="flex gap-small">
+        <HeaderLink href="/" class="paper-btn btn-small">{SITE_TITLE}</HeaderLink>
+        <HeaderLink href="/blog" class="paper-btn btn-small">Blog</HeaderLink>
+        <HeaderLink href="/about" class="paper-btn btn-small">About</HeaderLink>
+        <HeaderLink href="/contact" class="paper-btn btn-small">Contact</HeaderLink>
+      </div>
+
+    </nav>
+  </div>
+</header>
+

package/src/components/HeaderLink.astro

@@ -0,0 +1,45 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
+const subpath = pathname.match(/[^\/]+/g);
+const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
+---
+
+<a
+  href={href}
+  class:list={[
+    "paper-btn btn-small no-decoration",
+    className,
+    { active: isActive }
+  ]}
+  {...props}
+>
+  <slot />
+</a>
+
+<style>
+  a {
+    display: inline-block;
+  }
+
+  .no-decoration {
+    text-decoration: none;
+  }
+
+  /* Active state */
+  a.active {
+    font-weight: bold;
+    box-shadow: 2px 2px 0 #000;
+    transform: translate(-1px, -1px);
+    transition: transform 0.05s ease;
+  }
+
+  a.active:hover {
+    transform: translate(-2px, -2px);
+  }
+</style>
+

package/src/consts.ts

@@ -0,0 +1,6 @@
+// Place any global data in this file.
+// You can import this data from anywhere in your site by using the `import` keyword.
+
+export const SITE_TITLE = 'PaperAstro';
+export const SITE_DESCRIPTION = 'A hand‑drawn, lightweight Astro starter built with PaperCSS.';
+

package/src/content/blog/first-post.md

@@ -0,0 +1,39 @@
+---
+title: "Getting Started with PaperAstro"
+description: "An introduction to the PaperAstro starter template and how to begin using it."
+pubDate: "Jan 1 2026"
+heroImage: "../../assets/scrap-placeholder.png"
+---
+
+PaperAstro is a lightweight starter template designed to help developers build clean, content‑focused websites using Astro and PaperCSS. This example post demonstrates how a typical article is structured within the template.
+
+## Why PaperAstro exists
+
+Many developers want a simple, minimal foundation for blogs or documentation sites without the overhead of a full design system. PaperAstro provides:
+
+- A sketch‑inspired aesthetic powered by PaperCSS  
+- A clear and minimal project structure  
+- Built‑in support for MDX, RSS, and sitemaps  
+- Form handling through Fabform.io  
+- Fast performance enabled by Astro’s modern architecture  
+
+## Writing content
+
+Blog posts are stored in the `src/content/blog/` directory and use frontmatter to define metadata such as:
+
+- `title`
+- `description`
+- `pubDate`
+- `heroImage`
+
+Content can be written in Markdown or MDX, depending on your needs.
+
+## Adding images
+
+Hero images can be added by referencing files inside the `src/assets/` directory. PaperAstro uses Astro’s built‑in image optimization to ensure images are responsive and efficient.
+
+## Customizing the layout
+
+You can modify the blog layout by editing:
+
+

package/src/content/blog/second-post.md

@@ -0,0 +1,72 @@
+---
+title: "Understanding the PaperAstro Project Structure"
+description: "A walkthrough of the core folders and files that make up the PaperAstro starter template."
+pubDate: "Jan 11 2026"
+heroImage: "../../assets/scrap-placeholder.png"
+---
+
+PaperAstro is designed to be minimal, clear, and easy to extend. This post provides an overview of the project structure so you can quickly understand how the template is organized and where to make changes.
+
+## Key directories
+
+The main folders you will work with include:
+
+### `src/pages/`
+This directory contains your site’s routes. Each `.astro` or `.md` file becomes a page on your website.  
+Examples include:
+
+- `index.astro` for the homepage  
+- `about.astro` for the About page  
+- `contact.astro` for the contact form  
+
+### `src/components/`
+Reusable UI components such as the header, footer, and utility components live here.  
+You can add your own components to keep your layout clean and modular.
+
+### `src/layouts/`
+Layouts define the structure shared across multiple pages.  
+For example, `BlogPost.astro` controls how individual blog posts are displayed.
+
+### `src/content/blog/`
+This folder contains your Markdown or MDX blog posts.  
+Each post includes frontmatter metadata such as:
+
+- `title`
+- `description`
+- `pubDate`
+- `heroImage`
+
+## Assets and styling
+
+### `src/assets/`
+Images, hero graphics, and other static assets are stored here.  
+Astro’s image optimization pipeline ensures they are responsive and efficient.
+
+### PaperCSS styling
+PaperAstro uses PaperCSS for all styling. No custom CSS is required, but you can extend the design by adding your own styles if needed.
+
+## Configuration files
+
+### `astro.config.mjs`
+Controls Astro integrations, build settings, and site configuration.
+
+### `src/consts.ts`
+Stores global constants such as the site title and description.
+
+## Extending the template
+
+PaperAstro is intentionally minimal, giving you the freedom to:
+
+- Add new pages  
+- Create custom layouts  
+- Integrate additional Astro features  
+- Expand the blog section  
+- Introduce new components  
+
+The structure is designed to stay out of your way while providing a solid foundation for content‑driven websites.
+
+## Summary
+
+Understanding the project structure is the first step toward customizing PaperAstro for your needs.  
+With a clear layout and minimal overhead, you can quickly build a site that is both functional and visually distinctive.
+

package/src/content.config.ts

@@ -0,0 +1,19 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const blog = defineCollection({
+	// Load Markdown and MDX files in the `src/content/blog/` directory.
+	loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
+	// Type-check frontmatter using a schema
+	schema: ({ image }) =>
+		z.object({
+			title: z.string(),
+			description: z.string(),
+			// Transform string to Date object
+			pubDate: z.coerce.date(),
+			updatedDate: z.coerce.date().optional(),
+			heroImage: image().optional(),
+		}),
+});
+
+export const collections = { blog };

package/src/layouts/BlogPost.astro

@@ -0,0 +1,73 @@
+---
+import { Image } from 'astro:assets';
+import type { CollectionEntry } from 'astro:content';
+import BaseHead from '../components/BaseHead.astro';
+import Footer from '../components/Footer.astro';
+import FormattedDate from '../components/FormattedDate.astro';
+import Header from '../components/Header.astro';
+
+type Props = CollectionEntry<'blog'>['data'];
+
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+
+  <body>
+    <Header />
+
+    <main class="container padding-large">
+      <article class="paper">
+
+        <!-- Hero Image -->
+        <div class="hero-image margin-bottom-large">
+          {heroImage && (
+            <Image
+              width={1020}
+              height={510}
+              src={heroImage}
+              alt={title}
+              class="img-responsive paper"
+            />
+          )}
+        </div>
+
+        <!-- Title + Dates -->
+        <div class="text-center margin-bottom-large">
+          <h1 class="paper">{title}</h1>
+
+          <p class="paper">
+            Published on <FormattedDate date={pubDate} />
+            {updatedDate && (
+              <>
+                <br />
+                <span class="italic">
+                  Last updated on <FormattedDate date={updatedDate} />
+                </span>
+              </>
+            )}
+          </p>
+
+          <hr />
+        </div>
+
+        <!-- Blog Content -->
+        <div class="paper padding-large">
+          <slot />
+        </div>
+
+        <!-- Footer Note -->
+        <p class="text-center margin-top-large paper">
+          Thank you for reading. This article is part of the PaperAstro starter template.
+        </p>
+
+      </article>
+    </main>
+
+    <Footer />
+  </body>
+</html>
+

package/src/pages/about.astro

@@ -0,0 +1,47 @@
+---
+import AboutHeroImage from '../assets/scrap-placeholder.png';
+import Layout from '../layouts/BlogPost.astro';
+---
+
+<Layout
+  title="About PaperAstro"
+  description="Learn more about the purpose and philosophy behind the PaperAstro starter template."
+  pubDate={new Date('August 08 2021')}
+  heroImage={AboutHeroImage}
+>
+  <p class="paper">
+    PaperAstro is a lightweight Astro starter template designed for developers who want a clean,
+    sketch‑inspired aesthetic without sacrificing performance or simplicity. It combines the speed
+    and flexibility of Astro with the hand‑drawn visual style of PaperCSS, resulting in a unique
+    foundation for blogs, documentation sites, and small web projects.
+  </p>
+
+  <p class="paper">
+    This project was created to offer a minimal, approachable starting point for developers who
+    appreciate clarity and structure. PaperAstro avoids unnecessary complexity and focuses on
+    providing a solid, well‑organized base that can be extended in any direction.
+  </p>
+
+  <p class="paper">
+    Key principles behind PaperAstro include:
+  </p>
+
+  <ul class="paper">
+    <li>Clean, readable code that is easy to understand and modify</li>
+    <li>A minimal design system powered entirely by PaperCSS</li>
+    <li>Fast performance enabled by Astro’s modern architecture</li>
+    <li>Practical defaults for content‑driven websites</li>
+  </ul>
+
+  <p class="paper">
+    PaperAstro also includes built‑in support for form handling through Fabform, making it simple
+    to add contact forms or other user input without managing backend infrastructure.
+  </p>
+
+  <p class="paper">
+    Whether you're building a personal site, a small publication, or a documentation hub,
+    PaperAstro provides a reliable foundation that stays out of your way while giving your project
+    a distinctive visual character.
+  </p>
+</Layout>
+

package/src/pages/blog/[...slug].astro

@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection, render } from 'astro:content';
+import BlogPost from '../../layouts/BlogPost.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('blog');
+	return posts.map((post) => ({
+		params: { slug: post.id },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'blog'>;
+
+const post = Astro.props;
+const { Content } = await render(post);
+---
+
+<BlogPost {...post.data}>
+	<Content />
+</BlogPost>

package/src/pages/blog/index.astro

@@ -0,0 +1,87 @@
+---
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
+import BaseHead from '../../components/BaseHead.astro';
+import Footer from '../../components/Footer.astro';
+import FormattedDate from '../../components/FormattedDate.astro';
+import Header from '../../components/Header.astro';
+import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';
+
+const posts = (await getCollection('blog')).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+
+  <body>
+    <Header />
+
+    <main class="container padding-large">
+
+      <h1 class="paper text-center">
+        <span class="inline-icon">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="4" width="18" height="16" rx="2" ry="2" />
+            <line x1="7" y1="8" x2="17" y2="8" />
+            <line x1="7" y1="12" x2="17" y2="12" />
+            <line x1="7" y1="16" x2="13" y2="16" />
+          </svg>
+        </span>
+        The Papery Blog Roll
+      </h1>
+
+      <p class="paper text-center">
+        Welcome to the official archive of all things scribbled, doodled, typed,
+        or accidentally published. Each post below has been lovingly handcrafted
+        using Astro and PaperCSS, then pinned to this digital bulletin board for
+        your reading pleasure.
+      </p>
+
+      <section class="margin-top-large">
+        <ul class="flex flex-wrap gap-large no-bullet justify-center">
+          {
+            posts.map((post) => (
+              <li class="paper padding-small" style="width: 100%; max-width: 420px;">
+                <a href={`/blog/${post.id}/`} class="no-decoration">
+                  {post.data.heroImage && (
+                    <Image
+                      width={720}
+                      height={360}
+                      src={post.data.heroImage}
+                      alt=""
+                      class="img-responsive paper margin-bottom-small"
+                    />
+                  )}
+
+                  <h4 class="margin-none">{post.data.title}</h4>
+
+                  <p class="italic margin-none">
+                    <FormattedDate date={post.data.pubDate} />
+                  </p>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+
+      <p class="paper text-center margin-top-large">
+        <span class="inline-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 19h14M5 5h14M5 12h8" />
+          </svg>
+        </span>
+        That’s all for now. More papery posts are already scribbled in the margins.
+      </p>
+
+    </main>
+
+    <Footer />
+  </body>
+</html>
+

package/src/pages/contact.astro

@@ -0,0 +1,114 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={`${SITE_TITLE} – Contact`} description={SITE_DESCRIPTION} />
+  </head>
+
+  <body>
+    <Header />
+
+    <!-- 
+      ============================
+      FABFORM.IO INTEGRATION NOTES
+      ============================
+
+      Replace YOUR-ENDPOINT-ID-HERE with your Fabform endpoint.
+      Example: https://fabform.io/f/abc123
+
+      Do NOT remove name="" attributes — Fabform needs them.
+      Do NOT expose API keys — Fabform does not require any.
+    -->
+
+    <main class="container padding-large">
+
+      <div class="paper padding-large">
+
+        <h1 class="text-center">
+          <span class="inline-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="4" width="18" height="16" rx="2" ry="2" />
+              <line x1="7" y1="8" x2="17" y2="8" />
+            </svg>
+          </span>
+          Contact
+        </h1>
+
+        <p class="text-center">
+          Use the form below to send a message.  
+          This form is styled with PaperCSS and securely processed by Fabform.io.
+        </p>
+
+        <form 
+          action="https://fabform.io/f/YOUR-ENDPOINT-ID-HERE"
+          method="POST"
+          class="margin-top-large"
+        >
+
+          <div class="form-group">
+            <label for="name">Your Name</label>
+            <input class="input-block" type="text" id="name" name="name" required>
+          </div>
+
+          <div class="form-group">
+            <label for="email">Your Email</label>
+            <input class="input-block" type="email" id="email" name="email" required>
+          </div>
+
+          <div class="form-group">
+            <label for="subject">Subject</label>
+            <select id="subject" name="subject" class="input-block">
+              <option value="general">General Message</option>
+              <option value="feedback">Feedback</option>
+              <option value="support">Support Request</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="message">Your Message</label>
+            <textarea class="input-block no-resize" id="message" name="message" rows="6" required></textarea>
+          </div>
+
+          <fieldset class="form-group">
+            <legend>Stay Updated</legend>
+
+            <label class="paper-check" for="newsletter">
+              <input type="checkbox" id="newsletter" name="newsletter" value="yes">
+              <span>Subscribe to updates</span>
+            </label>
+          </fieldset>
+
+          <button type="submit" class="paper-btn btn-primary btn-block margin-top">
+            Send Message
+          </button>
+
+        </form>
+
+        <div class="text-center margin-top-large">
+          <a href="https://fabform.io" target="_blank" class="badge secondary">
+            Powered by Fabform.io
+          </a>
+        </div>
+
+      </div>
+
+    </main>
+
+    <Footer />
+
+    <style>
+      .inline-icon {
+        display: inline-flex;
+        vertical-align: middle;
+        margin-right: 0.35rem;
+      }
+    </style>
+  </body>
+</html>
+

package/src/pages/index.astro

@@ -0,0 +1,75 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body>
+    <Header />
+
+    <main class="container padding-large">
+
+      <h1 class="text-center paper">Welcome to PaperAstro</h1>
+
+      <p class="paper">
+        PaperAstro is a lightweight, professional starter template built with Astro and styled
+        entirely using PaperCSS. It provides a clean, sketch‑inspired aesthetic while maintaining
+        strong performance, clarity, and simplicity.
+      </p>
+
+      <p class="paper">
+        This template is designed for developers who want a minimal, well‑structured foundation
+        for blogs, documentation sites, or small content‑driven projects. PaperAstro keeps the
+        design approachable and distinctive without adding unnecessary complexity.
+      </p>
+
+      <h2 class="paper">Features</h2>
+
+      <ul class="paper">
+        <li>Clean, minimal layout powered by Astro</li>
+        <li>Sketch‑style UI using PaperCSS</li>
+        <li>MDX support for rich content</li>
+        <li>RSS and Sitemap integrations included</li>
+        <li>Image optimization via Sharp</li>
+        <li>Built‑in form handling through Fabform.io</li>
+      </ul>
+
+      <h2 class="paper">Getting Started</h2>
+
+      <p class="paper">
+        To begin customizing this template, edit the files inside the <code>src</code> directory.
+        The structure is intentionally simple, making it easy to adapt the layout, add pages,
+        or integrate additional Astro features.
+      </p>
+
+      <ul class="paper">
+        <li>Modify this page at <code>src/pages/index.astro</code></li>
+        <li>Add new routes inside <code>src/pages/</code></li>
+        <li>Update global settings in <code>src/consts.ts</code></li>
+        <li>Extend layouts or components as needed</li>
+      </ul>
+
+      <h2 class="paper">Resources</h2>
+
+      <ul class="paper">
+        <li><a href="https://docs.astro.build/">Astro Documentation</a></li>
+        <li><a href="https://www.getpapercss.com/">PaperCSS Documentation</a></li>
+        <li><a href="https://fabform.io">Fabform.io</a> for form handling</li>
+      </ul>
+
+      <p class="paper text-center">
+        PaperAstro provides a focused, reliable starting point for your next project.
+      </p>
+
+    </main>
+
+    <Footer />
+  </body>
+</html>
+

package/src/pages/rss.xml.js

@@ -0,0 +1,16 @@
+import { getCollection } from 'astro:content';
+import rss from '@astrojs/rss';
+import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
+
+export async function GET(context) {
+	const posts = await getCollection('blog');
+	return rss({
+		title: SITE_TITLE,
+		description: SITE_DESCRIPTION,
+		site: context.site,
+		items: posts.map((post) => ({
+			...post.data,
+			link: `/blog/${post.id}/`,
+		})),
+	});
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "strictNullChecks": true
+  }
+}