feat: Migrate documentation theme from Bootstrap to Tailwind CSS with mieweb/ui components #124
+125,928
−61,617
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 326ba04 |
… mieweb/ui components
wreiske
force-pushed
the
fix/sidebar-search-ui
branch
from
586ffe6 to
ff4fc0d
Compare
Deploying eh-docs with
|
| Latest commit: |
d1e5141
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://df2862cb.eh-docs.pages.dev |
| Branch Preview URL: | https://fix-sidebar-search-ui.eh-docs.pages.dev |
wreiske
changed the title
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit e1f1470 |
- Add Lightbox TypeScript component to @mieweb/ui - Integrate lightbox into Hugo theme (main.js) - Add lightbox CSS styles - Features: - Click images to open in full-screen modal - Navigate between images with arrows/keyboard - Image counter (e.g., '1 of 11') - Close with Escape, click outside, or close button - Touch swipe support for mobile - Automatic filtering of small images/icons - ARIA labels for accessibility - Update eslint config to ignore vendor files
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 0c73db1 |
- Create Lightbox React component with full-screen image viewing, keyboard navigation, touch swipe support using @mieweb/ui Modal - Create SidebarSearch React component for filtering navigation items with debounced search and text highlighting - Create SearchModal React component with Lunr.js integration for full-text documentation search - Add esbuild build pipeline (scripts/build-components.ts) for bundling React components to ESM format for Hugo integration - Install lucide-react for icons - Configure ESLint to ignore bundled React components - Add npm scripts: build:components, build:components:prod, watch:components Components are now built to themes/mieweb-docs/assets/js/react/ and can be mounted in Hugo templates via data-react-component attributes.
- Fix system-name.html shortcode HTML escaping issue where multi-line span was being interpreted as markdown blockquote, causing raw HTML to display - Add new WebChart logo (PNG) from webchartnow.com for proper brand display in both light and dark modes
Add prettier-ignore comment and put span element on single line to prevent markdown blockquote interpretation when the shortcode output was rendered. The multi-line HTML was causing raw '<span class=' text to appear on pages.
- Add sticky TOC sidebar on right side for pages with table of contents - Implement IntersectionObserver-based scrollspy to highlight current section - Style TOC with nested hierarchy, left border indicator, and proper indentation - TOC is responsive - only shows on screens >= 1280px width - Move TOC outside main content area for proper sticky behavior - Add smooth scrolling when clicking TOC links - Include proper ARIA labels for accessibility - Exclude Hugo templates from prettier (contain Go template syntax)
The scrollIntoView call on TOC links was causing the entire page to scroll back to top. Fixed by using scrollTo on the TOC aside container instead of scrollIntoView on the link element.
- Escape HTML in highlightText to prevent XSS (DOM text as HTML) - Add SRI integrity hashes to highlight.js CDN resources
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit f7e3f75 |
- Add .nvmrc with version 22 - Add engines field to package.json
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit d4ce002 |
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 49f662b |
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 58082c0 |
- Add canonical URLs and Open Graph meta tags - Add Twitter Card meta tags for social sharing - Add TechArticle LD+JSON structured data for documentation pages - Add WebSite LD+JSON with SearchAction for homepage - Add robots.txt template with dynamic sitemap reference - Configure sitemap with changefreq and priority settings - Improve meta description fallback to use page summary - Update title format: 'Page Title | Brand Documentation' - Add article:published_time and article:modified_time meta tags - Remove TOML from lint-staged (no prettier parser)
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 8d64f09 |
- Create tailwind-eh.css for Enterprise Health (Jost font, burgundy primary) - Create tailwind-wc.css for WebChart (Inter font, orange primary) - Update baseof.html to load brand-specific CSS and fonts dynamically - Collapse build info in sidebar footer behind 'Build Info' details element - Remove hardcoded Inter font loading, use brand fonts from @mieweb/ui
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 1f17314 |
- Create footer.html partial with brand-specific content - Add footer configuration to config-eh.toml and config-wc.toml - Social links (LinkedIn, YouTube, Twitter/X, Facebook) - Quick links (Company, Careers, Contact, Request a Demo) - Legal links (Privacy Policy, Data Privacy Framework) - Contact info (email, phone, address) - Include footer in index.html, list.html, and single.html layouts - Update layouts to use flex-col for proper footer positioning - Refactor sidebar navigation styles to use CSS classes - Add sidebar-item-parent, sidebar-item-link classes - Add sidebar-child-parent, sidebar-child-link classes - Add sidebar-leaf-link class for leaf items - Footer is responsive: 1-col mobile, 2-col tablet, 4-col desktop
Deploying wc-docs with
|
| Latest commit: |
d1e5141
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a602e7c6.wc-docs.pages.dev |
| Branch Preview URL: | https://fix-sidebar-search-ui.wc-docs.pages.dev |
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 2d5babb |
- Remove 'markup: pandoc' from 15 content files frontmatter - Remove pandoc from security.exec.allow in config-eh.toml and config-wc.toml - Update single.html to always apply image path fix (./assets/ -> ../assets/) instead of conditionally checking for pandoc markup This allows the site to build on Cloudflare Pages which doesn't have pandoc installed. Goldmark (Hugo's native renderer) handles the content correctly with unsafe=true already configured.
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 372938c |
Update build.sh to include the brand prefix (eh/wc) in the baseURL when running the dev server with --live flag. This makes the local dev URLs match the production URL structure: - Before: http://localhost:1313/functions/... - After: http://localhost:1313/eh/functions/... This ensures consistent URL paths between development and production.
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit bf226dd |
…rcepting /functions/ path Cloudflare Pages reserves /functions/ URL paths for serverless Functions. By adding _routes.json with empty include and exclude all (/*), we tell Cloudflare to serve all routes as static assets, not Functions.
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit a9aa3f2 |
Cloudflare Pages requires at least one include rule, so using a pattern that will never match anything ensures Functions are never invoked and all routes serve static assets including /functions/*
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit d98b1c4 |
…d path Cloudflare Pages reserves /functions/ URL path for serverless Workers/Functions. This rename: - Renames content/functions/ to content/features/ - Updates all internal links from functions/ to features/ - Adds _redirects to redirect old /functions/* URLs to /features/* - Removes unused _routes.json Old URLs will redirect: /functions/* -> /features/*
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 9d62ce2 |
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit 6e105a3 |
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit b65ae36 |
Member
Author
Refactored lightbox IIFE to properly initialize after sidebar navigation: - Wait for images to load before collecting dimensions - Handle bfcache restoration with pageshow event listener - Track bound images with data-lightbox-bound attribute to avoid duplicates - Re-collect images on click for fresh indices - Make lightbox element creation idempotent
|
👋 @wreiske, Your documentation has been pushed to https://docs-qa.med-web.com/124-merge/ for commit fbc6237 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR migrates the documentation site from the Bootstrap-based
wc-eh-docstheme to the new Tailwind CSS-basedmieweb-docstheme with mieweb/ui components integration.Changes
New Theme (
themes/mieweb-docs/)Sidebar Search Improvements
<mark>tagsBuild System Updates
tailwind.config.ts)src/components/)Theme Backup
wc-eh-docstheme preserved inthemes/_wc-eh-docs-backup/Stats
Testing