Merge branch 'manawiki:main' into main

manasites · Oct 22, 2024 · e60b0cc · e60b0cc
2 parents 3d6f303 + 2ade635
commit e60b0cc
Show file tree

Hide file tree

Showing 18 changed files with 441 additions and 167 deletions.
diff --git a/app/components/Image.tsx b/app/components/Image.tsx
@@ -66,7 +66,11 @@ export function Image({
             width={width ?? searchParams.get("width") ?? undefined}
             height={height ?? searchParams.get("height") ?? undefined}
             alt={alt}
-            src={`${url}?${searchParams.toString()}` ?? "/favicon.ico"}
+            src={
+               url && URL.canParse(url)
+                  ? `${url}?${searchParams.toString()}`
+                  : "/favicon.ico"
+            }
          />
       );
 
@@ -111,7 +115,11 @@ export function Image({
          alt={alt}
          sizes={srcSet ? `(min-width: 1200px) 728px, 100vw` : undefined}
          srcSet={srcSet}
-         src={`${url}?${searchParams.toString()}` ?? "/favicon.ico"}
+         src={
+            url && URL.canParse(url)
+               ? `${url}?${searchParams.toString()}`
+               : "/favicon.ico"
+         }
       />
    );
 }
diff --git a/app/db/custom/CustomUsers.ts b/app/db/custom/CustomUsers.ts
@@ -4,13 +4,17 @@ import {
    isStaff,
    isStaffFieldLevel,
    isStaffOrSelf,
+   isStaffOrSelfFieldLevel,
 } from "../collections/users/users.access";
+
 export const Users: CollectionConfig = {
    slug: "users",
-   auth: true,
+   auth: {
+      useAPIKey: true,
+   },
    access: {
-      read: () => true,
-      create: () => true,
+      read: isStaff,
+      create: isStaff,
       delete: isStaff,
       update: isStaffOrSelf,
    },
@@ -50,5 +54,19 @@ export const Users: CollectionConfig = {
             read: isStaffFieldLevel,
          },
       },
+      {
+         name: "apiKey",
+         type: "text",
+         access: {
+            read: isStaffOrSelfFieldLevel,
+         },
+      },
+      {
+         name: "enableAPIKey",
+         type: "text",
+         access: {
+            read: isStaffOrSelfFieldLevel,
+         },
+      },
    ],
 };
diff --git a/app/routes/_editor+/blocks+/image/BlockImageView.tsx b/app/routes/_editor+/blocks+/image/BlockImageView.tsx
@@ -56,7 +56,7 @@ export function BlockImageView({ element, children }: Props) {
                onClick={() => setIsOpen(true)}
             >
                <Image
-                  className="max-h-80 w-auto mx-auto"
+                  className="w-auto mx-auto"
                   alt="Inline"
                   url={element.url}
                   loading="lazy"

diff --git a/app/routes/_editor+/blocks+/link/_link.tsx b/app/routes/_editor+/blocks+/link/_link.tsx
@@ -335,8 +335,6 @@ function LinkPopover({ element, children }: Props) {
 
    const { pathname } = new URL(element?.url as string);
 
-   console.log(pathname);
-
    return (
       <Popover className="absolute -left-1 -top-1 z-20 transition-opacity opacity-0 duration-200 ease-out group-hover/link:opacity-100">
          {({ open }) => (
@@ -620,7 +618,7 @@ export function LinkBlockElement({ element, children }: Props) {
                   <div className="flex items-center justify-center flex-col gap-1">
                      {!element.removeCircleBorder ? (
                         <Image
-                           className="border border-color-sub rounded-full object-none overflow-hidden"
+                           className="border border-color-sub rounded-full object-contain overflow-hidden"
                            style={{
                               ...(!element.removeCircleBorder
                                  ? {
@@ -629,15 +627,30 @@ export function LinkBlockElement({ element, children }: Props) {
                                    }
                                  : undefined),
                            }}
-                           width={element.iconWidth}
-                           height={element.iconWidth}
+                           width={
+                              element.iconWidth
+                                 ? element.iconWidth * 2
+                                 : undefined
+                           }
+                           height={
+                              element.iconWidth
+                                 ? element.iconWidth * 2
+                                 : undefined
+                           }
                            url={element.icon.url}
                            alt={children ? "" : element?.name}
                         />
                      ) : (
                         <Image
                            className="object-contain"
-                           width={element.iconWidth}
+                           width={
+                              element.iconWidth
+                                 ? element.iconWidth * 2
+                                 : undefined
+                           }
+                           style={{
+                              width: element.iconWidth,
+                           }}
                            url={element.icon.url}
                            alt={element?.name}
                         />
@@ -657,24 +670,29 @@ export function LinkBlockElement({ element, children }: Props) {
             <div className="flex items-center justify-center flex-col gap-1">
                {!element.removeCircleBorder ? (
                   <Image
-                     className="border border-color-sub rounded-full object-none overflow-hidden"
+                     className="border border-color-sub rounded-full object-contain overflow-hidden"
                      style={{
-                        ...(!element.removeCircleBorder
-                           ? {
-                                width: element.iconWidth,
-                                height: element.iconWidth,
-                             }
-                           : undefined),
+                        width: element.iconWidth,
+                        height: element.iconWidth,
                      }}
-                     width={element.iconWidth}
-                     height={element.iconWidth}
+                     width={
+                        element.iconWidth ? element.iconWidth * 2 : undefined
+                     }
+                     height={
+                        element.iconWidth ? element.iconWidth * 2 : undefined
+                     }
                      url={element.icon.url}
                      alt={children ? "" : element?.name}
                   />
                ) : (
                   <Image
                      className="object-contain"
-                     width={element.iconWidth}
+                     width={
+                        element.iconWidth ? element.iconWidth * 2 : undefined
+                     }
+                     style={{
+                        width: element.iconWidth,
+                     }}
                      url={element.icon.url}
                      alt={element?.name}
                   />

diff --git a/app/routes/_site+/c_+/$collectionId/utils/fetchList.server.ts b/app/routes/_site+/c_+/$collectionId/utils/fetchList.server.ts
@@ -16,13 +16,15 @@ export interface ListFetchType {
       query: string;
       variables?: {};
    };
+   isAuthOverride?: boolean;
 }
 
 export async function fetchList({
    request,
    gql,
    payload,
    user,
+   isAuthOverride,
 }: ListFetchType) {
    const { siteSlug } = await getSiteSlug(request, payload, user);
 
@@ -32,6 +34,7 @@ export async function fetchList({
          payload,
          siteSlug,
          user,
+         isAuthOverride,
       });
    }
 
@@ -42,6 +45,7 @@ export async function fetchList({
          isCached: user ? false : true,
          query: gql?.query,
          request,
+         isAuthOverride,
          variables: { ...gql?.variables },
       }))
    );

diff --git a/app/routes/_site+/c_+/$collectionId/utils/fetchListCore.server.ts b/app/routes/_site+/c_+/$collectionId/utils/fetchListCore.server.ts
@@ -9,11 +9,13 @@ export async function fetchListCore({
    payload,
    siteSlug,
    user,
+   isAuthOverride,
 }: {
    request: Request;
    payload: Payload;
    siteSlug: string | undefined;
    user?: RemixRequestContext["user"];
+   isAuthOverride?: boolean;
 }) {
    const url = new URL(request.url).pathname;
 
@@ -82,6 +84,7 @@ export async function fetchListCore({
          isCached: user ? false : true,
          query: LIST_QUERY,
          request,
+         isAuthOverride,
       });
 
       if (listData) {

diff --git a/app/routes/_site+/c_+/$collectionId_.$entryId/components/SectionTitle.tsx b/app/routes/_site+/c_+/$collectionId_.$entryId/components/SectionTitle.tsx
@@ -19,7 +19,7 @@ export function SectionTitle({
       return (
          <div
             id={customSlug && !section ? customSlug : undefined}
-            className="max-w-[728px] mx-auto scroll-mt-[72px] z-50 relative"
+            className="max-w-[728px] mx-auto scroll-mt-[72px] relative"
          >
             {!customSlug && !section ? (
                <div>

diff --git a/app/routes/_site+/c_+/$collectionId_.$entryId/utils/entryMeta.ts b/app/routes/_site+/c_+/$collectionId_.$entryId/utils/entryMeta.ts
@@ -12,30 +12,39 @@ export const entryMeta: MetaFunction = ({
    const siteName = matches?.[1]?.data?.site?.name;
 
    const title = `${data?.entry.name} | ${data?.entry?.collectionName} - ${siteName}`;
-   // const icon = data?.entry?.icon?.url;
-   const entryData = data?.entry?.data?.[
-      Object.keys(data?.entry?.data)[0]!
-   ] as Object;
-
-   // description is section names
-   const sections = Object.values(data?.entry?.sections)
-      ?.slice(1)
-      ?.map((section: any) => section?.name);
-   const description = sections
-      ? `${data?.entry?.name} ${sections?.join(", ")}.`
-      : data?.entry?.name + "  Wiki, Database, Guides, News, and more!";
-
-   // find the first image object in entryData with the shape { "url": string }
-   const image = Object.values(entryData).find(
-      (value) => value?.url && typeof value.url === "string",
-   )?.url;
-
-   const siteDomain = matches?.[1]?.data?.site?.domain;
-   const siteSlug = matches?.[1]?.data?.site?.slug;
-
-   const canonicalURL = `https://${
-      siteDomain ?? `${siteSlug}.mana.wiki`
-   }/c/${data?.entry?.collectionSlug}/${data?.entry?.slug}`;
+
+   let image = "",
+      canonicalURL = "",
+      description = "";
+
+   try {
+      // const icon = data?.entry?.icon?.url;
+      const entryData = data?.entry?.data?.[
+         Object.keys(data?.entry?.data)[0]!
+      ] as Object;
+
+      // description is section names
+      const sections = Object.values(data?.entry?.sections)
+         ?.slice(1)
+         ?.map((section: any) => section?.name);
+
+      description = sections
+         ? `${data?.entry?.name} ${sections?.join(", ")}.`
+         : data?.entry?.name + "  Wiki, Database, Guides, News, and more!";
+
+      // find the first image object in entryData with the shape { "url": string }
+      image = Object.values(entryData)?.find(
+         (value) => value?.url && typeof value.url === "string",
+      )?.url;
+
+      const siteDomain = matches?.[1]?.data?.site?.domain;
+      const siteSlug = matches?.[1]?.data?.site?.slug;
+
+      canonicalURL = `https://${siteDomain ?? `${siteSlug}.mana.wiki`}/c/${data
+         ?.entry?.collectionSlug}/${data?.entry?.slug}`;
+   } catch (error) {
+      console.error("Error in entryMeta", error, data?.entry);
+   }
 
    return getMeta({ title, description, image, siteName, canonicalURL });
 };
diff --git a/app/routes/_site+/c_+/$collectionId_.$entryId/utils/fetchEntry.server.ts b/app/routes/_site+/c_+/$collectionId_.$entryId/utils/fetchEntry.server.ts
@@ -7,13 +7,14 @@ import { getEntryFields } from "./getEntryFields.server";
 
 //Fetches all entry data.
 export async function fetchEntry({
+   isAuthOverride = false,
    payload,
    params,
    request,
    user,
    rest,
    gql,
-}: RestOrGraphql) {
+}: RestOrGraphql & { isAuthOverride?: boolean }) {
    const { entry } = await getEntryFields({
       payload,
       params,
@@ -32,6 +33,7 @@ export async function fetchEntry({
            query: gql?.query,
            request,
            customPath: undefined,
+           isAuthOverride,
            variables: {
               entryId: entry.id,
               jsonEntryId: entry.id,
@@ -40,8 +42,8 @@ export async function fetchEntry({
         })
       : rest?.depth
         ? user
-           ? authRestFetcher({ path: restPath, method: "GET" })
-           : fetchWithCache(restPath)
+           ? authRestFetcher({ path: restPath, method: "GET", isAuthOverride })
+           : fetchWithCache(restPath, undefined, undefined, isAuthOverride)
         : undefined;
 
    const [data, embeddedContent] = await Promise.all([

diff --git a/app/routes/_site+/c_+/$collectionId_.$entryId/utils/getEntryFields.server.ts b/app/routes/_site+/c_+/$collectionId_.$entryId/utils/getEntryFields.server.ts
@@ -89,6 +89,7 @@ export async function getEntryFields({
       //@ts-ignore
       const { entryData }: { entryData: PaginatedDocs<Entry> } = await gqlFetch(
          {
+            isAuthOverride: true,
             isCustomDB: true,
             isCached: user ? false : true,
             query: entryQuery,

diff --git a/app/routes/_site+/c_+/_components/CollectionHeader.tsx b/app/routes/_site+/c_+/_components/CollectionHeader.tsx
@@ -54,6 +54,13 @@ export function CollectionHeader({
 
    const [isSectionsOpen, setSectionsOpen] = useState<boolean>(false);
 
+   const showIcon =
+      isEntry && entry?.icon?.url
+         ? true
+         : !isEntry && collection?.icon?.url
+           ? true
+           : false;
+
    return (
       <div className="bg-gradient-to-t from-white to-zinc-100 dark:from-dark350 dark:to-bg3Dark relative">
          <div className="laptop:pt-0 z-20 relative">
@@ -152,20 +159,15 @@ export function CollectionHeader({
                <h1 className="font-bold font-header text-2xl tablet:text-3xl pb-3 max-tablet:pr-14">
                   {entryName ?? collectionName}
                </h1>
-               <div className="absolute right-3 laptop:right-0 top-7">
-                  <Avatar
-                     src={isEntry ? entry?.icon?.url : collection?.icon?.url}
-                     className="size-16 bg-3"
-                     initials={
-                        entry?.icon?.url || collection?.icon?.url
-                           ? undefined
-                           : isEntry
-                             ? entryName?.charAt(0)
-                             : collectionName?.charAt(0)
-                     }
-                     options="aspect_ratio=1:1&height=128&width=128"
-                  />
-               </div>
+               {showIcon ? (
+                  <div className="absolute right-3 laptop:right-0 top-7">
+                     <Avatar
+                        src={isEntry ? entry?.icon?.url : collection?.icon?.url}
+                        className="size-16 bg-3"
+                        options="aspect_ratio=1:1&height=128&width=128"
+                     />
+                  </div>
+               ) : undefined}
             </div>
          </div>
          <section className="border-b border-zinc-200/50 dark:border-darkBorder shadow-sm max-tablet:px-3 pb-1 [clip-path:inset(0px_-10px_-10px_-10px)] relative z-10">