feat(announcements): define shape

src/layouts/EditHomepage/constants.ts

@@ -3,6 +3,26 @@ export const RESOURCES_SECTION = {
   subtitle: "Add a preview and link to your Resource Room",
   id: "resources",
 } as const
+export const LocalDateTimeNow = new Date().toLocaleString("en-SG", {
+  timeZone: "Asia/Singapore",
+})
+
+export const ANNOUNCEMENT_SECTION = {
+  title: "Announcement",
+  date: LocalDateTimeNow,
+  announcement: "Announcement content",
+  linkText: "Learn more",
+  linkUrl: "Insert /page-url of https://",
+} as const
+
+export type AnnouncementSectionType = typeof ANNOUNCEMENT_SECTION
+export const ANNOUNCEMENT_BLOCK = {
+  title: "New announcements block",
+  addSectionTitle: "Announcements",
+  id: "announcementBlock",
+  subtitle: "Add a list of announcements with dates",
+  announcements: [] as AnnouncementSectionType[],
+} as const
 
 export const INFOBAR_SECTION = {
   title: "Infobar",

src/types/homepage.ts

@@ -16,6 +16,14 @@ export type HighlightOption = {
   url: string
 }
 
+export type AnnouncementOption = {
+  title: string
+  date: string
+  announcementContent: string
+  linkText: string
+  linkUrl: string
+}
+
 interface BaseHeroSection {
   background: string
   subtitle: string
@@ -59,6 +67,12 @@ export interface ResourcesSection {
   button?: string
 }
 
+export interface AnnouncementBlockSection {
+  title?: string
+  subtitle?: string
+  announcements: AnnouncementOption[]
+}
+
 export interface HomepageDto {
   content: {
     frontMatter: {
@@ -73,14 +87,19 @@ export interface HomepageDto {
         | InfobarSection
         | InfopicSection
         | ResourcesSection
+        | AnnouncementBlockSection
       )[]
     }
     pageBody?: string
   }
   sha: string
 }
 
-export type EditorHomepageElement = "section" | "dropdownelem" | "highlight"
+export type EditorHomepageElement =
+  | "section"
+  | "dropdownelem"
+  | "highlight"
+  | "announcement"
 export type PossibleEditorSections = IterableElement<
   | EditorHomepageState["frontMatter"]["sections"]
   | EditorHeroDropdownSection["dropdown"]["options"]
@@ -107,11 +126,16 @@ export type InfobarFrontmatterSection = {
   infobar: Record<string, unknown>
 }
 
+export type AnnouncementBlockFrontmatterSection = {
+  announcementBlock: AnnouncementBlockSection
+}
+
 export type EditorHomepageFrontmatterSection =
   | HeroFrontmatterSection
   | ResourcesFrontmatterSection
   | InfopicFrontmatterSection
   | InfobarFrontmatterSection
+  | AnnouncementBlockFrontmatterSection
 
 export const EditorHomepageFrontmatterSection = {
   isHero: (
@@ -130,6 +154,14 @@ export const EditorHomepageFrontmatterSection = {
     section: EditorHomepageFrontmatterSection
   ): section is InfobarFrontmatterSection =>
     !!(section as InfobarFrontmatterSection).infobar,
+  isAnnouncementBlock: (
+    section: EditorHomepageFrontmatterSection
+  ): section is AnnouncementBlockFrontmatterSection =>
+    !!(section as AnnouncementBlockFrontmatterSection).announcementBlock,
+  isAnnouncement: (
+    section: PossibleEditorSections
+  ): section is AnnouncementOption =>
+    !!(section as AnnouncementOption).announcementContent,
 }
 
 export interface EditorHomepageState {
@@ -140,10 +172,12 @@ export interface EditorHomepageState {
     sections: unknown[]
     dropdownElems: unknown[]
     highlights: unknown[]
+    announcements: unknown[]
   }
   displaySections: unknown[]
   displayDropdownElems: unknown[]
   displayHighlights: unknown[]
+  displayAnnouncements: unknown[]
 }
 
 export interface EditorHeroDropdownSection {