Feature/cloudflare jamstack updates

.eleventy.js

@@ -15,6 +15,7 @@ module.exports = function (eleventyConfig) {
     "node_modules/@zachleat/filter-container/*.js": "js",
     "src/css": "css",
   });
+  eleventyConfig.addPassthroughCopy({"src/site/README.md": "README.md"});
 
   // Date helper
   const { DateTime } = require('luxon');
@@ -198,8 +199,8 @@ module.exports = function (eleventyConfig) {
   return {
     dir: {
       input: "src/site",
-      inludes: "_includes",
-      output: "dist"
+      includes: "_includes",
+      output: "../dist"
     },
     passthroughFileCopy: true,
     markdownTemplateEngine: false,

healthcare_site/.eleventy.js

@@ -0,0 +1,17 @@
+module.exports = function(eleventyConfig) {
+  // Passthrough copy for CSS
+  eleventyConfig.addPassthroughCopy("src/css");
+
+  // Return your Object options:
+  return {
+    dir: {
+      input: "src",
+      includes: "_includes",
+      output: "dist" // This will be healthcare_site/dist relative to healthcare_site folder
+    },
+    passthroughFileCopy: true,
+    markdownTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: "njk"
+  };
+};

healthcare_site/.gitkeep

@@ -0,0 +1,2 @@
+# This file is intentionally left blank.
+# It is used to ensure that the healthcare_site directory is tracked by Git.

healthcare_site/README.md

@@ -0,0 +1,67 @@
+# Healthcare Information Site
+
+This directory contains a simple informational healthcare website built with Eleventy.
+
+## Development
+
+This site is part of a larger monorepo structure. Scripts to manage this site are available in the root `package.json` file.
+
+*   **Prerequisites:**
+    *   Node.js and npm (see root `package.json` for version if specified)
+    *   Run `npm install` from the root of the repository to install all dependencies, including Eleventy.
+
+*   **Build the site:**
+    From the root of the repository, run:
+    ```bash
+    npm run build:health
+    ```
+    This will generate the static site in the `healthcare_site/dist` directory.
+
+*   **Serve the site locally:**
+    From the root of the repository, run:
+    ```bash
+    npm run serve:health
+    ```
+    This will start a local development server (usually on port 8081) and watch for changes.
+
+*   **Clean build directory:**
+    From the root of the repository, the main clean script also handles this site:
+    ```bash
+    npm run clean
+    ```
+    This will remove `healthcare_site/dist`.
+
+## Deployment to Cloudflare Pages
+
+This site is designed to be deployed as part of the larger repository, but targeting this specific sub-directory's build output.
+
+1.  **Connect your Git repository to Cloudflare Pages:**
+    *   Follow the standard procedure in your Cloudflare dashboard.
+
+2.  **Configure your build settings for THIS specific site:**
+    *   When setting up a new Cloudflare Pages project for this healthcare site, you'll need to specify its unique build configuration.
+    *   **Project name:** Choose a name (e.g., `my-healthcare-info-site`).
+    *   **Production branch:** Select your main deployment branch.
+    *   **Framework preset:** Select `Eleventy`.
+    *   **Build command:** `npm run build:health` (This uses the script from the root `package.json`).
+    *   **Build output directory:** `healthcare_site/dist` (This is crucial - it tells Cloudflare where to find the built files for *this specific site*).
+    *   **Root directory (advanced):** If your build command `npm run build:health` is run from the repository root (which it is, due to `cd healthcare_site && ... && cd ..` not being how Cloudflare typically runs commands specified like this), you might need to adjust.
+        *   A common pattern for Cloudflare Pages with monorepos or sub-sites is to set the "Root directory" in Cloudflare's settings to `healthcare_site`.
+        *   If you set "Root directory" to `healthcare_site`, then the "Build command" could be simplified to `npx @11ty/eleventy` (assuming `package.json` with Eleventy as a dev dependency is also in `healthcare_site`, or Eleventy is installed globally in the build environment). And "Build output directory" would be `dist`.
+        *   **Recommended Cloudflare Configuration:**
+            *   **Root Directory:** `healthcare_site`
+            *   **Build Command:** `npx @11ty/eleventy` (You would need a minimal `package.json` in `healthcare_site` just to specify Eleventy as a dev dep, or ensure build environment provides it) OR use the root build command `npm run build:health` *if* Cloudflare allows running it in a way that correctly populates `healthcare_site/dist` *and* the output directory is set to `healthcare_site/dist` from the repo root.
+            *   **Build Output Directory:** `healthcare_site/dist` (if "Root Directory" is repository root) OR `dist` (if "Root Directory" is `healthcare_site`).
+
+    **Let's assume the following for clarity in Cloudflare settings:**
+    *   **Project Name**: `your-healthcare-project-name`
+    *   **Production Branch**: `main` (or your primary branch)
+    *   **Framework Preset**: `Eleventy`
+    *   **Build command**: `npm run build:health`
+    *   **Build output directory**: `healthcare_site/dist`
+    *   **Root Directory (under Build system version -> Environment variables in settings):** Leave as repository root if `build:health` correctly outputs. If issues arise, explore setting Root Directory to `healthcare_site` and simplifying the build command.
+
+3.  **Save and Deploy:**
+    *   Click **Save and Deploy**.
+
+Cloudflare Pages will then build and deploy this specific sub-site.

healthcare_site/src/_includes/.gitkeep

@@ -0,0 +1 @@
+# Placeholder to create the directory structure.

healthcare_site/src/_includes/base.njk

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }} - Healthcare Information Portal</title>
+    {# The url filter will ensure the path is correct relative to the output #}
+    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
+  </head>
+  <body>
+    <header>
+      <h1>{{ title }}</h1>
+    </header>
+    <main>
+      {{ content | safe }}
+    </main>
+    <footer>
+      <p>&copy; 2024 Healthcare Site. All rights reserved.</p>
+    </footer>
+  </body>
+</html>

healthcare_site/src/css/.gitkeep

@@ -0,0 +1 @@
+# Placeholder to create the directory structure.

healthcare_site/src/css/style.css

@@ -0,0 +1,35 @@
+/* Basic styles for the healthcare site */
+body {
+  font-family: sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+  color: #333;
+}
+
+header {
+  background: #333;
+  color: #fff;
+  padding: 1rem 0;
+  text-align: center;
+}
+
+header h1 {
+  margin: 0;
+}
+
+main {
+  padding: 1rem;
+  margin: 1rem auto;
+  max-width: 800px;
+  background: #fff;
+}
+
+footer {
+  text-align: center;
+  padding: 1rem 0;
+  background: #333;
+  color: #fff;
+  margin-top: 2rem;
+}

healthcare_site/src/index.md

@@ -0,0 +1,18 @@
+---
+layout: base.njk
+title: Your Health, Our Priority
+---
+
+Welcome to our comprehensive healthcare portal. We are dedicated to providing you with reliable information and resources to manage your health and wellness.
+
+## Our Services
+Explore a wide range of services designed to meet your healthcare needs:
+*   General Health Information
+*   Specialist Directories
+*   Wellness Programs
+*   Latest Health News
+
+## Our Mission
+To empower individuals and communities with accessible and trustworthy health information, fostering a healthier future for everyone.
+
+Stay tuned for more updates and features!

package.json

@@ -14,11 +14,13 @@
   "scripts": {
     "build": "npm-run-all build:html build:css",
     "build:html": "eleventy",
-    "build:css": "postcss src/css/tailwind.css -o dist/css/styles.css",
+    "build:css": "postcss src/css/tailwind.css -o ../dist/css/styles.css",
     "watch:html": "ELEVENTY_ENV=dev eleventy --serve --port=8080 --quiet",
-    "watch:css": "postcss src/css/tailwind.css -o dist/css/styles.css --watch",
+    "watch:css": "postcss src/css/tailwind.css -o ../dist/css/styles.css --watch",
     "start": "npm-run-all --parallel watch:html watch:css",
-    "clean": "rm -rf dist"
+    "build:health": "cd healthcare_site && npx @11ty/eleventy && cd ..",
+    "serve:health": "cd healthcare_site && npx @11ty/eleventy --serve --port=8081 && cd ..",
+    "clean": "rm -rf dist healthcare_site/dist"
   },
   "dependencies": {
     "@11ty/eleventy": "^1.0.0",

src/site/README.md

@@ -0,0 +1,33 @@
+# Jamstack Site - Deployment Instructions for Cloudflare Pages
+
+This site is built using Eleventy and is ready for deployment on Cloudflare Pages.
+
+## Deployment Steps:
+
+1.  **Connect your Git repository to Cloudflare Pages:**
+    *   Go to your Cloudflare dashboard.
+    *   Navigate to **Workers & Pages** -> **Create application** -> **Pages** -> **Connect to Git**.
+    *   Select your repository where this code is hosted.
+
+2.  **Configure your build settings:**
+    *   **Project name:** Choose a name for your project.
+    *   **Production branch:** Select the branch you want to deploy (e.g., `main`, `master`).
+    *   **Framework preset:** Select `Eleventy` from the dropdown. Cloudflare should automatically detect it.
+    *   **Build command:** If not automatically set, use `npm run build` or `npx @11ty/eleventy`. Based on the current `package.json`, `npm run build` is appropriate.
+    *   **Build output directory:** This should be set to `dist`. Cloudflare's Eleventy preset should default to this.
+    *   **Root directory (advanced):** Leave this as is (repository root).
+    *   **Environment variables (advanced):** Add any necessary build-time environment variables here. For this project, if there are specific Node.js version requirements, you might set `NODE_VERSION`. Check the `package.json` "engines" field.
+
+3.  **Save and Deploy:**
+    *   Click **Save and Deploy**.
+
+Cloudflare Pages will now build and deploy your site. Subsequent pushes to your configured production branch will automatically trigger new deployments.
+
+## Local Development:
+
+To run this site locally:
+
+1.  Clone the repository.
+2.  Install dependencies: `npm install`
+3.  Start the development server: `npm start` (This usually runs Eleventy in serve mode and watches for changes).
+4.  Build for production: `npm run build` (This will generate the site in the `dist` folder).