Replace teaser with API

src/entries/contentScript/primary/Header.tsx

@@ -2,13 +2,15 @@ import React, { useState } from "react"
 import SettingsPopup from "./SettingsPopup"
 import $ from "jquery"
 
-interface HeaderBarProps {
-	board: string;
-}
 
-const Header: React.FC<HeaderBarProps> = () => {
-	const indexUrl = "https://boards.4chan.org/pol/"
-	const catalogUrl = "https://boards.4chan.org/pol/catalog"
+
+const Header = () => {
+	// Get the board name from the URL (e.g. /g/ or /pol/)
+	const board = window.location.pathname.split("/")[1]
+	// Get the URL for the index page of the board
+	const indexUrl = `https://boards.4chan.org/${board}/`
+	// Get the URL for the catalog page of the board
+	const catalogUrl = `https://boards.4chan.org/${board}/catalog`
 	const [settingsVisible, setSettingsVisible] = useState<boolean>(false)
 	// Remove the default header
 	$("#boardNavDesktop").remove()
@@ -16,6 +18,7 @@ const Header: React.FC<HeaderBarProps> = () => {
 	$("h4").remove()
 	$(".abovePostForm").remove()
 	$(".boardList").remove()
+	$("#boardNavMobile").remove()
 
 	const toggleSettingsPopup = () => {
 		setSettingsVisible(!settingsVisible)

src/entries/contentScript/primary/main.tsx

@@ -7,12 +7,16 @@ import "../../../index.css"
 import { initImageHovering } from "../image"
 import $ from "jquery"
 import Header from "./Header"
+import { Thread } from "~/types/thread"
+
+
+
 
 renderContent(import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS, (appRoot) => {
 	ReactDOM.createRoot(appRoot).render(
 		<React.StrictMode>
 			<App />
-			<Header board="pol" />
+			<Header />
 		</React.StrictMode>
 	)
 })
@@ -22,4 +26,27 @@ renderContent(import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS, (appRoot) => {
 $(document).ready(() => {
 	console.log("Document is ready!")
 	initImageHovering()
+	// Assume the 4chan API URL is like this
+	const apiUrl = "https://a.4cdn.org/{board}/catalog.json"
+
+	// Replace {board} with the actual board name
+	const boardName = window.location.pathname.split("/")[1]
+	const boardApiUrl = apiUrl.replace("{board}", boardName)
+
+	$.getJSON(boardApiUrl, (data) => {
+		const threads = data.flatMap((page: { threads: Thread[] }) => page.threads)
+		threads.forEach((thread: Thread) => {
+			const threadId = thread.no
+			const comment = thread.com
+
+			// Assuming each thread teaser has an id like `thread-{id}`
+			const threadTeaser = $(`#thread-${threadId} > .teaser`)
+			if (threadTeaser.length > 0) {
+				// Replace the teaser with the comment
+				threadTeaser.html(comment)
+				// Add css to the class "quote" and make the text green #789922
+				threadTeaser.find(".quote").css("color", "#789922")
+			}
+		})
+	})
 })

src/types/thread.d.ts

@@ -0,0 +1,25 @@
+export interface Thread {
+   no: number
+   sticky: number
+   closed: number
+   now: string
+   sub: string
+   com: string
+   filename: string
+   ext: string
+   w: number
+   h: number
+   tn_w: number
+   tn_h: number
+   tim: number
+   time: number
+   md5: string
+   fsize: number
+   resto: number
+   capcode: string
+   semantic_url: string
+   replies: number
+   images: number
+   unique_ips: number
+
+}