Add Shirym-min demo page #116
Merged
+688
−330
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a new client-side demo "Shirym-min": a Next.js page component, responsive CSS module, bilingual JSON content, and a runtime dependency Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Fix all issues with AI agents
In `@src/app/demo/Shirym-min/min.module.css`:
- Around line 65-67: The CSS rule .gridcontents > div sets background-color:
black but doesn't set a contrasting text color; update the rule to explicitly
set a readable foreground (e.g. color: white or a high-contrast variable) and
also ensure descendant elements like links/buttons inside .gridcontents > div
inherit or override with accessible colors (use color variables or ensure
:link/:visited/:hover states are high contrast) so text and controls are
readable on the black cards.
- Around line 19-24: The .changelanguage rule uses invalid CSS padding syntax
("padding: 24px,24px;") so browsers ignore it; update the .changelanguage style
to use valid padding notation (e.g., space-separated values like "24px 24px" or
a single value "24px") and remove the comma so the spacing actually applies.
In `@src/app/demo/Shirym-min/mincontents.json`:
- Around line 1-6: The JSON entry contains a full birthdate under the "birthday"
key in the Shirym-min object which exposes sensitive PII; update the "birthday"
value to a less granular form (e.g., "09/05" or remove the key entirely) and
adjust any UI/consumer text that expects a full date to handle the redacted
format (search for usages of "birthday" in components or code that reads
mincontents.json and ensure they tolerate month/day-only or missing values).
In `@src/app/demo/Shirym-min/page.tsx`:
- Around line 70-71: The Link element in src/app/demo/Shirym-min/page.tsx that
renders external URL (Link href={data.mygithub} target="_blank") is missing
rel="noopener noreferrer"; update that JSX element to include rel="noopener
noreferrer" (on the same Link component rendering the GitHub URL) to prevent
reverse-tabnabbing and match other instances in the codebase.
- Around line 62-66: The mapped JSX lists rendering
data.description[lang].map(...) and the other map at lines noted are missing
React key props; update both map callbacks (the one iterating
data.description[lang] and the other at lines 90–97) to return elements with a
stable key (e.g., use a unique identifier from the item if available or fallback
to the map index) so each <p> has a key prop; ensure the key is passed on the
returned element inside the map callback in page.tsx.
- Line 72: The Image component instance (Image with className={style.image}
src={data.imagesrc} width={200} height={200}) is missing an alt attribute and
causes the build to fail; add an alt prop (e.g., alt={data.alt} or
alt={data.title} or a meaningful string) or use alt="" if the image is purely
decorative so the JSX becomes Image ... alt={...} to satisfy
next/core-web-vitals linting.
🧹 Nitpick comments (1)
src/app/demo/Shirym-min/page.tsx (1)
25-40: Avoid re-running the animation on every render.
useEffectruns after every render without a dependency array, which replays the animation whenever state changes.♻️ Suggested fix
- useEffect(() => { + useEffect(() => { controls.start((i) => ({ scale: 1, textShadow: [ "0 0 90px `#FFF`, 0 0 90px `#FFF`", "0 0 3px `#FFF`, 0 0 3px `#FFF`", "0 0 0 `#FFF`", ], opacity: [0, 1, 1], transition: { ease: "easeOut", duration: 2, delay: i * 0.1, }, })) - }) + }, [controls]);
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/app/demo/Shirym-min/page.tsx`:
- Around line 10-11: Replace the JSX-only comment token used at module scope
with a valid JavaScript comment: locate the module-level comment instance that
currently uses {/* モバイル対応は後で行う */} in the Shirym-min page module and change it
to either // モバイル対応は後で行う or /* モバイル対応は後で行う */ so the file-level comment is valid
outside JSX.
- Around line 25-40: The useEffect containing controls.start((i) => {...}) is
missing a dependency array causing the animation to restart on every render;
update the hook call for mount-only behavior by adding an empty dependency array
as the second argument to useEffect (i.e., useEffect(() => { controls.start(...)
}, [])) so the entrance animation runs only once on mount while keeping the
existing controls.start callback intact.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Member
|
とりあえずビルドだけしてプレビューを閲覧できるところまでは編集しました。確認してみてください。 |
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
rotarymars
requested changes
Feb 2, 2026
Member
|
一度確認してみてください。 |
# Conflicts: # package-lock.json # package.json # src/app/demo/page.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/app/demo/Shirym-min/min.module.css`:
- Around line 19-28: The CSS file contains a stray duplicate declaration and an
extra closing brace after the .changelanguage rule; remove the orphaned
`white-space: nowrap;` line and the extra `}` so the .changelanguage block is
the only place defining whitespace and the stylesheet parses correctly. Target
the `.changelanguage` rule in min.module.css and ensure it ends with a single
closing brace and no duplicate declarations following it.
Looks like it messed up the package-lock.json at some time.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/app/demo/Shirym-min/page.tsx`:
- Line 50: The alt text on the Image component has a typo ("Avater"); update the
alt prop on the Image element (Image with className={style.image} and
src={data.imagesrc}) to a correct, accessible string such as "GitHub avatar" or
"GitHub Avatar" to fix screen-reader text and improve accessibility.
Contributor
Author
Fixed Some Issues and Added New FeaturesFixed
New Features
|
Contributor
Author
|
Contributor
Author
いくつかの問題を修正し、新機能を追加しました修正
新機能
|
Contributor
Author
そのほか
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/app/demo/Shirym-min/page.tsx`:
- Around line 6-15: Remove the unused animation and dark-mode bits: delete the
imports useEffect, motion, and useAnimationControls from the top of the file and
remove the controls, isDarkMode, and setIsDarkMode declarations inside the
Shirymmin component; if you intend to add animation or dark-mode later, leave a
small comment or re-introduce useAnimationControls()/useState when used,
otherwise remove these symbols to clear lint warnings (target symbols:
useEffect, motion, useAnimationControls, controls, isDarkMode, setIsDarkMode,
Shirymmin).
rotarymars
approved these changes
Feb 4, 2026
Member
rotarymars
left a comment
rotarymars
left a comment
There was a problem hiding this comment.
言語変換のときのバグも直っていて良い感じだと思います！
Contributor
|
|
Contributor
Author
|
表示が入れ替わっていた問題を修正しました。 |
K10-K10
approved these changes
Feb 6, 2026
hatuna-827
requested changes
Feb 8, 2026
Contributor
hatuna-827
left a comment
hatuna-827
left a comment
There was a problem hiding this comment.
start review で送信されていると思っていました。遅くなってすみません。
Co-authored-by: hatuna-827 <hatuna827yadaka@gmail.com>
Co-authored-by: hatuna-827 <hatuna827yadaka@gmail.com>
Contributor
Author
|
ありがとうございます |
Contributor
Author
|
all done |
hatuna-827
approved these changes
Feb 9, 2026
Member
|
マージokです |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Release Notes
New Features
Will be fixed in the future
Operation has been verified on PC
Summary by CodeRabbit
New Features
Style
Chores