Merge pull request #1 from alireza-ahmadi/switch-to-inter

Redesign
alireza-ahmadi · Aug 8, 2024 · 60885f6 · 60885f6
2 parents 717f3d7 + a829fd4
commit 60885f6
Show file tree

Hide file tree

Showing 32 changed files with 1,163 additions and 168 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^5.1.0",
-    "@fontsource/space-mono": "^5.0.17",
+    "@tailwindcss/typography": "^0.5.14",
     "astro": "^4.13.1",
+    "astro-seo": "^0.8.4",
+    "date-fns": "^3.6.0",
     "tailwindcss": "^3.4.8"
   }
 }
diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
diff --git a/public/apple-icon.png b/public/apple-icon.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/fonts/inter-variable.woff2 b/public/fonts/inter-variable.woff2
diff --git a/public/og.png b/public/og.png
diff --git a/src/components/intro-link.astro b/src/components/intro-link.astro
@@ -0,0 +1,31 @@
+---
+interface Props {
+  href: string;
+  caption: string;
+  captionRotation?: 0 | 1 | 2 | -1 | -2;
+}
+
+const { href, caption, captionRotation = 0 } = Astro.props;
+---
+
+<a
+  class:list={[
+    'font-medium relative cursor-pointer underline underline-offset-4 decoration-2',
+    `after:content-[attr(data-caption)]`,
+    'after:absolute after:px-2 after:py-1 after:left-1/2 after:top-1/2 after:transform after:-translate-x-1/2 after:-translate-y-1/2',
+    'after:opacity-0 after:transition-all after:rounded-lg after:cursor-pointer',
+    'after:bg-thistle-200 after:drop-shadow-lg',
+    'after:font-semibold after:text-thistle-900',
+    'after:scale-50 after:z-50',
+    'hover:after:opacity-100 hover:after:scale-110',
+    {
+      'after:-rotate-2': captionRotation === -2,
+      'after:-rotate-1': captionRotation === -1,
+      'after:rotate-1': captionRotation === 1,
+      'after:rotate-2': captionRotation === 2,
+    },
+  ]}
+  data-caption={caption}
+  href={href}
+  target="_blank"><slot /></a
+>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -0,0 +1,15 @@
+import { defineCollection, reference, z } from 'astro:content';
+
+const noteCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    publishDate: z.date(),
+    isDraft: z.boolean(),
+    shortDesc: z.string().optional(),
+  }),
+});
+
+export const collections = {
+  note: noteCollection,
+};
diff --git a/src/layouts/container-layout.astro b/src/layouts/container-layout.astro
@@ -0,0 +1,110 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+
+interface Props {
+  isInternalPage?: boolean;
+}
+
+const { isInternalPage = false } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta name="generator" content={Astro.generator} />
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/android-icon-192x192.png"
+    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#ecf4f4" />
+    <!-- Load Inter font family -->
+    <style is:global>
+      @font-face {
+        font-family: 'Inter Variable';
+        font-display: swap;
+        font-weight: 100 900;
+        src: url(/fonts/inter-variable.woff2) format('woff2-variations');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+          U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+    </style>
+    <meta http-equiv="Content-Language" content="en" />
+    <slot name="head" />
+    <ViewTransitions />
+  </head>
+
+  <body
+    class="bg-aqua-haze-100 text-bay-of-many-950 selection:bg-thistle-900 selection:text-thistle-200 text-body lowercase min-h-screen"
+  >
+    <main
+      class="font-body w-full box-border p-6 sm:max-w-xl md:py-16 antialiased mx-auto"
+    >
+      <a href="/" class="transform block active:scale-90 transition-all">
+        <h1
+          class:list={[
+            'font-medium mb-4 font-heading flex items-center gap-3',
+            {
+              'text-3xl': !isInternalPage,
+              'text-2xl': isInternalPage,
+            },
+          ]}
+          transition:name="logo"
+        >
+          <span
+            hidden={!isInternalPage}
+            class="bg-thistle-300 text-thistle-900 text-base font-bold px-2 py-1.5 rounded-xl"
+            transition:name="go-to-homepage">{'<-'} Home</span
+          >
+          Alireza Ahmadi
+        </h1>
+      </a>
+      <slot />
+      <footer>
+        <p class="text-sm text-bay-of-many-950 mt-16 py-8">
+          &copy; {new Date().getFullYear()} Alireza Ahmadi. Some rights reserved.
+        </p>
+      </footer>
+    </main>
+  </body>
+</html>