app/components/common/Iframe.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 
 type IframeProps = {

app/components/common/Image.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Image(props: { src: string; alt: string } & React.ComponentPropsWithoutRef<"img">) {
   return <img {...props} src={props.src} alt={props.alt} loading="lazy" />;
 }

app/components/common/Link.tsx

@@ -1,9 +1,8 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { prefetch } from "vike/client/router";
-import React from "react";
 import clsx from "clsx";
 
-export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; className?: string }) {
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
   const { urlPathname } = usePageContext();
   const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href);
   const isSameDomain = !(props.href.startsWith("http") || props.href.startsWith("mailto"));

app/components/md/Tabs.tsx

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 
-import React, { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { Button } from "@syntax/Button";
 import clsx from "clsx";
 

app/components/syntax/Button.tsx

@@ -1,5 +1,4 @@
 import { Link } from "@/components/common/Link";
-import React from "react";
 import clsx from "clsx";
 
 const variantStyles = {

app/components/syntax/CSRSnippet.tsx

@@ -1,8 +1,8 @@
 import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
 import { prismThemes } from "@/data/themes/prism";
-import React, { Fragment, useMemo } from "react";
 import { Highlight } from "prism-react-renderer";
 import { useTheme } from "@/hooks/useTheme";
+import { Fragment, useMemo } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./Button";
 import Prism from "prismjs";
@@ -40,7 +40,7 @@ export default function CSRSnippet({
                 {label}
               </div>
             )}
-            <pre className={clsx(className, { "pt-11": label })} style={style}>
+            <pre className={clsx(className, { "pt-11": !!label })} style={style}>
               <code>
                 {tokens.map((line, lineIndex) => (
                   <Fragment key={lineIndex}>
@@ -69,7 +69,7 @@ export default function CSRSnippet({
       <Button
         className={clsx(
           "absolute right-2 w-8 h-8 aspect-square opacity-0 group-hover:opacity-50 hover:opacity-100 transition-opacity",
-          label ? "top-10" : "top-2",
+          !!label ? "top-10" : "top-2",
         )}
         size="sm"
         variant="secondary"

app/components/syntax/Callout.tsx

@@ -1,5 +1,4 @@
 import { Icon } from "@syntax/Icon";
-import React from "react";
 import clsx from "clsx";
 
 const styles = {
@@ -37,12 +36,10 @@ export function Callout({
   type?: keyof typeof styles;
   collapsible?: boolean;
 }) {
-  const IconComponent = icons[type];
+  let IconComponent = icons[type];
 
   return (
-    <div
+    <div className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container)}>
-      className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container, { "cursor-pointer": collapsible })}
-    >
       <div className="flex items-center gap-6">
         <IconComponent className="h-8 w-8 flex-none" />
         <p className={clsx("!m-0 font-display text-xl text-balance", styles[type].title)}>{title}</p>

app/components/syntax/DocsHeader.tsx

@@ -1,7 +1,6 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { navigation } from "@/lib/navigation";
-import React from "react";
 
 type DocsHeaderProps = {
   title?: string;

app/components/syntax/DocsLayout.tsx

@@ -5,7 +5,6 @@ import { PrevNextLinks } from "@syntax/PrevNextLinks";
 import { collectSections } from "@/lib/sections";
 import { DocsHeader } from "@syntax/DocsHeader";
 import { Prose } from "@syntax/Prose";
-import React from "react";
 
 export function DocsLayout({
   children,
@@ -18,7 +17,7 @@ export function DocsLayout({
   estimatedReadingTime?: string;
   nodes: Array<Node>;
 }) {
-  const tableOfContents = collectSections(nodes);
+  let tableOfContents = collectSections(nodes);
 
   return (
     <>

app/components/syntax/Fence.tsx

@@ -1,6 +1,5 @@
 import { clientOnly } from "vike-react/clientOnly";
 import { SSRSnippet } from "./SSRSnippet";
-import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 

app/components/syntax/Hero.tsx

@@ -3,8 +3,8 @@ import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
 import { Image } from "@/components/common/Image";
 import { Highlight } from "prism-react-renderer";
-import React, { Fragment } from "react";
 import { Button } from "@syntax/Button";
+import { Fragment } from "react";
 import clsx from "clsx";
 
 const codeLanguage = "javascript";

app/components/syntax/HeroBackground.tsx

@@ -1,4 +1,4 @@
-import React, { useId } from "react";
+import { useId } from "react";
 
 export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) {
   const id = useId();

app/components/syntax/Icon.tsx

@@ -5,7 +5,7 @@ import { PluginsIcon } from "@syntax/icons/PluginsIcon";
 import { PresetsIcon } from "@syntax/icons/PresetsIcon";
 import { ThemingIcon } from "@syntax/icons/ThemingIcon";
 import { WarningIcon } from "@syntax/icons/WarningIcon";
-import React, { useId } from "react";
+import { useId } from "react";
 import clsx from "clsx";
 
 const icons = {
@@ -32,8 +32,8 @@ export function Icon({
   color?: keyof typeof iconStyles;
   icon: keyof typeof icons;
 } & Omit<React.ComponentPropsWithoutRef<"svg">, "color">) {
-  const id = useId();
+  let id = useId();
-  const IconComponent = icons[icon];
+  let IconComponent = icons[icon];
 
   return (
     <svg aria-hidden="true" viewBox="0 0 32 32" fill="none" className={clsx(className, iconStyles[color])} {...props}>

app/components/syntax/Logo.tsx

@@ -1,6 +1,11 @@
-import React from "react";
-
 function LogomarkPaths() {
+  // return (
+  //   <g fill="none" stroke="#38BDF8" strokeLinejoin="round" strokeWidth={3}>
+  //     <path d="M10.308 5L18 17.5 10.308 30 2.615 17.5 10.308 5z" />
+  //     <path d="M18 17.5L10.308 5h15.144l7.933 12.5M18 17.5h15.385L25.452 30H10.308L18 17.5z" />
+  //   </g>
+  // );
+
   return (
     <>
       <defs>
@@ -28,6 +33,25 @@ function LogomarkPaths() {
   );
 }
 
+export function LogoWithText(props: React.ComponentPropsWithoutRef<"svg">) {
+  return (
+    <svg viewBox="0 0 231 38" {...props}>
+      <LogomarkPaths />
+      <text
+        className="hidden lg:block fill-zinc-900 dark:fill-zinc-100"
+        fontFamily="Inter Variable, sans-serif"
+        fontSize={24}
+        fontWeight="bold"
+        letterSpacing="-.02em"
+        x={74}
+        y={26}
+      >
+        Memento Dev
+      </text>
+    </svg>
+  );
+}
+
 export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg viewBox="0 0 58 38" {...props}>

app/components/syntax/MobileNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useEffect, useState } from "react";
+import { Suspense, useCallback, useEffect, useState } from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { Dialog, DialogPanel } from "@headlessui/react";
 import { Navigation } from "@syntax/Navigation";
@@ -32,12 +32,11 @@ function CloseOnNavigation({ close }: { close: () => void }) {
 }
 
 export function MobileNavigation() {
-  const [isOpen, setIsOpen] = useState(false);
+  let [isOpen, setIsOpen] = useState(false);
-  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  let close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
   function onLinkClick(event: React.MouseEvent<HTMLAnchorElement>) {
-    const link = event.currentTarget;
+    let link = event.currentTarget;
-
     if (
       link.pathname + link.search + link.hash ===
       window.location.pathname + window.location.search + window.location.hash

app/components/syntax/Navigation.tsx

@@ -1,8 +1,8 @@
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
 import { usePageContext } from "vike-react/usePageContext";
-import React, { useEffect, useState } from "react";
 import { Link } from "@/components/common/Link";
 import { navigation } from "@/lib/navigation";
+import { useEffect, useState } from "react";
 import clsx from "clsx";
 
 type NavigationItemProps = {

app/components/syntax/PrevNextLinks.tsx

@@ -1,7 +1,6 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { Link } from "@/components/common/Link";
 import { navigation } from "@/lib/navigation";
-import React from "react";
 import clsx from "clsx";
 
 function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {

app/components/syntax/Prose.tsx

@@ -8,7 +8,7 @@ export function Prose<T extends React.ElementType = "div">({
 }: React.ComponentPropsWithoutRef<T> & {
   as?: T;
 }) {
-  const Component = as ?? "div";
+  let Component = as ?? "div";
 
   return (
     <Component