refactor to use icon package

Switched to using unplugin-icons for iconoir. Switched types to interface. Deleted outdated comments Updated readme
magicalpuffin · May 7, 2024 · 2b0de6e · 2b0de6e
1 parent 0494959
commit 2b0de6e
Show file tree

Hide file tree

Showing 25 changed files with 398 additions and 233 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240502.0",
+    "@iconify-json/iconoir": "^1.1.44",
     "@sveltejs/adapter-cloudflare": "^4.4.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -37,6 +38,7 @@
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.2",
     "typescript": "^5.3.3",
+    "unplugin-icons": "^0.19.0",
     "vite": "^5.0.0"
   },
   "type": "module"

diff --git a/frontend/src/lib/components/blog/BlogHeader.svelte b/frontend/src/lib/components/blog/BlogHeader.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Header from "$lib/components/Header.svelte";
-  import { CalendarIcon, InfoIcon } from "$lib/icons";
+  import CalendarIcon from "~icons/iconoir/calendar";
+  import InfoCircleIcon from "~icons/iconoir/info-circle";
 
   export let title: string;
   export let dateCreated: Date;
@@ -21,10 +22,10 @@
   data-tip={tooltipText}
 >
   {#if dateUpdated}
-    <CalendarIcon />
-    <InfoIcon />
+    <CalendarIcon style="font-size: 1.25em" />
+    <InfoCircleIcon style="font-size: 1.25em" />
   {:else}
-    <CalendarIcon />
+    <CalendarIcon style="font-size: 1.25em" />
   {/if}
   <p class="text-md font-light">
     {dateCreated.toLocaleDateString("en-US", {

diff --git a/frontend/src/lib/components/buttons/GithubButton.svelte b/frontend/src/lib/components/buttons/GithubButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { GithubIcon } from "$lib/icons";
+  import Github from "~icons/iconoir/github";
+
   export let link: string;
 </script>
 
@@ -9,5 +10,5 @@
   target="_blank"
   rel="noopener noreferrer"
   ><p class="hidden md:block">Github</p>
-  <GithubIcon /></a
->
+  <Github style="font-size: 1.5em" />
+</a>
diff --git a/frontend/src/lib/components/buttons/NewWindowButton.svelte b/frontend/src/lib/components/buttons/NewWindowButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { OpenInWindowIcon } from "$lib/icons";
+  import OpenNewWindow from "~icons/iconoir/open-new-window";
   export let link: string;
 </script>
 
@@ -9,5 +9,5 @@
   target="_blank"
   rel="noopener noreferrer"
   ><p class="hidden md:block">Open</p>
-  <OpenInWindowIcon /></a
->
+  <OpenNewWindow style="font-size: 1.5em" />
+</a>
diff --git a/frontend/src/lib/components/buttons/index.ts b/frontend/src/lib/components/buttons/index.ts
@@ -0,0 +1,2 @@
+export { default as GithubButton } from "./GithubButton.svelte";
+export { default as NewWindowButton } from "./NewWindowButton.svelte";
diff --git a/frontend/src/lib/components/cardCarousel/ProjectCard.svelte b/frontend/src/lib/components/cardCarousel/ProjectCard.svelte
@@ -3,8 +3,7 @@
 
   import type { CardContent } from "$lib/types/card";
 
-  import NewWindowButton from "$lib/components/buttons/NewWindowButton.svelte";
-  import GithubButton from "$lib/components/buttons/GithubButton.svelte";
+  import { NewWindowButton, GithubButton } from "$lib/components/buttons";
   import { markdownToHtml } from "$lib/utils/markdownToHtml";
 
   export let cardContent: CardContent;

diff --git a/frontend/src/lib/components/navbar/NameLogo.svelte b/frontend/src/lib/components/navbar/NameLogo.svelte
@@ -7,6 +7,3 @@
 >
   Michael Li
 </a>
-<!-- <a class="hover:text-secondary px-6 text-xl font-bold md:text-2xl" href="/"
-  >Michael Li
-</a> -->
diff --git a/frontend/src/lib/components/navbar/Navbar.svelte b/frontend/src/lib/components/navbar/Navbar.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { MenuIcon } from "$lib/icons";
   import NameLogo from "./NameLogo.svelte";
   import NavbarLinks from "./NavbarLinks.svelte";
+  import MenuIcon from "~icons/iconoir/menu";
 </script>
 
 <nav class="navbar bg-base-100 border-b">
@@ -22,7 +22,7 @@
     <div class="dropdown dropdown-end md:hidden">
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <div tabindex="0" class="btn btn-ghost">
-        <MenuIcon />
+        <MenuIcon style="font-size: 1.5em" />
       </div>
       <ul
         class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow"

diff --git a/frontend/src/lib/icons/Calendar.svelte b/frontend/src/lib/icons/Calendar.svelte
diff --git a/frontend/src/lib/icons/CalendarPlus.svelte b/frontend/src/lib/icons/CalendarPlus.svelte
diff --git a/frontend/src/lib/icons/Github.svelte b/frontend/src/lib/icons/Github.svelte
diff --git a/frontend/src/lib/icons/Info.svelte b/frontend/src/lib/icons/Info.svelte
diff --git a/frontend/src/lib/icons/Menu.svelte b/frontend/src/lib/icons/Menu.svelte
diff --git a/frontend/src/lib/icons/OpenInWindow.svelte b/frontend/src/lib/icons/OpenInWindow.svelte
diff --git a/frontend/src/lib/icons/index.ts b/frontend/src/lib/icons/index.ts
diff --git a/frontend/src/lib/types/blog.ts b/frontend/src/lib/types/blog.ts
@@ -1,18 +1,19 @@
-export type BlogPostJSON = {
+export interface BlogPostBase {
   filename: string;
   content: string;
   post_id: number;
   title: string;
   description: string;
-  date_created: string;
-  date_updated: string;
-};
-export type BlogPost = {
+  date_created: Date | string;
+  date_updated: Date | string;
+}
+
+export interface BlogPost extends BlogPostBase {
   filename: string;
   content: string;
   post_id: number;
   title: string;
   description: string;
   date_created: Date;
   date_updated: Date;
-};
+}
diff --git a/frontend/src/lib/types/card.ts b/frontend/src/lib/types/card.ts
@@ -1,4 +1,4 @@
-export type CardContent = {
+export interface CardContent {
   filename: string;
   content: string;
   title: string;
@@ -7,4 +7,4 @@ export type CardContent = {
   img_src: string | undefined;
   detail_url: string | undefined;
   github_url: string | undefined;
-};
+}
diff --git a/frontend/src/lib/utils/markdownToHtml.ts b/frontend/src/lib/utils/markdownToHtml.ts
@@ -1,7 +1,6 @@
+import hljs from "highlight.js";
 import { Marked } from "marked";
 import { markedHighlight } from "marked-highlight";
-import hljs from "highlight.js";
-// import sanitizeHtml from "sanitize-html";
 
 export function markdownToHtml(markdown_text?: string): string {
   if (markdown_text === undefined) {
@@ -32,16 +31,5 @@ export function markdownToHtml(markdown_text?: string): string {
     headerIds: false,
   });
 
-  // I think sanitize html is causing issues
-  // sanitizehtml, allow highlightjs
-  // html_text = sanitizeHtml(html_text, {
-  //   allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
-  //   allowedClasses: {
-  //     div: ["table-container"],
-  //     code: ["hljs", "language-*", "lang-*"],
-  //     span: ["hljs-*"],
-  //   },
-  // });
-
   return html_text;
 }
diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
diff --git a/frontend/src/routes/blog/+page.ts b/frontend/src/routes/blog/+page.ts
@@ -1,13 +1,12 @@
+import type { BlogPost, BlogPostBase } from "$lib/types/blog";
 import type { PageLoad } from "./$types.js";
-import type { BlogPostJSON, BlogPost } from "$lib/types/blog";
 
 export const load = (async ({ fetch }) => {
   const URL_BLOGLIST = "/static/content/data/blogPostList.json";
-  const blogPostListJSON: BlogPostJSON[] = await (
+  const blogPostListJSON: BlogPostBase[] = await (
     await fetch(URL_BLOGLIST)
   ).json();
 
-  // TODO Consider moving functionality to utils
   let blogPostList: BlogPost[] = blogPostListJSON.map((blogPost) => ({
     ...blogPost,
     date_created: new Date(blogPost.date_created),

diff --git a/frontend/src/routes/blog/[slug]/+page.ts b/frontend/src/routes/blog/[slug]/+page.ts
@@ -1,12 +1,12 @@
-import type { PageLoad } from "./$types.js";
-import type { BlogPostJSON, BlogPost } from "$lib/types/blog";
+import type { BlogPost, BlogPostBase } from "$lib/types/blog";
 import { error } from "@sveltejs/kit";
+import type { PageLoad } from "./$types.js";
 
 export const load = (async ({ params, fetch }) => {
   const URL_BLOGLIST = "/static/content/data/blogPostList.json";
   const BLOG_ID = params.slug;
 
-  const blogPostListJSON: BlogPostJSON[] = await (
+  const blogPostListJSON: BlogPostBase[] = await (
     await fetch(URL_BLOGLIST)
   ).json();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as GithubButton } from "./GithubButton.svelte";
		export { default as NewWindowButton } from "./NewWindowButton.svelte";