Move all non-live content behind the same flag (#534)

Temporarily loses us the sentence below the video but that's OK for now.

Author: microbit-matt-hillsdon

src/components/HelpMenuItems.tsx

@@ -17,6 +17,7 @@ import { userGuideUrl } from "../utils/external-links";
 import AboutDialog from "./AboutDialog";
 import ConnectFirstDialog from "./ConnectFirstDialog";
 import FeedbackForm from "./FeedbackForm";
+import { flags } from "../flags";
 
 const HelpMenuItems = () => {
   const aboutDialogDisclosure = useDisclosure();
@@ -35,15 +36,17 @@ const HelpMenuItems = () => {
         onClose={feedbackDisclosure.onClose}
         finalFocusRef={menuButtonRef}
       />
-      <MenuItem
-        as="a"
-        href={userGuideUrl()}
-        target="_blank"
-        rel="noopener"
-        icon={<RiExternalLinkLine />}
-      >
-        <FormattedMessage id="user-guide" />
-      </MenuItem>
+      {flags.websiteContent && (
+        <MenuItem
+          as="a"
+          href={userGuideUrl()}
+          target="_blank"
+          rel="noopener"
+          icon={<RiExternalLinkLine />}
+        >
+          <FormattedMessage id="user-guide" />
+        </MenuItem>
+      )}
       <TourMenuItem />
       {deployment.supportLinks.main && (
         <>

src/flags.ts

@@ -20,9 +20,9 @@ export type Flag =
    */
   | "preReleaseNotice"
   /**
-   * Flag to show the home page projects section which lacks content.
+   * Flag to show links to website content for the CreateAI release.
    */
-  | "homePageProjects"
+  | "websiteContent"
   /**
    * Example flags used for testing.
    */
@@ -37,7 +37,7 @@ interface FlagMetadata {
 const allFlags: FlagMetadata[] = [
   // Alphabetical order.
   { name: "devtools", defaultOnStages: ["local"] },
-  { name: "homePageProjects", defaultOnStages: ["local", "review", "staging"] },
+  { name: "websiteContent", defaultOnStages: ["local", "review", "staging"] },
   {
     name: "preReleaseNotice",
     defaultOnStages: ["production"],

src/pages/HomePage.tsx

@@ -122,23 +122,25 @@ const HomePage = () => {
               alt={intl.formatMessage({ id: "homepage-video-alt" })}
             />
           </Box>
-          <Text fontSize="md">
-            <FormattedMessage
-              id="homepage-how-it-works-paragraph"
-              values={{
-                appNameFull,
-                link: (children) => (
-                  <Link
-                    color="brand.600"
-                    textDecoration="underline"
-                    href={userGuideUrl()}
-                  >
-                    {children}
-                  </Link>
-                ),
-              }}
-            />
-          </Text>
+          {flags.websiteContent && (
+            <Text fontSize="md">
+              <FormattedMessage
+                id="homepage-how-it-works-paragraph"
+                values={{
+                  appNameFull,
+                  link: (children) => (
+                    <Link
+                      color="brand.600"
+                      textDecoration="underline"
+                      href={userGuideUrl()}
+                    >
+                      {children}
+                    </Link>
+                  ),
+                }}
+              />
+            </Text>
+          )}
         </VStack>
         <VStack gap={10}>
           <Heading as="h2" textAlign="center" variant="marketing">
@@ -152,7 +154,7 @@ const HomePage = () => {
             <StepByStepIllustration />
           </VStack>
         </VStack>
-        {flags.homePageProjects && (
+        {flags.websiteContent && (
           <VStack gap={10}>
             <Heading as="h2" textAlign="center" variant="marketing">
               <FormattedMessage id="homepage-projects" />