Skip to content

Commit fa36a4a

Browse files
bigBrodyGbigBrodyG
committed
page_v0.5
1 parent 605e003 commit fa36a4a

8 files changed

Lines changed: 1222 additions & 5 deletions

File tree

‎.github/workflows/README.md‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,39 @@
11
# 🚀 GitHub Actions Workflows
22

3-
Questa directory contiene i workflow per CI/CD del Web Scraper.
3+
Questa directory contiene i workflow per CI/CD e automazione del repository.
44

55
## 📋 Workflows Disponibili
66

7-
### 1. **docker-build.yml** (Attivo di default)
7+
### 1. **generate-index.yml** ⭐ (Nuovo!)
8+
Genera automaticamente la pagina index con tutti i progetti ed esercizi.
9+
10+
**Trigger:**
11+
- Push su main quando vengono modificati file HTML, Python o JavaScript
12+
- Esecuzione manuale
13+
14+
**Cosa fa:**
15+
1. Scansiona tutte le directory del repository
16+
2. Genera automaticamente `index.html` con lista di tutti i progetti
17+
3. Commit e push automatico delle modifiche
18+
19+
**Benefici:**
20+
- ✨ Zero manutenzione - l'indice si aggiorna da solo
21+
- 🎯 Mostra sempre i progetti correnti
22+
- 🚀 Funziona con future aggiunte senza modifiche
23+
24+
### 2. **deploy-pages.yml**
25+
Deploy del sito statico su GitHub Pages.
26+
27+
**Trigger:** Push su main (modifiche in `Threads_exercises/`)
28+
**Output:** Sito pubblicato su GitHub Pages
29+
30+
### 3. **docker-build.yml** (Attivo di default)
831
Build automatico dell'immagine Docker e push su GitHub Container Registry.
932

1033
**Trigger:** Push su main, PR, manuale
1134
**Output:** Immagine Docker su `ghcr.io`
1235

13-
### 2. **test-and-lint.yml** (Consigliato)
36+
### 4. **test-and-lint.yml** (Consigliato)
1437
Test automatici, linting e validazione del codice.
1538

1639
**Trigger:** Push su main/develop, PR
@@ -20,7 +43,7 @@ Test automatici, linting e validazione del codice.
2043
- Test build Docker
2144
- Health check del container
2245

23-
### 3. **deploy-railway.yml**
46+
### 5. **deploy-railway.yml**
2447
Deploy automatico su Railway.app
2548

2649
**Setup richiesto:**

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: Generate Project Index
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- '**/*.html'
9+
- '**/*.py'
10+
- '**/*.js'
11+
- '**/*.mjs'
12+
- 'generate_index.py'
13+
workflow_dispatch:
14+
15+
permissions:
16+
contents: write
17+
18+
jobs:
19+
generate-index:
20+
runs-on: ubuntu-latest
21+
22+
steps:
23+
- name: Checkout repository
24+
uses: actions/checkout@v4
25+
with:
26+
fetch-depth: 0
27+
28+
- name: Set up Python
29+
uses: actions/setup-python@v4
30+
with:
31+
python-version: '3.11'
32+
33+
- name: Generate index.html
34+
run: |
35+
python generate_index.py
36+
37+
- name: Check for changes
38+
id: check_changes
39+
run: |
40+
git diff --quiet index.html || echo "changed=true" >> $GITHUB_OUTPUT
41+
42+
- name: Commit and push if changed
43+
if: steps.check_changes.outputs.changed == 'true'
44+
run: |
45+
git config --local user.email "github-actions[bot]@users.noreply.github.com"
46+
git config --local user.name "github-actions[bot]"
47+
git add index.html
48+
git commit -m "🤖 Auto-update project index [skip ci]"
49+
git push
50+
51+
- name: Summary
52+
run: |
53+
echo "## 🎉 Index Generation Complete!" >> $GITHUB_STEP_SUMMARY
54+
echo "" >> $GITHUB_STEP_SUMMARY
55+
echo "The project index has been updated successfully." >> $GITHUB_STEP_SUMMARY
56+
echo "" >> $GITHUB_STEP_SUMMARY
57+
if [ "${{ steps.check_changes.outputs.changed }}" == "true" ]; then
58+
echo "✅ Changes detected and committed" >> $GITHUB_STEP_SUMMARY
59+
else
60+
echo "ℹ️ No changes detected" >> $GITHUB_STEP_SUMMARY
61+
fi

‎INDEX_SYSTEM.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# 📚 Project Index System Documentation
2+
3+
## Overview
4+
5+
This repository features an automated project indexing system that creates a beautiful, responsive web page displaying all projects and exercises. The system automatically updates whenever new files are added!
6+
7+
## 🎯 Key Features
8+
9+
- **Automatic Discovery**: Scans all directories for HTML, Python, and JavaScript files
10+
- **Beautiful UI**: Modern gradient design with card-based layout
11+
- **Live Statistics**: Shows total categories and file counts
12+
- **Responsive Design**: Works perfectly on desktop and mobile devices
13+
- **Zero Maintenance**: GitHub Actions handles everything automatically
14+
- **Future-Proof**: Works with any new projects you add
15+
16+
## 📁 Files
17+
18+
### 1. `generate_index.py`
19+
Python script that scans the repository and generates `index.html`.
20+
21+
**What it does:**
22+
- Scans all directories (except hidden ones and `node_modules`)
23+
- Collects all HTML, Python, and JavaScript files
24+
- Generates a beautiful index page with:
25+
- File names and types
26+
- File sizes
27+
- Last modification dates
28+
- Direct links to each file
29+
30+
**Usage:**
31+
```bash
32+
python generate_index.py
33+
```
34+
35+
### 2. `index.html` (Generated)
36+
The main landing page for your repository. This file is auto-generated and should not be edited manually.
37+
38+
**Features:**
39+
- Clean, modern design with purple gradient background
40+
- Card-based layout for each file
41+
- Responsive grid that adapts to screen size
42+
- Color-coded file type badges (HTML=red, Python=blue, JS=yellow)
43+
- Click any card to open that file
44+
45+
### 3. `.github/workflows/generate-index.yml`
46+
GitHub Action workflow that automatically runs the generator.
47+
48+
**Triggers:**
49+
- When you push HTML, Python, or JavaScript files to `main` branch
50+
- Manual trigger via GitHub Actions UI
51+
52+
**What it does:**
53+
1. Runs `generate_index.py`
54+
2. Checks if `index.html` changed
55+
3. Automatically commits and pushes changes
56+
4. Uses `[skip ci]` to prevent infinite loops
57+
58+
## 🚀 How to Use
59+
60+
### View the Index
61+
62+
Once deployed to GitHub Pages, visit:
63+
```
64+
https://bigbrodyg.github.io/DIYJavaScript/
65+
```
66+
67+
Or open `index.html` locally in your browser.
68+
69+
### Add New Projects
70+
71+
Simply add your files to any directory:
72+
73+
```bash
74+
# Example: Add a new exercise
75+
mkdir my-new-project
76+
echo "console.log('Hello World!');" > my-new-project/app.js
77+
78+
# Commit and push
79+
git add .
80+
git commit -m "Add new project"
81+
git push
82+
```
83+
84+
The index will automatically update within 1-2 minutes! 🎉
85+
86+
### Manual Generation
87+
88+
If you want to generate the index locally:
89+
90+
```bash
91+
python generate_index.py
92+
```
93+
94+
## 🎨 Customization
95+
96+
### Modify Styles
97+
98+
Edit the `<style>` section in `generate_index.py` (in the `generate_html` function):
99+
100+
```python
101+
# Change the gradient colors
102+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
103+
104+
# Change card colors
105+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
106+
```
107+
108+
### Add File Types
109+
110+
To include additional file types, modify the `scan_directory` function:
111+
112+
```python
113+
if ext in ['.html', '.htm', '.py', '.js', '.mjs', '.css', '.json']: # Add more extensions
114+
```
115+
116+
### Exclude Directories
117+
118+
To exclude specific directories, modify the `main` function:
119+
120+
```python
121+
excluded_dirs = ['.git', 'node_modules', 'dist', 'build', 'venv']
122+
if item.is_dir() and item.name not in excluded_dirs:
123+
```
124+
125+
## 🔧 Troubleshooting
126+
127+
### Index Not Updating
128+
129+
1. Check the Actions tab on GitHub
130+
2. Look for the "Generate Project Index" workflow
131+
3. Check for any errors in the workflow logs
132+
4. Ensure the workflow has `contents: write` permission
133+
134+
### Manual Trigger
135+
136+
If you need to manually trigger the workflow:
137+
1. Go to GitHub → Actions
138+
2. Select "Generate Project Index"
139+
3. Click "Run workflow"
140+
141+
### Local Testing
142+
143+
Test the generator locally before pushing:
144+
145+
```bash
146+
python generate_index.py
147+
# Open index.html in your browser to preview
148+
```
149+
150+
## 📊 Statistics
151+
152+
The index automatically displays:
153+
- Total number of categories (directories with files)
154+
- Total number of indexed files
155+
- Files per category
156+
- File sizes and modification dates
157+
158+
## 🌟 Best Practices
159+
160+
1. **Organize by Category**: Keep related files in the same directory
161+
2. **Use Descriptive Names**: File names appear on the index
162+
3. **Add README Files**: Document your projects (not indexed, but useful)
163+
4. **Keep It Clean**: Remove or archive old/unused projects
164+
165+
## 🚦 Workflow Status
166+
167+
Check the workflow status in the README badges or the Actions tab:
168+
169+
[![Generate Index](https://github.com/bigBrodyG/DIYJavaScript/actions/workflows/generate-index.yml/badge.svg)](https://github.com/bigBrodyG/DIYJavaScript/actions/workflows/generate-index.yml)
170+
171+
## 💡 Tips
172+
173+
- The index shows the last modification date - useful for tracking recent changes
174+
- File sizes help identify large files that might need optimization
175+
- Color-coded badges make it easy to identify file types at a glance
176+
- The responsive design works great on mobile for quick browsing
177+
178+
## 🎓 Learning Opportunity
179+
180+
This system demonstrates:
181+
- Python file system operations
182+
- HTML/CSS for modern web design
183+
- GitHub Actions automation
184+
- CI/CD best practices
185+
- Template generation
186+
187+
Feel free to study the code and adapt it for your own projects!
188+
189+
## 📝 License
190+
191+
Same as the main repository.

‎README.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,24 @@
55
![Web Wizardry 🖥️✨](https://img.shields.io/badge/Web-Wizardry-43BE2E?style=for-the-badge&logo=visualstudiocode)
66
![Async Ninja 🥷](https://img.shields.io/badge/Async-Ninja-black?style=for-the-badge&logo=codewars)
77
![Lab Ready 🚦](https://img.shields.io/badge/Lab%20Ready-Green-lightgreen?logo=githubactions&style=for-the-badge)
8-
![Last Commit](https://img.shields.io/github/last-commit/bigBrodyG/DIYJavaScript?style=for-the-badge)
8+
![Last Commit](https://img.shields.io/github/last-commit/bigBrodyG/DIYJavaScript?style=for-the-badge)
9+
10+
## 🌐 Live Project Index
11+
12+
**[📁 View All Projects & Exercises](https://bigbrodyg.github.io/DIYJavaScript/)**
13+
14+
All projects and exercises are automatically catalogued and displayed on our beautiful index page! The index is automatically updated via GitHub Actions whenever you add new files.
15+
16+
## ✨ Features
17+
18+
- 🤖 **Automatic Discovery**: GitHub Actions automatically scans and indexes all projects
19+
- 🎨 **Beautiful UI**: Modern, responsive design with gradient backgrounds
20+
- 📊 **Live Statistics**: Real-time counts of categories and files
21+
- 🔄 **Auto-Updates**: Index regenerates automatically on every push
22+
- 📱 **Mobile Friendly**: Fully responsive design for all devices
23+
24+
## 📂 Project Structure
25+
26+
- **fundamentals/**: JavaScript fundamentals and basic exercises
27+
- **Threads_exercises/**: Threading and web scraping projects
28+
- More categories coming soon!

0 commit comments

Comments
 (0)