Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat(www): beta blog updates #434

Merged
merged 9 commits into from
Oct 27, 2022
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions www/_blog/2022-10-21-shuttle-beta.mdx
Original file line number Diff line number Diff line change
@@ -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.

Expand Down Expand Up @@ -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.

Expand All @@ -74,7 +75,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.

Expand Down
3 changes: 2 additions & 1 deletion www/components/SignupForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
44 changes: 42 additions & 2 deletions www/pages/blog/[year]/[month]/[day]/[slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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,
Expand All @@ -94,6 +105,7 @@ export async function getStaticProps({
...data,
toc: mdxTOC,
readingTime,
date: formattedDate,
} as Post,
},
};
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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">
Expand Down