feat(www): beta blog updates (#434)

www/_blog/2022-10-21-shuttle-beta.mdx

@@ -1,16 +1,16 @@
 ---
-title: Announcing shuttle beta - replacing containers for backend development
+title: Replacing containers for backend development
 description: A next-generation backend development framework with the fastest build, test and deployment times ever.
-author: damien
+author: brokad
 tags: [rust, startup, beta, backend]
 thumb: shuttle-beta.png
 cover: shuttle-beta.png
 date: "2022-10-21T15:00:00"
 ---
-
-> 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.
->
-> 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**.
+<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>
+</TLDR>
 
 In web applications nowadays, you can sort any component somewhere in a broad spectrum from client-side to server-side.
 
@@ -57,8 +57,9 @@ So we need to restrict the scope of virtualization to something more specific to
 Where does that leave us then? We need a new take on virtualization. One that has, perhaps, simplified I/Os and is engineered for backend services. Thankfully, we don't have to invent most of that wheel: let's talk about WASI.
 
 ## WASM/WASI
-
-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">If WASM+WASI existed in 2008, we wouldn&#39;t have needed to created Docker. That&#39;s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let&#39;s hope WASI is up to the task! <a href="https://t.co/wnXQg4kwa4">https://t.co/wnXQg4kwa4</a></p>&mdash; Solomon Hykes (@solomonstre) <a href="https://twitter.com/solomonstre/status/1111004913222324225?ref_src=twsrc%5Etfw">March 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<div style={{display:'flex',justifyContent:'center'}}>
+<blockquote className="twitter-tweet"><p lang="en" dir="ltr">If WASM+WASI existed in 2008, we wouldn&#39;t have needed to created Docker. That&#39;s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let&#39;s hope WASI is up to the task! <a href="https://t.co/wnXQg4kwa4">https://t.co/wnXQg4kwa4</a></p>&mdash; Solomon Hykes (@solomonstre) <a href="https://twitter.com/solomonstre/status/1111004913222324225?ref_src=twsrc%5Etfw">March 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>
+</div>
 
 WebAssembly (abbreviated WASM) is an instruction set for extremely lightweight virtual machines. Its most common use is to speed up client-side interactivity. This is made possible as popular browsers have rolled out WASM runtimes a few years back.
 
@@ -76,7 +77,7 @@ The really powerful thing about WASM is that it is a very common compilation tar
 
 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.
 
-Since then, more than 1k people ⭐ed [shuttle repo](https://github.com/shuttle-hq/shuttle) and hundreds joined our discord community. shuttle as a platform has now seen more 2000 deployments and hundreds of users. And we received a ton of feedback from it all.
+Since then, more than 1k people starred the [shuttle repo](https://github.com/shuttle-hq/shuttle) and hundreds joined our discord community. shuttle as a platform has now seen more 2000 deployments and hundreds of users. And we received a ton of feedback from it all.
 
 What we quickly realized is that, while we managed to free users from having to work with containers, we completely failed to solve two core problems: long build and deploy times.
 

www/components/SignupForm.tsx

@@ -7,13 +7,14 @@ import {
   TWITTER_URL,
 } from "../lib/constants";
 import ExternalLink from "./ExternalLink";
-import Image from "next/image";
+
 const links = [
   { name: "💻 contributing to shuttle", href: CONTRIBUTING_URL },
   { name: "⭐️ starring the repository", href: GITHUB_URL },
   { name: "👾 joining our discord community", href: DISCORD_URL },
   { name: "🐦 following us on twitter", href: TWITTER_URL },
 ];
+
 export default function SignupForm() {
   const [state, handleSubmit] = useForm(FORMSPREE_ENDPOINT);
 

www/pages/blog/[year]/[month]/[day]/[slug].tsx

@@ -27,6 +27,7 @@ import { DocumentTextIcon } from "@heroicons/react/outline";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLinkedin, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import Copy from "../../../../../components/Copy";
+import Socials from "../../../../../components/Socials";
 
 export async function getStaticPaths() {
   const paths = getAllPostSlugs();
@@ -83,6 +84,16 @@ export async function getStaticProps({
   const nextPost = allPosts[currentIndex + 1] ?? null;
   const prevPost = allPosts[currentIndex - 1] ?? null;
 
+  const options: Intl.DateTimeFormatOptions = {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  };
+  const formattedDate = new Date(data.date).toLocaleDateString(
+    "en-IN",
+    options
+  );
+
   return {
     props: {
       prevPost,
@@ -94,6 +105,7 @@ export async function getStaticProps({
         ...data,
         toc: mdxTOC,
         readingTime,
+        date: formattedDate,
       } as Post,
     },
   };
@@ -161,14 +173,41 @@ const Pre = ({ children, ...props }: any) => {
 const mdxComponents: MDXRemoteProps["components"] = {
   a(props) {
     if (props.href.match(/^https?:\/\//)) {
-      return <ExternalLink {...props}></ExternalLink>;
+      return (
+        <ExternalLink
+          {...props}
+          className="text-brand-orange1 no-underline hover:text-brand-orange2"
+        ></ExternalLink>
+      );
     }
 
-    return <InternalLink {...(props as any)}></InternalLink>;
+    return (
+      <InternalLink
+        {...(props as any)}
+        className="text-brand-orange1 no-underline hover:text-brand-orange2"
+      ></InternalLink>
+    );
   },
   pre: (props: any) => {
     return <Pre {...props} />;
   },
+  TLDR: (props: any) => {
+    return (
+      <div className="border-l-8 border-brand-orange1 bg-gray-200 p-4 text-left text-xl text-gray-500  dark:bg-gray-800 dark:text-gray-200">
+        <span className="text-md rounded bg-brand-orange1 px-[10px] py-[2px] font-extrabold text-slate-100  dark:text-dark-800">
+          TLDR
+        </span>
+        {props.children}
+      </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">
+  //       {props.children}
+  //     </blockquote>
+  //   );
+  // },
 };
 
 interface Props {
@@ -324,6 +363,7 @@ export default function BlogPostPage(props: Props) {
                 )}
               </div>
             </div>
+            <Socials />
           </div>
           {/* Sidebar */}
           <div className="flex-none space-y-8 lg:w-64">