Update doc and blog footer

memfreeme · Nov 3, 2024 · 35a8ea4 · 35a8ea4
1 parent 87b3b41
commit 35a8ea4
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,10 @@ MemFree is equipped with powerful features that cater to various search and prod
 
 - [One Command Deploy MemFree Vector on Fly.io](https://www.memfree.me/docs/deploy-memfree-fly-io)
 
+### 6 Deploy MemFree on Cloudflare Pages
+
+- [How to migrate MemFree from Vercel to Cloudflare next-on-pages](https://www.memfree.me/blog/couldflare-next-on-page-edge)
+
 ## Self-Hosted Installations
 
 ### Prerequisites
@@ -210,8 +214,9 @@ MemFree is backed by [MemFree](https://www.memfree.me/) and licensed under [MIT]
 
 ## Powered By MemFree
 
+- [PageGen AI Page Generator](https://pagegen.ai/)
+- [MemFree Hybrid AI Search](https://www.memfree.me)
 - [React + Shadcn UI Preview](https://reactshadcn.com)
-- [PageGen - AI Page Generator](https://pagegen.ai/)
 
 ## Star History
 

diff --git a/frontend/app/[locale]/(docs)/docs/[[...slug]]/page.tsx b/frontend/app/[locale]/(docs)/docs/[[...slug]]/page.tsx
@@ -17,6 +17,7 @@ import { type Locale, routing } from '@/i18n/routing';
 import { unstable_setRequestLocale } from 'next-intl/server';
 import Link from 'next/link';
 import { buttonVariants } from '@/components/ui/button';
+import { ProductFooter } from '@/components/layout/product-footer';
 
 interface DocPageProps {
     params: {
@@ -94,7 +95,7 @@ export default async function DocPage({ params }: DocPageProps) {
     const toc = await getTableOfContents(doc.body.raw);
 
     return (
-        <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+        <main className="relative py-10 lg:gap-10 xl:grid xl:grid-cols-[1fr_300px]">
             <div className="mx-auto w-full min-w-0">
                 <DocsPageHeader heading={doc.title} text={doc.description} />
                 <div className="pb-4 pt-11">
@@ -108,14 +109,7 @@ export default async function DocPage({ params }: DocPageProps) {
                     <DashboardTableOfContents toc={toc} />
                 </div>
             </div>
-            <div className="flex flex-col justify-center items-center mx-auto space-y-4 sm:space-y-6 md:space-y-8 lg:space-y-10 p-4 pb-10">
-                <Link href="/" prefetch={false} className={cn(buttonVariants({ size: 'lg', rounded: 'full' }), 'w-full sm:w-auto')}>
-                    Hybrid AI Search Now
-                </Link>
-                <Link href={PageGenUrl} prefetch={false} className={cn(buttonVariants({ size: 'lg', rounded: 'full' }))}>
-                    AI Page Generator Now
-                </Link>
-            </div>
+            <ProductFooter />
         </main>
     );
 }
diff --git a/frontend/app/[locale]/(marketing)/blog/[...slug]/page.tsx b/frontend/app/[locale]/(marketing)/blog/[...slug]/page.tsx
@@ -13,6 +13,7 @@ import { buttonVariants } from '@/components/ui/button';
 import { PageGenUrl, siteConfig } from '@/config';
 import { unstable_setRequestLocale } from 'next-intl/server';
 import { type Locale, routing } from '@/i18n/routing';
+import { ProductFooter } from '@/components/layout/product-footer';
 
 interface PostPageProps {
     params: {
@@ -106,15 +107,7 @@ export default async function PostPage({ params }: PostPageProps) {
             )}
             <Mdx code={post.body.code} />
 
-            <div className="flex flex-col justify-center mx-auto space-y-10 py-6">
-                <Link href="/" prefetch={false} className={cn(buttonVariants({ size: 'lg', rounded: 'full' }))}>
-                    Hybrid AI Search Now
-                </Link>
-                <Link href={PageGenUrl} prefetch={false} className={cn(buttonVariants({ size: 'lg', rounded: 'full' }))}>
-                    AI Page Generator Now
-                </Link>
-            </div>
-
+            <ProductFooter/>
             <div className="flex justify-center py-10">
                 <Link href="/blog" prefetch={false} className={cn(buttonVariants({ size: 'lg', rounded: 'full' }), 'gap-2')}>
                     See all posts

diff --git a/frontend/components/layout/product-footer.tsx b/frontend/components/layout/product-footer.tsx
@@ -0,0 +1,34 @@
+import { PageGenUrl, ReactShadcnUrl, SearchUrl } from '@/config';
+import Link from 'next/link';
+
+export function ProductFooter() {
+    return (
+        <footer className="md:block mx-auto py-10">
+            <div className="flex flex-col md:flex-row md:justify-center md:items-center w-full px-4 md:px-0 space-y-2 md:space-y-0 md:space-x-2 text-sm">
+                <Link
+                    className="font-semibold text-gray-800 dark:text-gray-300 hover:text-primary dark:hover:text-primary text-left md:text-center w-full md:w-auto"
+                    href={SearchUrl}
+                    target="_blank"
+                >
+                    Hybrid AI Search
+                </Link>
+                <span className="text-gray-300 hidden md:block">|</span>
+                <Link
+                    className="font-semibold text-gray-800 dark:text-gray-300 hover:text-primary dark:hover:text-primary text-left md:text-center w-full md:w-auto"
+                    href={PageGenUrl}
+                    target="_blank"
+                >
+                    AI Page Generator
+                </Link>
+                <span className="text-gray-300 hidden md:block">|</span>
+                <Link
+                    className="font-semibold text-gray-800 dark:text-gray-300 hover:text-primary dark:hover:text-primary text-left md:text-center w-full md:w-auto"
+                    data-featurebase-link
+                    href={ReactShadcnUrl}
+                >
+                    React Shadcn UI Preview
+                </Link>
+            </div>
+        </footer>
+    );
+}
diff --git a/frontend/config.ts b/frontend/config.ts
@@ -15,6 +15,8 @@ import {
 
 const site_url = 'https://www.memfree.me';
 export const PageGenUrl = 'https://pagegen.ai';
+export const SearchUrl = 'https://www.memfree.me';
+export const ReactShadcnUrl = 'https://reactshadcn.com';
 
 export const siteConfig: SiteConfig = {
     name: 'MemFree',

diff --git a/frontend/content/blog/en/couldflare-next-on-page-edge.mdx b/frontend/content/blog/en/couldflare-next-on-page-edge.mdx
@@ -1,5 +1,5 @@
 ---
-title: How to migrate MemFree from vercel to cloudflare next-on-pages
+title: How to migrate MemFree from Vercel to Cloudflare next-on-pages
 description: Issues and solutions for migrating MemFree from vercel to cloudflare next-on-pages
 image: /images/blog/blog-post-3.jpg
 date: '2024-11-03'
@@ -97,7 +97,21 @@ The documentation and blog sections of MemFree were generated using `contentlaye
 EvalError: Code generation from strings disallowed for this context
 ```
 
-This limitation is unreasonable, as static pages can be fully generated during the build process without needing runtime generation. Ultimately, I replaced `contentlayer2` with `next/mdx`, allowing for complete static page generation during compilation.
+The reason for the error with contentlayer2 is that it uses the Function constructor, which is not allowed in edge environments.
+
+```ts
+export const getMDXComponent = (code: string, globals: Record<string, unknown> = {}): React.FC<MDXContentProps> => {
+    const scope = { React, ReactDOM, _jsx_runtime, ...globals };
+    const fn = new Function(...Object.keys(scope), code);
+    return fn(...Object.values(scope)).default;
+};
+
+export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
+    return React.useMemo(() => getMDXComponent(code, globals), [code, globals]);
+};
+```
+
+However, this is actually unnecessary because static pages can be fully generated during the build process without the need for runtime dynamic rendering. In the end, I replaced contentlayer2 with `next/mdx`, which completely replaces mdx with static pages during the compilation phase.
 
 For more details, refer to [Markdown and MDX](https://nextjs.org/docs/pages/building-your-application/configuring/mdx).
 

diff --git a/frontend/content/blog/zh/couldflare-next-on-page-edge.mdx b/frontend/content/blog/zh/couldflare-next-on-page-edge.mdx
@@ -1,5 +1,5 @@
 ---
-title: How to migrate MemFree from vercel to cloudflare next-on-pages
+title: How to migrate MemFree from Vercel to Cloudflare next-on-pages
 description: Issues and solutions for migrating MemFree from vercel to cloudflare next-on-pages
 image: /images/blog/blog-post-3.jpg
 date: '2024-11-03'
@@ -88,13 +88,27 @@ NEXT_PUBLIC 的 env 变量在 cloudflare next-on-pages 中无法直接访问，
 
 ### 6 用 next/mdx 替换 contentlayer2
 
-memfree的doc和blog 都是利用contentlayer2 基于mdx文件生成的静态页面， 使用 contentlayer2，在 cloudflare next-on-pages 中会得到下面的报错：
+MemFree 的 doc和blog 都是利用 contentlayer2 基于mdx文件生成的静态页面， 使用 contentlayer2，在 cloudflare next-on-pages 中会得到下面的报错：
 
 ```ts
 EvalError: Code generation from strings disallowed for this context
 ```
 
-但是这一点其实是不合理的，因为是静态页面完全可以在build期间全部生成，不需要运行时动态生成。 最后我使用 next/mdx 替换了 contentlayer2，在编译期间将 mdx 完全替换成静态页面。
+contentlayer2 会报错的原因是contentlayer2 用到了 Function 构造函数，这个在 edge 环境中是不允许的。
+
+```ts
+export const getMDXComponent = (code: string, globals: Record<string, unknown> = {}): React.FC<MDXContentProps> => {
+    const scope = { React, ReactDOM, _jsx_runtime, ...globals };
+    const fn = new Function(...Object.keys(scope), code);
+    return fn(...Object.values(scope)).default;
+};
+
+export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
+    return React.useMemo(() => getMDXComponent(code, globals), [code, globals]);
+};
+```
+
+但这是其实是没有必要的，因为是静态页面完全可以在build期间全部生成，不需要运行时动态渲染。 最后我使用 next/mdx 替换了 contentlayer2，在编译期间将 mdx 完全替换成静态页面。
 
 大家可以参考 [Markdown and MDX](https://nextjs.org/docs/pages/building-your-application/configuring/mdx)