mirror of
https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git
synced 2026-06-06 17:18:24 +02:00
prettier plus updates to the header entry. Stream gets iframe page instead of redirect
This commit is contained in:
@@ -12,3 +12,13 @@
|
||||
.ui-btn-active {
|
||||
@apply bg-ctp-surface0 text-ctp-green border-ctp-green;
|
||||
}
|
||||
|
||||
.stream-frame {
|
||||
width: 96vw;
|
||||
margin: 0 auto;
|
||||
@apply aspect-video rounded-2xl overflow-hidden border border-ctp-lavender-800 bg-ctp-mantle shadow-lg;
|
||||
}
|
||||
|
||||
.stream-frame iframe {
|
||||
@apply w-full h-full border-0;
|
||||
}
|
||||
|
||||
@@ -2,13 +2,17 @@ import "./App.css";
|
||||
|
||||
import Layout from "./components/Layout";
|
||||
import Home from "./pages/Home";
|
||||
import Stream from "./pages/Stream";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Layout>
|
||||
<Home />
|
||||
</Layout>
|
||||
);
|
||||
const path = window.location.pathname.toLowerCase();
|
||||
|
||||
let content = <Home />;
|
||||
if (path === "/stream") {
|
||||
content = <Stream />;
|
||||
}
|
||||
|
||||
return <Layout>{content}</Layout>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -7,7 +7,7 @@ export default function Header({ theme }) {
|
||||
{ label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
|
||||
{ label: "Navidrome", url: "https://music.aramjonghu.nl" },
|
||||
{ label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
|
||||
{ label: "Stream", url: "https://stream.aramjonghu.nl" },
|
||||
{ label: "Stream", url: "/stream" },
|
||||
{ label: "SearXNG", url: "https://xng.aramjonghu.nl" },
|
||||
{ label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
|
||||
];
|
||||
@@ -27,7 +27,11 @@ export default function Header({ theme }) {
|
||||
|
||||
<nav className="flex flex-wrap gap-3 items-center">
|
||||
{navItems.map((item) => (
|
||||
<a key={item.label} href={item.url} className="ui-btn ui-btn:hover">
|
||||
<a
|
||||
key={item.label}
|
||||
href={item.url}
|
||||
className="ui-btn ui-btn:hover"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
|
||||
@@ -113,7 +113,8 @@ export default function ProjectsReadme({ repoUrl }) {
|
||||
code({ className, children, ...props }) {
|
||||
const isBlock =
|
||||
className ||
|
||||
(typeof children === "string" && children.includes("\n"));
|
||||
(typeof children === "string" &&
|
||||
children.includes("\n"));
|
||||
|
||||
if (isBlock) {
|
||||
return (
|
||||
@@ -170,14 +171,20 @@ export default function ProjectsReadme({ repoUrl }) {
|
||||
),
|
||||
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc pl-6 mb-4">{children}</ul>
|
||||
<ul className="list-disc pl-6 mb-4">
|
||||
{children}
|
||||
</ul>
|
||||
),
|
||||
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal pl-6 mb-4">{children}</ol>
|
||||
<ol className="list-decimal pl-6 mb-4">
|
||||
{children}
|
||||
</ol>
|
||||
),
|
||||
|
||||
li: ({ children }) => <li className="mb-1">{children}</li>,
|
||||
li: ({ children }) => (
|
||||
<li className="mb-1">{children}</li>
|
||||
),
|
||||
|
||||
a: ({ children, href }) => (
|
||||
<a
|
||||
|
||||
@@ -44,7 +44,8 @@ export default function Home() {
|
||||
◀︎ Prev
|
||||
</button>
|
||||
<span className="self-center mx-6 font-medium">
|
||||
{projectList[projIdx].name} ({projIdx + 1}/{projectList.length})
|
||||
{projectList[projIdx].name} ({projIdx + 1}/
|
||||
{projectList.length})
|
||||
</span>
|
||||
<button
|
||||
onClick={nextProject}
|
||||
@@ -72,14 +73,16 @@ export default function Home() {
|
||||
return (
|
||||
<div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
|
||||
<div className="w-full max-w-6xl text-center">
|
||||
<h1 className="text-4xl font-bold text-ctp-mauve">AramJonghu</h1>
|
||||
<h1 className="text-4xl font-bold text-ctp-mauve">
|
||||
AramJonghu
|
||||
</h1>
|
||||
<p className="mt-4">
|
||||
Software engineer building systems, services, and experiments across a
|
||||
self-hosted environment.
|
||||
Software engineer building systems, services, and
|
||||
experiments across a self-hosted environment.
|
||||
</p>
|
||||
<p className="mt-3">
|
||||
This site acts as a hub for projects, infrastructure, and personal
|
||||
tooling.
|
||||
This site acts as a hub for projects, infrastructure, and
|
||||
personal tooling.
|
||||
</p>
|
||||
<div className="mt-10 border rounded p-4">
|
||||
<div className="flex flex-wrap justify-center gap-12 mb-6">
|
||||
@@ -88,7 +91,9 @@ export default function Home() {
|
||||
key={section.id}
|
||||
onClick={() => setActiveTab(section.id)}
|
||||
className={`ui-btn ${
|
||||
activeTab === section.id ? "ui-btn-active" : ""
|
||||
activeTab === section.id
|
||||
? "ui-btn-active"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{section.title}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
export default function Stream() {
|
||||
return (
|
||||
<div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
|
||||
<div className="w-full text-center flex flex-col flex-1">
|
||||
<h1 className="text-4xl font-bold text-ctp-mauve mb-6">
|
||||
Stream
|
||||
</h1>
|
||||
|
||||
<div className="stream-frame w-full mx-auto flex-1 max-h-[85vh]">
|
||||
<iframe
|
||||
src="https://stream.aramjonghu.nl"
|
||||
title="Stream"
|
||||
allow="autoplay; fullscreen; picture-in-picture"
|
||||
loading="lazy"
|
||||
className="w-full h-full border-0 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user