Staging -> Main

.github/workflows/generate-page-index.yml

@@ -0,0 +1,39 @@
+name: Update Pages Index JSON
+
+on:
+  push:
+    paths:
+      - "site/**/*.html" # Trigger when any HTML file in /site is added or modified
+
+jobs:
+  update-pages-json:
+    runs-on: ubuntu-latest
+
+    steps:
+    # Step 1: Check out the repository
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Step 2: Run the script to generate pages.json
+    - name: Generate pages.json
+      run: |
+        chmod +x ./scripts/generate_pages_json.sh
+        ./scripts/generate_pages_json.sh
+
+    # Step 3: Check if pages.json has changes
+    - name: Check for changes
+      id: changes
+      run: |
+        git add ./site/assets/pages.json
+        git diff --cached --quiet || echo "has_changes=true" >> $GITHUB_ENV
+
+    # Step 4: Commit and push changes (if any)
+    - name: Commit and push changes
+      if: env.has_changes == 'true'
+      run: |
+        git config user.name "github-actions[bot]"
+        git config user.email "github-actions[bot]@users.noreply.github.com"
+        git commit -m "Update pages.json after new HTML page added"
+        git push
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/update-gh-pages.yml

@@ -18,5 +18,5 @@ jobs:
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: . # Deploy the root directory
+        publish_dir: ./site/ # Deploy the site directory
         publish_branch: gh-pages # The branch used for GitHub Pages

.github/workflows/update-json.yml

@@ -3,7 +3,7 @@ name: Update Files JSON
 on:
   push:
     paths:
-      - "data/*.csv" # Trigger only when CSV files in the data folder are added/modified
+      - "site/data/*.csv" # Trigger only when CSV files in the data folder are added/modified
 
 jobs:
   generate-json:
@@ -23,14 +23,14 @@ jobs:
     # Step 3: Run the bash script
     - name: Generate files.json
       run: |
-        chmod +x ./generate_file_json.sh
-        ./generate_file_json.sh
+        chmod +x ./scripts/generate_file_json.sh
+        ./scripts/generate_file_json.sh
 
     # Step 4: Check if there are changes
     - name: Check for changes
       id: changes
       run: |
-        git add ./data/files.json
+        git add ./site/data/files.json
         git diff --cached --quiet || echo "has_changes=true" >> $GITHUB_ENV
 
     # Step 5: Commit and push changes (if any)

README.md

@@ -10,6 +10,56 @@ This is a basic website designed to display TIP data from the weekly testnet eve
 
 We use GitHub Actions for deployment via GitHub Pages to the [testnets.hypha.coop](https://testnets.hypha.coop) domain. The staging branch is deployed to Netlify at [hubtestnets.netlify.app](https://hubtestnets.netlify.app/).  
 
+## Project structure
+
+- `scripts/` contains the code used for automating changes for the TIP data and the page index
+- `site/` holds all the code and assets for the deployed web site
+- `template/` has the page template to be used for creating new pages 
+- `.github/workflows` is where the github actions for building and deploying the site 
+
+## Creating new pages
+
+### From template  
+
+- Create a new folder in `site` and name it to match the new page title.
+- Copy `page-template.html` from `template` folder to the newly created folder.
+- In this new folder, rename `page-template.html` to `index.html`
+- Fill the template with your content.
+
+The elements in `{{ }}` needs to be populated by replacing these placeholders with the desired content:
+- {{pageTitle}}
+- {{pageDescription}}
+- {{pageSlug}}
+- {{mainHeading}}
+- {{subHeading}}
+- {{pageContent}}
+- {{pageContentContinued}} (optional)
+
+`pageSlug` should match the name of the folder that was just created. The social card image that will be displayed when sharing the link to this new page on social media should be placed in the same folder and named `share-card.png`. Sharte cards are created from screenshots of the page. Get in touch with Vincent if you need help with creating the share card. 
+
+We use distinct background images for each pages. The template currently reuses the background-image found on the home page by using the class `roots-bg`. This image is set on the body element with CSS. In `site/assets/styles.css`, on L36:
+
+```css
+  @media screen and (min-width: 65em) {
+    .roots-bg {
+        background-image: url(./images/trollius.webp);
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-size: 30%;
+    }
+    .canopy {
+      background-image: url(./images/new_canopy.webp);
+      background-repeat: no-repeat;
+      background-position: top right;
+      background-size: 30%;
+    }
+}
+```
+
+You can run the script titled `generate_page_json.sh` to update the navigation locally but this is optional since this script runs on build.
+When testing locally, you will need to run the script from the root directory:
+`./scripts/generate_pages_json.sh`
+
 ### Key Features
 
 - **Dynamic Banner**: displays announcements from `announcements.json`. If the `banner` value is empty, the banner will not be shown.
@@ -30,17 +80,17 @@ We use GitHub Actions for deployment via GitHub Pages to the [testnets.hypha.coo
 
 ### Root
 
-- `index.html`: The main HTML file for the site.
-- `assets/styles.css`: Styles for the site.
-- `assets/script.js`: The JavaScript logic for dynamically loading and displaying data.
-- `generate_file_json.sh`: A script to generate `files.json` based on the CSV files in the `/data` directory.
+- `site/index.html`: The main HTML file for the site.
+- `site/assets/styles.css`: Styles for the site.
+- `site/assets/script.js`: The JavaScript logic for dynamically loading and displaying data.
+- `scripts/generate_file_json.sh`: A script to generate `files.json` based on the CSV files in the `/data` directory.
 - `README.md`: Project documentation.
 
 ### Data
 
-- `data/files.json`: Lists available CSV files to populate the dropdown.
-- `data/announcements.json`: Contains the text for the announcement banner.
-- `data/*.csv`: CSV files containing TIP data (e.g., `january_2025.csv`).
+- `site/data/files.json`: Lists available CSV files to populate the dropdown.
+- `site/data/announcements.json`: Contains the text for the announcement banner.
+- `site/data/*.csv`: CSV files containing TIP data (e.g., `january_2025.csv`).
 
 ---
 
@@ -73,15 +123,15 @@ To test the site locally, you need to serve it through a web server:
 
 #### Using Python
 
-`python3 -m http.server 8000`
+`cd site && python3 -m http.server 8000`
 
 - Access the site at: http://localhost:8000
 
 #### Using Node.js
 
 ```javascript
 npm install -g http-server
-http-server .
+http-server ./site/
 ```
 - Access the site at: http://localhost:8080
 

generate_file_json.sh → scripts/generate_file_json.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Define the data folder and output file
-DATA_FOLDER="./data"
+DATA_FOLDER="./site/data"
 OUTPUT_FILE="$DATA_FOLDER/files.json"
 
 # Start the JSON array

scripts/generate_pages_json.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+BASE_DIR="site" 
+OUTPUT_FILE="site/assets/pages.json"
+
+# Function to scan directories and generate JSON
+scan_directories() {
+    local dir="$1"
+    local base_url="$2"
+    local pages=()
+
+    for file in "$dir"/*; do
+        if [ -d "$file" ]; then
+            local index_path="$file/index.html"
+            if [ -f "$index_path" ]; then
+                local title=$(basename "$file" | sed -e 's/-/ /g' | awk '{for(i=1;i<=NF;i++) $i=toupper(substr($i,1,1)) substr($i,2)}1')
+                local url="$base_url/$(basename "$file")/"
+                pages+=("{\"title\": \"$title\", \"url\": \"$url\"}")
+            fi
+            local sub_pages=$(scan_directories "$file" "$base_url/$(basename "$file")")
+            if [ -n "$sub_pages" ]; then
+                pages+=("$sub_pages")
+            fi
+        fi
+    done
+
+    echo "${pages[@]}" | jq -s '. | flatten'
+}
+
+# Generate pages.json
+scan_directories "$BASE_DIR" "" > "$OUTPUT_FILE"
+echo "Index generated: $(cat "$OUTPUT_FILE")"

about-the-program/index.html → site/about-the-program/index.html

@@ -11,15 +11,15 @@
     <!-- Open Graph / Facebook / LinkedIn -->
     <meta property="og:title" content="About the program">
     <meta property="og:description" content="Explore the Cosmos Hub Testnet program, brought to you by the Hub testnets team at Hypha Worker Co-op.">
-    <meta property="og:image" content="https://testnets.hypha.coop/assets/image/about-the-program.png">
-    <meta property="og:url" content="https://testnets.hypha.coop/">
+    <meta property="og:image" content="/share-card.png">
+    <meta property="og:url" content="https://testnets.hypha.coop/about-the-program/">
     <meta property="og:type" content="website">
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="About the program">
     <meta name="twitter:description" content="Explore the Cosmos Hub Testnet program, brought to you by the Hub testnets team at Hypha Worker Co-op.">
-    <meta name="twitter:image" content="https://testnets.hypha.coop/assets/image/about-the-program.png">
+    <meta name="twitter:image" content="/share-card.png">
     <meta name="twitter:site" content="@HyphaDoesCosmos">
 
 </head>

assets/header.css → site/assets/header.css

@@ -108,7 +108,7 @@ nav a:hover {
 }
 
 /* Mobile nav */
-@media (min-width: 620px) {
+@media (min-width: 1260px) {
   nav {
       padding-left: 1rem;
       margin-left: 1rem;
@@ -122,21 +122,23 @@ nav a:hover {
   nav a {
     padding: 0 1rem;
   }
-}
-
-@media (min-width: 1024px) {
-    .title {
-        font-size: 1.5rem; 
-    }
-    .container {
-        flex-direction: row;
-    }
-    nav ul {
-        margin-top: 0rem;
-    }
-    nav a {
-        font-size: 1.5rem;
-    }
+  .title {
+    font-size: 1.5rem; 
+  }
+  .container {
+    flex-direction: row;
+    align-items: center;
+  }
+  nav ul {
+    margin-top: 0rem;
+  }
+  nav a {
+    font-size: 1.5rem;
   }
+}
 
-
+@media (min-width: 620px) and (max-width: 1440px) {
+  nav a {
+    font-size: 1.25rem;
+  }
+}