Add project page meta tags (#593)

kitspace · Jul 4, 2023 · 5c5ed1d · 5c5ed1d
1 parent 068dec4
commit 5c5ed1d
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 11 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -33,6 +33,7 @@ module.exports = async phase => {
     // we use nginx to compress so we turn off next.js gzip compression
     compress: false,
     publicRuntimeConfig: {
+      KITSPACE_DOMAIN: process.env.KITSPACE_DOMAIN,
       KITSPACE_GITEA_URL: process.env.KITSPACE_GITEA_URL,
       KITSPACE_ASSET_URL: process.env.KITSPACE_ASSET_URL,
       KITSPACE_MEILISEARCH_URL: process.env.KITSPACE_MEILISEARCH_URL,

diff --git a/frontend/src/components/Head.jsx b/frontend/src/components/Head.jsx
@@ -2,15 +2,15 @@ import React from 'react'
 import NextHead from 'next/head'
 import { string } from 'prop-types'
 
-const Head = ({ title, description, url, ogImage }) => (
+const Head = ({ title, ogDescription, url, ogImage }) => (
   <NextHead>
     <meta charSet="UTF-8" />
     <title>{title}</title>
-    <meta content={description} name="description" />
+    <meta content={ogDescription} name="description" />
     <meta content="width=device-width, initial-scale=1" name="viewport" />
     <meta content={url} property="og:url" />
     <meta content={title} property="og:title" />
-    <meta content={description} property="og:description" />
+    <meta content={ogDescription} property="og:description" />
     <meta content={url} name="twitter:site" />
     <meta content="summary_large_image" name="twitter:card" />
     <meta content={ogImage} name="twitter:image" />
@@ -54,7 +54,7 @@ const Head = ({ title, description, url, ogImage }) => (
 )
 
 Head.propTypes = {
-  description: string,
+  ogDescription: string,
   ogImage: string,
   title: string,
   url: string,

diff --git a/frontend/src/components/Page/index.jsx b/frontend/src/components/Page/index.jsx
@@ -30,7 +30,7 @@ const Page = ({ title, initialQuery, contentFullSize, children }) => {
 }
 
 Page.propTypes = {
-  title: string.isRequired,
+  title: string,
   initialQuery: string,
   contentFullSize: bool,
   children: node.isRequired,

diff --git a/frontend/src/components/SharedProjectPage/index.jsx b/frontend/src/components/SharedProjectPage/index.jsx
@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from 'react'
+import getConfig from 'next/config'
 import { useRouter } from 'next/router'
 import { Loader, Message } from 'semantic-ui-react'
+import { bool, object, string } from 'prop-types'
 
 import Page from '@components/Page'
+import Head from '@components/Head'
 import { useMigrationStatus } from '@hooks/Gitea'
-import PageElements from './elements'
 import useProcessingStatus from '@hooks/useProcessingStatus'
-import { bool, object, string } from 'prop-types'
+import PageElements from './elements'
+
+const { KITSPACE_DOMAIN } = getConfig().publicRuntimeConfig
 
 const SharedProjectPage = props => {
   const { reload } = useRouter()
@@ -72,7 +76,13 @@ const SharedProjectPage = props => {
   }
 
   return (
-    <Page title={title}>
+    <Page>
+      <Head
+        ogDescription={props.ogDescription}
+        ogImage={`${props.rootAssetPath}/${props.projectName}/images/top-with-background.png`}
+        title={title}
+        url={`https://${KITSPACE_DOMAIN}/${props.username}/${props.repoName}`}
+      />
       {props.isSynced && props.hasUploadPermission ? (
         <Message color="yellow" data-cy="sync-msg">
           <Message.Header>A synced repository!</Message.Header>
@@ -96,6 +106,7 @@ const SharedProjectPage = props => {
 SharedProjectPage.propTypes = {
   rootAssetPath: string.isRequired,
   description: string.isRequired,
+  ogDescription: string.isRequired,
   repoName: string.isRequired,
   projectName: string.isRequired,
   projectFullname: string.isRequired,

diff --git a/frontend/src/pages/[user]/[repo]/[project]/index.jsx b/frontend/src/pages/[user]/[repo]/[project]/index.jsx
@@ -82,14 +82,14 @@ MultiProjectPage.getInitialProps = async ({ query, req = null, res = null }) =>
       username,
       projectName,
       repoName,
-      isNew: query.create === 'true',
       gerberInfoExists,
       bomInfoExists,
       readmeExists: readme !== null,
       kitspaceYAMLExists,
       boardShowcaseAssetsExist: gerberInfoExists,
       finishedProcessing,
-      description: kitspaceYAML.summary,
+      ogDescription: kitspaceYAML.summary,
+      description: kitspaceYAML.rendered_summary,
       originalUrl: repo?.original_url,
     }
   }

diff --git a/processor/src/tasks/writeKitspaceYaml.ts b/processor/src/tasks/writeKitspaceYaml.ts
@@ -60,7 +60,8 @@ async function renderKitspaceYamlSummaries(kitspaceYamlArray: Array<KitspaceYaml
   return Promise.all(
     kitspaceYamlArray.map(async yml => ({
       ...yml,
-      summary: await renderSummary(yml.summary),
+      summary: yml.summary,
+      rendered_summary: await renderSummary(yml.summary),
     })),
   )
 }