✨ generate pages

2025-11-20 11:36:30 +10:00
parent cf4a2e4e2f
commit 74e7f63ad5
12 changed files with 205 additions and 32 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
 .venv
 .idea
-.DS_Store
+.DS_Store
+
+# Generated HTML files from markdown
+site/*.html
+!site/index.html
--- a/content/about.md
+++ b/content/about.md
@@ -0,0 +1 @@
+# About
--- a/content/comics.md
+++ b/content/comics.md
--- a/content/contact.md
+++ b/content/contact.md
--- a/content/links.md
+++ b/content/links.md
--- a/content/now.md
+++ b/content/now.md
--- a/content/projects.md
+++ b/content/projects.md
--- a/content/uses.md
+++ b/content/uses.md
--- a/requirements.txt
+++ b/requirements.txt
@@ -0,0 +1 @@
+markdown>=3.4.0
--- a/scripts/build.py
+++ b/scripts/build.py
@@ -0,0 +1,191 @@
+#!/usr/bin/env python3
+"""
+Markdown to HTML converter for Puercito Fiction site.
+Converts markdown files from content/ directory to HTML files in site/ directory.
+"""
+
+import os
+from pathlib import Path
+import markdown
+
+
+# HTML template for generated pages
+HTML_TEMPLATE = """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{title} - Puercito Fiction</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body.page {{
+            background-color: {bg_color};
+            background-image: none;
+            align-items: flex-start;
+            padding: 2rem;
+        }}
+
+        .page-container {{
+            max-width: 800px;
+            width: 100%;
+        }}
+
+        .back-link {{
+            font-family: 'Special Elite', monospace;
+            font-size: 1rem;
+            color: #292929;
+            text-decoration: none;
+            display: inline-block;
+            margin-bottom: 2rem;
+            transition: color 0.3s ease;
+        }}
+
+        .back-link:hover {{
+            color: #E6507D;
+        }}
+
+        .page-content {{
+            font-family: 'Special Elite', monospace;
+            line-height: 1.8;
+            color: #191919;
+        }}
+
+        .page-content h1 {{
+            font-family: 'Permanent Marker', cursive;
+            font-size: 2.5rem;
+            margin-bottom: 1.5rem;
+            color: #191919;
+        }}
+
+        .page-content h2 {{
+            font-family: 'Permanent Marker', cursive;
+            font-size: 1.8rem;
+            margin-top: 2rem;
+            margin-bottom: 1rem;
+            color: #191919;
+        }}
+
+        .page-content p {{
+            margin-bottom: 1rem;
+        }}
+
+        .page-content a {{
+            color: #E6507D;
+            text-decoration: underline;
+        }}
+
+        .page-content a:hover {{
+            color: #c93d65;
+        }}
+
+        .page-content ul, .page-content ol {{
+            margin-left: 2rem;
+            margin-bottom: 1rem;
+        }}
+
+        .page-content li {{
+            margin-bottom: 0.5rem;
+        }}
+    </style>
+</head>
+<body class="page">
+    <div class="page-container">
+        <a href="index.html" class="back-link">← Back to Home</a>
+        <div class="page-content">
+            {content}
+        </div>
+    </div>
+</body>
+</html>
+"""
+
+# Page background colors
+PAGE_COLORS = {
+    'comics': '#ffffff',
+    'about': '#f5e6d3',
+    'projects': '#e8dfd0',
+    'links': '#d9e8d8',
+    'contact': '#e8d8d8',
+    'now': '#d8e3e8',
+    'uses': '#e8e0d8',
+}
+
+
+def convert_markdown_to_html(markdown_file: Path, output_dir: Path):
+    """
+    Convert a single markdown file to HTML.
+
+    Args:
+        markdown_file: Path to the markdown file
+        output_dir: Directory to save the HTML file
+    """
+    # Read markdown content
+    with open(markdown_file, 'r', encoding='utf-8') as f:
+        md_content = f.read()
+
+    # Convert markdown to HTML
+    md = markdown.Markdown(extensions=['extra', 'codehilite', 'meta'])
+    html_content = md.convert(md_content)
+
+    # Extract title from filename or first heading
+    title = markdown_file.stem.capitalize()
+
+    # Get background color for this page (default to white if not specified)
+    page_name = markdown_file.stem
+    bg_color = PAGE_COLORS.get(page_name, '#ffffff')
+
+    # Fill template
+    full_html = HTML_TEMPLATE.format(
+        title=title,
+        content=html_content,
+        bg_color=bg_color
+    )
+
+    # Output file path
+    output_file = output_dir / f"{markdown_file.stem}.html"
+
+    # Write HTML file
+    with open(output_file, 'w', encoding='utf-8') as f:
+        f.write(full_html)
+
+    print(f"✓ Converted {markdown_file.name} → {output_file.name}")
+
+
+def main():
+    """Main build script."""
+    # Define directories
+    content_dir = Path('content')
+    site_dir = Path('site')
+
+    # Ensure directories exist
+    if not content_dir.exists():
+        print(f"Error: {content_dir} directory not found")
+        return
+
+    if not site_dir.exists():
+        print(f"Creating {site_dir} directory...")
+        site_dir.mkdir(parents=True)
+
+    # Find all markdown files
+    md_files = list(content_dir.glob('*.md'))
+
+    if not md_files:
+        print(f"No markdown files found in {content_dir}")
+        return
+
+    print(f"Found {len(md_files)} markdown file(s)")
+    print("-" * 50)
+
+    # Convert each markdown file
+    for md_file in md_files:
+        convert_markdown_to_html(md_file, site_dir)
+
+    print("-" * 50)
+    print(f"Build complete! HTML files saved to {site_dir}/")
+
+
+if __name__ == '__main__':
+    main()
--- a/site/index.html
+++ b/site/index.html
@@ -16,14 +16,14 @@
        </header>

        <nav>
-            <a href="#about">about</a>
-            <a href="#comics">comics</a>
-            <a href="#projects">projects</a>
+            <a href="about.html">about</a>
+            <a href="comics.html">comics</a>
+            <a href="projects.html">projects</a>
            <a href="#newsletter">newsletter</a>
-            <a href="#links">links</a>
-            <a href="#contact">contact</a>
-            <a href="#now">now</a>
-            <a href="#uses">uses</a>
+            <a href="links.html">links</a>
+            <a href="contact.html">contact</a>
+            <a href="now.html">now</a>
+            <a href="uses.html">uses</a>
        </nav>

        <main>
--- a/site/styles.css
+++ b/site/styles.css
@@ -9,30 +9,6 @@ body {
    line-height: 1.6;
    color: #191919;
    background-color: #e8e4d8;
-    background-image:
-        /* Halftone dot pattern for newsprint effect */
-        radial-gradient(circle at 25% 25%, rgba(0,0,0,0.03) 1px, transparent 1px),
-        radial-gradient(circle at 75% 75%, rgba(0,0,0,0.03) 1px, transparent 1px),
-        /* Subtle noise texture */
-        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
-        /* Subtle weathered stains */
-        radial-gradient(ellipse at 20% 30%, rgba(139,119,101,0.08) 0%, transparent 50%),
-        radial-gradient(ellipse at 80% 70%, rgba(139,119,101,0.06) 0%, transparent 50%),
-        radial-gradient(ellipse at 50% 90%, rgba(139,119,101,0.05) 0%, transparent 40%);
-    background-size:
-        4px 4px,
-        4px 4px,
-        400px 400px,
-        60% 60%,
-        50% 50%,
-        70% 70%;
-    background-position:
-        0 0,
-        2px 2px,
-        0 0,
-        20% 30%,
-        80% 70%,
-        50% 90%;
    min-height: 100vh;
    display: flex;
    align-items: center;