Techswitch pages

config.js

@@ -34,7 +34,7 @@ const config = {
     twitter: {
       site: '@prisma',
       creator: '@prisma',
-      image: '/social/docs-social.png'
+      image: '/social/docs-social.png',
     },
     og: {
       site_name: 'Prisma',
@@ -102,6 +102,6 @@ const config = {
       gitLink: 'https://github.com/prisma',
     },
   },
-};
+}
 
-module.exports = config;
+module.exports = config

content/01-getting-started/01-quickstart.mdx

@@ -4,6 +4,14 @@ metaTitle: 'Quickstart (5 min)'
 metaDescription: 'Get started with Prisma in 5 minutes. You will learn how to send queries to a SQLite database in a plain Node.js or TypeScript script using Prisma Client.'
 duration: '5 min' 
 langSwitcher: ['typescript', 'node']
+techMetaTitles: [
+  {name: 'node', value: 'Quickstart-NODE'},
+  {name: 'typescript', value: 'Quickstart-TYPESCRIPT'}
+]
+techMetaDescriptions: [
+  {name: 'node', value: 'Get started with Prisma in 5 minutes. You will learn how to send queries to a SQLite database in a plain Node.js script using Prisma Client.'},
+  {name: 'typescript', value: 'Get started with Prisma in 5 minutes. You will learn how to send queries to a SQLite database in a plain TypeScript script using Prisma Client.'}
+]
 ---
 
 ## Overview

content/01-getting-started/02-setup-prisma/01-add-to-existing-project.mdx

@@ -4,6 +4,12 @@ metaTitle: 'Add Prisma to an existing project (15 min)'
 metaDescription: 'Learn how to add Prisma to an existing Node.js or TypeScript project by connecting it to your database and generating Prisma Client for database access.'
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['postgres', 'mysql']
+techMetaTitles: [
+  {name: 'node-postgres', value: 'Add to existing project-NODE-POSTGRES'},
+  {name: 'typescript-postgres', value: 'Add to existing project-TYPESCRIPT-POSTGRES'},
+  {name: 'node-mysql', value: 'Add to existing project-NODE-MYSQL'},
+  {name: 'typescript-mysql', value: 'Add to existing project-TYPESCRIPT-MYSQL'}
+]
 ---
 
 ## Overview

content/01-getting-started/02-setup-prisma/02-start-from-scratch-sql.mdx

@@ -4,6 +4,12 @@ metaTitle: 'Set up a new project with Prisma from scratch (SQL)'
 metaDescription: 'Learn how to create a new Node.js or TypeScript project from scratch by connecting Prisma to your database and generating Prisma Client for database access.'
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['postgres', 'mysql']
+techMetaTitles: [
+  {name: 'node-postgres', value: 'Start from scratch-NODE-POSTGRES'},
+  {name: 'typescript-postgres', value: 'Start from scratch-TYPESCRIPT-POSTGRES'},
+  {name: 'node-mysql', value: 'Start from scratch-NODE-MYSQL'},
+  {name: 'typescript-mysql', value: 'Start from scratch-TYPESCRIPT-MYSQL'}
+]
 ---
 
 ## Overview

content/01-getting-started/02-setup-prisma/03-start-from-scratch-prisma-migrate.mdx

@@ -4,6 +4,12 @@ metaTitle: 'Set up a new project with Prisma from scratch (Prisma Migrate)'
 metaDescription: 'Learn how to create a new Node.js or TypeScript project from scratch by connecting Prisma to your database and generating Prisma Client for database access.'
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['postgres', 'mysql']
+techMetaTitles: [
+  {name: 'node-postgres', value: 'Start from scratch (Prisma Migrate)-NODE-POSTGRES'},
+  {name: 'typescript-postgres', value: 'Start from scratch (Prisma Migrate)-TYPESCRIPT-POSTGRES'},
+  {name: 'node-mysql', value: 'Start from scratch (Prisma Migrate)-NODE-MYSQL'},
+  {name: 'typescript-mysql', value: 'Start from scratch (Prisma Migrate)-TYPESCRIPT-MYSQL'}
+]
 ---
 
 ## Overview

content/01-getting-started/04-example.mdx

@@ -1,9 +1,17 @@
 ---
 title: 'Example'
-metaTitle: ''
-metaDescription: ''
+metaTitle: 'Example metaTitle'
+metaDescription: 'Example meta desc'
 langSwitcher: ['node', 'typescript']
 dbSwitcher: ["postgres", "mysql"]
+techMetaTitles: [
+  {name: 'node-mysql', value: 'Example-Node-MySQL'},
+  {name: 'typescript-mysql', value: 'Example-typescript-MySQL'}
+]
+techMetaDescriptions: [
+  {name: 'node-mysql', value: 'Example-Node-MySQL desc'},
+  {name: 'typescript-mysql', value: 'Example-typescript-MySQL desc'}
+]
 ---
 
 ## Overview

gatsby-config.js

@@ -1,27 +1,27 @@
-const config = require('./config');
-require('dotenv').config();
+const config = require('./config')
+require('dotenv').config()
 
 const gatsbyRemarkPlugins = [
   'gatsby-remark-sectionize',
   {
     resolve: `gatsby-remark-autolink-headers`,
     options: {
       icon: `<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1.5 6.33337H15.5" stroke="#CBD5E0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M1.5 11.6666H15.5" stroke="#CBD5E0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M6.75 1L5 17" stroke="#CBD5E0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M12 1L10.25 17" stroke="#CBD5E0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M1.5 6.33337H15.5" stroke="#CBD5E0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M1.5 11.6666H15.5" stroke="#CBD5E0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M6.75 1L5 17" stroke="#CBD5E0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M12 1L10.25 17" stroke="#CBD5E0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>`,
       className: `title-link`,
     },
   },
   {
     resolve: `gatsby-remark-images`,
   },
-];
+]
 
 if (process.env.NODE_ENV === 'development') {
-  gatsbyRemarkPlugins.push('gatsby-remark-check-links');
+  gatsbyRemarkPlugins.push('gatsby-remark-check-links')
 }
 
 module.exports = {
@@ -43,7 +43,7 @@ module.exports = {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
         trackingId: 'UA-74131346-14',
-        anonymize: true
+        anonymize: true,
       },
     },
     'gatsby-plugin-react-helmet',
@@ -105,4 +105,4 @@ module.exports = {
     },
     'gatsby-plugin-remove-trailing-slashes',
   ],
-};
+}

gatsby-node.js

@@ -1,84 +1,149 @@
-const path = require(`path`);
-// const urlGenerator = require(`./src/utils/urlGenerator`)
-// const { createFilePath } = require(`gatsby-source-filesystem`);
+const path = require(`path`)
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
-  const { createNodeField } = actions;
+  const { createNodeField } = actions
   if (node.internal.type === `Mdx`) {
-    const parent = getNode(node.parent);
-
-    let value = parent.relativePath.replace(parent.ext, '');
-
+    const parent = getNode(node.parent)
+    let value = parent.relativePath.replace(parent.ext, '')
     if (value === 'index') {
-      value = '';
+      value = ''
     }
 
     createNodeField({
-      name: `slug`,
       node,
+      name: `slug`,
       value: `/${value}`,
-    });
+    })
     createNodeField({
-      name: 'id',
       node,
+      name: 'id',
       value: node.id,
-    });
-    createNodeField({
-      name: 'title',
-      node,
-      value: node.frontmatter.title || parent.name,
-    });
-    createNodeField({
-      name: 'staticLink',
-      node,
-      value: node.frontmatter.staticLink || false,
-    });
-    createNodeField({
-      name: 'duration',
-      node,
-      value: node.frontmatter.duration || '',
-    });
-    createNodeField({
-      name: 'experimental',
-      node,
-      value: node.frontmatter.experimental || false,
-    });
+    })
   }
-};
+}
 
 exports.createPages = ({ graphql, actions }) => {
-  const { createPage } = actions;
+  const { createPage } = actions
+
+  const getTitle = (frontmatter, lang, db) => {
+    let pageSeoTitle = frontmatter.metaTitle || frontmatter.title
+    if (lang || db) {
+      const queryParam = `${lang ? `${lang}${db ? '-' : ''}` : ''}${db ? `${db}` : ''}`
+      const titleEntry = frontmatter.techMetaTitles
+        ? frontmatter.techMetaTitles.find(item => item.name === queryParam)
+        : null
+      pageSeoTitle = titleEntry ? titleEntry.value : pageSeoTitle
+    }
+    return pageSeoTitle
+  }
+
+  const getDesc = (frontmatter, lang, db) => {
+    let pageSeoDesc= frontmatter.metaDescription || frontmatter.title
+    if (lang || db) {
+      const queryParam = `${lang ? `${lang}${db ? '-' : ''}` : ''}${db ? `${db}` : ''}`
+      const descEntry = frontmatter.techMetaDescriptions
+        ? frontmatter.techMetaDescriptions.find(item => item.name === queryParam)
+        : null
+        pageSeoDesc = descEntry ? descEntry.value : pageSeoDesc
+    }
+
+    return pageSeoDesc
+  }
+
   return new Promise((resolve, reject) => {
     graphql(`
       {
         allMdx {
           edges {
             node {
               fields {
+                slug
                 id
               }
-              tableOfContents
-              fields {
-                slug
+              frontmatter {
+                title
+                metaTitle
+                metaDescription
+                langSwitcher
+                dbSwitcher
+                techMetaTitles {
+                  name
+                  value
+                }
+                techMetaDescriptions {
+                  name
+                  value
+                }
+              }
+              body
+              parent {
+                ... on File {
+                  relativePath
+                }
               }
             }
           }
         }
       }
     `).then(result => {
       result.data.allMdx.edges.forEach(({ node }) => {
+        if (node.frontmatter.langSwitcher) {
+          if (node.frontmatter.dbSwitcher) {
+            node.frontmatter.langSwitcher.forEach(lang =>
+              node.frontmatter.dbSwitcher.forEach(db =>
+                createPage({
+                  path: `${node.fields.slug.replace(/\d+-/g, '')}-${lang}-${db}`,
+                  component: path.resolve(`./src/layouts/articleLayout.tsx`),
+                  context: {
+                    id: node.fields.id,
+                    seoTitle: getTitle(node.frontmatter, lang, db),
+                    seoDescription: getDesc(node.frontmatter, lang, db)
+                  },
+                })
+              )
+            )
+          } else {
+            node.frontmatter.langSwitcher.forEach(lang =>
+              createPage({
+                path: `${node.fields.slug.replace(/\d+-/g, '')}-${lang}`,
+                component: path.resolve(`./src/layouts/articleLayout.tsx`),
+                context: {
+                  id: node.fields.id,
+                  seoTitle: getTitle(node.frontmatter, lang, null),
+                  seoDescription: getDesc(node.frontmatter, lang, null)
+                },
+              })
+            )
+          }
+        }
+
+        if (node.frontmatter.dbSwitcher && !node.frontmatter.langSwitcher) {
+          node.frontmatter.dbSwitcher.forEach(db =>
+            createPage({
+              path: `${node.fields.slug.replace(/\d+-/g, '')}-${db}`,
+              component: path.resolve(`./src/layouts/articleLayout.tsx`),
+              context: {
+                id: node.fields.id,
+                seoTitle: getTitle(node.frontmatter, null, db),
+                seoDescription: getDesc(node.frontmatter, null, db)
+              },
+            })
+          )
+        }
         createPage({
-          path: node.fields.slug ? node.fields.slug.replace(/\d+-/g, "") : '/',
+          path: node.fields.slug ? node.fields.slug.replace(/\d+-/g, '') : '/',
           component: path.resolve(`./src/layouts/articleLayout.tsx`),
           context: {
             id: node.fields.id,
+            seoTitle: getTitle(node.frontmatter),
+            seoDescription: getDesc(node.frontmatter)
           },
-        });
-      });
-      resolve();
-    });
-  });
-};
+        })
+      })
+      resolve()
+    })
+  })
+}
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
@@ -89,5 +154,6 @@ exports.onCreateWebpackConfig = ({ actions }) => {
         buble: '@philpl/buble', // to reduce bundle size
       },
     },
-  });
-};
+  })
+}
+

package.json

@@ -19,7 +19,7 @@
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-mdx": "^1.0.73",
     "gatsby-plugin-offline": "^2.0.25",
-    "gatsby-plugin-react-helmet": "^3.0.9",
+    "gatsby-plugin-react-helmet": "^3.2.4",
     "gatsby-plugin-remove-trailing-slashes": "^2.2.1",
     "gatsby-plugin-robots-txt": "^1.5.0",
     "gatsby-plugin-sharp": "^2.4.5",
@@ -44,7 +44,7 @@
     "react": "^16.8.4",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.8.4",
-    "react-helmet": "^5.2.0",
+    "react-helmet": "^6.0.0",
     "react-hooks-global-state": "^1.0.0",
     "react-hooks-testing-library": "^0.3.6",
     "react-instantsearch-dom": "^6.4.0",

src/components/header.tsx

@@ -54,15 +54,6 @@ const HeaderNav = styled.div`
   }
 `
 
-const Title = styled.span`
-  font-size: 1.2rem;
-  color: #f5f8fa;
-  font-style: normal;
-  font-weight: bold;
-  line-height: 100%;
-  letter-spacing: -0.02em;
-`
-
 const LogoContainer = styled.div`
   padding-right: 0.75rem;
 `

src/components/parentTitleComp.tsx

@@ -17,7 +17,6 @@ interface ParentTitleProps {
 
 const ParentTitle = ({ slug }: ParentTitleProps) => {
   const { allMdx }: AllArticles = useAllArticlesQuery()
-
   const parentTitle = getParentTitle(slug, allMdx)
   return <BreadcrumbTitle>{parentTitle}</BreadcrumbTitle>
 }

src/components/search/input.tsx

@@ -56,7 +56,7 @@ const Input = styled.input`
 
 const DEBOUNCE_DELAY = 500
 
-const SearchBox = ({ refine, onFocus, onBlur, currentRefinement, ...rest }: any) => {
+const SearchBox = ({ refine, onFocus, currentRefinement, ...rest }: any) => {
   const [value, setValue] = React.useState(currentRefinement)
   const timeoutId = React.useRef(null)