From 2ec2f70772fae95a1f105a02e9bbb02ea9e37409 Mon Sep 17 00:00:00 2001 From: Neshura Date: Fri, 16 Dec 2022 00:11:30 +0100 Subject: [PATCH] Finished replacing components Closes #17, #15 --- components/styles/content.tsx | 68 ++++++++++++++++++++++++++++--- components/styles/generic.tsx | 6 +++ components/themes.tsx | 6 +-- pages/_app.tsx | 10 +++-- pages/_document.tsx | 7 ++-- pages/games.tsx | 7 ++-- pages/services.tsx | 64 +++++++++-------------------- styles/Home.module.css | 77 ----------------------------------- styles/globals.css | 26 ------------ 9 files changed, 103 insertions(+), 168 deletions(-) diff --git a/components/styles/content.tsx b/components/styles/content.tsx index 14e7493..a0b6564 100644 --- a/components/styles/content.tsx +++ b/components/styles/content.tsx @@ -1,6 +1,8 @@ -import Link from 'next/link' -import styled, { DefaultTheme } from 'styled-components' +import Link from 'next/link'; +import Image from 'next/image'; +import styled, { DefaultTheme } from 'styled-components'; import { CustomLink } from '../../interfaces/LinkTypes'; +import { Service } from '../../interfaces/Services'; // needed for Online Status checks // TODO: migrate to shared Status type for Games and Services @@ -53,7 +55,7 @@ export const PageCard = styled.div` p { margin: 0; - font-size: 1.25rem; + font-size: 1.2rem; line-height: 1.5; } @@ -63,6 +65,7 @@ export const PageCard = styled.div` } ` +// replaces the three status classes const OnlineStatus = styled.p` color: ${props => { let ret; @@ -83,11 +86,54 @@ const OnlineStatus = styled.p` }}; ` +// replaces .cardwarn +const CardContentWarning = styled.p` + color: ${({ theme }) => theme.colors.secondary}; +` + +// replaces .contentIcon +const CardContentTitleIcon = styled.div` + object-fit: "contain"; + margin-right: 0.4rem; + position: relative; + aspect-ratio: 1; + height: 1.5rem; +` + +// replaces .contentTitle +const CardContentTitleWrap = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: 1rem; + + h2 { + margin: 0; + white-space: nowrap; + } +` + +const CardContentTitle = ({ content }: { content: Service | CustomLink }) => { + return ( + + { + content.icon ? ( + + icon + + ) : (<>) + } +

{content.name}

+ + ) +} + // Card Content Component for Games Page -export const PageCardContentGame = ({ content }: { content: CustomLink }) => { +export const CardContentGame = ({ content }: { content: CustomLink }) => { return ( <> -

{content.name}

+

{content.desc}

{content.ip}

{content.status} @@ -95,4 +141,14 @@ export const PageCardContentGame = ({ content }: { content: CustomLink }) => { ) } -// Card Content Component for Services Page \ No newline at end of file +// Card Content Component for Services Page +export const CardContentService = ({ content }: { content: Service }) => { + return ( + <> + + {content.status} +

{content.desc}

+ {content.warn} + + ) +} \ No newline at end of file diff --git a/components/styles/generic.tsx b/components/styles/generic.tsx index c36f720..bf14ba1 100644 --- a/components/styles/generic.tsx +++ b/components/styles/generic.tsx @@ -1,5 +1,11 @@ import styled from 'styled-components' +export const StyledBody = styled.body` + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +` export const Page = styled.div` width: 100%; diff --git a/components/themes.tsx b/components/themes.tsx index 6fd698c..7e8ca25 100644 --- a/components/themes.tsx +++ b/components/themes.tsx @@ -1,11 +1,9 @@ // Probably a good idea to spread this out into multiple files under a folder once it gets bigger import { createGlobalStyle, DefaultTheme } from 'styled-components' -// TODO: unsure whether needed -/* const GlobalStyle = createGlobalStyle` +export const GlobalStyle = createGlobalStyle` html, body { - color: ${({ theme }) => theme.colors.primary}; padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, @@ -21,8 +19,6 @@ import { createGlobalStyle, DefaultTheme } from 'styled-components' } ` -export default GlobalStyle; */ - export const lightTheme: DefaultTheme = { themeName: "Light Theme", themeId: 0, diff --git a/pages/_app.tsx b/pages/_app.tsx index c2fb699..ec2d25f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,11 +1,11 @@ import '/styles/globals.css' -import type { ReactElement, ReactNode } from 'react' +import { Fragment, 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 { darkTheme } from '../components/themes'; +import { darkTheme, GlobalStyle } from '../components/themes'; import { getTheme } from '../components/themeselector'; export type NextPageWithLayout

= NextPage & { @@ -44,10 +44,14 @@ export default function Website({ Component, pageProps }: AppPropsWithLayout) { {page})) return ( - + + + {getLayout()} + + ) } diff --git a/pages/_document.tsx b/pages/_document.tsx index df85316..2acf6be 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,14 +1,15 @@ -import { Html, Head, Main, NextScript, DocumentContext } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' +import { StyledBody } from '../components/styles/generic' export default function Document() { return ( - +

- + ) } \ No newline at end of file diff --git a/pages/games.tsx b/pages/games.tsx index a22941b..ab71b03 100644 --- a/pages/games.tsx +++ b/pages/games.tsx @@ -1,9 +1,8 @@ import Head from 'next/head' -import styles from '/styles/Home.module.css' import fsPromises from 'fs/promises' import path from 'path' import type { CustomLink, EntryList } from '../interfaces/LinkTypes' -import { PageContentBox, PageCard, PageDescription, PageTitle, PageCardContentGame } from '../components/styles/content' +import { PageContentBox, PageCard, PageDescription, PageTitle, CardContentGame } from '../components/styles/content' import Link from 'next/link' function Servers(props: EntryList) { @@ -30,7 +29,7 @@ function Servers(props: EntryList) { return ( - + ) @@ -38,7 +37,7 @@ function Servers(props: EntryList) { else { return ( - + ) } diff --git a/pages/services.tsx b/pages/services.tsx index 6b84033..3921a80 100644 --- a/pages/services.tsx +++ b/pages/services.tsx @@ -1,11 +1,10 @@ import Head from 'next/head' import Link from 'next/link' -import styles from '/styles/Home.module.css' import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/Services'; import Dockerode from 'dockerode'; import { ReactElement } from 'react' import useSWR from 'swr'; -import Image from 'next/image'; +import { PageCard, CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content'; const fetcher = (url: string) => fetch(url).then((res) => res.json()) @@ -18,51 +17,28 @@ function Services() { else if (loadingInitial) { content =
Loading
} else if (loadingFull) { content = -
+ {initialData?.map((item: Service) => ( - -
- { - item.icon ? ( -
- icon -
- ) : (<>) - } -

{item.name}

-
-
- {item.status} -
-

{item.desc}

-

{item.warn}

- + + + + + ))} -
+ + } else if (fullData) { content = -
+ {fullData.map((item: Service) => ( - -
- { - item.icon ? ( -
- icon -
- ) : (<>) - } -

{item.name}

-
-
- {item.status} -
-

{item.desc}

-

{item.warn}

- + + + + + ))} -
+ } else { content =
Error loading data
@@ -77,13 +53,13 @@ function Services() { -

+ Service List -

+ -

+ Lists all available Services, most likely up-to-date -

+ {content} diff --git a/styles/Home.module.css b/styles/Home.module.css index 6a80c0c..8b13789 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,78 +1 @@ -.container { - padding: 0 2rem; -} -.title a { - color: var(--def-orange); - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.code { - background: var(--black-1e); - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.contentcardstatic { - 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; -} - -.contentcard:hover, -.contentcard:focus, -.contentcard:active { - color: var(--def-orange); - border-color: var(--def-orange); -} - -.contentTitle { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -} - -.contentTitle h2 { - white-space: nowrap; -} - -.contentIcon { - object-fit: "contain"; - margin-right: 0.4rem; - position: relative; - aspect-ratio: 1; - height: 1.5rem; -} - -.cardwarn { - color: var(--def-orange); -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/globals.css b/styles/globals.css index 7891fa5..8b13789 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,27 +1 @@ -html, -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -} -:root { - --black-0f: #0f0f0f; - --black-1e: #1e1e1e; - --black-2d: #2d2d2d; - - --def-blue: #00aaff; - --def-orange: #ff5300; - --def-red: #ff0000; - --def-green: #00ff00; -} - -a { - color: inherit; - text-decoration: none; -} - -* { - box-sizing: border-box; -}