add element rich text

frontend/rabbi_gerzi/cypress/e2e/media.cy.ts

@@ -50,7 +50,7 @@ describe('media page sets', () => {
     cy.get('[data-cy="child-element-list"]')
       .should(
         'not.contain.text',
-        'Foundations rich text belongs on its own page.',
+        'Avodah foundations begin with honest awareness',
       )
     cy.contains('[data-cy="child-element-link"]', 'Avodah Foundations')
       .as('avodahFoundationsLink')
@@ -76,7 +76,7 @@ describe('media page sets', () => {
     cy.get('[data-cy="element-rich-text"]')
       .should(
         'contain.text',
-        'Foundations rich text belongs on its own page.',
+        'Avodah foundations begin with honest awareness',
       )
   })
 })

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -1,22 +1,26 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
-export interface Element {
+export interface ChildElement {
   id: number
   title: string
   description: string
 }
 
+export interface Element extends ChildElement {
+  richText: string
+}
+
 interface ElementResponse {
   element: Element
-  childElements: Element[]
+  childElements: ChildElement[]
 }
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
 
 export const useElementsStore = defineStore('elements', () => {
   const element = ref<Element | null>(null)
-  const childElements = ref<Element[]>([])
+  const childElements = ref<ChildElement[]>([])
   const isLoading = ref(false)
   const error = ref<string | null>(null)
 

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -49,6 +49,13 @@ watch(
           {{ element.title }}
         </h1>
 
+        <div
+          v-if="element.richText !== ''"
+          class="element-page__rich-text"
+          data-cy="element-rich-text"
+          v-html="element.richText"
+        />
+
         <nav
           v-if="childElements.length > 0"
           class="element-page__children"
@@ -109,6 +116,27 @@ watch(
   text-align: center;
 }
 
+.element-page__rich-text {
+  margin-top: 1.75rem;
+  color: #333333;
+  font-family: var(--font-sans);
+  font-size: 1.05rem;
+  line-height: 1.75;
+}
+
+.element-page__rich-text :deep(p) {
+  margin: 0 0 1rem;
+}
+
+.element-page__rich-text :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.element-page__rich-text :deep(strong) {
+  color: #2c2c2c;
+  font-weight: 700;
+}
+
 .element-page__children {
   margin-top: 3rem;
 }