feat: add blockquote highlight and update some docs (#1)

* feat: Install remark-blockquote-alerts library

* docs: Update about page

* docs: add GitHub Actions integration guide

content/pages/about.mdx

@@ -1,8 +1,10 @@
 ---
-date: 2024-11-02T21:31:34+09:00
+date: 2024-11-17T16:12:24+09:00
 ---
-#### About Semantic
+#### About `semantic`
 
-Welcome to Semantic, the ultimate platform for creating a stunning, content-driven blog. Built with a focus on clean and semantic design, Semantic provides a seamless blogging experience with an emphasis on accessibility and modern web standards. Authored by Hak, Semantic allows you to showcase your writing and ideas in a way that’s both beautiful and intuitive.
+Welcome to `semantic`, the ultimate platform for building a clean, content-driven blog. Designed with a focus on modern web standards, accessibility, and semantic design, `semantic` delivers a seamless blogging experience that puts your content front and center.
 
-Explore the possibilities of building your own blog with ease, while ensuring that your content remains the star of the show. Whether you're a writer, creator, or enthusiast, Semantic has the tools to help you create a memorable online presence.
+Created by [Hak](https://github.com/ohprettyhak) and designed by [universa](https://github.com/thisuniversa), `semantic` empowers you to share your ideas and stories in a way that's not only visually appealing but also intuitive to navigate.
+
+Create your blog with ease and let your content take the spotlight. Whether you're a writer, creator, or enthusiast, `semantic` provides the tools to establish a compelling and memorable online presence.

content/posts/241117-automating-deployment-with-github-actions/post.mdx

@@ -0,0 +1,38 @@
+---
+slug: "automating-deployment-with-github-actions"
+title: "Automating Deployment with GitHub Actions"
+subtitle: "Automating `Semantic` Releases with GitHub Actions"
+publishDate: "2024-11-17T03:52:00.000Z"
+coverImage: "./cover.png"
+category: "Build"
+tag:
+  - "semantic"
+  - "blog"
+  - "gatsby.js"
+  - "github-action"
+  - "blog-deploy"
+---
+
+If you have cloned the `semantic` template, you will find the `.github/workflows/deploy.yml` file. By default, `semantic` uses GitHub Actions to generate build files in the `gh-pages` branch, which are then hosted via [GitHub Pages](https://pages.github.com/).
+
+> [!NOTE]
+> If you do not wish to deploy to GitHub Pages, simply delete the `.github/workflows/deploy.yml`.
+
+
+## Generating a GitHub Token
+
+When a commit is pushed to GitHub, GitHub Actions automatically triggers the build process. The built artifacts are then deployed to the `gh-pages` branch, which requires your personal access token.
+
+You can generate this token [here](https://github.com/settings/tokens) with the `repo` scope permissions. For simplicity and reliability, it is recommended to create a classic token without an expiration date. <ins>**Never share your token publicly.**</ins>
+
+
+## Adding the Token to Repository Secrets
+
+To use the token, it must be added to the repository's secrets. Navigate to **Settings → Secrets and variables → Actions** in your repository. Click **New repository secret** and add the token.
+
+> [!IMPORTANT]
+> Name the token `SEMANTIC_DEPLOY_TOKEN` when adding it to the repository secrets.
+
+
+## All Done!
+Once you've set up the secret, you're all set! To verify that the deployment works correctly, re-run the GitHub Action workflow.

gatsby-browser.ts

@@ -2,3 +2,4 @@ import '@/styles/animation.css';
 import '@/styles/code-highlight.css';
 import '@/styles/globals.css';
 import 'material-symbols/rounded.css';
+import 'remark-blockquote-alerts/styles/blockquote.min.css';

gatsby-config.ts

@@ -1,5 +1,6 @@
 import type { GatsbyConfig } from 'gatsby';
 import remarkGfm from 'remark-gfm';
+import remarkBlockquoteAlerts from 'remark-blockquote-alerts';
 
 import { metadata } from './src/constants/metadata';
 
@@ -60,7 +61,7 @@ const config: GatsbyConfig = {
           },
         ],
         mdxOptions: {
-          remarkPlugins: [remarkGfm],
+          remarkPlugins: [remarkGfm, remarkBlockquoteAlerts],
         },
       },
     },

gatsby-ssr.tsx

@@ -12,7 +12,6 @@ const colorThemeScript = `
       preferredTheme = newTheme;
       document.documentElement.setAttribute('data-theme', newTheme);
       document.documentElement.className = newTheme === 'dark' ? '${darkColors}' : '${lightColors}';
-      document.documentElement.setAttribute("data-color-scheme", newTheme === 'dark' ? "dark" : "light");
       window.__onThemeChange(newTheme);
     }
     var preferredTheme;

package.json

@@ -25,7 +25,7 @@
     "@vanilla-extract/css": "^1.16.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "framer-motion": "^11.11.11",
+    "motion": "^11.11.17",
     "gatsby": "^5.14.0",
     "gatsby-plugin-google-gtag": "^5.14.0",
     "gatsby-plugin-image": "^3.14.0",
@@ -41,6 +41,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "remark-blockquote-alerts": "^0.0.3",
     "remark-gfm": "^1.0.0",
     "unist-util-visit": "^2.0.3"
   },