added buttons

quartz/components/Btn8831.tsx

@@ -0,0 +1,53 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import baseStyle from "./styles/footer.scss"
+import { useEffect, useState } from "preact/hooks"
+
+// Import the JSON data
+import buttonsData from "./buttons.json"
+
+export default (() => {
+  // Define the component
+  const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    // Since the data is static, you can directly use buttonsData
+    const [buttons, setButtons] = useState(buttonsData)
+
+    // Optional: If you need to perform any data manipulation or sorting, you can do it here
+    // For example, if buttonsData isn't sorted, but you need to sort it:
+    // useEffect(() => {
+    //   const sortedButtons = [...buttonsData].sort(/* your sorting function */);
+    //   setButtons(sortedButtons);
+    // }, []);
+
+    return (
+      <div class={`btn8831-container ${displayClass ?? ""}`}>
+        {buttons.map((button, index) => (
+          <a href={button.url} key={index}>
+            <img src={button.image} alt={button.alt} />
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  // Define custom styles
+  const customStyle = `
+    .btn8831-container {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 60%;
+      margin: 0 auto;
+    }
+    .btn8831-container a {
+      margin: 5px;
+    }
+    .btn8831-container img {
+      width: 88px;
+      height: 31px;
+    }
+  `
+
+  // Combine base styles with custom styles
+  Btn8831.css = baseStyle + customStyle
+
+  return Btn8831
+})() satisfies QuartzComponentConstructor

quartz/components/CustomFooter.tsx

@@ -1,6 +1,7 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import FooterLinksConstructor from "./Footer_links"
+import Btn8831 from "./Btn8831"
 
 interface Options {
   links: Record<string, string>
@@ -14,6 +15,7 @@ export default ((opts?: Options) => {
     return (
       <footer class={`${displayClass ?? ""}`}>
         <FooterLinks displayClass={displayClass} cfg={cfg} />
+        <Btn8831 displayClass={displayClass} cfg={cfg} />
       </footer>
     )
   }

quartz/components/buttons.json

@@ -0,0 +1,7 @@
+[
+  {
+    "image": "https://assets.derg.cz/buttons/theysosmall_by_liah.png",
+    "url": "https://smolderg.xyz",
+    "alt": ""They so small!" in large letters accompanied by an arrow pointing at a tiny dragon in the corner of the image, surrounded by the smaller bits of text "Wow!" "Look!" and "Pet them!""
+  }
+]

tsconfig.json

@@ -14,7 +14,7 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "types": ["preact"]  // Add this line
+    "types": ["preact"] // Add this line
   },
   "include": ["**/*.ts", "**/*.tsx", "./package.json"],
   "exclude": ["build/**/*.d.ts"],