add meta💯

WeFoxTech · Mar 7, 2020 · 2fb7377 · 2fb7377
1 parent 8fd1a01
commit 2fb7377
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 16 deletions.
diff --git a/packages/website/components/Layout.tsx b/packages/website/components/Layout.tsx
@@ -21,12 +21,13 @@ import { useRouter } from 'next/router';
 import { LocaleContext } from '../src/context/LocaleContext';
 import { LocaleSwitcher } from './LocaleSwitcher';
 import { ContainerProps } from '@material-ui/core';
-import LogoMenu from '~/components/home/LogoMenu'
+import LogoMenu from '~/components/home/LogoMenu';
+import { PageMeta, optMeta, metaKeys } from '../src/PageMeta';
 interface Props {
-  title?: string;
   toolbar?: Component;
   maxWidth?: ContainerProps['maxWidth'];
   overrideToolbarRootColor?: boolean;
+  meta?: PageMeta;
 }
 
 const overrideToolbarStyle = makeStyles(
@@ -73,10 +74,10 @@ const ElevationScroll: React.FC = ({ children }) => {
 
 const Layout: React.FunctionComponent<Props> = ({
   children,
-  title = 'This is the default title',
   toolbar = null,
   maxWidth = 'md',
   overrideToolbarRootColor = false,
+  meta,
 }) => {
   if (overrideToolbarRootColor) {
     overrideToolbarStyle();
@@ -91,8 +92,15 @@ const Layout: React.FunctionComponent<Props> = ({
   return (
     <>
       <Head>
-        <title>{title}</title>
+        <title>{optMeta('title', locale, meta)}</title>
         <meta charSet="utf-8" />
+        {metaKeys.map((k, i) => {
+          const value = optMeta(k, locale, meta);
+          if (value) {
+            return <meta key={i} name={k} content={value} />;
+          }
+          return null;
+        })}
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
       </Head>
@@ -101,7 +109,6 @@ const Layout: React.FunctionComponent<Props> = ({
           <Toolbar>
             <LogoMenu />
             {toolbar}
-
             <div className={classes.grow}></div>
             <LocaleSwitcher />
           </Toolbar>

diff --git a/packages/website/pages/[lang]/index.tsx b/packages/website/pages/[lang]/index.tsx
@@ -11,12 +11,24 @@ import { TechStacks } from '~/components/home/TechStack';
 import { Team } from '~/components/team/Team';
 import { ShowCases } from '~/components/cases/Case';
 import { Contact } from '~/components/Contact';
+import { PageMeta } from '../../src/PageMeta';
 
 const IndexPage: React.FC = () => {
   const { t, locale } = useTranslation();
+  const commonKeyworks = ['wefox'];
+  const meta: PageMeta = {
+    title: 'WeFox Technology',
+    keywords: [...commonKeyworks, 'technical consulting', 'Technical Adviser'],
+    description: 'Professional technical consulting and consulting services',
+    zh: {
+      title: '微狐科技',
+      keywords: [...commonKeyworks, '微狐', '微狐科技', '技术咨询', '技术顾问'],
+      description: '专业的技术咨询、顾问服务',
+    },
+  };
 
   return (
-    <Layout title={t('l.title')} maxWidth={false} overrideToolbarRootColor={true}>
+    <Layout meta={meta} maxWidth={false} overrideToolbarRootColor={true}>
       <Mission />
       <Divider />
       <TechStacks />

diff --git a/packages/website/src/PageMeta.ts b/packages/website/src/PageMeta.ts
@@ -0,0 +1,63 @@
+import { Locale } from './translations/config';
+
+// https://www.cnblogs.com/FACESCORE/p/11141653.html
+// https://www.w3schools.com/tags/tag_meta.asp
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
+export interface HtmlMeta {
+  title: string;
+  keywords: string[];
+  description: string;
+  author?: string;
+}
+
+export type PageMeta = {
+  [key in Locale]?: Partial<HtmlMeta>;
+} &
+  HtmlMeta;
+
+export type HtmlMetaKey = keyof HtmlMeta;
+
+export const metaKeys: HtmlMetaKey[] = ['description', 'keywords', 'author'];
+
+export function getTitle(meta: PageMeta, locale: Locale): string {
+  if (meta) {
+    const current = meta[locale];
+    if (current && current.title) {
+      return current.title;
+    } else if (meta.title) {
+      return meta.title;
+    }
+  }
+  console.error(`can not found title from  locale:[${locale}] in PageMeta: `, meta);
+  return '';
+}
+
+function _optMeta(
+  key: HtmlMetaKey,
+  locale: Locale,
+  meta?: PageMeta
+): string | string[] | undefined {
+  if (meta) {
+    const current = meta[locale];
+    if (current && current[key]) {
+      return current[key];
+    } else if (meta[key]) {
+      return meta[key];
+    }
+  }
+  console.error(`can not found [${key}] from  locale:[${locale}] in PageMeta: `, meta);
+  return '';
+}
+
+export function optMeta(key: HtmlMetaKey, locale: Locale, meta?: PageMeta): string {
+  let value = _optMeta(key, locale, meta);
+  if (key === 'keywords') {
+    if (value && Array.isArray(value)) {
+      return value.join(',');
+    }
+  }
+  if (value) {
+    return value as string;
+  }
+  return '';
+}
diff --git a/packages/website/src/hocs/withPost.tsx b/packages/website/src/hocs/withPost.tsx
@@ -9,19 +9,15 @@ import theme from '../../src/theme';
 import { Container, Paper } from '@material-ui/core';
 import { LocaleProvider } from '../context/LocaleContext';
 import { Locale } from '../translations/config';
-import { getDisplayName } from 'next/dist/next-server/lib/utils';
 import { isLocale, Translations, Namespace } from '../translations/types';
 import { LangProps } from './withLocale';
 import Layout from '~/components/Layout';
+import { PageMeta } from '../PageMeta';
 
-interface Meta {
-  title: string;
-}
-
-const PostLayout: React.FC<{ meta: Meta }> = ({ meta, children }) => {
-  return <Layout title={meta.title}>{children}</Layout>;
+const PostLayout: React.FC<{ meta: PageMeta }> = ({ meta, children }) => {
+  return <Layout meta={meta}>{children}</Layout>;
 };
 
-export default (meta: Meta): React.FC => ({ children }) => {
+export default (meta: PageMeta): React.FC => ({ children }) => {
   return <PostLayout meta={meta}>{children}</PostLayout>;
 };
diff --git a/packages/website/src/translations/locales/en/common.ts b/packages/website/src/translations/locales/en/common.ts
@@ -2,7 +2,6 @@ const common = {
   contactMe: 'Contact Me',
   qrUsage: 'Scan on WeChat to contact us',
   phoneQrUsage: 'Long press the QR code to contact us',
-  'l.title': 'this is title',
   changeLanguage: 'Change language',
   aboutLink: 'about me',
   'gh.editMe': 'edit me on GitHub',

diff --git a/packages/website/src/translations/locales/zh/common.ts b/packages/website/src/translations/locales/zh/common.ts
@@ -4,7 +4,6 @@ const common: AllTranslations['common'] = {
   contactMe: '联系我',
   qrUsage: '微信扫一扫联系我们',
   phoneQrUsage: '长按二维码联系我们',
-  'l.title': '我是标题',
   changeLanguage: '改变语言',
   aboutLink: '关于我',
   'gh.editMe': '在GitHub上编辑我',