|
| 1 | +# Copilot Coding Agent Instructions |
| 2 | + |
| 3 | +## Repository Overview |
| 4 | + |
| 5 | +**al-folio** is a simple, clean, and responsive [Jekyll](https://jekyllrb.com/) theme for academics and researchers. It enables users to create professional portfolio and blog websites with minimal configuration. The repository serves both as a template and as a reference implementation. |
| 6 | + |
| 7 | +- **Type:** Jekyll static site generator template |
| 8 | +- **Target Users:** Academics, researchers, and professionals |
| 9 | +- **Key Features:** CV display, publication bibliography, blog posts, projects, news/announcements, course listings |
| 10 | + |
| 11 | +## Tech Stack & Versions |
| 12 | + |
| 13 | +**Core Technologies:** |
| 14 | + |
| 15 | +- **Jekyll:** v4.x (Ruby static site generator) |
| 16 | +- **Ruby:** 3.3.5 (primary CI/CD version), 3.2.2 (some workflows) |
| 17 | +- **Python:** 3.13 (for nbconvert, jupyter notebook support) |
| 18 | +- **Node.js:** Latest (for purgecss and prettier) |
| 19 | +- **Docker:** Uses prebuilt image `amirpourmand/al-folio:v0.16.3` (Ruby slim-based) |
| 20 | + |
| 21 | +**Build Dependencies (from Gemfile):** |
| 22 | + |
| 23 | +- `jekyll-scholar` – Bibliography management |
| 24 | +- `jekyll-archives-v2` – Archive page generation |
| 25 | +- `jekyll-jupyter-notebook` – Jupyter notebook embedding |
| 26 | +- `jekyll-minifier` – CSS/JS minification |
| 27 | +- `jekyll-paginate-v2` – Pagination |
| 28 | +- `jekyll-toc` – Table of contents generation |
| 29 | +- `jekyll-tabs` – Tab UI components |
| 30 | +- `classifier-reborn` – Related posts calculation |
| 31 | +- `jemoji` – Emoji support |
| 32 | +- Multiple other specialized jekyll plugins |
| 33 | + |
| 34 | +**Code Quality Tools:** |
| 35 | + |
| 36 | +- **Prettier:** v3.8.0+ with `@shopify/prettier-plugin-liquid` – Code formatter (mandatory for PRs) |
| 37 | +- **Purgecss:** CSS purification for production builds |
| 38 | + |
| 39 | +## Building & Local Development |
| 40 | + |
| 41 | +### Docker (Recommended Approach) |
| 42 | + |
| 43 | +**Always use Docker for local development.** This ensures consistency with CI/CD and avoids Ruby/Python environment issues. |
| 44 | + |
| 45 | +**Initial Setup:** |
| 46 | + |
| 47 | +```bash |
| 48 | +docker compose pull # Pull prebuilt image |
| 49 | +docker compose up # Start development server |
| 50 | +# Site runs at http://localhost:8080 |
| 51 | +``` |
| 52 | + |
| 53 | +**Rebuilding with Updated Dependencies:** |
| 54 | + |
| 55 | +```bash |
| 56 | +docker compose up --build # Rebuilds Docker image from Dockerfile |
| 57 | +docker compose up --force-recreate # Forces complete rebuild |
| 58 | +``` |
| 59 | + |
| 60 | +**For slim Docker image (if image size is critical):** |
| 61 | + |
| 62 | +```bash |
| 63 | +docker compose -f docker-compose-slim.yml up |
| 64 | +``` |
| 65 | + |
| 66 | +**If Docker build fails:** |
| 67 | + |
| 68 | +- Check disk space and available RAM |
| 69 | +- Kill any existing jekyll processes: `docker compose down` |
| 70 | +- For M1/M2 Mac: Ensure Docker Desktop is up-to-date |
| 71 | +- Linux users may need Docker group permissions: `sudo usermod -aG docker $USER` (then logout/login) |
| 72 | + |
| 73 | +### Bundle/Jekyll (Legacy, Use Docker Instead) |
| 74 | + |
| 75 | +```bash |
| 76 | +bundle install # Install Ruby gems |
| 77 | +pip install jupyter # Install Python dependencies |
| 78 | +bundle exec jekyll serve --port 4000 # Run at http://localhost:4000 |
| 79 | +``` |
| 80 | + |
| 81 | +### Important Build Requirements |
| 82 | + |
| 83 | +- **ImageMagick must be installed** – Required for image processing plugins |
| 84 | + - Docker: Installed automatically |
| 85 | + - Local: `sudo apt-get install imagemagick` (Linux) or `brew install imagemagick` (Mac) |
| 86 | +- **nbconvert must be upgraded before build** – `pip3 install --upgrade nbconvert` |
| 87 | +- **Always set JEKYLL_ENV=production for production builds** – Required for CSS/JS minification |
| 88 | + |
| 89 | +## Project Layout & Key Files |
| 90 | + |
| 91 | +### Root Directory Structure |
| 92 | + |
| 93 | +- `_config.yml` – **Primary configuration file** (title, author, URLs, baseurl, feature flags) |
| 94 | +- `_data/` – YAML data files (socials.yml, coauthors.yml, cv.yml, citations.yml, venues.yml, repositories.yml) |
| 95 | +- `_includes/` – Reusable Liquid template components |
| 96 | +- `_layouts/` – Page layout templates (about.liquid, post.liquid, bib.liquid, distill.liquid, cv.liquid, etc.) |
| 97 | +- `_pages/` – Static pages (about.md, cv.md, publications.md, projects.md, teaching.md, etc.) |
| 98 | +- `_posts/` – Blog posts (format: YYYY-MM-DD-title.md) |
| 99 | +- `_projects/` – Project showcase entries |
| 100 | +- `_news/` – News/announcement entries |
| 101 | +- `_teachings/` – Course and teaching entries |
| 102 | +- `_bibliography/papers.bib` – BibTeX bibliography for publications |
| 103 | +- `_sass/` – SCSS stylesheets |
| 104 | +- `assets/img/` – Images, profile pictures |
| 105 | +- `_scripts/` – JavaScript files for functionality |
| 106 | +- `purgecss.config.js` – PurgeCSS configuration for production CSS optimization |
| 107 | +- `Gemfile` & `Gemfile.lock` – Ruby dependency specifications |
| 108 | +- `package.json` – Node.js dependencies (prettier only) |
| 109 | +- `Dockerfile` – Docker image definition |
| 110 | +- `docker-compose.yml` – Docker compose configuration |
| 111 | + |
| 112 | +### Configuration Priority |
| 113 | + |
| 114 | +When making changes: |
| 115 | + |
| 116 | +1. **Always start with `_config.yml`** for site-wide settings |
| 117 | +2. **Feature flags are in `_config.yml`** – Look for `enabled: true/false` options |
| 118 | +3. **Social media links:** `_data/socials.yml` |
| 119 | +4. **Content data:** Respective `_data/*.yml` files |
| 120 | +5. **Styling:** `_sass/` directory (uses SCSS) |
| 121 | + |
| 122 | +## CI/CD Pipeline & Validation |
| 123 | + |
| 124 | +### GitHub Workflows (in `.github/workflows/`) |
| 125 | + |
| 126 | +- **deploy.yml** – Main deployment workflow (runs on push/PR to main/master) |
| 127 | + - Sets up Ruby 3.3.5, Python 3.13 |
| 128 | + - Installs imagemagick, nbconvert |
| 129 | + - Runs `bundle exec jekyll build` with JEKYLL_ENV=production |
| 130 | + - Runs purgecss for CSS optimization |
| 131 | + - Commits built site to gh-pages branch |
| 132 | + - **Triggers on:** Changes to site files, assets, config (NOT documentation files alone) |
| 133 | + |
| 134 | +- **prettier.yml** – Code formatting validation (mandatory) |
| 135 | + - Runs prettier on all files |
| 136 | + - **Fails PRs if code is not properly formatted** |
| 137 | + - Generates HTML diff artifact on failure |
| 138 | + - Must install prettier locally to avoid failures: `npm install prettier @shopify/prettier-plugin-liquid` |
| 139 | + |
| 140 | +- **broken-links.yml, broken-links-site.yml** – Link validation |
| 141 | +- **axe.yml** – Accessibility testing |
| 142 | +- **codeql.yml** – Security scanning |
| 143 | +- **update-citations.yml** – Automatic citation updates |
| 144 | +- **render-cv.yml** – CV rendering from RenderCV format |
| 145 | + |
| 146 | +### Pre-commit Requirements |
| 147 | + |
| 148 | +**You must run these locally before pushing:** |
| 149 | + |
| 150 | +1. **Prettier formatting (mandatory):** |
| 151 | + |
| 152 | +```bash |
| 153 | +npm install --save-dev prettier @shopify/prettier-plugin-liquid |
| 154 | +npx prettier . --write |
| 155 | +``` |
| 156 | + |
| 157 | +2. **Local build test with Jekyll:** |
| 158 | + |
| 159 | +```bash |
| 160 | +docker compose pull && docker compose up |
| 161 | +# Let it build (wait 30-60 seconds) |
| 162 | +# Visit http://localhost:8080 and verify site renders correctly |
| 163 | +# Exit with Ctrl+C |
| 164 | +``` |
| 165 | + |
| 166 | +3. **Or run full build simulation:** |
| 167 | + |
| 168 | +```bash |
| 169 | +docker compose up --build |
| 170 | +bundle exec jekyll build |
| 171 | +# Check for errors in output |
| 172 | +``` |
| 173 | + |
| 174 | +## Common Pitfalls & Workarounds |
| 175 | + |
| 176 | +### YAML Syntax Errors in \_config.yml |
| 177 | + |
| 178 | +- **Problem:** Special characters (`:`, `&`, `#`) in values cause parse errors |
| 179 | +- **Solution:** Quote string values: `title: "My: Cool Site"` |
| 180 | +- **Debug:** Run locally to see detailed error: `bundle exec jekyll build` |
| 181 | + |
| 182 | +### "Unknown tag 'toc'" Error on Deployment |
| 183 | + |
| 184 | +- **Problem:** Deploy succeeds locally but fails on GitHub Actions |
| 185 | +- **Cause:** Jekyll plugins don't load properly |
| 186 | +- **Solution:** Verify gh-pages branch is set as deployment source in Settings → Pages |
| 187 | + |
| 188 | +### CSS/JS Not Loading After Deploy |
| 189 | + |
| 190 | +- **Problem:** Site loads but has no styling |
| 191 | +- **Cause:** Incorrect `url` and `baseurl` in `_config.yml` |
| 192 | +- **Fix:** |
| 193 | + - Personal site: `url: https://username.github.io`, `baseurl:` (empty) |
| 194 | + - Project site: `url: https://username.github.io`, `baseurl: /repo-name/` |
| 195 | + - Clear browser cache (Ctrl+Shift+Del or private browsing) |
| 196 | + |
| 197 | +### Prettier Formatting Failures |
| 198 | + |
| 199 | +- **Problem:** PR fails prettier check after local builds passed |
| 200 | +- **Solution:** Run prettier before committing: |
| 201 | + ```bash |
| 202 | + npx prettier . --write |
| 203 | + git add . && git commit -m "Format code with prettier" |
| 204 | + ``` |
| 205 | + |
| 206 | +### Port 8080 or 4000 Already in Use |
| 207 | + |
| 208 | +- **Docker:** `docker compose down` then `docker compose up` |
| 209 | +- **Ruby:** Kill process: `lsof -i :4000 | grep LISTEN | awk '{print $2}' | xargs kill` |
| 210 | + |
| 211 | +### Related Posts Errors ("Zero vectors cannot be normalized") |
| 212 | + |
| 213 | +- **Cause:** Empty blog posts or posts with only stop words confuse classifier-reborn |
| 214 | +- **Solution:** Add meaningful content to posts, or set `related_posts: false` in post frontmatter |
| 215 | + |
| 216 | +## File Format Specifications |
| 217 | + |
| 218 | +### Blog Post Frontmatter (\_posts/) |
| 219 | + |
| 220 | +```yaml |
| 221 | +--- |
| 222 | +layout: post |
| 223 | +title: Post Title |
| 224 | +date: YYYY-MM-DD |
| 225 | +categories: category-name |
| 226 | +--- |
| 227 | +``` |
| 228 | + |
| 229 | +### Project Frontmatter (\_projects/) |
| 230 | + |
| 231 | +```yaml |
| 232 | +--- |
| 233 | +layout: page |
| 234 | +title: Project Name |
| 235 | +description: Short description |
| 236 | +img: /assets/img/project-image.jpg |
| 237 | +importance: 1 |
| 238 | +--- |
| 239 | +``` |
| 240 | + |
| 241 | +### BibTeX Format (papers.bib) |
| 242 | + |
| 243 | +- Standard BibTeX format |
| 244 | +- al-folio supports custom keywords: `pdf`, `code`, `preview`, `doi`, etc. |
| 245 | +- Check CUSTOMIZE.md for custom bibtex keyword documentation |
| 246 | + |
| 247 | +## Trust These Instructions |
| 248 | + |
| 249 | +This guidance documents the tested, working build process and project structure. **Trust these instructions and only perform additional searches if:** |
| 250 | + |
| 251 | +1. Specific information contradicts what you observe in the codebase |
| 252 | +2. You need implementation details beyond what's documented |
| 253 | +3. Error messages reference features or files not mentioned here |
| 254 | + |
| 255 | +The instructions are designed to reduce unnecessary exploration and allow you to focus on code changes. |
0 commit comments