chore: adding blabla.page chrome extension placeholder and adding icon.

puni9869 · Jun 22, 2024 · baaee43 · baaee43
1 parent 99fdbf5
commit baaee43
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/base-layout.vue b/src/components/base-layout.vue
@@ -1,9 +1,14 @@
 <template>
-  <div class="flex greetings">
-    Enjoy the rest of your {{ day }}!
-    <a target="_blank" class="flex-1" href="https://github.com/puni9869/blabla-page">
-      <img alt="blabla.page" class="flex github" :src="getImageUrl()" />
+  <div class="flex">
+    <span class ="greetings">Enjoy the rest of your {{ day }}!</span>
+    <span class="flex ml-auto">
+    <a target="_blank" href="https://github.com/puni9869/blabla-page">
+      <img title="github.com/puni9869/blabla-page" alt="blabla.page" class="flex icon" :src="getImageUrl('github_icon.ico')" />
     </a>
+    <a target="_blank" href="https://github.com/puni9869/blabla-page">
+      <img alt="Add to chrome"  title="Download the chrome extension" class="flex icon extension" :src="getImageUrl('chrome.png')" />
+    </a>
+  </span>
   </div>
   <div class="min-w-screen min-h-screen flex"><slot /></div>
 </template>
@@ -22,13 +27,14 @@ const weekday = [
 ];
 const d = new Date();
 const day = ref(weekday[d.getDay()]);
-function getImageUrl() {
-  return new URL(`../images/icons/github_icon.ico`, import.meta.url).href;
+function getImageUrl(iconName) {
+  return new URL(`../images/icons/${iconName}`, import.meta.url).href;
 }
 </script>
 <style scoped>
-.github {
+.icon {
   align-items: end;
+  gap: 1;
   color: gray;
   width: 28px;
   height: 28px;
@@ -41,4 +47,9 @@ function getImageUrl() {
   color: gray;
   padding-left: 0.625rem;
 }
+.extension {
+  width: 24px;
+  height: 24px;
+  margin: 2px;
+}
 </style>
diff --git a/src/images/icons/chrome.png b/src/images/icons/chrome.png