feat: fix lint error

Author: llccing

.eslintrc.js

@@ -17,6 +17,9 @@ module.exports = {
         parser: "@typescript-eslint/parser",
         extraFileExtensions: [".astro"],
       },
+      globals: {
+        dataLayer: "readonly",
+      },
       rules: {},
     },
   ],

package-lock.json

@@ -38,6 +38,7 @@
     "@divriots/jampack": "^0.23.2",
     "@tailwindcss/typography": "^0.5.10",
     "@types/github-slugger": "^1.3.0",
+    "@types/howler": "^2.2.12",
     "@types/react": "^18.2.48",
     "@typescript-eslint/parser": "^6.19.0",
     "astro-eslint-parser": "^0.16.2",

package.json

@@ -2,8 +2,10 @@
 <script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-1X5E9W6VJ2"></script>
 <script is:inline>
   window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
+  function gtag() {
+    window.dataLayer.push(arguments);
+  }
+  gtag("js", new Date());
 
-  gtag('config', 'G-1X5E9W6VJ2');
+  gtag("config", "G-1X5E9W6VJ2");
 </script>

src/components/GoogleAnalytics.astro

@@ -1,7 +1,14 @@
 import type { APIRoute } from "astro";
 import { generateOgImageForSite } from "@utils/generateOgImages";
 
-export const GET: APIRoute = async () =>
-  new Response(await generateOgImageForSite(), {
+export const GET: APIRoute = async () => {
+  const imageBuffer = await generateOgImageForSite();
+  const body = imageBuffer.buffer.slice(
+    imageBuffer.byteOffset,
+    imageBuffer.byteOffset + imageBuffer.byteLength
+  );
+
+  return new Response(body, {
     headers: { "Content-Type": "image/png" },
   });
+};

src/pages/og.png.ts

@@ -14,7 +14,16 @@ export async function getStaticPaths() {
   }));
 }
 
-export const GET: APIRoute = async ({ props }) =>
-  new Response(await generateOgImageForPost(props as CollectionEntry<"blog">), {
+export const GET: APIRoute = async ({ props }) => {
+  const imageBuffer = await generateOgImageForPost(
+    props as CollectionEntry<"blog">
+  );
+  const body = imageBuffer.buffer.slice(
+    imageBuffer.byteOffset,
+    imageBuffer.byteOffset + imageBuffer.byteLength
+  );
+
+  return new Response(body, {
     headers: { "Content-Type": "image/png" },
   });
+};

src/pages/posts/[slug]/index.png.ts

@@ -7,7 +7,7 @@ import { defaultCategoryId, radioLibrary } from "./radio-data";
 
 <!-- eslint-disable -->
 <Layout title="Radio">
-  <Main>
+  <Main pageTitle="Radio" pageDesc="Listen back to book recordings">
     <RadioPlayer
       client:load
       categories={radioLibrary}

src/pages/radio/index.astro

@@ -16,7 +16,7 @@ import { ALL_COMPANY } from "./company-data";
     </nav>
 
     <div class="mt-8">
-      <h3 id="sesson1">欧洲公司</h3>
+      <h3 id="session1">欧洲公司</h3>
       {
         ALL_COMPANY.filter(item => item.tag.includes("eu")).map((item, idx) => (
           <div class="border-b border-gray-200 p-2">
@@ -29,7 +29,7 @@ import { ALL_COMPANY } from "./company-data";
             <div class="flex gap-4">
               {item.link ? (
                 <div class="flex">
-                  <div class="pr-2">link => </div>
+                  <div class="pr-2">link =&gt; </div>
                   <div>
                     <a
                       href={item.link}
@@ -44,7 +44,7 @@ import { ALL_COMPANY } from "./company-data";
 
               {item.boss ? (
                 <div class="flex">
-                  <div class="pr-2">Bosses=> </div>
+                  <div class="pr-2">Bosses =&gt; </div>
                   <div>
                     {item.boss.map((itemBoss, itemIdx) => (
                       <a
@@ -98,7 +98,7 @@ import { ALL_COMPANY } from "./company-data";
 </Layout>
 
 <script is:inline>
-  document.addEventListener("DOMContentLoaded", _event => {
+  document.addEventListener("DOMContentLoaded", () => {
     const searchInput = document.getElementById("searchInput");
     const companyList = document.getElementById("companyList");
     const companies = companyList.querySelectorAll("div");