footer in progress

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

Hide file tree

Showing 4 changed files with 54 additions and 59 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -20,9 +20,10 @@ const remarkPlugins = [remarkReadingTime];
 /** @type {import('@types/astro').AstroUserConfig} */
 export default defineConfig({
   site: SITE_URL,
-  // trailingSlash: 'always', // default 'ignore'
+  trailingSlash: 'ignore', // default
   compressHTML: true,
   server: { port: 3000 },
+  devToolbar: { enabled: false },
   integrations: [
     solid({
       include: ['src/**'],

diff --git a/docs/todo3.md b/docs/todo3.md
@@ -136,9 +136,10 @@ scroll broken in chrome, remove smooth css
 hashnode h1, h2, p...
 tailwindui gradients, linkedin blog
 move component to my-prose class_
-style tags
+    style tags
+style categories and tags list pages
 procitaj transition docs
-navbar buttons to links
+    navbar buttons to links
 add astro and fastapi in resume
 -----
     close mobile header on md
@@ -150,7 +151,7 @@ umotaj sve u prose u Base layout, pa samo nekoliko slotova no-prose
 add colors and gradients to h1 maybe
 fix colors for all text
     fix json.parse for theme
-implement project list html
+finish project list html
     extract pagination into layout
 remove redundant section and article tags from layouts
     extract Metadata type_ and fix Base layout props
@@ -162,16 +163,15 @@ keep all breakpoints in sync, prose-lg, h1 sizes, py layout
 add class_ variance authority
 fix env files for docker
 docker build local je x86, more qemu, buildx
-links colors and styles
+links colors and styles, uncomment visited later
     PostItem - for constant card height, line-clamp-x on description based on number of chars in title
 text hover transition
 limit to prose-lg 18px
 theme toggle icon sun
-fix MorePosts components
+fix MorePosts components, create cards
 fix Footer
 fix transform in Post schema
 extract widths and sizes for images in reusable object, for thumbnails, in constants/images
-pass slug from frontmatter, dont calc
 
 slug se explicitno prosledjuje samo u getStaticPaths koje nemaju paginate (bez [...page].astro)
 export async function getStaticPaths() {
@@ -184,7 +184,9 @@ export async function getStaticPaths() {
 
   return paths;
 }
-slug nepotreban u schemi, i calc od datuma, glupost
+    slug nepotreban u schemi, i calc od datuma, glupost
 use single Post or PostCollection type_ everywhere
 rewrite Pagination component
+find footer examples
+social links component for footer, array of objects and map
 ```
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -13,58 +13,50 @@ const domain = trimHttpProtocol(SITE_URL);
 const commitInfo = getLatestCommitInfoAsString();
 ---
 
-<footer class="w-screen border-t border-base-300 bg-base-200 pt-8 transition-colors duration-500">
-  <div class="mx-4 flex max-w-4xl flex-col gap-10 md:mx-auto">
-    <div class="mb-4 flex flex-row flex-wrap items-center justify-between gap-y-4">
-      <div class="text-xs text-blue-800 transition-colors duration-500 dark:text-blue-200">
-        <p>Under construciton.</p>
-        <p>
-          Starter project: <a href="https://github.com/paularmstrong/paularmstrong.dev"
-            >https://github.com/paularmstrong/paularmstrong.dev</a
-          >
-        </p>
-        <p>
-          All references: <a href="https://github.com/nemanjam/nemanjam.github.io#references"
-            >https://github.com/nemanjam/nemanjam.github.io#references</a
-          >
-        </p>
-        <p>{commitInfo}</p>
+<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="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>
-      <div class="flex grow flex-row justify-end">
-        <Button href="#top">
-          <Icon name="back-to-top" class="h-6 w-6 fill-current" />
-          {' '}Back to top
-        </Button>
+      <div class="flex gap-2">
+        <span class="font-bold">Latest commit:</span>
+        <span>{commitInfo}</span>
       </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>
     </div>
-    <BackToTop client:only="solid-js" />
+
+    <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>
   </div>
+  <BackToTop client:only="solid-js" />
 </footer>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -21,7 +21,7 @@ const titleTag = title ? `${title} • ${SITE_TITLE}` : SITE_TITLE;
 const headMetadata = { title: titleTag, description, image };
 ---
 
-<html class="scroll-pt-8 scroll-smooth md:scroll-pt-16" lang="en">
+<html lang="en">
   <BaseHead metadata={headMetadata} />
   <body
     class={clsx(