From 21e613891eb4fcf165422cd3af9267d480d6dd82 Mon Sep 17 00:00:00 2001
From: Neshura
Date: Wed, 14 Dec 2022 19:35:27 +0100
Subject: [PATCH] Added styled-components + various
Includes changes due to NextJS version bump and attempts at storing theme via cookie
---
app/layout.tsx | 76 +++++++++++++++++++++++++++++++++++
components/layout.tsx | 44 +++++++++++---------
components/navbar.tsx | 13 +++---
components/styles/generic.tsx | 8 ++++
components/themes.tsx | 51 +++++++++++++++++++++++
components/themeselector.tsx | 52 ++++++++++++++++++++++++
pages/_app.tsx | 38 +++++++++++++++++-
pages/_document.tsx | 10 ++++-
pages/games.tsx | 20 +++++----
pages/index.tsx | 29 +++++--------
pages/services.tsx | 68 +++++++++++++++----------------
styled.d.ts | 12 ++++++
styles/Home.module.css | 6 +--
13 files changed, 325 insertions(+), 102 deletions(-)
create mode 100644 app/layout.tsx
create mode 100644 components/styles/generic.tsx
create mode 100644 components/themes.tsx
create mode 100644 components/themeselector.tsx
create mode 100644 styled.d.ts
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..c59c454
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,76 @@
+'use client'
+import Script from "next/script"
+import Footer from "../components/footer"
+import Navbar from "../components/navbar"
+import StyleSelector from "../components/themeselector"
+import styles from "../styles/Home.module.css"
+import { Page } from '../components/styles/generic'
+import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { createContext, useContext, useEffect, useState } from "react"
+import { setCookie } from "cookies-next"
+import { darkTheme } from "../components/themes"
+
+const ThemeUpdateContext = createContext(
+ (theme: DefaultTheme) => console.error("attempted to set theme outside of a ThemeUpdateContext.Provider")
+)
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+export const useUpdateTheme = () => useContext(ThemeUpdateContext);
+
+export default function Layout({ children, }: { children: React.ReactNode }) {
+ const [selectedTheme, setselectedTheme] = useState(darkTheme);
+ console.log("Selected Theme: ", selectedTheme); // DEBUG
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+{/*
+ */}
+
+/*
+
+ {children}
+ */
+
+{/* */
diff --git a/components/layout.tsx b/components/layout.tsx
index b41b42d..11d6be6 100644
--- a/components/layout.tsx
+++ b/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 (
-
-
-
+
{children}
-
+
);
}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 8cc425d..fa34f8e 100644
--- a/components/navbar.tsx
+++ b/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 (
{navLinks.map((item, index) => (
- {item.name}
+ Mastodon
-
-
+
);
}
diff --git a/components/styles/generic.tsx b/components/styles/generic.tsx
new file mode 100644
index 0000000..041f6d0
--- /dev/null
+++ b/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 }
\ No newline at end of file
diff --git a/components/themes.tsx b/components/themes.tsx
new file mode 100644
index 0000000..8eb1119
--- /dev/null
+++ b/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',
+ },
+}
\ No newline at end of file
diff --git a/components/themeselector.tsx b/components/themeselector.tsx
new file mode 100644
index 0000000..bde1496
--- /dev/null
+++ b/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 (
+ updateTheme(newTheme)}>Switch Style
+ );
+}
+
+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;
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 073a9f5..3f67ded 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,7 +3,10 @@ import type { ReactElement, ReactNode } from 'react'
import Layout from '../components/layout'
import type { NextPage } from 'next'
import { AppProps } from 'next/app';
-
+import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { createContext, useContext, useEffect, useState } from 'react'
+import { getCookie, getCookies, setCookie } from 'cookies-next'
+import { darkTheme } from '../components/themes';
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode
@@ -13,10 +16,41 @@ export type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
+
+const ThemeUpdateContext = createContext(
+ (theme: DefaultTheme) => console.error("attempted to set theme outside of a ThemeUpdateContext.Provider")
+)
+
+export const useUpdateTheme = () => useContext(ThemeUpdateContext);
+
+
export default function Website({ Component, pageProps }: AppPropsWithLayout) {
+ const [selectedTheme, setselectedTheme] = useState(darkTheme);
+ //console.log("Selected Theme: ", selectedTheme); // DEBUG
+
+ useEffect(() => {
+ setCookie('theme', selectedTheme.themeId);
+ }, [selectedTheme])
+
+
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => (
{page} ))
- return getLayout(
+
+ {getLayout(
+
+ )
+}
+
+export async function getServerSideProps() {
+
+ return {
+ props: {
+ token: {},
+ }
+ }
}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 399ed78..fcc861e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,6 +1,12 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { getCookie, getCookies, setCookie } from 'cookies-next';
+import { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import { useUpdateTheme } from './_app';
+import { darkTheme } from '../components/themes';
+import { GetServerSidePropsContext } from 'next';
-export default function Document() {
+export default function Document(ctx: DocumentContext) {
+ const updateTheme = useUpdateTheme();
+
return (
diff --git a/pages/games.tsx b/pages/games.tsx
index 67577c9..8bc6145 100644
--- a/pages/games.tsx
+++ b/pages/games.tsx
@@ -26,23 +26,21 @@ function Servers(props: EntryList) {
{Object.values(serverList).map((item: CustomLink) => {
if (item.href != null) {
return (
-
-
{item.name }
-
-
-
-
+
{item.name}
+
+
+
)
}
else {
return (
-
{item.name }
-
-
-
+
{item.name}
+
+
+
)
}
diff --git a/pages/index.tsx b/pages/index.tsx
index ff72aa5..6941081 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,11 +6,10 @@ export default function Home() {
return (
<>
- Neshura Servers
+ Neshweb - Home
Welcome to my Servers Webpage
@@ -19,28 +18,22 @@ export default function Home() {
Feel free to look around
)
-}
+}
\ No newline at end of file
diff --git a/pages/services.tsx b/pages/services.tsx
index abdeb32..6b84033 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -20,24 +20,22 @@ function Services() {
content =
@@ -46,24 +44,22 @@ function Services() {
content =
diff --git a/styled.d.ts b/styled.d.ts
new file mode 100644
index 0000000..1a18d6c
--- /dev/null
+++ b/styled.d.ts
@@ -0,0 +1,12 @@
+import 'styled-components'
+
+declare module 'styled-components' {
+ export interface DefaultTheme {
+ themeId: number,
+ colors: {
+ background: string,
+ primary: string
+ secondary: string
+ }
+ }
+}
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 4f39a09..1fed657 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,8 +1,3 @@
-.page {
- width: 100%;
- background-color: var(--black-0f);
-}
-
.container {
padding: 0 2rem;
}
@@ -175,6 +170,7 @@
}
.contentIcon {
+ object-fit: "contain";
margin-right: 0.4rem;
position: relative;
aspect-ratio: 1;