2025-08-04 03:39:34 +08:00 · 2025-07-31 17:49:25 +08:00 · 2025-07-31 17:49:25 +08:00 · d04f2c7940
commit d04f2c7940
parent 959fc6b9b8
7 changed files with 1691 additions and 528 deletions
--- a/assets/block.js
+++ b/assets/block.js
@ -0,0 +1,573 @@
+(function() {
+    const { registerBlockType } = wp.blocks;
+    const { createElement: el, useState, useEffect } = wp.element;
+    const { 
+        InspectorControls, 
+        BlockControls,
+        BlockAlignmentToolbar,
+        useBlockProps 
+    } = wp.blockEditor;
+    const { 
+        PanelBody, 
+        TextControl, 
+        ToggleControl, 
+        SelectControl,
+        Button,
+        Spinner,
+        Notice
+    } = wp.components;
+    const { __ } = wp.i18n;
+
+    registerBlockType('git-embed-feicode/repository', {
+        title: __('Git Repository', 'git-embed-feicode'),
+        description: __('Embed a Git repository with information and stats', 'git-embed-feicode'),
+        icon: 'admin-links',
+        category: 'embed',
+        supports: {
+            align: ['left', 'center', 'right', 'wide', 'full']
+        },
+        attributes: {
+            platform: {
+                type: 'string',
+                default: 'github'
+            },
+            customDomain: {
+                type: 'string',
+                default: ''
+            },
+            customSiteName: {
+                type: 'string',
+                default: ''
+            },
+            owner: {
+                type: 'string',
+                default: ''
+            },
+            repo: {
+                type: 'string',
+                default: ''
+            },
+            showDescription: {
+                type: 'boolean',
+                default: true
+            },
+            showStats: {
+                type: 'boolean',
+                default: true
+            },
+            showLanguage: {
+                type: 'boolean',
+                default: true
+            },
+            showActions: {
+                type: 'boolean',
+                default: true
+            },
+            showViewButton: {
+                type: 'boolean',
+                default: true
+            },
+            showCloneButton: {
+                type: 'boolean',
+                default: true
+            },
+            showDownloadButton: {
+                type: 'boolean',
+                default: true
+            },
+            showAvatar: {
+                type: 'boolean',
+                default: true
+            },
+            showSiteInfo: {
+                type: 'boolean',
+                default: true
+            },
+            avatarSize: {
+                type: 'string',
+                default: 'medium'
+            },
+            cardStyle: {
+                type: 'string',
+                default: 'default'
+            },
+            buttonStyle: {
+                type: 'string',
+                default: 'default'
+            },
+            buttonSize: {
+                type: 'string',
+                default: 'medium'
+            },
+            showIssuesButton: {
+                type: 'boolean',
+                default: false
+            },
+            showForksButton: {
+                type: 'boolean',
+                default: false
+            },
+            alignment: {
+                type: 'string',
+                default: 'none'
+            }
+        },
+
+        edit: function(props) {
+            const { attributes, setAttributes } = props;
+            const { 
+                platform, customDomain, customSiteName, owner, repo, showDescription, showStats, showLanguage,
+                showActions, showViewButton, showCloneButton, showDownloadButton, showIssuesButton, showForksButton,
+                showAvatar, showSiteInfo, avatarSize, cardStyle, buttonStyle, buttonSize, alignment 
+            } = attributes;
+            
+            const [repoData, setRepoData] = useState(null);
+            const [loading, setLoading] = useState(false);
+            const [error, setError] = useState('');
+
+            const blockProps = useBlockProps({
+                className: alignment !== 'none' ? `align${alignment}` : ''
+            });
+
+            const fetchRepoData = () => {
+                if (!owner || !repo) {
+                    setError('Please enter repository owner and name');
+                    return;
+                }
+
+                if ((platform === 'gitea' || platform === 'forgejo' || platform === 'gitlab' || platform === 'custom') && !customDomain) {
+                    setError(`Please enter custom domain for ${platform.charAt(0).toUpperCase() + platform.slice(1)}`);
+                    return;
+                }
+
+                setLoading(true);
+                setError('');
+
+                const formData = new FormData();
+                formData.append('action', 'git_embed_fetch');
+                formData.append('platform', platform);
+                formData.append('customDomain', customDomain);
+                formData.append('customSiteName', customSiteName);
+                formData.append('owner', owner);
+                formData.append('repo', repo);
+                formData.append('nonce', gitEmbedAjax.nonce);
+
+                fetch(gitEmbedAjax.url, {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    setLoading(false);
+                    if (data.success) {
+                        setRepoData(data.data);
+                        setError('');
+                    } else {
+                        setError(data.data || 'Failed to fetch repository');
+                        setRepoData(null);
+                    }
+                })
+                .catch(err => {
+                    setLoading(false);
+                    setError('Network error occurred');
+                    setRepoData(null);
+                });
+            };
+
+            useEffect(() => {
+                if (owner && repo && (platform === 'github' || (platform !== 'github' && customDomain))) {
+                    fetchRepoData();
+                }
+            }, [owner, repo, platform, customDomain, customSiteName]);
+
+            // 获取显示用的头像 URL（优先仓库头像）
+            const getDisplayAvatarUrl = (repoData) => {
+                if (repoData.repo_avatar_url) {
+                    return repoData.repo_avatar_url;
+                }
+                if (repoData.owner && repoData.owner.avatar_url) {
+                    return repoData.owner.avatar_url;
+                }
+                return '';
+            };
+
+            const renderPreview = () => {
+                if (loading) {
+                    return el('div', { className: 'git-embed-loading' },
+                        el(Spinner),
+                        el('p', null, 'Fetching repository data...')
+                    );
+                }
+
+                if (error) {
+                    return el(Notice, {
+                        status: 'error',
+                        isDismissible: false
+                    }, error);
+                }
+
+                if (!repoData) {
+                    return el('div', { className: 'git-embed-placeholder' },
+                        el('div', { className: 'git-embed-placeholder-content' },
+                            el('span', { className: 'dashicons dashicons-admin-links git-embed-placeholder-icon' }),
+                            el('h3', null, 'Git Repository Embed'),
+                            el('p', null, 'Configure your repository details in the sidebar')
+                        )
+                    );
+                }
+
+                const cardClass = `git-embed-card${cardStyle !== 'default' ? ` git-embed-card-${cardStyle}` : ''}`;
+                const avatarClass = `git-embed-avatar git-embed-avatar-${avatarSize}`;
+                const buttonClass = `git-embed-button-${buttonSize}`;
+                
+                // 使用简化的下载地址
+                const downloadUrl = repoData.archive_url || '';
+                
+                // 获取显示头像
+                const displayAvatarUrl = getDisplayAvatarUrl(repoData);
+
+                return el('div', { className: cardClass },
+                    showSiteInfo && repoData.site_info && el('div', { 
+                        className: `git-embed-site-info platform-${repoData.platform || 'github'}` 
+                    },
+                        el('img', {
+                            src: repoData.site_info.favicon,
+                            alt: repoData.site_info.name,
+                            className: 'git-embed-site-favicon',
+                            onError: (e) => e.target.style.display = 'none'
+                        }),
+                        el('span', { className: 'git-embed-site-name' },
+                            el('a', {
+                                href: repoData.site_info.url,
+                                target: '_blank',
+                                rel: 'noopener'
+                            }, repoData.site_info.name)
+                        )
+                    ),
+                    
+                    el('div', { className: 'git-embed-header' },
+                        el('div', { className: 'git-embed-title-section' },
+                            showAvatar && displayAvatarUrl && el('img', {
+                                src: displayAvatarUrl,
+                                alt: repoData.name,
+                                className: avatarClass,
+                                title: repoData.repo_avatar_url ? 'Repository Avatar' : 'Owner Avatar'
+                            }),
+                            el('div', { className: 'git-embed-title-content' },
+                                el('h3', { className: 'git-embed-title' },
+                                    el('span', { className: 'dashicons dashicons-admin-links git-embed-repo-icon' }),
+                                    el('a', {
+                                        href: repoData.html_url,
+                                        target: '_blank',
+                                        rel: 'noopener'
+                                    }, repoData.full_name)
+                                ),
+                                showAvatar && repoData.owner && el('div', { className: 'git-embed-owner-info' },
+                                    repoData.owner.type && el('span', { className: 'git-embed-owner-type' }, repoData.owner.type),
+                                    el('a', {
+                                        href: repoData.owner.html_url,
+                                        target: '_blank',
+                                        rel: 'noopener',
+                                        className: 'git-embed-owner-link'
+                                    }, `@${repoData.owner.login}`),
+                                    repoData.repo_avatar_url && el('span', { 
+                                        className: 'git-embed-repo-avatar-badge',
+                                        title: 'Repository has custom avatar'
+                                    },
+                                        el('span', { className: 'dashicons dashicons-format-image' })
+                                    )
+                                )
+                            )
+                        ),
+                        el('div', { className: 'git-embed-meta-section' },
+                            showLanguage && repoData.language && el('span', { className: 'git-embed-language' },
+                                el('span', { className: 'dashicons dashicons-editor-code' }),
+                                repoData.language
+                            ),
+                            el('span', { 
+                                className: `git-embed-platform-badge platform-${repoData.platform || 'github'}` 
+                            }, repoData.platform ? repoData.platform.toUpperCase() : 'GITHUB')
+                        )
+                    ),
+                    
+                    showDescription && repoData.description &&
+                        el('p', { className: 'git-embed-description' },
+                            el('span', { className: 'dashicons dashicons-text-page' }),
+                            repoData.description
+                        ),
+                    showStats && el('div', { className: 'git-embed-stats' },
+                        el('span', { className: 'git-embed-stat' },
+                            el('span', { className: 'dashicons dashicons-star-filled' }),
+                            el('span', { className: 'git-embed-stat-label' }, 'Stars:'),
+                            el('span', { className: 'git-embed-stat-value' }, repoData.stargazers_count.toLocaleString())
+                        ),
+                        el('span', { className: 'git-embed-stat' },
+                            el('span', { className: 'dashicons dashicons-networking' }),
+                            el('span', { className: 'git-embed-stat-label' }, 'Forks:'),
+                            el('span', { className: 'git-embed-stat-value' }, repoData.forks_count.toLocaleString())
+                        ),
+                        el('span', { className: 'git-embed-stat' },
+                            el('span', { className: 'dashicons dashicons-editor-help' }),
+                            el('span', { className: 'git-embed-stat-label' }, 'Issues:'),
+                            el('span', { className: 'git-embed-stat-value' }, repoData.open_issues_count.toLocaleString())
+                        )
+                    ),
+                    showActions && (showViewButton || showCloneButton || showDownloadButton || showIssuesButton || showForksButton) && 
+                        el('div', { className: 'git-embed-actions' },
+                            showViewButton && el('a', {
+                                href: repoData.html_url,
+                                className: `git-embed-button git-embed-button-${buttonStyle} ${buttonClass}`,
+                                target: '_blank',
+                                rel: 'noopener'
+                            }, 
+                                el('span', { className: 'dashicons dashicons-external' }),
+                                'View Repository'
+                            ),
+                            showCloneButton && el('span', {
+                                className: `git-embed-button git-embed-button-secondary ${buttonClass}`,
+                                title: `Clone URL: ${repoData.clone_url}`
+                            }, 
+                                el('span', { className: 'dashicons dashicons-admin-page' }),
+                                'Clone'
+                            ),
+                            showDownloadButton && downloadUrl && el('a', {
+                                href: downloadUrl,
+                                className: `git-embed-button git-embed-button-secondary ${buttonClass}`,
+                                download: `${repoData.name}-${repoData.default_branch || 'main'}.zip`
+                            }, 
+                                el('span', { className: 'dashicons dashicons-download' }),
+                                'Download ZIP'
+                            ),
+                            showIssuesButton && el('a', {
+                                href: `${repoData.html_url}/issues`,
+                                className: `git-embed-button git-embed-button-outline ${buttonClass}`,
+                                target: '_blank',
+                                rel: 'noopener'
+                            }, 
+                                el('span', { className: 'dashicons dashicons-editor-help' }),
+                                `Issues (${repoData.open_issues_count.toLocaleString()})`
+                            ),
+                            showForksButton && el('a', {
+                                href: `${repoData.html_url}/forks`,
+                                className: `git-embed-button git-embed-button-outline ${buttonClass}`,
+                                target: '_blank',
+                                rel: 'noopener'
+                            }, 
+                                el('span', { className: 'dashicons dashicons-networking' }),
+                                `Forks (${repoData.forks_count.toLocaleString()})`
+                            )
+                        )
+                );
+            };
+
+            return el('div', blockProps,
+                el(BlockControls, null,
+                    el(BlockAlignmentToolbar, {
+                        value: alignment,
+                        onChange: (value) => setAttributes({ alignment: value })
+                    })
+                ),
+                el(InspectorControls, null,
+                    el(PanelBody, {
+                        title: __('Repository Settings', 'git-embed-feicode'),
+                        initialOpen: true
+                    },
+                        el(SelectControl, {
+                            label: __('Platform', 'git-embed-feicode'),
+                            value: platform,
+                            options: [
+                                { label: 'GitHub', value: 'github' },
+                                { label: 'Gitea', value: 'gitea' },
+                                { label: 'Forgejo', value: 'forgejo' },
+                                { label: 'GitLab (Self-hosted)', value: 'gitlab' },
+                                { label: 'Custom Git Service', value: 'custom' }
+                            ],
+                            onChange: (value) => setAttributes({ platform: value }),
+                            help: platform !== 'github' ? 'Self-hosted Git service requires custom domain' : '',
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        (platform !== 'github') && el(TextControl, {
+                            label: __('Custom Domain', 'git-embed-feicode'),
+                            value: customDomain,
+                            onChange: (value) => setAttributes({ customDomain: value }),
+                            placeholder: 'e.g. git.example.com',
+                            help: `Enter the domain of your ${platform.charAt(0).toUpperCase() + platform.slice(1)} instance`,
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        (platform !== 'github') && el(TextControl, {
+                            label: __('Custom Site Name (Optional)', 'git-embed-feicode'),
+                            value: customSiteName,
+                            onChange: (value) => setAttributes({ customSiteName: value }),
+                            placeholder: 'e.g. Company Git',
+                            help: 'Override the automatically detected site name',
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        el(TextControl, {
+                            label: __('Repository Owner', 'git-embed-feicode'),
+                            value: owner,
+                            onChange: (value) => setAttributes({ owner: value }),
+                            placeholder: 'e.g. facebook',
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        el(TextControl, {
+                            label: __('Repository Name', 'git-embed-feicode'),
+                            value: repo,
+                            onChange: (value) => setAttributes({ repo: value }),
+                            placeholder: 'e.g. react',
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        el(Button, {
+                            isPrimary: true,
+                            onClick: fetchRepoData,
+                            disabled: loading || !owner || !repo || 
+                                (platform !== 'github' && !customDomain)
+                        }, loading ? 'Fetching...' : 'Fetch Repository')
+                    ),
+                    el(PanelBody, {
+                        title: __('Display Options', 'git-embed-feicode'),
+                        initialOpen: false
+                    },
+                        el(ToggleControl, {
+                            label: __('Show Site Information', 'git-embed-feicode'),
+                            checked: showSiteInfo,
+                            onChange: (value) => setAttributes({ showSiteInfo: value })
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Avatar', 'git-embed-feicode'),
+                            checked: showAvatar,
+                            onChange: (value) => setAttributes({ showAvatar: value }),
+                            help: 'Shows repository avatar if available, otherwise owner avatar'
+                        }),
+                        showAvatar && el(SelectControl, {
+                            label: __('Avatar Size', 'git-embed-feicode'),
+                            value: avatarSize,
+                            options: [
+                                { label: 'Small', value: 'small' },
+                                { label: 'Medium', value: 'medium' },
+                                { label: 'Large', value: 'large' }
+                            ],
+                            onChange: (value) => setAttributes({ avatarSize: value }),
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Description', 'git-embed-feicode'),
+                            checked: showDescription,
+                            onChange: (value) => setAttributes({ showDescription: value })
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Programming Language', 'git-embed-feicode'),
+                            checked: showLanguage,
+                            onChange: (value) => setAttributes({ showLanguage: value })
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Statistics', 'git-embed-feicode'),
+                            checked: showStats,
+                            onChange: (value) => setAttributes({ showStats: value })
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Action Buttons', 'git-embed-feicode'),
+                            checked: showActions,
+                            onChange: (value) => setAttributes({ showActions: value })
+                        })
+                    ),
+                    el(PanelBody, {
+                        title: __('Button Options', 'git-embed-feicode'),
+                        initialOpen: false
+                    },
+                        el(ToggleControl, {
+                            label: __('Show View Repository Button', 'git-embed-feicode'),
+                            checked: showViewButton,
+                            onChange: (value) => setAttributes({ showViewButton: value }),
+                            disabled: !showActions
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Clone Button', 'git-embed-feicode'),
+                            checked: showCloneButton,
+                            onChange: (value) => setAttributes({ showCloneButton: value }),
+                            disabled: !showActions
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Download ZIP Button', 'git-embed-feicode'),
+                            checked: showDownloadButton,
+                            onChange: (value) => setAttributes({ showDownloadButton: value }),
+                            disabled: !showActions
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Issues Button', 'git-embed-feicode'),
+                            checked: showIssuesButton,
+                            onChange: (value) => setAttributes({ showIssuesButton: value }),
+                            disabled: !showActions
+                        }),
+                        el(ToggleControl, {
+                            label: __('Show Forks Button', 'git-embed-feicode'),
+                            checked: showForksButton,
+                            onChange: (value) => setAttributes({ showForksButton: value }),
+                            disabled: !showActions
+                        }),
+                        el(SelectControl, {
+                            label: __('Button Style', 'git-embed-feicode'),
+                            value: buttonStyle,
+                            options: [
+                                { label: 'Default', value: 'default' },
+                                { label: 'Primary (Green)', value: 'primary' },
+                                { label: 'Secondary (Gray)', value: 'secondary' },
+                                { label: 'Outline', value: 'outline' },
+                                { label: 'Ghost', value: 'ghost' }
+                            ],
+                            onChange: (value) => setAttributes({ buttonStyle: value }),
+                            disabled: !showActions,
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        }),
+                        el(SelectControl, {
+                            label: __('Button Size', 'git-embed-feicode'),
+                            value: buttonSize,
+                            options: [
+                                { label: 'Small', value: 'small' },
+                                { label: 'Medium', value: 'medium' },
+                                { label: 'Large', value: 'large' }
+                            ],
+                            onChange: (value) => setAttributes({ buttonSize: value }),
+                            disabled: !showActions,
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        })
+                    ),
+                    el(PanelBody, {
+                        title: __('Style Options', 'git-embed-feicode'),
+                        initialOpen: false
+                    },
+                        el(SelectControl, {
+                            label: __('Card Style', 'git-embed-feicode'),
+                            value: cardStyle,
+                            options: [
+                                { label: 'Default', value: 'default' },
+                                { label: 'Minimal', value: 'minimal' },
+                                { label: 'Bordered', value: 'bordered' },
+                                { label: 'Shadow', value: 'shadow' },
+                                { label: 'Gradient', value: 'gradient' },
+                                { label: 'Glassmorphism', value: 'glass' }
+                            ],
+                            onChange: (value) => setAttributes({ cardStyle: value }),
+                            __next40pxDefaultSize: true,
+                            __nextHasNoMarginBottom: true
+                        })
+                    )
+                ),
+                el('div', { className: 'wp-block-git-embed-feicode-repository' },
+                    renderPreview()
+                )
+            );
+        },
+
+        save: function() {
+            return null;
+        }
+    });
+})();
--- a/assets/style.css
+++ b/assets/style.css
@ -0,0 +1,694 @@
+.wp-block-git-embed-feicode-repository {
+    margin: 1.5em 0;
+    max-width: 100%;
+}
+
+.wp-block-git-embed-feicode-repository.alignleft {
+    float: left;
+    margin-right: 1.5em;
+    max-width: 360px;
+}
+
+.wp-block-git-embed-feicode-repository.alignright {
+    float: right;
+    margin-left: 1.5em;
+    max-width: 360px;
+}
+
+.wp-block-git-embed-feicode-repository.aligncenter {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 600px;
+}
+
+.wp-block-git-embed-feicode-repository.alignwide {
+    max-width: 800px;
+}
+
+.wp-block-git-embed-feicode-repository.alignfull {
+    max-width: none;
+}
+
+.git-embed-card {
+    background: #ffffff;
+    border: 1px solid #d1d5da;
+    border-radius: 8px;
+    padding: 30px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.15s ease-in-out;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.git-embed-card:hover {
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+}
+
+.git-embed-card-minimal {
+    border: none;
+    box-shadow: none;
+    background: #f9f9f9;
+}
+
+.git-embed-card-bordered {
+    border: 2px solid #0073aa;
+}
+
+.git-embed-card-shadow {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    border: none;
+}
+
+.git-embed-card-gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+}
+
+.git-embed-card-gradient .git-embed-title a,
+.git-embed-card-gradient .git-embed-site-name a,
+.git-embed-card-gradient .git-embed-owner-link {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.git-embed-card-gradient .git-embed-description,
+.git-embed-card-gradient .git-embed-stat {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.git-embed-card-glass {
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+.git-embed-site-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #e1e4e8;
+}
+
+.git-embed-site-favicon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.git-embed-site-name {
+    font-size: 14px;
+    color: #656d76;
+    font-weight: 500;
+}
+
+.git-embed-site-name a {
+    color: #656d76;
+    text-decoration: none;
+}
+
+.git-embed-site-name a:hover {
+    color: #0969da;
+    text-decoration: underline;
+}
+
+.git-embed-site-info.platform-github .git-embed-site-name a {
+    color: #24292f;
+}
+
+.git-embed-site-info.platform-github .git-embed-site-name a:hover {
+    color: #0969da;
+}
+
+.git-embed-site-info.platform-gitea .git-embed-site-name a {
+    color: #609926;
+}
+
+.git-embed-site-info.platform-gitea .git-embed-site-name a:hover {
+    color: #4a7220;
+}
+
+.git-embed-site-info.platform-forgejo .git-embed-site-name a {
+    color: #fb923c;
+}
+
+.git-embed-site-info.platform-forgejo .git-embed-site-name a:hover {
+    color: #ea580c;
+}
+
+.git-embed-site-info.platform-gitlab .git-embed-site-name a {
+    color: #fc6d26;
+}
+
+.git-embed-site-info.platform-gitlab .git-embed-site-name a:hover {
+    color: #e24000;
+}
+
+.git-embed-site-info.platform-custom .git-embed-site-name a {
+    color: #6366f1;
+}
+
+.git-embed-site-info.platform-custom .git-embed-site-name a:hover {
+    color: #4f46e5;
+}
+
+.git-embed-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.git-embed-title-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    flex: 1;
+    min-width: 0;
+}
+
+.git-embed-title-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.git-embed-avatar {
+    border-radius: 15%;
+    flex-shrink: 0;
+    border: 2px solid #e1e4e8;
+    padding: 8px;
+}
+
+.git-embed-avatar-small {
+    width: 26px;
+    height: 26px;
+}
+
+.git-embed-avatar-medium {
+    width: 30px;
+    height: 30px;
+}
+
+.git-embed-avatar-large {
+    width: 35px;
+    height: 35px;
+}
+
+.git-embed-owner-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+    font-size: 12px;
+}
+
+.git-embed-owner-type {
+    background: #f1f8ff;
+    color: #0969da;
+    padding: 2px 6px;
+    border-radius: 12px;
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.git-embed-owner-link {
+    color: #656d76;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.git-embed-owner-link:hover {
+    color: #0969da;
+    text-decoration: underline;
+}
+
+.git-embed-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.3;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.git-embed-repo-icon {
+    font-size: 20px;
+    margin-top: 2px;
+    flex-shrink: 0;
+}
+
+.git-embed-title a {
+    color: #0969da;
+    text-decoration: none;
+    word-break: break-word;
+}
+
+.git-embed-title a:hover {
+    text-decoration: underline;
+}
+
+.git-embed-language {
+    background: #f6f8fa;
+    border: 1px solid #d1d5da;
+    border-radius: 12px;
+    padding: 1px 8px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #656d76;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 1px;
+}
+
+.git-embed-language .dashicons {
+    font-size: 14px;
+    line-height: 1.25;
+}
+
+.git-embed-description {
+    color: #656d76;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.5;
+    margin: 0 0 16px 0;
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+}
+
+.git-embed-description .dashicons {
+    margin-top: 2px;
+    flex-shrink: 0;
+    font-size: 18px;
+}
+
+.git-embed-stats {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.git-embed-stat {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: #656d76;
+    font-weight: 500;
+}
+
+.git-embed-stat .dashicons {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.git-embed-stat-label {
+    font-weight: 400;
+}
+
+.git-embed-stat-value {
+    font-weight: 500;
+}
+
+.git-embed-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.git-embed-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.5;
+    border-radius: 6px;
+    text-decoration: none;
+    cursor: pointer;
+    border: 1px solid;
+    transition: all 0.15s ease-in-out;
+    background: none;
+}
+
+.git-embed-button .dashicons {
+    font-size: 16px;
+line-height: 1.25;
+}
+
+.git-embed-button-primary {
+    color: #ffffff;
+    background-color: #2da44e;
+    border-color: #2da44e;
+}
+
+.git-embed-button-primary:hover {
+    background-color: #2c974b;
+    border-color: #2c974b;
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.git-embed-button-secondary {
+    color: #24292f;
+    background-color: #f6f8fa;
+    border-color: #d1d5da;
+}
+
+.git-embed-button-secondary:hover {
+    background-color: #f3f4f6;
+    border-color: #c7ccd1;
+    color: #24292f;
+    text-decoration: none;
+}
+
+.git-embed-button-outline {
+    color: #0073aa;
+    background-color: transparent;
+    border-color: #0073aa;
+}
+
+.git-embed-button-outline:hover {
+    background-color: #0073aa;
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.git-embed-button-ghost {
+    color: #0073aa;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.git-embed-button-ghost:hover {
+    background-color: rgba(0, 115, 170, 0.1);
+    border-color: #0073aa;
+    color: #0073aa;
+    text-decoration: none;
+}
+
+.git-embed-button-default {
+    color: #24292f;
+    background-color: #f6f8fa;
+    border-color: #d1d5da;
+}
+
+.git-embed-button-default:hover {
+    background-color: #f3f4f6;
+    border-color: #c7ccd1;
+    color: #24292f;
+    text-decoration: none;
+}
+
+.git-embed-button-small {
+    padding: 4px 8px;
+    font-size: 11px;
+    line-height: 1.4;
+}
+
+.git-embed-button-medium {
+    padding: 6px 12px;
+    font-size: 12px;
+    line-height: 1.5;
+}
+
+.git-embed-button-large {
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.git-embed-clone-btn:hover .dashicons {
+    animation: pulse 0.3s ease-in-out;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.git-embed-placeholder {
+    border: 2px dashed #c3c4c7;
+    border-radius: 8px;
+    padding: 40px 20px;
+    text-align: center;
+    background: #f9f9f9;
+}
+
+.git-embed-placeholder-content {
+    max-width: 300px;
+    margin: 0 auto;
+}
+
+.git-embed-placeholder-icon {
+    font-size: 48px;
+    display: block;
+    margin-bottom: 16px;
+    color: #0073aa;
+}
+
+.git-embed-placeholder h3 {
+    margin: 0 0 8px 0;
+    color: #1e1e1e;
+    font-size: 18px;
+}
+
+.git-embed-placeholder p {
+    margin: 0;
+    color: #757575;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.git-embed-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 40px 20px;
+    text-align: center;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background: #f9f9f9;
+}
+
+.git-embed-loading p {
+    margin: 16px 0 0 0;
+    color: #757575;
+    font-size: 14px;
+}
+
+.git-embed-error {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 12px 16px;
+    border-radius: 6px;
+    border: 1px solid #f1aeb5;
+    font-size: 14px;
+    margin: 16px 0;
+}
+
+@media (max-width: 768px) {
+    .git-embed-card {
+        padding: 16px;
+    }
+    
+    .git-embed-site-info {
+        margin-bottom: 12px;
+        padding-bottom: 8px;
+    }
+    
+    .git-embed-title-section {
+        gap: 8px;
+    }
+    
+    .git-embed-avatar-large {
+        width: 30px;
+        height: 30px;
+    }
+    
+    .git-embed-avatar-medium {
+        width: 26px;
+        height: 26px;
+    }
+    
+    .git-embed-owner-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+    
+    .git-embed-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .git-embed-stats {
+        gap: 12px;
+    }
+    
+    .git-embed-actions {
+        width: 100%;
+    }
+    
+    .git-embed-button {
+        flex: 1;
+        justify-content: center;
+        min-width: 0;
+    }
+    
+    .wp-block-git-embed-feicode-repository.alignleft,
+    .wp-block-git-embed-feicode-repository.alignright {
+        float: none;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .git-embed-title {
+        font-size: 16px;
+    }
+    
+    .git-embed-title-section {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .git-embed-avatar {
+        align-self: flex-start;
+    }
+    
+    .git-embed-owner-info {
+        margin-top: 0;
+    }
+    
+    .git-embed-actions {
+        flex-direction: column;
+    }
+    
+    .git-embed-stats {
+        justify-content: space-between;
+    }
+    
+    .git-embed-stat {
+        flex-direction: column;
+        text-align: center;
+        gap: 2px;
+    }
+    
+    .git-embed-site-info {
+        justify-content: center;
+    }
+}
+
+.wp-block[data-type="git-embed-feicode/repository"] {
+    position: relative;
+}
+
+.wp-block[data-type="git-embed-feicode/repository"]:not(.is-selected) .git-embed-card {
+    pointer-events: none;
+}
+
+.wp-block[data-type="git-embed-feicode/repository"].is-selected .git-embed-card {
+    box-shadow: 0 0 0 2px #007cba;
+}
+
+.components-panel__body .components-toggle-control .components-form-toggle:disabled {
+    opacity: 0.3;
+}
+
+.components-panel__body .components-select-control:disabled {
+    opacity: 0.3;
+}
+
+.git-embed-card img {
+    max-width: 100%;
+    height: auto;
+}
+
+.git-embed-site-favicon,
+.git-embed-avatar {
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+}
+
+.git-embed-card .git-embed-avatar:hover {
+    transform: scale(1.05);
+    transition: transform 0.2s ease-in-out;
+}
+
+.git-embed-owner-type:empty {
+    display: none;
+}
+
+.git-embed-owner-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+    font-size: 12px;
+    flex-wrap: wrap;
+}
+
+.git-embed-custom-domain-notice {
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    color: #856404;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-top: 8px;
+}
+
+.git-embed-platform-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 6px;
+    border-radius: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.git-embed-platform-badge.platform-github {
+    background: #f6f8fa;
+    color: #24292f;
+}
+
+.git-embed-platform-badge.platform-gitea {
+    background: #f0f9e8;
+    color: #609926;
+}
+
+.git-embed-platform-badge.platform-forgejo {
+    background: #fef3e2;
+    color: #fb923c;
+}
+
+.components-panel__body .components-text-control__input:invalid {
+    border-color: #d63638;
+    box-shadow: 0 0 0 1px #d63638;
+}
+
+.components-panel__body .components-text-control__help {
+    font-size: 12px;
+    color: #757575;
+    margin-top: 4px;
+}