initial commit

.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+tab_width = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.mdx]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1,5 @@
+* text=auto eol=lf
+
+*.jpg binary
+*.png binary
+*.ico binary

.github/composite-actions/cache-and-install/action.yaml

@@ -0,0 +1,38 @@
+name: Cache and Install
+description: Cache pnpm store and install dependencies
+
+runs:
+  using: composite
+
+  steps:
+    - name: Checkout
+      uses: actions/[email protected]
+
+    - name: Install Node.js
+      uses: actions/[email protected]
+      with:
+        node-version: 20
+
+    - uses: pnpm/[email protected]
+      name: Install pnpm
+      with:
+        version: 9.4.0
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      shell: bash
+      run: |
+        pnpm install

.github/workflows/ci.yaml

@@ -0,0 +1,22 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  ci:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Setup
+        uses: ./.github/composite-actions/cache-and-install
+
+      - name: CI
+        shell: bash
+        run: |
+          pnpm run check

.github/workflows/deploy.yaml

@@ -0,0 +1,31 @@
+name: Deploy
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true
+
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Setup
+        uses: ./.github/composite-actions/cache-and-install
+
+      - name: Build
+        shell: bash
+        run: pnpm run build
+
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/[email protected]
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy ./dist --project-name=front-end-tech-memo --env=production
+          packageManager: pnpm

.gitignore

@@ -0,0 +1,5 @@
+.git
+node_modules
+dist
+**/.DS_Store
+.astro

.prettierignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+node_modules

.prettierrc.yaml

@@ -0,0 +1,14 @@
+plugins:
+  - prettier-plugin-astro
+printWidth: 100
+semi: false
+singleQuote: true
+tabWidth: 2
+trailingComma: none
+useTabs: false
+overrides:
+  - files:
+      - '*.md'
+      - '*.mdx'
+    options:
+      printWidth: 80

astro.config.mjs

@@ -0,0 +1,150 @@
+import { defineConfig } from 'astro/config'
+import cloudflare from '@astrojs/cloudflare'
+
+import starlight from '@astrojs/starlight'
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  vite: {
+    ssr: {
+      external: ['node:url', 'node:path', 'node:child_process', 'node:fs', 'perf_hooks']
+    }
+  },
+  adapter: cloudflare({
+    runtime: {
+      mode: 'local'
+    }
+  }),
+  integrations: [
+    starlight({
+      title: "koralle's Front-End Tech Memo",
+      social: {
+        github: 'https://github.com/koralle/front-end-tech-memo',
+        twitter: 'https://twitter.com/koralle_tech',
+        'x.com': 'https://x.com/koralle_tech'
+      },
+      logo: {
+        src: './src/assets/logo.svg'
+      },
+      favicon: '/images/favicon.svg',
+      lastUpdated: true,
+      sidebar: [
+        {
+          label: 'Yamada UI',
+          autogenerate: {
+            directory: 'yamada-ui'
+          }
+        },
+        {
+          label: 'React',
+          autogenerate: {
+            directory: 'react'
+          }
+        },
+        {
+          label: 'UI/UX',
+          autogenerate: {
+            directory: 'uiux'
+          }
+        },
+        {
+          label: 'Next.js',
+          autogenerate: {
+            directory: 'nextjs'
+          }
+        },
+        {
+          label: 'Remix',
+          autogenerate: {
+            directory: 'remix'
+          }
+        },
+        {
+          label: 'Tanstack',
+          autogenerate: {
+            directory: 'tanstack'
+          }
+        },
+        {
+          label: 'TypeScript',
+          autogenerate: {
+            directory: 'typescript'
+          }
+        },
+        {
+          label: 'JavaScript',
+          autogenerate: {
+            directory: 'javascript'
+          }
+        },
+        {
+          label: 'Testing',
+          autogenerate: {
+            directory: 'testing'
+          }
+        },
+        {
+          label: 'Accessibility',
+          autogenerate: {
+            directory: 'accessibility'
+          }
+        },
+        {
+          label: 'HTML',
+          autogenerate: {
+            directory: 'html'
+          }
+        },
+        {
+          label: 'CSS',
+          autogenerate: {
+            directory: 'css'
+          }
+        },
+        {
+          label: 'npm',
+          autogenerate: {
+            directory: 'npm'
+          }
+        },
+        {
+          label: 'pnpm',
+          autogenerate: {
+            directory: 'pnpm'
+          }
+        },
+        {
+          label: 'Astro',
+          autogenerate: {
+            directory: 'astro'
+          }
+        },
+        {
+          label: 'Vue',
+          autogenerate: {
+            directory: 'vue'
+          }
+        },
+        {
+          label: 'Vite',
+          autogenerate: {
+            directory: 'vite'
+          }
+        },
+        {
+          label: 'Security',
+          autogenerate: {
+            directory: 'security'
+          }
+        },
+        {
+          label: 'Web',
+          autogenerate: {
+            directory: 'web'
+          }
+        },
+      ]
+    })
+  ]
+})

lefthook.yaml

@@ -0,0 +1,19 @@
+pre-commit:
+  piped: false
+  commands:
+    1_check:
+      run: pnpm lefthook run check
+
+check:
+  parallel: true
+  commands:
+    astro-check:
+      tags: Prettier
+      files: git diff --name-only HEAD
+      run: pnpm astro check
+
+    prettier-check:
+      tags: Prettier
+      glob: '**/*.{ts,tsx,js,jsx,json,md,mdx,astro}'
+      files: git diff --name-only HEAD
+      run: pnpm prettier -c {staged_files}

package.json

@@ -0,0 +1,45 @@
+{
+  "private": true,
+  "name": "front-end-tech-memo",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "[email protected]",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/koralle/front-end-tech-memo"
+  },
+  "homepage": "https://memo.koralle-mgmg.com",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro build && wrangler pages dev ./dist",
+    "astro": "astro",
+    "deploy": "astro build && wrangler pages deploy ./dist",
+    "check": "astro check && prettier -c .",
+    "fmt": "prettier --write .",
+    "build-cf-types": "wrangler types"
+  },
+  "dependencies": {
+    "@astro-community/astro-embed-link-preview": "^0.2.0",
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/cloudflare": "^11.0.1",
+    "@astrojs/starlight": "^0.24.4",
+    "astro": "^4.11.1",
+    "astro-embed": "^0.7.2",
+    "lite-youtube-embed": "^0.3.2",
+    "typescript": "^5.5.2"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240620.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-astro": "^0.14.0",
+    "wrangler": "^3.62.0"
+  },
+  "engines": {
+    "node": ">=20.15.0",
+    "pnpm": ">=9.4.0",
+    "npm": "please use pnpm!",
+    "yarn": "please use pnpm!"
+  }
+}