Add question pages (#3637)

* add question pages

* questions redirect

* use basepath / key

* add question page

gatsby-node.js

@@ -11,11 +11,14 @@ exports.createResolvers = require('./gatsby/createResolvers.js')
 // called after every page is created.
 exports.onCreatePage = async ({ page, actions }) => {
     const { createPage } = actions
-    // Only update the `/app` page.
     if (page.path.match(/^\/next\-steps/)) {
         page.matchPath = '/next-steps/*'
         createPage(page)
     }
+    if (page.path.match(/^\/question$/)) {
+        page.matchPath = '/question/*'
+        createPage(page)
+    }
 }
 
 exports.onCreateWebpackConfig = ({ stage, actions }) => {

netlify.toml

@@ -7,6 +7,11 @@
   to = "/next-steps"
   status = 200
 
+[[redirects]]
+  from = "/question/*"
+  to = "/question"
+  status = 200
+
 [[redirects]]
   from = "/careers/*"
   to = "/careers"

package.json

@@ -123,7 +123,7 @@
         "sass": "^1.43.2",
         "sharp": "^0.27.2",
         "slugify": "^1.6.0",
-        "squeak-react": "^1.14.0",
+        "squeak-react": "^2.0.0",
         "styled-components": "^5.3.3",
         "svg-sprite": "^1.5.0",
         "typescript": "^4.0.2",

src/components/Question/index.js

@@ -0,0 +1,26 @@
+import Breadcrumbs from 'components/Breadcrumbs'
+import Layout from 'components/Layout'
+import { SEO } from 'components/seo'
+import React from 'react'
+import { Question } from 'squeak-react'
+
+export default function QuestionPage() {
+    return (
+        <Layout>
+            <SEO title={'Questions - PostHog'} />
+            <Breadcrumbs
+                crumbs={[{ title: 'Questions', url: '/questions' }]}
+                darkModeToggle
+                className="px-4 mt-4 sticky top-[-2px] z-10 bg-tan dark:bg-primary"
+            />
+            <section className="max-w-3xl mx-auto py-12">
+                <Question
+                    apiHost="https://squeak.cloud"
+                    apiKey="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InB4aXBrcXV2d3FhYXVudXpqb2dlIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NDk3MjE3ODUsImV4cCI6MTk2NTI5Nzc4NX0.SxdOpxHjVwap7sDUptK2TFJl7WK3v3HLuKbzb0JKeKg"
+                    url="https://pxipkquvwqaaunuzjoge.supabase.co"
+                    organizationId="a898bcf2-c5b9-4039-82a0-a00220a8c626"
+                />
+            </section>
+        </Layout>
+    )
+}

src/mdxGlobalComponents.js

@@ -85,6 +85,7 @@ import { ProductFeaturePlugin } from './components/ProductFeaturePlugin'
 import { ProductFooter } from './components/ProductFooter'
 import { ProductPage } from './components/ProductPage'
 import { ProductSectionHeader } from './components/ProductSectionHeader'
+import { Question } from './components/Question'
 import { ResponsiveAnchor } from './components/ResponsiveAnchor'
 import { RocketHorizontalRule } from './components/RocketHorizontalRule'
 import { DesignedForYourStackBlock } from './components/Sections/DesignedForYourStackBlock'
@@ -195,6 +196,7 @@ export const shortcodes = {
     ProductFooter,
     ProductPage,
     ProductSectionHeader,
+    Question,
     ResponsiveAnchor,
     RocketHorizontalRule,
     DesignedForYourStackBlock,

src/pages/question.js

@@ -0,0 +1,3 @@
+import Question from '../components/Question'
+
+export default Question

src/pages/questions.js

@@ -11,7 +11,6 @@ import { SEO } from 'components/seo'
 import Icon from 'components/SupportImages/Icon'
 import { ZoomImage } from 'components/ZoomImage'
 import { motion } from 'framer-motion'
-import { graphql } from 'gatsby'
 import { GatsbyImage, getImage, StaticImage } from 'gatsby-plugin-image'
 import React, { useState } from 'react'
 import Scroll from 'react-scroll'
@@ -172,11 +171,7 @@ const Question = ({ question }) => {
     )
 }
 
-export default function FAQ({
-    data: {
-        questions: { nodes },
-    },
-}) {
+export default function FAQ() {
     return (
         <Layout>
             <SEO title={'Questions - PostHog'} />
@@ -310,39 +305,3 @@ export default function FAQ({
         </Layout>
     )
 }
-
-export const query = graphql`
-    query AllQuestionsQuery {
-        questions: allQuestion(sort: { fields: childReply___created_at, order: DESC }, limit: 20) {
-            nodes {
-                id
-                childrenReply {
-                    id
-                    subject
-                    name
-                    ts: created_at(difference: "days")
-                    childMdx {
-                        body
-                        excerpt(pruneLength: 400)
-                    }
-                    avatar {
-                        childImageSharp {
-                            gatsbyImageData(width: 20, height: 20)
-                        }
-                    }
-                    teamMember {
-                        frontmatter {
-                            name
-                            jobTitle
-                            headshot {
-                                childImageSharp {
-                                    gatsbyImageData(width: 20, height: 20)
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-`

yarn.lock

@@ -23027,10 +23027,10 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-squeak-react@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/squeak-react/-/squeak-react-1.14.0.tgz#cf2d39916c27dd3b1ead5c1d0c7655274c5b01b8"
-  integrity sha512-g38jW9yY3Vl48D1WB8JtgMcUVU2Jlko1UWLCFq9Fkyo3WOEqviFtrx6oAJtE6qbJan5vbVoHSrLyYn4VEc2ZbA==
+squeak-react@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/squeak-react/-/squeak-react-2.0.0.tgz#50677c3c2afd19597148769c4e3b939e31fe2428"
+  integrity sha512-yRzCHM8DesMnV9/bbmCm2xe2f0JMD9eQcrIRMDsMvK8QQAtmkV7I5gliY/arwhIjC4JpXj5D25r8hEi8HjayRQ==
   dependencies:
     "@supabase/supabase-js" "^1.31.2"
     formik "^2.2.9"