Add GitHub Pages demo with interactive examples #58
Conversation
- Create comprehensive demo app showcasing Midashi library usage - Add three interactive examples: Simple, Website, and Hooks usage - Configure Tailwind CSS v4 with proper Vite integration - Include proper TypeScript configuration and build optimization The demo will be ready for GitHub Pages deployment once workflows are added. Fixes #12 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
WalkthroughA comprehensive demo application was added under the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Vite
participant ReactApp
participant Midashi
User->>Browser: Open demo site
Browser->>Vite: Load index.html and assets
Vite->>Browser: Serve bundled React app
Browser->>ReactApp: Mount App component
ReactApp->>Midashi: Render headings and sections
ReactApp->>Browser: Display interactive demo UI
User->>ReactApp: Interact with example selectors
ReactApp->>Midashi: Update displayed example
ReactApp->>Browser: Update UI accordingly
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
- Main deployment workflow: deploys to GitHub Pages on main branch - PR preview workflow: creates preview deployments for each PR - PR previews available at: https://bmthd.github.io/midashi/pr-{number}/ - Automatic comment updates on PRs with preview links 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
♻️ Duplicate comments (1)
demo/tsconfig.node.json (1)
16-22: Same unrecognised options as in the app config.
erasableSyntaxOnlyandnoUncheckedSideEffectImportswill also fail the Node-side build. Keep the two configs consistent by removing or gating these flags.
🧹 Nitpick comments (10)
demo/.gitignore (2)
1-25: Consider consolidating ignore rules with the repo-root.gitignore.A nested
.gitignoreis perfectly valid, but many of these patterns (logs,node_modules, editor folders, etc.) are usually already covered at the root. Duplicating rules in multiple places can cause drift when one list gets updated and the other doesn’t.
If the demo folder truly needs a dedicated ignore file (e.g., it’s published independently), keep it; otherwise, rely on the root file to reduce maintenance.
10-14: Add Vite/Tailwind cache & env patterns for a cleaner working tree.Since the demo is built with Vite + Tailwind, you’ll quickly accumulate additional artefacts not yet ignored:
dist-ssr +# Build caches +.vite +.cache +# Test coverage +coverage +# Local environment files (keep secrets out of the repo) +.env*These additions prevent accidental commits of large cache folders and sensitive environment files.
package.json (1)
41-44: Consider scoping the Vite + Tailwind plugin to the demo workspace only
@tailwindcss/viteis now a top-level devDependency, yet the library itself doesn’t use Tailwind—instead only the demo under/demo/does. Keeping it here:• increases install size for all consumers cloning the repo
• introduces a peer-dependency ontailwindcssthat is unsatisfied at the root (npm will warn)Moving the plugin (and Tailwind itself) to
demo/package.json, or turning the repo into a multi-package workspace (e.g. pnpm / npm workspaces) would keep the core package lean.demo/src/main.tsx (1)
6-10: Optional: fail fast if the root element is missingIn unlikely cases where
#rootisn’t present (mis-configured HTML, SSR, etc.) the non-null assertion will crash later with a less clear error. A tiny guard improves DX:-const root = document.getElementById('root')!; -createRoot(root).render( +const container = document.getElementById('root'); +if (!container) throw new Error('Root element #root not found'); +createRoot(container).render(demo/index.html (1)
5-6: Hard-coded/vite.svgpath will 404 on GitHub PagesBecause the app is served under the
/midashi/base path, absolute URLs like/vite.svgresolve tohttps://<user>.github.io/vite.svg.
Let Vite rewrite the asset (import it) or prefix it with the base path:- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> + <link rel="icon" type="image/svg+xml" href="%BASE_URL%vite.svg" />or
<link rel="icon" href="/midashi/vite.svg" />demo/vite.config.ts (1)
6-9: Optional: cache busting & faster cold-startsConsider enabling Vite’s
cacheDirinsidedemo/node_modules/.viteto avoid polluting the repo root when users run the demo locally:export default defineConfig({ plugins: [react(), tailwindcss()], + cacheDir: 'node_modules/.vite', base: '/midashi/', })demo/tsconfig.app.json (1)
3-16:noEmit: truemakes the precedingtsc -bin package.json redundant.Because the build script runs:
tsc -b && vite buildand this config has
"noEmit": true, the TypeScript step only produces a.tsbuildinfofile.
If that intentional type-check step is desired, consider adding a comment or renaming the npm script totype-checkto avoid confusion for contributors expecting emitted d.ts files.demo/eslint.config.js (1)
8-23: Consider marking this config as the project root to avoid config lookup up the directory tree.Add
root: trueat the top-level of the exported object; this prevents ESLint from merging parent configs (handy when the repo root also has ESLint settings).export default tseslint.config([ globalIgnores(['dist']), { + root: true, files: ['**/*.{ts,tsx}'],demo/package.json (1)
7-10: Script name mismatch with actual behaviour.
"build": "tsc -b && vite build"only type-checks because all referencedtsconfig.*.jsonfiles have"noEmit": true.
Consider renaming to"type-check"or split the step:"scripts": { "type-check": "tsc -b", "build": "vite build", ... }demo/README.md (1)
42-69: Minor doc typo: inconsistent plugin names.
eslint-plugin-react-xwas renamed@eslint-react/eslint-plugin-react-x. Update the snippet to prevent copy-paste install errors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
demo/package-lock.jsonis excluded by!**/package-lock.jsondemo/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamldemo/public/vite.svgis excluded by!**/*.svgdemo/src/assets/react.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (20)
demo/.gitignore(1 hunks)demo/README.md(1 hunks)demo/eslint.config.js(1 hunks)demo/index.html(1 hunks)demo/package.json(1 hunks)demo/src/App.tsx(1 hunks)demo/src/components/HooksExample.tsx(1 hunks)demo/src/components/SimpleExample.tsx(1 hunks)demo/src/components/WebsiteExample.tsx(1 hunks)demo/src/index.css(1 hunks)demo/src/main.tsx(1 hunks)demo/src/vite-env.d.ts(1 hunks)demo/tsconfig.app.json(1 hunks)demo/tsconfig.json(1 hunks)demo/tsconfig.node.json(1 hunks)demo/vite.config.ts(1 hunks)lib/components.tsx(1 hunks)lib/context.tsx(1 hunks)lib/index.ts(1 hunks)package.json(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
demo/src/components/WebsiteExample.tsx (2)
lib/context.tsx (1)
H(67-71)lib/components.tsx (7)
Header(25-29)Nav(61-65)Main(7-11)Section(16-20)Article(43-47)Aside(52-56)Footer(34-38)
demo/src/App.tsx (4)
demo/src/components/SimpleExample.tsx (1)
SimpleExample(3-37)demo/src/components/WebsiteExample.tsx (1)
WebsiteExample(3-82)demo/src/components/HooksExample.tsx (1)
HooksExample(21-72)lib/context.tsx (1)
H(67-71)
🪛 GitHub Actions: Bun🥟 CI
lib/index.ts
[error] 1-1: Failed to resolve import "./components.ts" from "lib/index.ts". Does the file exist? (vite:import-analysis)
🔇 Additional comments (13)
lib/context.tsx (1)
3-3: Type-only React import is a clean additionThe
import type React from "react";correctly enables theReact.JSX.Elementreference without triggering a runtime dependency—nice catch.demo/src/vite-env.d.ts (1)
1-1: LGTM – required Vite type shim is in placeThis reference directive is all that’s needed for Vite globals. No action required.
demo/package.json (2)
30-32: Pinning to a future TypeScript version may block installs.
"typescript": "~5.8.3"is ahead of the latest stable (5.4.*). Either relax the range (e.g.^5.4.0) or keep it unpinned (latest) until 5.8 is published.
12-16: No Action Needed: React 19.1.0 Is PublishedBoth
[email protected]and[email protected]are available on npm, so the existing dependency declarations in demo/package.json (lines 12–16) are valid and will install successfully.demo/src/components/WebsiteExample.tsx (2)
6-6: Excellent accessibility implementation.The use of
sr-onlyclass for the main heading provides proper semantic structure for screen readers while keeping the visual design clean.
1-82: Well-structured component demonstrating Midashi's semantic capabilities.The component effectively showcases a complete website layout using Midashi's semantic components (Header, Nav, Main, Section, Article, Aside, Footer) with proper nesting and automatic heading hierarchy.
demo/src/components/SimpleExample.tsx (1)
1-37: Excellent demonstration of Midashi's core functionality.This component provides a clear, well-structured example of automatic heading hierarchy management. The nested sections with explanatory text effectively demonstrate how headings automatically adjust their levels based on component nesting.
demo/src/App.tsx (2)
84-99: Proper external link security implementation.The external links correctly include
target="_blank"withrel="noopener noreferrer"for security, preventing potential security vulnerabilities.
9-28: Well-structured state management and configuration.The component uses proper TypeScript typing and maintains a clean configuration object for examples, making it easy to add or modify demo examples.
demo/src/components/HooksExample.tsx (3)
3-8: Excellent custom component implementation using Midashi hooks.The
CustomHeadingcomponent demonstrates proper usage of theuseCurrentLevelhook with correct TypeScript typing. The type casting tokeyof JSX.IntrinsicElementsensures type safety while enabling dynamic tag rendering.
10-19: Proper implementation of NextLevelButton component.The component correctly uses the
useNextLevelhook to demonstrate how to access the next heading level in the hierarchy. The implementation is clean and follows React best practices.
21-72: Clear demonstration of hook-based heading management.The example effectively shows how custom components can leverage Midashi hooks to create flexible, reusable heading components. The nested structure clearly demonstrates automatic level adjustment.
demo/tsconfig.json (1)
1-7: Solution-level tsconfig is well-formedThe root config cleanly delegates to the two sub-projects and excludes source files, which is the recommended pattern for a composite project. ✅
| <h2 className="text-2xl font-semibold text-gray-800 mb-2"> | ||
| {examples[activeExample].title} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace hardcoded heading elements with H component.
The demo uses hardcoded h2 and h3 elements instead of the H component, which contradicts Midashi's purpose of automatic heading hierarchy management. This inconsistency in the demo could confuse users about best practices.
Apply these diffs to use the H component consistently:
- <h2 className="text-2xl font-semibold text-gray-800 mb-2">
+ <H className="text-2xl font-semibold text-gray-800 mb-2">
{examples[activeExample].title}
- </h2>
+ </H>- <h3 className="text-lg font-semibold text-blue-800 mb-2">About Midashi</h3>
+ <H className="text-lg font-semibold text-blue-800 mb-2">About Midashi</H>Also applies to: 78-78
🤖 Prompt for AI Agents
In demo/src/App.tsx at lines 65-66 and 78, replace the hardcoded h2 and h3
heading elements with the H component to maintain consistent use of Midashi's
automatic heading hierarchy management. Update the JSX to use <H> with
appropriate level props instead of raw h2 or h3 tags, ensuring the demo aligns
with best practices and the intended usage of the H component.
| <h4 className="font-semibold text-gray-800">Web Development</h4> | ||
| <p className="text-gray-600 text-sm mt-2">Modern, responsive websites</p> | ||
| </div> | ||
| <div className="bg-white p-4 rounded shadow"> | ||
| <h4 className="font-semibold text-gray-800">Digital Marketing</h4> | ||
| <p className="text-gray-600 text-sm mt-2">Grow your online presence</p> | ||
| </div> | ||
| <div className="bg-white p-4 rounded shadow"> | ||
| <h4 className="font-semibold text-gray-800">Graphic Design</h4> | ||
| <p className="text-gray-600 text-sm mt-2">Beautiful visual solutions</p> | ||
| </div> | ||
| <div className="bg-white p-4 rounded shadow"> | ||
| <h4 className="font-semibold text-gray-800">Consulting</h4> | ||
| <p className="text-gray-600 text-sm mt-2">Strategic business guidance</p> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace hardcoded h4 elements with H component for consistency.
The service cards use hardcoded h4 elements instead of the H component, which bypasses Midashi's automatic heading hierarchy management. This inconsistency could confuse users learning the library.
Apply this diff to use the H component consistently:
- <h4 className="font-semibold text-gray-800">Web Development</h4>
+ <H className="font-semibold text-gray-800">Web Development</H>- <h4 className="font-semibold text-gray-800">Digital Marketing</h4>
+ <H className="font-semibold text-gray-800">Digital Marketing</H>- <h4 className="font-semibold text-gray-800">Graphic Design</h4>
+ <H className="font-semibold text-gray-800">Graphic Design</H>- <h4 className="font-semibold text-gray-800">Consulting</h4>
+ <H className="font-semibold text-gray-800">Consulting</H>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h4 className="font-semibold text-gray-800">Web Development</h4> | |
| <p className="text-gray-600 text-sm mt-2">Modern, responsive websites</p> | |
| </div> | |
| <div className="bg-white p-4 rounded shadow"> | |
| <h4 className="font-semibold text-gray-800">Digital Marketing</h4> | |
| <p className="text-gray-600 text-sm mt-2">Grow your online presence</p> | |
| </div> | |
| <div className="bg-white p-4 rounded shadow"> | |
| <h4 className="font-semibold text-gray-800">Graphic Design</h4> | |
| <p className="text-gray-600 text-sm mt-2">Beautiful visual solutions</p> | |
| </div> | |
| <div className="bg-white p-4 rounded shadow"> | |
| <h4 className="font-semibold text-gray-800">Consulting</h4> | |
| <p className="text-gray-600 text-sm mt-2">Strategic business guidance</p> | |
| </div> | |
| <H className="font-semibold text-gray-800">Web Development</H> | |
| <p className="text-gray-600 text-sm mt-2">Modern, responsive websites</p> | |
| </div> | |
| <div className="bg-white p-4 rounded shadow"> | |
| <H className="font-semibold text-gray-800">Digital Marketing</H> | |
| <p className="text-gray-600 text-sm mt-2">Grow your online presence</p> | |
| </div> | |
| <div className="bg-white p-4 rounded shadow"> | |
| <H className="font-semibold text-gray-800">Graphic Design</H> | |
| <p className="text-gray-600 text-sm mt-2">Beautiful visual solutions</p> | |
| </div> | |
| <div className="bg-white p-4 rounded shadow"> | |
| <H className="font-semibold text-gray-800">Consulting</H> | |
| <p className="text-gray-600 text-sm mt-2">Strategic business guidance</p> | |
| </div> |
🤖 Prompt for AI Agents
In demo/src/components/WebsiteExample.tsx between lines 36 and 50, replace all
hardcoded h4 elements with the H component to maintain consistent heading
hierarchy management by Midashi. Change each <h4> tag to <H> while preserving
the existing class names and content inside. This ensures uniform usage of the H
component across service cards.
| @import "tailwindcss"; | ||
|
|
There was a problem hiding this comment.
Tailwind CSS is imported incorrectly
Tailwind v4 expects the directive form, not a plain @import. The current style sheet is never populated with base/utility layers.
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;Without this, the demo will render unstyled on first load.
🤖 Prompt for AI Agents
In demo/src/index.css at lines 1 to 2, the Tailwind CSS is imported using a
plain @import statement, which is incorrect for Tailwind v4. Replace the @import
with the proper Tailwind directives: use @tailwind base; @tailwind components;
and @tailwind utilities; to ensure the stylesheet includes all necessary layers
and the demo renders styled on first load.
| /* Linting */ | ||
| "strict": true, | ||
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "erasableSyntaxOnly": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "noUncheckedSideEffectImports": true |
There was a problem hiding this comment.
Unknown compiler options will break tsc in CI.
erasableSyntaxOnly and noUncheckedSideEffectImports are not recognised by the latest published TypeScript (≤ 5.4). tsc -b will exit with error TS5023: Unknown compiler option. Drop them or guard behind a future-version comment.
- "erasableSyntaxOnly": true,
- "noUncheckedSideEffectImports": true🤖 Prompt for AI Agents
In demo/tsconfig.app.json around lines 18 to 24, the compiler options
"erasableSyntaxOnly" and "noUncheckedSideEffectImports" are not recognized by
the current TypeScript version and cause tsc to fail in CI. Remove these two
options from the configuration or conditionally include them using a
future-version comment to avoid breaking the build.
- Remove .ts extension from relative imports - Fix build errors in components.tsx and index.ts - Ensure compatibility with TypeScript module resolution 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Fix JSX namespace issues in HooksExample.tsx - Update demo pnpm-lock.yaml with correct midashi dependency - Ensure builds work correctly for GitHub Actions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add additional permissions (contents: write, pages: write, actions: write) - Use personal_token instead of github_token for gh-pages deployment - Add fetch-depth: 0 and keep_files: true for better compatibility - Set explicit user info for git commits 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
|
🚀 Preview deployed! You can preview this PR at: https://bmthd.github.io/midashi/pr-58/
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
.github/workflows/pr-preview.yml (3)
47-48: Fragilesedpattern – could silently fail if the line changes.
Hard-coding the exact line contents means a future edit tovite.config.ts(extra whitespace, comments, different quotes, etc.) will leave the base path unmodified and the preview broken. A safer approach is a small Node/ts-node script that rewrites thebaseproperty via AST or JSON parse ofdefineConfig.
68-76: Only the first 30 comments are scanned – earlier preview comments may be missed.
issues.listCommentspaginates; if a PR has >30 comments, an old preview comment might live on page 2 and a second one will be created. Usepaginatehelper or setper_page: 100and loop until exhausted.
22-79: Trailing whitespace & missing final newline (YAMLlint).
These won’t break the workflow but cleaning them keeps the repo tidy and silences automated linters..github/workflows/deploy-pages.yml (1)
23-46: House-keeping: trailing spaces and missing final newline (YAMLlint).
Purely cosmetic but keeps CI linters quiet.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
demo/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
.github/workflows/deploy-pages.yml(1 hunks).github/workflows/pr-preview.yml(1 hunks)demo/src/components/HooksExample.tsx(1 hunks)lib/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- lib/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- demo/src/components/HooksExample.tsx
🧰 Additional context used
🪛 YAMLlint (1.37.1)
.github/workflows/pr-preview.yml
[error] 22-22: trailing spaces
(trailing-spaces)
[error] 27-27: trailing spaces
(trailing-spaces)
[error] 33-33: trailing spaces
(trailing-spaces)
[error] 36-36: trailing spaces
(trailing-spaces)
[error] 39-39: trailing spaces
(trailing-spaces)
[error] 42-42: trailing spaces
(trailing-spaces)
[error] 49-49: trailing spaces
(trailing-spaces)
[error] 59-59: trailing spaces
(trailing-spaces)
[error] 66-66: trailing spaces
(trailing-spaces)
[error] 73-73: trailing spaces
(trailing-spaces)
[error] 74-74: trailing spaces
(trailing-spaces)
[error] 77-77: trailing spaces
(trailing-spaces)
[error] 79-79: trailing spaces
(trailing-spaces)
[error] 94-94: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/deploy-pages.yml
[error] 23-23: trailing spaces
(trailing-spaces)
[error] 28-28: trailing spaces
(trailing-spaces)
[error] 34-34: trailing spaces
(trailing-spaces)
[error] 37-37: trailing spaces
(trailing-spaces)
[error] 40-40: trailing spaces
(trailing-spaces)
[error] 43-43: trailing spaces
(trailing-spaces)
[error] 46-46: trailing spaces
(trailing-spaces)
[error] 61-61: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (2)
.github/workflows/pr-preview.yml (1)
28-33: Consider sticking to the current LTS Node instead of22.
Node 22 is still in “Current” status; GitHub-hosted runners expose it behind thenode-version: 22label, but many front-end toolchains (Vite/Tailwind) are validated against the active LTS (v20). Unless the project explicitly relies on 22-only features, use20to avoid unexpected breakage in the CI image roll-over..github/workflows/deploy-pages.yml (1)
29-34: Use the active LTS Node release unless 22 is required.
Same rationale as in the PR-preview workflow: defaulting to v20 reduces the risk of CI instability and aligns with most ecosystem test matrices.
| permissions: | ||
| contents: write | ||
| pull-requests: write | ||
| pages: write | ||
| actions: write | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Tighten permissions – drop the unnecessary actions: write.
actions: write is only required when a workflow programmatically creates/modifies other workflow runs. This job doesn’t do that, so leaving it out follows the principle of least privilege and improves repository security.
permissions:
contents: write
pull-requests: write
pages: write
- actions: write📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| permissions: | |
| contents: write | |
| pull-requests: write | |
| pages: write | |
| actions: write | |
| permissions: | |
| contents: write | |
| pull-requests: write | |
| pages: write |
🤖 Prompt for AI Agents
In .github/workflows/pr-preview.yml lines 7 to 12, remove the 'actions: write'
permission from the permissions block because this workflow does not create or
modify other workflow runs. This reduces permissions to only what is necessary,
following the principle of least privilege and enhancing security.
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
demo/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
.github/workflows/deploy-pages.yml(1 hunks).github/workflows/pr-preview.yml(1 hunks)demo/src/components/HooksExample.tsx(1 hunks)lib/index.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- lib/index.ts
- demo/src/components/HooksExample.tsx
🧰 Additional context used
🪛 YAMLlint (1.37.1)
.github/workflows/deploy-pages.yml
[error] 23-23: trailing spaces
(trailing-spaces)
[error] 28-28: trailing spaces
(trailing-spaces)
[error] 34-34: trailing spaces
(trailing-spaces)
[error] 37-37: trailing spaces
(trailing-spaces)
[error] 40-40: trailing spaces
(trailing-spaces)
[error] 43-43: trailing spaces
(trailing-spaces)
[error] 46-46: trailing spaces
(trailing-spaces)
[error] 61-61: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/pr-preview.yml
[error] 22-22: trailing spaces
(trailing-spaces)
[error] 27-27: trailing spaces
(trailing-spaces)
[error] 33-33: trailing spaces
(trailing-spaces)
[error] 36-36: trailing spaces
(trailing-spaces)
[error] 39-39: trailing spaces
(trailing-spaces)
[error] 42-42: trailing spaces
(trailing-spaces)
[error] 49-49: trailing spaces
(trailing-spaces)
[error] 59-59: trailing spaces
(trailing-spaces)
[error] 66-66: trailing spaces
(trailing-spaces)
[error] 73-73: trailing spaces
(trailing-spaces)
[error] 74-74: trailing spaces
(trailing-spaces)
[error] 77-77: trailing spaces
(trailing-spaces)
[error] 79-79: trailing spaces
(trailing-spaces)
[error] 94-94: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (4)
.github/workflows/deploy-pages.yml (2)
23-46: Trim trailing whitespace to silence YAML lintMultiple lines (23, 28, 34, 37, 40, 43, 46) contain stray spaces flagged by YAML-lint.
While harmless at runtime, cleaning them keeps lint pipelines green.[ suggest_nitpick ]
48-61: Missing final newlineAdd a
\nat EOF to satisfy POSIX tools & linters.[ suggest_nitpick ]
.github/workflows/pr-preview.yml (2)
50-58: Workflow writes to default branch without protection bypassPublishing to
gh-pagesviapeaceiris/actions-gh-pagescommits withgithub-actions[bot].
Ensure the repository has branch-protections that allow this actor, otherwise the step will fail.
59-94: Trailing whitespace & missing EOF newlineSame lint concerns: lines 22, 27, 33, 36, 39, 42, 49, 59, 66, 73-79 contain trailing spaces; file lacks terminal newline.
[ suggest_nitpick ]
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '22' | ||
| cache: 'pnpm' | ||
|
|
There was a problem hiding this comment.
Node v22 is not yet a GA runner image – expect builds to fail
actions/setup-node@v4 supports only versions that exist on the hosted images (currently 20 LTS & 18 LTS).
Requesting an unreleased “22” will make the step error out.
- node-version: '22'
+ # Use the latest LTS to ensure the image exists
+ node-version: '20' # or 'lts/*'🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 34-34: trailing spaces
(trailing-spaces)
🤖 Prompt for AI Agents
In .github/workflows/deploy-pages.yml around lines 29 to 34, the Node.js version
is set to '22', which is not yet supported by the hosted runner images and will
cause build failures. Change the node-version value from '22' to a supported
version such as '20' or '18' to ensure compatibility with the available runner
images and prevent errors during setup.
| - name: Install demo dependencies | ||
| run: cd demo && pnpm install | ||
|
|
||
| - name: Build demo | ||
| run: cd demo && npx vite build | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Double-install wastes 1–2 min per run
Because demo/ is just another workspace package, a single root pnpm install already lays out all node-modules for every sub-package. The second install in demo adds no value but costs CI time.
- - name: Install demo dependencies
- run: cd demo && pnpm install
-
- - name: Build demo
- run: cd demo && npx vite build
+ - name: Build demo
+ run: pnpm --filter demo exec vite build📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - name: Install demo dependencies | |
| run: cd demo && pnpm install | |
| - name: Build demo | |
| run: cd demo && npx vite build | |
| - name: Build demo | |
| run: pnpm --filter demo exec vite build |
🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 43-43: trailing spaces
(trailing-spaces)
[error] 46-46: trailing spaces
(trailing-spaces)
🤖 Prompt for AI Agents
In .github/workflows/deploy-pages.yml around lines 41 to 46, the workflow runs
`pnpm install` inside the demo directory after already running a root-level
`pnpm install`, causing redundant installation and wasting CI time. Remove the
step that runs `pnpm install` inside the demo directory to avoid double
installation, relying solely on the root `pnpm install` to set up all workspace
packages.
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '22' | ||
| cache: 'pnpm' | ||
|
|
There was a problem hiding this comment.
Same Node v22 problem as in deploy workflow
Use 20 or lts/* to match available runner images.
🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 33-33: trailing spaces
(trailing-spaces)
🤖 Prompt for AI Agents
In .github/workflows/pr-preview.yml at lines 28 to 33, the Node.js version is
set to '22', which is not supported by the available runner images. Change the
node-version value from '22' to '20' or 'lts/*' to ensure compatibility with the
runner environment.
| - name: Build demo with PR base path | ||
| run: | | ||
| cd demo | ||
| # Update base path for PR preview | ||
| sed -i "s|base: '/midashi/',|base: '/midashi/pr-${{ github.event.number }}/',|" vite.config.ts | ||
| npx vite build | ||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fragile sed mutation – prefer Vite’s --base flag
In-place string replacement can silently fail if the file format drifts. Vite already accepts a --base CLI parameter.
- # Update base path for PR preview
- sed -i "s|base: '/midashi/',|base: '/midashi/pr-${{ github.event.number }}/',|" vite.config.ts
- npx vite build
+ npx vite build --base "/midashi/pr-${{ github.event.number }}/"More robust & avoids committing a modified file to the artifact.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - name: Build demo with PR base path | |
| run: | | |
| cd demo | |
| # Update base path for PR preview | |
| sed -i "s|base: '/midashi/',|base: '/midashi/pr-${{ github.event.number }}/',|" vite.config.ts | |
| npx vite build | |
| - name: Build demo with PR base path | |
| run: | | |
| cd demo | |
| npx vite build --base "/midashi/pr-${{ github.event.number }}/" |
🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 49-49: trailing spaces
(trailing-spaces)
🤖 Prompt for AI Agents
In .github/workflows/pr-preview.yml around lines 43 to 49, replace the fragile
in-place sed command that modifies vite.config.ts with using Vite's built-in
--base CLI flag during the build step. Remove the sed command and instead pass
the base path dynamically to the vite build command using the --base option to
avoid modifying source files and improve robustness.
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Summary
This PR adds a comprehensive demo application to showcase the Midashi library with GitHub Pages deployment.
What's Added
Demo Application (
/demo/)useCurrentLevel()anduseNextLevel()hooks@tailwindcss/viteplugin integrationKey Features
<main>,<section>,<article>, etc.GitHub Pages Ready
/midashi/) for GitHub PagesDemo Preview
Once deployed, the demo will be available at:
https://bmthd.github.io/midashi/The demo includes:
Testing
Fixes #12
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation
Chores
.gitignorefor the demo to exclude environment-specific and build files.Style