From 8a54d9916be491174852de342b19a42c3cfea223 Mon Sep 17 00:00:00 2001
From: Zoey <friendlypossum@netc.fr>
Date: Tue, 10 Sep 2024 23:03:54 +0200
Subject: [PATCH] major rewrite
Signed-off-by: Zoey <friendlypossum@netc.fr>
---
src/About.js | 9 ----
src/App.css | 26 ++++++-----
src/App.js | 19 ++------
src/Home.js | 73 -------------------------------
src/TopBar.js | 45 -------------------
src/components/About.js | 12 +++++
src/components/Blog.js | 12 +++++
src/{ => components}/BottomBar.js | 2 +-
src/{ => components}/Embed.js | 0
src/{ => components}/FilePage.js | 0
src/components/Home.js | 62 ++++++++++++++++++++++++++
src/components/Projects.js | 12 +++++
src/{ => components}/RTMP.js | 0
src/{ => components}/SideBar.js | 0
src/components/Stream.js | 27 ++++++++++++
src/components/TopBar.js | 27 ++++++++++++
src/index.js | 68 ++++++++++++++++++++++++++--
17 files changed, 236 insertions(+), 158 deletions(-)
delete mode 100644 src/About.js
delete mode 100644 src/Home.js
delete mode 100644 src/TopBar.js
create mode 100644 src/components/About.js
create mode 100644 src/components/Blog.js
rename src/{ => components}/BottomBar.js (79%)
rename src/{ => components}/Embed.js (100%)
rename src/{ => components}/FilePage.js (100%)
create mode 100644 src/components/Home.js
create mode 100644 src/components/Projects.js
rename src/{ => components}/RTMP.js (100%)
rename src/{ => components}/SideBar.js (100%)
create mode 100644 src/components/Stream.js
create mode 100644 src/components/TopBar.js
diff --git a/src/About.js b/src/About.js
deleted file mode 100644
index 8f8e531..0000000
--- a/src/About.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const AboutPage = () => {
- return(
- <div>
- <p></p>
- </div>
- );
-}
-
-export default AboutPage;
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 5a4a88c..3844986 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,7 +20,7 @@
}
.HeaderButt {
- font-size: large;
+ font-size: larger;
user-select: none;
}
@@ -67,7 +67,12 @@
.BunnyLogo {
user-select: none;
- pointer-events: none;
+ cursor: pointer;
+}
+
+.BunnyLogo:hover {
+ transform:scale(0.56);
+ animation: LogoHoverAnime 0.1s ease-in-out;
}
.Teardrop {
@@ -158,21 +163,20 @@
.MainBG {
background: linear-gradient(
- 360deg,
- #69233b,
- #473b21,
- #520a22,
- #3f2749
+ to right,
+ #69233b,
+ #61182a,
+ #520a22,
+ #312436
);
background-size: 600% 600%;
animation: Gradient 120s ease infinite;
- animation: Gradient 120s ease infinite;
}
@keyframes Gradient {
- 0% {background-position: 0% 50%;}
- 50% {background-position: 100% 50%;}
- 100% {background-position: 0% 50%;}
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
}
@keyframes DarkModeButton-spin {
diff --git a/src/App.js b/src/App.js
index 86ce36a..06b4678 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,16 @@
-//import logo from './logo.svg';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
+import React, { Component } from 'react';
import './App.css';
-import TopBar from './TopBar';
-import BottomBar from './BottomBar';
-import StreamEmbed from './Embed';
-import AboutPage from './About';
-//import SideBar from './SideBar';
+import StreamEmbed from './components/Embed';
-import Home from './Home';
+import Home from './components/Home';
function App() {
return (
<div className="body">
<Home/>
- <TopBar/>
- <AboutPage/>
- <StreamEmbed/>
- <BottomBar/>
</div>
+
);
}
diff --git a/src/Home.js b/src/Home.js
deleted file mode 100644
index 366d523..0000000
--- a/src/Home.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-import RTMP from './RTMP';
-
-function Home() {
- const [Versions, setVersions] = useState('');
-
- useEffect(() => {
- const fetchFiles = async () => {
- try {
- const Response = await fetch('versions.txt');
- const Text = await Response.text();
- setVersions(Text);
- } catch (error) {
- console.error('Error fetching file:', error);
- }
- };
-
- fetchFiles();
- }, []);
-
- return (
- <div className="flex w-screen h-screen overflow-hidden MainBG">
- <div className="flex flex-col backdrop-brightness-75 backdrop-blur-md justify-center text-secondary rounded-md min-w-fit">
-
- <p className="text-xl self-center justify-start mt-10 mb-2 shadow-2xl SubHeaders">Public Services.</p>
-
- <div className="backdrop-grayscale flex-col self-center">
- <div className="flex-col align-middle h-auto">
- <a href="https://git.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
- <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/forgejologo.svg"} alt="Memos"></img>
- <p className="self-center ml-2 mr-2 PubP">Forgejo</p>
- </a>
- <a href="https://lemmy.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
- <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/lemmylogo.svg"} alt="Lemmy"></img>
- <p className="self-center ml-2 mr-2 PubP">Lemmy</p>
- </a>
- <a href="https://clips.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
- <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/firesharelogo.png"} alt="Owncast"></img>
- <p className="self-center ml-2 mr-2 PubP">Fireshare</p>
- </a>
- <a href="https://memos.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
- <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
- <p className="self-center ml-2 mr-2 PubP">Memos</p>
- </a>
- <a href="https://send.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
- <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/sendlogo.svg"} alt="Memos"></img>
- <p className="self-center ml-2 mr-2 PubP">Send</p>
- </a>
- </div>
- </div>
- <p className="text-xl self-center justify-start mb-1 mt-4 shadow-2xl SubHeaders">My Streams.</p>
- <div>
- <a href="https://cast.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
- <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
- <p className="self-center ml-2 mr-2 PubP">Owncast</p>
- </a>
- </div>
- </div>
- <div className="flex flex-col backdrop-brightness-75 text-secondary rounded-md ml-5 mr-5 mt-16 mb-12 w-screen overflow-auto">
- <div className="flex justify-center top-0">
- <p className="flex UpdatesTitle">Welcome to Zoey's Bits.</p>
- </div>
- <div className="flex flex-col ml-5 mt-2 justify-center text-wrap">
- <p className="UpdatesContent">I don't really know what to put here yet.</p>
- <p className="UpdatesContent">You are free to use any of the services in the sidebar.</p>
- <RTMP/>
- </div>
- </div>
- </div>
- );
-}
-
-export default Home;
\ No newline at end of file
diff --git a/src/TopBar.js b/src/TopBar.js
deleted file mode 100644
index 20ebd0d..0000000
--- a/src/TopBar.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const TopBar = () => {
- return (
- <div className="fixed top-0 left-0 h-12 w-screen flex flex-row bg-primary text-secondary
- shadow-md justify-center items-center space-x-2">
- <div className="topbar-clickables">
- <div className="flex items-center justify-center overflow-hidden">
- <div className="Teardrop">
- <div className="fixed mt-12 top-0 left-0 w-60">
- <img draggable="false" src={process.env.PUBLIC_URL + "/teardropdark.svg"} alt="Teardrop"/>
- </div>
- </div>
- <div className="BunnyLogo">
- <div className="fixed top-0 left-0 ml-3">
- <img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
- </div>
- </div>
- <div className="flex ml-40">
- <p className="mr-20 top-1 left-28 fixed HeaderName">Zoey's Bits</p>
- <div className="">
- <button className="mx-3 HeaderButt">News</button>
- </div>
- <div className="">
- <button className="mx-3 HeaderButt">Projects</button>
- </div>
- <div className="">
- <button className="mx-3 HeaderButt">Stream</button>
- </div>
- <div className="">
- <button className="mx-3 HeaderButt">About</button>
- </div>
- </div>
- <div className="fixed right-0 mr-6">
- <div className="DarkModeButton">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="half-crescent-moon">
- <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
- </svg>
- </div>
- </div>
- </div>
- </div>
- </div>
- );
-};
-
-export default TopBar;
\ No newline at end of file
diff --git a/src/components/About.js b/src/components/About.js
new file mode 100644
index 0000000..f65e371
--- /dev/null
+++ b/src/components/About.js
@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const AboutPage = () => {
+ return(
+ <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">
+ <h1>WIP butt</h1>
+ </div>
+ );
+}
+
+export default AboutPage;
\ No newline at end of file
diff --git a/src/components/Blog.js b/src/components/Blog.js
new file mode 100644
index 0000000..956e441
--- /dev/null
+++ b/src/components/Blog.js
@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const BlogPage = () => {
+ return(
+ <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">
+ <h1>WIP blogpage</h1>
+ </div>
+ );
+}
+
+export default BlogPage;
\ No newline at end of file
diff --git a/src/BottomBar.js b/src/components/BottomBar.js
similarity index 79%
rename from src/BottomBar.js
rename to src/components/BottomBar.js
index 8be016f..74dd7aa 100644
--- a/src/BottomBar.js
+++ b/src/components/BottomBar.js
@@ -1,6 +1,6 @@
const BottomBar = () => {
return (
- <div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row bg-primary text-secondary shadow-sm justify-center items-center">
+ <div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row backdrop-brightness-50 text-secondary justify-center items-center">
<div className="fixed flex justify-center">
<p className="text-sm">© LibreBun 2024</p>
</div>
diff --git a/src/Embed.js b/src/components/Embed.js
similarity index 100%
rename from src/Embed.js
rename to src/components/Embed.js
diff --git a/src/FilePage.js b/src/components/FilePage.js
similarity index 100%
rename from src/FilePage.js
rename to src/components/FilePage.js
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..14043dc
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+
+function Home() {
+ const [Versions, setVersions] = useState('');
+
+ useEffect(() => {
+ const fetchFiles = async () => {
+ try {
+ const Response = await fetch('versions.txt');
+ const Text = await Response.text();
+ setVersions(Text);
+ } catch (error) {
+ console.error('Error fetching file:', error);
+ }
+ };
+
+ fetchFiles();
+ }, []);
+
+ return (
+ <div className='flex flex-col justify-center items-center w-screen h-screen overflow-hidden MainBG'>
+ <div className='flex flex-col items-center'>
+ <p className='text-4xl mb-2 text-secondary'>Welcome to Zoey's Bits!</p>
+ <p className='text-xl mb-8 text-secondary'>The home of all my bits and pieces.</p>
+ </div>
+ <div className='flex'>
+ <div className='flex flex-col w-fit h-fit text-secondary rounded-md items-center'>
+ <p className='text-xl'>Feel free to use my public services.</p>
+ <div className='grid grid-cols-3 grid-rows-2 gap-4 mx-2 my-2'>
+ <a href='https://git.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+ <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/forgejologo.svg'} alt='Memos' />
+ <p className='self-center mx-2 PubP'>Forgejo</p>
+ </a>
+ <a href='https://lemmy.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+ <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/lemmylogo.svg'} alt='Lemmy' />
+ <p className='self-center mx-2 PubP'>Lemmy</p>
+ </a>
+ <a href='https://clips.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+ <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/firesharelogo.png'} alt='Fireshare' />
+ <p className='self-center mx-2 PubP'>Fireshare</p>
+ </a>
+ <a href='https://memos.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+ <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/memoslogo.png'} alt='Memos' />
+ <p className='self-center mx-2 PubP'>Memos</p>
+ </a>
+ <a href='https://send.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+ <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/sendlogo.svg'} alt='Send' />
+ <p className='self-center mx-2 PubP'>Send</p>
+ </a>
+ <a href='https://cast.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+ <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/owncastlogo.png'} alt='Owncast' />
+ <p className='self-center mx-2 PubP'>Owncast</p>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Projects.js b/src/components/Projects.js
new file mode 100644
index 0000000..d70f113
--- /dev/null
+++ b/src/components/Projects.js
@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const ProjectsPage = () => {
+ return(
+ <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">
+ <h1>WIP projectspage</h1>
+ </div>
+ );
+}
+
+export default ProjectsPage;
\ No newline at end of file
diff --git a/src/RTMP.js b/src/components/RTMP.js
similarity index 100%
rename from src/RTMP.js
rename to src/components/RTMP.js
diff --git a/src/SideBar.js b/src/components/SideBar.js
similarity index 100%
rename from src/SideBar.js
rename to src/components/SideBar.js
diff --git a/src/components/Stream.js b/src/components/Stream.js
new file mode 100644
index 0000000..61c5c55
--- /dev/null
+++ b/src/components/Stream.js
@@ -0,0 +1,27 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const StreamPage = () => {
+ return(
+ <div className="flex flex-col items-center justify-center w-screen h-screen text-xl text-secondary MainBG">
+ <div className="flex flex-row items-center justify-center w-screen h-5/6 mt-8 text-xl text-secondary">
+ <iframe
+ className="mt-5 overflow-hidden justify-left flex"
+ src="https://cast.li-yo.ts.net/embed/video"
+ title="Owncast"
+ height="100%" width="60%"
+ referrerpolicy="origin"
+ allowfullscreen>
+ </iframe>
+ <iframe
+ className="ml-5 mt-5 overflow-scroll"
+ src="https://cast.li-yo.ts.net/embed/chat/readwrite/"
+ height="100%" width="30%">
+ </iframe>
+ </div>
+ <a href="https://cast.li-yo.ts.net/" className="my-5">Join me on my actual Owncast site!</a>
+ </div>
+ );
+}
+
+export default StreamPage;
\ No newline at end of file
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
new file mode 100644
index 0000000..e797a71
--- /dev/null
+++ b/src/components/TopBar.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const TopBar = () => {
+ const navigate = useNavigate();
+ return (
+ <div className="fixed top-0 left-0 h-16 w-screen flex flex-row backdrop-brightness-75 text-secondary items-center">
+ <div className="topbar-clickables">
+ <div className="flex flex-row">
+ <div className="scale-50 BunnyLogo">
+ <div className="">
+ <img onClick={() => navigate("/")} draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
+ </div>
+ </div>
+ <div className="flex space-x-3">
+ <button className="HeaderButt" onClick={() => navigate("/blog")}>Blog</button>
+ <button className="HeaderButt" onClick={() => navigate("/projects")}>Projects</button>
+ <button className="HeaderButt" onClick={() => navigate("/stream")}>Stream</button>
+ <button className="HeaderButt" onClick={() => navigate("/about")}>About</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default TopBar;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8d5cddf..8d7e273 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,74 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import {createBrowserRouter,RouterProvider} from "react-router-dom";
+import AboutPage from './components/About';
+import StreamPage from './components/Stream';
+import ProjectsPage from './components/Projects';
+import BlogPage from './components/Blog';
+import TopBar from './components/TopBar';
+import BottomBar from './components/BottomBar';
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: (
+ <>
+ <TopBar/>
+ <App/>
+ <BottomBar/>
+ </>
+ ),
+ },
+ {
+ path: "/about",
+ element: (
+ <>
+ <AboutPage/>
+ <TopBar/>
+ <BottomBar/>
+ </>
+ ),
+ },
+ {
+ path: "/stream",
+ element: (
+ <>
+ <StreamPage/>
+ <TopBar/>
+ <BottomBar/>
+ </>
+ ),
+ },
+ {
+ path: "/projects",
+ element: (
+ <>
+ <ProjectsPage/>
+ <TopBar/>
+ <BottomBar/>
+ </>
+ ),
+ },
+ {
+ path: "/blog",
+ element: (
+ <>
+ <BlogPage/>
+ <TopBar/>
+ <BottomBar/>
+ </>
+ ),
+ }
+]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
- <React.StrictMode>
- <App />
- </React.StrictMode>
+ <StrictMode>
+ <RouterProvider router={router} />
+ </StrictMode>
);
reportWebVitals();