Add compact reactions layout option#1687
Open
javatarz wants to merge 3 commits into
Open
Conversation
Add data-reactions-layout configuration option to display reactions
inline with comment count for a cleaner, more compact layout.
When set to "compact", reactions appear in the header alongside
comment count instead of in a separate section above comments.
Default behavior ("default") remains unchanged.
Changes:
- Add ReactionsLayout type with "default" and "compact" values
- Add reactionsLayout to ConfigContext and ISetConfigMessage
- Update client.ts to read data-reactions-layout attribute
- Update widget.tsx to parse and pass reactionsLayout config
- Modify Giscus.tsx to conditionally render compact layout
- Add CSS styling for inline reactions display
|
@javatarz is attempting to deploy a commit to the giscus Team on Vercel. A member of the Team first needs to authorize it. |
Add UI to the giscus.app configuration page for selecting reactions layout option (default or compact). Changes: - Add reactionsLayout to IDirectConfig interface - Add radio buttons for choosing layout in Configuration.tsx - Include reactionsLayout in generated script tag - Update pages/index.tsx to initialize and manage reactionsLayout state - Add i18n strings for reactions layout options in English The reactions layout option is only shown when reactions are enabled, appearing as an indented sub-option for better visual hierarchy.
Add translated configuration strings for the reactions layout option to all 35 supported locales. This ensures the giscus.app configuration page displays properly for all languages. Translations added for: - reactionsLayout: Label for the layout option - reactionsLayoutDefault: Label for default layout option - reactionsLayoutCompact: Label for compact layout option - reactionsLayoutDescription: Help text explaining the option Languages covered: Arabic, Belarusian, Bulgarian, Catalan, Czech, Danish, German, English, Esperanto, Spanish, Basque, Persian, French, Greek, Serbo-Croatian, Hebrew, Hungarian, Indonesian, Italian, Japanese, Khmer, Korean, Dutch, Polish, Portuguese, Romanian, Russian, Thai, Turkish, Ukrainian, Uzbek, Vietnamese, Chinese (Simplified, Hong Kong, Traditional)
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Implements #1686 - Adds a configuration option to display reactions inline with the comment count for a cleaner, more compact layout.
Screenshots
Configuration UI
Here's a screenshot, with a red box around the part I changed
Changes
Core Feature Implementation
New Configuration Option:
data-reactions-layoutwith values:"default"(default): Current behavior - reactions displayed prominently above comments"compact": Reactions displayed inline with comment count in headerType System:
ReactionsLayouttype ('default' | 'compact')ISetConfigMessageandConfigContextinterfacesImplementation:
client.ts: Readsdata-reactions-layoutattribute from script tagpages/widget.tsx: Parses and passes config to React contextcomponents/Giscus.tsx: Conditionally renders compact layoutstyles/base.css: Adds.gsc-reactions-compactstyling for inline displayConfiguration UI
Added giscus.app Configuration Page UI:
Files Modified:
components/Configuration.tsx: Added reactionsLayout to IDirectConfig, added UI controlspages/index.tsx: Initialize and manage reactionsLayout stateInternationalization
reactionsLayout,reactionsLayoutDefault,reactionsLayoutCompact,reactionsLayoutDescriptionLayout Comparison
Default layout (unchanged):
Compact layout (new):
Usage
Manual Integration
Add the new
data-reactions-layoutattribute to your existing giscus script tag:Options for
data-reactions-layout:"default"(or omit the attribute) - Shows reactions above comments (current behavior)"compact"- Shows reactions inline with comment count (new)Using giscus.app
The generated script will automatically include
data-reactions-layout.Testing
Benefits
Commits
511159c- Core functionality (types, context, rendering, styling)609c136- Configuration UI (English strings and UI controls)2675799- Full internationalization (all 35 locales)