From 048d58dcdf3fba6375613db23df4bd2c77697628 Mon Sep 17 00:00:00 2001 From: giancarlo Date: Wed, 3 Apr 2024 16:05:34 +0800 Subject: [PATCH] Implement internationalization in pages and update CMS clients The commit mainly revamps the code to support internationalization in various pages like pricing, docs, blog, etc. It modifies the code to generate metadata asynchronously, accommodating internationalized page titles and subtitles. Also, the commit restructures CMS Client scripts, particularly for ContentLayer and Wordpress. For Wordpress, it updates API fetch routes and handles embedded children data. Furthermore, unnecessary logging statements are cleaned up, and minor updates are done for better UI and code efficiency. --- .../[account]/_components/dashboard-demo.tsx | 34 ++++++--- .../blog/_components/html-renderer.module.css | 58 +++++++-------- .../blog/_components/post-header.tsx | 25 +++---- .../blog/_components/post-preview.tsx | 13 ++-- .../app/(marketing)/blog/_components/post.tsx | 5 +- apps/web/app/(marketing)/blog/page.tsx | 19 +++-- .../docs/{[...slug] => [slug]}/page.tsx | 17 +++-- .../docs/_components/docs-card.tsx | 10 ++- .../docs/_components/docs-cards.tsx | 2 +- apps/web/app/(marketing)/docs/page.tsx | 22 +++--- apps/web/app/(marketing)/faq/page.tsx | 73 +++++++++++-------- apps/web/app/(marketing)/pricing/page.tsx | 17 +++-- apps/web/next.config.mjs | 4 + apps/web/public/locales/en/marketing.json | 11 ++- packages/cms/contentlayer/README.md | 2 +- packages/cms/contentlayer/src/client.ts | 1 - .../cms/contentlayer/src/content-renderer.tsx | 4 +- packages/cms/contentlayer/src/index.ts | 1 - .../src/{mdx => }/mdx-renderer.tsx | 7 +- packages/cms/core/src/cms-client.ts | 5 +- packages/cms/core/src/content-renderer.tsx | 14 +++- packages/cms/core/src/create-cms-client.ts | 4 + packages/cms/wordpress/README.md | 19 ++++- packages/cms/wordpress/docker-compose.yml | 2 +- .../cms/wordpress/src/content-renderer.tsx | 3 + packages/cms/wordpress/src/wp-client.ts | 6 +- .../src/hooks/use-update-user-mutation.ts | 4 - supabase/migrations/20221215192558_schema.sql | 2 - 28 files changed, 227 insertions(+), 157 deletions(-) rename packages/cms/contentlayer/src/mdx/mdx-renderer.module.css => apps/web/app/(marketing)/blog/_components/html-renderer.module.css (63%) rename apps/web/app/(marketing)/docs/{[...slug] => [slug]}/page.tsx (77%) rename packages/cms/contentlayer/src/{mdx => }/mdx-renderer.tsx (61%) create mode 100644 packages/cms/wordpress/src/content-renderer.tsx diff --git a/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx b/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx index 20b325776..14f6f807b 100644 --- a/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx +++ b/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx @@ -41,7 +41,7 @@ export default function DashboardDemo() { -
+
{`$${mrr[1]}`}
20%
@@ -56,7 +56,7 @@ export default function DashboardDemo() { -
+
{`$${netRevenue[1]}`}
12%
@@ -71,7 +71,7 @@ export default function DashboardDemo() { -
+
{`$${fees[1]}`}
9%
@@ -86,7 +86,7 @@ export default function DashboardDemo() { -
+
{`${newCustomers[1]}`}
-25%
@@ -101,7 +101,7 @@ export default function DashboardDemo() { -
+
{visitors[1]}
-4.3%
@@ -116,7 +116,7 @@ export default function DashboardDemo() { -
+
{returningVisitors[1]}
10%
@@ -131,7 +131,7 @@ export default function DashboardDemo() { -
+
{churn[1]}%
-10%
@@ -146,7 +146,7 @@ export default function DashboardDemo() { -
+
{tickets[1]}
-30%
@@ -163,7 +163,7 @@ export default function DashboardDemo() { -
+
{activeUsers[1]}
10%
@@ -217,13 +217,23 @@ function Chart( return (
- + @@ -319,7 +329,7 @@ function BadgeWithTrend(props: React.PropsWithChildren<{ trend: string }>) { } function Figure(props: React.PropsWithChildren) { - return
{props.children}
; + return
{props.children}
; } function Trend( diff --git a/packages/cms/contentlayer/src/mdx/mdx-renderer.module.css b/apps/web/app/(marketing)/blog/_components/html-renderer.module.css similarity index 63% rename from packages/cms/contentlayer/src/mdx/mdx-renderer.module.css rename to apps/web/app/(marketing)/blog/_components/html-renderer.module.css index b89dde24d..00be94fb9 100644 --- a/packages/cms/contentlayer/src/mdx/mdx-renderer.module.css +++ b/apps/web/app/(marketing)/blog/_components/html-renderer.module.css @@ -1,24 +1,24 @@ -.MDX h1 { +.HTML h1 { @apply mt-14 text-4xl font-bold; } -.MDX h2 { +.HTML h2 { @apply mb-4 mt-12 text-2xl font-semibold lg:text-3xl; } -.MDX h3 { +.HTML h3 { @apply mt-10 text-2xl font-bold; } -.MDX h4 { +.HTML h4 { @apply mt-8 text-xl font-bold; } -.MDX h5 { +.HTML h5 { @apply mt-6 text-lg font-semibold; } -.MDX h6 { +.HTML h6 { @apply mt-2 text-base font-medium; } @@ -27,71 +27,71 @@ Tailwind "dark" variants do not work with CSS Modules We work it around using :global(.dark) For more info: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-770215347 */ -:global(.dark) .MDX h1, -:global(.dark) .MDX h2, -:global(.dark) .MDX h3, -:global(.dark) .MDX h4, -:global(.dark) .MDX h5, -:global(.dark) .MDX h6 { +:global(.dark) .HTML h1, +:global(.dark) .HTML h2, +:global(.dark) .HTML h3, +:global(.dark) .HTML h4, +:global(.dark) .HTML h5, +:global(.dark) .HTML h6 { @apply text-white; } -.MDX p { +.HTML p { @apply mb-4 mt-2 text-base leading-7; } -.MDX li { +.HTML li { @apply relative my-1.5 text-base leading-7; } -.MDX ul > li:before { +.HTML ul > li:before { content: '-'; @apply mr-2; } -.MDX ol > li:before { +.HTML ol > li:before { @apply inline-flex font-medium; content: counters(counts, '.') '. '; font-feature-settings: 'tnum'; } -.MDX b, -.MDX strong { +.HTML b, +.HTML strong { @apply font-bold; } -:global(.dark) .MDX b, -:global(.dark) .MDX strong { +:global(.dark) .HTML b, +:global(.dark) .HTML strong { @apply text-white; } -.MDX img, -.MDX video { +.HTML img, +.HTML video { @apply rounded-md; } -.MDX ul, -.MDX ol { +.HTML ul, +.HTML ol { @apply pl-1; } -.MDX ol > li { +.HTML ol > li { counter-increment: counts; } -.MDX ol > li:before { +.HTML ol > li:before { @apply mr-2 inline-flex font-semibold; content: counters(counts, '.') '. '; font-feature-settings: 'tnum'; } -.MDX blockquote { - @apply my-4 border-l-4 border-primary bg-muted px-6 py-4 text-lg font-medium text-gray-600; +.HTML blockquote { + @apply my-4 border-l-8 border border-primary px-6 py-4 text-lg font-medium text-muted-foreground; } -.MDX pre { +.HTML pre { @apply my-6 text-sm text-current; } diff --git a/apps/web/app/(marketing)/blog/_components/post-header.tsx b/apps/web/app/(marketing)/blog/_components/post-header.tsx index 8f3bcf2bf..4d490386f 100644 --- a/apps/web/app/(marketing)/blog/_components/post-header.tsx +++ b/apps/web/app/(marketing)/blog/_components/post-header.tsx @@ -10,35 +10,32 @@ export const PostHeader: React.FC<{ }> = ({ post }) => { const { title, publishedAt, description, image } = post; - // NB: change this to display the post's image - const displayImage = true; - const preloadImage = true; + console.log(post); return ( -
-
+
+
{title} - - {description} - +

-

-
-
-
+
+
- + {(imageUrl) => (
) { const { title, image, publishedAt, description } = post; const height = imageHeight ?? DEFAULT_IMAGE_HEIGHT; - const url = post.url; + const slug = `/blog/${post.slug}`; return (
{(imageUrl) => (
- +

- + {title}

@@ -54,9 +54,10 @@ export function PostPreview({
-

- {description} -

+

); diff --git a/apps/web/app/(marketing)/blog/_components/post.tsx b/apps/web/app/(marketing)/blog/_components/post.tsx index 93e076981..48ceec099 100644 --- a/apps/web/app/(marketing)/blog/_components/post.tsx +++ b/apps/web/app/(marketing)/blog/_components/post.tsx @@ -1,6 +1,7 @@ import type { Cms } from '@kit/cms'; import { ContentRenderer } from '@kit/cms'; +import styles from './html-renderer.module.css'; import { PostHeader } from './post-header'; export const Post: React.FC<{ @@ -8,10 +9,10 @@ export const Post: React.FC<{ content: string; }> = ({ post, content }) => { return ( -
+
-
+
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx index 1f3f9db55..e57b5025c 100644 --- a/apps/web/app/(marketing)/blog/page.tsx +++ b/apps/web/app/(marketing)/blog/page.tsx @@ -1,19 +1,22 @@ -import type { Metadata } from 'next'; - import { createCmsClient } from '@kit/cms'; import { GridList } from '~/(marketing)/_components/grid-list'; import { SitePageHeader } from '~/(marketing)/_components/site-page-header'; import { PostPreview } from '~/(marketing)/blog/_components/post-preview'; -import appConfig from '~/config/app.config'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; -export const metadata: Metadata = { - title: `Blog - ${appConfig.name}`, - description: `Tutorials, Guides and Updates from our team`, +export const generateMetadata = async () => { + const { t } = await createI18nServerInstance(); + + return { + title: t('marketing:blog'), + description: t('marketing:blogSubtitle'), + }; }; async function BlogPage() { + const { t } = await createI18nServerInstance(); const cms = await createCmsClient(); const posts = await cms.getContentItems({ @@ -24,8 +27,8 @@ async function BlogPage() {
diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[slug]/page.tsx similarity index 77% rename from apps/web/app/(marketing)/docs/[...slug]/page.tsx rename to apps/web/app/(marketing)/docs/[slug]/page.tsx index 24eb264df..5d263e490 100644 --- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx +++ b/apps/web/app/(marketing)/docs/[slug]/page.tsx @@ -2,30 +2,29 @@ import { cache } from 'react'; import { notFound } from 'next/navigation'; -import { ChevronLeft, ChevronRight } from 'lucide-react'; - import { ContentRenderer, createCmsClient } from '@kit/cms'; import { If } from '@kit/ui/if'; import { SitePageHeader } from '~/(marketing)/_components/site-page-header'; import { DocsCards } from '~/(marketing)/docs/_components/docs-cards'; -import { DocumentationPageLink } from '~/(marketing)/docs/_components/documentation-page-link'; import { withI18n } from '~/lib/i18n/with-i18n'; +import styles from '../../blog/_components/html-renderer.module.css'; + const getPageBySlug = cache(async (slug: string) => { const client = await createCmsClient(); - return client.getContentItemById(slug); + return client.getContentItemById(slug, 'pages'); }); interface PageParams { params: { - slug: string[]; + slug: string; }; } export const generateMetadata = async ({ params }: PageParams) => { - const page = await getPageBySlug(params.slug.join('/')); + const page = await getPageBySlug(params.slug); if (!page) { notFound(); @@ -40,7 +39,7 @@ export const generateMetadata = async ({ params }: PageParams) => { }; async function DocumentationPage({ params }: PageParams) { - const page = await getPageBySlug(params.slug.join('/')); + const page = await getPageBySlug(params.slug); if (!page) { notFound(); @@ -57,7 +56,9 @@ async function DocumentationPage({ params }: PageParams) { className={'items-start'} /> - +
+ +
diff --git a/apps/web/app/(marketing)/docs/_components/docs-card.tsx b/apps/web/app/(marketing)/docs/_components/docs-card.tsx index d83c225b2..f08c4d988 100644 --- a/apps/web/app/(marketing)/docs/_components/docs-card.tsx +++ b/apps/web/app/(marketing)/docs/_components/docs-card.tsx @@ -6,7 +6,7 @@ export const DocsCard: React.FC< React.PropsWithChildren<{ title: string; subtitle?: string | null; - link?: { url: string; label: string }; + link: { url: string; label: string }; }> > = ({ title, subtitle, children, link }) => { return ( @@ -15,11 +15,13 @@ export const DocsCard: React.FC< className={`flex grow flex-col space-y-2.5 border bg-background p-6 ${link ? 'rounded-t-2xl border-b-0' : 'rounded-2xl'}`} > -

{title}

+

+ {title} +

{subtitle && ( -
-

{subtitle}

+
+

)} diff --git a/apps/web/app/(marketing)/docs/_components/docs-cards.tsx b/apps/web/app/(marketing)/docs/_components/docs-cards.tsx index 696758fa1..490f45340 100644 --- a/apps/web/app/(marketing)/docs/_components/docs-cards.tsx +++ b/apps/web/app/(marketing)/docs/_components/docs-cards.tsx @@ -12,7 +12,7 @@ export function DocsCards({ pages }: { pages: Cms.ContentItem[] }) { title={item.title} subtitle={item.description} link={{ - url: item.url, + url: `/docs/${item.slug}`, label: 'Read more', }} /> diff --git a/apps/web/app/(marketing)/docs/page.tsx b/apps/web/app/(marketing)/docs/page.tsx index 9108f0fa8..31783b43b 100644 --- a/apps/web/app/(marketing)/docs/page.tsx +++ b/apps/web/app/(marketing)/docs/page.tsx @@ -1,16 +1,22 @@ import { createCmsClient } from '@kit/cms'; +import { PageBody } from '@kit/ui/page'; import { SitePageHeader } from '~/(marketing)/_components/site-page-header'; import { DocsCards } from '~/(marketing)/docs/_components/docs-cards'; -import appConfig from '~/config/app.config'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; -export const metadata = { - title: `Documentation - ${appConfig.name}`, +export const generateMetadata = async () => { + const { t } = await createI18nServerInstance(); + + return { + title: t('marketing:documentation'), + }; }; async function DocsPage() { const client = await createCmsClient(); + const { t } = await createI18nServerInstance(); const docs = await client.getContentItems({ type: 'page', @@ -18,18 +24,16 @@ async function DocsPage() { depth: 1, }); - console.log(docs); - return (
-
+ -
+
); } diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx index 7e1813cb1..f0d5b06f3 100644 --- a/apps/web/app/(marketing)/faq/page.tsx +++ b/apps/web/app/(marketing)/faq/page.tsx @@ -1,40 +1,49 @@ import { ChevronDown } from 'lucide-react'; import { SitePageHeader } from '~/(marketing)/_components/site-page-header'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; -export const metadata = { - title: 'FAQ', +export const generateMetadata = async () => { + const { t } = await createI18nServerInstance(); + + return { + title: t('marketing:faq'), + }; }; -const faqItems = [ - { - question: `Do you offer a free trial?`, - answer: `Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged.`, - }, - { - question: `Can I cancel my subscription?`, - answer: `You can cancel your subscription at any time. You can do this from your account settings.`, - }, - { - question: `Where can I find my invoices?`, - answer: `You can find your invoices in your account settings.`, - }, - { - question: `What payment methods do you accept?`, - answer: `We accept all major credit cards and PayPal.`, - }, - { - question: `Can I upgrade or downgrade my plan?`, - answer: `Yes, you can upgrade or downgrade your plan at any time. You can do this from your account settings.`, - }, - { - question: `Do you offer discounts for non-profits?`, - answer: `Yes, we offer a 50% discount for non-profits. Please contact us to learn more.`, - }, -]; +async function FAQPage() { + const { t } = await createI18nServerInstance(); + + // replace this content + // with translations + const faqItems = [ + { + question: `Do you offer a free trial?`, + answer: `Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged.`, + }, + { + question: `Can I cancel my subscription?`, + answer: `You can cancel your subscription at any time. You can do this from your account settings.`, + }, + { + question: `Where can I find my invoices?`, + answer: `You can find your invoices in your account settings.`, + }, + { + question: `What payment methods do you accept?`, + answer: `We accept all major credit cards and PayPal.`, + }, + { + question: `Can I upgrade or downgrade my plan?`, + answer: `Yes, you can upgrade or downgrade your plan at any time. You can do this from your account settings.`, + }, + { + question: `Do you offer discounts for non-profits?`, + answer: `Yes, we offer a 50% discount for non-profits. Please contact us to learn more.`, + }, + ]; -const FAQPage = () => { const structuredData = { '@context': 'https://schema.org', '@type': 'FAQPage', @@ -61,8 +70,8 @@ const FAQPage = () => {
{
); -}; +} export default withI18n(FAQPage); diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx index 53de5a32e..0a041073d 100644 --- a/apps/web/app/(marketing)/pricing/page.tsx +++ b/apps/web/app/(marketing)/pricing/page.tsx @@ -3,19 +3,26 @@ import { PricingTable } from '@kit/billing-gateway/components'; import { SitePageHeader } from '~/(marketing)/_components/site-page-header'; import billingConfig from '~/config/billing.config'; import pathsConfig from '~/config/paths.config'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; -export const metadata = { - title: 'Pricing', +export const generateMetadata = async () => { + const { t } = await createI18nServerInstance(); + + return { + title: t('marketing:pricing'), + }; }; -function PricingPage() { +async function PricingPage() { + const { t } = await createI18nServerInstance(); + return (
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index be3d7090d..c06443e00 100644 --- a/apps/web/next.config.mjs +++ b/apps/web/next.config.mjs @@ -79,5 +79,9 @@ function getRemotePatterns() { protocol: 'http', hostname: '127.0.0.1', }, + { + protocol: 'http', + hostname: 'localhost', + }, ]; } diff --git a/apps/web/public/locales/en/marketing.json b/apps/web/public/locales/en/marketing.json index 0967ef424..3d69925c0 100644 --- a/apps/web/public/locales/en/marketing.json +++ b/apps/web/public/locales/en/marketing.json @@ -1 +1,10 @@ -{} +{ + "blog": "Blog", + "blogSubtitle": "News and updates about the platform", + "documentation": "Documentation", + "documentationSubtitle": "Tutorials and guide to get started with the platform", + "faq": "FAQ", + "faqSubtitle": "Frequently asked questions about the platform", + "pricing": "Pricing", + "pricingSubtitle": "Pricing plans and payment options" +} diff --git a/packages/cms/contentlayer/README.md b/packages/cms/contentlayer/README.md index 69500c60b..09441f1b7 100644 --- a/packages/cms/contentlayer/README.md +++ b/packages/cms/contentlayer/README.md @@ -5,5 +5,5 @@ Implementation of the CMS layer using the [Contentlayer](https://contentlayer.de This implementation is used when the host app's environment variable is set as: ``` -CMS_TYPE=contentlayer +CMS_CLIENT=contentlayer ``` \ No newline at end of file diff --git a/packages/cms/contentlayer/src/client.ts b/packages/cms/contentlayer/src/client.ts index 3873a9579..cbfd4bddb 100644 --- a/packages/cms/contentlayer/src/client.ts +++ b/packages/cms/contentlayer/src/client.ts @@ -162,7 +162,6 @@ export class ContentlayerClient implements CmsClient { post: Post | DocumentationPage, children: Array = [], ): Cms.ContentItem { - console.log(post); return { id: post.slug, title: post.title, diff --git a/packages/cms/contentlayer/src/content-renderer.tsx b/packages/cms/contentlayer/src/content-renderer.tsx index 6b08019dc..b5a104093 100644 --- a/packages/cms/contentlayer/src/content-renderer.tsx +++ b/packages/cms/contentlayer/src/content-renderer.tsx @@ -1,5 +1,5 @@ -import { Mdx } from './mdx/mdx-renderer'; +import { Mdx } from './mdx-renderer'; -export function ContentRenderer(props: { content: string }) { +export function MDXContentRenderer(props: { content: string }) { return ; } diff --git a/packages/cms/contentlayer/src/index.ts b/packages/cms/contentlayer/src/index.ts index 7399b62ba..73fee8ee4 100644 --- a/packages/cms/contentlayer/src/index.ts +++ b/packages/cms/contentlayer/src/index.ts @@ -1,3 +1,2 @@ export * from './client'; -export * from './mdx/mdx-renderer'; export * from './content-renderer'; diff --git a/packages/cms/contentlayer/src/mdx/mdx-renderer.tsx b/packages/cms/contentlayer/src/mdx-renderer.tsx similarity index 61% rename from packages/cms/contentlayer/src/mdx/mdx-renderer.tsx rename to packages/cms/contentlayer/src/mdx-renderer.tsx index b0025a213..156b5318f 100644 --- a/packages/cms/contentlayer/src/mdx/mdx-renderer.tsx +++ b/packages/cms/contentlayer/src/mdx-renderer.tsx @@ -3,9 +3,6 @@ import { getMDXComponent } from 'next-contentlayer/hooks'; import { MDXComponents } from '@kit/ui/mdx-components'; -// @ts-ignore: ignore weird error -import styles from './mdx-renderer.module.css'; - export function Mdx({ code, }: React.PropsWithChildren<{ @@ -14,8 +11,6 @@ export function Mdx({ const Component = getMDXComponent(code); return ( -
- -
+ ); } diff --git a/packages/cms/core/src/cms-client.ts b/packages/cms/core/src/cms-client.ts index 057298645..c5f5d2737 100644 --- a/packages/cms/core/src/cms-client.ts +++ b/packages/cms/core/src/cms-client.ts @@ -58,7 +58,10 @@ export abstract class CmsClient { options?: Cms.GetContentItemsOptions, ): Promise; - abstract getContentItemById(id: string): Promise; + abstract getContentItemById( + id: string, + type?: string, + ): Promise; abstract getCategories( options?: Cms.GetCategoriesOptions, diff --git a/packages/cms/core/src/content-renderer.tsx b/packages/cms/core/src/content-renderer.tsx index 37e16a4e5..f6ad05358 100644 --- a/packages/cms/core/src/content-renderer.tsx +++ b/packages/cms/core/src/content-renderer.tsx @@ -9,9 +9,19 @@ export async function ContentRenderer({ }) { switch (type) { case 'contentlayer': { - const { ContentRenderer } = await import('@kit/contentlayer'); + const { MDXContentRenderer } = await import( + '../../contentlayer/src/content-renderer' + ); - return ContentRenderer({ content }); + return MDXContentRenderer({ content }); + } + + case 'wordpress': { + const { WordpressContentRenderer } = await import( + '../../wordpress/src/content-renderer' + ); + + return WordpressContentRenderer({ content }); } } } diff --git a/packages/cms/core/src/create-cms-client.ts b/packages/cms/core/src/create-cms-client.ts index 5f3018b6d..f6a128455 100644 --- a/packages/cms/core/src/create-cms-client.ts +++ b/packages/cms/core/src/create-cms-client.ts @@ -11,6 +11,10 @@ import { CmsType } from './cms.type'; export async function createCmsClient( type: CmsType = process.env.CMS_CLIENT as CmsType, ): Promise { + return cmsClientFactory(type); +} + +async function cmsClientFactory(type: CmsType) { switch (type) { case 'contentlayer': return getContentLayerClient(); diff --git a/packages/cms/wordpress/README.md b/packages/cms/wordpress/README.md index 146d45e37..67d4c54f1 100644 --- a/packages/cms/wordpress/README.md +++ b/packages/cms/wordpress/README.md @@ -5,7 +5,7 @@ Implementation of the CMS layer using the [Wordpress](https://wordpress.org) lib This implementation is used when the host app's environment variable is set as: ``` -CMS_TYPE=wordpress +CMS_CLIENT=wordpress ``` Additionally, please set the following environment variables: @@ -26,4 +26,19 @@ or npm run dev ``` -from this package's root directory. \ No newline at end of file +from this package's root directory. + +The credentials for the Wordpress instance are: + +``` +WORDPRESS_DB_HOST=db +WORDPRESS_DB_USER=wordpress +WORDPRESS_DB_PASSWORD=wordpress +WORDPRESS_DB_NAME=wordpress +``` + +You will be asked to set up the Wordpress instance when you visit `http://localhost:8080` for the first time. + +## Note for Wordpress REST API + +To make the REST API in your Wordpress instance work, please change the permalink structure to `/%post%/` from the Wordpress admin panel. \ No newline at end of file diff --git a/packages/cms/wordpress/docker-compose.yml b/packages/cms/wordpress/docker-compose.yml index 2f746173f..0bc568b51 100644 --- a/packages/cms/wordpress/docker-compose.yml +++ b/packages/cms/wordpress/docker-compose.yml @@ -19,7 +19,7 @@ services: wordpress: image: wordpress:latest ports: - - 80:80 + - 8080:80 restart: always environment: - WORDPRESS_DB_HOST=db diff --git a/packages/cms/wordpress/src/content-renderer.tsx b/packages/cms/wordpress/src/content-renderer.tsx new file mode 100644 index 000000000..6741b303d --- /dev/null +++ b/packages/cms/wordpress/src/content-renderer.tsx @@ -0,0 +1,3 @@ +export function WordpressContentRenderer(props: { content: string }) { + return
; +} diff --git a/packages/cms/wordpress/src/wp-client.ts b/packages/cms/wordpress/src/wp-client.ts index 97dc04f6d..2f6df186a 100644 --- a/packages/cms/wordpress/src/wp-client.ts +++ b/packages/cms/wordpress/src/wp-client.ts @@ -70,7 +70,7 @@ export class WordpressClient implements CmsClient { let children: Cms.ContentItem[] = []; const embeddedChildren = ( - item._embedded ? item._embedded['wp:children'] : [] + item._embedded ? item._embedded['wp:children'] ?? [] : [] ) as WP_REST_API_Post[]; if (options?.depth && options.depth > 0) { @@ -128,8 +128,8 @@ export class WordpressClient implements CmsClient { ); } - async getContentItemById(slug: string) { - const url = `${this.apiUrl}/wp-json/wp/v2/posts?slug=${slug}`; + async getContentItemById(slug: string, type: 'posts' | 'pages' = 'posts') { + const url = `${this.apiUrl}/wp-json/wp/v2/${type}?slug=${slug}&_embed`; const response = await fetch(url); const data = (await response.json()) as WP_REST_API_Post[]; const item = data[0]; diff --git a/packages/supabase/src/hooks/use-update-user-mutation.ts b/packages/supabase/src/hooks/use-update-user-mutation.ts index 181a64ce5..7c1d9caea 100644 --- a/packages/supabase/src/hooks/use-update-user-mutation.ts +++ b/packages/supabase/src/hooks/use-update-user-mutation.ts @@ -17,14 +17,10 @@ export function useUpdateUser() { emailRedirectTo: redirectTo, }); - console.log(response); - if (response.error) { throw response.error; } - console.log('response.data:', response.data); - return response.data; }; diff --git a/supabase/migrations/20221215192558_schema.sql b/supabase/migrations/20221215192558_schema.sql index 140278c37..06e28acb2 100644 --- a/supabase/migrations/20221215192558_schema.sql +++ b/supabase/migrations/20221215192558_schema.sql @@ -1066,7 +1066,6 @@ create policy billing_customers_read_self on public.billing_customers using (account_id = auth.uid() or has_role_on_account(account_id)); - /* * ------------------------------------------------------- * Section: Subscriptions @@ -1319,7 +1318,6 @@ create policy subscription_items_read_self on public.subscription_items id = subscription_id and (account_id = auth.uid() or has_role_on_account(account_id)))); - /** * ------------------------------------------------------- * Section: Orders