Made it a little better

README.md

@@ -0,0 +1,11 @@
+# 4chads
+
+4chads is a browser addon / user script that seeks to make the experience browsing 4chan better, even though that is a hard mission.
+
+Features to come
+
+- [] JSON Index/Catalog view, supporting new sorting metods etc.
+- [] Image hovering
+- [] Thread monitoring 
+- [] Coustom board titleing
+- [] Filtering

src/Site/Catalog.css

@@ -7,7 +7,6 @@
     vertical-align: top;
     position: relative;
     margin: 2px;
-    left: calc(67px - .3px * var(width));
   }
   .teaser p {
     font-size: 13px;
@@ -19,3 +18,7 @@
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);
     vertical-align: top;
   }
+
+  .Top {
+    top: 0;
+  }

src/Site/Catalog.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import './Catalog.css';
+// Api types from the 4chan api docs
 interface Thread {
   no: number;
   replies: number;
@@ -21,13 +22,13 @@ interface Page {
 interface CatalogProps {
   boardID: string;
 }
-
+// Fetches the catalog data from the 4chan api
 const fetchCatalog = async (boardID: string): Promise<Page[]> => {
   const response = await fetch(`https://a.4cdn.org/${boardID}/catalog.json`);
   const data = await response.json();
   return data;
 };
-
+// Creates the json index for the catalog.
 const createThreadElement = (thread: Thread, boardID: string) => {
   const { no, replies, images, com, sub, tim, ext, tn_h, tn_w } = thread;
   const threadURL = `https://boards.4channel.org/${boardID}/thread/${no}`;
@@ -43,21 +44,24 @@ const createThreadElement = (thread: Thread, boardID: string) => {
         <b>I: {images} </b>
       </div>
       <div className="teaser">
-        <b dangerouslySetInnerHTML={{ __html: sub }} />
+        <b dangerouslySetInnerHTML={{ __html: sub ? sub + ':' : ''}} />
+        {sub && sub.length > 0 ? <br /> : null}
         <span dangerouslySetInnerHTML={{ __html: com }} />        
       </div>
     </div>
   );
 };
-
+// Renders the catalog
 const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
   const [catalog, setCatalog] = useState<Page[]>([]);
-
   useEffect(() => {
-    (async () => {
+    
+    const fetchCatalogData = async () => {
       const catalogData = await fetchCatalog(boardID);
       setCatalog(catalogData);
-    })();
+    };
+    
+    fetchCatalogData();
   }, [boardID]);
 
   return (

src/Site/Header.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface TopBarProps {
+  text: string;
+}
+
+const TopBar: React.FC<TopBarProps> = ({ text }) => {
+  return (
+    <div className='Top' style={{ height: '1px', backgroundColor: 'black' }}>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+export default TopBar;

src/main.tsx

@@ -1,13 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Catalog from './Catalog';
 import './index.css';
+import { render } from 'react-dom';
+
+// Importing components
+import Catalog from './Site/Catalog';
+import Header from './Site/Header';
+
+const root = document.createElement('div');
+root.id = '4chuds';
+document.body.appendChild(root);
 
-document.onchange = () => {
-  const target = document.querySelector('#threads');
 let currentUrl = window.location.href;
 let BoardID = currentUrl.split('/')[3];
-  if (target) {
-    ReactDOM.createRoot(target).render(<Catalog boardID={BoardID} />);
+
+//if (currentUrl == 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
+  render(
+    <div>
+      <Header text='Hello, World!' />
+      <Catalog boardID={BoardID}/>
+    </div>,
+    document.querySelector('#threads')
+  );
+//}
+
+if (currentUrl === 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
+  render(<Catalog boardID={BoardID} />, document.getElementById('id'));
 }
-};
+
+
+//render(<Header text='Hello, World!' />, document.createElement('div'));