💄 Live page | Fix red-coloured text (#1836)

* tina-schema-json

* Add string field in live page collection

* tina.json

* Updated page content using title and subtitle

* Use dangerouslySetInnerHTML to set color to red

* Removed comments

* PR review - remove bold text to red text feature

.tina/collections/live.tsx

@@ -20,12 +20,16 @@ export const liveSchema: Collection = {
     // @ts-ignore
     seoSchema,
     {
-      type: "rich-text",
-      isBody: true,
+      type: "string",
       name: "title",
       label: "Title",
+    },
+    {
+      type: "rich-text",
+      isBody: true,
+      name: "subtitle",
+      label: "Subtitle",
       templates: [...Schemas.pageBlocks],
-      description: "Tip: Bold text is turned into Red color",
     },
     {
       type: "string",

components/live/header.tsx

@@ -1,13 +1,15 @@
 import classNames from "classnames";
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { sanitiseXSS, spanWhitelist } from "../../helpers/validator";
 import { Container } from "../util/container";
 
 type LiveHeaderprops = {
-  title: TinaMarkdownContent;
+  title: string;
+  subtitle: TinaMarkdownContent;
 };
 
 export const LiveHeader = (props: LiveHeaderprops) => {
-  const { title } = props;
+  const { title, subtitle } = props;
   return (
     <section
       className={classNames(
@@ -26,8 +28,14 @@ export const LiveHeader = (props: LiveHeaderprops) => {
               "flex flex-row items-center max-md:justify-center"
             )}
           ></div>
-          <div className="mb-2 pb-1 pt-3 text-5xl child-h1:text-5xl child-h1:font-semibold child-p:text-xl descendant-strong:font-semibold descendant-strong:text-sswRed">
-            {<TinaMarkdown content={title} />}
+          <h1
+            className="text-5xl font-semibold"
+            dangerouslySetInnerHTML={{
+              __html: sanitiseXSS(title, spanWhitelist) || "",
+            }}
+          ></h1>
+          <div className="mb-2 pb-1 pt-3 child-h1:text-5xl child-h1:font-semibold child-p:text-xl">
+            {<TinaMarkdown content={subtitle} />}
           </div>
           <div
             className={classNames(

content/live/index.mdx

@@ -1,4 +1,5 @@
 ---
+title: SSW <span class="text-sswRed">Live</span> Stream Channel
 nextEvent: Upcoming Session Details
 sswTvButton:
   name: Visit SSW TV Channel on Youtube
@@ -9,8 +10,6 @@ youtubePlaylistButton:
   playlistId: PLpiOR7CBNvlpmhfwQeIVhbqZKxV-do0wY
 ---
 
-# SSW **Live** Stream Channel
-
 User Group Live
 
 Every 3rd Wednesday of the month at 6.30PM (Sydney time)

pages/live.tsx

@@ -34,7 +34,7 @@ export default function LivePage(
   return (
     <Layout menu={data.megamenu}>
       <SEO seo={data.live.seo} />
-      <LiveHeader title={data.live.title} />
+      <LiveHeader title={data.live.title} subtitle={data.live.subtitle} />
       <Section className="mx-auto w-full max-w-9xl px-8 py-5">
         <Breadcrumbs
           path={removeExtension(props.variables.relativePath)}