Feat: Social Media Inspired Home Layout #18
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
- Introduced a new homepage layout (home-v2) with a modern, social media-inspired design. - Implemented CSS styles in _sass/components/_home-v2.scss for layout aesthetics and responsiveness. - Added JavaScript functionality in assets/js/home-v2.js for interactive features like stories navigation, post filtering, and share actions. - Updated extended.scss and main.scss to include the new home-v2 styles. - Created documentation (docs/home-v2-layout.md) detailing features, usage, and customization options for the new layout. - Updated layouts.md to include a summary of the home-v2 layout and its key features. - Changed the index.html layout to use home-v2 for the main page.
… transition effects
… improved style application
…essibility and structure
…es for better maintainability
…proved clarity and organization
… for improved layout
…-inspired home layout post with engaging features
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new social media–inspired homepage (home-v2), updates documentation and navigation to surface the new layout, and adds a site-statistics widget plus minor style and template tweaks.
- Added
home-v2layout, supporting templates, scripts, and styles - Updated documentation, navigation, and README to reference the new layout
- Introduced an optional site statistics widget and improved comments wrapper integration
Reviewed Changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| v2.md | New front-matter page for /v2/ layout |
| docs/layouts.md | Added “Home-v2 Layout” section and usage example |
| docs/index.md | Linked new layout in docs index |
| assets/js/home-v2.js | Interactive JS for view toggles, filter tabs, and animations |
| assets/css/main.scss | Imported components/home-v2 |
| assets/css/extended.scss | Imported components/home-v2 in extended styles |
| _sass/components/_search.scss | Removed redundant border rules |
| _sass/components/_pagination.scss | Revised responsive pagination layout |
| _posts/2025-05-30-introducing-social-media-inspired-home-layout.md | Announcement post for home-v2 |
| _posts/2025-05-14-new-features-in-arsxy-theme.md | Adjusted category capitalization in front-matter |
| _posts/2025-05-13-configurable-hero-section.md | Adjusted category capitalization; removed featured flag |
| _posts/2025-05-13-advanced-arsxy-theme-features.md | Added featured: true flag |
| _posts/2025-05-12-welcome-to-arsxy-theme.md | Removed featured flag from sample post |
| _layouts/home-v2.html | New template for social media–style homepage |
| _layouts/default.html | Conditionally loads home-v2.js script |
| _includes/post-feed-v2.html | New include for post feed with avatars, badges, actions |
| _includes/giscus.html | Added id="comments-wrapper" for post actions |
| _config.yml | Added “V2” navigation link and stats widget config |
| README.md | Updated features list to include social layout |
Comments suppressed due to low confidence (3)
_posts/2025-05-14-new-features-in-arsxy-theme.md:4
- [nitpick] The category
updatesis lowercase whileFeaturesis capitalized. Consider consistent capitalization (e.g.[Features, Updates]) to avoid splitting categories in Jekyll.
categories: [Features, updates]
_posts/2025-05-13-configurable-hero-section.md:4
- [nitpick] Mixed capitalization in categories (
Featuresvscustomization). Standardize to[Features, Customization]for consistency.
categories: [Features, customization]
assets/js/home-v2.js:1
- The new interactive features in
home-v2.js(view toggles, filter tabs, animations) lack accompanying unit or integration tests. Consider adding tests to validate these behaviors and prevent regressions.
// Social Media Inspired Homepage (home-v2) JavaScript
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new social media–inspired home-v2 layout to the Jekyll theme, updates navigation and documentation, and enables a site statistics widget.
- Introduce
home-v2layout, assets, and scripts for Instagram-style stories, post cards, view toggles, and filters - Update docs and navigation to reference the new layout
- Enable and document a site statistics widget
Reviewed Changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| v2.md | Added frontmatter for the /v2 landing page |
| docs/layouts.md | Documented the new home-v2 layout |
| docs/index.md | Added link to the Home-v2 layout |
| assets/js/home-v2.js | New JS for view toggles, filters, and animations |
| assets/css/main.scss | Imported home-v2 component styles |
| assets/css/extended.scss | Imported home-v2 component styles |
| _sass/components/_search.scss | Removed redundant borders |
| _sass/components/_pagination.scss | Refactored mobile pagination styles |
| _posts/2025-05-30-introducing-social-media-inspired… | New blog post announcing the home-v2 layout |
| _posts/2025-05-14-new-features-in-arsxy-theme.md | Adjusted category casing in frontmatter |
| _posts/2025-05-13-configurable-hero-section.md | Adjusted category casing, removed duplicate featured |
| _posts/2025-05-13-advanced-arsxy-theme-features.md | Added featured: true flag |
| _posts/2025-05-12-welcome-to-arsxy-theme.md | Removed outdated featured flag |
| _layouts/home-v2.html | New layout template for home-v2 |
| _layouts/default.html | Conditional inclusion of home-v2.js |
| _includes/post-feed-v2.html | New include for post cards with v2 features |
| _includes/giscus.html | Added id="comments-wrapper" for anchor linking |
| _config.yml | Enabled stats widget and added “V2” nav entry |
| README.md | Updated feature list with home-v2 layout |
Comments suppressed due to low confidence (2)
_posts/2025-05-14-new-features-in-arsxy-theme.md:4
- [nitpick] Category names use inconsistent casing—consider standardizing (e.g., all lowercase or Title Case).
categories: [Features, updates]
_posts/2025-05-13-configurable-hero-section.md:4
- [nitpick] Category names use inconsistent casing—consider standardizing across posts for consistency.
categories: [Features, customization]
| {% endif %} | ||
| {% include post-feed-v2.html posts=posts_to_show %} | ||
|
|
||
| <!-- Fetured Posts Section --> |
There was a problem hiding this comment.
Typo in comment: "Fetured" should be "Featured".
Suggested change
| <!-- Fetured Posts Section --> | |
| <!-- Featured Posts Section --> |
Comment on lines
+40
to
+57
| postsContainer.style.display = 'grid'; | ||
| postsContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(350px, 1fr))'; | ||
| postsContainer.style.gap = '1.5rem'; | ||
|
|
||
| // Adjust post cards for grid view | ||
| document.querySelectorAll('.post-card').forEach(card => { | ||
| card.style.marginBottom = '0'; | ||
| }); | ||
| } else { | ||
| postsContainer.classList.remove('grid-view'); | ||
| postsContainer.style.display = 'flex'; | ||
| postsContainer.style.flexDirection = 'column'; | ||
| postsContainer.style.gap = '2rem'; | ||
| postsContainer.style.gridTemplateColumns = 'none'; | ||
|
|
||
| // Reset post cards for feed view | ||
| document.querySelectorAll('.post-card').forEach(card => { | ||
| card.style.marginBottom = ''; |
There was a problem hiding this comment.
[nitpick] Multiple inline style assignments can be hard to maintain; consider toggling CSS classes instead of setting many inline styles.
Suggested change
| postsContainer.style.display = 'grid'; | |
| postsContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(350px, 1fr))'; | |
| postsContainer.style.gap = '1.5rem'; | |
| // Adjust post cards for grid view | |
| document.querySelectorAll('.post-card').forEach(card => { | |
| card.style.marginBottom = '0'; | |
| }); | |
| } else { | |
| postsContainer.classList.remove('grid-view'); | |
| postsContainer.style.display = 'flex'; | |
| postsContainer.style.flexDirection = 'column'; | |
| postsContainer.style.gap = '2rem'; | |
| postsContainer.style.gridTemplateColumns = 'none'; | |
| // Reset post cards for feed view | |
| document.querySelectorAll('.post-card').forEach(card => { | |
| card.style.marginBottom = ''; | |
| postsContainer.classList.remove('feed-view'); | |
| // Adjust post cards for grid view | |
| document.querySelectorAll('.post-card').forEach(card => { | |
| card.classList.add('grid-post-card'); | |
| card.classList.remove('feed-post-card'); | |
| }); | |
| } else { | |
| postsContainer.classList.add('feed-view'); | |
| postsContainer.classList.remove('grid-view'); | |
| // Reset post cards for feed view | |
| document.querySelectorAll('.post-card').forEach(card => { | |
| card.classList.add('feed-post-card'); | |
| card.classList.remove('grid-post-card'); |
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.
Description
This pull request introduces enhancements to the Jekyll theme, focusing on a new social media-inspired layout (
home-v2), improved navigation, and added functionality like a site statistics widget. The changes aim to modernize the user experience and provide additional customization options.New Layout and Features:
home-v2layout with Instagram-style stories and engaging post cards. (README.md- [1]_layouts/default.html- [2]post-feed-v2.htmltemplate with features like author avatars, featured post badges, share buttons, and reading time estimation. (_includes/post-feed-v2.html- _includes/post-feed-v2.htmlR1-R169)Navigation Enhancements:
/v2). (_config.yml- _config.ymlR126-R128)Functional Additions:
_config.yml- _config.ymlR103-R107)Minor Improvements:
idattribute to the comments wrapper for better integration with post actions. (_includes/giscus.html- _includes/giscus.htmlL2-R2)Related Issue
Type of Change
Checklist
Screenshots