feat(QuestionBlock): add schema.org FAQ microdata (#308)

niktverd · web-flow · commit cfca14a76b45 · 2023-04-19T16:16:12.000+06:00
diff --git a/src/blocks/Questions/Questions.tsx b/src/blocks/Questions/Questions.tsx
@@ -11,6 +11,16 @@ import './Questions.scss';
 
 const b = block('QuestionsBlock');
 
+const FaqMicrodataValues = {
+    PageType: 'https://schema.org/FAQPage',
+    QuestionType: 'https://schema.org/Question',
+    QuestionProp: 'mainEntity',
+    QuestionTextProp: 'name',
+    AnswerType: 'https://schema.org/Answer',
+    AnswerProp: 'acceptedAnswer',
+    AnswerTextProp: 'text',
+} as const;
+
 const QuestionsBlock = (props: QuestionsProps) => {
     const {title, text, additionalInfo, links, buttons, items} = props;
     const [opened, setOpened] = useState<number[]>([0]);
@@ -28,7 +38,7 @@ const QuestionsBlock = (props: QuestionsProps) => {
     };
 
     return (
-        <div className={b()}>
+        <div className={b()} itemScope itemType={FaqMicrodataValues.PageType}>
             <Row>
                 <Col sizes={{all: 12, md: 4}}>
                     <div className={b('title')}>
@@ -48,12 +58,20 @@ const QuestionsBlock = (props: QuestionsProps) => {
                             const isOpened = opened.includes(index);
 
                             return (
-                                <div key={itemTitle} className={b('item')}>
+                                <div
+                                    key={itemTitle}
+                                    className={b('item')}
+                                    itemScope
+                                    itemProp={FaqMicrodataValues.QuestionProp}
+                                    itemType={FaqMicrodataValues.QuestionType}
+                                >
                                     <h4
                                         className={b('item-title')}
                                         onClick={() => toggleItem(index)}
                                     >
-                                        <HTML>{itemTitle}</HTML>
+                                        <HTML itemProp={FaqMicrodataValues.QuestionTextProp}>
+                                            {itemTitle}
+                                        </HTML>
                                         <ToggleArrow
                                             open={isOpened}
                                             size={16}
@@ -63,14 +81,20 @@ const QuestionsBlock = (props: QuestionsProps) => {
                                         />
                                     </h4>
                                     <Foldable isOpened={isOpened}>
-                                        <div className={b('text')}>
+                                        <div
+                                            className={b('text')}
+                                            itemScope
+                                            itemProp={FaqMicrodataValues.AnswerProp}
+                                            itemType={FaqMicrodataValues.AnswerType}
+                                        >
                                             <YFMWrapper
                                                 content={itemText}
                                                 modifiers={{
                                                     constructor: true,
                                                     constructorListStyle: true,
                                                     constructorListStyleDash: listStyle === 'dash',
                                                 }}
+                                                itemProp={FaqMicrodataValues.QuestionTextProp}
                                             />
                                             {link && <Link {...link} className={b('link')} />}
                                         </div>
diff --git a/src/components/HTML/HTML.tsx b/src/components/HTML/HTML.tsx
@@ -6,16 +6,18 @@ export interface HTMLProps {
     children?: string;
     block?: boolean;
     className?: string;
+    itemProp?: string;
 }
 
-const HTML = ({children, block = false, className}: WithChildren<HTMLProps>) => {
+const HTML = ({children, block = false, className, itemProp}: WithChildren<HTMLProps>) => {
     if (!children) {
         return null;
     }
 
     return React.createElement(block ? 'div' : 'span', {
         dangerouslySetInnerHTML: {__html: children},
         className,
+        itemProp,
     });
 };
 
diff --git a/src/components/YFMWrapper/YFMWrapper.tsx b/src/components/YFMWrapper/YFMWrapper.tsx
@@ -14,10 +14,18 @@ export interface YFMWrapperProps {
     className?: string;
     content: string;
     modifiers?: Modifiers;
+    itemProp?: string;
 }
 
-const YFMWrapper = ({content, modifiers, className}: YFMWrapperProps & ClassNameProps) => (
-    <HTML className={yfm(modifiers ? toSnakeCase(modifiers) : {}, className)}>{content}</HTML>
+const YFMWrapper = ({
+    content,
+    modifiers,
+    className,
+    itemProp,
+}: YFMWrapperProps & ClassNameProps) => (
+    <HTML className={yfm(modifiers ? toSnakeCase(modifiers) : {}, className)} itemProp={itemProp}>
+        {content}
+    </HTML>
 );
 
 export default YFMWrapper;
