Fix Vue 3 deprecation warnings for deep selectors and smoothScroll injection

[guyromellemagayano]

This pull request fixes Vue 3 deprecation warnings and prevents SSR-related warnings by updating deprecated CSS selectors and adding proper default values for dependency injection.

Key changes:

• Replace deprecated >>> and /deep/ combinators with :deep() pseudo-class in MainLayout.vue and IndexPage.vue
• Add default value (null) to smoothScroll inject in MainLayout.vue, TeamPage.vue, IndexPage.vue, and ProjectsPage.vue to prevent warnings during SSR

This ensures the development server runs without deprecation warnings and eliminates console warnings related to missing injections during server-side rendering.

Summary by CodeRabbit

• Refactor

  • Updated component dependency injection patterns to use modern default value handling
  • Migrated scoped CSS syntax to current Vue standards for improved style encapsulation

• Bug Fixes

  • Added safety checks to prevent potential errors when optional dependencies are unavailable

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[ossph]

@CodeRabbit review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Walkthrough

Dependency injection patterns for smoothScroll are updated to provide explicit null defaults across four components, and guards are added where the injection is used. Additionally, deprecated deep CSS selectors (>>>) are modernized to Vue's :deep() syntax.

Changes

Cohort / File(s)	Change Summary
CSS Selector Modernization & Inject Defaults src/layouts/MainLayout.vue, src/pages/IndexPage.vue	Updated inject('smoothScroll') to inject('smoothScroll', null) to provide explicit null default. Migrated scoped CSS from deprecated deep combinator (>>>) to Vue 3's :deep() syntax for targeting nested elements (.btn-soc-med and .btn-contribute classes).
Inject Defaults with Null Guards src/pages/ProjectsPage.vue, src/pages/TeamPage.vue	Updated inject('smoothScroll') to inject('smoothScroll', null) to provide explicit null default. Added runtime null-checks before invoking smoothScroll within onGoToPanel to prevent errors when injection is absent.

Sequence Diagram

sequenceDiagram
    participant Setup as Setup Phase
    participant Provider as Injection Provider
    participant Component as Component
    
    rect rgb(220, 240, 255)
    Note over Setup,Component: Before: Assume smoothScroll exists
    Setup->>Provider: inject('smoothScroll')
    alt Provided
        Provider-->>Component: smoothScroll function
    else Not Provided
        Provider-->>Component: undefined (runtime error risk)
    end
    end
    
    rect rgb(240, 255, 240)
    Note over Setup,Component: After: Explicit null default + Guard
    Setup->>Provider: inject('smoothScroll', null)
    Provider-->>Component: smoothScroll function or null
    Component->>Component: if (smoothScroll) { ... }
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• The changes follow a consistent, repetitive pattern across files (four identical inject() updates)
• CSS syntax migration is straightforward and mechanical
• Null-check guards are simple conditional patterns with low logic complexity
• No algorithmic changes or complex behavioral shifts
• Primary review focus: Verify guards are in place where smoothScroll is invoked (ProjectsPage and TeamPage) and confirm no other smoothScroll calls exist without checks

Poem

🐰 With injection now holding null's gentle hand,
Our component contracts are finally grand,
Deep selectors fade to :deep() so bright,
Guards protect the flow—no crashes tonight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: fixing Vue 3 deprecation warnings for deep selectors and smoothScroll injection across multiple components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

src/pages/IndexPage.vue (1)

243-255: Add null-check guard to prevent runtime error.

The smoothScroll injection now defaults to null, but this function calls it without checking. This will cause a runtime error during SSR or when the plugin isn't provided.

Apply this diff to add the guard (consistent with ProjectsPage.vue and TeamPage.vue):

 function onGoToPanel (card) {
   const panelId = card.panelId;
   if (card.panelId) {
-    smoothScroll({
-      scrollTo: document.getElementById(panelId),
-      updateHistory: false,
-    });
+    if (smoothScroll) {
+      smoothScroll({
+        scrollTo: document.getElementById(panelId),
+        updateHistory: false,
+      });
+    }
   }

   if (card.link) {
     window.open(card.link, '_blank').focus();
   }
 }

src/layouts/MainLayout.vue (2)

180-185: Add null-check guard to prevent runtime error.

The smoothScroll injection now defaults to null, but this function calls it without checking. This will cause a runtime error during SSR or when the plugin isn't provided.

Apply this diff to add the guard:

 function onScrollToTop () {
-  smoothScroll({
-    scrollTo: document.getElementById('top'),
-    updateHistory: false,
-  });
+  if (smoothScroll) {
+    smoothScroll({
+      scrollTo: document.getElementById('top'),
+      updateHistory: false,
+    });
+  }
 }

---

187-198: Add null-check guard to prevent runtime error.

The smoothScroll injection now defaults to null, but this function calls it without checking (lines 191-194). This will cause a runtime error during SSR or when the plugin isn't provided.

Apply this diff to add the guard:

 function onGoToPanel (card) {
   const panelId = card.panelId;
   drawerLeft.value = false;
   if (card.panelId) {
-    smoothScroll({
-      scrollTo: document.getElementById(panelId),
-      updateHistory: false,
-    });
+    if (smoothScroll) {
+      smoothScroll({
+        scrollTo: document.getElementById(panelId),
+        updateHistory: false,
+      });
+    }
   }
   if (card.route) router.push(card.route);
   if (card.link) window.open(card.link, '_blank').focus();
 }

🧹 Nitpick comments (2)

src/pages/ProjectsPage.vue (1)

56-70: LGTM! Proper null-check guard added.

The guard correctly prevents calling smoothScroll when it's null during SSR.

Note: The onGoToPanel function doesn't appear to be invoked anywhere in the template. If it's genuinely unused, consider removing it to reduce code complexity.

src/pages/TeamPage.vue (1)

153-167: LGTM! Proper null-check guard added.

The guard correctly prevents calling smoothScroll when it's null during SSR.

Note: The onGoToPanel function doesn't appear to be invoked anywhere in the template. If it's genuinely unused, consider removing it to reduce code complexity.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dca89fd and 0f60bce.

📒 Files selected for processing (4)

• src/layouts/MainLayout.vue (2 hunks)
• src/pages/IndexPage.vue (2 hunks)
• src/pages/ProjectsPage.vue (1 hunks)
• src/pages/TeamPage.vue (2 hunks)

🔇 Additional comments (6)

src/pages/ProjectsPage.vue (1)

52-52: LGTM! Proper default value for injection.

The explicit null default prevents SSR warnings when the smoothScroll provider is absent.

src/pages/TeamPage.vue (1)

122-122: LGTM! Proper default value for injection.

The explicit null default prevents SSR warnings when the smoothScroll provider is absent.

src/pages/IndexPage.vue (2)

239-239: LGTM! Proper default value for injection.

The explicit null default prevents SSR warnings when the smoothScroll provider is absent.

---

290-296: LGTM! Deprecated deep selector modernized.

The change from >>> to :deep() correctly addresses Vue 3 deprecation warnings.

src/layouts/MainLayout.vue (2)

126-126: LGTM! Proper default value for injection.

The explicit null default prevents SSR warnings when the smoothScroll provider is absent.

---

225-231: LGTM! Deprecated deep selector modernized.

The change from >>> to :deep() correctly addresses Vue 3 deprecation warnings.