Merge pull request #801 from iterative/fix-meta

Generalize, review and fix meta fields
iterative · Nov 19, 2019 · def161a · def161a
2 parents a3fa40f + 690ec58
commit def161a
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 32 deletions.
diff --git a/consts/index.js b/consts/index.js
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import Document, { Head, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
-
-const DESCRIPTION =
-  `Open-source version control system for Data Science and Machine Learning ` +
-  `projects. Track your data, models, and experiments with a Git-like tool.`
-const KEYWORDS = `data version control machine learning models management`
+import {
+  META_BASE_TITLE,
+  META_DESCRIPTION,
+  META_KEYWORDS,
+  META_SOCIAL_IMAGE
+} from '../src/consts'
 
 const inject = str => (
   <div className="inject" dangerouslySetInnerHTML={{ __html: str }} />
@@ -27,41 +28,31 @@ export default class Page extends Document {
         <html lang="en">
           <Head>
             <meta charSet="utf-8" />
-            <meta name="description" content={DESCRIPTION} />
-            <meta name="keywords" content={KEYWORDS} />
+            <meta name="description" content={META_DESCRIPTION} />
+            <meta name="keywords" content={META_KEYWORDS} />
             <meta
               prefix="og: http://ogp.me/ns#"
               property="og:image"
-              content="http://dvc.org/static/social-share.png"
+              content={META_SOCIAL_IMAGE}
             />
             <meta
               prefix="og: http://ogp.me/ns#"
               property="og:image:secure_url"
-              content="https://dvc.org/static/social-share.png"
+              content={META_SOCIAL_IMAGE}
             />
             <meta
               prefix="og: http://ogp.me/ns#"
               property="og:description"
-              content="DVC is designed to handle large data files, models, and
-              metrics as well as code. DVC is an open-source framework and
-              distributed version control system for machine learning projects."
+              content={META_DESCRIPTION}
             />
             <meta
               prefix="og: http://ogp.me/ns#"
               property="og:title"
-              content="Data Science Version Control System"
+              content={META_BASE_TITLE}
             />
             <meta name="twitter:card" content="summary_large_image" />
-            <meta
-              name="twitter:image"
-              content="https://dvc.org/static/social-share.png"
-            />
-            <meta
-              name="twitter:description"
-              content="DVC is designed to handle large data files, models, and
-              metrics as well as code. DVC is an open-source framework and
-              distributed version control system for machine learning projects."
-            />
+            <meta name="twitter:image" content={META_SOCIAL_IMAGE} />
+            <meta name="twitter:description" content={META_DESCRIPTION} />
             <meta
               name="viewport"
               content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

diff --git a/pages/doc.js b/pages/doc.js
@@ -15,7 +15,7 @@ import RightPanel from '../src/Documentation/RightPanel/RightPanel'
 import fetch from 'isomorphic-fetch'
 import kebabCase from 'lodash.kebabcase'
 // constants
-import { HEADER } from '../consts'
+import { HEADER } from '../src/consts'
 // sidebar data and helpers
 import sidebar, { getItemByPath } from '../src/Documentation/SidebarMenu/helper'
 // styles

diff --git a/pages/features.js b/pages/features.js
@@ -10,10 +10,11 @@ import Page from '../src/Page'
 import Hero from '../src/Hero'
 import FeaturesHero from '../src/FeaturesHero'
 import TrySection from '../src/TrySection'
+import { META_BASE_TITLE } from '../src/consts'
 
 const HeadInjector = () => (
   <Head>
-    <title>Features | Machine Learning Version Control System</title>
+    <title>Features | {META_BASE_TITLE}</title>
   </Head>
 )
 

diff --git a/pages/index.js b/pages/index.js
@@ -11,6 +11,7 @@ import Diagram from '../src/Diagram'
 import PromoSection from '../src/PromoSection'
 import UseCases from '../src/UseCases'
 import Subscribe from '../src/Subscribe'
+import { META_BASE_TITLE } from '../src/consts'
 
 const HeadInjector = () => (
   <Head>
@@ -25,7 +26,7 @@ const HeadInjector = () => (
       type="text/css"
       href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
     />
-    <title>Machine Learning Version Control System · DVC</title>
+    <title>{META_BASE_TITLE}</title>
   </Head>
 )
 

diff --git a/pages/support.js b/pages/support.js
@@ -11,10 +11,11 @@ import Page from '../src/Page'
 import Hero from '../src/Hero'
 import TrySection from '../src/TrySection'
 import Popover from '../src/Popover/Popover'
+import { META_BASE_TITLE } from '../src/consts'
 
 const HeadInjector = () => (
   <Head>
-    <title>Support | Machine Learning Version Control System</title>
+    <title>Support | {META_BASE_TITLE}</title>
   </Head>
 )
 

diff --git a/src/Documentation/HeadInjector.js b/src/Documentation/HeadInjector.js
@@ -2,7 +2,9 @@ import Head from 'next/head'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const HeadInjector = () => (
+import { META_BASE_TITLE } from '../consts'
+
+export const HeadInjector = ({ sectionName = 'Documentation' }) => (
   <Head>
     <link
       rel="stylesheet"
@@ -21,7 +23,9 @@ export const HeadInjector = () => (
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.js"
     />
-    <title>Documentation | Machine Learning Version Control System · DVC</title>
+    <title>
+      {sectionName} | {META_BASE_TITLE}
+    </title>
   </Head>
 )
 

diff --git a/src/Tooltip/desktop-view.js b/src/Tooltip/desktop-view.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
-import { HEADER } from '../../consts'
+import { HEADER } from '../consts'
 
 class DesktopView extends Component {
   state = {

diff --git a/src/TopMenu/index.js b/src/TopMenu/index.js
@@ -8,7 +8,7 @@ import throttle from 'lodash.throttle'
 import styled from 'styled-components'
 import { media } from '../styles'
 // constants
-import { HEADER } from '../../consts'
+import { HEADER } from '../consts'
 
 const MIN_HEIGHT = 78
 

diff --git a/src/consts.js b/src/consts.js
@@ -0,0 +1,10 @@
+export const HEADER = 'header'
+
+export const META_BASE_TITLE = 'Data Version Control · DVC'
+export const META_DESCRIPTION =
+  'Open-source version control system for Data Science and Machine Learning ' +
+  'projects. Git-like experience to organize your data, models, and ' +
+  'experiments.'
+export const META_KEYWORDS =
+  'data version control machine learning models management'
+export const META_SOCIAL_IMAGE = 'https://dvc.org/static/social-share.png'