added initial UI

contentstack · Feb 7, 2024 · d8a317c · d8a317c
1 parent bf16f97
commit d8a317c
Show file tree

Hide file tree

Showing 51 changed files with 23,434 additions and 10,683 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,58 +1,67 @@
 import {NavLink} from '@remix-run/react';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
 import {useRootLoaderData} from '~/root';
+import '../styles/pages.css';
 
 export function Footer({
   menu,
   shop,
 }: FooterQuery & {shop: HeaderQuery['shop']}) {
   return (
     <footer className="footer">
-      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
+      {/* {menu && shop?.primaryDomain?.url && (
+        <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
+      )} */}
+      <p>Subscribe to our emails</p>
+      <div>
+        <input className="footer_email" type="email" placeholder="Email" />
+      </div>
     </footer>
   );
 }
 
-function FooterMenu({
-  menu,
-  primaryDomainUrl,
-}: {
-  menu: FooterQuery['menu'];
-  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
-}) {
-  const {publicStoreDomain} = useRootLoaderData();
+// function FooterMenu({
+//   menu,
+//   primaryDomainUrl,
+// }: {
+//   menu: FooterQuery['menu'];
+//   primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+// }) {
+//   const {publicStoreDomain} = useRootLoaderData();
 
-  return (
-    <nav className="footer-menu" role="navigation">
-      {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
-        if (!item.url) return null;
-        // if the url is internal, we strip the domain
-        const url =
-          item.url.includes('myshopify.com') ||
-          item.url.includes(publicStoreDomain) ||
-          item.url.includes(primaryDomainUrl)
-            ? new URL(item.url).pathname
-            : item.url;
-        const isExternal = !url.startsWith('/');
-        return isExternal ? (
-          <a href={url} key={item.id} rel="noopener noreferrer" target="_blank">
-            {item.title}
-          </a>
-        ) : (
-          <NavLink
-            end
-            key={item.id}
-            prefetch="intent"
-            style={activeLinkStyle}
-            to={url}
-          >
-            {item.title}
-          </NavLink>
-        );
-      })}
-    </nav>
-  );
-}
+//   return (
+//     // <nav className="footer-menu" role="navigation">
+//     //   {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
+//     //     if (!item.url) return null;
+//     //     // if the url is internal, we strip the domain
+//     //     const url =
+//     //       item.url.includes('myshopify.com') ||
+//     //       item.url.includes(publicStoreDomain) ||
+//     //       item.url.includes(primaryDomainUrl)
+//     //         ? new URL(item.url).pathname
+//     //         : item.url;
+//     //     const isExternal = !url.startsWith('/');
+//     //     return isExternal ? (
+//     //       <a href={url} key={item.id} rel="noopener noreferrer" target="_blank">
+//     //         {item.title}
+//     //       </a>
+//     //     ) : (
+//     //       <NavLink
+//     //         end
+//     //         key={item.id}
+//     //         prefetch="intent"
+//     //         style={activeLinkStyle}
+//     //         to={url}
+//     //       >
+//     //         {item.title}
+//     //       </NavLink>
+//     //     );
+//     //   })}
+//     // </nav>
+
+//     <h1>Thanks for Subscribing</h1>
+//   );
+// }
 
 const FALLBACK_FOOTER_MENU = {
   id: 'gid://shopify/Menu/199655620664',

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -3,6 +3,7 @@ import {Suspense} from 'react';
 import type {HeaderQuery} from 'storefrontapi.generated';
 import type {LayoutProps} from './Layout';
 import {useRootLoaderData} from '~/root';
+import contentstack_logo from '../../public/contentstack_logo.svg';
 
 type HeaderProps = Pick<LayoutProps, 'header' | 'cart' | 'isLoggedIn'>;
 
@@ -13,7 +14,7 @@ export function Header({header, isLoggedIn, cart}: HeaderProps) {
   return (
     <header className="header">
       <NavLink prefetch="intent" to="/" style={activeLinkStyle} end>
-        <strong>{shop.name}</strong>
+        <img alt="contentstack" src={contentstack_logo} height="30px"></img>
       </NavLink>
       <HeaderMenu
         menu={menu}

diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -33,12 +33,12 @@ export function Layout({
     <>
       <CartAside cart={cart} />
       <SearchAside />
-      <MobileMenuAside menu={header.menu} shop={header.shop} />
-      <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
+      <MobileMenuAside menu={header?.menu} shop={header?.shop} />
+      {header && <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />}
       <main>{children}</main>
       <Suspense>
         <Await resolve={footer}>
-          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
+          {(footer) => <Footer menu={footer?.menu} shop={header?.shop} />}
         </Await>
       </Suspense>
     </>
@@ -94,12 +94,15 @@ function MobileMenuAside({
   shop: HeaderQuery['shop'];
 }) {
   return (
-    <Aside id="mobile-menu-aside" heading="MENU">
-      <HeaderMenu
-        menu={menu}
-        viewport="mobile"
-        primaryDomainUrl={shop.primaryDomain.url}
-      />
-    </Aside>
+    menu &&
+    shop?.primaryDomain?.url && (
+      <Aside id="mobile-menu-aside" heading="MENU">
+        <HeaderMenu
+          menu={menu}
+          viewport="mobile"
+          primaryDomainUrl={shop.primaryDomain.url}
+        />
+      </Aside>
+    )
   );
 }
diff --git a/app/components/contentstack-sdk.js b/app/components/contentstack-sdk.js
@@ -0,0 +1,46 @@
+import * as contentstack from 'contentstack';
+import * as Utils from '@contentstack/utils';
+const Stack = (envConfig) => {
+  return contentstack.Stack({
+    api_key: envConfig.CONTENTSTACK_API_KEY,
+    delivery_token: envConfig.CONTENTSTACK_DELIVERY_TOKEN,
+    environment: envConfig.CONTENTSTACK_ENVIRONMENT,
+  });
+};
+
+export const getEntry = async ({contentTypeUid, envConfig}) => {
+  return new Promise((resolve, reject) => {
+    const query = Stack(envConfig).ContentType(contentTypeUid).Query();
+    query
+      .toJSON()
+      .includeCount()
+      .find()
+      .then(
+        (result) => {
+          resolve(result);
+        },
+        (error) => {
+          reject(error);
+        },
+      );
+  });
+};
+
+export const getEntryByUid = async ({contentTypeUid, entryUid, envConfig}) => {
+  return new Promise((resolve, reject) => {
+    const blogQuery = Stack(envConfig)
+      .ContentType(contentTypeUid)
+      .Entry(entryUid);
+    blogQuery
+      .toJSON()
+      .fetch()
+      .then(
+        (result) => {
+          resolve(result);
+        },
+        (error) => {
+          reject(error);
+        },
+      );
+  });
+};
diff --git a/app/root.tsx b/app/root.tsx
@@ -22,6 +22,7 @@ import favicon from '../public/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
+import {cssBundleHref} from '@remix-run/css-bundle';
 
 /**
  * This is important to avoid re-fetching root queries on sub-navigations
@@ -46,6 +47,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
 
 export function links() {
   return [
+    ...(cssBundleHref ? [{rel: 'stylesheet', href: cssBundleHref}] : []),
     {rel: 'stylesheet', href: resetStyles},
     {rel: 'stylesheet', href: appStyles},
     {