feat: add description to html metadata

okp4 · Nov 5, 2022 · 8b8a04f · 8b8a04f
1 parent 5b7fa21
commit 8b8a04f
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 19 deletions.
diff --git a/environment.d.ts b/environment.d.ts
@@ -2,6 +2,7 @@ declare namespace NodeJS {
   interface ProcessEnv {
     APP_TITLE: string
     APP_KEYWORDS: string
+    APP_DESCRIPTION: string
     OKP4_DISCORD_URL: string
     OKP4_GITHUB_URL: string
     OKP4_LINKEDIN_URL: string

diff --git a/src/components/head/Head.tsx b/src/components/head/Head.tsx
@@ -6,12 +6,13 @@ import { getLastSegmentInPath } from '../../lib/path'
 export type HeadProps = {
   title: string
   keywords: string
+  description: string
 }
 
 // eslint-disable-next-line @typescript-eslint/typedef
 const { publicRuntimeConfig } = getConfig()
 
-export const Head: React.FC<HeadProps> = ({ title, keywords }): JSX.Element => {
+export const Head: React.FC<HeadProps> = ({ description, title, keywords }): JSX.Element => {
   const router = useRouter()
   const segment = getLastSegmentInPath(router.pathname)
   const pageTitle = `${title}${segment ? ` | ${segment.toUpperCase()}` : ''}`
@@ -22,6 +23,7 @@ export const Head: React.FC<HeadProps> = ({ title, keywords }): JSX.Element => {
       <title>{pageTitle}</title>
       <meta content={keywords} name="keywords" />
       <meta content={publicRuntimeConfig.version} name="version" />
+      <meta content={description} name="description" />
       <link href="/okp4-logo.webp" rel="icon" />
     </HtmlHead>
   )

diff --git a/src/pages/api/config.ts b/src/pages/api/config.ts
@@ -6,6 +6,7 @@ export default function handler(_req: NextApiRequest, res: NextApiResponse<Confi
   const config: Config = {
     title: process.env.APP_TITLE,
     keywords: process.env.APP_KEYWORDS,
+    description: process.env.APP_DESCRIPTION,
     urls: {
       websiteUrl: process.env.OKP4_WEBSITE_URL,
       socialMediaUrls: {

diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx
@@ -17,7 +17,7 @@ type FAQUrls = {
   typeformUrl: string
 }
 
-export type FAQProps = Pick<Config, 'title' | 'keywords' | 'urls'>
+export type FAQProps = Pick<Config, 'title' | 'keywords' | 'description' | 'urls'>
 
 const faqs = (urls: FAQUrls): FAQ[] => [
   {
@@ -225,7 +225,8 @@ const faqs = (urls: FAQUrls): FAQ[] => [
   }
 ]
 
-const Faq: NextPage<FAQProps> = ({ keywords, title, urls }) => {
+const Faq: NextPage<FAQProps> = props => {
+  const { urls } = props
   const [activeIndex, setActiveIndex] = useState<number | null>(null)
   const { socialMediaUrls, docsUrls, typeformUrl } = urls
   const { discordUrl } = socialMediaUrls
@@ -236,7 +237,7 @@ const Faq: NextPage<FAQProps> = ({ keywords, title, urls }) => {
   }
   return (
     <div className="okp4-nemeton-web-page-main">
-      <Head keywords={keywords} title={title} />
+      <Head {...props} />
       <main>
         <Header typeformUrl={typeformUrl} />
         <div className="okp4-nemeton-web-page-content-container" id="faq">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,12 +8,13 @@ import { Imbolc } from '../components/imbolc/Imbolc'
 import { Beltaine } from '../components/beltaine/Beltaine'
 import type { Config } from '../types/config.type'
 
-export type HomeProps = Pick<Config, 'title' | 'keywords' | 'urls'>
+export type HomeProps = Pick<Config, 'title' | 'keywords' | 'description' | 'urls'>
 
-const Home: NextPage<HomeProps> = ({ keywords, title, urls }) => {
+const Home: NextPage<HomeProps> = (props) => {
+  const { urls } = props
   return (
     <div>
-      <Head keywords={keywords} title={title} />
+      <Head {...props} />
       <main>
         <Header typeformUrl={urls.typeformUrl} />
         <div className="okp4-nemeton-web-phases-main" id="home">

diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
@@ -4,9 +4,10 @@ import { Footer } from '../components/layout/footer/Footer'
 import { Header } from '../components/layout/header/Header'
 import type { Config } from '../types/config.type'
 
-export type PrivacyProps = Pick<Config, 'title' | 'keywords' | 'urls'>
+export type PrivacyProps = Pick<Config, 'title' | 'keywords' | 'description' | 'urls'>
 
-const Privacy: NextPage<PrivacyProps> = ({ keywords, title, urls }) => {
+const Privacy: NextPage<PrivacyProps> = props => {
+  const { urls } = props
   const {
     typeformUrl,
     privacyUrls: { cookiePolicyUrl },
@@ -16,7 +17,7 @@ const Privacy: NextPage<PrivacyProps> = ({ keywords, title, urls }) => {
 
   return (
     <div className="okp4-nemeton-web-page-main">
-      <Head keywords={keywords} title={title} />
+      <Head {...props} />
       <main>
         <Header typeformUrl={typeformUrl} />
         <div className="okp4-nemeton-web-page-content-container" id="privacy-cookie-policy">

diff --git a/src/pages/rewards.tsx b/src/pages/rewards.tsx
@@ -4,14 +4,15 @@ import { Footer } from '../components/layout/footer/Footer'
 import { Header } from '../components/layout/header/Header'
 import type { Config } from '../types/config.type'
 
-export type RewardsProps = Pick<Config, 'title' | 'keywords' | 'urls'>
+export type RewardsProps = Pick<Config, 'title' | 'keywords' | 'description' | 'urls'>
 
-const Rewards: NextPage<RewardsProps> = ({ keywords, title, urls }) => {
+const Rewards: NextPage<RewardsProps> = props => {
+  const { urls } = props
   const { typeformUrl } = urls
 
   return (
     <div className="okp4-nemeton-web-page-main">
-      <Head keywords={keywords} title={title} />
+      <Head {...props} />
       <main>
         <Header typeformUrl={typeformUrl} />
         <div className="okp4-nemeton-web-page-content-container" id="rewards">

diff --git a/src/pages/support.tsx b/src/pages/support.tsx
@@ -6,9 +6,10 @@ import { Header } from '../components/layout/header/Header'
 import type { Config } from '../types/config.type'
 import { supportRoutes } from '../routes'
 
-export type SupportProps = Pick<Config, 'title' | 'keywords' | 'urls'>
+export type SupportProps = Pick<Config, 'title' | 'keywords' | 'description' | 'urls'>
 
-const Support: NextPage<SupportProps> = ({ keywords, title, urls }) => {
+const Support: NextPage<SupportProps> = (props) => {
+  const { urls } = props
   const {
     typeformUrl,
     supportUrls: { discordNemetonUrl, discordTicketUrl },
@@ -19,7 +20,7 @@ const Support: NextPage<SupportProps> = ({ keywords, title, urls }) => {
 
   return (
     <div className="okp4-nemeton-web-page-main">
-      <Head keywords={keywords} title={title} />
+      <Head {...props} />
       <main>
         <Header typeformUrl={typeformUrl} />
         <div className="okp4-nemeton-web-page-content-container" id="support-page">

diff --git a/src/pages/terms.tsx b/src/pages/terms.tsx
@@ -6,9 +6,10 @@ import { Header } from '../components/layout/header/Header'
 import type { Config } from '../types/config.type'
 import { termsRoutes } from '../routes'
 
-export type TermsProps = Pick<Config, 'title' | 'keywords' | 'urls'>
+export type TermsProps = Pick<Config, 'title' | 'keywords' | 'description' | 'urls'>
 
-const Terms: NextPage<TermsProps> = ({ keywords, title, urls }) => {
+const Terms: NextPage<TermsProps> = props => {
+  const { urls } = props
   const {
     typeformUrl,
     socialMediaUrls: { discordUrl },
@@ -21,7 +22,7 @@ const Terms: NextPage<TermsProps> = ({ keywords, title, urls }) => {
 
   return (
     <div className="okp4-nemeton-web-page-main">
-      <Head keywords={keywords} title={title} />
+      <Head {...props} />
       <main>
         <Header typeformUrl={typeformUrl} />
         <div className="okp4-nemeton-web-page-content-container" id="terms-conditions">

diff --git a/src/types/config.type.ts b/src/types/config.type.ts
@@ -1,6 +1,7 @@
 export type Config = {
   title: string
   keywords: string
+  description: string
   urls: {
     websiteUrl: string
     socialMediaUrls: {