Adding effectiveDate frontmatter property (#22317)

* adding effectiveDate frontmatter property

* Update components/article/ArticlePage.tsx

Co-authored-by: Peter Bengtsson <peterbe@github.com>

* adding validation for correct date

* update to dateTime

* update to year month day

* update error date validation

* moving validation to getArticleContextFromRequest and moving id to div

* remove enteredDate

* Update content/README.md

Co-authored-by: Laura Coursen <lecoursen@github.com>

Co-authored-by: Peter Bengtsson <peterbe@github.com>
Co-authored-by: Laura Coursen <lecoursen@github.com>

components/article/ArticlePage.tsx

@@ -32,6 +32,7 @@ export const ArticlePage = () => {
   const {
     title,
     intro,
+    effectiveDate,
     renderedPage,
     contributor,
     permissions,
@@ -153,6 +154,14 @@ export const ArticlePage = () => {
         >
           <div id="article-contents">
             <MarkdownContent>{renderedPage}</MarkdownContent>
+            {effectiveDate && (
+              <div className="mt-4" id="effectiveDate">
+                Effective as of:{' '}
+                <time dateTime={new Date(effectiveDate).toISOString()}>
+                  {new Date(effectiveDate).toDateString()}
+                </time>
+              </div>
+            )}
           </div>
         </ArticleGridLayout>
 

components/context/ArticleContext.tsx

@@ -16,6 +16,7 @@ export type MiniTocItem = {
 export type ArticleContextT = {
   title: string
   intro: string
+  effectiveDate: string
   renderedPage: string
   miniTocItems: Array<MiniTocItem>
   contributor: { name: string; URL: string } | null
@@ -40,9 +41,19 @@ export const useArticleContext = (): ArticleContextT => {
 
 export const getArticleContextFromRequest = (req: any): ArticleContextT => {
   const page = req.context.page
+
+  if (page.effectiveDate) {
+    if (isNaN(Date.parse(page.effectiveDate))) {
+      throw new Error(
+        'The "effectiveDate" frontmatter property is not valid. Please make sure it is YEAR-MONTH-DAY'
+      )
+    }
+  }
+
   return {
     title: page.titlePlainText,
     intro: page.intro,
+    effectiveDate: page.effectiveDate || '',
     renderedPage: req.context.renderedPage || '',
     miniTocItems: req.context.miniTocItems || [],
     contributor: page.contributor || null,