fix: 🐛 brand book

vanntile · Jan 15, 2024 · aade138 · aade138
1 parent 8586ea6
commit aade138
Show file tree

Hide file tree

Showing 4 changed files with 239 additions and 40 deletions.
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -6,10 +6,11 @@ import '../styles/global.css'
 interface Props {
   frontmatter: CollectionEntry<'blog'>['data']
   withNav?: boolean
+  withoutFooter?: boolean
   type?: string
 }
 
-const { frontmatter, withNav = true, type = 'website' } = Astro.props as Props
+const { frontmatter, withNav = true, withoutFooter = false, type = 'website' } = Astro.props as Props
 const { title, publishedAt, description, image, keywords } = frontmatter
 const url = new URL(Astro.url.pathname, Astro.site)
 
@@ -59,16 +60,19 @@ const socialMedia = await getCollection('icons')
   <body>
     {withNav && <Navigation />}
     <slot />
-    <footer>
-      Designed &amp; built by <span class="footer-highlight">vanntile</span> under <a
-        href="https://choosealicense.com/licenses/mit/"
-        target="_blank"
-        referrerpolicy="same-origin">MIT</a
-      >, content licensed under <a
-        href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
-        target="_blank"
-        referrerpolicy="same-origin">CC BY-NC-SA 4.0</a
-      >
-    </footer>
+    {
+      !withoutFooter && (
+        <footer>
+          Designed &amp; built by <span class="footer-highlight">vanntile</span> under{' '}
+          <a href="https://choosealicense.com/licenses/mit/" target="_blank" referrerpolicy="same-origin">
+            MIT
+          </a>
+          , content licensed under{' '}
+          <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" referrerpolicy="same-origin">
+            CC BY-NC-SA 4.0
+          </a>
+        </footer>
+      )
+    }
   </body>
 </html>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,7 +1,8 @@
 ---
+import { getImage } from 'astro:assets'
 import { getCollection } from 'astro:content'
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import { READABLE_FORMAT, blogCompareFn } from '../../lib/utils'
+import { READABLE_FORMAT, blogCompareFn, getImageURL } from '../../lib/utils'
 
 const props = {
   title: `vanntile's blog on software, career and thoughts on society`,
@@ -21,10 +22,17 @@ const props = {
   ],
 }
 
+// Set dynamic image path
+const { src, alt } = props.image
+const remoteImgURL = await getImageURL(src)
+const resultingImage = await getImage({ src: remoteImgURL, width: 1600, height: 800 })
+// Update frontmatter
+const frontmatter = { ...props, image: { src: resultingImage.src, alt } }
+
 const posts = await getCollection('blog')
 ---
 
-<BaseLayout frontmatter={props}>
+<BaseLayout frontmatter={frontmatter}>
   <main class="blog">
     <h1>Blog posts</h1>
     {

diff --git a/src/pages/design/brand-book.astro b/src/pages/design/brand-book.astro
@@ -1,5 +1,7 @@
 ---
+import { getImage, Image } from 'astro:assets'
 import BaseLayout from '../../layouts/BaseLayout.astro'
+import { getImageURL } from '../../lib/utils'
 
 const props = {
   title: 'vanntile - brand book',
@@ -8,47 +10,232 @@ const props = {
   image: { src: '/assets/deck/banner-deck.png', alt: 'Banner image for the brand book' },
   keywords: ['design', 'branding', 'graphic design', 'brand book', 'design deck'],
 }
+
+// Set dynamic image path
+const { src, alt } = props.image
+const remoteImgURL = await getImageURL(src)
+const resultingImage = await getImage({ src: remoteImgURL, width: 1600, height: 800 })
+// Update frontmatter
+const frontmatter = { ...props, image: { src: resultingImage.src, alt } }
+
+const imageSources: Record<string, string> = {}
+for (let i = 1; i < 25; i++) {
+  const key = `/assets/deck/page.${i}.webp`
+  imageSources[key] = await getImageURL(key)
+}
 ---
 
-<BaseLayout frontmatter={props} withNav={false}>
+<BaseLayout frontmatter={frontmatter} withNav={false} withoutFooter={true}>
   <main class="brand-book">
-    <div class="page"><img loading="eager" src="/assets/deck/page.1.webp" alt="vanntile brand deck cover page" /></div>
-    <div class="page"><img loading="eager" src="/assets/deck/page.2.webp" alt="brand deck project description" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.3.webp" alt="brand personality" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.4.webp" alt="logo" /></div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.5.webp" alt="logo with primary version color scheme" />
+      <Image
+        loading="eager"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.1.webp']}
+        alt="vanntile brand deck cover page"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="eager"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.2.webp']}
+        alt="brand deck project description"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.3.webp']}
+        alt="brand personality"
+      />
+    </div>
+    <div class="page">
+      <Image loading="lazy" width="2560" height="1440" src={imageSources['/assets/deck/page.4.webp']} alt="logo" />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.5.webp']}
+        alt="logo with primary version color scheme"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.6.webp']}
+        alt="logomark with primary version color scheme"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.7.webp']}
+        alt="logo with monochrome color scheme"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.8.webp']}
+        alt="logomark assembly from shapes"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.9.webp']}
+        alt="logo grid overlap"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.10.webp']}
+        alt="step by step visual refinement of logo"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.11.webp']}
+        alt="adaptability of the logo"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.12.webp']}
+        alt="logo construction: tyeface sizing"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.13.webp']}
+        alt="logo construction: spacing"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.14.webp']}
+        alt="logo construction: whitespace"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.15.webp']}
+        alt="all logo versions"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.16.webp']}
+        alt="brand color palette"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.17.webp']}
+        alt="brand typography"
+      />
+    </div>
+    <div class="page">
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.18.webp']}
+        alt="main shape pattern"
+      />
     </div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.6.webp" alt="logomark with primary version color scheme" />
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.19.webp']}
+        alt="secondary brand patterns"
+      />
     </div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.7.webp" alt="logo with monochrome color scheme" />
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.20.webp']}
+        alt="signs and expressions of the logo"
+      />
     </div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.8.webp" alt="logomark assembly from shapes" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.9.webp" alt="logo grid overlap" /></div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.10.webp" alt="step by step visual refinement of logo" />
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.21.webp']}
+        alt="iconography"
+      />
     </div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.11.webp" alt="adaptability of the logo" /></div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.12.webp" alt="logo construction: tyeface sizing" />
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.22.webp']}
+        alt="stationery usage of the brand elements"
+      />
     </div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.13.webp" alt="logo construction: spacing" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.14.webp" alt="logo construction: whitespace" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.15.webp" alt="all logo versions" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.16.webp" alt="brand color palette" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.17.webp" alt="brand typography" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.18.webp" alt="main shape pattern" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.19.webp" alt="secondary brand patterns" /></div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.20.webp" alt="signs and expressions of the logo" />
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.23.webp']}
+        alt="social media usage"
+      />
     </div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.21.webp" alt="iconography" /></div>
     <div class="page">
-      <img loading="lazy" src="/assets/deck/page.22.webp" alt="stationery usage of the brand elements" />
+      <Image
+        loading="lazy"
+        width="2560"
+        height="1440"
+        src={imageSources['/assets/deck/page.24.webp']}
+        alt="profile page mockup"
+      />
     </div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.23.webp" alt="social media usage" /></div>
-    <div class="page"><img loading="lazy" src="/assets/deck/page.24.webp" alt="profile page mockup" /></div>
   </main>
 </BaseLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1891,7 +1891,7 @@
       padding-right: 1rem;
       padding-left: 1rem;
       width: 100vw;
-      height: calc(100vh - 84px);
+      height: 100vh;
       overflow-y: scroll;
       scroll-snap-align: center;
       scroll-snap-type: y mandatory;