Weaverse · paul-phan · Nov 24, 2023 · Nov 21, 2023 · Nov 22, 2023 · Nov 22, 2023
diff --git a/.env.example b/.env.example
@@ -1,2 +1,6 @@
 SESSION_SECRET="super-secret"
 PUBLIC_STORE_DOMAIN="mock.shop"
+#PUBLIC_STOREFRONT_API_TOKEN="your-public-storefront-api-token"
+#WEAVERSE_PROJECT_ID="your-weaverse-project-id"
+#WEAVERSE_API_KEY="your-weaverse-api-key"
+#PRIVATE_STOREFRONT_API_TOKEN="your-private-storefront-api-token"
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,5 @@
 /**
- * @type {import('@types/eslint').Linter.BaseConfig}
+ * @type {import("@types/eslint").Linter.BaseConfig}
  */
 module.exports = {
   extends: [

diff --git a/app/components/Container.tsx b/app/components/Container.tsx
diff --git a/app/components/Heading.tsx b/app/components/Heading.tsx
@@ -0,0 +1,12 @@
+import {clsx} from 'clsx';
+
+type HeadingProps = {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  children: React.ReactNode | string;
+  className?: string;
+};
+
+export function Heading(props: HeadingProps) {
+  let {as: Tag = 'h1', children, className} = props;
+  return <Tag className={clsx('font-medium', className)}>{children}</Tag>;
+}
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -245,7 +245,8 @@ function DesktopHeader({
       className={clsx(
         'bg-primary text-body',
         y > 50 && ' shadow-header',
-        'hidden h-nav lg:flex items-center sticky transition duration-300 backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-8 px-12 py-4',
+        'hidden h-nav lg:flex items-center sticky transition duration-300 backdrop-blur-lg z-40 top-0 justify-between leading-none gap-8',
+        'w-full px-6 md:px-8 lg:px-12 py-4',
       )}
     >
       <div className="flex gap-12">

diff --git a/app/root.tsx b/app/root.tsx
@@ -65,6 +65,19 @@ export const links: LinksFunction = () => {
       href: 'https://shop.app',
     },
     {rel: 'icon', type: 'image/svg+xml', href: favicon},
+    {
+      rel: 'preconnect',
+      href: 'https://fonts.googleapis.com',
+    },
+    {
+      href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
+      rel: 'preload',
+      as: 'style',
+    },
+    {
+      href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
+      rel: 'stylesheet',
+    },
   ];
 };
 
@@ -155,7 +168,7 @@ const ErrorBoundaryComponent = ({error}: {error: Error}) => {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="font-sans">
         <Layout
           layout={rootData?.layout}
           key={`${locale.language}-${locale.country}`}
@@ -182,7 +195,7 @@ const ErrorBoundaryComponent = ({error}: {error: Error}) => {
   );
 };
 
-export const ErrorBoundary = withWeaverse(ErrorBoundaryComponent);
+export const ErrorBoundary = ErrorBoundaryComponent;
 
 const LAYOUT_QUERY = `#graphql
   query layout(

diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx
@@ -6,41 +6,40 @@ import {
   useMatches,
   useOutlet,
 } from '@remix-run/react';
-import {Suspense} from 'react';
+import {flattenConnection} from '@shopify/hydrogen';
 import {
-  json,
   defer,
+  json,
   redirect,
-  type LoaderFunctionArgs,
   type AppLoadContext,
+  type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
-import {flattenConnection} from '@shopify/hydrogen';
+import {Suspense} from 'react';
 
 import type {
   CustomerDetailsFragment,
   OrderCardFragment,
 } from 'storefrontapi.generated';
 import {
+  AccountAddressBook,
+  AccountDetails,
   Button,
+  Modal,
   OrderCard,
   PageHeader,
-  Text,
-  AccountDetails,
-  AccountAddressBook,
-  Modal,
   ProductSwimlane,
+  Text,
 } from '~/components';
 import {FeaturedCollections} from '~/components/FeaturedCollections';
-import {usePrefixPathWithLocale} from '~/lib/utils';
-import {CACHE_NONE, routeHeaders} from '~/data/cache';
 import {ORDER_CARD_FRAGMENT} from '~/components/OrderCard';
+import {CACHE_NONE, routeHeaders} from '~/data/cache';
+import {usePrefixPathWithLocale} from '~/lib/utils';
 
+import {doLogout} from './($locale).account.logout';
 import {
   getFeaturedData,
   type FeaturedData,
 } from './($locale).featured-products';
-import {doLogout} from './($locale).account.logout';
-import {Container} from '~/components/Container';
 
 // Combining json + defer in a loader breaks the
 // types returned by useLoaderData. This is a temporary fix.
@@ -133,7 +132,7 @@ function Account({customer, heading, featuredData}: AccountType) {
   const addresses = flattenConnection(customer.addresses);
 
   return (
-    <Container>
+    <div className="container mx-auto px-4 max-w-screen-xl">
       <PageHeader heading={heading}>
         <Form method="post" action={usePrefixPathWithLocale('/account/logout')}>
           <button type="submit" className="text-body/50">
@@ -162,7 +161,7 @@ function Account({customer, heading, featuredData}: AccountType) {
           </Await>
         </Suspense>
       )}
-    </Container>
+    </div>
   );
 }
 

diff --git a/app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx b/app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx
@@ -6,13 +6,13 @@ import {routeHeaders} from '~/data/cache';
 import {ARTICLE_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import styles from '../styles/custom-font.css';
+// import styles from '../styles/custom-font.css';
 
 export const headers = routeHeaders;
 
-export const links: LinksFunction = () => {
-  return [{rel: 'stylesheet', href: styles}];
-};
+// export const links: LinksFunction = () => {
+//   return [{rel: 'stylesheet', href: styles}];
+// };
 
 export async function loader(args: RouteLoaderArgs) {
   let {request, params, context} = args;

diff --git a/app/sections/collection-header.tsx b/app/sections/collection-header.tsx
@@ -2,10 +2,10 @@ import type {
   HydrogenComponentProps,
   HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import { useLoaderData } from '@remix-run/react';
-import { CollectionDetailsQuery } from 'storefrontapi.generated';
-import { CSSProperties } from 'react';
+import {forwardRef} from 'react';
+import {useLoaderData} from '@remix-run/react';
+import {CollectionDetailsQuery} from 'storefrontapi.generated';
+import {CSSProperties} from 'react';
 import clsx from 'clsx';
 
 interface HeaderProps extends HydrogenComponentProps {
@@ -18,15 +18,23 @@ interface HeaderProps extends HydrogenComponentProps {
 }
 
 let CollectHeader = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
-  let { sectionHeightDesktop, sectionHeightMobile, enableBackground, overlayOpacity, enableOverlay, contentPosition, ...rest } = props;
-  let { collection } = useLoaderData<
+  let {
+    sectionHeightDesktop,
+    sectionHeightMobile,
+    enableBackground,
+    overlayOpacity,
+    enableOverlay,
+    contentPosition,
+    ...rest
+  } = props;
+  let {collection} = useLoaderData<
     CollectionDetailsQuery & {
-      collections: Array<{ handle: string; title: string }>;
+      collections: Array<{handle: string; title: string}>;
     }
   >();
   let backgroundStyle: CSSProperties = {
     '--header-height-desktop': `${sectionHeightDesktop}px`,
-    '--header-height-mobile': `${sectionHeightMobile}px`
+    '--header-height-mobile': `${sectionHeightMobile}px`,
   } as CSSProperties;
 
   if (enableBackground) {
@@ -38,7 +46,7 @@ let CollectHeader = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
       '--overlay-opacity': `${overlayOpacity}`,
     } as CSSProperties;
   }
-  let positionClass: {[key: string]: string} =  {
+  let positionClass: {[key: string]: string} = {
     'top left': 'items-start justify-start',
     'top right': 'items-start justify-end',
     'top center': 'items-start justify-center',
@@ -50,20 +58,30 @@ let CollectHeader = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
     'bottom right': 'items-end justify-end',
   };
   return (
-    <section ref={ref} {...rest} style={backgroundStyle} className={clsx(
-      'flex relative overflow-hidden bg-center bg-no-repeat bg-cover h-[var(--header-height-mobile)] sm:h-[var(--header-height-desktop)]',
-      positionClass[contentPosition]
-    )}>
-      {enableOverlay && enableBackground && <div className="absolute inset-0 z-1 bg-black bg-opacity-[var(--overlay-opacity)]" style={overlayStyle}></div>}
-      <div className={clsx(
-        'text-center w-5/6 text-gray-700 z-2 relative',
-        enableBackground ? 'text-white' : 'text-gray-700',
-      )}>
-        <h1 className='text-4xl tracking-tight font-worksans font-normal leading-tight md:text-5xl'>
-          {collection?.title}
-        </h1>
+    <section
+      ref={ref}
+      {...rest}
+      style={backgroundStyle}
+      className={clsx(
+        'flex relative overflow-hidden bg-center bg-no-repeat bg-cover h-[var(--header-height-mobile)] sm:h-[var(--header-height-desktop)]',
+        positionClass[contentPosition],
+      )}
+    >
+      {enableOverlay && enableBackground && (
+        <div
+          className="absolute inset-0 z-1 bg-black bg-opacity-[var(--overlay-opacity)]"
+          style={overlayStyle}
+        ></div>
+      )}
+      <div
+        className={clsx(
+          'text-center w-5/6 text-gray-700 z-2 relative',
+          enableBackground ? 'text-white' : 'text-gray-700',
+        )}
+      >
+        <h3 className="leading-tight font-medium">{collection?.title}</h3>
         {collection?.description && (
-          <p className="mt-4 dark:text-gray-400 font-worksans text-base md:text-sm">
+          <p className="mt-4 dark:text-gray-400 text-base md:text-sm">
             {collection.description}
           </p>
         )}
@@ -78,6 +96,9 @@ export let schema: HydrogenComponentSchema = {
   type: 'collection-header',
   title: 'Collection header',
   toolbar: ['general-settings', ['duplicate', 'delete']],
+  enabledOn: {
+    pages: ['COLLECTION'],
+  },
   inspector: [
     {
       group: 'Header',
@@ -96,7 +117,7 @@ export let schema: HydrogenComponentSchema = {
           configs: {
             min: 350,
             max: 550,
-            step: 10
+            step: 10,
           },
         },
         {
@@ -107,7 +128,7 @@ export let schema: HydrogenComponentSchema = {
           configs: {
             min: 350,
             max: 550,
-            step: 10
+            step: 10,
           },
         },
         {
@@ -124,16 +145,16 @@ export let schema: HydrogenComponentSchema = {
           configs: {
             min: 0.1,
             max: 1,
-            step: 0.1
+            step: 0.1,
           },
-          condition: `enableOverlay.eq.true`
+          condition: `enableOverlay.eq.true`,
         },
         {
           type: 'position',
           name: 'contentPosition',
           label: 'Content position',
-          defaultValue: 'center center'
-        }
+          defaultValue: 'center center',
+        },
       ],
     },
   ],

diff --git a/app/sections/count-down/heading-item.tsx b/app/sections/count-down/heading-item.tsx
@@ -0,0 +1,49 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties } from 'react';
+
+
+interface CountDownHeadingProps extends HydrogenComponentProps {
+  heading: string;
+  textColor: string;
+}
+
+let CountDownHeading = forwardRef<HTMLDivElement, CountDownHeadingProps>((props, ref) => {
+  let { heading, textColor, ...rest } = props;
+  let headingStyle: CSSProperties = {
+    '--heading-text-color': textColor,
+  } as CSSProperties;
+  return (
+    <div ref={ref} {...rest} style={headingStyle}>
+      {heading && <h3 className='font-medium text-[var(--heading-text-color)]'>{heading}</h3>}
+    </div>
+  );
+});
+
+export default CountDownHeading;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'count-down--heading',
+  title: 'Heading',
+  inspector: [
+    {
+      group: 'Heading',
+      inputs: [
+        {
+          type: 'text',
+          name: 'heading',
+          label: 'Heading',
+          defaultValue: 'Countdown heading',
+        },
+        {
+          type: 'color',
+          name: 'textColor',
+          label: 'Color',
+          defaultValue: '#000000',
+        }
+      ],
+    },
+  ],
+};