chore: import Outrank articles

[riderx]

Imported 1 article(s) from Outrank.

Summary by CodeRabbit

Release Notes

• Documentation
  • Added comprehensive guide covering Ionic Action Sheet implementation, including framework-specific examples for Angular, React, and Vue.
  • New content includes theming customization, platform modes, accessibility considerations, and troubleshooting tips.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new comprehensive blog post on Ionic Action Sheet is added, covering the controller API, step-by-step usage patterns across Angular, React, and Vue, CSS/shadow DOM customization strategies, platform-specific considerations, accessibility guidance, and troubleshooting for common timing and safe-area issues.

Changes

Ionic Action Sheet Complete Guide

Layer / File(s)	Summary
Front matter, introduction, and API concepts apps/web/src/content/blog/en/ionic-action-sheet.md	Blog metadata (slug, title, author, publication settings) and introduction establish the action sheet purpose. Controller API section explains the dismissal lifecycle with step-by-step walkthrough and Angular implementation example.
Framework implementation examples apps/web/src/content/blog/en/ionic-action-sheet.md	React and Vue implementation sections demonstrate button configuration, state management, and handling dismissal/role results using the controller API introduced above.
CSS customization and theming apps/web/src/content/blog/en/ionic-action-sheet.md	Styling guidance covers scoping via cssClass, CSS custom properties for theming, shadow part targeting, and best practices to avoid over-customization risks.
Advanced topics, platform considerations, and troubleshooting apps/web/src/content/blog/en/ionic-action-sheet.md	Compares web component vs native Capacitor plugin approaches, includes platform mode and accessibility checklist. Troubleshooting section covers timing bugs, safe-area overlap, provides CSS fixes, and references live update strategies via Capgo.

🎯 1 (Trivial) | ⏱️ ~3 minutes

🐰 A guide springs forth, so clear and bright,
Action sheets dancing left and right!
From Angular tales to Vue's fine view,
Styling and fixes, all tried and true—
Safe areas conquered, live updates gleam,
Ionic harmony, a developer's dream! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'chore: import Outrank articles' accurately describes the main change: importing articles from Outrank, which aligns with the PR description and the addition of the Ionic Action Sheet blog post.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/outrank-25983937421-1

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/src/content/blog/en/ionic-action-sheet.md (1)

296-345: ⚡ Quick win

Use vue code fence for the Vue SFC example.

This block contains <template> + <script setup> and should be fenced as vue, not ts, so highlighting and copy/paste behavior match expectations.

Proposed fix

-```ts
+```vue
 <template>
   <ion-button expand="block" `@click`="openPhotoActions">
     Profile Photo Options
@@
 </script>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @apps/web/src/content/blog/en/ionic-action-sheet.md around lines 296 - 345,
The code block showing the Vue SFC (template + <script setup>) is incorrectly
fenced as "ts"; change the fence to "vue" so syntax highlighting and copy/paste
work correctly. Locate the block containing the and the
openPhotoActions function (actionSheetController usage) and replace the opening
ts with vue (keep the content unchanged) so the example is a proper Vue
SFC.

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>🤖 Prompt for all review comments with AI agents</summary>

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @apps/web/src/content/blog/en/ionic-action-sheet.md:

• Line 78: The heading "### Why the API is controller driven" should use a
  hyphenated compound adjective; update that exact heading text to "### Why the
  API is controller-driven" in the markdown (look for the string "### Why the API
  is controller driven") so the grammar and consistency are corrected.

---

Nitpick comments:
In @apps/web/src/content/blog/en/ionic-action-sheet.md:

• Around line 296-345: The code block showing the Vue SFC (template + <script setup>) is incorrectly fenced as "ts"; change the fence to "vue" so syntax
  highlighting and copy/paste work correctly. Locate the block containing the
  and the openPhotoActions function (actionSheetController usage) and
  replace the opening ts with vue (keep the content unchanged) so the
  example is a proper Vue SFC.

  
  </details>
  
  <details>
  <summary>🪄 Autofix (Beta)</summary>
  
  Fix all unresolved CodeRabbit comments on this PR:
  
  - [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended)
  - [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes
  
  </details>
  
  ---
  
  <details>
  <summary>ℹ️ Review info</summary>
  
  <details>
  <summary>⚙️ Run configuration</summary>
  
  **Configuration used**: defaults
  
  **Review profile**: CHILL
  
  **Plan**: Pro
  
  **Run ID**: `7be2c8f2-a333-4ee6-b479-e8ed2ba79d41`
  
  </details>
  
  <details>
  <summary>📥 Commits</summary>
  
  Reviewing files that changed from the base of the PR and between 7f33a47a9e0812aa4d69e83bb884ec89f0ddacab and a5afd5789fcef647db90f357ce0e976ff47b046c.
  
  </details>
  
  <details>
  <summary>📒 Files selected for processing (1)</summary>
  
  * `apps/web/src/content/blog/en/ionic-action-sheet.md`
  
  </details>
  
  </details>
  
  <!-- This is an auto-generated comment by CodeRabbit for review status -->
  

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use hyphenated compound adjective in heading.

“controller driven” should be “controller-driven” in this heading for correct grammar and consistency.

🧰 Tools

🪛 LanguageTool

[grammar] ~78-~78: Use a hyphen to join words.
Context: ...iven"> ### Why the API is controller driven In day-to-day Ionic work, the co...

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/content/blog/en/ionic-action-sheet.md` at line 78, The heading
"### Why the API is controller driven" should use a hyphenated compound
adjective; update that exact heading text to "### Why the API is
controller-driven" in the markdown (look for the string "### Why the API is
controller driven") so the grammar and consistency are corrected.