invert theme logic (light theme by default)

public/icons/fediverse/akkoma.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Pleroma icon</title><path d="M6.36 0A1.868 1.868 0 004.49 1.868V24h5.964V0zm7.113 0v12h4.168a1.868 1.868 0 001.868-1.868V0zm0 18.036V24h4.168a1.868 1.868 0 001.868-1.868v-4.096Z"/></svg>

public/icons/fediverse/peertube.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>PeerTube icon</title><path d="M3,0v12l9-6L3,0z M3,12v12l9-6L3,12z M12,6v12l9-6L12,6z"/></svg>

public/icons/fediverse/pixelfed.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path fill="none" d="M0 0H24V24H0z"/>
+        <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1.031 6.099h-2.624c-.988 0-1.789.776-1.789 1.733v6.748l2.595-2.471h1.818c1.713 0 3.101-1.345 3.101-3.005s-1.388-3.005-3.1-3.005z"/>
+    </g>
+</svg>

src/App.tsx

@@ -3,6 +3,7 @@ import { useTheme } from "./style/themes.tsx";
 
 import About from "./sections/about.tsx";
 import Tools from "./sections/tools.tsx";
+import Links from "./sections/links.tsx";
 
 const App: React.FC = () => {
   const { theme } = useTheme();
@@ -10,6 +11,7 @@ const App: React.FC = () => {
   return <ThemeProvider theme={theme}>
     <Container>
       <About />
+      <Links />
       <Tools />
     </Container>
   </ThemeProvider>;

src/components/button.tsx

@@ -5,7 +5,8 @@ export type Props = {
     content?: string,
     icon?: string,
     link?: string,
-    primary?: boolean
+    primary?: boolean,
+    disabled?: boolean,
 } & React.ComponentProps<'div'>;
 
 const Button: React.FC<Props> = ({
@@ -14,14 +15,15 @@ const Button: React.FC<Props> = ({
     link,
     primary,
     children,
+    disabled = false,
     ...props
 }) => {
-    const item = <ButtonStyled {...props} className={classes({ link, primary })}>
+    const item = <ButtonStyled {...props} className={classes({ link, primary, disabled })}>
         {icon && <img src={icon} alt="Button icon" />}
         {content || children}
     </ButtonStyled>;
 
-    return link ? <a href={link} target="_blank" rel="noreferrer">{item}</a> : item;
+    return (link && !disabled) ? <a href={link} target="_blank" rel="noreferrer">{item}</a> : item;
 }
 
 const ButtonStyled = styled.div`
@@ -47,6 +49,7 @@ const ButtonStyled = styled.div`
     &:hover, &.primary {
         background: ${({ theme }) => theme.text};
         color: ${({ theme }) => theme.secondary};
+        box-shadow: 0 0 5px ${({ theme }) => theme.text};
 
         img {
             filter: ${({ theme }) => (theme.type === 'dark' ? 'none' : 'invert()')};
@@ -54,13 +57,18 @@ const ButtonStyled = styled.div`
     }
 
     &.primary:hover {
-        background: ${({ theme }) => theme.secondary};
+        background: transparent;
         color: ${({ theme }) => theme.text};
 
         img { 
             filter: ${({ theme }) => (theme.type === 'dark' ? 'invert()' : 'none')};
         }
     }
+
+    &.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
 `;
 
 export default Button;

src/sections/about.tsx

@@ -61,9 +61,6 @@ const About: React.FC = () => {
             "Evanescence"
         ])}
         <p>yeah I know, I listen to a broad spectrum of music</p>
-
-        <h2>Some links...</h2>
-        {asCardStack(LINKS)}
     </>;
 }
 
@@ -71,38 +68,4 @@ const Heading = styled.h1`
     font-family: "Pacifico", serif;
 `;
 
-const LINKS = [
-    {
-        content: "PGP",
-        icon: "/icons/pgp.svg",
-        link: "/pgp.asc",
-        primary: true
-    },
-    {
-        content: "Uptime of my services",
-        icon: "/icons/uptime.svg",
-        link: "https://health.sador.me/status/aio"
-    },
-    {
-        content: "E-mail",
-        icon: "/icons/email.svg",
-        link: "mailto:contact@sador.me?subject=[sador.me] ..."
-    },
-    {
-        content: "Gitea",
-        icon: "/icons/gitea.svg",
-        link: "https://git.sador.me"
-    },
-    {
-        content: "Matrix",
-        icon: "/icons/matrix.svg",
-        link: "https://matrix.to/#/@boss:sador.me"
-    },
-    {
-        content: "Instagram",
-        icon: "/icons/instagram.svg",
-        link: "https://instagram.com/sadorowo"
-    }
-];
-
 export default About;

src/sections/links.tsx

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { asCardStack } from "../components/card-stack";
+
+const Links: React.FC = () => {
+    return <>
+        <h2>Fediverse!</h2>
+        {asCardStack(FEDIVERSE_LINKS)}
+
+        <h2>Some links...</h2>
+        {asCardStack(LINKS)}
+    </>;
+}
+
+const Heading = styled.h1`
+    font-family: "Pacifico", serif;
+`;
+
+const FEDIVERSE_LINKS = [
+    {
+        content: "Akkoma",
+        icon: "/icons/fediverse/akkoma.svg",
+        link: "https://akkoma.sador.me"
+    },
+    {
+        content: "Pixelfed",
+        icon: "/icons/fediverse/pixelfed.svg",
+        link: "https://pix.sador.me"
+    },
+    {
+        content: "PeerTube",
+        icon: "/icons/fediverse/peertube.svg",
+        link: "https://tube.sador.me/home"
+    }
+].map(link => Object.assign(link, { primary: true }));
+
+const LINKS = [
+    {
+        content: "PGP",
+        icon: "/icons/pgp.svg",
+        link: "/pgp.asc",
+        primary: true
+    },
+    {
+        content: "Uptime of my services",
+        icon: "/icons/uptime.svg",
+        link: "https://health.sador.me/status/aio"
+    },
+    {
+        content: "E-mail",
+        icon: "/icons/email.svg",
+        link: "mailto:contact@sador.me?subject=[sador.me] ..."
+    },
+    {
+        content: "Gitea",
+        icon: "/icons/gitea.svg",
+        link: "https://git.sador.me"
+    },
+    {
+        content: "Matrix",
+        icon: "/icons/matrix.svg",
+        link: "https://matrix.to/#/@boss:sador.me"
+    },
+    {
+        content: "Instagram (deactivated)",
+        icon: "/icons/instagram.svg",
+        disabled: true,
+        link: "https://instagram.com/sadorowo"
+    }
+];
+
+export default Links;

src/style/themes.tsx

@@ -32,14 +32,14 @@ const ThemeContext = createContext<Props>({
 });
 
 const ThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
-    const [isLightTheme, setIsLightTheme] = useState(() => localStorage.getItem("theme") === "light");
+    const [isDarkTheme, setIsDarkTheme] = useState(() => localStorage.getItem("theme") === "dark");
 
     useEffect(() => {
-        localStorage.setItem("theme", isLightTheme ? "light" : "dark");
+        localStorage.setItem("theme", isDarkTheme ? "dark" : "light");
-    }, [isLightTheme]);
+    }, [isDarkTheme]);
 
-    const theme = isLightTheme ? lightTheme : darkTheme;
+    const theme = isDarkTheme ? darkTheme : lightTheme;
-    const toggleTheme = () => setIsLightTheme(prev => !prev);
+    const toggleTheme = () => setIsDarkTheme(prev => !prev);
 
     return (
         <ThemeContext.Provider value={{ theme, toggleTheme }}>

src/tests/about.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from "@testing-library/react";
-import App from "../App";
+import About from "../sections/about";
 
 test("renders hello text", () => {
-  render(<App />);
+  render(<About />);
 
   const helloElement = screen.getByText(/hello/i);
   expect(helloElement).toBeInTheDocument();
@@ -10,37 +10,30 @@ test("renders hello text", () => {
 
 describe("all sub-sections of about are visible", () => {
   test("'some facts about me'", () => {
-    render(<App />);
+    render(<About />);
 
     const section = screen.getByText(/some facts about me/i);
     expect(section).toBeInTheDocument();
   })
 
   test("'i can...'", () => {
-    render(<App />);
+    render(<About />);
 
     const section = screen.getByText(/i can.../i);
     expect(section).toBeInTheDocument();
   })
 
   test("'my favourite music genres'", () => {
-    render(<App />);
+    render(<About />);
 
     const section = screen.getByText(/my favourite music genres/i);
     expect(section).toBeInTheDocument();
   })
 
   test("'bands/singers'", () => {
-    render(<App />);
+    render(<About />);
 
     const section = screen.getByText(/bands\/singers/i);
     expect(section).toBeInTheDocument();
   })
-
-  test("'some links'", () => {
-    render(<App />);
-
-    const section = screen.getByText(/some links/i);
-    expect(section).toBeInTheDocument();
-  })
 })

src/tests/links.test.js

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import Links from "../sections/links";
+
+describe("all sub-sections of links are visible", () => {
+    test("'Fediverse!'", () => {
+        render(<Links />);
+
+        const section = screen.getByText(/Fediverse!/i);
+        expect(section).toBeInTheDocument();
+    })
+
+    test("'some links'", () => {
+        render(<Links />);
+
+        const section = screen.getByText(/some links/i);
+        expect(section).toBeInTheDocument();
+    })
+})

src/tests/tools.test.js

@@ -1,16 +1,16 @@
 import { render, screen } from "@testing-library/react";
-import App from "../App";
+import Tools from "../sections/tools";
 
 describe("all sub-sections of tools are visible", () => {
   test("'languages that i use'", () => {
-    render(<App />);
+    render(<Tools />);
 
     const section = screen.getByText(/languages that i use/i);
     expect(section).toBeInTheDocument();
   })
 
   test("'my favourite tools'", () => {
-    render(<App />);
+    render(<Tools />);
 
     const section = screen.getByText(/my favourite tools/i);
     expect(section).toBeInTheDocument();