Merge pull request #80 from pluiedev/push-wsyxroovnmom

components(terminal): look like a GTK/libadwaita window on Linux

src/components/animated-terminal/index.tsx

@@ -17,6 +17,7 @@ export default function AnimatedTerminal({
   frames,
   whitespacePadding,
   frameLengthMs,
+  platformStyle,
 }: AnimatedTerminalProps) {
   const [currentFrame, setCurrentFrame] = useState(0);
   useEffect(() => {
@@ -46,6 +47,7 @@ export default function AnimatedTerminal({
       fontSize={fontSize}
       lines={frames[currentFrame]}
       disableScrolling={true}
+      platformStyle={platformStyle}
     />
   );
 }

src/components/terminal/Terminal.module.css

@@ -1,13 +1,17 @@
 .terminal {
   --code-margin-top: 12px;
-  --control-size: 12px;
   --padding: 7px;
 
   /* Mac's traffic light button colors */
   --color-sunset-orange: #ff605c;
   --color-pastel-orange: #ffbd44;
   --color-malachite: #00ca4e;
 
+  /* Adwaita colors (see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.2/named-colors.html) */
+  --adw-headerbar-color: #303030;
+  --adw-headerbar-backdrop-color: #242424;
+  --adw-headerbar-shade-color: rgba(0, 0, 0, 0.36);
+
   &.fontXTiny {
     --title-font-size: 12px;
     --content-font-size: 6px;
@@ -44,44 +48,61 @@
   background: var(--gray-0);
   border: 1px solid var(--gray-3);
   border-radius: 10px;
-  padding: var(--padding);
 
   display: flex;
   flex-direction: column;
 
   & .header {
-    display: flex;
+    display: grid;
     align-items: center;
-    flex-direction: row;
     position: relative;
+    border-radius: 10px 10px 0px 0px;
+    padding: var(--padding);
+
+    grid-template: "controls title .";
+    grid-template-columns: 1fr 1fr 1fr;
+
+    transition: 0.1s background;
 
     & .windowControls {
       list-style: none;
       display: flex;
-      gap: 8px;
+      grid-area: controls;
 
       & li {
         width: var(--control-size);
         height: var(--control-size);
-        border-radius: var(--control-size);
-        background: var(--gray-3);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: 0.1s background;
+
+        &.circularButton {
+          background: var(--gray-3);
+          border-radius: var(--control-size);
+        }
+
+        & .icon {
+          transform: scale(75%);
+        }
       }
     }
     & .title {
-      position: absolute;
-      left: 50%; transform: translateX(-50%);
+      text-align: center;
       font-size: var(--title-font-size);
-      top: 1px;
+      grid-area: title;
     }
   }
 
   & .content {
     font-size: var(--content-font-size);
-    margin-top: var(--code-margin-top);
+    padding-top: var(--code-margin-top);
     color: var(--gray-6);
     word-wrap: break-word;
     scroll-behavior: smooth;
     overflow-y: scroll;
+    padding: var(--padding);
+
     &.disableScrolling {
       overflow-y: hidden;
     }
@@ -93,19 +114,56 @@
     }
   }
 
-  &:hover {
+  &.adwaita {
+    --control-size: 18px;
+    box-shadow: 0px 2px 1px var(--adw-headerbar-shade-color);
+
     & .header {
+      background: var(--adw-headerbar-backdrop-color);
+      /* Adwaita buttons are to the right by default (yes, you can get left buttons w/ GNOME Tweaks) */
+      grid-template-areas: ". title controls";
+      border-bottom: 2px var(--adw-headerbar-shade-color);
+
       & .windowControls {
-        & li:first-child {
-          background: var(--color-sunset-orange);
-        }
-        & li:nth-child(2) {
-          background: var(--color-pastel-orange);
-        }
-        & li:last-child {
-          background: var(--color-malachite);
-        }
+        gap: 12px;
+      }
+
+      & .windowControls {
+        /* Arrange buttons from right to left */
+        flex-direction: row-reverse;
+      }
+      & .title {
+        color: white;
+        font-weight: 800;
+      }
+      & .icon {
+        color: white;
+      }
+    }
+
+    &:hover .header {
+      background: var(--adw-headerbar-color);
+    }
+  }
+
+  &.macos {
+    --control-size: 12px;
+
+    & .windowControls {
+      gap: 8px;
+    }
+
+    &:hover .windowControls {
+      & li:first-child {
+        background: var(--color-sunset-orange);
+      }
+      & li:nth-child(2) {
+        background: var(--color-pastel-orange);
+      }
+      & li:last-child {
+        background: var(--color-malachite);
       }
     }
   }
+
 }

src/components/terminal/index.tsx

@@ -3,6 +3,13 @@ import React, { UIEvent, useEffect, useRef, useState } from "react";
 import { Code, P } from "../text";
 import s from "./Terminal.module.css";
 
+import {
+  X,
+  Menu,
+  Grip,
+  FolderPlus
+} from "lucide-react";
+
 export interface TerminalProps {
   className?: string;
   columns: number;
@@ -12,13 +19,15 @@ export interface TerminalProps {
   lines?: string[];
   whitespacePadding?: number;
   disableScrolling?: boolean;
+  platformStyle?: "macos" | "adwaita";
 }
 
 export default function Terminal({
   columns,
   rows,
   fontSize = "medium",
   className,
+  platformStyle,
   title,
   lines,
   whitespacePadding = 0,
@@ -58,6 +67,9 @@ export default function Terminal({
         [s.fontSmall]: fontSize === "small",
         [s.fontMedium]: fontSize === "medium",
         [s.fontLarge]: fontSize === "large",
+      }, {
+        [s.adwaita]: platformStyle === "adwaita",
+        [s.macos]: platformStyle === "macos",
       })}
       style={
         {
@@ -67,11 +79,8 @@ export default function Terminal({
       }
     >
       <div className={s.header}>
-        <ul className={s.windowControls}>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
+        { platformStyle === "adwaita" && <AdwaitaButtons /> }
+        { platformStyle === "macos" && <MacosButtons /> }
         <P className={s.title}>{title}</P>
       </div>
       <Code
@@ -95,3 +104,31 @@ export default function Terminal({
     </div>
   );
 }
+
+function AdwaitaButtons() {
+  // NOTE:
+  // It is entirely intentional that the maximize/minimize buttons are missing.
+  // Blame GNOME.
+
+  return <ul className={s.windowControls}>
+    <li className={s.circularButton}>
+      <X className={s.icon}/>
+    </li>
+    <li>
+      <Menu className={s.icon}/>
+    </li>
+    <li>
+      <Grip className={s.icon}/>
+    </li>
+    <li>
+      <FolderPlus className={s.icon}/>
+    </li>
+  </ul>
+}
+function MacosButtons() {
+  return <ul className={s.windowControls}>
+    <li className={s.circularButton} />
+    <li className={s.circularButton} />
+    <li className={s.circularButton} />
+  </ul>
+}

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import AnimatedTerminal from "@/components/animated-terminal";
+import AnimatedTerminal, { AnimatedTerminalProps } from "@/components/animated-terminal";
 import RootLayout from "@/layouts/root-layout";
 import {
   loadAllTerminalFiles,
@@ -11,15 +11,24 @@ import { ButtonLink } from "@/components/link";
 import SectionWrapper from "@/components/section-wrapper";
 import GridContainer from "@/components/grid-container";
 
-export async function getStaticProps() {
+export async function getServerSideProps(context: any): Promise<{ props: HomePageProps }> {
+  const userAgent = context.req.headers['user-agent'];
+
+  // TODO(pluiedev): This is a really rudimentary test, but it works for now
+  // Note that Android is also technically Linux :)
+  const isLinux = /Linux/i.test(userAgent);
+
   return {
     props: {
       terminalData: await loadAllTerminalFiles("/home"),
+      platformStyle: isLinux ? 'adwaita' : 'macos'
     },
   };
 }
+
 interface HomePageProps {
   terminalData: TerminalsMap;
+  platformStyle: AnimatedTerminalProps['platformStyle']
 }
 
 function useWindowWidth() {
@@ -35,7 +44,7 @@ function useWindowWidth() {
   return width;
 }
 
-export default function Home({ terminalData }: HomePageProps) {
+export default function Home({ terminalData, platformStyle }: HomePageProps) {
   const animationFrames = Object.keys(terminalData)
     .filter((k) => {
       return k.startsWith("home/animation_frames");
@@ -70,6 +79,7 @@ export default function Home({ terminalData }: HomePageProps) {
             rows={41}
             frames={animationFrames}
             frameLengthMs={31}
+            platformStyle={platformStyle}
           />
         </section>
         <GridContainer className={s.buttonsList}>