🎨 sinicx-template

• A project page template built with ⚛️ React + 🎨 UIKit
• Demo: ⛅light-theme / src 🕶️ dark-theme / src

Tip

You can switch themes by setting theme field in template.yaml

theme: default # default || dark

🚀 Getting Started

📋 Prerequisites | 🪟WSL 🐧Linux 🍎MacOS

🔧 Node.js Installation

We recommend using Volta for Node.js version management:

curl https://get.volta.sh/ | bash

# Restart your shell (The configurations is automatically added to your *shrc || *shenv)
# export VOLTA_HOME="$HOME/.volta"
# export PATH="$VOLTA_HOME/bin:$PATH"

volta install node@20.11.0
volta pin node@20.11.0

Verify installation:

node --version  # Should show v20.11.0
npm --version   # Should show 10.2.4+

🛠️ Development

📥 Installation

npm install

💻 Development Mode

npm run dev

🏗️ Production Mode

npm run clean
npm run build
npm run preview

🖥️ Puppeteer Dependencies

Required for pre-rendering React apps with react-snap:

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

If the react-snap post-build process completes successfully, you should see a message similar to this:

✓ built in 5.01s
> sinicx-template@2.0.0 postbuild
> react-snap

💬  console.log at /: Unrecognized Content-Security-Policy directive 'require-trusted-types-for'.

💬  console.log at /: SecurityError: Blocked a frame with origin "https://speakerdeck.com" from accessing a cross-origin frame.
💬  console.log at /: 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
✅  crawled 1 out of 1 (/)

📋 Template

Complete template.yaml by filling in the required values. Use null for any unavailable content (e.g., blog: null).

organization: OMRON SINIC X
twitter: "@omron_sinicx"
title: Path Planning using Neural A* Search
conference: ICML2021
resources:
  paper: https://arxiv.org/abs/1909.13111
  code: https://github.com/omron-sinicx/multipolar
  video: https://www.youtube.com/embed/adUnIj83RtU
  blog: https://medium.com/sinicx/multipolar-multi-source-policy-aggregation-for-transfer-reinforcement-learning-between-diverse-bc42a152b0f5
  ...

🎨 Customization

🔧 Styling

• Customize appearance by modifying UIKit variables in src/scss/theme.scss (zero hand-written CSS)
• Extend *.jsx files with components from:
  • 🎨 UIKit Components
  • 🎯 React-Icons

📁 Project Structure

template.yaml       # Configuration
src/
├── components/     # React components
├── html/           # HTML templates
├── media/          # Media assets (relocated to assets/ automatically)
├── videos/         # Video content
├── js/             # JavaScript files
├── pages/          # Page templates
└── scss/           # Styling

🚀 Release your project page automatically by GitHub Actions

• example project: https://github.com/omron-sinicx/mabr/tree/project-page

Deploy from GitHub Actions

• Navigate to https://github.com/{your-github-repo-path}/settings/pages
• Select GitHub Actions at Build and Deployment > Source
• See also: GitHub Documentation and actions/deploy-pages

Note

When using GitHub Actions to deploy a site on GitHub Pages, the source code is built internally during the workflow run. Only the build artifacts (e.g., HTML, CSS, JS) are deployed to the GitHub Pages environment, while the repository itself retains only the source code.

🌿 Push project page source to "project-page" branch

• $ git remote add github {your-github-repo-path}
• $ git push github {local-project-page-branch}:project-page
• See also: https://github.com/omron-sinicx/projectpage-template/blob/main/.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 > 🗑️

🔍 SEO & Social Sharing

🌐 OGP Support

• OGP meta tags are automatically generated from template.yaml and correctly rendered when deployed via GitHub Actions (see above).
• Example: Twitter Card Preview

Caution

For local builds, react-snap must work properly to convert output into static HTML. We recommend building via GitHub Actions for consistent dependency management.

🐶 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).

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.

🤝 Contributing

Issues and PRs welcome! Feel free to open an issue