diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..78e1256 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,16 @@ +version: 2 +updates: + - package-ecosystem: "github-actions" + directory: "/" + schedule: + interval: "weekly" + commit-message: + prefix: "ci" + include: "scope" + - package-ecosystem: "npm" + directory: "/" + schedule: + interval: "weekly" + commit-message: + prefix: "deps" + include: "scope" diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..bd3e36b --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,48 @@ +name: Build + +on: + push: + branches: [main, develop] + pull_request: + branches: [main, develop] + +jobs: + build-app: + name: Build Application + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v6 + + - name: Setup Node.js + uses: actions/setup-node@v6 + with: + node-version: "22" + + - name: Enable Corepack + run: corepack enable + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT + + - name: Cache yarn dependencies + uses: actions/cache@v4 + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build application + run: yarn build + + - name: Upload build artifacts + uses: actions/upload-artifact@v5 + with: + name: frontend-dist + path: dist/ + retention-days: 30 diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..53ea8f7 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,60 @@ +name: Deploy + +on: + push: + tags: ["v*"] + workflow_dispatch: + inputs: + version: + description: "Version to deploy (e.g., v1.2.3)" + required: true + type: string + +jobs: + deploy-production: + name: Deploy to Production + runs-on: ubuntu-latest + environment: + name: production + url: https://tercul.example.com + + steps: + - name: Check out code + uses: actions/checkout@v6 + + - name: Extract version + id: version + run: | + if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then + echo "VERSION=${{ inputs.version }}" >> $GITHUB_OUTPUT + else + echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT + fi + + - name: Deploy to Docker Swarm + env: + SWARM_HOST: ${{ secrets.SWARM_HOST }} + SWARM_SSH_KEY: ${{ secrets.SWARM_SSH_KEY }} + IMAGE_TAG: ${{ steps.version.outputs.VERSION }} + run: | + # Uncomment and configure for actual Docker Swarm deployment + # echo "$SWARM_SSH_KEY" > swarm_key + # chmod 600 swarm_key + # ssh -i swarm_key -o StrictHostKeyChecking=no \ + # deploy@$SWARM_HOST \ + # "docker service update \ + # --image ghcr.io/${{ github.repository }}-frontend:${IMAGE_TAG} \ + # tercul-frontend" + # rm swarm_key + + echo "Deploying frontend version ${{ steps.version.outputs.VERSION }} to production" + echo "Image: ghcr.io/${{ github.repository }}-frontend:${IMAGE_TAG}" + + - name: Deployment summary + run: | + echo "### Frontend Deployment Complete :rocket:" >> $GITHUB_STEP_SUMMARY + echo "" >> $GITHUB_STEP_SUMMARY + echo "- **Version**: ${{ steps.version.outputs.VERSION }}" >> $GITHUB_STEP_SUMMARY + echo "- **Image**: ghcr.io/${{ github.repository }}-frontend:${{ steps.version.outputs.VERSION }}" >> $GITHUB_STEP_SUMMARY + echo "- **Environment**: Production" >> $GITHUB_STEP_SUMMARY + echo "- **Deployed at**: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" >> $GITHUB_STEP_SUMMARY diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml new file mode 100644 index 0000000..d4c50c6 --- /dev/null +++ b/.github/workflows/docker-build.yml @@ -0,0 +1,65 @@ +name: Docker Build + +on: + push: + branches: [main] + tags: ["v*"] + pull_request: + branches: [main] + +jobs: + build-image: + name: Build Docker Image + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + attestations: write + id-token: write + + steps: + - name: Check out code + uses: actions/checkout@v6 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Login to GitHub Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract metadata + id: meta + uses: docker/metadata-action@v5 + with: + images: ghcr.io/${{ github.repository }}-frontend + tags: | + type=ref,event=branch + type=ref,event=pr + type=ref,event=tag + type=semver,pattern={{version}} + type=semver,pattern={{major}}.{{minor}} + type=sha,format=long + + - name: Build and push + id: push + uses: docker/build-push-action@v6 + with: + context: . + push: ${{ github.event_name != 'pull_request' }} + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max + platforms: linux/amd64,linux/arm64 + + - name: Generate artifact attestation + if: github.event_name != 'pull_request' + uses: actions/attest-build-provenance@v3 + with: + subject-name: ghcr.io/${{ github.repository }}-frontend + subject-digest: ${{ steps.push.outputs.digest }} + push-to-registry: true diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..53fddb3 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,41 @@ +name: Lint + +on: + push: + branches: [main, develop] + pull_request: + branches: [main, develop] + +jobs: + typescript-lint: + name: TypeScript Type Check + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v6 + + - name: Setup Node.js + uses: actions/setup-node@v6 + with: + node-version: "22" + + - name: Enable Corepack + run: corepack enable + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT + + - name: Cache yarn dependencies + uses: actions/cache@v4 + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Type check + run: yarn check diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..6a10dbd --- /dev/null +++ b/Dockerfile @@ -0,0 +1,57 @@ +# Multi-stage build for Node.js frontend application +FROM node:iron-alpine3.22 AS builder + +# Enable Corepack for Yarn 4.x +RUN corepack enable + +# Set working directory +WORKDIR /app + +# Copy Yarn configuration and package files +COPY .yarnrc.yml package.json yarn.lock ./ + +# Install dependencies (uses PnP by default from .yarnrc.yml) +RUN yarn install --immutable + +# Copy source code +COPY . . + +# Build the application +RUN yarn build + +# Production stage +FROM node:iron-alpine3.22 AS production + +# Enable Corepack for Yarn 4.x +RUN corepack enable + +# Create app user +RUN addgroup -g 1001 -S nodejs && \ + adduser -S nextjs -u 1001 + +# Set working directory +WORKDIR /app + +# Copy Yarn configuration and package files +COPY .yarnrc.yml package.json yarn.lock ./ + +# Install production dependencies (uses PnP) +RUN yarn install --immutable --production + +# Copy PnP files and built application from builder stage +COPY --from=builder --chown=nextjs:nodejs /app/.pnp.cjs /app/.pnp.loader.mjs ./ +COPY --from=builder --chown=nextjs:nodejs /app/.yarn ./.yarn +COPY --from=builder --chown=nextjs:nodejs /app/dist ./dist + +# Switch to non-root user +USER nextjs + +# Expose the application port +EXPOSE 3000 + +# Health check +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD node -e "require('http').get('http://localhost:3000/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))" + +# Command to run the application +CMD ["yarn", "start"] diff --git a/client/src/pages/dashboard/BlogEdit.tsx b/client/src/pages/dashboard/BlogEdit.tsx index 58e5edb..f896154 100644 --- a/client/src/pages/dashboard/BlogEdit.tsx +++ b/client/src/pages/dashboard/BlogEdit.tsx @@ -1,7 +1,6 @@ +import { getBlogPost, updateBlogPost } from "@/lib/api/blog-api"; import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import { getBlogPost, updateBlogPost } from "@/api/blog-api"; -import { TagManager } from "../../components/blog/tag-manager"; interface BlogPost { id: string; @@ -38,11 +37,6 @@ const BlogEdit: React.FC = () => { setPost({ ...post, [e.target.name]: e.target.value }); }; - const handleTagsChange = (tags: string[]) => { - if (!post) return; - setPost({ ...post, tags }); - }; - const handleStatusChange = (status: BlogPost["status"]) => { if (!post) return; setPost({ ...post, status }); @@ -85,7 +79,20 @@ const BlogEdit: React.FC = () => { className="textarea textarea-bordered w-full h-40" required /> - +
+ + { + const tags = e.target.value.split(",").map(tag => tag.trim()).filter(tag => tag); + setPost({ ...post, tags }); + }} + placeholder="Enter tags separated by commas" + className="input input-bordered w-full" + /> +

Separate tags with commas

+