Merge branch 'manawiki:main' into main

app/components/Headers.tsx

@@ -25,7 +25,7 @@ export const H2Plain = ({
    return (
       <h2
          className="dark:text-zinc-100 mt-8 mb-3 pl-3.5 leading-7 dark:bg-dark400 bg-zinc-100 block shadow-sm dark:shadow-zinc-800/70 border-zinc-300
-      font-header relative text-lg scroll-mt-32 laptop:scroll-mt-60 rounded-l rounded-r-md py-2 overflow-hidden border shadow-zinc-50 dark:border-zinc-600"
+      font-header relative text-lg scroll-mt-20 rounded-l rounded-r-md py-2 overflow-hidden border shadow-zinc-50 dark:border-zinc-600"
       >
          <span className="z-10 relative">{text}</span>
          <span

app/db/payload.config.ts

@@ -67,6 +67,9 @@ export default buildConfig({
          },
       }),
    ],
+   graphQL: {
+      maxComplexity: 2000,
+   },
    globals: [],
    collections,
    typescript: {

app/db/payload.custom.config.ts

@@ -80,6 +80,9 @@ export default buildConfig({
       outputFile: path.resolve(__dirname, "./payload-custom-types.ts"),
    },
    collections: [Users, CustomImages, ...CustomCollections],
+   graphQL: {
+      maxComplexity: 2000,
+   },
    globals: [],
    // disable Payload ratelimit, rely on flyio request limit instead
    rateLimit: {

app/routes/_editor+/blocks+/image/BlockImageView.tsx

@@ -33,7 +33,11 @@ export function BlockImageView({ element, children }: Props) {
                className="!p-0 !overflow-hidden"
                open={isOpen}
             >
-               <Image className="w-auto mx-auto" url={element.url} />
+               <Image
+                  className="w-auto mx-auto"
+                  url={element.url}
+                  loading="lazy"
+               />
                {element.caption && (
                   <div className="p-2 text-center text-sm border-t dark:border-zinc-700 dark:bg-dark350/80 bg-white w-full">
                      {children}
@@ -55,6 +59,7 @@ export function BlockImageView({ element, children }: Props) {
                   className="max-h-80 w-auto mx-auto"
                   alt="Inline"
                   url={element.url}
+                  loading="lazy"
                />
                {element.caption && (
                   <div className="p-2 text-center text-sm border-t dark:border-zinc-700 dark:bg-dark350/80 bg-white w-full">

app/routes/_editor+/blocks+/inline-ad.tsx

@@ -6,7 +6,7 @@ export function BlockInlineAd({ element }: { element: InlineAdElement }) {
    return (
       <AdPlaceholder>
          <AdUnit
-            className="my-8 mx-auto flex items-center justify-center"
+            className="my-4 mx-auto flex items-center justify-center"
             enableAds
             adType={{
                desktop: "leaderboard_btf",

app/routes/_editor+/core/components/EditorBlocks.tsx

@@ -75,7 +75,7 @@ export function EditorBlocks({
             <h2
                id={id}
                className="dark:text-zinc-100 mt-8 mb-3 pl-3.5 leading-7 dark:bg-dark400 bg-zinc-100 block shadow-sm dark:shadow-zinc-800/70 border-zinc-300
-      font-header relative text-lg scroll-mt-32 laptop:scroll-mt-60 rounded-l rounded-r-md py-2 overflow-hidden border shadow-zinc-50 dark:border-zinc-600"
+      font-header relative text-lg scroll-mt-20 rounded-l rounded-r-md py-2 overflow-hidden border shadow-zinc-50 dark:border-zinc-600"
                {...attributes}
             >
                <span className="z-10 relative">{children}</span>
@@ -99,10 +99,12 @@ export function EditorBlocks({
          return (
             <h3
                id={id}
-               className="flex items-center dark:text-zinc-100 gap-3 mt-6 mb-2 font-header text-xl scroll-mt-32 laptop:scroll-mt-16"
+               className="flex max-laptop:flex-col laptop:items-center dark:text-zinc-100 gap-3 mt-6 mb-2 font-header text-xl scroll-mt-20"
                {...attributes}
             >
-               <div className="min-w-[10px] flex-none">{children}</div>
+               <div className="min-w-[10px] flex-none whitespace-pre-wrap">
+                  {children}
+               </div>
                <div
                   contentEditable={false}
                   className="h-1 w-full rounded-full bg-zinc-100 dark:bg-dark400"

app/routes/_editor+/core/components/EditorView.tsx

@@ -30,7 +30,7 @@ export function EditorView({
       return isTopLevel ? (
          <div
             style={{
-               width: isVariableWidth
+               maxWidth: isVariableWidth
                   ? //@ts-ignore
                     `${props.element.containerWidth}px`
                   : autoWidth

app/routes/_editor+/core/dnd.tsx

@@ -320,7 +320,7 @@ function HoverElement({
    return (
       <section
          style={{
-            width: isNested
+            maxWidth: isNested
                ? undefined
                : isVariableWidth
                  ? `${element.containerWidth}px`

app/routes/_site+/_components/BrandingFooter.tsx

@@ -46,7 +46,7 @@ export function BrandingFooter({ site }: { site: Site }) {
                   </Link>
                )}
             <div className="flex items-center gap-4 text-xs text-1">
-               <DarkModeToggle className="!size-3.5" />
+               <DarkModeToggle className="!size-4" />
                <LoggedOut>
                   <Link
                      to="/join"

app/routes/_site+/_components/Column-4.tsx

@@ -336,7 +336,7 @@ export function ColumnFour() {
                   </div>
                )}
             </LoggedOut>
-            <div className="max-laptop:py-4 border-t border-color laptop:h-[54px] bg-zinc-50 laptop:bg-white dark:bg-dark350 flex items-center px-3.5 laptop:w-[333px] z-40 laptop:fixed bottom-0 right-0">
+            <div className="max-laptop:py-4 border-t border-color laptop:h-[54px] bg-zinc-50 laptop:bg-white dark:bg-bg2Dark flex items-center px-3.5 laptop:w-[333px] z-40 laptop:fixed bottom-0 right-0">
                <div className="justify-between w-full flex items-center max-laptop:max-w-[728px] mx-auto gap-3">
                   {!site.isWhiteLabel && (
                      <Link

app/routes/_site+/_components/MobileHeader.tsx

@@ -31,8 +31,8 @@ export function MobileHeader() {
    return (
       <>
          <header
-            className="dark:bg-dark350 bg-white dark:border-zinc-700 laptop:dark:border-zinc-700/20 dark:shadow-zinc-800 fixed top-0 z-30 flex 
-                        h-14 w-full items-center justify-between border-b px-3 laptop:shadow-sm laptop:hidden"
+            className="dark:bg-dark350 bg-white dark:border-zinc-700 laptop:dark:border-zinc-700/20 dark:shadow-zinc-800 z-30 flex 
+                        h-14 w-full relative items-center justify-between border-b px-3 laptop:shadow-sm laptop:hidden"
          >
             <LoggedIn>
                <div className="flex w-full flex-none items-center justify-between gap-3 laptop:hidden">

app/routes/_site+/_components/RampUnit.tsx

@@ -103,39 +103,51 @@ export function AdUnit({
       };
    }, [pathname]);
 
-   if (enableAds) {
-      return (
-         <>
-            <ClientOnly fallback={<></>}>
-               {() => (
-                  <>
-                     {deviceType.isMobile && adType.mobile ? (
-                        <AdUnitSelector
-                           adType={adType.mobile}
-                           selectorId={selectorId}
-                           className={className}
-                        />
-                     ) : undefined}
-                     {deviceType.isTablet && adType.tablet ? (
-                        <AdUnitSelector
-                           adType={adType.tablet}
-                           selectorId={selectorId}
-                           className={className}
-                        />
-                     ) : undefined}
-                     {deviceType.isDesktop && adType.desktop ? (
-                        <AdUnitSelector
-                           adType={adType.desktop}
-                           selectorId={selectorId}
-                           className={className}
-                        />
-                     ) : undefined}
-                  </>
-               )}
-            </ClientOnly>
-         </>
-      );
-   }
+   const [startDetect, setStartDetect] = useState(true);
+   const [detected, setDetected] = useState(false);
+
+   useEffect(() => {
+      if (startDetect) {
+         detectAdblock((enable) => {
+            setStartDetect(false);
+            setDetected(enable);
+         });
+      }
+   }, [startDetect]);
+
+   if (!enableAds) return <></>;
+
+   className = className + " h-[250px] tablet:h-[90px]"; // set Default height to fix ad cls
+
+   return (
+      <ClientOnly fallback={<div className={className} />}>
+         {() => (
+            <>
+               {!detected && deviceType.isMobile && adType.mobile ? (
+                  <AdUnitSelector
+                     adType={adType.mobile}
+                     selectorId={selectorId}
+                     className={className}
+                  />
+               ) : undefined}
+               {!detected && deviceType.isTablet && adType.tablet ? (
+                  <AdUnitSelector
+                     adType={adType.tablet}
+                     selectorId={selectorId}
+                     className={className}
+                  />
+               ) : undefined}
+               {!detected && deviceType.isDesktop && adType.desktop ? (
+                  <AdUnitSelector
+                     adType={adType.desktop}
+                     selectorId={selectorId}
+                     className={className}
+                  />
+               ) : undefined}
+            </>
+         )}
+      </ClientOnly>
+   );
 }
 
 export function AdPlaceholder({ children }: { children?: ReactNode }) {
@@ -165,3 +177,95 @@ export function AdPlaceholder({ children }: { children?: ReactNode }) {
       );
    return children;
 }
+
+/**
+ * Check status of network connection
+ *
+ * @returns boolean
+ */
+const is_connected = () => {
+   return window.navigator.onLine;
+};
+
+function detectByGoogleAd(callback: (enable: boolean) => void) {
+   let head = document.getElementsByTagName("head")[0] as HTMLElement;
+   let script = document.createElement("script") as HTMLScriptElement;
+   let done = false;
+   let windowElement: typeof window & { adsbygoogle?: string };
+
+   if (!is_connected()) {
+      callback(false);
+      return;
+   }
+
+   const reqURL =
+      "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
+   script.setAttribute("src", reqURL);
+   script.setAttribute("type", "text/javascript");
+   script.setAttribute("charset", "utf-8");
+
+   let alreadyDetectedByAdd = false;
+   script.onload = () => {
+      if (!done) {
+         done = true;
+         script.onload = null;
+
+         if (windowElement?.adsbygoogle == "undefined") {
+            callback(true);
+            alreadyDetectedByAdd = true;
+         }
+         script.parentNode?.removeChild(script);
+      }
+   };
+
+   /** On Error. */
+   script.onerror = function () {
+      callback(true);
+   };
+
+   /** If Already Detectecd by adding scripts */
+   if (alreadyDetectedByAdd) {
+      return;
+   }
+
+   /** Async */
+   let callbacked = false;
+   const request = new XMLHttpRequest();
+   request.open("GET", reqURL, true);
+   request.onreadystatechange = () => {
+      if (
+         request.status === 0 ||
+         (request.status >= 200 && request.status < 400)
+      ) {
+         if (
+            request.responseText.toLowerCase().indexOf("ublock") > -1 ||
+            request.responseText.toLowerCase().indexOf("height:1px") > -1
+         ) {
+            if (callbacked) {
+               callback(true);
+               return;
+            }
+            callbacked = true;
+         }
+      }
+
+      if (!callbacked) {
+         callback(request.responseURL !== reqURL);
+         return;
+      }
+   };
+
+   request.send();
+   head.insertBefore(script, head.firstChild);
+}
+
+export function detectAdblock(callback: (enable: boolean) => void) {
+   /** Check Other Adblock Extensions with the help of googlead */
+   detectByGoogleAd(function (blocked) {
+      if (blocked) {
+         callback(true);
+      } else {
+         callback(false);
+      }
+   });
+}

app/routes/_site+/_components/SiteHeader.tsx

@@ -26,6 +26,7 @@ import { isAdding } from "~/utils/form";
 import { MenuTrayContent, MobileTray } from "./MobileTray";
 import { searchClient } from "../search/_search";
 import { Autocomplete } from "../search/components/Autocomplete";
+import { DarkModeToggle } from "../action+/theme-toggle";
 
 export function SiteHeader({
    setPrimaryMenuOpen,
@@ -43,8 +44,8 @@ export function SiteHeader({
 
    return (
       <section
-         className="z-30 w-full laptop:z-50 fixed max-laptop:top-[56px] shadow-sm dark:shadow-zinc-900/30
-        laptop:sticky laptop:top-0 dark:bg-dark350 bg-white border-color border-b border-zinc-200/50"
+         className="z-30 w-full laptop:z-50 max-laptop:top-0 shadow-sm dark:shadow-zinc-900/30
+        sticky top-0 dark:bg-dark350 bg-white border-color border-b border-zinc-200/50"
       >
          <div
             className="pattern-dots absolute left-0
@@ -53,11 +54,7 @@ export function SiteHeader({
             pattern-size-1 dark:pattern-zinc-500 dark:pattern-bg-bg3Dark"
          />
          <div className="relative mx-auto w-full laptop:max-w-[732px] laptop:rounded-b-2xl">
-            <div
-               className={clsx(
-                  "h-[60px] relative mx-auto flex items-center justify-between",
-               )}
-            >
+            <div className="h-[60px] relative mx-auto flex items-center justify-between">
                <>
                   <div className="flex items-center truncate max-laptop:pl-3">
                      <Link
@@ -233,6 +230,9 @@ export function SiteHeader({
                            </button>
                         </div>
                      </NotFollowingSite>
+                     <div className="laptop:!hidden">
+                        <DarkModeToggle className="size-5" />
+                     </div>
                      <div className="flex items-center justify-center gap-2 hover:border-zinc-400 shadow-sm bg-zinc-100 dark:bg-dark500 border border-zinc-300 dark:border-zinc-500 dark:hover:border-zinc-400 rounded-full size-10">
                         <InstantSearch searchClient={searchClient}>
                            <Autocomplete site={site} />