Home and About Page Theme Tweaks #29
Conversation
📝 WalkthroughSummary by CodeRabbit
Summary by CodeRabbit
WalkthroughThe updates revise UI styling and refactor several Vue components to simplify social media integration. Social media links are removed from the About and Footer sections and consolidated into a new WidgetSocialPartial component. Colour schemes shift from fuchsia to teal in dark mode. The HeaderPartial component is modernised using the Composition API. SSL credentials are replaced, and Makefile and seeder scripts receive formatting and functional enhancements. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AboutPage
participant WidgetSocialPartial
participant UserStore
User ->> AboutPage: Loads About page
AboutPage ->> WidgetSocialPartial: Renders sidebar widget
WidgetSocialPartial ->> UserStore: Waits for onBoot, fetches social media data
UserStore -->> WidgetSocialPartial: Returns social media map
WidgetSocialPartial -->> User: Renders social media links (if available)
sequenceDiagram
participant User
participant HeaderPartial
participant LocalStorage
participant DocumentRoot
User ->> HeaderPartial: Clicks dark mode toggle
HeaderPartial ->> LocalStorage: Updates 'dark-mode' value
HeaderPartial ->> DocumentRoot: Adds/removes 'dark' class
DocumentRoot -->> User: UI updates to dark/light mode
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (3)
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (8)
web/index.html(1 hunks)web/src/css/support/blog.css(3 hunks)web/src/pages/AboutPage.vue(3 hunks)web/src/partials/AvatarPartial.vue(1 hunks)web/src/partials/FooterPartial.vue(0 hunks)web/src/partials/HeaderPartial.vue(3 hunks)web/src/partials/WidgetSocialPartial.vue(1 hunks)web/src/stores/users/userType.ts(1 hunks)
💤 Files with no reviewable changes (1)
- web/src/partials/FooterPartial.vue
👮 Files not reviewed due to content moderation or server errors (2)
- web/src/partials/HeaderPartial.vue
- web/src/pages/AboutPage.vue
🔇 Additional comments (23)
web/src/stores/users/userType.ts (1)
8-8: Excellent type system improvement!Converting
SocialMediaMapfrom a const to a type alias is the correct approach for a type-only construct. This improves the TypeScript usage without any runtime impact.web/src/partials/AvatarPartial.vue (1)
24-24: Consistent colour theme update.The ring colour changes align well with the broader design system updates moving to teal accents in dark mode. Good consistency across components.
web/src/css/support/blog.css (2)
1-7: Well-structured addition of search icon styling.The new
.blog-header-search-iconclass follows good CSS organisation principles and maintains consistency with the colour theme updates.
13-13: Consistent colour theme migration.The systematic update from fuchsia to teal variants in dark mode across multiple selectors demonstrates excellent design system consistency. The coordinated colour changes enhance the visual coherence of the application.
Also applies to: 22-22, 35-35, 40-40
web/src/partials/WidgetSocialPartial.vue (1)
38-51: Well-implemented Composition API usage.The component properly uses the Composition API with correct TypeScript typing and async data fetching patterns. The integration with the user store is well-structured.
web/src/partials/HeaderPartial.vue (6)
15-15: Good refactoring to use CSS classes instead of hardcoded styles.The change from hardcoded Tailwind classes to a semantic CSS class name improves maintainability and aligns with the colour scheme updates mentioned in the summary.
38-38: Colour scheme updates look consistent.The addition of teal variants for dark mode aligns with the broader theme changes across the application.
Also applies to: 42-42
15-15: Excellent CSS abstraction for maintainability.Moving from hardcoded Tailwind classes to a semantic CSS class name improves maintainability and allows for centralised colour scheme management.
38-38:✅ Verification successful
Verify CSS class specificity and dark mode behaviour.
The colour updates look good, transitioning from fuchsia to teal in dark mode. However, ensure that the CSS specificity is correct and that both light and dark mode states work as expected.
Also applies to: 42-42
🏁 Script executed:
#!/bin/bash # Description: Verify that the dark mode classes are properly defined and have correct specificity # Expected: CSS classes should exist and dark mode variants should override light mode # Search for the CSS definitions of these classes rg -A 2 -B 2 "fill-fuchsia-400|fill-teal-500|hover:fill-teal-300" --type css # Check if there are any CSS files that might define these Tailwind classes fd -e css -x grep -l "teal-500\|teal-300" {}Length of output: 393
No CSS specificity conflicts; Tailwind dark-mode utilities behave correctly.
- A search of
web/src/css/support/blog.cssshows only@apply fill-fuchsia-500and@apply dark:fill-teal-500for.blog-header-search-icon, with no overrides forfill-fuchsia-400,hover:fill-fuchsia-200ordark:hover:fill-teal-300.- Since these are standard Tailwind utility classes, the
dark:variants will correctly override the light-mode fills.- Hover states in both light and dark modes will apply as expected.
15-15: Good refactoring to CSS class.Moving from inline colour classes to a dedicated CSS class improves maintainability and aligns with the colour scheme consolidation mentioned in the summary.
38-43: Colour scheme updates look good.The transition from fuchsia to teal in dark mode is consistent with the broader theme changes across the application.
web/src/pages/AboutPage.vue (12)
18-19: Clean and professional page title.The simplified title is more direct and personal, which works well for an About page.
27-53: Well-written professional content with appropriate technology links.The rewritten About section is engaging and provides a good overview of technical expertise and leadership experience. The external links to technologies are relevant and add value.
58-61: Simplified contact section improves user experience.The streamlined approach to contact information is cleaner and more focused on the primary communication method.
72-72: Good modularisation with WidgetSocialPartial.Adding the dedicated social media component aligns with the consolidation effort mentioned in the summary and improves code organisation.
86-94: Clean import organisation after refactoring.The updated imports reflect the component changes and removal of unused social media functionality, which is now handled by WidgetSocialPartial.
103-107: Simplified onMounted logic is more focused.The removal of social media fetching logic is appropriate since that responsibility has been moved to WidgetSocialPartial component.
18-20: Excellent personalisation of the page title.The updated title is more engaging and personal, providing clear context about the author's identity and location whilst maintaining a welcoming tone.
86-94: Clean import organisation reflects architectural improvements.The updated imports properly reflect the removal of social media logic from this component and the addition of the new WidgetSocialPartial component. The import structure follows Vue 3 best practices.
103-107: Simplified lifecycle management improves maintainability.The streamlined onMounted hook focuses solely on user data fetching, which aligns with the single responsibility principle. The removal of social media data fetching reflects the proper separation of concerns.
72-72:✅ Verification successful
Verify WidgetSocialPartial component integration.
The addition of the WidgetSocialPartial component aligns with the modular approach mentioned in the summary. Ensure this component is properly implemented and handles the social media display effectively.
🏁 Script executed:
#!/bin/bash # Description: Verify that WidgetSocialPartial component exists and is properly implemented # Expected: Component should exist and follow Vue 3 patterns # Check if the component file exists and examine its structure fd "WidgetSocialPartial.vue" -x cat {} # Look for any other references to this component rg "WidgetSocialPartial" --type vue --type tsLength of output: 4461
I’ll verify that
WidgetSocialPartialis properly imported and used inAboutPage.vue.
🏁 Script executed:
#!/bin/bash # Locate AboutPage.vue and show import/usage of WidgetSocialPartial FILE=$(fd --max-depth 4 "^AboutPage.vue$") echo "Inspecting $FILE" rg -n -C3 "WidgetSocialPartial" "$FILE"Length of output: 831
WidgetSocialPartial integration verified.
- The component exists at
web/src/partials/WidgetSocialPartial.vueand uses Vue 3’s<script setup>pattern to fetch and render thesocialreactive data.- It’s correctly imported in
web/src/pages/AboutPage.vue(line 93) and rendered at line 72.- Social links display only when
socialis populated, matching design expectations.No further changes required.
86-94: Clean import management.The updated imports properly reflect the component usage and remove unnecessary dependencies, which improves bundle size and maintainability.
72-72: Good modularisation of social media functionality.Moving social media links to a dedicated WidgetSocialPartial component improves code organisation and reusability across the application.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
web/src/partials/WidgetSocialPartial.vue (1)
10-34: 🧹 Nitpick (assertive)Consider making social platforms configurable.
The social media platforms remain hardcoded in the template as noted in previous reviews. This limits flexibility for different social media configurations.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
web/src/css/support/blog.css(4 hunks)web/src/partials/WidgetSocialPartial.vue(1 hunks)
🔇 Additional comments (3)
web/src/css/support/blog.css (2)
4-4: Consistent colour scheme update implemented correctly.The systematic update from fuchsia to teal colours in dark mode is well-executed and maintains visual consistency across UI elements.
Also applies to: 13-13, 26-26, 31-31
51-59: New CSS classes properly support component updates.The
.blog-header-search-iconand.blog-widgets-social-linksclasses are well-structured and align with the updated colour scheme, supporting the refactored components effectively.web/src/partials/WidgetSocialPartial.vue (1)
38-51: Well-implemented Composition API usage.The component structure demonstrates excellent use of Vue 3 Composition API with proper type safety, reactive state management, and store integration. The
onBootpattern ensures social media data is loaded appropriately.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
web/src/partials/WidgetSocialPartial.vue (1)
15-45: 🧹 Nitpick (assertive)Consider external CSS dependency and component flexibility.
The component relies on external CSS classes (
blog-widgets-social-links,blog-widgets-social-svg) that aren't defined within this component, creating a dependency on external stylesheets.As noted in past reviews, the hardcoded approach limits flexibility. Consider the previous suggestion to make platforms configurable whilst ensuring CSS classes are properly scoped or defined.
web/src/pages/AboutPage.vue (1)
30-30:⚠️ Potential issueFix incorrect PHP documentation link.
The PHP link is still pointing to TypeScript documentation instead of the official PHP website.
Apply this diff to correct the link:
-<a class="blog-link" target="_blank" href="https://www.typescriptlang.org/">PHP</a>. I'm also comfortable with frameworks/libraries such as +<a class="blog-link" target="_blank" href="https://www.php.net/">PHP</a>. I'm also comfortable with frameworks/libraries such as
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (11)
web/src/css/support/blog.css(4 hunks)web/src/pages/AboutPage.vue(4 hunks)web/src/pages/HomePage.vue(1 hunks)web/src/pages/ResumePage.vue(2 hunks)web/src/partials/AvatarPartial.vue(2 hunks)web/src/partials/HeroPartial.vue(1 hunks)web/src/partials/WidgetSocialPartial.vue(1 hunks)web/src/stores/users/response.ts(8 hunks)web/src/stores/users/user.ts(3 hunks)web/src/stores/users/userType.ts(2 hunks)web/tsconfig.json(1 hunks)
🔇 Additional comments (22)
web/src/pages/ResumePage.vue (2)
59-60: Good formatting consistency with single quotes.The change to single quotes aligns with common Vue.js and TypeScript conventions and improves consistency across the codebase.
69-70: Improved code formatting for better readability.Moving the closing brace and parenthesis to single lines reduces vertical space whilst maintaining readability.
web/tsconfig.json (2)
29-29: Improved formatting consistency.Converting the
libarray to single-line format improves consistency with other configuration arrays and reduces file length whilst maintaining readability.
31-31: Consistent array formatting.The
includearray formatting matches the style used for other arrays in the configuration, creating a more uniform appearance.web/src/stores/users/userType.ts (2)
25-30: Consistent indentation formatting.The change from spaces to tabs for the
Userinterface properties aligns with the project's indentation standards and improves consistency.
8-8:✅ Verification successful
Type alias conversion improves compile-time efficiency.
Converting
SocialMediaMapfrom a runtime constant to a type alias is appropriate since it's used purely for type checking. This eliminates runtime overhead whilst maintaining type safety.Verify that all usages of
SocialMediaMapare compatible with the type alias change:
🏁 Script executed:
#!/bin/bash # Description: Check for runtime usage of SocialMediaMap that might break with type alias conversion # Expected: Only type annotations, no runtime references rg -A 3 -B 3 "SocialMediaMap" --type ts --type vueLength of output: 78
🏁 Script executed:
#!/bin/bash # Description: Search for all occurrences of SocialMediaMap in .ts and .vue files # This uses glob patterns instead of --type to include .vue files rg -n "SocialMediaMap" -g "*.ts" -g "*.vue"Length of output: 731
SocialMediaMap usage verified: purely type‐level across the codebase
All occurrences ofSocialMediaMapare imported withimport typeand used only in type annotations—no runtime references found. Conversion to a type alias is safe.web/src/css/support/blog.css (6)
4-4: Consistent dark mode colour scheme update.The change from fuchsia to teal variants in dark mode creates a more cohesive colour palette. The teal-500/teal-600 combination provides good contrast and accessibility.
13-13: Colour consistency maintained.Updating the highlight colour from
dark:text-fuchsia-700todark:text-teal-600maintains consistency with the broader dark mode colour scheme changes.
26-26: Navigation colour scheme alignment.The dark mode hover states now use teal variants, creating consistent interactive feedback across the navigation components.
31-31: Active state colour consistency.The active navigation state colours align with the new teal-based colour scheme whilst maintaining clear visual hierarchy.
52-55: New header search icon styling.The new
.blog-header-search-iconclass provides dedicated styling for search icons with appropriate colour transitions between light and dark modes.
58-66: Well-structured social widget styling.The new social widget classes provide comprehensive styling with proper hover states and group interactions. The colour scheme aligns with the overall teal-based dark mode theme.
web/src/partials/HeroPartial.vue (1)
5-5: LGTM! Good formatting improvement.The addition of a space before the closing slash in the self-closing tag follows Vue.js style guide recommendations and improves code consistency.
web/src/partials/AvatarPartial.vue (1)
24-24: Verify the colour scheme consistency.The ring colour changes show an inconsistency: light mode changes to
ring-fuchsia-200whilst dark mode changes todark:ring-teal-500. If the objective is to transition from fuchsia to teal across the UI, having different accent colours for light and dark modes may create inconsistency.Please confirm this mixed colour scheme is intentional, or consider aligning both modes to use the same accent colour family.
web/src/pages/HomePage.vue (1)
59-61: Essential syntax fixes applied correctly.The addition of the missing semicolon and correction of the closing syntax are critical fixes that prevent potential JavaScript parsing errors and syntax exceptions.
web/src/stores/users/response.ts (2)
4-9: Approve indentation standardisation.The change from spaces to tabs for indentation improves consistency. Please ensure the project's linting configuration enforces this standard consistently across all files.
51-52: Excellent readability improvement for long text content.Converting single-line strings to multi-line format significantly improves readability for these lengthy summary descriptions whilst maintaining the same functionality.
Also applies to: 65-66, 79-80, 93-94, 107-108, 121-122, 135-136
web/src/stores/users/user.ts (1)
16-70: Excellent formatting consistency improvements.The stylistic changes enhance code readability and maintain consistency throughout the file. The transition to single quotes, proper indentation with tabs, and consistent semicolon usage aligns well with modern TypeScript/JavaScript standards.
web/src/pages/AboutPage.vue (4)
25-48: Well-crafted professional narrative with excellent flow.The rewritten content effectively showcases technical expertise and leadership experience. The narrative flows naturally and provides concrete details about technologies, frameworks, and leadership philosophy.
81-83: Clean import organisation with proper type separation.Good practice separating Vue imports, type imports, and store imports. The cleanup removes unused social media imports whilst maintaining necessary functionality.
99-102: Simplified data fetching logic.The streamlined
onMountedlogic correctly focuses on user profile data only, removing unnecessary social media complexity that's now handled by the dedicated widget component.
67-67:✅ Verification successful
Verify WidgetSocialPartial component integration.
Ensure the WidgetSocialPartial component can be successfully imported and rendered. If the component is missing a proper export (as noted in the component review), this integration will fail.
🏁 Script executed:
#!/bin/bash # Description: Verify WidgetSocialPartial component integration works # Expected: No import or rendering errors # Check if the component file exists and has proper structure fd "WidgetSocialPartial.vue" --exec cat {} # Look for any Vue compilation errors mentioning this component rg -i "error.*WidgetSocialPartial|failed.*import.*WidgetSocialPartial"Length of output: 3994
WidgetSocialPartial integration verified.
The
WidgetSocialPartial.vuefile exists, exports correctly, and no import or rendering errors were detected when used inAboutPage.vue.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
web/src/pages/AboutPage.vue (2)
53-56: Verify email accessibility and add ARIA labels.The email contact section is clean, but accessibility can be improved and email validation should be ensured as mentioned in previous reviews.
67-67: Verify WidgetSocialPartial component availability.Based on past review comments, the WidgetSocialPartial component may be missing a default export, which would cause the import to fail.
Also applies to: 88-88
web/src/partials/HeaderPartial.vue (2)
57-57:⚠️ Potential issueFix type mismatch and localStorage initialisation.
The darkMode ref still has the same type safety issue identified in previous reviews. The ref should be typed as boolean and properly parse the localStorage string value.
Apply this diff to fix the type handling:
-const darkMode = ref<string | null>(localStorage.getItem('dark-mode')); +const darkMode = ref<boolean>(localStorage.getItem('dark-mode') === 'true');
59-69: 🛠️ Refactor suggestionAdd initialisation logic and improve localStorage error handling.
The watch logic is correct, but the component still lacks initialisation of the dark class on mount. Additionally, consider adding error handling for localStorage operations.
Apply this diff to add proper initialisation and error handling:
watch(darkMode, () => { const el: HTMLElement = document.documentElement; if (darkMode.value) { - localStorage.setItem('dark-mode', 'true'); + try { + localStorage.setItem('dark-mode', 'true'); + } catch (error) { + console.warn('Failed to save dark mode preference:', error); + } el.classList.add('dark'); } else { - localStorage.setItem('dark-mode', 'false'); + try { + localStorage.setItem('dark-mode', 'false'); + } catch (error) { + console.warn('Failed to save dark mode preference:', error); + } el.classList.remove('dark'); } }); + +// Initialize dark mode on component mount +if (darkMode.value) { + document.documentElement.classList.add('dark'); +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
web/src/pages/AboutPage.vue(4 hunks)web/src/partials/HeaderPartial.vue(3 hunks)
🔇 Additional comments (4)
web/src/pages/AboutPage.vue (2)
18-18: Well-crafted page title with personal touch.The simplified page title effectively combines personal branding with location context, creating a welcoming and professional impression.
25-48: Excellent professional narrative with comprehensive technical coverage.The rewritten content effectively showcases technical expertise, leadership experience, and professional philosophy. The narrative flows naturally and provides concrete details about technologies and frameworks while maintaining a personal tone.
web/src/partials/HeaderPartial.vue (2)
15-15: Good refactoring to use CSS class for search icon.Moving from inline Tailwind classes to a dedicated CSS class improves maintainability and theme consistency.
38-38: Consistent colour scheme update to teal.The colour changes from fuchsia to teal maintain visual consistency with the broader theme updates across the project.
Also applies to: 42-42
gocanto
force-pushed
the
featire/colours-about
branch
from
9d8fb89 to
1137059
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
Makefile(1 hunks)config/makefile/db.mk(1 hunks)
🔇 Additional comments (3)
config/makefile/db.mk (1)
79-79: Section marker enhances clarity: The added# --- Migrationscomment neatly delineates the migration targets, improving navigability without altering behaviour.Makefile (2)
59-64: Consistent indentation improves readability: The expanded spacing in Build Commands descriptions aligns the formatting for a cleaner, more uniform help output. No functional impact.
67-81: Aligned Database Commands formatting: The adjusted indentation in Database Commands descriptions ensures consistent alignment under the help section, enhancing readability.
gocanto
force-pushed
the
featire/colours-about
branch
from
7b69d9b to
e9fec6e
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
config/makefile/env.mk(1 hunks)database/schema.go(1 hunks)database/seeder/main.go(1 hunks)pkg/cli/colour.go(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
database/seeder/main.go (5)
env/env.go (1)
Environment(3-9)boost/spark.go (1)
Spark(9-19)boost/boost.go (2)
MakeDbConnection(39-47)MakeLogs(49-57)database/seeder/seeds/seeder.go (1)
MakeSeeder(17-22)pkg/cli/colour.go (8)
MakeTextColour(27-37)Green(11-11)Yellow(12-12)Magenta(14-14)Blue(13-13)Cyan(15-15)Gray(16-16)Red(10-10)
🔇 Additional comments (5)
database/schema.go (1)
13-13: LGTM! Newsletter table addition is consistent.The addition of "newsletters" to the schema tables follows the existing naming convention and aligns with the Newsletter struct definition in the same file.
pkg/cli/colour.go (2)
39-45: Excellent refactoring! Print method now handles output directly.The change from returning a string to printing directly with proper error handling improves the API design and centralises output responsibility.
55-57: Good addition of String() method for centralised formatting.The new String() method follows Go conventions and centralises the formatting logic, making the code more maintainable.
database/seeder/main.go (1)
39-41: Consistent change from Println() to Print() aligns with colour.go refactoring.The systematic replacement of
Println()withPrint()calls is consistent with the refactoring inpkg/cli/colour.gowhere theString()method now includes the newline formatting.Also applies to: 53-55, 60-62, 75-77, 82-84, 89-91, 96-98, 103-105, 110-114, 118-118
config/makefile/env.mk (1)
37-38: Approved: ROOT_NETWORK display and separator
IncludingROOT_NETWORKand a visual divider makes the output clearer and easier to scan.
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
web/src/images/profile/about.jpgis excluded by!**/*.jpgweb/src/images/profile/about.pngis excluded by!**/*.png
📒 Files selected for processing (2)
web/src/css/support/blog.css(3 hunks)web/src/pages/AboutPage.vue(4 hunks)
🔇 Additional comments (11)
web/src/css/support/blog.css (9)
4-4: Consistent dark-mode colour update
The newdark:text-teal-500 dark:hover:text-teal-600classes correctly replace the fuchsia accents in dark mode, aligning with the theme shift.
8-8: Added margin and custom font for blog headings
Applyingfont-aspekta mb-5to.blog-h1improves visual hierarchy as intended.
13-13: Retained light-mode highlight and updated dark-mode accent
Thetext-fuchsia-500for emphasised words remains for light mode, anddark:text-teal-600follows the new palette.
25-26: Side-nav resting state theme update
Dark-mode resting and hover states now use teal to match the revised design.
30-31: Side-nav active state theme update
Dark-modetext-teal-600andafter:bg-teal-600ensure consistency in the active link styling.
44-44: Widget button dark-mode background updated
Replacingdark:bg-teal-600 dark:hover:bg-teal-700keeps the widget button in line with the teal colour scheme.
52-55: Header search icon colour adjustment
The switch fromfill-fuchsia-500todark:fill-teal-500is correct for the dark theme.
58-61: New social links styling conforms to theme
The.blog-widgets-social-linksclasses use teal for dark-mode hover states, matching other updates.
63-66: Social icon SVG group-hover accents updated
Updatinggroup-hover:fill-teal-500ensures the SVG icons align with the new palette in dark mode.web/src/pages/AboutPage.vue (2)
18-18: Dynamic page title with fallback is correct
UsingI'm {{ user ? user.nickname : 'Gus' }}ensures a sensible default ifuseris not yet loaded.
67-67:✅ Verification successful
Verify
WidgetSocialPartialcomponent import
Ensureweb/src/partials/WidgetSocialPartial.vueexists and declares a default export matching the import here.To confirm, run:
🏁 Script executed:
#!/bin/bash # Check for default export in WidgetSocialPartial.vue ast-grep --pattern $'export default $_ { $$$ }' -A5 web/src/partials/WidgetSocialPartial.vueLength of output: 93
🏁 Script executed:
#!/bin/bash # Search for default export or defineComponent usage in WidgetSocialPartial.vue rg "export default" -n web/src/partials/WidgetSocialPartial.vue rg "defineComponent" -n web/src/partials/WidgetSocialPartial.vueLength of output: 130
🏁 Script executed:
#!/bin/bash # Locate the WidgetSocialPartial.vue file and inspect its exports # 1. Find the file in the repo fd --hidden --ignore-case 'WidgetSocialPartial.vue' # 2. If found, search for exports inside it FILE_PATH=$(fd --ignore-case 'WidgetSocialPartial.vue' | head -n1) if [ -n "$FILE_PATH" ]; then echo "Inspecting $FILE_PATH for default export or defineComponent usage:" sed -n '1,50p' "$FILE_PATH" rg -n "export default" -n "$FILE_PATH" rg -n "defineComponent" -n "$FILE_PATH" else echo "WidgetSocialPartial.vue not found in repository." fiLength of output: 4181
WidgetSocialPartial import is valid
The fileweb/src/partials/WidgetSocialPartial.vueexists and uses<script setup>(Vue 3 SFC), which implicitly provides a default export. No further changes are required.
No description provided.