✨ og:description from question

gatsby-config.js

@@ -2,7 +2,7 @@ module.exports = {
   trailingSlash: "never",
   siteMetadata: {
     title: `BRAINSTELLAR`,
-    description: `Deadly Puzzles`,
+    description: `Puzzles from Quant Interviews`,
     author: `varun-seth`,
     siteUrl: `https://brainstellar.com`,
   },

package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "author": "Varun Seth <[email protected]>",
   "dependencies": {
+    "cheerio": "^1.0.0-rc.12",
     "gatsby": "^5.9.1",
     "gatsby-plugin-image": "^3.10.0",
     "gatsby-plugin-manifest": "^5.9.0",

src/components/seo.js

@@ -8,7 +8,7 @@
 import * as React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
-function Seo({ description, title, children }) {
+function Seo({ description, title, url, image }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -17,6 +17,7 @@ function Seo({ description, title, children }) {
             title
             description
             author
+            siteUrl
           }
         }
       }
@@ -25,6 +26,7 @@ function Seo({ description, title, children }) {
 
   const metaDescription = description || site.siteMetadata.description
   const defaultTitle = site.siteMetadata?.title
+  const imageUrl = `${site.siteMetadata.siteUrl}${image || '/logo.png'}`
 
   return (
     <>
@@ -33,11 +35,11 @@ function Seo({ description, title, children }) {
       <meta property="og:title" content={title} />
       <meta property="og:description" content={metaDescription} />
       <meta property="og:type" content="website" />
+      <meta property="og:image" content={imageUrl} />
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:creator" content={site.siteMetadata?.author || ``} />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={metaDescription} />
-      {children}
     </>
   )
 }

src/templates/puzzle.js

@@ -4,6 +4,9 @@ import Layout from '../components/layout'
 import { Helmet } from "react-helmet";
 import Button from '../components/Button';
 import FacebookComments from '../components/FacebookComments';
+import Seo from '../components/seo';
+import he from 'he';
+import cheerio from 'cheerio';
 
 
 import 'katex/dist/katex.min.css'; // important: this styles the math output
@@ -47,6 +50,10 @@ const splitContent = (htmlContent) => {
 }
 
 
+const stripHtml = html => {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  return doc.body.textContent || "";
+}
 
 
 export default function Puzzle({ data, pageContext }) {
@@ -61,6 +68,11 @@ export default function Puzzle({ data, pageContext }) {
 
   const { question, hint, answer, solution } = splitContent(rawMarkdownBody);
 
+  const $ = cheerio.load(question);
+  $("math").remove(); // Replace 'math' with the actual tag name for your LaTeX equations
+  let description = $.text();
+  description = he.decode(description);
+
 
   const { previousPuzzleRoute, nextPuzzleRoute, category, difficulty } = pageContext
 
@@ -85,6 +97,7 @@ export default function Puzzle({ data, pageContext }) {
 
   return (
     <Layout>
+      <Seo title={puzzle.title} description={description} />
       <Helmet>
         <link rel="icon" href="/favicon.gif" />
         <title>{puzzle.title} | Brainstellar Puzzles</title>