feat(HTD-53): add single post hero component (#77)

* feat(HTD-53): add single post hero component - replace header images path * feat(HTD-53): rwd adjustments * feat(HTD-53): enable blur images
httptoolkit · Mar 12, 2024 · 1fa48f1 · 1fa48f1
1 parent 007793f
commit 1fa48f1
Show file tree

Hide file tree

Showing 72 changed files with 278 additions and 103 deletions.
diff --git a/next.config.js b/next.config.js
@@ -16,6 +16,7 @@ const nextConfig = {
     nextImageExportOptimizer_quality: '80',
     nextImageExportOptimizer_storePicturesInWEBP: 'true',
     nextImageExportOptimizer_exportFolderName: 'http-toolkit-assets',
+    nextImageExportOptimizer_generateAndUseBlurImages: 'true',
   },
   experimental: {
     optimizePackageImports: ['@phosphor-icons/react'],

diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/elements/container';
-import { Heading } from '@/components/elements/heading';
+import { SinglePostHero } from '@/components/sections/blog/single-post-hero';
 import { getPostBySlug, getAllPostsMeta } from '@/lib/mdx';
 
 export async function generateStaticParams() {
@@ -20,8 +20,9 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
 
   return (
     <Container>
-      <Heading>{post.title}</Heading>
-      <div>{post.content}</div>
+      <SinglePostHero post={post} />
+
+      {/* <div>{post.content}</div> */}
     </Container>
   );
 }
diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx
diff --git a/src/components/elements/icon/index.ts b/src/components/elements/icon/index.ts
@@ -11,6 +11,7 @@ import {
   AndroidLogo,
   ArrowRight,
   CaretRight,
+  CaretLeft,
   GithubLogo,
   Globe,
   SealCheck,
@@ -62,6 +63,7 @@ export {
   TwitterX,
   Check,
   CaretRight,
+  CaretLeft,
   GithubLogo,
   CaretUp,
   CursorClick,

diff --git a/src/components/layout/header/header.styles.ts b/src/components/layout/header/header.styles.ts
@@ -10,7 +10,7 @@ export const StyledHeader = styled.header`
 export const StyledLogoWrapper = styled.div`
   & svg {
     fill: currentColor;
-    width: fit-content;
+    width: auto;
     height: 26px;
   }
 `;

diff --git a/src/components/sections/blog/overview-hero/index.tsx b/src/components/sections/blog/overview-hero/index.tsx
@@ -8,6 +8,7 @@ import {
 import { Badge } from '@/components/elements/badge';
 import { Heading } from '@/components/elements/heading';
 import { Image } from '@/components/elements/image';
+import { Link } from '@/components/elements/link';
 import Stack from '@/components/elements/stack';
 import { Text } from '@/components/elements/text';
 import { formatDateLongMonthYear } from '@/lib/utils/formatMonthYearDate';
@@ -29,34 +30,36 @@ export const OverviewHero = ({ featuredPost }: OverviewHeroProps) => {
       </StyledHeadingWrapper>
 
       {featuredPost && (
-        <StyledFeaturePost>
-          <StyledPostImageWrapper>
-            <Image
-              width={540}
-              height={303}
-              src={`images/${featuredPost.coverImage}`}
-              alt={featuredPost.title}
-              priority
-            />
-          </StyledPostImageWrapper>
-          <StyledPostDetails>
-            <Stack $gapxl="16px">
-              <Stack $direction="row">
-                {featuredPost.tags.length && featuredPost.tags.map((tag: string) => <Badge>{tag}</Badge>)}
+        <Link href={`/blog/${featuredPost.slug}`}>
+          <StyledFeaturePost>
+            <StyledPostImageWrapper>
+              <Image
+                width={540}
+                height={303}
+                src={`images/${featuredPost.coverImage}`}
+                alt={featuredPost.title}
+                priority
+              />
+            </StyledPostImageWrapper>
+            <StyledPostDetails>
+              <Stack $gapxl="16px">
+                <Stack $direction="row">
+                  {featuredPost.tags.length && featuredPost.tags.map((tag: string) => <Badge>{tag}</Badge>)}
+                </Stack>
+                <Heading fontSize="m" as="h2" fontWeight="normal" color="white">
+                  {featuredPost.title}
+                </Heading>
+                <Text fontSize="l" color="darkGrey">
+                  Theres been a lot of concern recently about the Web Environment Integrity proposal, developed by a
+                  selection of authors from Google, and apparently being prototyped in Chromium.
+                </Text>
               </Stack>
-              <Heading fontSize="m" as="h3" fontWeight="normal" color="white">
-                {featuredPost.title}
-              </Heading>
-              <Text fontSize="l" color="darkGrey">
-                Theres been a lot of concern recently about the Web Environment Integrity proposal, developed by a
-                selection of authors from Google, and apparently being prototyped in Chromium.
+              <Text as="span" fontSize="m" color="darkGrey">
+                {formatteDate}
               </Text>
-            </Stack>
-            <Text as="span" fontSize="m" color="darkGrey">
-              {formatteDate}
-            </Text>
-          </StyledPostDetails>
-        </StyledFeaturePost>
+            </StyledPostDetails>
+          </StyledFeaturePost>
+        </Link>
       )}
     </>
   );

diff --git a/src/components/sections/blog/single-post-hero/index.tsx b/src/components/sections/blog/single-post-hero/index.tsx
@@ -0,0 +1,67 @@
+import {
+  StyledGoBack,
+  StyledPostMeta,
+  StyledSinglePost,
+  StyledSinglePostDetails,
+  StyledSinglePostImageWrapper,
+  StyledTags,
+} from './single-post-hero.styles';
+
+import { Badge } from '@/components/elements/badge';
+import { Heading } from '@/components/elements/heading';
+import { CaretLeft } from '@/components/elements/icon';
+import { Image } from '@/components/elements/image';
+import { Link } from '@/components/elements/link';
+import Stack from '@/components/elements/stack';
+import { Text } from '@/components/elements/text';
+import { formatDateLongMonthYear } from '@/lib/utils/formatMonthYearDate';
+
+interface SinglePostHeroProps {
+  post: Post;
+}
+
+const GoBack = ({ $displayOn }: { $displayOn: 'desktop' | 'mobile' }) => {
+  return (
+    <StyledGoBack $displayOn={$displayOn}>
+      <Link href="/blog">
+        <CaretLeft weight="fill" />
+        <Text as="label" fontSize="m" fontWeight="bold">
+          GO BACK TO BLOG
+        </Text>
+      </Link>
+    </StyledGoBack>
+  );
+};
+
+export const SinglePostHero = ({ post }: SinglePostHeroProps) => {
+  const formatteDate = formatDateLongMonthYear(post.date);
+
+  return (
+    <StyledSinglePost>
+      <StyledSinglePostDetails>
+        <GoBack $displayOn="desktop" />
+        <Stack $gap="16px">
+          <StyledTags>{post.tags.length && post.tags.map((tag: string) => <Badge>{tag}</Badge>)}</StyledTags>
+          <Heading fontSize="l" fontWeight="normal" color="white">
+            {post.title}
+          </Heading>
+        </Stack>
+        <StyledPostMeta>
+          <Text as="span" fontSize="l" color="darkGrey">
+            {formatteDate}
+          </Text>
+          {post.author && (
+            <Text as="span" fontSize="l" color="darkGrey">
+              Author: {post.author.name}
+            </Text>
+          )}
+        </StyledPostMeta>
+      </StyledSinglePostDetails>
+
+      <StyledSinglePostImageWrapper>
+        <GoBack $displayOn="mobile" />
+        <Image width={607} height={296} src={`images/${post.coverImage}`} alt={post.title} priority />
+      </StyledSinglePostImageWrapper>
+    </StyledSinglePost>
+  );
+};
diff --git a/src/components/sections/blog/single-post-hero/single-post-hero.styles.ts b/src/components/sections/blog/single-post-hero/single-post-hero.styles.ts
@@ -0,0 +1,98 @@
+'use client';
+
+import { css, screens, styled } from '@/styles';
+
+export const StyledSinglePost = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+  border-radius: 12px;
+  padding: 16px;
+  margin-top: 32px;
+  background-color: ${({ theme }) => theme.colors.inkBlack};
+  box-shadow:
+    0 0 0 1px ${({ theme }) => theme.colors.button.border},
+    0 0 8px 0 ${({ theme }) => theme.colors.shadowDefault};
+  margin-bottom: 24px;
+
+  @media (min-width: ${screens['lg']}) {
+    padding: 32px;
+    align-items: normal;
+    margin-top: 64px;
+    flex-direction: row;
+    gap: 64px;
+  }
+`;
+
+export const StyledGoBack = styled.div<{ $displayOn: 'mobile' | 'desktop' }>`
+  display: none;
+
+  & a {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  ${({ $displayOn }) =>
+    $displayOn === 'desktop' &&
+    css`
+      @media (min-width: ${screens['lg']}) {
+        display: block;
+      }
+    `}
+
+  ${({ $displayOn }) =>
+    $displayOn === 'mobile' &&
+    css`
+      @media (max-width: ${screens['lg']}) {
+        display: block;
+        margin-top: 16px;
+        margin-bottom: 32px;
+      }
+    `}
+`;
+
+export const StyledPostMeta = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const StyledSinglePostImageWrapper = styled.div`
+  width: 100%;
+
+  & img {
+    border-radius: 8px;
+    overflow: hidden;
+    max-height: 174px;
+
+    @media (min-width: ${screens['lg']}) {
+      max-height: fit-content;
+    }
+  }
+
+  @media (min-width: ${screens['lg']}) {
+    max-width: 607px;
+    min-width: 607px;
+  }
+`;
+
+export const StyledSinglePostDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+`;
+
+export const StyledTags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  @media (min-width: ${screens['lg']}) {
+    display: none;
+    visibility: hidden;
+  }
+`;
diff --git a/src/content/posts/5-big-features-of-typescript-3.7.md b/src/content/posts/5-big-features-of-typescript-3.7.md
@@ -1,7 +1,7 @@
 ---
 title: 'The 5 Big Features of TypeScript 3.7 and How to Use Them'
 date: '2019-09-12T12:00'
-cover_image: './header-images/code.jpg'
+cover_image: 'header-images/code.jpg'
 twitterUrl: https://twitter.com/HttpToolkit/status/1172151468721344517
 redditUrl: https://www.reddit.com/r/programming/comments/d38rp9/typescript_37_the_5_biggest_features_how_to_use/
 hackerNewsUrl: https://news.ycombinator.com/item?id=20956450

diff --git a/src/content/posts/android-11-trust-ca-certificates.md b/src/content/posts/android-11-trust-ca-certificates.md
@@ -1,7 +1,7 @@
 ---
 title: 'Android 11 tightens restrictions on CA certificates'
 date: '2020-09-10T16:30'
-cover_image: './header-images/locks.jpg'
+cover_image: 'header-images/locks.jpg'
 tags: android, interception, tls, certificates
 ---
 

diff --git a/src/content/posts/android-14-breaks-system-certificate-installation.md b/src/content/posts/android-14-breaks-system-certificate-installation.md
@@ -1,7 +1,7 @@
 ---
 title: "Android 14 blocks modification of system certificates, even as root"
 date: '2023-09-05T14:00'
-cover_image: './header-images/broken-android-phone.jpg'
+cover_image: 'header-images/broken-android-phone.jpg'
 tags: android, interception, tls, certificates
 ---
 

diff --git a/src/content/posts/android-14-install-system-ca-certificate.md b/src/content/posts/android-14-install-system-ca-certificate.md
@@ -1,7 +1,7 @@
 ---
 title: "New ways to inject system CA certificates in Android 14"
 date: '2023-09-21T12:00'
-cover_image: './header-images/android-phone.jpg'
+cover_image: 'header-images/android-phone.jpg'
 tags: android, interception, tls, certificates
 ---
 

diff --git a/src/content/posts/android-reverse-engineering.md b/src/content/posts/android-reverse-engineering.md
@@ -1,7 +1,7 @@
 ---
 title: 'Reverse engineering & modifying Android apps with JADX & Frida'
 date: '2021-11-22T12:30'
-cover_image: './header-images/frida.jpg'
+cover_image: 'header-images/frida.jpg'
 tags: android, frida, jadx, interception
 ---
 

diff --git a/src/content/posts/announcing-terminal-interception.md b/src/content/posts/announcing-terminal-interception.md
@@ -1,7 +1,7 @@
 ---
 title: 'One-click HTTP debugging for any CLI tool'
 date: '2019-01-22T14:50'
-cover_image: './header-images/shell.jpg'
+cover_image: 'header-images/shell.jpg'
 draft: false
 tags: cli, interception
 ---

diff --git a/src/content/posts/automatic-npm-publish-gha.md b/src/content/posts/automatic-npm-publish-gha.md
@@ -1,7 +1,7 @@
 ---
 title: Automatic npm publishing, with GitHub Actions & npm granular tokens
 date: '2023-03-22T10:00'
-cover_image: './header-images/postage-stamps.jpg'
+cover_image: 'header-images/postage-stamps.jpg'
 tags: node.js, javascript
 ---
 

diff --git a/src/content/posts/bundling-remote-scripts-with-webpack.md b/src/content/posts/bundling-remote-scripts-with-webpack.md
@@ -1,7 +1,7 @@
 ---
 title: 'Bundling Remote Scripts with Webpack'
 date: '2019-02-07T16:45'
-cover_image: './header-images/boxes.jpg'
+cover_image: 'header-images/boxes.jpg'
 draft: false
 tags: webpack, javascript
 ---

diff --git a/src/content/posts/bunny-cdn-caching-vulnerability.md b/src/content/posts/bunny-cdn-caching-vulnerability.md
@@ -1,7 +1,7 @@
 ---
 title: 'Leaking secrets through caching with Bunny CDN'
 date: '2023-06-20T11:30'
-cover_image: './header-images/lockers.jpg'
+cover_image: 'header-images/lockers.jpg'
 tags: security, caching
 ---
 

diff --git a/src/content/posts/cache-your-cors.md b/src/content/posts/cache-your-cors.md
@@ -1,7 +1,7 @@
 ---
 title: Cache your CORS, for performance & profit
 date: '2021-02-17T17:00'
-cover_image: './header-images/library.jpg'
+cover_image: 'header-images/library.jpg'
 tags: cors, caching, performance
 ---
 

diff --git a/src/content/posts/chrome-79-doesnt-show-cors-preflight.md b/src/content/posts/chrome-79-doesnt-show-cors-preflight.md
@@ -1,7 +1,7 @@
 ---
 title: "Chrome 79+ no longer shows preflight CORS requests"
 date: '2020-02-13T16:25'
-cover_image: './header-images/datacenter.jpg'
+cover_image: 'header-images/datacenter.jpg'
 draft: false
 twitterUrl: https://twitter.com/HttpToolkit/status/1227974900561981440
 hackerNewsUrl: https://news.ycombinator.com/item?id=22319054