feat: add captioned image component (#440)

* feat: add captioned image component * feat: update images * feat: add header caption * fix: quotes in header
shuttle-hq · Oct 27, 2022 · 61987e2 · 61987e2
1 parent 4be3e5a
commit 61987e2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/www/_blog/2022-10-21-shuttle-beta.mdx b/www/_blog/2022-10-21-shuttle-beta.mdx
@@ -5,8 +5,10 @@ author: brokad
 tags: [rust, startup, beta, backend]
 thumb: shuttle-beta.png
 cover: shuttle-beta.png
+caption: '"An oil paining of an orange shuttle taking off with a container exploding in the background" - DALL·E 2'
 date: "2022-10-21T15:00:00"
 ---
+
 <TLDR>
     <p>Containers have improved development in a lot of ways, but over time they have also created a lot of problems. We believe it's time to take a bold view and rethink the way we do backend development.</p>
     <p>We're announcing [shuttle-next](https://shuttle.rs/beta): a next-generation backend development framework that has up to **100x smaller images** and **deploys end-to-end in under a second**.</p>
@@ -73,7 +75,7 @@ The really powerful thing about WASM is that it is a very common compilation tar
 
 ## A next-generation backend framework
 
-![Hello, shuttle!](/images/blog/beta-hello.png)
+<CaptionedImage src='/images/blog/beta-hello.png' alt='Hello world endpoint' caption='A simple "Hello, World!" endpoint.'/>
 
 When we launched [shuttle](https://shuttle.rs/) in alpha, back in March 2022, our purpose was to address the issues people face using containers when building and deploying web apps. So we created an open-source infrastructure-from-code platform with which you don’t need to write Containerfiles and orchestrate images, starting with support for Rust.
 
@@ -91,13 +93,13 @@ After all, a major culprit of these long build and deploy times in the real worl
 
 What we wanted to do, then, is move these heavy dependencies to a common runtime across services. So your tokio, hyper, sqlx and co (in the case of Rust), now all belong to a long-lived containerized process running persistently in the cloud. Whereas all your service logic, database and endpoint code build into lightweight WASM modules that are dynamically loaded in-place by this global persistent process. That way "building" means compiling a very lightweight codebase with a small dependency footprint. And "deploying" means calling upon the control plane of that long-lived process to replace service components without rolling out new images, containers or VMs.
 
-![Hello, shuttle!](/images/blog/beta-api.png)
+<CaptionedImage src='/images/blog/beta-api.png' alt='Get article endpoint' caption='A GET article endpoint that retrieves an article from the provisioned database.'/>
 
 With this approach, the component of virtualization that you end up deploying on a daily basis is much smaller than traditional VMs and containers. In a way, we can say this makes the virtualization layer more adapted to the specific needs of backend services running in the cloud. It's an optimized I/O surface between backend service components that change a lot (e.g. endpoint implementations) and their environing long-lived runtimes that don't (e.g. tokio/hyper/sqlx).
 
 This results in "images" that are effectively up to **100x smaller** because of the switch from container images to WASM binaries. And super fast to deploy too, from tens of minutes to **less than a second,** because you don't have to build and test a large codebase with its large userspace dependencies. You just need to build and ship the code you're writing/the changes you've made.
 
-![Hello, shuttle!](/images/blog/beta-next-deploy-demo.gif)
+<CaptionedImage src='/images/blog/beta-next-deploy-demo.gif' alt='Deployment demo' caption='Deploy your application in less than a second.'/>
 
 Our vision for this new way of doing backend development is shuttle-next: a next-generation backend framework with the fastest build, test and deployment times ever.
 

diff --git a/www/lib/posts.ts b/www/lib/posts.ts
@@ -15,6 +15,7 @@ export interface Post {
   readonly title: string;
   readonly date: string;
   readonly cover?: string;
+  readonly caption?: string;
   readonly coverAspectRatio?: string;
   readonly author?: string;
   readonly author_url?: string;
@@ -51,7 +52,6 @@ export function getSortedPosts(
     //Extracts contents of the MDX file
     const fileContents = fs.readFileSync(fullPath, "utf8");
     const { data, content } = matter(fileContents);
-
     const options: Intl.DateTimeFormatOptions = {
       month: "long",
       day: "numeric",

diff --git a/www/pages/blog/[year]/[month]/[day]/[slug].tsx b/www/pages/blog/[year]/[month]/[day]/[slug].tsx
@@ -201,6 +201,16 @@ const mdxComponents: MDXRemoteProps["components"] = {
       </div>
     );
   },
+  CaptionedImage: (props: any) => {
+    return (
+      <div className="grid grid-cols-1 justify-items-center">
+        <img src={props.src} alt={props.src}></img>
+        <span className="-mt-6 text-sm text-[#828282] dark:text-gray-300">
+          {props.caption}
+        </span>
+      </div>
+    );
+  },
   // blockquote(props) {
   //   return (
   //     <blockquote className="my-4 border-l-8 border-brand-orange1 bg-gray-200 p-4 text-left text-xl text-gray-500 dark:border-brand-orange2 dark:bg-gray-800 dark:text-gray-200">
@@ -301,17 +311,25 @@ export default function BlogPostPage(props: Props) {
           {/* Content */}
           <div className="flex-1 overflow-hidden">
             {(props.blog.thumb ?? props.blog.cover) && (
-              <div
-                className="relative mb-8 aspect-[4/3] overflow-auto rounded"
-                style={{
-                  aspectRatio: props.blog.coverAspectRatio,
-                }}
-              >
-                <Image
+              <div className="mb-8 grid grid-cols-1 justify-items-center">
+                {/* todo: fix this temporary hack to fix the caption */}
+                <img
+                  className="rounded"
                   src={"/images/blog/" + (props.blog.cover ?? props.blog.thumb)}
-                  layout="fill"
-                  objectFit="cover"
+                  alt="Cover image"
                 />
+                {/* <Image
+                    src={
+                      "/images/blog/" + (props.blog.cover ?? props.blog.thumb)
+                    }
+                    layout="fill"
+                    objectFit="contain"
+                  /> */}
+                {props.blog.caption && (
+                  <span className="mt-2 text-sm text-[#828282] dark:text-gray-300">
+                    {props.blog.caption}
+                  </span>
+                )}
               </div>
             )}
             <article

diff --git a/www/public/images/blog/beta-api.png b/www/public/images/blog/beta-api.png
diff --git a/www/public/images/blog/beta-hello.png b/www/public/images/blog/beta-hello.png