Merge branch 'rework/cards' into main

components/layout.tsx

@@ -11,29 +11,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   if(isMobile) {
     ret = (
       <Page mobile={isMobile}>
-        <Script id="matomo_analytics"
-          defer src='https://static.cloudflareinsights.com/beacon.min.js'
-          data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
-        </Script>
-        <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>
-  
         <PageNavbar mobile={isMobile}/>
         <Main>
           {children}
@@ -44,11 +21,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   else {
     ret = (
       <Page>
-        <Script id="matomo_analytics"
-          defer src='https://static.cloudflareinsights.com/beacon.min.js'
-          data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
-        </Script>
-  
         <PageNavbar mobile={isMobile}/>
         <Main>
           {children}

components/navbar.tsx

@@ -42,7 +42,7 @@ const PageNavbar = ({ mobile }: { mobile: number }) => {
         <NavWrapMobile>
           <NavIndicators>
             {Links.links.map((item) => (
-              <NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
+              <NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} aria-label={item.name}/>
             ))}
           </NavIndicators>
         </NavWrapMobile>

components/styles/cards/desktop.tsx

@@ -0,0 +1,325 @@
+import { Service } from '../../../interfaces/CardTypes';
+import styled, { css, DefaultTheme } from 'styled-components';
+import Link from 'next/link';
+import Image from 'next/image';
+import OpenInNewTabIcon from '../../../public/icons/open-new-window.svg'
+
+// needed for Online Status checks
+interface OnlinePropType {
+  status: string;
+}
+
+interface BorderHelperType {
+  border_left: boolean;
+}
+
+const Card = styled.div<OnlinePropType>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30rem;
+  max-width: 90%;
+  height: 12.5rem;
+  margin: 1rem;
+
+  // themeing
+  border-top: 0.25rem solid;
+  border-radius: 10px;
+
+  color: ${({ theme }) => theme.colors.primary};
+  border-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;
+  }};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+
+
+  transition-property: max-height, margin-bottom;
+  transition-duration: 0.2s, 0s;
+  transition-delay: 0.2s, 0.2s;
+`
+
+// custom objects for CardTitle
+//#############################
+const CardHeaderWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-height: 3.5rem;
+  flex-grow: 0.8;
+`;
+
+const CardTitleText = styled.h2`
+  font-size: 1.2rem;
+  margin: 0.5rem 0;
+`;
+
+const CardTitleIcon = styled.div`
+  position: relative;
+  object-fit: contain;
+  margin-right: 0.4rem;
+  aspect-ratio: 1;
+  height: 1.5rem;
+`;
+
+
+const CardStatus = styled.p<OnlinePropType>`
+  display: flex;
+  flex-direction: row;
+
+  font-size: 0.9rem;
+  padding: 0.1rem 0.3rem;
+  margin: 0.5rem;
+  margin-right: 1.5rem;
+  
+  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;
+  }};
+
+  border-radius: 0.5rem;
+  border: 0;
+  border-bottom: 0.125rem solid;
+
+  background: transparent;
+`
+
+const CardTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  padding-left: 1rem;
+`
+
+const CardTitleLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  padding-left: 1rem;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+`
+
+// content visible when reduced
+const CardHeader = ({ content }: { content: Service }) => {
+  return (
+    <CardHeaderWrap>
+      {
+        content.href ?
+          <CardTitleLink href={content.href}>
+            {
+              content.icon ? (
+                <CardTitleIcon>
+                  <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
+                </CardTitleIcon>
+              ) : (<></>)
+            }
+            <CardTitleText>{content.name}</CardTitleText>
+            <OpenInNewTab>
+              <OpenInNewTabIcon width="16px" height="16px" />
+            </OpenInNewTab>
+          </CardTitleLink> :
+          <CardTitle>
+            {
+              content.icon ? (
+                <CardTitleIcon>
+                  <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
+                </CardTitleIcon>
+              ) : (<></>)
+            }
+            <CardTitleText>{content.name}</CardTitleText>
+          </CardTitle>
+      }
+      <CardStatus status={content.status}>{content.status}</CardStatus>
+    </CardHeaderWrap>
+  )
+}
+
+// custom objects for CardDescription
+//###################################
+
+// shared properties for all Description objects
+const CardDescriptionCommon = css`
+  text-align: left;
+  font-size: 0.9rem;
+  margin: 0.3rem;
+`
+
+// content visible when expanded
+const CardDescriptionWrap = styled.div`
+  ${CardDescriptionCommon}
+  padding: 0 1rem;
+  overflow: hidden; /* Hide scrollbars */
+  scrollbar-width: thin;
+  width: 100%;
+`
+
+const CardDescriptionExtended = styled.p`
+  ${CardDescriptionCommon}
+  margin: 0;
+  margin-bottom: 0.9rem;
+  width: 100%;
+`
+
+const CardDescriptionWarning = styled(CardDescriptionExtended)`
+  text-align: center;
+  color: ${({ theme }) => theme.colors.offline};
+  font-weight: bold;
+`
+
+const CardDescription = ({ content }: { content: Service }) => {
+  return (
+    <CardDescriptionWrap>
+      <CardDescriptionExtended>
+        {content.desc}
+      </CardDescriptionExtended>
+      <CardDescriptionWarning>
+        {content.warn}
+      </CardDescriptionWarning>
+    </CardDescriptionWrap>
+  )
+}
+
+// custom objects for CardFooter
+//##############################
+
+const CardFooterWrap = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-auto-flow: row;
+  //flex-direction: row;
+  align-items: center;
+  justify-items: center;
+  width: 100%;
+  position: absolute;
+  bottom: 5%;
+`
+
+const CardLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+  border: 0;
+  border-radius: 5px;
+  border-left: 2px solid;
+  border-right: 2px solid;
+
+  transition-property: overflow-x;
+  transition-duration: 0.2s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.background};
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  transition-property: background-color;
+  transition-duration: 0.5s;
+`
+
+const OpenInNewTab = styled.div`
+  color: ${({ theme }) => theme.colors.primary};
+  object-fit: contain;
+  aspect-ratio: 1;
+  height: 1rem;
+  width: 1rem;
+  max-width: 0;
+  overflow: hidden;
+  visibility: hidden;
+
+  ${CardLink}:hover & {
+    margin-left: 0.3rem;
+    max-width: 1rem;
+    transition-delay: 0s, 0s;
+    visibility: visible;
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  ${CardTitleLink}:hover & {
+    margin-left: 0.3rem;
+    max-width: 1rem;
+    transition-delay: 0s, 0s;
+    visibility: visible;
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  transition-property: max-width, margin-left, visibility;
+  transition-duration: 0.5s, 0s, 0S;
+  transition-delay: 0s, 0.2s, 0.2s;
+`
+
+
+const CardFooter = ({ content, href }: { content: Service, href: string }) => {
+  return (
+    <CardFooterWrap>
+      {href ? (
+        <CardLink href={href}>
+          Open
+          <OpenInNewTab>
+            <OpenInNewTabIcon width="16px" height="16px" />
+          </OpenInNewTab>
+        </CardLink>
+      ) : (<></>)}
+      {content.extLink ? (
+        <CardLink href={content.extLink}>
+          Official Site
+          <OpenInNewTab>
+            <OpenInNewTabIcon width="16px" height="16px" />
+          </OpenInNewTab>
+        </CardLink>
+      ) : (<></>)}
+    </CardFooterWrap>
+  )
+}
+
+// exported Card Elements
+//#######################
+
+export const ServiceCardDesktop = ({ content }: { content: Service }) => {
+  return (
+    <Card status={content.status}>
+      <CardHeader content={content} />
+      <CardDescription content={content} />
+      <CardFooter content={content} href={content.href ? content.href : ""} />
+    </Card>
+  )
+}

components/styles/cards/mobile.tsx

@@ -0,0 +1,249 @@
+import { Service } from '../../../interfaces/CardTypes';
+import styled, { css, DefaultTheme } from 'styled-components';
+import Link from 'next/link';
+import Image from 'next/image';
+import OpenInNewTabIcon from '../../../public/icons/open-new-window.svg'
+
+// needed for Online Status checks
+interface OnlinePropType {
+  status: string;
+}
+
+
+const Card = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30rem;
+  max-width: 90%;
+  min-height: 10rem;
+  max-height: 12.5rem;
+  margin: 1rem;
+
+  // themeing
+  border-top: 0.25rem solid;
+  border-radius: 10px;
+
+  color: ${({ theme }) => theme.colors.primary};
+  border-color: ${({ theme }) => theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.background};
+
+
+  transition-property: max-height, margin-bottom;
+  transition-duration: 0.2s, 0s;
+  transition-delay: 0.2s, 0.2s;
+`
+
+// custom objects for CardTitle
+//#############################
+const CardTitleWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  flex-grow: 0.8;
+`;
+
+const CardTitleText = styled.h2`
+  font-size: 1.2rem;
+  margin: 0.5rem 0;
+`;
+
+const CardTitleIcon = styled.div`
+  position: relative;
+  object-fit: contain;
+  margin-right: 0.4rem;
+  aspect-ratio: 1;
+  height: 1.5rem;
+`;
+
+const OpenInNewTab = styled.div`
+  color: ${({theme}) => theme.colors.primary };
+  position: relative;
+  object-fit: contain;
+  padding: 0.2rem;
+  margin-left: 0.5rem;
+  aspect-ratio: 1;
+  height: 1.5rem;
+`
+
+const CardStatus = styled.p<OnlinePropType>`
+  font-size: 0.9rem;
+  padding: 0.1rem;
+  margin: 0.5rem;
+  margin-right: 1.5rem;
+  
+  border-radius: 5px;
+  border: 0;
+  border-bottom: 0.125rem solid;
+
+  background: transparent;
+  
+  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;
+  }};
+`
+
+const CardTitleLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  margin: 0.5rem;
+  padding-left: 1rem;
+`
+
+const CardTitleLinkPlaceholder = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  margin: 0.5rem;
+  padding-left: 1rem;
+`
+
+// content visible when reduced
+const CardTitle = ({ content, href }: { content: Service, href: string }) => {
+  let card;
+
+  if (href) {
+    card = (
+      <CardTitleWrap>
+        <CardTitleLink href={href}>
+          {
+            content.icon ? (
+              <CardTitleIcon>
+                <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
+              </CardTitleIcon>
+            ) : (<></>)
+          }
+          <CardTitleText>{content.name}</CardTitleText>
+          {
+            <OpenInNewTab>
+              <OpenInNewTabIcon width="100%" height="100%"/>
+            </OpenInNewTab>
+          }
+        </CardTitleLink>
+        <CardStatus status={content.status}>{content.status}</CardStatus>
+      </CardTitleWrap>
+  
+    )
+  }
+  else {
+    card = (
+      <CardTitleWrap>
+        <CardTitleLinkPlaceholder>
+          {
+            content.icon ? (
+              <CardTitleIcon>
+                <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
+              </CardTitleIcon>
+            ) : (<></>)
+          }
+          <CardTitleText>{content.name}</CardTitleText>
+        </CardTitleLinkPlaceholder>  
+        <CardStatus status={content.status}>{content.status}</CardStatus>
+      </CardTitleWrap>
+  
+    )
+  }
+  return card
+}
+
+// custom objects for CardDescription
+//###################################
+
+// shared properties for all Description objects
+const CardDescriptionCommon = css`
+  text-align: left;
+  font-size: 0.9rem;
+  margin: 0.3rem;
+`
+
+// content visible when expanded
+const CardDescriptionWrap = styled.div`
+  ${CardDescriptionCommon}
+  padding: 0 1rem;
+  margin-bottom: 2rem;
+  overflow: hidden; /* Hide scrollbars */
+  scrollbar-width: thin;
+  width: 100%;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0.9rem;
+  }
+`
+
+const CardDescriptionExtended = styled.p`
+  ${CardDescriptionCommon}
+  margin: 0;
+  margin-bottom: 0.9rem;
+  width: 100%;
+`
+
+const CardDescription = ({ content }: { content: Service }) => {
+  let ret;
+
+  ret = (
+    <CardDescriptionWrap>
+      <CardDescriptionExtended>
+        {content.desc}
+      </CardDescriptionExtended>
+      <p>
+        {content.warn}
+      </p>
+      <a href={content.extLink}>
+        Official Site
+      </a>
+    </CardDescriptionWrap>
+  );
+
+  return ret;
+}
+
+// exported Card Elements
+//#######################
+
+export const ServiceCardMobile = ({ content }: { content: Service }) => {
+
+  let card;
+
+  // TEMP
+  if (content.href) {
+    card = (
+      <Card>
+        <CardTitle content={content} href={content.href}/>
+        <CardDescription content={content}/>
+      </Card>
+    )
+  }
+  else {
+    card = (
+      <Card>
+        <CardTitle content={content} href={""}/>
+        <CardDescription content={content}/>
+      </Card>
+    )
+  }
+
+  return card;
+}

components/styles/content.tsx

@@ -8,6 +8,7 @@ interface OnlinePropType {
   status: string;
 }
 
+// TODO: remove unneeded exports
 // replaces .title
 export const PageTitle = styled.h1`
   margin: 0;
@@ -33,13 +34,19 @@ export const PageDescription = styled.p`
 // replaces .grid
 export const PageContentBox = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
-  max-width: 80%;
+  width: 100%;
+  margin: 5.5rem;
 `;
 
-const CardStyle = css`
+// update for PageContentBox
+export const PageContentBoxNew = styled(PageContentBox)`
+  gap: 2rem 1rem;
+`
+
+export const CardStyle = css`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -88,20 +95,18 @@ export const PageCard = styled.div`
   ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
     color: ${({ theme }) => theme.colors.secondary};
     border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ? 
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
-      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 
   ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
     color: ${({ theme }) => theme.colors.secondary};
     border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ? 
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
-      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 `;
 
 // replaces the three status classes
-const OnlineStatus = styled.p<OnlinePropType>`
+export const OnlineStatus = styled.p<OnlinePropType>`
   color: ${props => {
     let ret;
     switch (props.status) {
@@ -139,25 +144,23 @@ const OnlineStatus = styled.p<OnlinePropType>`
 
   ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
     border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ? 
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
-      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 
   ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
     border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ? 
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
-      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 `;
 
 // replaces .cardwarn
-const CardContentWarning = styled.p`
+export const CardContentWarning = styled.p`
   color: ${({ theme }) => theme.colors.secondary};
   
 `;
 
 // replaces .contentIcon
-const CardContentTitleIcon = styled(Image)`
+export const CardContentTitleIcon = styled(Image)`
   object-fit: "contain";
   margin-right: 8px;
   aspect-ratio: 1;
@@ -165,7 +168,7 @@ const CardContentTitleIcon = styled(Image)`
 `;
 
 // replaces .contentTitle
-const CardContentTitleWrap = styled.div`
+export const CardContentTitleWrap = styled.div`
   position: relative;
   display: flex;
   flex-direction: row;
@@ -179,7 +182,7 @@ const CardContentTitleWrap = styled.div`
   }
 `;
 
-const CardContentTitle = ({ content }: { content: Service | Game }) => {
+export const CardContentTitle = ({ content }: { content: Service | Game }) => {
   return (
     <CardContentTitleWrap>
       {

components/styles/generic.tsx

@@ -19,6 +19,7 @@ export const Page = styled.div<MobilePropType>`
   background-attachment: fixed;
   background-size: cover;
   background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset :  "60%" : ""};
+  background-position-y: 0;
 `
 
 export const Main = styled.main`

components/styles/navbar/desktop.tsx

@@ -24,15 +24,12 @@ export const NavBar = styled.nav`
 `
 
 export const NavLink = styled(Link) <ActivePropType>`
-  color: ${props => props.active ?
+  color: ${props => ({ theme }) => props.active ? 
-    ({ theme }) => theme.invertButtons ?
+    theme.colors.text ? 
-      theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
+      theme.colors.text : theme.colors.secondary :
-    ({ theme }) => theme.colors.primary};
+    theme.colors.primary};
   
-  background-color: ${props => props.active ?
+  background-color: ${props => ({ theme }) => theme.colors.background};
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.secondary : theme.colors.background :
-    ({ theme }) => theme.colors.background};
 
   padding: 2px 6px;
   border: 2px solid;
@@ -43,12 +40,6 @@ export const NavLink = styled(Link) <ActivePropType>`
   transition: all 0.1s ease;
 
   &:hover {
-    color: ${({ theme }) => theme.invertButtons ?
+    color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
-
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.secondary :
-    theme.colors.background};
   }
 `

components/styles/navbar/mobile.tsx

@@ -55,7 +55,6 @@ export const NavSideMenu = styled.div <ActivePropType>`
     return ret;
   }};
   backdrop-filter: ${props => props.active ? "blur(5px)" : ""};
-
   overflow-x: hidden;
   transition-property: max-width, max-height, border-right, background-color, backdrop-filter;
   transition-timing-function: ease-in-out;
@@ -88,13 +87,8 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
   color: ${props => ({ theme }) => {
     let ret: string;
     if (props.active) {
-      if (theme.invertButtons) {
-        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
-      }
-      else {
       ret = theme.colors.secondary;
     }
-    }
     else {
       ret = theme.colors.primary;
     }
@@ -103,16 +97,11 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
   background-color: ${props => ({ theme }) => {
     let ret: string;
     if (props.active) {
-      if (theme.invertButtons) {
       ret = theme.colors.secondary;
     }
     else {
       ret = theme.colors.background;
     }
-    }
-    else {
-      ret = theme.colors.background;
-    }
     return ret;
   }};
 
@@ -121,13 +110,8 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
   border-color: ${props => ({ theme }) => {
     let ret: string;
     if (props.active) {
-      if (theme.invertButtons) {
-        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
-      }
-      else {
       ret = theme.colors.secondary;
     }
-    }
     else {
       ret = theme.colors.primary;
     }
@@ -136,36 +120,15 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
 
   &:hover {
     color: ${({ theme }) => {
-    let ret: string;
+    return  theme.colors.secondary
-    if (theme.invertButtons) {
-      ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
-    }
-    else {
-      ret = theme.colors.secondary;
-    }
-    return ret;
   }};
 
     background-color: ${({ theme }) => {
-    let ret: string;
+      return theme.colors.background
-    if (theme.invertButtons) {
-      ret = theme.colors.secondary;
-    }
-    else {
-      ret = theme.colors.background;
-    }
-    return ret;
   }};
 
     border-color: ${({ theme }) => {
-    let ret: string;
+      return theme.colors.secondary;
-      if (theme.invertButtons) {
-        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
-      }
-      else {
-        ret = theme.colors.secondary;
-      }
-    return ret;
   }};
   }
 `
@@ -206,6 +169,7 @@ export const NavIndicators = styled.nav`
   background-attachment: fixed;
   background-size: cover;
   background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset :  "60%"};
+  background-position-y: 0;
   width: 100%;
   display: flex;
   flex: 1;
@@ -221,29 +185,15 @@ export const NavIndicator = styled(Link) <ActivePropType>`
   aspect-ratio: 1;
   width: 10px;
   border: 1px solid; 
-  border-color: ${ props => ({ theme }) => props.active ? 
+  border-color: ${ props => ({ theme }) => props.active ? theme.colors.primary : theme.colors.primary};
-    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
-    theme.colors.primary
-  };
 
-  background-color: ${props => ({ theme }) => props.active ?
+  background-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.background};
-    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
-    theme.colors.background
-  };
 
   &:hover {
-    border-color: ${ props => ({ theme }) =>
+    border-color: ${({ theme }) => theme.colors.primary};
-      theme.invertButtons ? theme.colors.secondary : theme.colors.primary
-    };
 
-    color: ${({ theme }) => theme.invertButtons ?
+    color: ${({ theme }) => theme.colors.primary};
-      theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
-      theme.colors.primary
-    };
 
-    background-color: ${({ theme }) => theme.invertButtons ?
+    background-color: ${({ theme }) => theme.colors.primary};
-      theme.colors.secondary :
-      theme.colors.primary
-    };
   }
 `

components/styles/themedropdown/desktop.tsx

@@ -20,12 +20,12 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
   border: 2px solid;
   border-radius: 5px;
   background-color: ${ props => props.focus ? 
-    ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : 
+    ({ theme }) => theme.colors.background : 
     ({ theme }) => theme.colors.background};
   padding: 2px 6px;
   cursor: pointer;
-  color: ${props => props.focus ? ({ theme }) => theme.invertButtons ? 
+  color: ${props => props.focus ? 
-    theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : 
+    ({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary : 
     ({ theme }) => theme.colors.primary};
 
   transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color;
@@ -34,13 +34,9 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
   transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
 
   &:focus,:hover {
-    color: ${({ theme }) => theme.invertButtons ? 
+    color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
 
-    background-color: ${({ theme }) => theme.invertButtons ? 
+    background-color: ${({ theme }) => theme.colors.background};
-    theme.colors.secondary :
-    theme.colors.background};
   }
 
   border-bottom-left-radius: ${ props => props.show ? "0" : "" };

interfaces/CardTypes.ts

@@ -13,10 +13,11 @@ export interface Game {
 
 export interface Service {
   name: string,
-  icon: string,
+  icon?: string,
-  href: string,
+  href?: string,
   desc: string,
-  warn: string,
+  warn?: string,
+  extLink?: string,
   type: ServiceType,
   docker_container_name: string,
   location: ServiceLocation,

next.config.js

@@ -5,6 +5,14 @@ const nextConfig = {
   output: 'standalone',
   compiler: {
     styledComponents: true,
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [{ loader: "@svgr/webpack", options: { icon: true } }]
+    });
+
+    return config;
   }
 };
 

package.json

@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "dockerode": "^3.3.4",
+    "@svgr/webpack": "^6.5.1",
     "eslint-config": "^0.3.0",
     "next": "^13.0.6",
     "react": "^18.2.0",

pages/api/containers.tsx

@@ -1,4 +1,3 @@
-import Docker from 'dockerode'
 import ApiSecret from '../../private/portainer_api_secret.json'
 import { DockerInfo } from '../../interfaces/DockerStatus';
 import { ServiceLocation } from '../../interfaces/CardTypes';

pages/services.tsx

@@ -1,36 +1,59 @@
 import Head from 'next/head'
-import { Service, Status, ServiceType, ServiceLocation } from '../interfaces/CardTypes';
+import { Service, Status, ServiceType } from '../interfaces/CardTypes';
-import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
-import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
 import ServiceList from '../public/data/pages.json';
 import { DockerInfo } from '../interfaces/DockerStatus';
+import { PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import useWindowSize from '../components/windowsize';
+import { ServiceCardMobile } from '../components/styles/cards/mobile';
+import { ServiceCardDesktop } from '../components/styles/cards/desktop';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
   const { initialData, fullData, loadingFull, error } = useServices();
+  const isMobile = useWindowSize();
 
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
   else if (loadingFull) {
+    if (isMobile) {
       content =
         <PageContentBox>
           {initialData?.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
+            <ServiceCardMobile key={item.name} content={item} />
           ))}
         </PageContentBox>
     }
+    else {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <ServiceCardDesktop key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+  }
   else if (fullData) {
+    if (isMobile) {
       content =
         <PageContentBox>
           {fullData.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
+            <ServiceCardMobile key={item.name} content={item} />
           ))}
         </PageContentBox>
     }
+    else {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <ServiceCardDesktop key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+  }
   else {
     content = <div>Error loading data</div>
   }
@@ -62,7 +85,7 @@ async function getStatus(entry: Service, containers: DockerInfo[]) {
   // Others to follow but low prio as this is currently the only location used
 
   // Type APP
-  if (entry.type === ServiceType.app) {
+  if (entry.type === ServiceType.app && entry.href) {
     await fetch(entry.href)
       .then((response) => {
         if (response.ok) {

public/data/pages.json

@@ -3,9 +3,10 @@
     {
       "name": "Nextcloud",
       "icon": "/icons/nextcloud-logo.svg",
-      "href": "https://nextcloud.neshweb.net",
+      "href": "https://nextcloud.neshweb.net/",
-      "desc": "Self-hosted Cloud Storage Service",
+      "desc": "Self-hosted Cloud Storage Service but longer and hopefully with wrap as well as some extra just to make sure",
       "warn": "Note: Registration requires approval",
+      "extLink": "https://nextcloud.com/",
       "type": "docker",
       "docker_container_name": "nextcloud",
       "location": "tower-0"
@@ -33,7 +34,7 @@
     {
       "name": "PeerTube",
       "icon": "/icons/peertube-logo.svg",
-      "href": "https://tube.neshweb.net",
+      "href": "https://tube.neshweb.net/",
       "desc": "Self-hosted PeerTube Instance",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -43,7 +44,7 @@
     {
       "name": "Mastodon",
       "icon": "/icons/mastodon-logo.svg",
-      "href": "https://mastodon.neshweb.net",
+      "href": "https://mastodon.neshweb.net/",
       "desc": "Self-hosted Mastodon Instance",
       "warn": "Note: Registration requires approval",
       "type": "docker",
@@ -120,7 +121,7 @@
       "location": "tower-0"
     },
     {
-      "name": "Nginx Proxy Manager",
+      "name": "Nginx",
       "icon": "/icons/npm-logo.png",
       "href": "https://nginx.neshweb.net/",
       "desc": "Web-based Nginx Proxy Manager",
@@ -129,6 +130,25 @@
       "docker_container_name": "nginx-prox",
       "location": "tower-0"
     },
+    {
+      "name": "Debug1",
+      "href": "https://qwant.com",
+      "desc": "Debug Debug Debug",
+      "warn": "Note: Debug",
+      "extLink": "https://qwant.com",
+      "type": "docker",
+      "docker_container_name": "matomo-web",
+      "location": "tower-0"
+    },
+    {
+      "name": "Debug2",
+      "desc": "Debug Debug Debug",
+      "warn": "Note: Debug",
+      "extLink": "https://qwant.com",
+      "type": "docker",
+      "docker_container_name": "Debug",
+      "location": "tower-0"
+    },
     {
       "name": "Proxmox",
       "icon": "/icons/proxmox-logo.png",

public/data/themes.json

@@ -17,6 +17,7 @@
       "themeId": 1,
       "colors": {
         "background": "#161616",
+        "backgroundAlt": "#000000",
         "primary": "#00AAFF",
         "secondary": "#FF5500",
         "online": "#2BFF00",
@@ -29,6 +30,7 @@
       "themeId": 2,
       "colors": {
         "background": "#000000",
+        "backgroundAlt": "#161616",
         "primary": "#00AAFF",
         "secondary": "#FF5500",
         "online": "#2BFF00",
@@ -41,6 +43,7 @@
       "themeId": 3,
       "colors": {
         "background": "#000000",
+        "backgroundAlt": "#161616",
         "primary": "#886aff",
         "secondary": "#E1FF6A",
         "online": "#00ff00",
@@ -53,13 +56,10 @@
       "themeId": 4,
       "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
       "backgroundOffset": "60%",
-      "invertButtons": true,
       "colors": {
         "background": "#0008",
-        "backgroundAlt": "#000d",
         "primary": "#ccc",
         "secondary": "#00C7C7",
-        "text": "#000",
         "online": "#00ff00",
         "loading": "#0063C7",
         "offline": "#ff0000"
@@ -69,7 +69,6 @@
       "themeName": "dev",
       "themeId": 5,
       "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
-      "invertButtons": true,
       "colors": {
         "background": "#0000",
         "backgroundAlt": "#0000",

public/icons/open-new-window.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
+    <path d="M21 3h-6m6 0l-9 9m9-9v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+</svg>

styled.d.ts

@@ -6,7 +6,6 @@ declare module 'styled-components' {
     themeId: number,
     backgroundImage?: string,
     backgroundOffset?: string,
-    invertButtons?: boolean,
     colors: {
       background: string,
       backgroundAlt?: string,