style link icons in footer

nemanjam · May 23, 2024 · e662d33 · e662d33
1 parent 5e7c606
commit e662d33
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 41 deletions.
diff --git a/docs/todo3.md b/docs/todo3.md
@@ -189,4 +189,6 @@ use single Post or PostCollection type_ everywhere
 rewrite Pagination component
 find footer examples
 social links component for footer, array of objects and map
+accessibility, tab, focus, aria, nav, ul li, header, article
+icon link button
 ```
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,61 +2,76 @@
 import { Icon } from 'astro-icon/components';
 
 import { BackToTop } from '@/components/BackToTop';
-import Button from '@/components/Button.astro';
 import { CONFIG } from '@/config';
-import { getLatestCommitInfo, getLatestCommitInfoAsString } from '@/utils/git';
+import { getLatestCommitInfo } from '@/utils/git';
 import { trimHttpProtocol } from '@/utils/strings';
 
 const { SITE_URL } = CONFIG;
 const domain = trimHttpProtocol(SITE_URL);
 
-const commitInfo = getLatestCommitInfoAsString();
+const { time, hash, message } = getLatestCommitInfo();
 ---
 
 <footer class="block border-t border-base-300">
-  <div class="max-w-6xl md:mx-auto flex justify-between py-8 px-4">
+  <div class="max-w-6xl md:mx-auto flex items-center gap-4 justify-between py-8 px-4">
     <div class="text-sm text-content">
-      <div class="flex gap-2">
-        <span class="font-bold">Under construciton:</span>
-        <a class="link" href="https://github.com/paularmstrong/paularmstrong.dev">Starter project</a
-        >
-        <a class="link" href="https://github.com/nemanjam/nemanjam.github.io#references"
-          >All references</a
-        >
+      <div class="flex flex-col gap-2 md:flex-row">
+        <label class="font-bold text-nowrap">Under construciton:</label>
+        <div class="flex flex-col gap-2 flex-wrap md:flex-row">
+          <a class="link" href="https://github.com/paularmstrong/paularmstrong.dev"
+            >Starter project</a
+          >
+          <a class="link" href="https://github.com/nemanjam/nemanjam.github.io#references"
+            >All references</a
+          >
+        </div>
       </div>
-      <div class="flex gap-2">
-        <span class="font-bold">Latest commit:</span>
-        <span>{commitInfo}</span>
+      <div class="flex flex-col gap-2 md:flex-row">
+        <label class="font-bold text-nowrap">Latest commit:</label>
+        <div class="flex flex-col gap-2 flex-wrap md:flex-row">
+          <span>{time}</span>
+          <span>{hash}</span>
+          <span>{message}</span>
+        </div>
       </div>
     </div>
 
-    <nav aria-label="Related content" class="grow select-none">
-      <ul class="flex flex-row flex-wrap gap-2 sm:justify-end">
-        <li>
-          <Button
-            href="https://github.com/nemanjam"
-            target="_blank"
-            rel="me noreferrer noopener"
-            title="@nemanjam on Github"
-          >
-            <Icon name="github" class="h-6 w-6 fill-current" />
-            {' '}Github
-          </Button>
-        </li>
-        <li>
-          <Button href="/feed.xml" title={`RSS feed for ${domain}`}>
-            <Icon name="rss" class="h-6 w-6 fill-current" />
-            {' '}RSS Feed
-          </Button>
-        </li>
-        <li>
-          <Button href="/feed.json" title={`JSON feed for ${domain}`}>
-            <Icon name="json" class="h-6 w-6 fill-current" />
-            {' '}JSON Feed
-          </Button>
-        </li>
-      </ul>
-    </nav>
+    <ul class="flex gap-2 flex-col md:flex-row">
+      <li>
+        <a
+          href="https://github.com/nemanjam"
+          target="_blank"
+          rel="me noreferrer noopener"
+          title="@nemanjam on Github"
+          class="link-nav flex items-center gap-2"
+        >
+          <Icon name="mdi:github" class="h-6 w-6 fill-current" />
+          <span>Github</span>
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://www.linkedin.com/in/nemanja-mitic"
+          target="_blank"
+          rel="me noreferrer noopener"
+          title="Nemanja on LinkedIn"
+          class="link-nav flex items-center gap-2"
+        >
+          <Icon name="mdi:linkedin" class="h-6 w-6 fill-current" />
+          <span>LinkedIn</span>
+        </a>
+      </li>
+      <li>
+        <a
+          href="/feed.xml"
+          title={`RSS feed for ${domain}`}
+          class="link-nav flex items-center gap-2"
+        >
+          <Icon name="mdi:rss" class="h-6 w-6 fill-current" />
+          <span>RSS Feed</span>
+        </a>
+      </li>
+    </ul>
   </div>
   <BackToTop client:only="solid-js" />
 </footer>