feat(client): fixes and about page with some initial content

LABIOQUIM · Apr 21, 2023 · aa4f646 · aa4f646
1 parent a84a1e8
commit aa4f646
Show file tree

Hide file tree

Showing 22 changed files with 334 additions and 145 deletions.
diff --git a/apps/client/next.config.js b/apps/client/next.config.js
@@ -6,7 +6,7 @@ const { i18n } = require("./next-i18next.config");
 const nextConfig = {
   i18n,
   images: {
-    domains: ["placekitten.com"]
+    domains: ["placekitten.com", "avatars.githubusercontent.com"]
   }
 };
 

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -39,6 +39,7 @@
     "next-contentlayer": "^0.3.1",
     "next-i18next": "^13.2.2",
     "next-sitemap": "^4.0.6",
+    "nookies": "^2.5.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",

diff --git a/apps/client/public/locales/en-US/about.json b/apps/client/public/locales/en-US/about.json
@@ -0,0 +1,5 @@
+{
+  "acknowledgements": "Thanks to the entire team responsible for the development and maintenance of GROMACS and Grace/Xmgr",
+  "description": "Visual Dynamics is an open source tool that accelerates implementations and learning in the area of molecular dynamics simulation. Available for free and supported by all major web browsers. Visual Dynamics is powered by Flask and NextJS, both are free and open-source frameworks for web development.",
+  "title": "About"
+}
diff --git a/apps/client/public/locales/en-US/common.json b/apps/client/public/locales/en-US/common.json
@@ -1,4 +1,5 @@
 {
+  "app-name": "VisualDynamics",
   "errors": {
     "404": {
       "title": "This place... isn't a place at all",

diff --git a/apps/client/src/components/Auth/index.tsx b/apps/client/src/components/Auth/index.tsx
@@ -1,6 +1,6 @@
 import { SubmitHandler, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Cog, Lock, LogIn, LogOut, User, UserPlus } from "lucide-react";
+import { Lock, LogIn, LogOut, User, UserPlus } from "lucide-react";
 import { useRouter } from "next/router";
 import { signIn, signOut, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
@@ -13,13 +13,9 @@ import {
 import { Button } from "../Button";
 import { TextButton } from "../Button/Text";
 import { Input } from "../Input";
+import { SelectTheme } from "../SelectTheme";
 
-interface AuthProps {
-  setTheme: (theme: string) => void;
-  theme: string;
-}
-
-export function Auth({ setTheme, theme }: AuthProps) {
+export function Auth() {
   const { data: session, status } = useSession();
   const {
     register,
@@ -63,10 +59,7 @@ export function Auth({ setTheme, theme }: AuthProps) {
             {session.user.email}
           </small>
         </div>
-        <TextButton
-          iconClassName="w-5 h-5"
-          LeftIcon={Cog}
-        />
+        <SelectTheme />
         <TextButton
           iconClassName="w-5 h-5"
           LeftIcon={LogOut}

diff --git a/apps/client/src/components/BlogCard/index.tsx b/apps/client/src/components/BlogCard/index.tsx
@@ -4,8 +4,8 @@ export default function BlogCard({ title, slug }: Partial<PostProps>) {
   return (
     <div className="group">
       <Link
-        href="/system/blog/[slug]"
-        as={`/system/blog/${slug}`}
+        href="/blog/[slug]"
+        as={`/blog/${slug}`}
       >
         <div className="rounded border-2 border-transparent transition-all duration-100 ease-linear">
           <div className="h-[150px]">

diff --git a/apps/client/src/components/Layout/Header.tsx b/apps/client/src/components/Layout/Header.tsx
@@ -8,18 +8,16 @@ import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 
 import { Icons } from "@app/components/Icons";
+import { useTheme } from "@app/contexts/theme";
 
 import { Auth } from "../Auth";
+import { TextButton } from "../Button/Text";
 
-interface MainNavProps {
-  setTheme: (theme: string) => void;
-  theme: string;
-}
-
-export function Header({ setTheme, theme }: MainNavProps) {
+export function Header() {
   const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
   const { pathname } = useRouter();
   const { status } = useSession();
+  const { theme } = useTheme();
   const { t } = useTranslation(["navigation"]);
   const [navigationItems, setNavigationItems] = useState<NavigationSection[]>([
     {
@@ -32,11 +30,11 @@ export function Header({ setTheme, theme }: MainNavProps) {
         },
         {
           label: "navigation:system.about.title",
-          href: "/system/about"
+          href: "/about"
         },
         {
           label: "navigation:system.blog.title",
-          href: "/system/blog"
+          href: "/blog"
         }
       ]
     }
@@ -94,6 +92,10 @@ export function Header({ setTheme, theme }: MainNavProps) {
     setShowMobileMenu((prevState) => !prevState);
   }
 
+  function closeMobileMenu() {
+    setShowMobileMenu(false);
+  }
+
   const renderedItems = navigationItems.map((item) => {
     return (
       <div
@@ -110,6 +112,7 @@ export function Header({ setTheme, theme }: MainNavProps) {
               <Link
                 key={link.label}
                 href={link.href ? link.href : "#"}
+                onClick={closeMobileMenu}
               >
                 <div
                   className={clsx(
@@ -138,23 +141,23 @@ export function Header({ setTheme, theme }: MainNavProps) {
   });
 
   return (
-    <nav className="h-14 md:overflow-y-auto md:pb-4 md:h-screen md:w-80 bg-zinc-800/10">
-      <div className="flex flex-1 h-full justify-between md:hidden">
+    <nav
+      className="h-14 md:overflow-y-auto md:pb-4 md:h-screen md:w-80 bg-zinc-800/10"
+      data-theme={theme}
+    >
+      <div className="flex flex-1 h-full p-2.5 justify-between md:hidden">
         <Image
           alt="Visual Dynamics"
-          className="h-full w-full"
+          className="h-full w-full -m-2.5 my-auto"
           height={0}
           src="/images/logo.svg"
           width={0}
         />
-        <button
-          className=""
-          onClick={toggleMobileMenu}
-        >
+        <TextButton onClick={toggleMobileMenu}>
           {showMobileMenu ? <Icons.Close /> : <Menu />}
-        </button>
+        </TextButton>
       </div>
-      <div className="hidden bg-zinc-200/90 backdrop-blur-md md:border-b md:h-24 md:border-b-zinc-400/50 md:py-2 md:block  md:sticky md:top-0">
+      <div className="hidden bg-zinc-200/90 backdrop-blur-md md:border-b md:h-24 md:border-b-zinc-400/50 md:py-2 md:block md:sticky md:top-0">
         <Image
           alt="Visual Dynamics"
           className="h-full w-2/3 mx-auto mb-2"
@@ -165,22 +168,16 @@ export function Header({ setTheme, theme }: MainNavProps) {
       </div>
 
       <div className="hidden bg-zinc-200/90 md:flex md:flex-col md:gap-y-4 md:px-2 md:items-center md:w-full md:py-2 md:shadow-lg backdrop-blur-md md:sticky md:top-24">
-        <Auth
-          setTheme={setTheme}
-          theme={theme}
-        />
+        <Auth />
       </div>
 
       <div className="hidden md:flex md:flex-col md:pt-2 md:gap-y-4 md:px-2">
         {renderedItems}
       </div>
 
       {showMobileMenu ? (
-        <div className="absolute inset-0 z-10 top-14 bg-zinc-100 p-2 flex flex-col gap-y-4">
-          <Auth
-            setTheme={setTheme}
-            theme={theme}
-          />
+        <div className="md:hidden absolute inset-0 z-10 top-14 bg-zinc-200/80 backdrop-blur-md p-2 flex flex-col gap-y-4">
+          <Auth />
           {renderedItems}
         </div>
       ) : null}

diff --git a/apps/client/src/components/Layout/Page.tsx b/apps/client/src/components/Layout/Page.tsx
@@ -1,11 +1,11 @@
 import { ReactNode, useEffect, useState } from "react";
 import clsx from "clsx";
-import Image from "next/image";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 
 import { Breadcrumb } from "@app/components/Breadcrumb";
 import { BreadcrumbItem } from "@app/components/Breadcrumb/Item";
+import { useTheme } from "@app/contexts/theme";
 
 import { Footer } from "./Footer";
 import { HeaderSEO } from "./HeaderSEO";
@@ -28,6 +28,7 @@ export function PageLayout({
   const [breadcrumbs, setBreadcrumbs] = useState<
     { href: string; label: string }[]
   >([]);
+  const { theme } = useTheme();
   const [isTransitioning, setIsTransitioning] = useState(false);
   const { t } = useTranslation(["common"]);
 
@@ -95,27 +96,23 @@ export function PageLayout({
 
   return (
     <div
-      className={clsx("flex flex-1 flex-col", {
+      className={clsx("flex flex-1 flex-col px-2.5 md:pl-0", {
         "animate-slideUpEnter": !isTransitioning
       })}
+      data-theme={theme}
     >
-      <PageTitle title={isTransitioning ? t("common:loading") : title} />
+      <PageTitle
+        noGoBack={router.pathname === "/"}
+        title={isTransitioning ? t("common:loading") : title}
+      />
       <HeaderSEO
         title={title}
         description={description}
         ogImage={ogImage}
       />
       <div className="flex gap-x-2">
         <Breadcrumb>
-          <BreadcrumbItem href="/">
-            <Image
-              alt="favicon"
-              className="h-4 w-4 my-auto"
-              src="/images/favicon.svg"
-              height={0}
-              width={0}
-            />
-          </BreadcrumbItem>
+          <BreadcrumbItem href="/">{t("common:app-name")}</BreadcrumbItem>
           {breadcrumbs && !isTransitioning ? (
             breadcrumbs.map((breadcrumb, index) => (
               <BreadcrumbItem
@@ -136,7 +133,7 @@ export function PageLayout({
         </Breadcrumb>
       </div>
       <section
-        className={`overflow-y-auto flex flex-1 flex-col rounded-md bg-zinc-800/10 mx-2 md:ml-0 px-4 py-2.5 ${className}`}
+        className={`overflow-y-auto flex flex-1 flex-col rounded-md bg-zinc-800/10 px-4 py-2.5 ${className}`}
       >
         {Screen}
       </section>

diff --git a/apps/client/src/components/SelectTheme/index.tsx b/apps/client/src/components/SelectTheme/index.tsx
@@ -1,12 +1,9 @@
 import React, { FC } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
-import { Icons } from "../Icons";
+import { Theme, useTheme } from "@app/contexts/theme";
 
-interface SelectThemeProps {
-  theme: string;
-  setTheme: (theme: string) => void;
-}
+import { Icons } from "../Icons";
 
 const bg = [
   "bg-amber-400",
@@ -26,44 +23,49 @@ const hoverBg = [
   "hover:bg-rose-500"
 ];
 
-export const SelectTheme: FC<SelectThemeProps> = ({ setTheme, theme }) => (
-  <DropdownMenu.Root>
-    <DropdownMenu.Trigger asChild>
-      <button
-        className="rounded-full w-7 h-7 my-auto border-2 border-white transition-all bg-primary-400 outline-none hover:bg-primary-500 hover:border-zinc-200"
-        aria-label="Customise options"
-      />
-    </DropdownMenu.Trigger>
+export const SelectTheme: FC = () => {
+  const { setTheme, theme } = useTheme();
 
-    <DropdownMenu.Content
-      className="bg-primary-950/60 p-2 rounded-md"
-      sideOffset={5}
-    >
-      <DropdownMenu.RadioGroup
-        value={theme}
-        onValueChange={setTheme}
-        className="flex gap-x-2"
-      >
-        {["amber", "stone", "green", "indigo", "violet", "rose"].map(
-          (item, i) => (
-            <DropdownMenu.RadioItem
-              key={item}
-              className="rounded-full flex items-center h-[25px] relative select-none outline-none data-[highlighted]:bg-primary-200/50"
-              value={item}
-            >
-              <div
-                className={`rounded-full w-6 h-6 my-auto border-2 border-white transition-all ${bg[i]} ${hoverBg[i]} flex items-center justify-center hover:border-zinc-200`}
-              >
-                <DropdownMenu.ItemIndicator className="flex items-center justify-center">
-                  <Icons.Check className="mt-0.5 stroke-primary-100 stroke-[3] w-[75%] h-[75%]" />
-                </DropdownMenu.ItemIndicator>
-              </div>
-            </DropdownMenu.RadioItem>
-          )
-        )}
-      </DropdownMenu.RadioGroup>
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          className="rounded-full w-7 h-7 my-auto border-2 border-white transition-all duration-500 bg-primary-400 outline-none hover:bg-primary-500"
+          aria-label="Customise options"
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal className="z-20">
+        <DropdownMenu.Content
+          className="z-20 mr-2 md:mr-0 bg-green-950/60 p-2 rounded-md"
+          sideOffset={5}
+        >
+          <DropdownMenu.RadioGroup
+            value={theme}
+            onValueChange={(value) => setTheme(value as Theme)}
+            className="flex gap-x-2"
+          >
+            {["amber", "stone", "green", "indigo", "violet", "rose"].map(
+              (item, i) => (
+                <DropdownMenu.RadioItem
+                  key={item}
+                  className="rounded-full flex items-center h-[25px] relative select-none outline-none data-[highlighted]:bg-primary-200/50"
+                  value={item}
+                >
+                  <div
+                    className={`rounded-full w-6 h-6 my-auto border-2 border-white ${bg[i]} ${hoverBg[i]} flex items-center justify-center`}
+                  >
+                    <DropdownMenu.ItemIndicator className="flex items-center justify-center">
+                      <Icons.Check className="mt-0.5 stroke-zinc-100 stroke-[3] w-[75%] h-[75%]" />
+                    </DropdownMenu.ItemIndicator>
+                  </div>
+                </DropdownMenu.RadioItem>
+              )
+            )}
+          </DropdownMenu.RadioGroup>
 
-      <DropdownMenu.Arrow className="fill-primary-950/60" />
-    </DropdownMenu.Content>
-  </DropdownMenu.Root>
-);
+          <DropdownMenu.Arrow className={`fill-green-950/60`} />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};