From e64a48943d71a2724a93e8f08cea55c522bc824e Mon Sep 17 00:00:00 2001 From: Ronald Tse Date: Sun, 3 May 2026 20:51:40 +0800 Subject: [PATCH 1/9] Migrate DEVGUIDE from Materialize to Tailwind CSS via calconnect-theme gem - Replace Materialize CSS + jQuery with Tailwind CSS v4 + Vite - Adopt calconnect-theme gem for shared layouts, includes, SCSS, and JS - Rewrite all layouts and includes with Tailwind utility classes - Add Vite/Node.js tooling (package.json, vite.config.ts, postcss.config.js) - Create _frontend/ with Tailwind entrypoints, theme.js, navigation.js - Delete vendored Materialize CSS, jQuery, Roboto fonts - Update CI workflows with Node.js setup and calconnect-theme checkout - Rename default branch from master to main --- .github/workflows/build_deploy.yml | 22 +- .github/workflows/links.yml | 26 +- .gitignore | 8 +- CLAUDE.md | 115 +++ Gemfile | 27 +- .../01-push-calconnect-theme-to-github.md | 9 + .../02-update-devguide-default-branch.md | 8 + .../03-migrate-standards-calconnect-org.md | 65 ++ .../04-integrate-theme-into-calconnect-org.md | 31 + TODO.new-style/05-verify-all-sites.md | 5 + _config.yml | 12 +- _frontend/entrypoints/application.css | 87 ++ _frontend/entrypoints/application.js | 12 + _frontend/js/navigation.js | 66 ++ _frontend/js/theme.js | 58 ++ _includes/footer.html | 83 +- _includes/head.html | 44 +- _includes/header.html | 54 +- _includes/script.html | 13 +- _includes/toc-sidebar.html | 12 +- _layouts/default.html | 23 +- _layouts/home.html | 69 +- _layouts/page.html | 2 +- _layouts/post.html | 43 +- _layouts/toc-type.html | 72 +- _layouts/toc.html | 12 +- _sass/main.scss | 104 -- _sass/materialize/components/_badges.scss | 46 - _sass/materialize/components/_buttons.scss | 291 ------ _sass/materialize/components/_cards.scss | 196 ---- _sass/materialize/components/_carousel.scss | 90 -- _sass/materialize/components/_chips.scss | 89 -- .../materialize/components/_collapsible.scss | 84 -- _sass/materialize/components/_color.scss | 417 -------- _sass/materialize/components/_dropdown.scss | 68 -- _sass/materialize/components/_global.scss | 968 ------------------ _sass/materialize/components/_grid.scss | 164 --- .../components/_icons-material-design.scss | 5 - .../materialize/components/_materialbox.scss | 43 - _sass/materialize/components/_mixins.scss | 5 - _sass/materialize/components/_modal.scss | 90 -- _sass/materialize/components/_navbar.scss | 214 ---- _sass/materialize/components/_normalize.scss | 424 -------- _sass/materialize/components/_preloader.scss | 334 ------ _sass/materialize/components/_pulse.scss | 34 - _sass/materialize/components/_roboto.scss | 39 - _sass/materialize/components/_sideNav.scss | 214 ---- _sass/materialize/components/_slider.scss | 92 -- .../components/_table_of_contents.scss | 33 - _sass/materialize/components/_tabs.scss | 93 -- _sass/materialize/components/_tapTarget.scss | 103 -- _sass/materialize/components/_toast.scss | 59 -- _sass/materialize/components/_tooltip.scss | 31 - _sass/materialize/components/_topbar.scss | 27 - .../materialize/components/_transitions.scss | 13 - _sass/materialize/components/_typography.scss | 61 -- _sass/materialize/components/_variables.scss | 343 ------- _sass/materialize/components/_waves.scss | 114 --- .../components/date_picker/_default.date.scss | 456 --------- .../components/date_picker/_default.scss | 212 ---- .../components/date_picker/_default.time.scss | 267 ----- .../components/forms/_checkboxes.scss | 210 ---- .../components/forms/_file-input.scss | 44 - .../materialize/components/forms/_forms.scss | 22 - .../components/forms/_input-fields.scss | 333 ------ .../components/forms/_radio-buttons.scss | 115 --- .../materialize/components/forms/_range.scss | 160 --- .../materialize/components/forms/_select.scss | 182 ---- .../components/forms/_switches.scss | 89 -- _sass/materialize/materialize.scss | 44 - assets/images/logo-purple.svg | 1 + assets/images/logo-white.svg | 1 + assets/main.scss | 5 - assets/materialize.scss | 5 - fonts/roboto/Roboto-Bold.woff | Bin 90308 -> 0 bytes fonts/roboto/Roboto-Bold.woff2 | Bin 64800 -> 0 bytes fonts/roboto/Roboto-Light.woff | Bin 89672 -> 0 bytes fonts/roboto/Roboto-Light.woff2 | Bin 64268 -> 0 bytes fonts/roboto/Roboto-Medium.woff | Bin 90560 -> 0 bytes fonts/roboto/Roboto-Medium.woff2 | Bin 65412 -> 0 bytes fonts/roboto/Roboto-Regular.woff | Bin 89828 -> 0 bytes fonts/roboto/Roboto-Regular.woff2 | Bin 64832 -> 0 bytes fonts/roboto/Roboto-Thin.woff | Bin 88132 -> 0 bytes fonts/roboto/Roboto-Thin.woff2 | Bin 63056 -> 0 bytes js/init.js | 28 - js/jquery.min.js | 2 - js/materialize.min.js | 6 - package.json | 21 + postcss.config.js | 6 + vite.config.ts | 20 + 90 files changed, 766 insertions(+), 7329 deletions(-) create mode 100644 CLAUDE.md create mode 100644 TODO.new-style/01-push-calconnect-theme-to-github.md create mode 100644 TODO.new-style/02-update-devguide-default-branch.md create mode 100644 TODO.new-style/03-migrate-standards-calconnect-org.md create mode 100644 TODO.new-style/04-integrate-theme-into-calconnect-org.md create mode 100644 TODO.new-style/05-verify-all-sites.md create mode 100644 _frontend/entrypoints/application.css create mode 100644 _frontend/entrypoints/application.js create mode 100644 _frontend/js/navigation.js create mode 100644 _frontend/js/theme.js delete mode 100755 _sass/main.scss delete mode 100755 _sass/materialize/components/_badges.scss delete mode 100755 _sass/materialize/components/_buttons.scss delete mode 100755 _sass/materialize/components/_cards.scss delete mode 100755 _sass/materialize/components/_carousel.scss delete mode 100755 _sass/materialize/components/_chips.scss delete mode 100755 _sass/materialize/components/_collapsible.scss delete mode 100755 _sass/materialize/components/_color.scss delete mode 100755 _sass/materialize/components/_dropdown.scss delete mode 100755 _sass/materialize/components/_global.scss delete mode 100755 _sass/materialize/components/_grid.scss delete mode 100755 _sass/materialize/components/_icons-material-design.scss delete mode 100755 _sass/materialize/components/_materialbox.scss delete mode 100755 _sass/materialize/components/_mixins.scss delete mode 100755 _sass/materialize/components/_modal.scss delete mode 100755 _sass/materialize/components/_navbar.scss delete mode 100755 _sass/materialize/components/_normalize.scss delete mode 100755 _sass/materialize/components/_preloader.scss delete mode 100755 _sass/materialize/components/_pulse.scss delete mode 100755 _sass/materialize/components/_roboto.scss delete mode 100755 _sass/materialize/components/_sideNav.scss delete mode 100755 _sass/materialize/components/_slider.scss delete mode 100755 _sass/materialize/components/_table_of_contents.scss delete mode 100755 _sass/materialize/components/_tabs.scss delete mode 100755 _sass/materialize/components/_tapTarget.scss delete mode 100755 _sass/materialize/components/_toast.scss delete mode 100755 _sass/materialize/components/_tooltip.scss delete mode 100644 _sass/materialize/components/_topbar.scss delete mode 100755 _sass/materialize/components/_transitions.scss delete mode 100755 _sass/materialize/components/_typography.scss delete mode 100755 _sass/materialize/components/_variables.scss delete mode 100755 _sass/materialize/components/_waves.scss delete mode 100755 _sass/materialize/components/date_picker/_default.date.scss delete mode 100755 _sass/materialize/components/date_picker/_default.scss delete mode 100755 _sass/materialize/components/date_picker/_default.time.scss delete mode 100755 _sass/materialize/components/forms/_checkboxes.scss delete mode 100755 _sass/materialize/components/forms/_file-input.scss delete mode 100755 _sass/materialize/components/forms/_forms.scss delete mode 100755 _sass/materialize/components/forms/_input-fields.scss delete mode 100755 _sass/materialize/components/forms/_radio-buttons.scss delete mode 100755 _sass/materialize/components/forms/_range.scss delete mode 100755 _sass/materialize/components/forms/_select.scss delete mode 100755 _sass/materialize/components/forms/_switches.scss delete mode 100755 _sass/materialize/materialize.scss create mode 100644 assets/images/logo-purple.svg create mode 100644 assets/images/logo-white.svg delete mode 100755 assets/main.scss delete mode 100755 assets/materialize.scss delete mode 100755 fonts/roboto/Roboto-Bold.woff delete mode 100755 fonts/roboto/Roboto-Bold.woff2 delete mode 100755 fonts/roboto/Roboto-Light.woff delete mode 100755 fonts/roboto/Roboto-Light.woff2 delete mode 100755 fonts/roboto/Roboto-Medium.woff delete mode 100755 fonts/roboto/Roboto-Medium.woff2 delete mode 100755 fonts/roboto/Roboto-Regular.woff delete mode 100755 fonts/roboto/Roboto-Regular.woff2 delete mode 100755 fonts/roboto/Roboto-Thin.woff delete mode 100755 fonts/roboto/Roboto-Thin.woff2 delete mode 100755 js/init.js delete mode 100755 js/jquery.min.js delete mode 100755 js/materialize.min.js create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 vite.config.ts diff --git a/.github/workflows/build_deploy.yml b/.github/workflows/build_deploy.yml index fb50301..16c7870 100644 --- a/.github/workflows/build_deploy.yml +++ b/.github/workflows/build_deploy.yml @@ -3,8 +3,7 @@ name: build_deploy on: push: branches: - - master - # - staging + - main pull_request: repository_dispatch: workflow_dispatch: @@ -28,12 +27,27 @@ jobs: - name: Checkout uses: actions/checkout@v4 + - name: Checkout calconnect-theme + uses: actions/checkout@v4 + with: + repository: calconnect/calconnect-theme + path: ../calconnect-theme + + - name: Setup Node.js + uses: actions/setup-node@v6 + with: + node-version: '24' + cache: 'npm' + + - name: Install npm dependencies + run: npm ci + - name: Setup Ruby uses: ruby/setup-ruby@v1 with: ruby-version: '3.2' bundler-cache: true - cache-version: 0 # Increment this number if you need to re-download cached gems + cache-version: 0 - name: Setup Pages id: pages uses: actions/configure-pages@v3 @@ -53,7 +67,7 @@ jobs: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} - if: ${{ github.ref == 'refs/heads/master' }} + if: ${{ github.ref == 'refs/heads/main' }} runs-on: ubuntu-latest needs: build steps: diff --git a/.github/workflows/links.yml b/.github/workflows/links.yml index f3b0ac6..a91bff8 100644 --- a/.github/workflows/links.yml +++ b/.github/workflows/links.yml @@ -11,11 +11,26 @@ jobs: link_checker: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 + + - name: Checkout calconnect-theme + uses: actions/checkout@v4 + with: + repository: calconnect/calconnect-theme + path: ../calconnect-theme + + - name: Setup Node.js + uses: actions/setup-node@v6 + with: + node-version: '24' + cache: 'npm' + + - name: Install npm dependencies + run: npm ci - uses: ruby/setup-ruby@v1 with: - ruby-version: '3.1' + ruby-version: '3.2' bundler-cache: true - name: Build site @@ -30,10 +45,3 @@ jobs: fail: true env: GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Create Issue From File - # uses: peter-evans/create-issue-from-file@v2 - # with: - # title: Link Checker Report - # content-filepath: ./lychee/out.md - # labels: report, automated issue diff --git a/.gitignore b/.gitignore index eeedc60..71431dc 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,10 @@ js/jquery.min.2.1.js js/jquery.min.3.7.js /firebase-debug.log -Gemfile.lock \ No newline at end of file +Gemfile.lock + +# Vite / Node +node_modules/ +public/vite* +config/ +vendor/ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..feebe89 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,115 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +CalConnect DEVGUIDE is a Jekyll-based static site providing a developer's guide for calendaring and scheduling standards (iCalendar, CalDAV, CardDAV, vCard, jsCalendar, iTIP, iMIP). The live site is at https://devguide.calconnect.org. + +Uses the shared `calconnect-theme` gem for layouts, includes, and design tokens. The theme provides Tailwind CSS v4 via Vite, dark mode support, and documentation sidebar styling. + +## Build & Serve Commands + +- **Install dependencies:** `bundle install && npm ci` +- **Build the site:** `bundle exec jekyll build` +- **Local dev server:** `bundle exec jekyll serve` +- **Build for production:** `JEKYLL_ENV=production bundle exec jekyll build` + +Ruby 3.2, Node.js 24. Jekyll 4.3 with jekyll-vite plugin. + +## Deployment + +- **GitHub Actions** builds and deploys to GitHub Pages on push to `master` +- **Firebase** hosting config exists in `firebase.json` (redirect rules) +- The `_site/` directory is the build output (gitignored) + +## Site Architecture + +### Theme + +Uses `calconnect-theme` gem (at `../calconnect-theme/`). The theme provides: +- **Layouts**: `base` (HTML shell), `default` (documentation sidebar), `page` (simple wrapper) +- **Includes**: `head.html` (fonts, critical CSS, Vite), `header.html`/`footer.html` (stubs), `breadcrumbs.html`, `feedback.html`, `google-analytics.html` +- **SCSS**: `_sass/calconnect/` partials for documentation layout, sidebar nav, typography, dark mode +- **Frontend JS**: `theme.js` (dark/light toggle), `navigation.js` (mobile menu) +- **Assets**: Logo SVGs (purple/white) + +Local `_layouts/` and `_includes/` files override the theme. + +### Content Collections + +Two Jekyll collections drive the site: + +- **`pages`** (`_pages/`) — Main content sections. Each top-level section has an index `.md` file and a subdirectory with child pages. Permalink: `/:path/` +- **`appendixes`** (`_appendixes/`) — Supplementary content (Glossary, Standards, Links, Examples). Permalink: `/Appendix/:path/` + +### Page Front Matter (Navigation) + +- `parent` — Path to parent page (e.g., `"/"` for top-level, `"/iCalendar-Topics"` for children) +- `order` — Sort order within siblings +- `mainParent` — Groups pages under a top-level section for sidebar display +- `parents` — Semicolon-separated breadcrumb trail in `Title:URL` format +- `childs` — Comma-separated list of child page titles (for active-state highlighting) +- `layout` — `default`, `page`, `home`, `toc`, `toc-type`, `post` + +### Layouts + +- `default` → theme's `base` (head, header, main, footer, Vite JS) +- `page` → `default` (simple max-width container) +- `home` → `default` (landing page with hero and icon grid) +- `toc` → `default` (Table of Contents with hierarchical listing) +- `toc-type` → `default` (section landing page with breadcrumb, content, and sidebar) +- `post` → `default` (blog-style article) + +### CSS / Frontend + +- **Tailwind CSS v4** via Vite + jekyll-vite +- Entry point: `_frontend/entrypoints/application.css` (Tailwind + `@theme` design tokens) +- JS entry: `_frontend/entrypoints/application.js` (imports theme.js + navigation.js) +- Fonts: Inter (body) + JetBrains Mono (code), loaded via Google Fonts +- Dark mode: class-based (`html.dark`), toggled via `theme.js` with localStorage + +### Includes + +- `head.html` — Overrides theme: DEVGUIDE-specific title and favicon +- `header.html` — Overrides theme: DEVGUIDE nav links + dark mode toggle +- `footer.html` — Overrides theme: DEVGUIDE page/appendix links +- `script.html` — GA4 tracking (production only) +- `toc-sidebar.html` — Recursive sidebar navigation (front-matter-driven) +- `toc-entry.html` — Recursive ToC entry renderer +- `toc-mainPage-placeholder.html` — Renders child links for section landing pages + +### Plugin: PlantUML + +`_plugins/jekyll-plantuml.rb` provides a `{% plantuml %}` Liquid tag that generates SVG diagrams using `_bin/plantuml.jar`. + +## Content Structure + +Top-level sections (each is a `_pages/*.md` index + subdirectory): + +| Section | Topics | +|---|---| +| iCalendar Topics | Best Practices, Dates/Times, History, Recurrences, Validation | +| CalDAV | Client/Server implementations, libraries, building clients, FAQs | +| CardDAV | Client implementations | +| Scheduling | FreeBusy, iTIP, vAvailability, vPoll | +| Tasks | Introduction, Component | +| Time Zones | Best Practices, Sources, TZDS | +| Data Model | Simple Event, UID, Detailed Description | +| vCard | vCard 4, vCard 5 | +| jsCalendar Topics | Introduction, Implementations | +| iMIP | Internet Scheduling | +| iTIP | iTIP scheduling | +| Publishing | Publishing calendars | +| Other Topics | Calendar spam | + +## CI Workflows + +- **`build_deploy`** — Builds with Jekyll + Vite and deploys to GitHub Pages on push to `master` +- **`links`** — Runs lychee link checker on built `_site/` HTML + +## Conventions + +- Content files are Markdown (`.md`) with YAML front matter +- 2-space indentation, LF line endings, UTF-8 encoding (`.editorconfig`) +- Pages with `published: false` in front matter are excluded from navigation diff --git a/Gemfile b/Gemfile index 50d536c..0910912 100644 --- a/Gemfile +++ b/Gemfile @@ -1,36 +1,21 @@ source "https://rubygems.org" -# Hello! This is where you manage which Jekyll version is used to run. -# When you want to use a different version, change it below, save the -# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: -# -# bundle exec jekyll serve -# -# This will help ensure the proper Jekyll version is running. -# Happy Jekylling! + gem "jekyll", "~> 4.3.4" -# This is the default theme for new Jekyll sites. You may change this to anything you like. -gem "minima", "~> 2.5" -# If you want to use GitHub Pages, remove the "gem "jekyll"" above and -# uncomment the line below. To upgrade, run `bundle update github-pages`. -# gem "github-pages", group: :jekyll_plugins -# If you have any plugins, put them here! +gem "calconnect-theme", path: "../calconnect-theme" + group :jekyll_plugins do gem "jekyll-feed", "~> 0.12" gem "jekyll-asciidoc" + gem "jekyll-vite" end -# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem -# and associated library. +gem "jekyll-archives" + platforms :mingw, :x64_mingw, :mswin, :jruby do gem "tzinfo", ">= 1", "< 3" gem "tzinfo-data" end -# Performance-booster for watching directories on Windows gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin] -# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem -# do not have a Java counterpart. gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby] -gem 'jekyll-archives' -gem "jekyll-sass-converter", "~> 2.0" \ No newline at end of file diff --git a/TODO.new-style/01-push-calconnect-theme-to-github.md b/TODO.new-style/01-push-calconnect-theme-to-github.md new file mode 100644 index 0000000..786ea5b --- /dev/null +++ b/TODO.new-style/01-push-calconnect-theme-to-github.md @@ -0,0 +1,9 @@ +# 01 - Push calconnect-theme to GitHub + +Create the GitHub repo and push the initial commit. + +```bash +cd /Users/mulgogi/src/calconnect/calconnect-theme +gh repo create calconnect/calconnect-theme --public --description "Shared Jekyll theme gem for CalConnect sites" +git push -u origin main +``` diff --git a/TODO.new-style/02-update-devguide-default-branch.md b/TODO.new-style/02-update-devguide-default-branch.md new file mode 100644 index 0000000..469cb45 --- /dev/null +++ b/TODO.new-style/02-update-devguide-default-branch.md @@ -0,0 +1,8 @@ +# 02 - Update DEVGUIDE default branch to main + +Change the default branch from `master` to `main` and update workflows to reference `main`. + +**Files:** +- `.github/workflows/build_deploy.yml` — change trigger branch `master` → `main`, change deploy condition `refs/heads/master` → `refs/heads/main` +- `.github/workflows/links.yml` — already uses `main` (verify) +- Update remote HEAD: `git push origin main && git remote set-head origin main` diff --git a/TODO.new-style/03-migrate-standards-calconnect-org.md b/TODO.new-style/03-migrate-standards-calconnect-org.md new file mode 100644 index 0000000..d62eab5 --- /dev/null +++ b/TODO.new-style/03-migrate-standards-calconnect-org.md @@ -0,0 +1,65 @@ +# 03 - Migrate standards.calconnect.org to Tailwind/Vite + +Full migration from Materialize CSS to shared calconnect-theme with Tailwind/Vite. + +## Node.js tooling to create + +| File | Source | +|---|---| +| `package.json` | Same as DEVGUIDE (no Vue deps) | +| `vite.config.ts` | Same as DEVGUIDE (no Vue plugin) | +| `postcss.config.js` | Copy from DEVGUIDE | +| `config/vite.json` | Copy from DEVGUIDE (use port 3038) | +| `_frontend/entrypoints/application.css` | Tailwind v4 with standards-specific `@source` paths + doc-type/stage color `@theme` tokens | +| `_frontend/entrypoints/application.js` | Copy from DEVGUIDE | +| `_frontend/js/theme.js` | Copy from calconnect-theme | +| `_frontend/js/navigation.js` | Copy from calconnect-theme | + +## Config updates + +- `Gemfile`: add `calconnect-theme` (path:), add `jekyll-vite`, remove `minima`, `rubocop` +- `_config.yml`: set `theme: calconnect-theme`, add vite/node excludes + +## Layouts to rewrite + +| Layout | What to do | +|---|---| +| `default.html` | Replace with `layout: base` + `{{ content }}` | +| `document.html` | Keep Liquid logic, replace Materialize classes with Tailwind | +| `toc-type.html` | Same as DEVGUIDE: Materialize → `.documentation`/`.docs-nav`/`.nav-items` | +| `toc.html` | `container` → `max-w-4xl mx-auto` | +| `page.html` | `container` → `max-w-4xl mx-auto py-8 px-4` | + +## Includes to rewrite + +| Include | What to do | +|---|---| +| `head.html` | Replace with Inter/JetBrains Mono, critical CSS, `{% vite_stylesheet_tag %}` | +| `header.html` | Materialize nav → Tailwind glass navbar with standards links + dark mode toggle | +| `footer.html` | Materialize footer → Tailwind grid footer | +| `script.html` | jQuery/Materialize/init.js → `{% vite_javascript_tag %}` + GA | +| `document.html` | Keep Liquid logic, replace CSS classes for type badges/stage badges/download buttons | +| `toc-sidebar.html` | `menu-sidebar` → `nav-items` etc. | +| `find-doc.html` | Update CSS classes | +| `copyright.html` | Update CSS classes | + +## Doc-type/stage colors + +Extract from `_sass/_main.scss` SCSS maps and express as Tailwind `@theme` tokens in `application.css`: +- standard: #0AC442, directive: #540D6E, guide: #D183C9, specification: #65AFFF, report: #3A405A, amendment: #F26430, corrigendum: #C84630, administrative: #BFAE48, advisory: #BD9391 +- proposal: #39A0ED, working-draft: #2D7393, committee-draft: #2A6B7C, draft-standard: #1C7F7A, final-draft: #53C170, published: #069E2D, withdrawn: #004E64, cancelled: #2E382E + +## Files to delete + +- `_sass/materialize/` (entire directory) +- `_sass/main.scss`, `_sass/_main.scss`, `_sass/_metanorma-index.scss` +- `assets/materialize.scss`, `assets/main.scss`, `assets/metanorma-index.scss` +- `js/jquery.min.js`, `js/materialize.min.js`, `js/init.js` +- `fonts/roboto/` (if exists) + +## Preserve untouched + +- `Makefile`, `scripts/`, `src-documents/`, `bib/`, `bibcoll/`, `csd/`, `_input/` +- `flake.nix`, `flake.lock`, `.envrc` +- `_data/` (doesn't exist — navigation is hardcoded) +- CI workflow (`.github/workflows/build_deploy.yml`) — add Node.js setup step diff --git a/TODO.new-style/04-integrate-theme-into-calconnect-org.md b/TODO.new-style/04-integrate-theme-into-calconnect-org.md new file mode 100644 index 0000000..66440a6 --- /dev/null +++ b/TODO.new-style/04-integrate-theme-into-calconnect-org.md @@ -0,0 +1,31 @@ +# 04 - Integrate theme into calconnect.org + +Remove duplicated files now provided by calconnect-theme gem. + +## Config updates + +- `Gemfile`: add `gem "calconnect-theme", path: "../calconnect-theme"`, remove `minima` +- `_config.yml`: change `theme: minima` → `theme: calconnect-theme` + +## Files to delete (now in theme) + +- `_layouts/base.html` +- `_layouts/default.html` +- `_layouts/page.html` +- `_includes/head.html` +- `_includes/breadcrumbs.html` +- `_includes/feedback.html` +- `_includes/google-analytics.html` +- `_includes/custom-head.html` +- `_frontend/js/theme.js` +- `_frontend/js/navigation.js` + +## Files to keep (site-specific overrides) + +- `_includes/header.html`, `_includes/footer.html` +- `_includes/news-card.html`, `_includes/script.html` +- `_layouts/home.html`, `_layouts/category.html`, `_layouts/news-*.html` +- `_frontend/entrypoints/application.css` (site-specific @source paths) +- `_frontend/entrypoints/application.js` (Vue news search) +- `_frontend/components/`, `_frontend/composables/` +- `_data/`, `vite.config.ts` diff --git a/TODO.new-style/05-verify-all-sites.md b/TODO.new-style/05-verify-all-sites.md new file mode 100644 index 0000000..615f32b --- /dev/null +++ b/TODO.new-style/05-verify-all-sites.md @@ -0,0 +1,5 @@ +# 05 - Verify all three sites build + +1. **calconnect.org**: `cd calconnect.org && bundle install && npm ci && bundle exec jekyll build` — verify no regressions +2. **DEVGUIDE**: `cd DEVGUIDE && bundle install && npm ci && bundle exec jekyll serve` — verify sidebar, dark mode, PlantUML, content +3. **standards.calconnect.org**: `cd standards.calconnect.org && bundle install && npm ci && bundle exec jekyll build` — verify document rendering, doc-type badges, sidebar diff --git a/_config.yml b/_config.yml index 7e74060..1fad831 100755 --- a/_config.yml +++ b/_config.yml @@ -1,13 +1,12 @@ title: CalConnect DEVGUIDE author: Thomas Schäfer email: thomas.schaefer@1und1.de -description: > # this means to ignore newlines until "baseurl:" +description: > # this means to ignore newlines until `baseurl:` My modified template for CalConnect twitter_username: wsdwl -sass: - style: compressed +theme: calconnect-theme collections: pages: @@ -26,3 +25,10 @@ plantuml: exclude: - app.yaml + - config + - vite.config.ts + - package.json + - package-lock.json + - node_modules/ + - vendor/ + - firebase.json diff --git a/_frontend/entrypoints/application.css b/_frontend/entrypoints/application.css new file mode 100644 index 0000000..5989eba --- /dev/null +++ b/_frontend/entrypoints/application.css @@ -0,0 +1,87 @@ +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +/* Enable class-based dark mode */ +@custom-variant dark (&:where(.dark, .dark *)); + +/* Content scanning - paths relative to this CSS file at _frontend/entrypoints/ */ +@source "../../_layouts/**/*.html"; +@source "../../_includes/**/*.html"; +@source "../../_pages/**/*.md"; +@source "../../_appendixes/**/*.md"; +@source "../**/*.{js,ts}"; + +/* Custom theme configuration */ +@theme { + /* Font families */ + --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; + --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; + + /* Primary colors */ + --color-primary-50: #eef2ff; + --color-primary-100: #e0e7ff; + --color-primary-200: #c7d2fe; + --color-primary-300: #a5b4fc; + --color-primary-400: #818cf8; + --color-primary-500: #6366f1; + --color-primary-600: #4f46e5; + --color-primary-700: #4338ca; + --color-primary-800: #3730a3; + --color-primary-900: #312e81; + + /* Accent color */ + --color-accent-400: #22d3ee; + --color-accent-500: #06b6d4; +} + +/* Custom base styles */ +@layer base { + html { + scroll-behavior: smooth; + } + + body { + font-feature-settings: "kern" 1, "liga" 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + main { + padding-top: 64px; + } + + ::selection { + background-color: rgba(99, 102, 241, 0.2); + } + + :focus-visible { + outline: 2px solid #6366f1; + outline-offset: 2px; + } +} + +/* Custom component styles */ +@layer components { + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + .sr-only:focus { + position: fixed; + width: auto; + height: auto; + padding: 0.5rem 1rem; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; + } +} diff --git a/_frontend/entrypoints/application.js b/_frontend/entrypoints/application.js new file mode 100644 index 0000000..b71f9ce --- /dev/null +++ b/_frontend/entrypoints/application.js @@ -0,0 +1,12 @@ +import '../js/theme.js' +import '../js/navigation.js' + +document.addEventListener('DOMContentLoaded', function() { + document.querySelectorAll('.nav-toggle').forEach(function(toggle) { + toggle.addEventListener('click', function() { + this.classList.toggle('open'); + var subsection = this.nextElementSibling; + if (subsection) subsection.classList.toggle('collapsed'); + }); + }); +}); diff --git a/_frontend/js/navigation.js b/_frontend/js/navigation.js new file mode 100644 index 0000000..a7c6f81 --- /dev/null +++ b/_frontend/js/navigation.js @@ -0,0 +1,66 @@ +/** + * Navigation Script + * Handles mobile menu toggle and active state highlighting + */ + +(function() { + 'use strict'; + + /** + * Initialize mobile menu toggle + */ + function initMobileMenu() { + var menuButton = document.getElementById('mobile-menu-btn'); + var mobileMenu = document.getElementById('mobile-menu'); + + if (menuButton && mobileMenu) { + menuButton.addEventListener('click', function() { + var isExpanded = menuButton.getAttribute('aria-expanded') === 'true'; + menuButton.setAttribute('aria-expanded', !isExpanded); + mobileMenu.classList.toggle('hidden'); + }); + } + } + + /** + * Highlight active navigation items + */ + function initActiveNav() { + var currentPath = window.location.pathname; + + // Sidebar navigation + var sidebarLinks = document.querySelectorAll('.docs-nav .nav-items a'); + sidebarLinks.forEach(function(link) { + var href = link.getAttribute('href'); + if (href) { + // Normalize paths for comparison + var linkPath = href.replace(/\/$/, ''); + var pagePath = currentPath.replace(/\/$/, ''); + if (linkPath === pagePath) { + link.classList.add('active'); + } + } + }); + + // Header navigation + var headerLinks = document.querySelectorAll('nav a[href]'); + headerLinks.forEach(function(link) { + var href = link.getAttribute('href'); + if (href && href !== '/') { + var linkPath = href.replace(/\/$/, ''); + var pagePath = currentPath.replace(/\/$/, ''); + if (pagePath.indexOf(linkPath) === 0) { + link.classList.add('active'); + } + } + }); + } + + /** + * Initialize on DOM ready + */ + document.addEventListener('DOMContentLoaded', function() { + initMobileMenu(); + initActiveNav(); + }); +})(); diff --git a/_frontend/js/theme.js b/_frontend/js/theme.js new file mode 100644 index 0000000..7bab78a --- /dev/null +++ b/_frontend/js/theme.js @@ -0,0 +1,58 @@ +/** + * Theme Toggle Script + * Handles dark/light mode switching with localStorage persistence + */ + +(function() { + 'use strict'; + + /** + * Get the user's theme preference + * Priority: localStorage > system preference + */ + function getThemePreference() { + if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { + return localStorage.getItem('theme'); + } + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + + /** + * Set the theme on the document + */ + function setTheme(theme) { + if (theme === 'dark') { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + localStorage.setItem('theme', theme); + } + + /** + * Initialize theme immediately to prevent flash + */ + setTheme(getThemePreference()); + + /** + * Handle DOM ready for toggle button + */ + document.addEventListener('DOMContentLoaded', function() { + var toggle = document.getElementById('theme-toggle'); + if (toggle) { + toggle.addEventListener('click', function() { + var currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; + setTheme(currentTheme === 'dark' ? 'light' : 'dark'); + }); + } + }); + + /** + * Handle system preference changes + */ + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { + if (!localStorage.getItem('theme')) { + setTheme(e.matches ? 'dark' : 'light'); + } + }); +})(); diff --git a/_includes/footer.html b/_includes/footer.html index c44a30b..233db6c 100755 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,51 +1,38 @@ -