Announcement Page retooling, make it look better.

added Markdown support for rich text for all type.
Markdown support for books description page too to add Translator Notes.
Added a Rendering Pipeline for specialized Glossary Popup to work.
Added more info to book, from back and front end. Getting ready for ratings views and reader list.

src/lib/types.tsx

@@ -61,6 +61,10 @@ export interface Book {
     release_datetime: string;
     chapters: Chapter[];
     glossary: Glossary;
+    translator_note: string;
+    rating: number;
+    views: number;
+    readers: number;
   }
 
 export interface Announcement {

src/lib/utils.tsx

@@ -1,3 +1,7 @@
+import { remark } from 'remark';
+import html from 'remark-html';
+import sanitizeHtml from 'sanitize-html'
+
 export function formatDateToMonthDayYear(date: Date): string {
   return date.toLocaleDateString("en-US", {
     month: "long",
@@ -7,4 +11,21 @@ export function formatDateToMonthDayYear(date: Date): string {
     minute: "numeric",
     timeZoneName: "short",
   });
+}
+
+export async function markdownToHtml(markdown: string): Promise<string> {
+
+  const result = await remark().use(html).process(markdown)
+  const sanitizedHtml = sanitizeHtml(result.toString(), {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre']),
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      img: ['src', 'alt'],
+    },
+  })
+  if(sanitizedHtml == ""){
+    //Already html
+    return markdown
+  }
+  return sanitizedHtml
 }