Use current frontmatter template

There's a pending change to update some new frontmatter keywords, the tool should cont to use the older keywords. (e.g. `dateline_str` vs `date`)

src/App.css

@@ -30,3 +30,7 @@
   left: 5px;
   z-index: 100;
 }
+
+.cm-searchMatch {
+  background-color: rgba(250, 247, 2, 0.27) !important;
+}

src/mdxcomponents/frontmatterUtils.ts

@@ -54,12 +54,21 @@ export const yamlToBlogFields = (yamlstr: string): BlogFrontMatterFields => {
   return result;
 }
 
-
-export const getYamlBlogHeader = (fields: BlogFrontMatterFields): string => {
+/** there's a pending change with the website to rename some fields */
+export const getYamlBlogHeaderNew = (fields: BlogFrontMatterFields): string => {
   const tags = '[' + fields.tags?.map(s => `'${s}'`).join(',') + ']';
   return `# Page template info (DO NOT EDIT)
 layout: default
 blog_page: true
+# Carousel (Edit this)
+carousel_title: "${fields.carousel_title}"
+carousel_summary: "${fields.carousel_summary}"
+# partial path to image
+carousel_image: ${fields.carousel_image}
+# accessibility text for image
+carousel_image_alt_text: "${fields.carousel_image_alt_text}"
+# should show on news and blog page. ordered by date prefix in filename
+carousel_show: ${fields.carousel_show ? "true" : "false"}
 
 # Blog detail page (Edit this)
 title: "${fields.title}"
@@ -69,6 +78,14 @@ author: "${fields.author}"
 permalink: ${fields.permalink}
 basename: "${fields.basename}"
 tags: [${tags}]
+`;
+}
+
+export const getYamlBlogHeader = (fields: BlogFrontMatterFields): string => {
+  const tags = '[' + fields.tags?.map(s => `'${s}'`).join(',') + ']';
+  return `# Page template info (DO NOT EDIT)
+layout: default
+blog_page: true
 
 # Carousel (Edit this)
 carousel_title: "${fields.carousel_title}"
@@ -79,6 +96,15 @@ carousel_image: ${fields.carousel_image}
 carousel_image_alt_text: "${fields.carousel_image_alt_text}"
 # should show on news and blog page. ordered by date prefix in filename
 carousel_show: ${fields.carousel_show ? "true" : "false"}
+
+# Blog detail page (Edit this)
+title: "${fields.title}"
+dateline_str: "${fields.date}"
+readtime_str: "${fields.readtime_minutes}"
+byline_str: author: "${fields.author}"
+permalink: ${fields.permalink}
+basename: "${fields.basename}"
+tags: [${tags}]
 `;
 }
 

src/misc.ts

@@ -12,12 +12,15 @@ export const getFilnamePartOfUrlPath = (pathstr?: string) => pathstr?.split("/")
 export const forceTypeBoolean = (value: string | null | boolean): boolean | null =>
   typeof value === 'boolean' ? value : value === 'true' ? true : value === 'false' ? false : null;
 
-export const toUTCDate = (dateStr: string | Date): string => {
+export const toUTCDate = (date: string | Date | undefined): string => {
+  if ((typeof date === "string") && (date.trim().length === 0 || date === "Invalid date")) {
+    date = undefined;
+  }
   // have to be careful of the timezone shifting days because of UTC offsets.
   // e.g. Date("1/1/2020") gets turned into "Dec 31, 2019"
   // But "Jan 1, 2020" doesn't get converted. Such a horrible API.
   // so, we're using moment.js
-  const dateObj = moment(dateStr);
+  const dateObj = moment(date);
   return dateObj.toISOString().split("T")[0] || ""
 }
 
@@ -33,13 +36,13 @@ export const shortDateToNanoId = (dateStr: string): string => {
   // `0123456789abcdefghijklmnopqrstu` `vwxyz`
   // Timestamp often starts the same leading character and ends with "0" so just remove.
   // `lqw277k0` => `qw277k`
-  tempresult.replace('a','v')
+  tempresult.replace('a', 'v')
   return tempresult
-    .replace('a','v')
-    .replace('e','w')
-    .replace('i','x')
-    .replace('o','z')
-    .substring(1, tempresult.length-1);
+    .replace('a', 'v')
+    .replace('e', 'w')
+    .replace('i', 'x')
+    .replace('o', 'z')
+    .substring(1, tempresult.length - 1);
 }
 
 export const cleanupFilename = (instr: string): string => {