more reponsive styling & git version in build

PssbleTrngle · Aug 20, 2023 · 858a13f · 858a13f
1 parent b43fb3a
commit 858a13f
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 21 deletions.
diff --git a/.github/workflows/release-web.yml b/.github/workflows/release-web.yml
@@ -120,4 +120,7 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           build-args: |
-            GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}
+            GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}
+            REPOSITORY=${{ env.GITHUB_REPO }}
+            SHA=${{ github.sha }}
+            VERSION=${{ github.ref_name }}
diff --git a/web/apps/next/Dockerfile b/web/apps/next/Dockerfile
@@ -31,6 +31,15 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install -r --workspace-ro
 
 # Build the project
 COPY --from=builder /app/out/full/ .
+
+ARG REPOSITORY
+ARG SHA
+ARG VERSION
+
+ENV NEXT_PUBLIC_GIT_REPOSITORY=$REPOSITORY
+ENV NEXT_PUBLIC_GIT_SHA=$SHA
+ENV NEXT_PUBLIC_GIT_VERSION=$VERSION
+
 RUN pnpm turbo run build --filter=next...
 
 FROM base AS runner

diff --git a/web/apps/next/analyze/nodejs.html b/web/apps/next/analyze/nodejs.html
diff --git a/web/apps/next/layout/Background.tsx b/web/apps/next/layout/Background.tsx
@@ -17,8 +17,8 @@ const Style = styled.section`
   top: 0;
   left: 0;
   position: fixed;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   filter: blur(0.5rem) brightness(0.75);
 `;
 

diff --git a/web/apps/next/layout/Page.tsx b/web/apps/next/layout/Page.tsx
@@ -18,6 +18,7 @@ const Style = styled.section`
   position: relative;
   padding: 2rem;
   min-height: calc(100vh - ${FOOTER_HEIGHT});
+  min-height: calc(100dvh - ${FOOTER_HEIGHT});
 `;
 
 export default Page;
diff --git a/web/apps/next/pages/_app.tsx b/web/apps/next/pages/_app.tsx
@@ -1,5 +1,6 @@
 import type { AppProps } from "next/app";
 import getConfig from "next/config";
+import Head from "next/head";
 import NextImage from "next/image";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
@@ -10,6 +11,8 @@ import Global from "ui/styles/global";
 import "ui/styles/reset.css";
 import ThemeProvider from "ui/styles/theme";
 import dark from "ui/styles/theme/dark";
+import { Centered } from "ui/components/basic/Text";
+import SourceDisplay, { CIProps } from "ui/components/SourceDisplay";
 
 const { publicRuntimeConfig } = getConfig();
 
@@ -34,15 +37,33 @@ const elementsContext: ElementsContext = {
   createImg,
 };
 
+/* eslint-disable turbo/no-undeclared-env-vars */
+const ciProps: CIProps = {
+  repository: process.env.NEXT_PUBLIC_GIT_REPOSITORY ?? "local",
+  sha: process.env.NEXT_PUBLIC_GIT_SHA,
+  version: process.env.NEXT_PUBLIC_GIT_VERSION ?? "dev",
+};
+/* eslint-enable turbo/no-undeclared-env-vars */
+
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
   return (
     <ElementsProvider value={elementsContext}>
       <RouterProvider value={router}>
         <ThemeProvider theme={dark}>
+          <Head>
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=0.5"
+            />
+          </Head>
           <Global />
           <Component {...pageProps} />
-          <Footer />
+          <Footer>
+            <Centered>
+              <SourceDisplay {...ciProps} />
+            </Centered>
+          </Footer>
         </ThemeProvider>
       </RouterProvider>
     </ElementsProvider>

diff --git a/web/apps/next/pages/index.tsx b/web/apps/next/pages/index.tsx
@@ -12,6 +12,7 @@ import { ResourceType } from "parser/XMLParser";
 import Panels from "ui/components/Panels";
 import Main from "ui/components/Main";
 import Link from "ui/components/basic/Link";
+import { BIG } from "ui/styles/media";
 
 interface Props {
   configs: Named[];
@@ -84,15 +85,20 @@ const ModTitle = styled.h1`
   text-transform: uppercase;
   padding: 4rem 0;
   margin-bottom: 3rem;
-  letter-spacing: 0.5ch;
+
+  letter-spacing: 0.3ch;
+  @media ${BIG} {
+    letter-spacing: 0.5ch;
+  }
 `;
 
 const Description = styled.ul`
   list-style: disc;
   margin: 0 auto;
   font-size: 1.5rem;
-  width: max-content;
   max-width: 1000px;
+  padding-left: 3rem;
+  padding-right: 1rem;
 
   li {
     margin: 0.5em 0;

diff --git a/web/packages/ui/components/Footer.tsx b/web/packages/ui/components/Footer.tsx
@@ -1,14 +1,13 @@
 import { Github } from "@styled-icons/boxicons-logos/Github";
 import { Curseforge } from "@styled-icons/simple-icons/Curseforge";
 import Link, { IconLink } from "./basic/Link";
-import { Centered } from "./basic/Text";
 import { darken } from "polished";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import styled from "styled-components";
 
 export const FOOTER_HEIGHT = "4rem";
 
-const Footer: FC = () => (
+const Footer: FC<{ children?: ReactNode }> = ({ children }) => (
   <Style>
     <FooterLinks $area-label="Footer Navigation">
       <IconLink
@@ -29,10 +28,15 @@ const Footer: FC = () => (
         <ImageIcon src="https://raw.githubusercontent.com/modrinth/knossos/master/assets/images/logo.svg" />
       </Link>
     </FooterLinks>
-    <Centered>© all rights reserved</Centered>
+
+    {children}
   </Style>
 );
 
+const RefLink = styled(Link).attrs({ underline: "always" })`
+  color: ${(p) => p.theme.accent};
+`;
+
 const ImageIcon = styled.img`
   height: 100%;
   width: 1em;

diff --git a/web/packages/ui/components/LinkBar.tsx b/web/packages/ui/components/LinkBar.tsx
@@ -7,6 +7,7 @@ import { Download } from "@styled-icons/boxicons-solid/Download";
 import { FC } from "react";
 import styled from "styled-components";
 import { IconLink } from "./basic/Link";
+import { BIG } from "../styles/media";
 
 const LinkBar: FC = () => (
   <Style>
@@ -42,7 +43,7 @@ const LinkBar: FC = () => (
 const Style = styled.nav`
   font-size: 3rem;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(1, 1fr);
   margin: 3rem auto;
   width: max-content;
   gap: 0.5em 2em;
@@ -51,6 +52,10 @@ const Style = styled.nav`
   svg + span {
     margin-left: 0.5em;
   }
+
+  @media ${BIG} {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export default LinkBar;
diff --git a/web/packages/ui/components/ResourceLinks.tsx b/web/packages/ui/components/ResourceLinks.tsx
@@ -53,26 +53,26 @@ const Group = styled.div`
       }
 
       &::before {
-        height: calc(100% + 1em);
         left: -0.75em;
-        top: calc(-50% - 1em);
-        border-left: 1px solid ${(p) => p.theme.text};
+        top: calc(-50% - 0.6em);
+        height: calc(100% + 0.6em);
+        border-left: 2px solid ${(p) => p.theme.text};
       }
 
       &::after {
         width: 0.5em;
         left: -0.75em;
         top: 25%;
         height: 25%;
-        border: 1px solid transparent;
+        border: 2px solid transparent;
         border-bottom-color: ${(p) => p.theme.text};
       }
     }
 
     & > :first-child {
       li::before {
         top: -0.5em;
-        height: calc(100% - 0.55em);
+        height: calc(100% - 0.6em);
       }
     }
   }

diff --git a/web/packages/ui/components/SourceDisplay.tsx b/web/packages/ui/components/SourceDisplay.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import Link from "./basic/Link";
+import { FC } from "react";
+
+export interface CIProps {
+  repository: string;
+  sha?: string;
+  version: string;
+}
+
+const SourceDisplay: FC<CIProps> = ({ repository, sha, version }) => (
+  <>
+    {repository}@
+    {sha ? (
+      <RefLink href={`https://github.com/${repository}/tree/${sha}/web`}>
+        {version}
+      </RefLink>
+    ) : (
+      <span>{version}</span>
+    )}
+  </>
+);
+
+const RefLink = styled(Link).attrs({ underline: "always" })`
+  color: ${(p) => p.theme.accent};
+`;
+
+export default SourceDisplay;
diff --git a/web/packages/ui/styles/media.ts b/web/packages/ui/styles/media.ts
@@ -0,0 +1,17 @@
+// smartphones, portrait iPhone, portrait 480x320 phones (Android)
+export const TINY = "(min-width:320px)";
+
+// smartphones, Android phones, landscape iPhone
+export const SMALL = "(min-width:480px)";
+
+// portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)
+export const SMALLER = "(min-width:600px)";
+
+// tablet, landscape iPad, lo-res laptops ands desktops
+export const BIGGER = "(min-width:801px)";
+
+// big landscape tablets, laptops, and desktops
+export const BIG = "(min-width:1025px)";
+
+// hi-res laptops and desktops
+export const HUGE = "(min-width:1281px)";
diff --git a/web/turbo.json b/web/turbo.json
@@ -1,16 +1,30 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalDotEnv": [".env"],
-  "globalDependencies": ["**/.env.*local"],
+  "globalDotEnv": [
+    ".env"
+  ],
+  "globalDependencies": [
+    "**/.env.*local"
+  ],
   "pipeline": {
     "build": {
-      "dependsOn": ["gen", "^build"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "dependsOn": [
+        "gen",
+        "^build"
+      ],
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**"
+      ]
     },
     "gen": {},
     "lint": {},
     "test": {
-      "dependsOn": ["lint", "^test"]},
+      "dependsOn": [
+        "lint",
+        "^test"
+      ]
+    },
     "dev": {
       "cache": false,
       "persistent": true