🎨 Academic Project Page Template

✨ Features

• 🚀 Built with React + UIKit
• 📝 Just one file! Write all metadata & content in template.yaml
• 📝 Markdown support with full styling capabilities
• ➗ Mathematical equations with KaTeX
• 🎨 Customizable themes
• 🔄 Auto-deployment with GitHub Actions
• 📱 Fully responsive design

🌐 Demo: default-theme | classic-theme

⚙️ Configuration

Simply define everything in a single template.yaml file—metadata, Markdown, HTML, and even KaTeX equations. No extra setup required!

theme: default # default || dark
organization: 'Your Lab'
title: 'Project Title'
resources:
  paper: https://example.com/paper
  code: https://github.com/your/repo
# ... other configurations

With just this file, your project page is ready to go! 🚀

🚦 Prerequisites

System Requirements

Supported platforms:

• 🪟 Windows (WSL)
• 🐧 Linux
• 🍎 macOS

📦 Node.js Setup

Recommended: Install Node.js using Volta

# Install Volta
curl https://get.volta.sh/ | bash

# After restarting your shell...
volta install [email protected]
volta pin [email protected]

# Verify installation
node --version  # v22.13.1
npm --version   # 10.9.2

🛠️ Development Guide

📥 Installation

npm install

💻 Development Server

npm run dev

🏗️ Build

npm run clean
npm run build
npm run preview

🤖 Puppeteer Dependencies (for react-snap pre-rendering)

Required packages for Headless Chrome (pre-rendering):

sudo apt install -y libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb libgbm-dev fonts-ipafont

🎨 Customization

• 💅 Customize styles without writing CSS: modify UIKit variables in src/scss/theme.scss
• 🧩 Extend components with:
  • UIKit Components
  • React Icons

📁 Project Structure

template.yaml         # Configuration file
index.html            # Root HTML
src/
├── components/       # React components
├── js/
│   └── styles.js     # Style settings
├── pages/
│   └── index.jsx     # Main template
└── scss/             # Theme settings
    └── theme.scss
public/
└── 001.png           # Media files

🚀 Release Your Project Page

Automatic Deployment with GitHub Actions

1. Go to your repository's Settings > Pages
2. Under Build and Deployment > Source, select GitHub Actions
3. Configure your remote repository:

git remote add origin your-repo-url
git push origin project-page

Note

The implementation of the paper is published in the main branch, and the code for the project page is expected to be pushed to a separate branch. If you want to change the branch settings, please modify .github/workflows/deploy.yaml.

🚨 TroubleShooting

Branch "project-page" is not allowed to deploy to github-pages due to environment protection rules

Navigate to Settings > Environments > github-pages > 🗑️ or set rules properly (add `project-page` to deployable branch). https://docs.github.com/ja/actions/managing-workflow-runs-and-deployments/managing-deployments/managing-environments-for-deployment#deployment-protection-rules

📚 For more details:

• GitHub Pages Documentation
• actions-deploy-pages

🐶 Husky & Typo Checking

Automatic Typo Checking

This project uses Husky to automatically check for typos during commits. The check is performed using the typos tool and only runs on staged files (files that have been git added). If you want to ignore specific typos as a dictionary, please add the original and corrected versions to _typos.toml. (doc)

[default.extend-words]
# Don't correct the surname "Teh"
teh = "teh"

Manual Typo Checking

To manually check for typos without committing:

npx typos

This command checks all files in the project, regardless of whether they are staged for commit or not.

Disabling Git Hooks

To temporarily disable all git hooks (including lint, format, and typo validation) during commit:

export HUSKY=0

You can re-enable hooks by unsetting the variable or starting a new terminal session.

📄 License

CC-BY-SA 4.0