Refactor entire website into jinja based template (#14)

* Refactor entire website into jinja based template

* copy CNAME to dist directory

* Add GitHub Pages deployment workflow

Author: carlosejimenez

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.x'
+          
+      - name: Install dependencies
+        run: pip install -r requirements.txt
+        
+      - name: Build site
+        run: python build.py
+        
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          branch: gh-pages
+          clean: true 

.gitignore

@@ -1,2 +1,17 @@
 .DS_Store
 
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+venv/
+
+# Distribution / packaging
+dist/
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+

Makefile

@@ -0,0 +1,38 @@
+# Simple Makefile for SWE-bench website
+
+.PHONY: help venv install build serve clean
+
+# Default target: show help
+default: help
+
+help:
+	@echo "Available commands:"
+	@echo "  make venv      - Create and activate a virtual environment"
+	@echo "  make install   - Install Python dependencies from requirements.txt"
+	@echo "  make build     - Generate all HTML pages from templates"
+	@echo "  make serve     - Start a local development server (http://localhost:8000)"
+	@echo "  make clean     - Remove generated HTML files"
+
+venv:
+	@echo "Creating virtual environment..."
+	python3 -m venv venv
+	@echo "Virtual environment created. Activate with 'source venv/bin/activate'"
+
+install:
+	@echo "Installing dependencies..."
+	pip install -r requirements.txt
+
+build:
+	@echo "Building HTML pages..."
+	python3 build.py
+	@echo "Build complete."
+
+serve:
+	make build
+	@echo "Starting local server at http://localhost:8000 ... Press Ctrl+C to stop."
+	cd dist && python3 -m http.server 8000
+
+clean:
+	@echo "Cleaning generated files..."
+	rm -rf dist
+	@echo "Clean complete." 

build.py

@@ -0,0 +1,68 @@
+#!/usr/bin/env python3
+import json
+import pathlib
+import shutil
+from jinja2 import Environment, FileSystemLoader, select_autoescape
+
+
+ROOT = pathlib.Path(__file__).parent
+TEMPLATES = ROOT / "templates"
+DIST = ROOT / "dist"
+
+def get_pages():
+    pages = {}
+    pages_dir = TEMPLATES / "pages"
+    for file in pages_dir.glob("*.html"):
+        template_path = f"pages/{file.name}"
+        output_file = file.name
+        pages[template_path] = output_file
+    return pages
+
+PAGES = get_pages()
+
+
+def main() -> None:
+    # set up Jinja environment
+    env = Environment(
+        loader=FileSystemLoader(TEMPLATES),
+        autoescape=select_autoescape(["html"])
+    )
+    
+    # start fresh each run
+    if DIST.exists():
+        shutil.rmtree(DIST)
+    DIST.mkdir()
+    
+    # copy static assets
+    if (ROOT / "css").exists():
+        shutil.copytree(ROOT / "css", DIST / "css")
+    if (ROOT / "img").exists():
+        shutil.copytree(ROOT / "img", DIST / "img")
+    if (ROOT / "js").exists():
+        shutil.copytree(ROOT / "js", DIST / "js")
+    if (ROOT / "favicon.ico").exists():
+        shutil.copy(ROOT / "favicon.ico", DIST / "favicon.ico")
+    if (ROOT / "CNAME").exists():
+        shutil.copy(ROOT / "CNAME", DIST / "CNAME")
+    else:
+        raise FileNotFoundError("CNAME file not found. Please create a CNAME file in the root directory.")
+    
+    # load data
+    with open(ROOT / "data/leaderboards.json", "r") as f:
+        leaderboards = json.load(f)
+    
+    # render all pages
+    for tpl_name, out_name in PAGES.items():
+        tpl = env.get_template(tpl_name)
+        html = tpl.render(
+            title="SWE-bench", 
+            leaderboards=leaderboards["leaderboards"] if isinstance(leaderboards, dict) else leaderboards
+        )
+        (DIST / out_name).write_text(html)
+        print(f"built {out_name}")
+    
+    print("All pages generated successfully!")
+
+
+if __name__ == "__main__":
+    main()

css/README.md

@@ -0,0 +1,65 @@
+# SWE-bench CSS Architecture
+
+This CSS architecture follows a simplified component-based approach with a focus on maintainability and reusability.
+
+## Structure
+
+```
+css/
+|
+|– core.css                 # Core styles (variables, fonts, typography, base)
+|– layout.css               # Layout components (grid, containers, spacing)
+|– components.css           # UI components (buttons, forms, tables, cards)
+|– pages.css                # Page-specific styles
+|– utilities.css            # Utility classes
+|– vendors/                 # Third-party CSS
+|   |– normalize.css        # Normalize.css (reset)
+|
+|– dmsans/                  # DM Sans font files
+|
+`– main.css                 # Primary CSS file that imports all modules
+```
+
+## Usage
+
+All styles are imported through the main.css file. Individual CSS files are modular and focus on a specific category of styles.
+
+## Design Tokens
+
+Global design tokens are defined in the core.css file, including:
+
+- Colors
+- Typography
+- Spacing
+- Border radius
+- Shadows
+- Z-index
+- Animations/transitions
+
+## Naming Conventions
+
+- Component-based naming convention is used for component classes
+- Utility classes follow a consistent pattern:
+  - `.d-` for display utilities
+  - `.m-` and `.p-` for margin and padding
+  - `.text-` for text utilities
+  - `.bg-` for background colors
+  - `.border-` for border utilities
+  - `.position-` for positioning utilities
+
+## Responsive Design
+
+The layout is mobile-first with breakpoints:
+
+- Small: up to 576px
+- Medium: 577px to 768px
+- Large: 769px to 992px
+- X-Large: 993px and up
+
+## Advantages of This Architecture
+
+1. **Simplified structure**: Reduces the number of files while maintaining separation of concerns
+2. **Easier maintenance**: Related styles are grouped together
+3. **Reduced file size**: Less duplication and overhead
+4. **Better organization**: Clear categorization of styles
+5. **Faster development**: Utility classes enable rapid prototyping