Merge pull request #15 from dc7devs/develop

develop
dc7devs · May 15, 2024 · 119e5fc · 119e5fc
2 parents 3cf1935 + bcee289
commit 119e5fc
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 255 deletions.
diff --git a/.github/workflows/cd_preview.yml b/.github/workflows/cd_preview.yml
@@ -7,7 +7,7 @@ env:
 on:
     push:
       branches:
-        - dev
+        - develop
 jobs:
     call-sync-main:
         name: Call sync-main-branch.yml

diff --git a/.github/workflows/sync-dev-branch.yml b/.github/workflows/sync-dev-branch.yml
@@ -1,46 +1,23 @@
-name: 'Sync dev branch'
+name: 'Sync develop branch'
 
 on:
   workflow_call:
   workflow_dispatch:
 
 jobs:
-  create-sync-pr:
+  rebase-to-dev:
+    name: Rebase to develop
     runs-on: ubuntu-latest
-    name: Sync dev branch
-
-    outputs:
-      PULL_REQUEST_NUMBER: ${{ steps.pull.outputs.PULL_REQUEST_NUMBER }}
-
     steps:
-      - name: Checkout
+      - name: Checkout repository
         uses: actions/checkout@v4
-
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.13.x
-
-      - name: Opening pull request
-        id: pull
-        uses: tretuna/[email protected]
         with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          FROM_BRANCH: "main"
-          TO_BRANCH: "dev"
-          PULL_REQUEST_TITLE: "chore(git): merge `main` into `dev`"
-          CONTENT_COMPARISON: true
-
-  add-automerge-label:
-    runs-on: ubuntu-latest
-    name: Add "automerge" label
-    needs: create-sync-pr
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Add "automerge" label
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PULL_REQUEST_NUMBER: ${{needs.create-sync-pr.outputs.PULL_REQUEST_NUMBER}}
-        run: gh pr edit $PULL_REQUEST_NUMBER --add-label automerge
+          ref: 'develop'
+      - name: Setup git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+      - name: Fetch Main
+        run: git fetch origin main:main
+      - name: Rebase to develop
+        run: git rebase main && git push
diff --git a/.github/workflows/sync-main -branch.yml b/.github/workflows/sync-main -branch.yml
@@ -0,0 +1,46 @@
+name: 'Sync main branch'
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  create-sync-pr:
+    runs-on: ubuntu-latest
+    name: Sync main branch
+
+    outputs:
+      PULL_REQUEST_NUMBER: ${{ steps.pull.outputs.PULL_REQUEST_NUMBER }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.13.x
+
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          FROM_BRANCH: "develop"
+          TO_BRANCH: "main"
+          PULL_REQUEST_TITLE: "chore(git): merge `develop` into `main`"
+          CONTENT_COMPARISON: true
+
+  add-automerge-label:
+    runs-on: ubuntu-latest
+    name: Add "automerge" label
+    needs: create-sync-pr
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Add "automerge" label
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PULL_REQUEST_NUMBER: ${{needs.create-sync-pr.outputs.PULL_REQUEST_NUMBER}}
+        run: gh pr edit $PULL_REQUEST_NUMBER --add-label automerge
diff --git a/.github/workflows/sync-main-branch.yml b/.github/workflows/sync-main-branch.yml
diff --git a/app/article/page.tsx b/app/article/page.tsx
diff --git a/content/projects/dcdevs/index.mdx b/content/projects/dcdevs/index.mdx
@@ -18,97 +18,4 @@ repository: "https://github.com/dc7devs/dcdevs.me"
 deployment: "https://dcdevs-me.vercel.app"
 ---
 
-I recently replaced the logo on the top left corner with an animated SVG:
-
-[image]
-
-## Inspiration
-
-The first time I saw such stroke animations in SVG is the [Material Line Icons](https://icones.js.org/collection/line-md) by [Vjacheslav Trushkin](https://github.com/cyberalien). It was cool, but I never thought about making one my own until I saw [Mu-An Chiou](https://muan.co/)'s [banner](https://muan.co/pages/banners) on her website. I suddenly feel like I want to be the cool guy too!
-
-## Breakdown
-
-I downloaded Mu-An's SVG to read the code, cross-referencing the Material Line Icons. I found the trick is quite interesting, they animated `stroke-dasharray` to achieve the effect. This feels quite unintuitive as when you check the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray), it looks like a pretty boring attribute.
-
-I searched a bit more and found these two interesting articles:
-
-- [Animated line drawing in SVG](https://jakearchibald.com/2013/animated-line-drawing-svg/) by Jake Archibald
-- [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/) by Chris Coyier
-
-They covered this technique very well, highly recommend reading them if you are interested. Basically, the animation is done by a **very long** dash moving, in which you will see the dash as the drawing line and the gap as empty space. The length and position of the dash are controlled by `stroke-dasharray` and `stroke-dashoffset`, which are both animatable.
-
-## The Original Logo
-
-My original logo <a href="/logo.svg" target="_blank" ><img src="/logo.svg" alt="My Logo in SVG" /></a> comes from around 8 years ago, I draw it with a pressure-sensitive pen on my Surface Pro 4. It was used as a temporary placeholder for the portfolio I was trying to build at that time. I later image-traced it with Adobe Illustrator to get the SVG version. Surprising to recall, it has been so long since then.
-
-<div>
-<img src="/images/animated-svg-logo-vector.png" />
-</div>
-
-## Rework the Logo
-
-As we see, the animation is done by moving the dash on strokes, while my Logo is a vector outline with multiple control points. So I need to redraw it with a single stroke. It took a bit of practice to get used to the [pen tool](https://blog.openreplay.com/using-the-pen-tool-in-figma/), I managed to make it with Figma.
-
-<div>
-<img src="/images/animated-svg-logo-redraw.png" />
-</div>
-
-Manually adding the styles in the exported SVG,
-
-```css
-@media (prefers-reduced-motion) {
-  path {
-    animation: none !important;
-    stroke-dasharray: unset !important;
-  }
-}
-@keyframes grow {
-  0% {
-    stroke-dashoffset: 1px;
-    stroke-dasharray: 0 350px;
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  40% {
-    stroke-dasharray: 350px 0;
-  }
-  /* Moving back */
-  85% {
-    stroke-dasharray: 350px 0;
-  }
-  95%,
-  to {
-    stroke-dasharray: 0 350px;
-  }
-}
-path {
-  stroke-dashoffset: 1px;
-  stroke-dasharray: 350px 0;
-  animation: grow 10s ease forwards infinite;
-  transform-origin: center;
-  stroke: #303030;
-  animation-delay: 0s;
-}
-```
-
-now we have a decent animated logo:
-
-[image]
-
-The only downside is that the stroke is evenly thick everywhere, making it looks less like a signature. I tried to look for solutions and end up with the [Variable width stroke proposal](https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke), however, it does not seem to be going anywhere. Well, it's stroke anyway, it's supposed to be even. Giving the animation is super cool already, what else can I ask for?
-
-## Variable Stroke Width
-
-When I almost gave up, I was playing around with Figma to do some final cleanup with the drafts, I suddenly realized that SVG does have mask support. So what if I have the original SVG shape as the mask, and let the stroke animate inside the mask? So I gave it a try and surprisingly it works!
-
-<div>
-<img src="/images/animated-svg-logo-mask.png" />
-</div>
-
-Basically we are using the mask to limit the stroke's visibility, a trick to workaround the limitation of the stroke width. Note it's not 100% pixel-perfect, as in the interaction we can't control the stroke width, so the stroke will be a bit off the mask. We can try to adjust the mask to make it look a bit better, but you will still see a big glitch when zooming in a lot. I guess it might be possible to solve this with multiple strokes and masks, but this one is already quite good to me.
-
-[image]
-
-Hope you enjoy the article, and I'd love to see your animated SVG logo too!
+No content yet.
diff --git a/content/projects/ui-notion/index.mdx b/content/projects/ui-notion/index.mdx
@@ -18,97 +18,4 @@ repository: "https://github.com/dc7devs/ui-notion.so"
 deployment: "https://ui-notion.vercel.app/"
 ---
 
-I recently replaced the logo on the top left corner with an animated SVG:
-
-[image]
-
-## Inspiration
-
-The first time I saw such stroke animations in SVG is the [Material Line Icons](https://icones.js.org/collection/line-md) by [Vjacheslav Trushkin](https://github.com/cyberalien). It was cool, but I never thought about making one my own until I saw [Mu-An Chiou](https://muan.co/)'s [banner](https://muan.co/pages/banners) on her website. I suddenly feel like I want to be the cool guy too!
-
-## Breakdown
-
-I downloaded Mu-An's SVG to read the code, cross-referencing the Material Line Icons. I found the trick is quite interesting, they animated `stroke-dasharray` to achieve the effect. This feels quite unintuitive as when you check the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray), it looks like a pretty boring attribute.
-
-I searched a bit more and found these two interesting articles:
-
-- [Animated line drawing in SVG](https://jakearchibald.com/2013/animated-line-drawing-svg/) by Jake Archibald
-- [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/) by Chris Coyier
-
-They covered this technique very well, highly recommend reading them if you are interested. Basically, the animation is done by a **very long** dash moving, in which you will see the dash as the drawing line and the gap as empty space. The length and position of the dash are controlled by `stroke-dasharray` and `stroke-dashoffset`, which are both animatable.
-
-## The Original Logo
-
-My original logo <a href="/logo.svg" target="_blank" ><img src="/logo.svg" alt="My Logo in SVG" /></a> comes from around 8 years ago, I draw it with a pressure-sensitive pen on my Surface Pro 4. It was used as a temporary placeholder for the portfolio I was trying to build at that time. I later image-traced it with Adobe Illustrator to get the SVG version. Surprising to recall, it has been so long since then.
-
-<div>
-<img src="/images/animated-svg-logo-vector.png" />
-</div>
-
-## Rework the Logo
-
-As we see, the animation is done by moving the dash on strokes, while my Logo is a vector outline with multiple control points. So I need to redraw it with a single stroke. It took a bit of practice to get used to the [pen tool](https://blog.openreplay.com/using-the-pen-tool-in-figma/), I managed to make it with Figma.
-
-<div>
-<img src="/images/animated-svg-logo-redraw.png" />
-</div>
-
-Manually adding the styles in the exported SVG,
-
-```css
-@media (prefers-reduced-motion) {
-  path {
-    animation: none !important;
-    stroke-dasharray: unset !important;
-  }
-}
-@keyframes grow {
-  0% {
-    stroke-dashoffset: 1px;
-    stroke-dasharray: 0 350px;
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  40% {
-    stroke-dasharray: 350px 0;
-  }
-  /* Moving back */
-  85% {
-    stroke-dasharray: 350px 0;
-  }
-  95%,
-  to {
-    stroke-dasharray: 0 350px;
-  }
-}
-path {
-  stroke-dashoffset: 1px;
-  stroke-dasharray: 350px 0;
-  animation: grow 10s ease forwards infinite;
-  transform-origin: center;
-  stroke: #303030;
-  animation-delay: 0s;
-}
-```
-
-now we have a decent animated logo:
-
-[image]
-
-The only downside is that the stroke is evenly thick everywhere, making it looks less like a signature. I tried to look for solutions and end up with the [Variable width stroke proposal](https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke), however, it does not seem to be going anywhere. Well, it's stroke anyway, it's supposed to be even. Giving the animation is super cool already, what else can I ask for?
-
-## Variable Stroke Width
-
-When I almost gave up, I was playing around with Figma to do some final cleanup with the drafts, I suddenly realized that SVG does have mask support. So what if I have the original SVG shape as the mask, and let the stroke animate inside the mask? So I gave it a try and surprisingly it works!
-
-<div>
-<img src="/images/animated-svg-logo-mask.png" />
-</div>
-
-Basically we are using the mask to limit the stroke's visibility, a trick to workaround the limitation of the stroke width. Note it's not 100% pixel-perfect, as in the interaction we can't control the stroke width, so the stroke will be a bit off the mask. We can try to adjust the mask to make it look a bit better, but you will still see a big glitch when zooming in a lot. I guess it might be possible to solve this with multiple strokes and masks, but this one is already quite good to me.
-
-[image]
-
-Hope you enjoy the article, and I'd love to see your animated SVG logo too!
+No content yet.