Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages 1 Activity Actions

Added styled-components + various

Browse source 
Includes changes due to NextJS version bump and attempts at storing theme via cookie
This commit is contained in:
Neshura 2022-12-14 19:35:27 +01:00
parent 8a763ee72e
commit 21e613891e
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
13 changed files with 325 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
app/layout.tsx Normal file
View 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> */

44
components/layout.tsx
View file

@ -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>
);
}

13
components/navbar.tsx
View file

@ -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
View 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
View 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
View 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;

38
pages/_app.tsx
View file

@ -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: {},
}
}
}

10
pages/_document.tsx
View file

@ -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 />

20
pages/games.tsx
View file

@ -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>
)
}

29
pages/index.tsx
View file

@ -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 &rarr;</h2>
<p>Useless Info, don&apos;t bother</p>
</a>
<Link className={styles.card} key="about" href="/about">
<h2>About &rarr;</h2>
<p>Useless Info, don&apos;t bother</p>
</Link>
<Link key="servers" href="/games">
<a className={styles.card}>
<h2>Games &rarr;</h2>
<p>List of all available Servers</p>
</a>
<Link className={styles.card} key="servers" href="/games">
<h2>Games &rarr;</h2>
<p>List of all available Servers</p>
</Link>
<Link key="services" href="/services">
<a className={styles.card}>
<h2>Services &rarr;</h2>
<p>List of available Services</p>
</a>
<Link className={styles.card} key="services" href="/services">
<h2>Services &rarr;</h2>
<p>List of available Services</p>
</Link>
</div>
</>
)
}
}

68
pages/services.tsx
View file

@ -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
View file

@ -0,0 +1,12 @@
import 'styled-components'
declare module 'styled-components' {
export interface DefaultTheme {
themeId: number,
colors: {
background: string,
primary: string
secondary: string
}
}
}

6
styles/Home.module.css
View file

@ -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;