Added styled-components + various
Includes changes due to NextJS version bump and attempts at storing theme via cookie
This commit is contained in:
parent
8a763ee72e
commit
21e613891e
13 changed files with 325 additions and 102 deletions
76
app/layout.tsx
Normal file
76
app/layout.tsx
Normal file
|
@ -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 (
|
||||
<html lang="en">
|
||||
<ThemeProvider theme={selectedTheme}>
|
||||
<ThemeUpdateContext.Provider value={setselectedTheme}>
|
||||
<Page>
|
||||
|
||||
<Navbar />
|
||||
<StyleSelector></StyleSelector>
|
||||
<body className={styles.main}>
|
||||
{children}
|
||||
</body>
|
||||
</Page>
|
||||
</ThemeUpdateContext.Provider>
|
||||
</ThemeProvider>
|
||||
|
||||
|
||||
</html >
|
||||
)
|
||||
}
|
||||
|
||||
{/* <Page>
|
||||
<Navbar />
|
||||
<StyleSelector></StyleSelector>
|
||||
<body className={styles.main}>
|
||||
{children}
|
||||
</body>
|
||||
<Footer />
|
||||
</Page> */}
|
||||
|
||||
/* <html>
|
||||
<head />
|
||||
<body>{children}</body>
|
||||
</html> */
|
||||
|
||||
{/* <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> */
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
8
components/styles/generic.tsx
Normal file
8
components/styles/generic.tsx
Normal file
|
@ -0,0 +1,8 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
const Page = styled.div`
|
||||
width: 100%;
|
||||
background-color: ${({ theme }) => theme.colors.background};
|
||||
`
|
||||
|
||||
export { Page }
|
51
components/themes.tsx
Normal file
51
components/themes.tsx
Normal file
|
@ -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',
|
||||
},
|
||||
}
|
52
components/themeselector.tsx
Normal file
52
components/themeselector.tsx
Normal file
|
@ -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;
|
|
@ -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<P = {}, IP = P> = NextPage<P, IP> & {
|
||||
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) => (
|
||||
<Layout>{page}</Layout>))
|
||||
|
||||
return getLayout(<Component {...pageProps} />)
|
||||
return (
|
||||
<ThemeProvider theme={selectedTheme}>
|
||||
<ThemeUpdateContext.Provider value={setselectedTheme}>
|
||||
{getLayout(<Component {...pageProps} />)}
|
||||
</ThemeUpdateContext.Provider>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
|
||||
return {
|
||||
props: {
|
||||
token: {},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<Html lang='en'>
|
||||
<Head />
|
||||
|
|
|
@ -26,23 +26,21 @@ function Servers(props: EntryList) {
|
|||
{Object.values(serverList).map((item: CustomLink) => {
|
||||
if (item.href != null) {
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className={styles.contentcard}>
|
||||
<div className={styles.contenttitle}><h2>{item.name }</h2></div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div><p>{item.ip }</p></div>
|
||||
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
|
||||
</a>
|
||||
<Link className={styles.contentcard} key={item.name} href={item.href}>
|
||||
<div className={styles.contenttitle}><h2>{item.name}</h2></div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div><p>{item.ip}</p></div>
|
||||
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<a key={item.name} className={styles.contentcardstatic}>
|
||||
<div className={styles.contenttitle}><h2>{item.name }</h2></div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div><p>{item.ip}</p></div>
|
||||
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
|
||||
<div className={styles.contenttitle}><h2>{item.name}</h2></div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div><p>{item.ip}</p></div>
|
||||
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -6,11 +6,10 @@ export default function Home() {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Neshura Servers</title>
|
||||
<title>Neshweb - Home</title>
|
||||
<meta charSet='utf-8' />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<h1 className={styles.title}>
|
||||
Welcome to my Servers Webpage
|
||||
</h1>
|
||||
|
@ -19,28 +18,22 @@ export default function Home() {
|
|||
Feel free to look around
|
||||
</p>
|
||||
<div className={styles.grid}>
|
||||
<Link key="about" href="/about">
|
||||
<a className={styles.card}>
|
||||
<h2>About →</h2>
|
||||
<p>Useless Info, don't bother</p>
|
||||
</a>
|
||||
<Link className={styles.card} key="about" href="/about">
|
||||
<h2>About →</h2>
|
||||
<p>Useless Info, don't bother</p>
|
||||
</Link>
|
||||
|
||||
<Link key="servers" href="/games">
|
||||
<a className={styles.card}>
|
||||
<h2>Games →</h2>
|
||||
<p>List of all available Servers</p>
|
||||
</a>
|
||||
<Link className={styles.card} key="servers" href="/games">
|
||||
<h2>Games →</h2>
|
||||
<p>List of all available Servers</p>
|
||||
</Link>
|
||||
|
||||
<Link key="services" href="/services">
|
||||
<a className={styles.card}>
|
||||
<h2>Services →</h2>
|
||||
<p>List of available Services</p>
|
||||
</a>
|
||||
<Link className={styles.card} key="services" href="/services">
|
||||
<h2>Services →</h2>
|
||||
<p>List of available Services</p>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -20,24 +20,22 @@ function Services() {
|
|||
content =
|
||||
<div className={styles.grid}>
|
||||
{initialData?.map((item: Service) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className={styles.contentcard}>
|
||||
<div className={styles.contentTitle}>
|
||||
{
|
||||
item.icon ? (
|
||||
<div className={styles.contentIcon}>
|
||||
<Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
|
||||
</div>
|
||||
) : (<></>)
|
||||
}
|
||||
<h2>{item.name}</h2>
|
||||
</div>
|
||||
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
|
||||
{item.status}
|
||||
</div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div className={styles.cardwarn}><p>{item.warn}</p></div>
|
||||
</a>
|
||||
<Link className={styles.contentcard} key={item.name} href={item.href}>
|
||||
<div className={styles.contentTitle}>
|
||||
{
|
||||
item.icon ? (
|
||||
<div className={styles.contentIcon}>
|
||||
<Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
|
||||
</div>
|
||||
) : (<></>)
|
||||
}
|
||||
<h2>{item.name}</h2>
|
||||
</div>
|
||||
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
|
||||
{item.status}
|
||||
</div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div className={styles.cardwarn}><p>{item.warn}</p></div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
@ -46,24 +44,22 @@ function Services() {
|
|||
content =
|
||||
<div className={styles.grid}>
|
||||
{fullData.map((item: Service) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className={styles.contentcard}>
|
||||
<div className={styles.contentTitle}>
|
||||
{
|
||||
item.icon ? (
|
||||
<div className={styles.contentIcon}>
|
||||
<Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
|
||||
</div>
|
||||
) : (<></>)
|
||||
}
|
||||
<h2>{item.name}</h2>
|
||||
</div>
|
||||
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
|
||||
{item.status}
|
||||
</div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div className={styles.cardwarn}><p>{item.warn}</p></div>
|
||||
</a>
|
||||
<Link className={styles.contentcard} key={item.name} href={item.href}>
|
||||
<div className={styles.contentTitle}>
|
||||
{
|
||||
item.icon ? (
|
||||
<div className={styles.contentIcon}>
|
||||
<Image alt="icon" src={item.icon} fill></Image>
|
||||
</div>
|
||||
) : (<></>)
|
||||
}
|
||||
<h2>{item.name}</h2>
|
||||
</div>
|
||||
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
|
||||
{item.status}
|
||||
</div>
|
||||
<div><p>{item.desc}</p></div>
|
||||
<div className={styles.cardwarn}><p>{item.warn}</p></div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
|
12
styled.d.ts
vendored
Normal file
12
styled.d.ts
vendored
Normal file
|
@ -0,0 +1,12 @@
|
|||
import 'styled-components'
|
||||
|
||||
declare module 'styled-components' {
|
||||
export interface DefaultTheme {
|
||||
themeId: number,
|
||||
colors: {
|
||||
background: string,
|
||||
primary: string
|
||||
secondary: string
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue