feat: Add Cursor mastery blog post and update post rules

.cursor/commands/notion-post.md

@@ -0,0 +1,72 @@
+---
+description: Create a blog post from a Notion page using the Notion MCP server
+---
+
+# /notion-post Command
+
+Create a blog post from a Notion page. This command will:
+
+1. Verify the Notion MCP server connection is working
+2. Fetch the specified Notion page content
+3. Convert the Notion page to a properly formatted MDX blog post
+4. Save it to `content/posts/` with appropriate frontmatter
+
+## Usage
+
+```
+/notion-post <notion-page-url-or-id>
+```
+
+## Parameters
+
+- `notion-page-url-or-id`: The Notion page URL (e.g., `https://www.notion.so/2e52883bd89380f491f3fe3a2e187ee7`) or page
+  ID (e.g., `2e52883b-d893-80f4-91f3-fe3a2e187ee7`)
+
+## Workflow
+
+1. **Verify Notion MCP Connection**
+   - Use `notion-get-self` to check if the Notion MCP server is connected and working
+   - If connection fails, inform the user and stop
+
+2. **Fetch Notion Page**
+   - Use `notion-fetch` with the provided page URL or ID
+   - Extract the page title, content, and metadata
+
+3. **Convert to MDX Post**
+   - Generate a kebab-case filename from the page title
+   - Create frontmatter with:
+     - `title`: From Notion page title (remove emojis if present)
+     - `topics`: Infer from content or use "AI" as default
+     - `date`: Current date (YYYY-MM-DD)
+     - `excerpt`: First paragraph or a summary of the content
+     - `cover`:
+       - `banner`: Search for a relevant image URL or use placeholder
+       - `topic`: Primary topic
+       - `title`: Main title
+       - `subtitle`: Catchy subtitle
+   - Convert Notion markdown to MDX format:
+     - Preserve code blocks
+     - Convert callouts to blockquotes
+     - Handle images appropriately
+
+4. **Save Post**
+   - Save to `content/posts/{kebab-case-title}.mdx`
+   - Follow the structure defined in `.cursor/rules/post.mdc`
+
+## Example
+
+```
+/notion-post https://www.notion.so/2e52883bd89380f491f3fe3a2e187ee7
+```
+
+This will:
+
+- Check Notion MCP connection
+- Fetch the "Mastering Cursor: From Chatbot to Pair Programmer" page
+- Create `content/posts/mastering-cursor-from-chatbot-to-pair-programmer.mdx`
+
+## Error Handling
+
+- If Notion MCP server is not connected, show a clear error message
+- If the page is not found, inform the user
+- If there's an error converting content, show the error and partial results if available

.cursor/commands/pr.md

@@ -0,0 +1,129 @@
+---
+description: Analyze code changes and create a pull request with AI-powered code review
+---
+
+# /pr Command
+
+Analyze code changes using MCP server and create a pull request with a well-formatted title and description. The AI will
+automatically:
+
+- Analyze your code changes
+- Generate PR title and description
+- Create or update the PR on GitHub using MCP server
+- **Perform AI code review** - analyze the PR code changes against all tech standards
+- **Submit review comments** - leave detailed review comments on GitHub with line-specific feedback
+- Provide you with the PR URL
+
+## Usage
+
+```
+/pr
+```
+
+Or with optional base branch:
+
+```
+/pr <base-branch>
+```
+
+## Parameters
+
+- `base-branch` (optional): The base branch to compare against (defaults to `main`)
+
+## Workflow
+
+1. **Analyze Code Changes**
+   - Check current git status and branch
+   - Get diff between current branch and base branch
+   - Identify changed files, additions, deletions
+   - Analyze commit history
+
+2. **Generate PR Metadata**
+   - Create a descriptive PR title following conventional commits format
+   - Generate comprehensive PR description including:
+     - Summary of changes
+     - Files changed
+     - Breaking changes (if any)
+     - Testing instructions
+     - Code review notes
+
+3. **Create or Update PR**
+   - Check if PR already exists for the current branch
+   - If exists, update it with new description
+   - If not, create new PR using GitHub MCP `create_pull_request`
+   - Set base branch (default: `main`) and head branch (current branch)
+
+4. **Perform AI Code Review**
+   - Analyze each changed file for:
+     - Code quality and best practices
+     - Adherence to project standards and rules
+     - Potential bugs or issues
+     - Performance considerations
+     - Security concerns
+     - Consistency with codebase patterns
+   - Check for:
+     - Linter errors
+     - Type safety issues
+     - Missing error handling
+     - Console.logs or debug code
+     - Memory leaks
+     - Adherence to project-specific rules
+
+5. **Submit Review Comments**
+   - Create a pending review using `pull_request_review_write` with method `create`
+   - Add line-specific review comments using `add_comment_to_pending_review`:
+     - Positive feedback for good practices
+     - Suggestions for improvements
+     - Warnings for potential issues
+     - Questions for clarification
+   - Submit the review using `pull_request_review_write` with method `submit_pending`
+   - Use `COMMENT` event (can't approve own PR)
+
+6. **Provide Results**
+   - Return PR URL
+   - Summarize review findings
+   - List any issues found
+
+## Example
+
+```
+/pr
+```
+
+This will:
+
+- Analyze changes in current branch vs `main`
+- Create PR with title like "feat: Add Cursor mastery blog post and update post rules"
+- Generate comprehensive description
+- Perform code review on all changed files
+- Add review comments on GitHub
+- Return PR URL: `https://github.com/wghglory/my-website/pull/82`
+
+## Code Review Standards
+
+The AI will review against:
+
+- **Project Rules**: Check `.cursor/rules/` for project-specific standards
+- **Code Quality**: Best practices, patterns, consistency
+- **Type Safety**: TypeScript/type checking issues
+- **Performance**: Potential performance issues
+- **Security**: Security vulnerabilities
+- **Testing**: Missing tests or test coverage
+- **Documentation**: Missing or unclear documentation
+- **Linting**: Linter errors and warnings
+
+## Error Handling
+
+- If no changes detected, inform the user
+- If branch doesn't exist on remote, provide instructions to push
+- If GitHub MCP server is not connected, show clear error message
+- If PR creation fails, show error details
+- If review submission fails, show partial results if available
+
+## Notes
+
+- The command works best when changes are already committed and pushed
+- For uncommitted changes, the command will analyze staged/unstaged changes
+- Review comments are submitted as `COMMENT` event (not approval) since you can't approve your own PR
+- The PR description follows a standard template with sections for Summary, Changes, Breaking Changes, Testing
+  Instructions, and Code Review Notes

.cursor/rules/post.mdc

@@ -53,15 +53,12 @@ Cover Metadata:
 - cover.title: usually matches the main title.
 - cover.subtitle: A short, catchy sub-header relevant to the post.
 
-Table Generation using below syntax instead of markdown table:
+Table Generation: Use standard markdown table syntax:
 
 ```
-<Table
-  columns={['Feature', '`Partial<T>`', '`Sparse<T>`']}
-  data={[
-    ['Top Level Properties', 'Optional', 'Optional'],
-    ['Nested Objects', 'Required (Must be complete)', 'Optional (Can be partial)'],
-    ['Use Case', 'Simple object creation', 'Patches, deep updates, large forms'],
-  ]}
-/>
+| Feature | `Partial<T>` | `Sparse<T>` |
+|---------|--------------|-------------|
+| Top Level Properties | Optional | Optional |
+| Nested Objects | Required (Must be complete) | Optional (Can be partial) |
+| Use Case | Simple object creation | Patches, deep updates, large forms |
 ```

components/share/MdxComponents/index.tsx

@@ -4,7 +4,6 @@ import Bilibili from './Bilibili';
 import CodeFrame from './CodeFrame';
 import Pre from './Pre';
 import Quote from './Quote';
-import Table from './Table';
 import YouTube from './Youtube';
 
 export const mdxComponents = {
@@ -13,6 +12,5 @@ export const mdxComponents = {
   CodeFrame,
   Quote,
   Image,
-  Table,
   pre: Pre,
 };

content/posts/angular-component.mdx

@@ -40,23 +40,11 @@ component.
   known as the shadow DOM.
 </Quote>
 
-<Table
-  columns={['Name', 'Description']}
-  data={[
-    [
-      'Emulated',
-      'When this value is specified, Angular emulates the shadow DOM by writing content and styles to add attributes, as described earlier. This is the default behavior if no encapsulation value is specified in the @Component decorator.',
-    ],
-    [
-      'ShadowDom',
-      'When this value is specified, Angular uses the browser’s shadow DOM feature. This will work only if the browser implements the shadow DOM.',
-    ],
-    [
-      'None',
-      'When this value is specified, Angular simply adds the unmodified CSS styles to the head section of the HTML document and lets the browser figure out how to apply the styles using the normal CSS precedence rules.',
-    ],
-  ]}
-/>
+| Name      | Description                                                                                                                                                                                                                           |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Emulated  | When this value is specified, Angular emulates the shadow DOM by writing content and styles to add attributes, as described earlier. This is the default behavior if no encapsulation value is specified in the @Component decorator. |
+| ShadowDom | When this value is specified, Angular uses the browser's shadow DOM feature. This will work only if the browser implements the shadow DOM.                                                                                            |
+| None      | When this value is specified, Angular simply adds the unmodified CSS styles to the head section of the HTML document and lets the browser figure out how to apply the styles using the normal CSS precedence rules.                   |
 
 > The ShadowDom and None values should be used with caution. Browser support for the shadow DOM feature is improving but
 > has been patchy and was made more complex because there was an earlier version of the shadow DOM feature that was
@@ -81,17 +69,11 @@ export class ProductFormComponent {}
 
 ### Using the Shadow DOM CSS Selectors
 
-<Table
-  columns={['Name', 'Description']}
-  data={[
-    [':host', 'match the component’s host element.'],
-    [':host-context(.classSelector)', 'match ancestors of the host element that have a specific class'],
-    [
-      '/deep/ , >>>, or ::ng-deep',
-      'used by a parent component to define styles that affect the elements in child component templates. This selector should be used only when the @Component decorator’s encapsulation property is set to emulated.',
-    ],
-  ]}
-/>
+| Name                            | Description                                                                                                                                                                                                     |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `:host`                         | match the component's host element.                                                                                                                                                                             |
+| `:host-context(.classSelector)` | match ancestors of the host element that have a specific class                                                                                                                                                  |
+| `/deep/ , >>>, or ::ng-deep`    | used by a parent component to define styles that affect the elements in child component templates. This selector should be used only when the @Component decorator's encapsulation property is set to emulated. |
 
 ```css
 /* find the current host's ancestors which has .angularApp class, and all input under that */