Issue/3/no more prepros

.deployignore

@@ -0,0 +1,84 @@
+# Deployment Exclusions
+
+# =====================
+
+# These files/folders should NOT be included in production deployment.
+
+# They are only needed for development and build processes.
+
+#
+
+# How to use this:
+
+# ----------------
+
+# - GitHub Pages: Add these patterns to your workflow's exclusion list
+
+# - Netlify: Add to .netlifyignore
+
+# - Vercel: Add to .vercelignore
+
+# - Manual deployment: Don't copy these folders to your server
+
+#
+
+# Excluded items:
+
+# ---------------
+
+# Source files (not needed in production)
+
+routes/
+scripts/
+pug/
+scss/
+ts/
+\_docs/
+
+# Configuration files
+
+tsconfig.json
+package.json
+package-lock.json
+pug.routes.js
+pug.routes.ts
+
+# Build tools
+
+node_modules/
+
+# Git/GitHub
+
+.git/
+.github/
+.gitignore
+
+# IDE/Editor
+
+.vscode/
+.idea/
+
+# Documentation
+
+README.md
+MIGRATION.md
+LICENSE
+
+# Environment
+
+.env
+.env.local
+
+# Keep these in deployment:
+
+# -------------------------
+
+# - \*.html files (your generated pages)
+
+# - css/ folder (compiled styles)
+
+# - js/min/ folder (compiled JavaScript)
+
+# - svg/ folder (static assets)
+
+# - Any other static assets (images, fonts, etc.)

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          # cache removed because repository doesn't include a lockfile
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build project
+        run: npm run build

.gitignore

@@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+css/
+js/min/
+*.html
+!_docs/
+
+# TypeScript
+*.tsbuildinfo
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Environment
+.env
+.env.local

README.md

@@ -10,31 +10,49 @@ This is the starting point that I ([Lemon](https://ahoylemon.xyz)) use every tim
 
 I want to have reusable components to help me make a static HTML site, and I want to do that as quickly as possible. At the same time, I _don't_ want to have a whole bunch of boilerplate stuff in the shipped code. The idea here is **only when you need it**: Making something that's slim and extendable.
 
-Also you'll need [Prepros](https://prepros.io). I'm a fan of it, and I avoid NPM whenever I can, so this uses Prepros.
+This project uses npm for build tooling, with Pug for HTML templating, Sass for CSS, and TypeScript for JavaScript.
 
 This also assumes you want to write in Vue, Sass & Pug.
 
+### Prerequisites
+
+You'll need [Node.js](https://nodejs.org/) (v18 or higher) and npm installed. If you don't have them, [download Node.js here](https://nodejs.org/) (npm comes with it).
+
 ### Alright, how do I get started?
 
 1. Click [Use This Template](https://github.com/AhoyLemon/startHere/generate) to use this repo as a project template.
-2. [Download](https://prepros.io/) and open up Prepros, add your new project to Prepros and hit the globe button to serve your page.
-3. If you see **It works.** in the middle of the screen, congratulations it's working right.
+2. Clone your new repository locally
+3. Run `npm install` to install dependencies
+4. Run `npm run setup` to configure your project name and details
+5. Run `npm run dev` to start the development server
+6. If you see **It works.** in the middle of the screen, congratulations it's working right.
+
+## Commands
+
+- `npm install` - Install all dependencies
+- `npm run setup` - Initial project setup (prompts for project name, URL, etc.)
+- `npm run dev` - Start development server with live reload
+- `npm run build` - Build all files for production
+- `npm test` - Check for Sass and TypeScript errors
 
 ## Fundamentals
 
-I'll break this down into three sections, Pug, Sass, & Javascript.
+I'll break this down into three sections, Pug, Sass, & TypeScript.
+
+For detailed information about routing configuration, see the [Pug Routing Documentation](_docs/routes.md).
 
-1. [Pug](_docs/pug.md)
-2. [Sass](_docs/sass.md)
-3. [Javascript](_docs/js.md)
+1. [Pug](_docs/pug.md) - HTML templating with routing configuration in `routes/pug.routes.ts`
+2. [Sass](_docs/sass.md) - Modern CSS with @use syntax
+3. [TypeScript](_docs/ts.md) - Type-safe JavaScript
+4. [Development Tools](_docs/tools.md) - Prettier, BrowserSync, and other helpful tools
 
 ## Deploying to GitHub Pages
 
 If you want to deploy this project to GitHub Pages, follow these steps:
 
 1. Navigate to the `.github/workflows/` directory.
-2. Rename the `static.yml.example` file to `static.yml`.
+2. Rename the `deploy.yml.example` file to `deploy.yml`.
 3. Commit and push the changes to your repository.
 4. GitHub Actions will automatically run the workflow to deploy your site to GitHub Pages.
 
-Make sure your repository settings are configured to use GitHub Pages, and the branch is set to `gh-pages` or the branch specified in the workflow file.
+Make sure your repository settings are configured to use GitHub Pages, and the branch is set to `github-pages` or the branch specified in the workflow file.

_docs/pug.md

@@ -1,24 +1,43 @@
 # Pug
-This uses [pug]([https://pugjs.org/api/getting-started.html](https://pugjs.org/api/getting-started.html)) for generating all HTML. I like Pug a lot, because I can do complicated stuff like buildtime rendering, imports, mixins, loops and conditions while *still* ending up with static HTML files.
 
-**Why not HAML?** I know HAML is more popular. I personally like the syntax of pug a little bit better and prefer to use that. Honeslty, you could convert this shit to HAML in like 5 minutes if you really felt like it.
+This uses [pug](https://pugjs.org/api/getting-started.html) for generating all HTML. I like Pug a lot, because I can do complicated stuff like buildtime rendering, imports, mixins, loops and conditions while _still_ ending up with static HTML files.
+
+**Why not HAML?** I know HAML is more popular. I personally like the syntax of pug a little bit better and prefer to use that. Honestly, you could convert this to HAML in like 5 minutes if you really felt like it.
 
 ## Okay, how's it work?
 
-`index.pug` serves as your main file. It imports in a couple of partials and then renders whatever you put in `main`. If you want to make additional pages, import at will from there.
+`index.pug` serves as your main file. It imports in a couple of partials and then renders whatever you put in `main`. If you want to make additional pages, you'll need to add them to `routes/pug.routes.ts`.
+
+### Pug Routing
+
+This project uses a routing file (`routes/pug.routes.ts`) to define which Pug files compile to which HTML files. This gives you full control over your output structure.
+
+**Example routes:**
+
+```javascript
+export const routes = {
+  "pug/index.pug": "index.html", // Root level
+  "pug/about.pug": "about/index.html", // Nested folder
+  "pug/contact.pug": "contact/index.html", // Nested folder
+};
+```
+
+Any file starting with an underscore (\_) is treated as a partial and won't be compiled directly.
 
 ### variables
-* `siteTitle` is the name of your site. This will affect several things. If you have both a page and site title defined, it will render as page | site, otherwise it'll just display site tile
-* `siteURL` is the base url, ex "https://damn.dog"
-* `description` is the site description. This will serve in the meta description field, as well as the description of Twitter and Opengraph stuff, if applicable.
-* `testing` is a flag for if you're currently in development or not. If you're *not*, the site will serve minified javascript.
-* `d` and `lastUpdated` serve as cachebusters. The point here is that every time you rebuild the pug, it will force a refresh of all your site-specific javascript and css files. Great for easy deployement.
-* `pageTitle` should be defined individually on each page, if it's a multipage site. If not, just leave it as null.
+
+- `siteTitle` is the name of your site. This will affect several things. If you have both a page and site title defined, it will render as page | site, otherwise it'll just display site title
+- `siteURL` is the base url, ex "https://damn.dog"
+- `description` is the site description. This will serve in the meta description field, as well as the description of Twitter and Opengraph stuff, if applicable.
+- `testing` is a flag for if you're currently in development or not. If you're _not_, the site will serve minified javascript.
+- `d` and `lastUpdated` serve as cachebusters. The point here is that every time you rebuild the pug, it will force a refresh of all your site-specific javascript and css files. Great for easy deployment.
+- `pageTitle` should be defined individually on each page, if it's a multipage site. If not, just leave it as null.
 
 ### partials
+
 I'm including in this a number of partials, but out of the box, your page will import four.
 
-* **_variables** includes all the variables mentioned above. Add your own if you like.
-* **_mixins** contains just a few global mixins I've used cross-project. I find I build mixins on a per-site basis and include them here.
-* **_head** gives you some generic stuff you probably want, like the utf charset, css href, viewport meta and site description.  It also has a commented bit for Favicon, Social Media meta and Schema. You can use this as a reference point, but you'll want to edit files first.
-* **_javascripts** happen last on the page, imported in order in a single div right before the close of the body tag.
+- **\_variables** includes all the variables mentioned above. Add your own if you like.
+- **\_mixins** contains just a few global mixins I've used cross-project. I find I build mixins on a per-site basis and include them here.
+- **\_head** gives you some generic stuff you probably want, like the utf charset, css href, viewport meta and site description. It also has a commented bit for Favicon, Social Media meta and Schema. You can use this as a reference point, but you'll want to edit files first.
+- **\_javascripts** happen last on the page, imported in order in a single div right before the close of the body tag.