Website V1 - Remix

.eslintignore

@@ -0,0 +1,3 @@
+public/build/**
+build/**
+api/**

.eslintrc.js

@@ -0,0 +1,74 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:jsx-a11y/recommended",
+    "plugin:jsx-a11y/strict",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vitest/all",
+    "prettier",
+  ],
+  plugins: [
+    "formatjs",
+    "@typescript-eslint",
+    "prefer-arrow",
+    "vitest",
+    "prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  overrides: [
+    {
+      files: ["**/*.ts", "**/*.tsx"],
+      extends: [
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@typescript-eslint/strict",
+      ],
+      parserOptions: {
+        project: "./tsconfig.json",
+      },
+    },
+  ],
+  root: true,
+  rules: {
+    "prettier/prettier": "error",
+    "@typescript-eslint/explicit-function-return-type": "error",
+    "prefer-arrow/prefer-arrow-functions": [
+      "warn",
+      {
+        disallowPrototype: true,
+        singleReturnOnly: false,
+        classPropertiesAllowed: false,
+      },
+    ],
+    "@typescript-eslint/typedef": [
+      "error",
+      {
+        arrayDestructuring: false,
+        arrowParameter: true,
+        memberVariableDeclaration: false,
+        objectDestructuring: false,
+        parameter: true,
+        propertyDeclaration: true,
+        variableDeclaration: false,
+      },
+    ],
+    "no-console": "error",
+    "vitest/no-hooks": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  env: {
+    node: true,
+  },
+};

.github/actions/setup/action.yml

@@ -0,0 +1,38 @@
+name: "Setup pipeline step"
+description: "Setup worker and installs dependencies"
+runs:
+  using: "composite"
+  steps:
+    - name: Setup node
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      id: pnpm-install
+      with:
+        version: 8
+        run_install: false
+
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install deps
+      shell: bash
+      run: pnpm install --ignore-scripts
+
+    - name: Install prisma client
+      shell: bash
+      run: pnpm prisma generate

.github/workflows/main.yml

@@ -0,0 +1,172 @@
+name: 🚀 CI/CD
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    name: ⬣ ESLint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+
+      - name: Setup worker
+        uses: ./.github/actions/setup
+
+      - name: Lint
+        run: pnpm run lint
+
+  test:
+    name: 🧪 Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+
+      - name: Setup worker
+        uses: ./.github/actions/setup
+
+      - name: Testing
+        run: pnpm run test:coverage
+
+  typecheck:
+    name: ʦ TypeScript
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+
+      - name: Setup worker
+        uses: ./.github/actions/setup
+
+      - name: Type check
+        run: pnpm run typecheck
+
+  build:
+    name: 🏗️ Build
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+
+      - name: Setup worker
+        uses: ./.github/actions/setup
+
+      - name: Install Vercel CLI
+        run: pnpm install --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+  deploy:
+    name: 🚀 Deploy to Vercel
+    if: github.event_name != 'pull_request'
+    needs: [lint, typecheck, test]
+    runs-on: ubuntu-latest
+    permissions:
+      deployments: write
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+
+      - name: Setup worker
+        uses: ./.github/actions/setup
+
+      - name: Install Vercel CLI
+        run: pnpm install --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Delete deployment
+        uses: strumwolf/delete-deployment-environment@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment: Production
+          onlyRemoveDeployments: true
+
+      - name: Create GitHub deployment
+        uses: chrnorm/deployment-action@v2
+        id: deployment
+        with:
+          token: '${{ github.token }}'
+          environment-url: https://larsschieffer.de
+          environment: Production
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Update deployment status (success)
+        if: success()
+        uses: chrnorm/deployment-status@v2
+        with:
+          token: '${{ github.token }}'
+          environment-url: https://larsschieffer.de
+          state: 'success'
+          deployment-id: ${{ steps.deployment.outputs.deployment_id }}
+
+      - name: Update deployment status (failure)
+        if: failure()
+        uses: chrnorm/deployment-status@v2
+        with:
+          token: '${{ github.token }}'
+          environment-url: https://larsschieffer.de
+          state: 'failure'
+          deployment-id: ${{ steps.deployment.outputs.deployment_id }}
+
+  is-db-migration-required:
+    name: 🧪 Check for database migration
+    runs-on: ubuntu-latest
+    if: github.event_name != 'pull_request'
+    outputs:
+      is-required: ${{ steps.filter.outputs.database }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            database:
+              - './prisma/**'
+
+  db-migration:
+    name: 📀 Run database migration
+    runs-on: ubuntu-latest
+    needs: [is-db-migration-required, deploy]
+    if: github.event_name != 'pull_request' && needs.is-db-migration-required.outputs.is-required == 'true'
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4
+
+      - name: Setup worker
+        uses: ./.github/actions/setup
+
+      - name: Run database migrations
+        run: pnpm prisma migrate deploy
+        env:
+          POSTGRES_PRISMA_URL: ${{ secrets.POSTGRES_PRISMA_URL }}

.gitignore

@@ -0,0 +1,16 @@
+node_modules
+
+.cache
+.vercel
+.output
+
+/build/
+/public/build
+/api
+
+/config/*
+!/config/test.env
+
+/coverage
+
+.DS_Store

.husky/post-checkout

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm install

.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+shamefully-hoist=true
+engine-strict=true

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+public/build
+pnpm-lock.yaml

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
+};

README.md

@@ -0,0 +1 @@
+# My personal website

app/components/blog/blog-feedback.tsx

@@ -0,0 +1,15 @@
+import { getMDXComponent } from "mdx-bundler/client";
+import { useMemo } from "react";
+import type { BlogFeedbackProps } from "~/types/blog";
+
+export const BlogFeedback = ({ content }: BlogFeedbackProps): JSX.Element => {
+  const FeedbackContent = useMemo(() => getMDXComponent(content), [content]);
+
+  return (
+    <div className="[&_a:hover]:underline [&_a]:text-accent">
+      <FeedbackContent />
+    </div>
+  );
+};
+
+export default BlogFeedback;

app/components/blog/blog-frame.tsx

@@ -0,0 +1,17 @@
+import type { BlogFrameProps } from "~/types/blog";
+
+export const BlogFrame = ({
+  children,
+  alignment = "vertical",
+}: BlogFrameProps): JSX.Element => {
+  return (
+    <div
+      className={`grid ${
+        alignment === "vertical" ? "grid-flow-row grid-cols-1" : "grid-flow-col"
+      } my-4 justify-center gap-2`}
+    >
+      {children}
+    </div>
+  );
+};
+export default BlogFrame;

app/components/blog/blog-image.tsx

@@ -0,0 +1,7 @@
+import type { BlogImageProps } from "~/types/blog";
+
+export const BlogImage = ({ src, alt }: BlogImageProps): JSX.Element => {
+  return <img src={src} alt={alt} className="object-fit w-full" />;
+};
+
+export default BlogImage;