From dcf916883848d648bae9f9e8debe926fc16038ab Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 23 Sep 2023 12:48:23 +0700 Subject: [PATCH] chore: update deps --- app/data/queries.ts | 2 + app/root.tsx | 2 +- app/sections/blogs.tsx | 48 +++++-- app/weaverse/create-weaverse.server.ts | 34 +++++ app/weaverse/schema.server.ts | 191 +++++++++++++++++++++++++ package.json | 2 +- server.ts | 12 +- storefrontapi.generated.d.ts | 18 ++- 8 files changed, 290 insertions(+), 19 deletions(-) create mode 100644 app/weaverse/create-weaverse.server.ts create mode 100644 app/weaverse/schema.server.ts diff --git a/app/data/queries.ts b/app/data/queries.ts index 95a9c5e..4d47aa4 100644 --- a/app/data/queries.ts +++ b/app/data/queries.ts @@ -352,6 +352,8 @@ export let BLOGS_QUERY = `#graphql name } contentHtml + excerpt + excerptHtml handle id image { diff --git a/app/root.tsx b/app/root.tsx index df7712a..f1dba13 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -249,7 +249,7 @@ async function getLayoutData({storefront, env}: AppLoadContext) { - /blog/news/blog-post -> /news/blog-post - /collections/all -> /products */ - const customPrefixes = {BLOG: '', CATALOG: 'products'}; + const customPrefixes = {BLOG: 'blogs', CATALOG: 'products'}; const headerMenu = data?.headerMenu ? parseMenu( diff --git a/app/sections/blogs.tsx b/app/sections/blogs.tsx index e59865e..748889e 100644 --- a/app/sections/blogs.tsx +++ b/app/sections/blogs.tsx @@ -14,6 +14,8 @@ interface BlogsProps extends HydrogenComponentProps { layout: 'blog' | 'default'; paddingTop: number; paddingBottom: number; + showExcerpt: boolean; + showReadmore: boolean; showDate: boolean; showAuthor: boolean; imageAspectRatio: string; @@ -24,8 +26,10 @@ let Blogs = forwardRef((props, ref) => { layout, paddingTop, paddingBottom, + showExcerpt, showAuthor, showDate, + showReadmore, imageAspectRatio, ...rest } = props; @@ -42,7 +46,7 @@ let Blogs = forwardRef((props, ref) => { paddingBottom: `${paddingBottom}px`, }} > - +
{articles.map((article, i) => ( @@ -52,7 +56,9 @@ let Blogs = forwardRef((props, ref) => { article={article} loading={getImageLoadingPriority(i, 2)} showAuthor={showAuthor} + showExcerpt={showExcerpt} showDate={showDate} + showReadmore={showReadmore} imageAspectRatio={imageAspectRatio} /> ))} @@ -69,15 +75,19 @@ function ArticleCard({ blogHandle, article, loading, + showExcerpt, showAuthor, showDate, + showReadmore, imageAspectRatio, }: { blogHandle: string; article: ArticleFragment; loading?: HTMLImageElement['loading']; showDate: boolean; + showExcerpt: boolean; showAuthor: boolean; + showReadmore: boolean; imageAspectRatio: string; }) { return ( @@ -95,11 +105,21 @@ function ArticleCard({ /> )} -

{article.title}

-
- {showDate && {article.publishedAt}} - {showDate && showAuthor && •} - {showAuthor && {article.author?.name}} +
+

{article.title}

+
+ {showDate && {article.publishedAt}} + {showDate && showAuthor && •} + {showAuthor && ( + {article.author?.name} + )} +
+ {showExcerpt &&
{article.excerpt}
} + {showReadmore && ( +
+ Read more +
+ )}
@@ -115,7 +135,7 @@ export let schema: HydrogenComponentSchema = { enabledOn: { pages: ['BLOG'], }, - toolbar: ['general-settings'], + toolbar: ['general-settings', ['delete']], inspector: [ { group: 'Blogs', @@ -176,16 +196,28 @@ export let schema: HydrogenComponentSchema = { }, defaultValue: '3/2', }, + { + type: 'switch', + name: 'showExcerpt', + label: 'Show excerpt', + defaultValue: true, + }, { type: 'switch', name: 'showDate', label: 'Show date', - defaultValue: true, + defaultValue: false, }, { type: 'switch', name: 'showAuthor', label: 'Show author', + defaultValue: false, + }, + { + type: 'switch', + name: 'showReadmore', + label: 'Show read more', defaultValue: true, }, ], diff --git a/app/weaverse/create-weaverse.server.ts b/app/weaverse/create-weaverse.server.ts new file mode 100644 index 0000000..882293e --- /dev/null +++ b/app/weaverse/create-weaverse.server.ts @@ -0,0 +1,34 @@ +import {Storefront, createWithCache} from '@shopify/hydrogen'; +import { + I18nLocale, + WeaverseClient, + getWeaverseConfigs, +} from '@weaverse/hydrogen'; +import {countries} from '~/data/countries'; +import {components} from '~/weaverse/components'; +import {themeSchema} from '~/weaverse/schema.server'; + +type CreateWeaverseArgs = { + storefront: Storefront; + request: Request; + env: Env; + cache: Cache; + waitUntil: ExecutionContext['waitUntil']; +}; + +export function createWeaverseClient({ + storefront, + request, + env, + cache, + waitUntil, +}: CreateWeaverseArgs) { + return new WeaverseClient({ + storefront, + countries, + themeSchema, + components, + configs: getWeaverseConfigs(request, env), + withCache: createWithCache({cache, waitUntil}), + }); +} diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts new file mode 100644 index 0000000..6895ba3 --- /dev/null +++ b/app/weaverse/schema.server.ts @@ -0,0 +1,191 @@ +import type {HydrogenThemeSchema} from '@weaverse/hydrogen'; + +export let themeSchema: HydrogenThemeSchema = { + info: { + version: '2.2.0', + author: 'Weaverse', + name: 'Pilot', + authorProfilePhoto: + 'https://ucarecdn.com/174c3d08-fc53-4088-8d12-8eaf7090cdec/', + documentationUrl: 'https://weaverse.io/docs', + supportUrl: 'https://help.weaverse.io/', + }, + inspector: [ + { + group: 'Colors (light)', + inputs: [ + { + type: 'color', + label: 'Primary', + name: 'colorPrimary', + defaultValue: '#141414', + }, + { + type: 'color', + label: 'Contrast', + name: 'colorContrast', + defaultValue: '#FAFAF9', + }, + { + type: 'color', + label: 'Accent', + name: 'colorAccent', + defaultValue: '#BF4800', + }, + ], + }, + { + group: 'Colors (dark)', + inputs: [ + { + type: 'color', + label: 'Primary', + name: 'colorPrimaryDark', + defaultValue: '#FAFAFA', + }, + { + type: 'color', + label: 'Contrast', + name: 'colorContrastDark', + defaultValue: '#202124', + }, + { + type: 'color', + label: 'Accent', + name: 'colorAccentDark', + defaultValue: '#EB5628', + }, + ], + }, + { + group: 'Typography', + inputs: [ + { + type: 'range', + label: 'Font size display (mobile)', + name: 'fontSizeDisplayMobile', + configs: { + min: 1, + max: 6, + step: 0.25, + unit: 'rem', + }, + defaultValue: 3, + }, + { + type: 'range', + label: 'Font size display (desktop)', + name: 'fontSizeDisplayDesktop', + configs: { + min: 1, + max: 6, + step: 0.25, + unit: 'rem', + }, + defaultValue: 3.75, + }, + { + type: 'range', + label: 'Font size heading (mobile)', + name: 'fontSizeHeadingMobile', + configs: { + min: 1, + max: 6, + step: 0.25, + unit: 'rem', + }, + defaultValue: 2, + }, + { + type: 'range', + label: 'Font size heading (desktop)', + name: 'fontSizeHeadingDesktop', + configs: { + min: 1, + max: 6, + step: 0.25, + unit: 'rem', + }, + defaultValue: 2.25, + }, + { + type: 'range', + label: 'Font size lead', + name: 'fontSizeLead', + configs: { + min: 1, + max: 4, + step: 0.125, + unit: 'rem', + }, + defaultValue: 1.125, + }, + { + type: 'range', + label: 'Font size copy', + name: 'fontSizeCopy', + configs: { + min: 0.5, + max: 2, + step: 0.125, + unit: 'rem', + }, + defaultValue: 1, + }, + { + type: 'range', + label: 'Font size fine', + name: 'fontSizeFine', + configs: { + min: 0.25, + max: 2, + step: 0.125, + unit: 'rem', + }, + defaultValue: 0.75, + }, + ], + }, + { + group: 'Layout', + inputs: [ + { + type: 'range', + label: 'Nav height (mobile)', + name: 'navHeightMobile', + configs: { + min: 2, + max: 8, + step: 1, + unit: 'rem', + }, + defaultValue: 3, + }, + { + type: 'range', + label: 'Nav height (tablet)', + name: 'navHeightTablet', + configs: { + min: 2, + max: 8, + step: 1, + unit: 'rem', + }, + defaultValue: 4, + }, + { + type: 'range', + label: 'Nav height (desktop)', + name: 'navHeightDesktop', + configs: { + min: 2, + max: 8, + step: 1, + unit: 'rem', + }, + defaultValue: 6, + }, + ], + }, + ], +}; diff --git a/package.json b/package.json index 720c66f..06b9c21 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@shopify/cli-hydrogen": "5.3.1", "@shopify/hydrogen": "2023.7.8", "@shopify/remix-oxygen": "1.1.4", - "@weaverse/hydrogen": "1.2.2", + "@weaverse/hydrogen": "1.3.2", "clsx": "2.0.0", "cross-env": "7.0.3", "graphql": "16.8.1", diff --git a/server.ts b/server.ts index 7a86552..a71063c 100644 --- a/server.ts +++ b/server.ts @@ -1,9 +1,5 @@ // Virtual entry point for the app import * as remixBuild from '@remix-run/dev/server-build'; -import { - createRequestHandler, - getStorefrontHeaders, -} from '@shopify/remix-oxygen'; import { cartGetIdDefault, cartSetIdDefault, @@ -11,10 +7,14 @@ import { createStorefrontClient, storefrontRedirect, } from '@shopify/hydrogen'; +import { + createRequestHandler, + getStorefrontHeaders, +} from '@shopify/remix-oxygen'; import {HydrogenSession} from '~/lib/session.server'; import {getLocaleFromRequest} from '~/lib/utils'; -import weaverseClient from '~/weaverse/client'; +import {createWeaverseClient} from '~/weaverse/create-weaverse.server'; /** * Export a fetch handler in module format. @@ -72,7 +72,7 @@ export default { storefront, cart, env, - weaverse: weaverseClient({ + weaverse: createWeaverseClient({ storefront, request, env, diff --git a/storefrontapi.generated.d.ts b/storefrontapi.generated.d.ts index 7a40a05..b7444b7 100644 --- a/storefrontapi.generated.d.ts +++ b/storefrontapi.generated.d.ts @@ -698,7 +698,13 @@ export type BlogQuery = { edges: Array<{ node: Pick< StorefrontAPI.Article, - 'contentHtml' | 'handle' | 'id' | 'publishedAt' | 'title' + | 'contentHtml' + | 'excerpt' + | 'excerptHtml' + | 'handle' + | 'id' + | 'publishedAt' + | 'title' > & { author?: StorefrontAPI.Maybe< Pick @@ -718,7 +724,13 @@ export type BlogQuery = { export type ArticleFragment = Pick< StorefrontAPI.Article, - 'contentHtml' | 'handle' | 'id' | 'publishedAt' | 'title' + | 'contentHtml' + | 'excerpt' + | 'excerptHtml' + | 'handle' + | 'id' + | 'publishedAt' + | 'title' > & { author?: StorefrontAPI.Maybe>; image?: StorefrontAPI.Maybe< @@ -1684,7 +1696,7 @@ interface GeneratedQueryTypes { return: PaginatedProductsSearchQuery; variables: PaginatedProductsSearchQueryVariables; }; - '#graphql\n query Blog(\n $language: LanguageCode\n $blogHandle: String!\n $pageBy: Int!\n $cursor: String\n ) @inContext(language: $language) {\n blog(handle: $blogHandle) {\n title\n handle\n seo {\n title\n description\n }\n articles(first: $pageBy, after: $cursor) {\n edges {\n node {\n ...Article\n }\n }\n }\n }\n }\n\n fragment Article on Article {\n author: authorV2 {\n name\n }\n contentHtml\n handle\n id\n image {\n id\n altText\n url\n width\n height\n }\n publishedAt\n title\n }\n': { + '#graphql\n query Blog(\n $language: LanguageCode\n $blogHandle: String!\n $pageBy: Int!\n $cursor: String\n ) @inContext(language: $language) {\n blog(handle: $blogHandle) {\n title\n handle\n seo {\n title\n description\n }\n articles(first: $pageBy, after: $cursor) {\n edges {\n node {\n ...Article\n }\n }\n }\n }\n }\n\n fragment Article on Article {\n author: authorV2 {\n name\n }\n contentHtml\n excerpt\n excerptHtml\n handle\n id\n image {\n id\n altText\n url\n width\n height\n }\n publishedAt\n title\n }\n': { return: BlogQuery; variables: BlogQueryVariables; };