Merge branch 'main' of https://github.com/manawiki/core

manawiki · Oct 3, 2024 · 5ea2ba0 · 5ea2ba0
2 parents e52a829 + 92a02e1
commit 5ea2ba0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 55 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -101,36 +101,36 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => [
 ];
 
 export const links: LinksFunction = () => [
-   { rel: "preconnect", href: "https://static.mana.wiki" },
-   { rel: "preconnect", href: "https://www.googletagmanager.com" },
-   { rel: "preconnect", href: "https://www.google-analytics.com" },
-
-   // also dns-prefetch for older browsers
-   { rel: "dns-prefetch", href: "https://static.mana.wiki" },
-   { rel: "dns-prefetch", href: "https://www.googletagmanager.com" },
-   { rel: "dns-prefetch", href: "https://www.google-analytics.com" },
+   // preload base font to avoid CLS
+   {
+      rel: "preload",
+      href: "/fonts/Nunito_Sans/NunitoSans-Regular.woff2",
+      as: "font",
+      type: "font/woff2",
+      crossOrigin: "anonymous",
+   },
 
    //preload css makes it nonblocking to html renders
    { rel: "preload", href: fonts, as: "style" },
    { rel: "preload", href: tailwindStylesheetUrl, as: "style" },
    { rel: "preload", href: customStylesheetUrl, as: "style" },
    { rel: "preload", href: splideCSS, as: "style" },
-
    { rel: "preload", href: reactCropUrl, as: "style" },
 
-   { rel: "stylesheet", href: reactCropUrl },
    { rel: "stylesheet", href: fonts },
    { rel: "stylesheet", href: tailwindStylesheetUrl },
    { rel: "stylesheet", href: customStylesheetUrl },
    { rel: "stylesheet", href: splideCSS },
+   { rel: "stylesheet", href: reactCropUrl },
 
-   {
-      rel: "preload",
-      href: "/fonts/Nunito_Sans/NunitoSans-Regular.woff2",
-      as: "font",
-      type: "font/woff2",
-      crossOrigin: "anonymous",
-   },
+   { rel: "preconnect", href: "https://static.mana.wiki" },
+   { rel: "preconnect", href: "https://www.googletagmanager.com" },
+   { rel: "preconnect", href: "https://www.google-analytics.com" },
+
+   // also dns-prefetch for older browsers
+   { rel: "dns-prefetch", href: "https://static.mana.wiki" },
+   { rel: "dns-prefetch", href: "https://www.googletagmanager.com" },
+   { rel: "dns-prefetch", href: "https://www.google-analytics.com" },
 
    ...(process.env.NODE_ENV === "development"
       ? [{ rel: "stylesheet", href: rdtStylesheet }]

diff --git a/app/routes/_site+/_components/Column-1-Menu.tsx b/app/routes/_site+/_components/Column-1-Menu.tsx
@@ -37,21 +37,11 @@ export function ColumnOneMenu({ site }: { site?: Site }) {
                                  : `https://${partnerSite.slug}.mana.wiki`;
                               return (
                                  <Tooltip
-                                    key={partnerSite.id}
+                                    key={partnerSite.slug}
                                     placement="right"
                                  >
                                     <TooltipTrigger asChild>
-                                       <AvatarButton
-                                          href={path}
-                                          square
-                                          src={partnerSite?.icon?.url}
-                                          initials={partnerSite?.name?.charAt(
-                                             0,
-                                          )}
-                                          alt="Site Logo"
-                                          options="aspect_ratio=1:1&height=120&width=120"
-                                          className="size-9 transition duration-300 active:translate-y-0.5"
-                                       />
+                                       <SidebarItem site={partnerSite} />
                                     </TooltipTrigger>
                                     <TooltipContent>
                                        {partnerSite.name}
@@ -60,10 +50,6 @@ export function ColumnOneMenu({ site }: { site?: Site }) {
                               );
                            })}
                         </div>
-                        <div className="px-4 w-full h-full">
-                           <div className="border-t h-1 w-full border-zinc-300 dark:border-dark400 border-dashed block" />
-                        </div>
-                        <NewSiteModal />
                      </>
                   )}
                </div>
@@ -74,7 +60,7 @@ export function ColumnOneMenu({ site }: { site?: Site }) {
                <Link
                   className="border-2 border-zinc-400/60 dark:border-zinc-600 transition duration-300 shadow-zinc-300 dark:shadow-zinc-900
                      active:translate-y-0.5 dark:hover:border-zinc-500 rounded-2xl flex items-center mb-3 from-white to-zinc-100
-                     justify-center laptop:size-[42px] dark:from-dark450 dark:to-dark350 bg-gradient-to-br shadow hover:border-zinc-400 mx-auto"
+                     justify-center size-11 dark:from-dark450 dark:to-dark350 bg-gradient-to-br shadow hover:border-zinc-400 mx-auto"
                   to={
                      process.env.NODE_ENV === "development"
                         ? "/"

diff --git a/app/routes/_site+/_components/SidebarItem.tsx b/app/routes/_site+/_components/SidebarItem.tsx
@@ -1,6 +1,7 @@
 import type { SerializeFrom } from "@remix-run/server-runtime";
 
 import { AvatarButton } from "~/components/Avatar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/Tooltip";
 import type { loader as siteLoaderType } from "~/routes/_site+/_layout";
 
 export function SidebarItem({
@@ -17,21 +18,31 @@ export function SidebarItem({
 
    return (
       <>
-         <AvatarButton
-            href={
-               process.env.NODE_ENV == "development"
-                  ? "/"
-                  : `https://${sitePath}`
-            }
-            src={site?.icon?.url}
-            initials={site?.name?.charAt(0)}
-            alt="Site Logo"
-            options="aspect_ratio=1:1&height=120&width=120"
-            className="size-10 transition duration-300 active:translate-y-0.5"
-         />
-         {(isActive || isLoggedOut) && (
-            <span className="absolute -left-1 top-1.5 h-7 w-2.5 rounded-lg bg-zinc-600 dark:bg-zinc-300 max-laptop:hidden" />
-         )}
+         <Tooltip key={site.slug} placement="right">
+            <TooltipTrigger asChild>
+               <div>
+                  <AvatarButton
+                     href={
+                        process.env.NODE_ENV == "development"
+                           ? "/"
+                           : `https://${sitePath}`
+                     }
+                     src={site?.icon?.url}
+                     initials={site?.name?.charAt(0)}
+                     alt="Site Logo"
+                     square={isActive}
+                     options="aspect_ratio=1:1&height=120&width=120"
+                     className="size-11 transition duration-300 block active:translate-y-0.5 shadow-sm shadow-1"
+                  />
+                  {(isActive || isLoggedOut) && (
+                     <span className="absolute -left-1 top-2 h-7 w-2.5 rounded-lg bg-zinc-600 dark:bg-zinc-300 max-laptop:hidden" />
+                  )}
+               </div>
+            </TooltipTrigger>
+            <TooltipContent>
+               <div className="text-sm font-semibold p-0.5">{site.name}</div>
+            </TooltipContent>
+         </Tooltip>
       </>
    );
 }
diff --git a/app/routes/_site+/_components/SiteHeader.tsx b/app/routes/_site+/_components/SiteHeader.tsx
@@ -61,16 +61,15 @@ export function SiteHeader({
                      >
                         <div
                            className="dark:bg-dark450 border dark:border-zinc-600 shadow-1 bg-zinc-50 overflow-hidden flex-none
-                              text-1 flex h-10 w-10 items-center justify-center dark:group-hover:border-zinc-600 border-zinc-300/60
-                              rounded-full shadow-sm transition duration-300 active:translate-y-0.5 group-hover:border-zinc-300"
+                              text-1 flex size-11 items-center justify-center dark:group-hover:border-zinc-600 border-zinc-300/60
+                              rounded-xl shadow-sm transition duration-300 active:translate-y-0.5 group-hover:border-zinc-300"
                         >
                            {site?.icon?.url ? (
                               <Image
-                                 width={40}
-                                 height={40}
-                                 //@ts-ignore
+                                 width={88}
+                                 height={88}
                                  url={site.icon?.url}
-                                 options="aspect_ratio=1:1&height=120&width=120"
+                                 options="aspect_ratio=1:1"
                                  alt="Site Logo"
                               />
                            ) : (