diff --git a/bun.lockb b/bun.lockb index ad26d80..4131241 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 40beff9..2e684db 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/public/firesharelogo.png b/public/firesharelogo.png new file mode 100644 index 0000000..24e8702 Binary files /dev/null and b/public/firesharelogo.png differ diff --git a/public/lemmylogo.svg b/public/lemmylogo.svg new file mode 100644 index 0000000..eb07724 --- /dev/null +++ b/public/lemmylogo.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + diff --git a/public/ollamalogo.png b/public/ollamalogo.png new file mode 100644 index 0000000..2b20747 Binary files /dev/null and b/public/ollamalogo.png differ diff --git a/src/About.js b/src/About.js new file mode 100644 index 0000000..b34aa3c --- /dev/null +++ b/src/About.js @@ -0,0 +1,7 @@ +const AboutPage = () => { + return( +
+ ); +} + +export default AboutPage; \ No newline at end of file diff --git a/src/App.css b/src/App.css index cd96acf..98efef3 100644 --- a/src/App.css +++ b/src/App.css @@ -14,31 +14,41 @@ animation: Welcome-spin 10s infinite ease-in-out alternate; } -.BunnyLogo, -.MemosLogo, -.OwncastLogo, -.PhotonLogo { - width: 115px; - height: 115px; +.HeaderName { + font-size: x-large; + user-select: none; +} + +.HeaderButt { + font-size: large; + user-select: none; +} + +.HeaderButt:hover { + transform:scale(1.1); + animation: LogoHoverAnime 0.1s ease-in-out; + text-shadow: black; +} + +.Logos { + width: 60px; + height: 60px; user-select: none; pointer-events: none; - object-position: center; } .PubP { - color: #111111; font-size: larger; user-select: none; pointer-events: none; - object-position: center; } .LogoBoxesPub { - width: 150px; - height: 150px; + height: 75px; display: flex; justify-content: center; - align-items: center; + align-items: left; + margin-top: 10px; } .LogoBoxesPub { @@ -47,7 +57,7 @@ .LogoBoxesPub:hover { transform: scale(1.1) /*rotate(360deg)*/; - animation: LogoHoverAnim 0.5s ease-in-out; + animation: LogoHoverAnim 0.1s ease-in-out; } .TextButt { @@ -71,6 +81,14 @@ object-position: center; } +.UpdatesTitle { + font-size: x-large; +} + +.UpdatesContent { + font-size: large; +} + .TailP { color: #111111; user-select: none; @@ -81,7 +99,6 @@ .SubHeaders { user-select: none; pointer-events: none; - object-position: center; } .LogoBoxesTail { diff --git a/src/App.js b/src/App.js index a0d1caf..7f2f6ea 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,25 @@ //import logo from './logo.svg'; + +import React 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 Home from './Home'; - function App() { return (
- - - + + + + +
); } diff --git a/src/Embed.js b/src/Embed.js new file mode 100644 index 0000000..539f90e --- /dev/null +++ b/src/Embed.js @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react'; + +const StreamEmbed = () => { + const [isLive, setIsLive] = useState(false); + + const checkStream = async () => { + const owncastURL = "https://cast.li-yo.ts.net"; + const statusAPI = `${owncastURL}/api/status`; + try { + const response = await fetch(statusAPI); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + // Check if the stream is live + setIsLive(data.online); + } catch (error) { + console.error("Error checking stream status:", error); + } + }; + + useEffect(() => { + // Check the stream status when the component mounts + checkStream(); + // Optionally, you can set an interval to check the stream status periodically + const intervalId = setInterval(checkStream, 60000); // Check every 60 seconds + + // Cleanup interval on component unmount + return () => clearInterval(intervalId); + }, []); + + return ( + <> + {isLive && ( +
+ +
+ )} + + ); +}; + +export default StreamEmbed; \ No newline at end of file diff --git a/src/FilePage.js b/src/FilePage.js new file mode 100644 index 0000000..be31b29 --- /dev/null +++ b/src/FilePage.js @@ -0,0 +1,10 @@ +import React from 'react'; + +function FilePage() { + return ( +
+

File Page

+

This is the content of the new page.

+
+ ); +} \ No newline at end of file diff --git a/src/Home.js b/src/Home.js index c577c29..d1a3008 100644 --- a/src/Home.js +++ b/src/Home.js @@ -19,49 +19,37 @@ function Home() { return (
-
-

Welcome, fellow traveller!

-

Public Services.

-
- - Memos -

Memos

- - - Lemmy -

Lemmy

- - - Owncast -

Owncast

- -
-

Tailscale

-
- - Forgejo -

Forgejo

- - - Jellyfin -

Jellyfin

- - - Graphite -

Graphite

- -
-
-
-
-

_>#

-
-
-

{Versions}

-
+
+ +

Public Services.

+ +
+
+
+

Lorem Ipsum PERRRRKELE

+

Lorem Ipsum PERRRRKELE, PS Vittuoa, butts and cakes. WIP

+
+
); } diff --git a/src/TopBar.js b/src/TopBar.js index e6742ee..0e5c62d 100644 --- a/src/TopBar.js +++ b/src/TopBar.js @@ -1,45 +1,36 @@ const TopBar = () => { return ( -
-
- +
-
+
Teardrop
-
+
Bunnie
- -
-
-

Projects

+
+

Zoey's Bits

+
+
-
-
-

Rants

+
+
-
-
-

About

+
+
- Popup Title - -

Paragraph 1

-

Paragraph 2

-

Paragraph 3

- - +