SailorZoop/ZoeysBits
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

major rewrite

Browse source 
Signed-off-by: Zoey <friendlypossum@netc.fr>
This commit is contained in:
Zoey 2024-09-10 23:03:54 +02:00
parent 18b10fd46c
commit 8a54d9916b
Signed by: SailorZoop
GPG key ID: 854F554AFF0A96D1
17 changed files with 236 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/About.js
View file

@ -1,9 +0,0 @@
const AboutPage = () => {
return(
<div>
<p></p>
</div>
);
}
export default AboutPage;

26
src/App.css
View file

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

19
src/App.js
View file

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

73
src/Home.js
View file

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

45
src/TopBar.js
View file

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

12
src/components/About.js Normal file
View file

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

12
src/components/Blog.js Normal file
View file

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

2
src/BottomBar.js → src/components/BottomBar.js
View file

@ -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">&copy; LibreBun 2024</p>
</div>

0
src/Embed.js → src/components/Embed.js
View file

0
src/FilePage.js → src/components/FilePage.js
View file

62
src/components/Home.js Normal file
View file

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

12
src/components/Projects.js Normal file
View file

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

0
src/RTMP.js → src/components/RTMP.js
View file

0
src/SideBar.js → src/components/SideBar.js
View file

27
src/components/Stream.js Normal file
View file

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

27
src/components/TopBar.js Normal file
View file

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

68
src/index.js
View file

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