feat: setup how-to site and build pdfs (#1)

* feat: add zh-CN view for example view

* feat: add fonts

* feat: add icon

* feat: add @vueuse/core dependency and update ExampleView to use computedAsync for markdown processing

* feat: add @page style

* refactor: simplify ExampleView header by removing dynamic style binding from h1

* feat: use how to use lookscanned as example pdf

* refactor: move to markdown content container

* feat: add title to page

* feat: integrate @unhead/vue for head management and add meta description to MarkdownContent component

* feat: make view like real paper

* refactor: move site title to individual file

* feat: enhance zh-CN.md with multi-page processing support and clarify local data handling

* refactor: replace ExampleView with HowToUseView and update routing

* feat: add en markdown

* fix: update font family in SiteTitle component from 'Noto Sans' to 'Noto Serif'

* refactor: move markdown to how to use folder

* docs: update README

* refactor: update MarkdownContent and SiteTitle components for improved structure and styling; enhance markdown documentation with consistent header levels

* refactor: wrap SiteTitle in RouterLink for improved navigation and add styling for link behavior

* feat: add home view

* chore: update page title in index.html from 'Vite App' to 'Look Scanned Examples'

* fix: fix page padding

* feat: add page controls and update font styling in App.vue

* feat: build pages to pdfs

* refactor: update PDF generation script to dynamically include languages from markdowns and change build command in package.json

* chore: update .gitignore to include public/pdfs directory and modify PDF output path in build-pdfs.ts script

* feat: add PDF download link to ThePageControls component

* style: justify text alignment for paragraphs in MarkdownContent component

* feat: add more langs how to use markdown

* feat: update font styles and add support for multiple languages in MarkdownContent component

* chore: enhance font loading in index.html and improve language display in HomeView.vue

* feat: add multiple favicon options and apple-touch-icon to enhance site branding

* feat: add headers for cloudflare pages

* feat: enhance language support and styling in locale and HomeView components

* fix: update font-family declarations in locale-font.css to include fallback 'Noto Serif' for better language support

* feat: enhance MarkdownContent component to support text direction based on language

* feat: add Git commit timestamp logging and update PDF metadata with commit time

* refactor: replace anchor tags with router-link in HomeView.vue for improved navigation

* feat: implement scroll behavior in router for improved navigation experience

* feat: add Git commit information to Vite config and include footer component in App.vue

* ci: add cloudflare and github pages ci

* fix: fix typo

* ci: add installation of system dependencies in CI workflow

* ci: add release please and deps auto merge

* chore: rename package and update setting in package.json

* docs: update README.md

* ci: install chrome before build pdfs

* ci: update Chrome installation command in CI workflow

* fix: update page title from "Look Scanned Examples" to "Look Scanned How To"

* chore: install husky and commit lint

* feat: add dark mode support and import darkmode styles

* ci: add npm publishing step to CI workflow for release events

* ci: add GPR publishing step to CI workflow

* ci: conditionally trigger GPR publishing step on release events

.github/dependabot.yml

@@ -0,0 +1,16 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'daily'
+
+  - package-ecosystem: 'github-actions' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'daily'

.github/workflows/ci.yml

@@ -0,0 +1,247 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install system dependencies
+        run: sudo apt-get update && sudo apt-get install -y exiftool mupdf-tools
+
+      - name: ESLint Check
+        run: pnpm run lint-check
+
+      - name: Format Check
+        run: pnpm run format-check
+
+      - name: TypeScript Check
+        run: pnpm run type-check
+
+      - name: Install Chrome
+        run: pnpm dlx puppeteer browsers install
+
+      - name: Build PDFs
+        run: pnpm run build:pdfs
+
+      - name: Run build
+        run: pnpm run build
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+  deploy-to-cloudflare-pages-staging:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+
+    environment:
+      name: cloudflare-pages-staging
+      url: ${{ steps.deployment.outputs.deployment-url }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        id: deployment
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy dist --project-name=how-to-lookscanned
+
+  deploy-to-cloudflare-pages:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    if: github.event_name == 'release'
+    environment:
+      name: cloudflare-pages
+      url: ${{ steps.deployment.outputs.deployment-url }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Deploy to Cloudflare Pages Release
+        uses: cloudflare/wrangler-action@v3
+        id: deployment
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy dist --project-name=how-to-lookscanned --branch=release
+
+  deploy-to-github-pages:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    if: github.event_name == 'release'
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: 'dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+  publish-to-npm:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    if: github.event_name == 'release'
+    environment:
+      name: npm
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Publish Assets
+        run: pnpm publish --provenance --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/deps-auto-merge.yml

@@ -0,0 +1,29 @@
+name: Dependabot auto-merge
+
+on: pull_request_target
+
+permissions:
+  contents: read
+  pull-requests: read
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+
+    if: github.event.pull_request.user.login == 'dependabot[bot]'
+
+    steps:
+      - name: Dependabot metadata
+        id: dependabot_metadata
+        uses: dependabot/[email protected]
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Authenticate cli with a PAT
+        run: echo "${{ secrets.DEPENDABOT_TOKEN }}" | gh auth login --with-token
+
+      - name: Enable auto-merge for Dependabot PRs
+        if: steps.dependabot_metadata.outputs.update-type == 'version-update:semver-minor' || steps.dependabot_metadata.outputs.update-type == 'version-update:semver-patch'
+        run: gh pr merge --auto --squash "$PR_URL"
+        env:
+          PR_URL: ${{ github.event.pull_request.html_url }}

.github/workflows/release-please.yml

@@ -0,0 +1,24 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: Release Please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: googleapis/release-please-action@v4
+        with:
+          # this assumes that you have created a personal access token
+          # (PAT) and configured it as a GitHub action secret named
+          # `MY_RELEASE_PLEASE_TOKEN` (this secret name is not important).
+          token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
+          # this is a built-in strategy in release-please, see "Action Inputs"
+          # for more options
+          release-type: node

.gitignore

@@ -28,3 +28,5 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+
+public/pdfs/

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.prettierignore

@@ -0,0 +1,2 @@
+CHANGELOG.md
+pnpm-lock.yaml

README.md

@@ -1,39 +1,16 @@
-# lookscanned-example-pdfs
+# Look Scanned How To
 
-This template should help get you started developing with Vue 3 in Vite.
+[![CI](https://github.com/lookscanned/how-to/actions/workflows/ci.yml/badge.svg)](https://github.com/lookscanned/how-to/actions/workflows/ci.yml)
 
-## Recommended IDE Setup
+[how-to.lookscanned.io](https://how-to.lookscanned.io)
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+This is a repository for the how-to-use documentation used in the Look Scanned project.
 
-## Type Support for `.vue` Imports in TS
+## How to add a new language
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+1. Add the corresponding markdown file to the `src/locales/how-to-use/markdowns` directory.
+2. Update the `src/locales/how-to-use/markdowns/index.ts` file to include the new markdown file.
 
-## Customize configuration
+## License
 
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-pnpm dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-pnpm build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-pnpm lint
-```
+MIT License

commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] }

env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+
+declare const __GIT_COMMIT__: string
+declare const __GIT_COMMIT_TIME__: number