feat/vue standard protocol antfu#2
Merged
suradet-ps merged 4 commits intomainfrom Dec 8, 2025
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideAdds a new blog article about setting up ESLint + Husky + lint-staged + GitHub Actions for Vue, and introduces a reusable YouTube embed Astro component wired into the MDX/MD content pipeline. Sequence diagram for rendering MDX blog with YouTube embedsequenceDiagram
actor User
participant Browser
participant AstroServer
participant MDXCompiler
participant YouTube_astro as YouTubeComponent
User->>Browser: Request vue_standard_protocol_antfu article
Browser->>AstroServer: HTTP GET /blog/vue-standard-protocol-antfu
AstroServer->>MDXCompiler: Render MDX file vue-standard-protocol-antfu_mdx
MDXCompiler->>YouTube_astro: Instantiate with id and title props
YouTube_astro-->>MDXCompiler: HTML iframe markup
MDXCompiler-->>AstroServer: Rendered HTML for article
AstroServer-->>Browser: Send full HTML response
Browser->>Browser: Layout blog content and embedded iframe
Browser-->>User: Display article with YouTube video
Class diagram for the new YouTube Astro content componentclassDiagram
class YouTube_astro {
+string id
+string title
+render(props)
}
class MDX_Blog_Article {
+render()
}
MDX_Blog_Article --> YouTube_astro : uses
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Consider adding a
referrerpolicy="strict-origin-when-cross-origin"(or similar) on the YouTube iframe to improve privacy and align with modern embed best practices. - The YouTube component defaults
titleto a generic value; for better accessibility, it may be worth makingtitlerequired at call sites (or at least documenting/enforcing more descriptive titles for embedded videos.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider adding a `referrerpolicy="strict-origin-when-cross-origin"` (or similar) on the YouTube iframe to improve privacy and align with modern embed best practices.
- The YouTube component defaults `title` to a generic value; for better accessibility, it may be worth making `title` required at call sites (or at least documenting/enforcing more descriptive titles for embedded videos.
## Individual Comments
### Comment 1
<location> `src/components/content/YouTube.astro:11-17` </location>
<code_context>
+---
+
+<div class="video-container">
+ <iframe
+ src={`https://www.youtube.com/embed/${id}`}
+ title={title}
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen
+ loading="lazy"
+ ></iframe>
+</div>
</code_context>
<issue_to_address>
**🚨 suggestion (security):** Tighten iframe attributes for privacy/security and slightly better UX.
Since this embed will be reused, consider hardening the defaults: add a `referrerpolicy` (e.g. `strict-origin-when-cross-origin`) to reduce referrer leakage, remove `autoplay` from `allow` unless you explicitly need programmatic autoplay, and optionally append `?rel=0` to the `src` to avoid unrelated recommendations at the end of playback.
```suggestion
<iframe
src={`https://www.youtube.com/embed/${id}?rel=0`}
title={title}
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
loading="lazy"
></iframe>
```
</issue_to_address>
### Comment 2
<location> `src/content/blog/vue-standard-protocol-antfu.mdx:129-133` </location>
<code_context>
+ "prepare": "husky"
+ },
+ "lint-staged": {
+ "*.{js,ts,vue,md,json}": [
+ "eslint --fix"
+ ]
</code_context>
<issue_to_address>
**suggestion:** `lint-staged` pattern omits some likely-relevant file types such as config files.
The current glob only matches `js,ts,vue,md,json`, so files like `eslint.config.mjs`, other `*.mjs`/`*.cjs` configs, and `*.tsx`/`*.jsx` won’t be linted on commit. Consider broadening it (e.g. `*.{js,ts,jsx,tsx,vue,md,json,mjs,cjs}`) so all relevant source/config files are covered.
```suggestion
"lint-staged": {
"*.{js,ts,jsx,tsx,vue,md,json,mjs,cjs}": [
"eslint --fix"
]
}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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.
add new article
Summary by Sourcery
Add a new blog article detailing a Vue.js ESLint/Antfu standard setup and introduce a reusable YouTube embed content component for use within posts.
New Features: