From 357f7dc2461015a959636b25430f942ece36dfae Mon Sep 17 00:00:00 2001 From: txs Date: Wed, 6 Apr 2022 04:37:09 +0800 Subject: [PATCH 1/2] Add Facebook Customer Chat for the blogging system --- blog.config.js | 2 ++ components/FacebookMessenger.js | 11 +++++++++++ next.config.js | 20 ++++++++++++++++---- pages/_app.js | 29 ++++++++++++++++++----------- 4 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 components/FacebookMessenger.js diff --git a/blog.config.js b/blog.config.js index aec8fd3c..717f8864 100644 --- a/blog.config.js +++ b/blog.config.js @@ -9,6 +9,8 @@ const BLOG = { process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮 + FACEBOOK_PAGE_ID: process.env.FACEBOOK_PAGE_ID || '', //Facebook Page ID 來啟用 messenger 聊天功能 + FACEBOOK_APP_ID: process.env.FACEBOOK_APP_ID || '', //Facebook App ID 來啟用 messenger 聊天功能 THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium'] THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮 diff --git a/components/FacebookMessenger.js b/components/FacebookMessenger.js new file mode 100644 index 00000000..0948996a --- /dev/null +++ b/components/FacebookMessenger.js @@ -0,0 +1,11 @@ +import BLOG from '@/blog.config' +import MessengerCustomerChat from 'react-messenger-customer-chat' + +const Messenger = () => ( + +) +export default Messenger diff --git a/next.config.js b/next.config.js index 43ff8b0d..2eb48080 100644 --- a/next.config.js +++ b/next.config.js @@ -6,16 +6,28 @@ module.exports = withBundleAnalyzer({ webpack5: true }, images: { - domains: ['gravatar.com', 'www.notion.so', 'avatars.githubusercontent.com', 'images.unsplash.com'] // 允许next/image加载的图片 域名 + domains: [ + 'gravatar.com', + 'www.notion.so', + 'avatars.githubusercontent.com', + 'images.unsplash.com' + ] // 允许next/image加载的图片 域名 }, - async headers () { + async headers() { return [ { source: '/:path*{/}?', headers: [ + { key: 'Access-Control-Allow-Credentials', value: 'true' }, + { key: 'Access-Control-Allow-Origin', value: '*' }, { - key: 'Permissions-Policy', - value: 'interest-cohort=()' + key: 'Access-Control-Allow-Methods', + value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' + }, + { + key: 'Access-Control-Allow-Headers', + value: + 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' } ] } diff --git a/pages/_app.js b/pages/_app.js index 02ed2d14..b1c0cc4c 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -16,25 +16,32 @@ import dynamic from 'next/dynamic' import { GlobalContextProvider } from '@/lib/global' import { DebugPanel } from '@/components/DebugPanel' import { ThemeSwitch } from '@/components/ThemeSwitch' +import Messenger from '@/components/FacebookMessenger' const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false }) const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false }) const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false }) -const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false }) +const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { + ssr: false +}) const MyApp = ({ Component, pageProps }) => { return ( - {BLOG.THEME_SWITCH && } - {BLOG.DEBUG && } - {BLOG.ANALYTICS_ACKEE_TRACKER && } - {BLOG.ANALYTICS_GOOGLE_ID && } - {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && } - {BLOG.ADSENSE_GOOGLE_ID && } - {/* FontawesomeCDN */} - - - + {BLOG.THEME_SWITCH && } + {BLOG.DEBUG && } + {BLOG.ANALYTICS_ACKEE_TRACKER && } + {BLOG.ANALYTICS_GOOGLE_ID && } + {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && } + {BLOG.ADSENSE_GOOGLE_ID && } + + {/* FontawesomeCDN */} + + ) } From 7569b7124d4b4be34846a84e4a0abe7f644f7034 Mon Sep 17 00:00:00 2001 From: txs Date: Wed, 6 Apr 2022 07:20:12 +0800 Subject: [PATCH 2/2] Fix NOT render in SSR and cannot add NEXT_PUBLIC for the env variable --- blog.config.js | 4 ++-- pages/_app.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/blog.config.js b/blog.config.js index 717f8864..2d4fd3f2 100644 --- a/blog.config.js +++ b/blog.config.js @@ -9,8 +9,8 @@ const BLOG = { process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮 - FACEBOOK_PAGE_ID: process.env.FACEBOOK_PAGE_ID || '', //Facebook Page ID 來啟用 messenger 聊天功能 - FACEBOOK_APP_ID: process.env.FACEBOOK_APP_ID || '', //Facebook App ID 來啟用 messenger 聊天功能 + FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', //Facebook Page ID 來啟用 messenger 聊天功能 + FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', //Facebook App ID 來啟用 messenger 聊天功能 THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium'] THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮 diff --git a/pages/_app.js b/pages/_app.js index b1c0cc4c..d7078c98 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -16,7 +16,6 @@ import dynamic from 'next/dynamic' import { GlobalContextProvider } from '@/lib/global' import { DebugPanel } from '@/components/DebugPanel' import { ThemeSwitch } from '@/components/ThemeSwitch' -import Messenger from '@/components/FacebookMessenger' const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false }) const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false }) @@ -24,6 +23,9 @@ const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false }) const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false }) +const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { + ssr: false +}) const MyApp = ({ Component, pageProps }) => { return ( @@ -34,7 +36,7 @@ const MyApp = ({ Component, pageProps }) => { {BLOG.ANALYTICS_GOOGLE_ID && } {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && } {BLOG.ADSENSE_GOOGLE_ID && } - + {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && } {/* FontawesomeCDN */}