feat: view transitions and open graph updates

praveenpuglia · May 19, 2024 · 9f765af · 9f765af
1 parent 1df05c8
commit 9f765af
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 69 deletions.
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
@@ -8,4 +8,4 @@
     </div>
     {% include "footer.njk" %}
   </body>
-</html>
+</html>
diff --git a/src/_includes/head.njk b/src/_includes/head.njk
@@ -14,51 +14,65 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
-  <link rel="icon" href="/favicon.ico" type="image/png" />
-  <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" href="/favicon.ico" type="image/png"/>
+  <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="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-  <link rel="manifest" href="/manifest.webmanifest" />
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+/>
+  <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="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+  <link rel="manifest" href="/manifest.webmanifest"/>
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
-  <link href="/css/style.css" rel="stylesheet" />
-  {# SEO #} {% include "seo.njk" %}
-</head>
+/>
+  <link href="/css/style.css" rel="stylesheet"/>
+  {# SEO #}
+  {% include "seo.njk" %}
+
+  <style>
+    {% for post in collections.posts | reverse %}::view-transition-old(post-{{post.url.split('/')[2]}}) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-{{post.url.split('/')[2]}}) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  {% endfor %}
+  </style>
+</head>
diff --git a/src/_includes/post.njk b/src/_includes/post.njk
@@ -1,20 +1,20 @@
 ---
 layout: base
 ---
-
 <article class="single-post">
-  <h1 class="title">{{ title }}</h1>
-  <div class="post__metadata">
-    <time datetime="{{ page.date | htmlDateString }}">{{
-      page.date | readableDate
-    }}</time>
-    <ul class="post__metadata__tags">
-      {%- for tag in tags | filterTagList %}
-      <li class="post__metadata__tag">
-        {{ tag }}
-      </li>
-      {%- endfor %}
-    </ul>
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-{{ page.url.split('/')[2] }}">{{ title }}</h1>
+    <h4 class="subtitle">{{ description }}</h4>
+    <div class="post__metadata">
+      <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
+      <ul class="post__metadata__tags">
+        {%- for tag in tags | filterTagList %}
+          <li class="post__metadata__tag">
+            {{ tag }}
+          </li>
+        {%- endfor %}
+      </ul>
+    </div>
   </div>
 
   {{ content | safe }}

diff --git a/src/_includes/seo.njk b/src/_includes/seo.njk
@@ -1,25 +1,25 @@
-{% set pageTitle = title + ' - ' + siteMeta.name %}
-{% set pageDesc = siteMeta.shortDesc %}
+{% if title %}
+  {% set pageTitle = title + ' - ' + siteMeta.name %}
+{% else %}
+  {% set pageTitle = siteTitle %}
+{% endif %}
+{% set pageDesc = description or siteMeta.shortDesc %}
 {% set siteTitle = siteMeta.name %}
 {% set description = siteMeta.metaDesc %}
 {% set currentUrl = siteMeta.url + page.url %}
+
 {% if metaTitle %}
   {% set pageTitle = metaTitle %}
 {% endif %}
 {% if metaDesc %}
   {% set pageDesc = metaDesc %}
 {% endif %}
 
-{% if title %}
-  <title>{{ pageTitle }}</title>
-{% else %}
-  <title>{{ siteTitle }}</title>
-{% endif %}
-
 {% if canonical %}
   <link rel="canonical" href="{{ canonical }}"/>
 {% endif %}
 
+<title>{{ pageTitle }}</title>
 <meta property="og:site_name" content="{{ siteTitle }}"/>
 <meta property="og:title" content="{{ pageTitle }}"/>
 <meta property="og:type" content="website"/>

diff --git a/src/posts/index.njk b/src/posts/index.njk
@@ -5,23 +5,22 @@ eleventyNavigation:
   key: Home
   order: 1
 ---
-
 <h1 class="title">Posts</h1>
 {% set postslistCounter = collections.posts | length %}
 <ol reversed class="posts-list">
   {% for post in collections.posts | reverse %}
-  <li class="post">
-    <time class="post-date" datetime="{{ post.date | htmlDateString }}">{{
+    <li class="post">
+      <time class="post-date" datetime="{{ post.date | htmlDateString }}">{{
       post.date | readableDate
     }}</time>
-    <a href="{{ post.url | url }}" class="postlist-link">
-      <h3 class="post-title">
-        {% if post.data.title %}{{ post.data.title }}
-        {% else %}
-        <code>{{ post.url }}</code>
-        {% endif %}
-      </h3>
-    </a>
-  </li>
+      <a href="{{ post.url | url }}" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-{{post.url.split('/')[2]}}">
+          {% if post.data.title %}{{ post.data.title }}
+          {% else %}
+            <code>{{ post.url }}</code>
+          {% endif %}
+        </h4>
+      </a>
+    </li>
   {% endfor %}
-</ol>
+</ol>
diff --git a/src/posts/secret-page-dev-info-vite-react.md b/src/posts/secret-page-dev-info-vite-react.md
@@ -1,7 +1,8 @@
 ---
 layout: post
-title: A secret, deployment version page for developers
-tags: [typescript, react, vite, git]
+title: Don't struggle figuring out the deployed version and commit hash
+description: You should never have to ask your team what version is on prod with a dedicated dev info page.
+tags: [tools, vite, git]
 date: 2023-01-06
 socialImage: "/assets/images/2023/app-version-git-hash.avif"
 ---
@@ -85,6 +86,7 @@ export default defineConfig({
 ```
 
 ## Creating the Secret Page
+
 This was as simple as creating a route entry for a path like `__dev__` and rendering a simple component with the global constants.
 
 ```tsx
@@ -104,6 +106,3 @@ export default function DevInfo() {
 ```
 
 That's all. Now I can go to `/__dev__` route and access this information for any deployment of my app.
-
-
-
diff --git a/static/css/blog.css b/static/css/blog.css
@@ -2,4 +2,5 @@
   list-style: none;
   padding: 0;
   margin: 0;
+  margin-top: 3rem;
 }
diff --git a/static/css/post.css b/static/css/post.css
@@ -34,11 +34,19 @@
   font-weight: bold;
 }
 
+.single-post .subtitle {
+  color: var(--color-primary-lighter);
+  font-weight: normal;
+  margin-bottom: 2rem;
+}
+
 .postlist-link .post-title {
   margin-top: 0;
   margin-bottom: 2rem;
 }
 
+
+
 @media (min-width: 768px) {
   .post__metadata {
     flex-direction: row;

diff --git a/static/css/style.css b/static/css/style.css
@@ -22,3 +22,12 @@ body {
     font-size: 14px;
   }
 }
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/static/css/variables.css b/static/css/variables.css
@@ -2,5 +2,6 @@
   --color-link: #0070f3;
   --accent-color: #002999;
   --color-border-light: #eaeaea;
-  --color-primary: #14252E;
+  --color-primary: #14252e;
+  --color-primary-lighter: #767676;
 }