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

Repalced CSS Themes with styled-components on index, about and games

Browse source
This commit is contained in:
Neshura 2022-12-15 23:20:26 +01:00
parent dd1ab4bad9
commit d60c6ca3b5
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
7 changed files with 166 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
components/styles/content.tsx Normal file
View file

@ -0,0 +1,98 @@
import Link from 'next/link'
import styled, { DefaultTheme } from 'styled-components'
import { CustomLink } from '../../interfaces/LinkTypes';
// needed for Online Status checks
// TODO: migrate to shared Status type for Games and Services
interface OnlinePropType {
status: string;
}
// replaces .title
export const PageTitle = styled.h1`
margin: 0;
line-height: 1.15;
font-size: 4rem;
text-align: center;
`
// replaces .description
export const PageDescription = styled.p`
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
text-align: center;
`
// replaces .grid
export const PageContentBox = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 80%;
`
// replaces .card & .contentcard
export const PageCard = styled.div`
margin: 1rem;
padding: 1rem;
text-align: center;
color: ${({ theme }) => theme.colors.primary};
text-decoration: none;
border: 1px solid;
border-radius: 10px;
border-color: ${({ theme }) => theme.colors.primary};
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
&:focus,:active,:hover {
color: ${({ theme }) => theme.colors.secondary};
border-color: ${({ theme }) => theme.colors.secondary};
}
`
const OnlineStatus = styled.p<OnlinePropType>`
color: ${props => {
let ret;
switch (props.status) {
case "Online":
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online;
break;
case "Loading":
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading;
break;
case "Offline":
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
break;
default:
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
}
return ret;
}};
`
// Card Content Component for Games Page
export const PageCardContentGame = ({ content }: { content: CustomLink }) => {
return (
<>
<h2>{content.name}</h2>
<p>{content.desc}</p>
<p>{content.ip}</p>
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
</>
)
}
// Card Content Component for Services Page

12
components/themes.tsx
View file

@ -30,6 +30,9 @@ export const lightTheme: DefaultTheme = {
background: '#ffffff', background: '#ffffff',
primary: '#00aaff', primary: '#00aaff',
secondary:'#ffaa00', secondary:'#ffaa00',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
}, },
} }
@ -40,6 +43,9 @@ export const darkTheme: DefaultTheme = {
background: '#1f1f1f', background: '#1f1f1f',
primary: '#00aaff', primary: '#00aaff',
secondary:'#ffaa00', secondary:'#ffaa00',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
}, },
} }
@ -50,6 +56,9 @@ export const amoledTheme: DefaultTheme = {
background: '#000000', background: '#000000',
primary: '#00aaff', primary: '#00aaff',
secondary:'#ffaa00', secondary:'#ffaa00',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
}, },
} }
@ -60,5 +69,8 @@ export const amoled2Theme: DefaultTheme = {
background: '#000000', background: '#000000',
primary: '#00ffaa', primary: '#00ffaa',
secondary:'#aa00ff', secondary:'#aa00ff',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
}, },
} }

13
pages/about.tsx
View file

@ -1,20 +1,21 @@
import Head from 'next/head' import Head from 'next/head'
import styles from '/styles/Home.module.css' import { PageDescription, PageTitle } from '../components/styles/content'
export default function About() { export default function About() {
return ( return (
<> <>
<Head> <Head>
<title>Neshura Servers</title> <title>Neshweb - About</title>
<meta charSet='utf-8' /> <meta charSet='utf-8' />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<h1 className={styles.title}>
<PageTitle>
About About
</h1> </PageTitle>
<p className={styles.description}> <PageDescription>
This website is primarily for managing my game servers in one spot This website is primarily for managing my game servers in one spot
</p> </PageDescription>
</> </>
) )
} }

37
pages/games.tsx
View file

@ -1,53 +1,50 @@
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link'
import styles from '/styles/Home.module.css' import styles from '/styles/Home.module.css'
import fsPromises from 'fs/promises' import fsPromises from 'fs/promises'
import path from 'path' import path from 'path'
import type { CustomLink, EntryList } from '../interfaces/LinkTypes' import type { CustomLink, EntryList } from '../interfaces/LinkTypes'
import { PageContentBox, PageCard, PageDescription, PageTitle, PageCardContentGame } from '../components/styles/content'
import Link from 'next/link'
function Servers(props: EntryList) { function Servers(props: EntryList) {
const serverList = props.games const serverList = props.games
return ( return (
<> <>
<Head> <Head>
<title>Neshura Servers</title> <title>Neshweb - Games</title>
<meta charSet='utf-8' /> <meta charSet='utf-8' />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<h1 className={styles.title}> <PageTitle>
Server List Server List
</h1> </PageTitle>
<p className={styles.description}> <PageDescription>
Lists all available Services, probably up-to-date Lists all available Services, probably up-to-date
</p> </PageDescription>
<div className={styles.grid}>
<PageContentBox>
{Object.values(serverList).map((item: CustomLink) => { {Object.values(serverList).map((item: CustomLink) => {
if (item.href != null) { if (item.href != null) {
return ( return (
<Link className={styles.contentcard} key={item.name} href={item.href}> <PageCard key={item.name}>
<div className={styles.contenttitle}><h2>{item.name}</h2></div> <Link href={item.href}>
<div><p>{item.desc}</p></div> <PageCardContentGame content={item} />
<div><p>{item.ip}</p></div>
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
</Link> </Link>
</PageCard>
) )
} }
else { else {
return ( return (
<a key={item.name} className={styles.contentcardstatic}> <PageCard key={item.name}>
<div className={styles.contenttitle}><h2>{item.name}</h2></div> <PageCardContentGame content={item} />
<div><p>{item.desc}</p></div> </PageCard>
<div><p>{item.ip}</p></div>
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
</a>
) )
} }
} }
)} )}
</div> </PageContentBox>
</> </>
) )
} }

29
pages/index.tsx
View file

@ -1,6 +1,6 @@
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link';
import styles from '/styles/Home.module.css' import { PageTitle, PageDescription, PageContentBox, PageCard } from '../components/styles/content';
export default function Home() { export default function Home() {
return ( return (
@ -10,30 +10,35 @@ export default function Home() {
<meta charSet='utf-8' /> <meta charSet='utf-8' />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<h1 className={styles.title}> <PageTitle>
Welcome to my Servers Webpage Welcome to my Servers Webpage
</h1> </PageTitle>
<p className={styles.description}> <PageDescription>
Feel free to look around Feel free to look around
</p> </PageDescription>
<div className={styles.grid}> <PageContentBox>
<Link className={styles.card} key="about" href="/about"> <PageCard key="about">
<Link href="/about">
<h2>About &rarr;</h2> <h2>About &rarr;</h2>
<p>Useless Info, don&apos;t bother</p> <p>Useless Info, don&apos;t bother</p>
</Link> </Link>
</PageCard>
<Link className={styles.card} key="servers" href="/games"> <PageCard key="servers">
<Link href="/games">
<h2>Games &rarr;</h2> <h2>Games &rarr;</h2>
<p>List of all available Servers</p> <p>List of all available Servers</p>
</Link> </Link>
</PageCard>
<Link className={styles.card} key="services" href="/services"> <PageCard key="services">
<Link href="/services">
<h2>Services &rarr;</h2> <h2>Services &rarr;</h2>
<p>List of available Services</p> <p>List of available Services</p>
</Link> </Link>
</PageCard>
</div> </PageContentBox>
</> </>
) )
} }

3
styled.d.ts vendored
View file

@ -8,6 +8,9 @@ declare module 'styled-components' {
background: string, background: string,
primary: string, primary: string,
secondary: string, secondary: string,
online: string,
loading: string,
offline: string,
} }
} }
} }

147
styles/Home.module.css
View file

@ -2,72 +2,6 @@
padding: 0 2rem; padding: 0 2rem;
} }
.main {
color: var(--def-blue);
min-height: 100vh;
padding: 1rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.navbar {
display: flex;
flex: 1;
padding: 2rem 0;
border-bottom: 1px solid var(--def-blue);
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.navelem {
width: auto;
color: var(--def-blue);
margin: 0.2rem;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0.05;
}
.navelem:hover {
color: var(--def-orange);
background-color: var(--black-1e);
}
.navelem_active {
width: auto;
color: var(--def-orange);
margin: 0.2rem;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0.05;
}
.footer {
color: var(--def-blue);
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid var(--def-blue);
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a { .title a {
color: var(--def-orange); color: var(--def-orange);
text-decoration: none; text-decoration: none;
@ -79,23 +13,6 @@
text-decoration: underline; text-decoration: underline;
} }
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code { .code {
background: var(--black-1e); background: var(--black-1e);
border-radius: 5px; border-radius: 5px;
@ -105,39 +22,6 @@
Bitstream Vera Sans Mono, Courier New, monospace; Bitstream Vera Sans Mono, Courier New, monospace;
} }
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 80%;
}
.statusOffline {
color: var(--def-red);
}
.statusOnline {
color: var(--def-green);
}
.statusLoading {
color: var(--def-orange);
}
.contentcard {
margin: 1rem;
padding: 1rem;
text-align: center;
color: inherit;
text-decoration: none;
border: 1px solid var(--black-2d);
border-radius: 10px;
border-color: var(--def-blue);
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.contentcardstatic { .contentcardstatic {
margin: 1rem; margin: 1rem;
padding: 1rem; padding: 1rem;
@ -177,37 +61,6 @@
height: 1.5rem; height: 1.5rem;
} }
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid var(--black-2d);
border-radius: 10px;
border-color: var(--def-blue);
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: var(--def-orange);
border-color: var(--def-orange);
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.cardwarn { .cardwarn {
color: var(--def-orange); color: var(--def-orange);
} }