Made changes on site loading

2023-03-22 04:47:54 +01:00 · 2023-03-22 04:47:54 +01:00 · 07f62dd96b
commit 07f62dd96b
parent f3873bb48c
7 changed files with 81 additions and 58 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -885,9 +885,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001468",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz",
-      "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==",
+      "version": "1.0.30001469",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
+      "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
      "dev": true,
      "funding": [
        {
@ -1051,9 +1051,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.333",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
-      "integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==",
+      "version": "1.4.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
+      "integrity": "sha512-laZ1odk+TRen6q0GeyQx/JEkpD3iSZT7ewopCpKqg9bTjP1l8XRfU3Bg20CFjNPZkp5+NDBl3iqd4o/kPO+Vew==",
      "dev": true
    },
    "node_modules/entities": {
@ -1539,9 +1539,9 @@
      }
    },
    "node_modules/systemjs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.0.tgz",
-      "integrity": "sha512-OMf+kFCYG9fLQerUyw/QVIPfZ+lo579R+usrDzSrZAkvMl6B0tHtc4rUP7DFaPCr7Sy6p5DYD4V9OCF1Sp6+vA==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
+      "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
      "dev": true
    },
    "node_modules/to-fast-properties": {
@ -2235,9 +2235,9 @@
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30001468",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz",
-      "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==",
+      "version": "1.0.30001469",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
+      "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
      "dev": true
    },
    "chalk": {
@ -2352,9 +2352,9 @@
      }
    },
    "electron-to-chromium": {
-      "version": "1.4.333",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
-      "integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==",
+      "version": "1.4.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
+      "integrity": "sha512-laZ1odk+TRen6q0GeyQx/JEkpD3iSZT7ewopCpKqg9bTjP1l8XRfU3Bg20CFjNPZkp5+NDBl3iqd4o/kPO+Vew==",
      "dev": true
    },
    "entities": {
@ -2688,9 +2688,9 @@
      "dev": true
    },
    "systemjs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.0.tgz",
-      "integrity": "sha512-OMf+kFCYG9fLQerUyw/QVIPfZ+lo579R+usrDzSrZAkvMl6B0tHtc4rUP7DFaPCr7Sy6p5DYD4V9OCF1Sp6+vA==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
+      "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
      "dev": true
    },
    "to-fast-properties": {
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,18 @@
+import React from 'react';
+import Header from './Site/Header';
+import Catalog from './Site/Catalog';
+import ReactDOM  from 'react-dom';
+let App = () => {
+    let currentUrl = window.location.href;
+    let BoardID = currentUrl.split('/')[3];
+    const threadsElement = document.querySelector('#threads.extended-small');
+    if (threadsElement) {
+        ReactDOM.render(<Catalog boardID={BoardID} />, threadsElement);
+    }
+    return (
+        <div>
+            <Header text="Hello, World!" />
+        </div>
+    );
+};
+export default App;
--- a/src/Site/Catalog.css
+++ b/src/Site/Catalog.css
@ -19,6 +19,17 @@
    vertical-align: top;
  }

-  .Top {
+  .Top-Header {
+    position: fixed;
    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: '50px'; 
+    background-color: brown;
+    color: 'white';
+    z-index: 1000;
+  }
+  .Top-Header p {
+    color: white;
+    text-align: center;
  }
--- a/src/Site/Catalog.tsx
+++ b/src/Site/Catalog.tsx
@ -29,10 +29,16 @@ const fetchCatalog = async (boardID: string): Promise<Page[]> => {
  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 createThreadElement = (thread: Thread, boardID: string,) => {
+  const { no, images, com, sub, tim, ext, tn_h, tn_w } = thread;
  const threadURL = `https://boards.4channel.org/${boardID}/thread/${no}`;
-  const imgSrc = `https://i.4cdn.org/${boardID}/${tim}${ext}`;
+  // if ext is .webm or gif, show the thumbnail instead.
+  let imgSrc;
+  if (ext === '.webm' || ext === '.gif') {
+    imgSrc = `https://i.4cdn.org/${boardID}/${tim}s.jpg`;
+  } else {
+    imgSrc = `https://i.4cdn.org/${boardID}/${tim}${ext}`;
+  }
  const ratio = 150 / Math.max(tn_w, tn_h);
  return (
    <div key={`thread-${no}`} id={`thread-${no}`} className="thread">
@ -40,7 +46,7 @@ const createThreadElement = (thread: Thread, boardID: string) => {
      <img id={`thumb-${no}`} src={imgSrc} data-height={tn_h} data-width={tn_w} style={{width: `${tn_w * ratio}px`, height: `${tn_h * ratio}px`}} alt={`Thumbnail for thread ${no}`} />
      </a>
      <div id={`meta-${no}`} className="meta" title="(R)eplies / (I)mage Replies">
-        <b>R: {replies} </b>
+        <b>P: {} </b>
        <b>I: {images} </b>
      </div>
      <div className="teaser">
@ -55,7 +61,6 @@ const createThreadElement = (thread: Thread, boardID: string) => {
 const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
  const [catalog, setCatalog] = useState<Page[]>([]);
  useEffect(() => {
-    
    const fetchCatalogData = async () => {
      const catalogData = await fetchCatalog(boardID);
      setCatalog(catalogData);
@ -64,13 +69,15 @@ const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
    fetchCatalogData();
  }, [boardID]);

+// Renders on document.querySelector('#threads')
  return (
-    <div className="catalog-container">
-      {catalog.map((page) => 
-        page.threads.map((thread) => createThreadElement(thread, boardID)),
-      )}
+    <div id="threads">
+      {catalog.map((page, index) => (
+        <div key={`page-${index}`} id={`page-${index}`} className="page">
+          {page.threads.map((thread) => createThreadElement(thread, boardID))}
+        </div>
+      ))}
    </div>
  );
 };
-
 export default Catalog;
--- a/src/Site/Header.tsx
+++ b/src/Site/Header.tsx
@ -5,11 +5,11 @@ interface TopBarProps {
 }

 const TopBar: React.FC<TopBarProps> = ({ text }) => {
+  // Make at the top of the page
  return (
-    <div className='Top' style={{ height: '1px', backgroundColor: 'black' }}>
+    <div className='Top-Header'>
      <p>{text}</p>
    </div>
  );
 };
-
 export default TopBar;
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,32 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { render } from 'react-dom';

 // Importing components
-import Catalog from './Site/Catalog';
-import Header from './Site/Header';
-
+import App from './App';
+ReactDOM.createRoot(
+  (() => {
    const root = document.createElement('div');
-root.id = '4chuds';
-document.body.appendChild(root);
-
-let currentUrl = window.location.href;
-let BoardID = currentUrl.split('/')[3];
-
-//if (currentUrl == 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
-  render(
+    document.body.append(root);
+    return root;
+  })(),
+).render(
  <div>
-      <Header text='Hello, World!' />
-      <Catalog boardID={BoardID}/>
+    <App />
  </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'));