Add local deployment to CloudFlare Pages

the-illarionov · the-illarionov · commit 6c30438a05e3 · 2024-04-17T06:39:23.000+09:00
diff --git a/.ci/.env.example b/.ci/.env.example
@@ -0,0 +1,3 @@
+NODE_IMAGE="node:20"
+CLOUDFLARE_ACCOUNT_ID="example"
+CLOUDFLARE_API_TOKEN="example"
diff --git a/.ci/Taskfile.yaml b/.ci/Taskfile.yaml
@@ -0,0 +1,59 @@
+version: '3'
+
+dotenv: [.env]
+
+tasks:
+  env:
+    desc: makes .env from .env.example
+    cmds:
+      - cp .env.example .env
+
+  lint:
+    cmds:
+      - |
+        docker run \
+          --rm \
+          -w /app \
+          -v $(pwd)/..:/app \
+          $NODE_IMAGE /bin/bash -c "yarn lint"
+
+  test:
+    desc: runs unit tests of lib
+    cmds:
+      - |
+        docker run --user {{.MY_UID}}:{{.MY_GID}} \
+          -v $(pwd)/../lib:/app \
+          -w /app \
+          $NODE_IMAGE \
+          yarn test:unit
+
+  build:
+    desc: creates production build of docs
+    cmds:
+      - |
+        docker run \
+          --rm \
+          -w /app/docs \
+          -v $(pwd)/../docs:/app/docs \
+          -v $(pwd)/../lib:/app/lib \
+          $NODE_IMAGE /bin/bash -c "yarn build"
+
+  deploy:pages:
+    desc: deploy to CloudFlare pages
+    cmds:
+      - |
+        docker run --user $(id -u):$(id -g) \
+        --rm \
+        -w /app \
+        -v $(pwd)/../docs:/app \
+        -e CLOUDFLARE_ACCOUNT_ID \
+        -e CLOUDFLARE_API_TOKEN \
+        $NODE_IMAGE yarn deploy
+
+  deploy:
+    desc: Lints, tests, builds and deploys to CloudFlare pages
+    cmds:
+      - task lint
+      - task test
+      - task build
+      - task deploy:pages
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 test-results/
-playwright-report/
+playwright-report/
+.wrangler
diff --git a/docs/index.html b/docs/index.html
@@ -8,6 +8,11 @@
       name="title"
       content="The Supersonic Plugin For Scroll Based Animation"
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://the-illarionov.com/style.css"
+    />
     <title>The Supersonic Plugin For Scroll Based Animation</title>
     <style>
       .iframe-wrapper {
@@ -53,7 +58,7 @@
     </style>
   </head>
   <body>
-    <h1>1. Basic example</h1>
+    <h1>1. Basic exampleq</h1>
     <div class="iframe-wrapper">
       <iframe
         title="The Supersonic Plugin For SCroll Based Animation: Basic Example"
@@ -264,7 +269,7 @@ <h1>10. Using driver hooks to animate custom element</h1>
       <iframe
         style="height: 80vh"
         scrolling="no"
-        title="Untitled"
+        title="The Supersonic Plugin For Scroll Based Animation: Using driver hooks to animate custom element"
         src="https://codepen.io/Alex-Illarionov/embed/yLrqGQg?default-tab=result"
         frameborder="no"
         loading="lazy"
@@ -273,7 +278,10 @@ <h1>10. Using driver hooks to animate custom element</h1>
         data-test="example-10"
       >
         See the Pen
-        <a href="https://codepen.io/Alex-Illarionov/pen/yLrqGQg"> Untitled</a>
+        <a href="https://codepen.io/Alex-Illarionov/pen/yLrqGQg"
+          >The Supersonic Plugin For Scroll Based Animation: Using driver hooks
+          to animate custom element</a
+        >
         by Alex Illarionov (<a href="https://codepen.io/Alex-Illarionov"
           >@Alex-Illarionov</a
         >) on <a href="https://codepen.io">CodePen</a>.
diff --git a/docs/package.json b/docs/package.json
@@ -9,12 +9,14 @@
     "preview": "vite preview --port=80 --host",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:report": "playwright show-report --host 0.0.0.0 --port 8000"
+    "test:e2e:report": "playwright show-report --host 0.0.0.0 --port 8000",
+    "deploy": "wrangler pages deploy dist --project-name=the-supersonic-plugin-for-scroll-based-animation --branch=main"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
     "postcss": "^8.4.38",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "wrangler": "^3.50.0"
   }
 }
diff --git a/docs/yarn.lock b/docs/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+NODE_IMAGE="node:20"`
	`2`	`+CLOUDFLARE_ACCOUNT_ID="example"`
	`3`	`+CLOUDFLARE_API_TOKEN="example"`