Goyslop/4chads
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made changes on site loading

Browse Source
This commit is contained in:
Lalle 2023-03-22 04:47:54 +01:00
parent f3873bb48c
commit 07f62dd96b
No known key found for this signature in database
GPG Key ID: A6583D207A8F6B0D
7 changed files with 81 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package-lock.json generated
View File

@ -885,9 +885,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001468", "version": "1.0.30001469",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
"integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==", "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -1051,9 +1051,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.333", "version": "1.4.334",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
"integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==", "integrity": "sha512-laZ1odk+TRen6q0GeyQx/JEkpD3iSZT7ewopCpKqg9bTjP1l8XRfU3Bg20CFjNPZkp5+NDBl3iqd4o/kPO+Vew==",
"dev": true "dev": true
}, },
"node_modules/entities": { "node_modules/entities": {
@ -1539,9 +1539,9 @@
} }
}, },
"node_modules/systemjs": { "node_modules/systemjs": {
"version": "6.14.0", "version": "6.14.1",
"resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.0.tgz", "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
"integrity": "sha512-OMf+kFCYG9fLQerUyw/QVIPfZ+lo579R+usrDzSrZAkvMl6B0tHtc4rUP7DFaPCr7Sy6p5DYD4V9OCF1Sp6+vA==", "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
"dev": true "dev": true
}, },
"node_modules/to-fast-properties": { "node_modules/to-fast-properties": {
@ -2235,9 +2235,9 @@
} }
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001468", "version": "1.0.30001469",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
"integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==", "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
"dev": true "dev": true
}, },
"chalk": { "chalk": {
@ -2352,9 +2352,9 @@
} }
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.4.333", "version": "1.4.334",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
"integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==", "integrity": "sha512-laZ1odk+TRen6q0GeyQx/JEkpD3iSZT7ewopCpKqg9bTjP1l8XRfU3Bg20CFjNPZkp5+NDBl3iqd4o/kPO+Vew==",
"dev": true "dev": true
}, },
"entities": { "entities": {
@ -2688,9 +2688,9 @@
"dev": true "dev": true
}, },
"systemjs": { "systemjs": {
"version": "6.14.0", "version": "6.14.1",
"resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.0.tgz", "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
"integrity": "sha512-OMf+kFCYG9fLQerUyw/QVIPfZ+lo579R+usrDzSrZAkvMl6B0tHtc4rUP7DFaPCr7Sy6p5DYD4V9OCF1Sp6+vA==", "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
"dev": true "dev": true
}, },
"to-fast-properties": { "to-fast-properties": {

18
src/App.tsx Normal file
View File

@ -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;

13
src/Site/Catalog.css
View File

@ -19,6 +19,17 @@
vertical-align: top; vertical-align: top;
} }
.Top { .Top-Header {
position: fixed;
top: 0; top: 0;
left: 0;
width: 100%;
height: '50px';
background-color: brown;
color: 'white';
z-index: 1000;
}
.Top-Header p {
color: white;
text-align: center;
} }

27
src/Site/Catalog.tsx
View File

@ -29,10 +29,16 @@ const fetchCatalog = async (boardID: string): Promise<Page[]> => {
return data; return data;
}; };
// Creates the json index for the catalog. // Creates the json index for the catalog.
const createThreadElement = (thread: Thread, boardID: string) => { const createThreadElement = (thread: Thread, boardID: string,) => {
const { no, replies, images, com, sub, tim, ext, tn_h, tn_w } = thread; const { no, images, com, sub, tim, ext, tn_h, tn_w } = thread;
const threadURL = `https://boards.4channel.org/${boardID}/thread/${no}`; 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); const ratio = 150 / Math.max(tn_w, tn_h);
return ( return (
<div key={`thread-${no}`} id={`thread-${no}`} className="thread"> <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}`} /> <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> </a>
<div id={`meta-${no}`} className="meta" title="(R)eplies / (I)mage Replies"> <div id={`meta-${no}`} className="meta" title="(R)eplies / (I)mage Replies">
<b>R: {replies} </b> <b>P: {} </b>
<b>I: {images} </b> <b>I: {images} </b>
</div> </div>
<div className="teaser"> <div className="teaser">
@ -55,7 +61,6 @@ const createThreadElement = (thread: Thread, boardID: string) => {
const Catalog: React.FC<CatalogProps> = ({ boardID }) => { const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
const [catalog, setCatalog] = useState<Page[]>([]); const [catalog, setCatalog] = useState<Page[]>([]);
useEffect(() => { useEffect(() => {
const fetchCatalogData = async () => { const fetchCatalogData = async () => {
const catalogData = await fetchCatalog(boardID); const catalogData = await fetchCatalog(boardID);
setCatalog(catalogData); setCatalog(catalogData);
@ -64,13 +69,15 @@ const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
fetchCatalogData(); fetchCatalogData();
}, [boardID]); }, [boardID]);
// Renders on document.querySelector('#threads')
return ( return (
<div className="catalog-container"> <div id="threads">
{catalog.map((page) => {catalog.map((page, index) => (
page.threads.map((thread) => createThreadElement(thread, boardID)), <div key={`page-${index}`} id={`page-${index}`} className="page">
)} {page.threads.map((thread) => createThreadElement(thread, boardID))}
</div>
))}
</div> </div>
); );
}; };
export default Catalog; export default Catalog;

4
src/Site/Header.tsx
View File

@ -5,11 +5,11 @@ interface TopBarProps {
} }
const TopBar: React.FC<TopBarProps> = ({ text }) => { const TopBar: React.FC<TopBarProps> = ({ text }) => {
// Make at the top of the page
return ( return (
<div className='Top' style={{ height: '1px', backgroundColor: 'black' }}> <div className='Top-Header'>
<p>{text}</p> <p>{text}</p>
</div> </div>
); );
}; };
export default TopBar; export default TopBar;

37
src/main.tsx
View File

@ -1,32 +1,19 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import { render } from 'react-dom';
// Importing components // Importing components
import Catalog from './Site/Catalog'; import App from './App';
import Header from './Site/Header'; ReactDOM.createRoot(
(() => {
const root = document.createElement('div'); const root = document.createElement('div');
root.id = '4chuds'; document.body.append(root);
document.body.appendChild(root); return root;
})(),
let currentUrl = window.location.href; ).render(
let BoardID = currentUrl.split('/')[3]; <div>
<App />
//if (currentUrl == 'https://boards.4channel.org' || 'https://boards.4channel.org/') { </div>,
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'));