add seo

.github/workflows/ci.yml

@@ -0,0 +1,86 @@
+name: CI
+
+# Trigger workflow on pull requests to main branch
+on:
+  pull_request:
+    branches:
+      - main
+
+# Set permissions for CI and PR comments
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  # CI job to verify build and run tests
+  ci:
+    name: Build and Test
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout repository code
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Step 2: Setup Node.js 20 with npm caching
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      # Step 3: Install dependencies using npm ci for clean, reproducible installs
+      - name: Install dependencies
+        run: npm ci
+
+      # Step 4: Verify snapshot files exist before running tests
+      - name: Verify Snapshot Files
+        run: |
+          echo "Checking for snapshot files..."
+          SNAPSHOT_DIR="src/lib/docker-compose/__tests__/__verify__/__snapshots__"
+          if [ ! -d "$SNAPSHOT_DIR" ]; then
+            echo "Error: Snapshot directory not found at $SNAPSHOT_DIR"
+            exit 1
+          fi
+          SNAPSHOT_COUNT=$(find "$SNAPSHOT_DIR" -name "*.snap" | wc -l)
+          echo "Found $SNAPSHOT_COUNT snapshot file(s):"
+          ls -la "$SNAPSHOT_DIR"/*.snap
+          if [ "$SNAPSHOT_COUNT" -eq 0 ]; then
+            echo "Error: No snapshot files found in $SNAPSHOT_DIR"
+            exit 1
+          fi
+          echo "Snapshot files verified successfully."
+
+      # Step 5: Build project and verify TypeScript compilation
+      - name: Build
+        run: npm run build
+
+      # Step 6: Run test suite using vitest
+      - name: Test
+        run: npm test
+
+      # Step 7: Report test results with PR comment
+      - name: Comment PR with test results
+        if: always()
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const outcome = '${{ job.status }}';
+            const emoji = outcome === 'success' ? '✅' : '❌';
+            const message = `${emoji} CI check result: **${outcome === 'success' ? 'Passed' : 'Failed'}**
+
+            **Workflow**: CI
+            **Status**: ${outcome}
+            **Branch**: ${{ github.head_ref }}
+            **Commit**: ${{ github.sha }}
+
+            ${outcome === 'success' ?
+              'All tests passed and build completed successfully.' :
+              'Please check the logs for details and fix any issues before merging.'}`;
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: message
+            });

README.md

@@ -13,6 +13,8 @@ A modern Docker Compose configuration generator for Hagicode, built with React +
 - **Responsive Design**: Works on both desktop and mobile devices
 - **Local Storage Persistence**: Configuration saved to localStorage for convenience
 - **One-Click Copy/Download**: Copy generated YAML to clipboard or download as file
+- **SEO Optimized**: Full search engine optimization with meta tags, Open Graph, Twitter Cards, and structured data
+- **Multi-language Support**: Internationalization (i18n) with English and Chinese support
 
 ## Quick Start
 
@@ -144,6 +146,63 @@ src/
 - Firefox (latest)
 - Safari (latest)
 
+## SEO Configuration
+
+The application includes comprehensive SEO (Search Engine Optimization) features:
+
+### Features
+
+- **Meta Tags**: Complete HTML meta tags for title, description, keywords
+- **Open Graph**: Enhanced social media sharing on Facebook, LinkedIn, etc.
+- **Twitter Cards**: Optimized card display when sharing on Twitter
+- **Structured Data**: JSON-LD Schema.org markup for WebApplication, SoftwareApplication, and Organization
+- **Sitemap**: XML sitemap for search engine crawlers (`/sitemap.xml`)
+- **Robots.txt**: Search engine crawler configuration (`/robots.txt`)
+- **Canonical URLs**: Prevents duplicate content issues
+- **Hreflang Tags**: Multi-language SEO support
+
+### Customization
+
+SEO configuration is centralized in `src/config/seo.ts`. You can customize:
+
+- Site title and description
+- Keywords
+- Social media images
+- Default locale and alternate languages
+- Organization information
+
+### Dynamic SEO Updates
+
+SEO tags can be dynamically updated using the utility functions in `src/lib/seo/utils.ts`:
+
+```typescript
+import { updateSEO } from './lib/seo/utils';
+
+// Update SEO for specific pages
+updateSEO({
+  title: 'Custom Page Title',
+  description: 'Custom description',
+  image: '/custom-image.png'
+});
+```
+
+### Validation Tools
+
+Test your SEO implementation with these online tools:
+
+- **Google Lighthouse**: Built into Chrome DevTools - Tests SEO performance
+- **Facebook Sharing Debugger**: https://developers.facebook.com/tools/debug/
+- **Twitter Card Validator**: https://cards-dev.twitter.com/validator
+- **Google Rich Results Test**: https://search.google.com/test/rich-results
+- **Schema Markup Validator**: https://validator.schema.org/
+
+### Adding a Custom Open Graph Image
+
+To add a custom OG image:
+
+1. Create an image at `public/og-image.png` (recommended size: 1200x630px)
+2. Update the `image` property in `src/config/seo.ts`
+
 ## License
 
 MIT