Added styled-components + various

Includes changes due to NextJS version bump and attempts at storing theme via cookie

components/layout.tsx

@@ -2,35 +2,39 @@ import Footer from './footer'
 import Navbar from './navbar'
 import styles from '/styles/Home.module.css'
 import Script from 'next/script'
+import { Page } from './styles/generic'
+import StyleSelector from './themeselector'
+
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className={styles.page}>
-      <Script id="matomo_analytics"> 
-      {`
-        var _paq = window._paq = window._paq || [];
-        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-        _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-        _paq.push(["setCookieDomain", "www.neshweb.net"]);
-        _paq.push(["disableCookies"]);
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function() {
-          var u="//tracking.neshweb.net/";
-          _paq.push(['setTrackerUrl', u+'matomo.php']);
-          _paq.push(['setSiteId', '2']);
-          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-          g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-        })();
-      `}
+    <Page>
+      <Script id="matomo_analytics">
+        {`
+              var _paq = window._paq = window._paq || [];
+              /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+              _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+              _paq.push(["setCookieDomain", "www.neshweb.net"]);
+              _paq.push(["disableCookies"]);
+              _paq.push(['trackPageView']);
+              _paq.push(['enableLinkTracking']);
+              (function() {
+                var u="//tracking.neshweb.net/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', '2']);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+              })();
+            `}
       </Script>
-      
+
       <Navbar />
+      <StyleSelector></StyleSelector>
       <main className={styles.main}>
         {children}
       </main>
       <Footer />
-    </div>
+    </Page>
   );
 }
 

components/navbar.tsx

@@ -1,6 +1,6 @@
 import styles from '/styles/Home.module.css'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { usePathname } from 'next/navigation'
 
 const navLinks = [
   { name: "Home", href: "/" },
@@ -10,19 +10,16 @@ const navLinks = [
 ]
 
 const Navbar = () => {
-  const router = useRouter();
+  const path = usePathname();
 
   return (
     <nav className={styles.navbar}>
       {navLinks.map((item, index) => (
-        <Link key={item.name} href={item.href}>
-          <a className={router.pathname == item.href ? styles.navelem_active : styles.navelem}>{item.name}</a>
+        <Link className={path == item.href ? styles.navelem_active : styles.navelem} key={item.name} href={item.href}>
+          {item.name}
         </Link>
       ))}
-      <Link key="Mastodon_Verify" href="https://mastodon.neshweb.net/@neshura">
-        <a className={styles.navelem} rel="me" href="https://mastodon.neshweb.net/@neshura">Mastodon</a>
-      </Link>
-      
+      <Link className={styles.navelem} key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">Mastodon</Link>
     </nav>
   );
 }

components/styles/generic.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+const Page = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.background};
+`
+
+export { Page }

components/themes.tsx

@@ -0,0 +1,51 @@
+// Probably a good idea to spread this out into multiple files under a folder once it gets bigger
+import { createGlobalStyle, DefaultTheme } from 'styled-components'
+
+// unsure whether needed
+/* const GlobalStyle = createGlobalStyle`
+  html,
+  body {
+    color: ${({ theme }) => theme.colors.primary};
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+`
+
+export default GlobalStyle; */
+
+export const lightTheme: DefaultTheme = {
+  themeId: 1,
+  colors: {
+    background: '#ffffff',
+    primary: '#00aaff',
+    secondary:'#ffaa00',
+  },
+}
+
+export const darkTheme: DefaultTheme = {
+  themeId: 2,
+  colors: {
+    background: '#1f1f1f',
+    primary: '#00aaff',
+    secondary:'#ffaa00',
+  },
+}
+
+export const amoledTheme: DefaultTheme = {
+  themeId: 3,
+  colors: {
+    background: '#000000',
+    primary: '#00aaff',
+    secondary:'#ffaa00',
+  },
+}

components/themeselector.tsx

@@ -0,0 +1,52 @@
+import { useUpdateTheme } from "../pages/_app";
+import { useContext } from 'react';
+import { ThemeContext, DefaultTheme  } from "styled-components";
+import { darkTheme, amoledTheme, lightTheme } from './themes';
+
+const StyleSelector = () => {
+  const updateTheme = useUpdateTheme();
+  const currentTheme = useContext(ThemeContext);
+
+  //console.log(currentTheme); // DEBUG
+
+  let newTheme: DefaultTheme;
+  switch(currentTheme.themeId) {
+    case 1:
+      newTheme = darkTheme;
+      break;
+    case 2:
+      newTheme = amoledTheme;
+      break;
+    case 3:
+      newTheme = lightTheme;
+      break;
+    default:
+      newTheme = currentTheme;
+  }
+
+  return (
+    <button onClick={() => updateTheme(newTheme)}>Switch Style</button>
+  );
+}
+
+export function getTheme(themeId: number): DefaultTheme {
+  let theme: DefaultTheme;
+
+  switch(themeId) {
+    case 1:
+      theme = lightTheme;
+      break;
+    case 2:
+      theme = darkTheme;
+      break;
+    case 3:
+      theme = amoledTheme;
+      break;
+    default:
+      theme = darkTheme
+  }
+
+  return theme;
+}
+
+export default StyleSelector;