feat(content): the beauty of struggle

.github/workflows/codeql.yml

@@ -2,11 +2,11 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '15 9 * * 6'
+    - cron: "15 9 * * 6"
 
 jobs:
   analyze:
@@ -23,29 +23,29 @@ jobs:
       fail-fast: false
       matrix:
         include:
-        - language: javascript-typescript
-          build-mode: none
-       
+          - language: javascript-typescript
+            build-mode: none
+
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
 
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
+      - if: matrix.build-mode == 'manual'
+        shell: bash
+        run: |
+          echo 'If you are using a "manual" build mode for one or more of the' \
+            'languages you are analyzing, replace this with the commands to build' \
+            'your code, for example:'
+          echo '  make bootstrap'
+          echo '  make release'
+          exit 1
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: "/language:${{matrix.language}}"

README.md

@@ -1,16 +1,16 @@
 # SR24 ✨
+
 [![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)
 
 - **Framework**: [Astro](https://astro.build)
 - **Package Manager**: [Bun](https://bun.sh)
 - **Styling**: [@astrojs/tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/)
-- **Integrations**: 
-    - [@astrojs/react](https://docs.astro.build/en/guides/integrations-guide/react/)
-    - [@astrojs/vue](https://docs.astro.build/en/guides/integrations-guide/vue/)
-    - [@astrojs/vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/)
+- **Integrations**:
+  - [@astrojs/react](https://docs.astro.build/en/guides/integrations-guide/react/)
+  - [@astrojs/vue](https://docs.astro.build/en/guides/integrations-guide/vue/)
+  - [@astrojs/vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/)
 - **Database**: [Supabase](https://supabase.com/)
 - **Deployment**: [Vercel](https://vercel.com)
 - **License**: [MIT License](./LICENSE).
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/home)
-

astro.config.mjs

@@ -12,74 +12,98 @@ import react from "@astrojs/react";
 import { toString } from "hast-util-to-string";
 import { h } from "hastscript";
 import vue from "@astrojs/vue";
-import vercel from '@astrojs/vercel/serverless';
+import vercel from "@astrojs/vercel/serverless";
 
 /** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
 const astroExpressiveCodeOptions = {
-  themes: ["min-dark", "min-light"]
+  themes: ["min-dark", "min-light"],
 };
-const AnchorLinkIcon = h("svg", {
-  width: 20,
-  height: 20,
-  version: 1.1,
-  viewBox: "0 0 16 16",
-  xlmns: "http://www.w3.org/2000/svg"
-}, h("path", {
-  stroke:"white",
-  d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
-}));
-const createSROnlyLabel = text => {
+const AnchorLinkIcon = h(
+  "svg",
+  {
+    width: 20,
+    height: 20,
+    version: 1.1,
+    viewBox: "0 0 16 16",
+    xlmns: "http://www.w3.org/2000/svg",
+  },
+  h("path", {
+    stroke: "white",
+    d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z",
+  }),
+);
+const createSROnlyLabel = (text) => {
   const node = h("span.sr-only", `Section titled ${escape(text)}`);
   node.properties["is:raw"] = true;
   return node;
 };
 
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://yuxxeun.vercel.app",
-  output: 'server',
+  output: "server",
   experimental: {
-    serverIslands: true
+    serverIslands: true,
   },
   adapter: vercel({
-    webAnalytics: { enabled:true }
+    webAnalytics: { enabled: true },
   }),
   markdown: {
     remarkPlugins: [remarkReadingTime],
-    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, {
-      behavior: "prepend",
-      group: ({
-        tagName
-      }) => h(`div.heading-wrapper.level-${tagName}`, {
-        tabIndex: -1
-      }),
-      content: heading => [h(`span.anchor-icon`, {
-        ariaHidden: "true"
-      }, AnchorLinkIcon), createSROnlyLabel(toString(heading))],
-      headingProperties: {
-        className: ["anchor"]
-      },
-      properties: {
-        className: ["anchor-link mr-5"]
-      }
-    }]]
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "prepend",
+          group: ({ tagName }) =>
+            h(`div.heading-wrapper.level-${tagName}`, {
+              tabIndex: -1,
+            }),
+          content: (heading) => [
+            h(
+              `span.anchor-icon`,
+              {
+                ariaHidden: "true",
+              },
+              AnchorLinkIcon,
+            ),
+            createSROnlyLabel(toString(heading)),
+          ],
+          headingProperties: {
+            className: ["anchor"],
+          },
+          properties: {
+            className: ["anchor-link mr-5"],
+          },
+        },
+      ],
+    ],
   },
-  integrations: [(await import("astro-compress")).default({
-    CSS: false,
-    SVG: false
-  }), tailwind(), sitemap({
-      changefreq: 'weekly',
+  integrations: [
+    (await import("astro-compress")).default({
+      CSS: false,
+      SVG: false,
+    }),
+    tailwind(),
+    sitemap({
+      changefreq: "weekly",
       priority: 0.7,
-  }), expressiveCode(astroExpressiveCodeOptions), icon(), mdx(), react(), vue()],
+    }),
+    expressiveCode(astroExpressiveCodeOptions),
+    icon(),
+    mdx(),
+    react(),
+    vue(),
+  ],
   image: {
-    service: sharpImageService()
+    service: sharpImageService(),
   },
   vite: {
     plugins: [rawFonts([".ttf", ".woff", ".woff2"])],
     optimizeDeps: {
-      exclude: ["@resvg/resvg-js"]
-    }
+      exclude: ["@resvg/resvg-js"],
+    },
   },
 });
 
@@ -88,13 +112,13 @@ function rawFonts(ext) {
   return {
     name: "vite-plugin-raw-fonts",
     transform(_, id) {
-      if (ext.some(e => id.endsWith(e))) {
+      if (ext.some((e) => id.endsWith(e))) {
         const buffer = readFileSync(id);
         return {
           code: `export default ${JSON.stringify(buffer)}`,
-          map: null
+          map: null,
         };
       }
-    }
+    },
   };
-}
+}

package.json

@@ -52,6 +52,7 @@
     "fuse.js": "^7.0.0",
     "hast-util-to-string": "^3.0.0",
     "hastscript": "^9.0.0",
+    "jquery": "^3.7.1",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",

src/components/Book.vue

@@ -3,29 +3,33 @@
     <div v-if="loading" class="mt-10 text-center">Loading...</div>
     <div v-else-if="error">Error: {{ error }}</div>
     <div v-else>
-        <ul>
-            <li v-for="item in data" :key="item.id" class="mt-10 animate-fade-up animate-once animate-duration-1000 animate-ease-linear">
-                    <h1 class="text-black dark:text-white text-lg font-bold">
-                       <a :href="item.link" target="_blank" :title="item.link">
-                        {{ item.title }}
-                       </a>
-                    </h1>
-                    <p class="text-lg font-newsreader">
-                      <span class="italic">from: </span>
-                      <span class="">{{ item.author }}</span>
-                    </p>
-                    <p class="text-sm font-newsreader italic">
-                        {{ item.time }}
-                    </p>
-            </li>
-        </ul>
+      <ul>
+        <li
+          v-for="item in data"
+          :key="item.id"
+          class="mt-10 animate-fade-up animate-duration-1000 animate-once animate-ease-linear"
+        >
+          <h1 class="text-lg font-bold text-black dark:text-white">
+            <a :href="item.link" target="_blank" :title="item.link">
+              {{ item.title }}
+            </a>
+          </h1>
+          <p class="font-newsreader text-lg">
+            <span class="italic">from: </span>
+            <span class="">{{ item.author }}</span>
+          </p>
+          <p class="font-newsreader text-sm italic">
+            {{ item.time }}
+          </p>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
-import { supabase } from '../utils/supabase';
+import { defineComponent, ref, onMounted } from "vue";
+import { supabase } from "../utils/supabase";
 
 interface DataItem {
   id: number;
@@ -36,7 +40,7 @@ interface DataItem {
 }
 
 export default defineComponent({
-  name: 'Bookmark',
+  name: "Bookmark",
   setup() {
     const data = ref<DataItem[]>([]);
     const loading = ref(true);
@@ -45,8 +49,8 @@ export default defineComponent({
     onMounted(async () => {
       try {
         const { data: supabaseData, error: supabaseError } = await supabase
-          .from('books')
-          .select('id, title, author, time, link');
+          .from("books")
+          .select("id, title, author, time, link");
 
         if (supabaseError) throw supabaseError;