Update 1.9.0 (#25)

Features - Add umami analytics script - Add umami event track - Add event to Posts and Projects links - Add new banner image Changes - Update avatar ester egg - Update dependencies - Upgrade astro-icon to v1.X - Increase text size from open graph post template Fixes - Fix `tag` name being replaced by astro-rename *Bump version to 1.9.0*
LucJosin · Mar 3, 2024 · fddb8b5 · fddb8b5
1 parent 658c2da
commit fddb8b5
Show file tree

Hide file tree

Showing 28 changed files with 544 additions and 214 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,6 +6,7 @@ import sitemap from '@astrojs/sitemap';
 import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
 import compress from 'astro-compress';
 import astroExpressiveCode from 'astro-expressive-code';
+import icon from 'astro-icon';
 import astroMetaTags from 'astro-meta-tags';
 import rename from 'astro-rename';
 import robotsTxt from 'astro-robots-txt';
@@ -66,6 +67,7 @@ export default defineConfig({
       plugins: [pluginLineNumbers()],
     }),
     astroMetaTags(),
+    icon(),
     rename({
       rename: {
         strategy: (key) => renamer.rename(key),

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lucjosin/lucasjosino.com",
   "packageManager": "[email protected]",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -20,32 +20,35 @@
     "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "astro": "4.4.6",
-    "astro-compress": "^2.2.10",
+    "astro": "^4.4.9",
+    "astro-compress": "^2.2.11",
     "astro-expressive-code": "^0.33.4",
-    "astro-icon": "^0.8.1",
+    "astro-icon": "^1.1.0",
     "astro-rename": "^1.1.2",
     "astro-robots-txt": "^1.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-astro": "^0.31.4",
     "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-astro": "^0.13.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "remark-collapse": "^0.1.2",
     "remark-numbered-footnote-labels": "^1.1.0",
-    "remark-toc": "^8.0.1",
+    "remark-toc": "^9.0.0",
     "satori": "^0.10.13",
     "satori-html": "^0.3.2",
     "svgo": "2.8.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "@astrojs/react": "3.0.10",
     "@astrojs/rss": "4.0.5",
     "@expressive-code/plugin-line-numbers": "^0.33.4",
+    "@iconify-json/ic": "^1.1.17",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/simple-icons": "^1.1.93",
     "@resvg/resvg-js": "^2.5.0",
     "@swup/astro": "^1.3.2",
     "@types/react": "^18.2.29",

diff --git a/public/static/banner.png b/public/static/banner.png
diff --git a/src/components/core/Avatar.astro b/src/components/core/Avatar.astro
@@ -4,12 +4,6 @@
 
 <div class="avatar">
   <span class="avatar-profile"></span>
-  <img
-    src="https://emoji.gg/assets/emoji/7279-vibecat.gif"
-    width="34"
-    class="avatar-fallback"
-    title="Vibecat gif"
-  />
 </div>
 
 <style>
@@ -33,27 +27,8 @@
     cursor: help;
   }
 
-  .avatar-fallback {
-    height: 3rem;
-    width: 3rem;
-    position: absolute;
-    visibility: hidden;
+  .avatar-profile:hover {
+    background: url('https://emoji.gg/assets/emoji/7279-vibecat.gif') no-repeat
+      center;
   }
 </style>
-
-<script>
-  const profile = document.querySelector('.avatar-profile') as HTMLInputElement;
-  const fallback = document.querySelector(
-    '.avatar-fallback'
-  ) as HTMLInputElement;
-
-  profile?.addEventListener('click', () => {
-    profile.style.visibility = 'hidden';
-    fallback.style.visibility = 'visible';
-  });
-
-  fallback?.addEventListener('click', () => {
-    profile.style.visibility = 'visible';
-    fallback.style.visibility = 'hidden';
-  });
-</script>
diff --git a/src/components/core/BackToTop.astro b/src/components/core/BackToTop.astro
@@ -1,9 +1,9 @@
 ---
-import Icon from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 ---
 
 <a class="back-to-top">
-  <Icon name="mdi:arrow-up" width="24" />
+  <Icon name="mdi:arrow-up" />
 </a>
 
 <style>
@@ -37,7 +37,7 @@ import Icon from 'astro-icon';
     background-color: var(--contrast-color);
   }
 
-  .back-to-top:hover > [astro-icon] {
+  .back-to-top:hover > [data-icon] {
     color: var(--primary-color);
     fill: var(--primary-color);
   }

diff --git a/src/components/core/Link/Link.astro b/src/components/core/Link/Link.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Props {
   href: string;
@@ -13,6 +13,7 @@ interface Props {
   hasBorderBottom?: boolean;
   animatedIcon?: boolean;
   reverseAnimation?: boolean;
+  event?: string;
 }
 
 const {
@@ -23,12 +24,15 @@ const {
   gap = '0.6rem',
   icon,
   iconSide = 'left',
-  iconSize = '18',
+  iconSize = '1.2em',
   hasBorderBottom = true,
   animatedIcon = false,
   reverseAnimation = false,
+  event,
 } = Astro.props as Props;
 
+const attr = { 'data-umami-event': event };
+
 const borderBottom = hasBorderBottom ? 'var(--border-color)' : 'transparent';
 
 const currentGap = reverseAnimation ? '0' : gap;
@@ -46,13 +50,16 @@ const iconColor = animatedIcon ? 'var(--constrast-color)' : 'gray';
   rel={isLocal ? undefined : 'noopener noreferrer'}
   target={isLocal ? undefined : '_blank'}
   class="link-data"
+  {...attr}
 >
-  {icon && iconSide === 'left' && <Icon name={icon} size={iconSize} />}
+  {icon && iconSide === 'left' && <Icon name={icon} />}
   {title && <span>{title}</span>}
-  {icon && iconSide === 'right' && <Icon name={icon} size={iconSize} />}
+  {icon && iconSide === 'right' && <Icon name={icon} />}
 </a>
 
-<style define:vars={{ borderBottom, currentGap, animatedGap, iconColor }}>
+<style
+  define:vars={{ borderBottom, currentGap, animatedGap, iconColor, iconSize }}
+>
   .link-data {
     border-bottom: var(--border-size) solid transparent;
     transition: all var(--transition-duration);
@@ -67,8 +74,12 @@ const iconColor = animatedIcon ? 'var(--constrast-color)' : 'gray';
     gap: var(--animatedGap);
   }
 
-  .link-data:hover > [astro-icon] {
+  .link-data:hover > [data-icon] {
     fill: var(--iconColor);
     color: var(--iconColor);
   }
+
+  [data-icon] {
+    font-size: var(--iconSize);
+  }
 </style>
diff --git a/src/components/core/Link/LinkBox.astro b/src/components/core/Link/LinkBox.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Props {
   href: string;
@@ -12,20 +12,24 @@ interface Props {
   isLocal?: boolean;
   padding?: string;
   titleId?: string;
+  event?: string;
 }
 
 const {
   href,
   alt,
   icon,
   iconSide = 'left',
-  iconSize = '18',
+  iconSize = '1.2em',
   title,
   id,
   isLocal = true,
   padding = '0.8rem',
   titleId,
+  event,
 } = Astro.props as Props;
+
+const attr = { 'data-umami-event': event };
 ---
 
 <a
@@ -35,13 +39,14 @@ const {
   title={alt}
   id={id}
   class="link-box"
+  {...attr}
 >
-  {icon && iconSide === 'left' && <Icon name={icon} size={iconSize} />}
+  {icon && iconSide === 'left' && <Icon name={icon} />}
   {title && <span id={titleId}>{title}</span>}
-  {icon && iconSide === 'right' && <Icon name={icon} size={iconSize} />}
+  {icon && iconSide === 'right' && <Icon name={icon} />}
 </a>
 
-<style define:vars={{ padding }}>
+<style define:vars={{ padding, iconSize }}>
   .link-box {
     height: min-content;
     border: var(--border-size) solid var(--border-color);
@@ -61,8 +66,12 @@ const {
     cursor: pointer;
   }
 
-  .link-box:hover > [astro-icon] {
+  .link-box:hover > [data-icon] {
     fill: var(--secondary-text-color);
     color: var(--secondary-text-color);
   }
+
+  [data-icon] {
+    font-size: var(--iconSize);
+  }
 </style>
diff --git a/src/components/core/Post/PostInfoItem.astro b/src/components/core/Post/PostInfoItem.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Props {
   icon: string;
@@ -9,7 +9,7 @@ const { icon } = Astro.props;
 ---
 
 <span class="post-info-item">
-  <Icon name={icon} width="18" />
+  <Icon name={icon} />
   <slot />
 </span>
 
@@ -25,9 +25,14 @@ const { icon } = Astro.props;
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    margin-left: 0.2rem;
   }
 
   .post-info-item:last-child::after {
     content: '';
   }
+
+  [data-icon] {
+    font-size: 1.2em;
+  }
 </style>
diff --git a/src/components/core/Post/PostShareBanner.astro b/src/components/core/Post/PostShareBanner.astro
@@ -1,7 +1,7 @@
 ---
 import PostShare from '@components/data/Post/PostShare.astro';
 import headConfig from '@constants/head';
-import Icon from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 
 interface Props {
   link: string;
@@ -16,31 +16,35 @@ const { link, linkedin, twitter, reddit } = Astro.props;
 <div class="post-extra-share">
   <span class="post-extra-share-left">
     <Icon name="mdi:cards-heart" width="18" />
-     Enjoy this post? Feel free to share!
+    Enjoy this post? Feel free to share!
   </span>
   <PostShare
     items={[
       {
         href: linkedin,
         icon: 'simple-icons:linkedin',
         alt: 'Share to Linkedin',
+        event: `Post Share (Footer) - Linkedin (${link})`,
       },
       {
         href: twitter,
         icon: 'simple-icons:twitter',
         alt: 'Share to Twitter',
+        event: `Post Share (Footer) - Twitter (${link})`,
       },
       {
         href: reddit,
         icon: 'simple-icons:reddit',
         alt: 'Share to Reddit',
+        event: `Post Share (Footer) - Reddit (${link})`,
       },
       {
         href: headConfig.shortLink + link,
         icon: 'mdi:link',
         alt: 'Copy link',
         id: 'share',
         messageId: 'share-title',
+        event: `Post Share (Footer) - Copy link (${link})`,
       },
     ]}
   />

diff --git a/src/components/core/Project/MiniProjectCard.astro b/src/components/core/Project/MiniProjectCard.astro
@@ -30,7 +30,6 @@ const { title, image, description, url, git } = Astro.props as Props;
             href={git}
             icon="simple-icons:github"
             alt={title + ' - Github'}
-            iconSize="20"
             isLocal={false}
             hasBorderBottom={false}
           />
@@ -40,9 +39,8 @@ const { title, image, description, url, git } = Astro.props as Props;
         url && (
           <Link
             href={url}
-            icon="gridicons:external"
+            icon="mdi:external-link"
             alt={title + ' - Demo'}
-            iconSize="22"
             isLocal={false}
             hasBorderBottom={false}
           />

diff --git a/src/components/core/Project/ProjectCard.astro b/src/components/core/Project/ProjectCard.astro
@@ -1,7 +1,7 @@
 ---
 import Tags from '@components/data/Tags.astro';
 import type { ProjectModel } from '@constants/projects';
-import Icon from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 import Description from '../Description.astro';
 import Divider from '../Divider.astro';
 import LinkBox from '../Link/LinkBox.astro';
@@ -27,10 +27,7 @@ const { project, titleSize, descSize } = Astro.props as Props;
     <Title title={project.title} fontSize={titleSize} margin="0" />
     <span class="language">
       {project.language}
-      <Icon
-        name={`simple-icons:${project.language.toLocaleLowerCase()}`}
-        width="16"
-      />
+      <Icon name={project.icon} />
     </span>
   </div>
   <Divider width="100%" margin="0 0" />
@@ -144,4 +141,8 @@ const { project, titleSize, descSize } = Astro.props as Props;
     gap: 1rem;
     grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   }
+
+  [data-icon] {
+    font-size: 1.3em;
+  }
 </style>