DEV Community: roze 🌹

What is a Tech Cooperative - A Short Introduction

roze 🌹 — Wed, 30 Aug 2023 17:41:44 +0000

The most tragic form of loss isn’t the loss of security; it’s the loss of the capacity to imagine that things could be different.

— Ernest Bloch, The Principle of Hope

What's a Cooperative?

You might be familiar with corporations that are owned by shareholders. Workers of that company may possibly own some shares but not nearly enough compared to the CEO and other executives even if they work just as much. They do not have voting shares to actually participate in executive decisions for the company they work for. In this context, it is not truly worker-owned.

A cooperative (co-op) deviates from the traditional model in two ways:

Owned by workers of the business
Controlled democratically by the workers

The degree to which these conditions are met do vary and there isn't a single correct way to make a co-op.

Generally though, in a worker co-op, the workers own the business equally. This often means everyone has a say in how the business is run and profit is shared in an equitable way. This does not mean that voting rights are always uniform nor does it mean everyone gets the same amount of money — salaries could be different and the number of hours worked could be different so there may be a collective agreement as to how profit is distributed.

If Apple were organized as a cooperative, all workers would earn $400K yearly on top of their salary.

Essentially, while traditional businesses scale vertically and form stricter hierarchies, cooperative businesses typically scale horizontally and remain democratic. Leaders work for the workers rather than the reverse.

How Do Cooperatives Make Decisions?

If every worker owns the business, how then are decisions made? It would certainly be cumbersome to vote on every company decision especially as it grows larger.

Co-ops are flexible though and each one may practice different types of methods. Smaller co-ops may have workers making decisions together through frameworks like consensus-decision making. Other co-ops may see benefits in electing leaders including electing the CEO with term limits and veto power.

The Mondragon Corporation in Spain is the world's largest co-op. It is a federation of worker-owned cooperatives with over 80,000 workers across multiple industries. Workers elect a governing council who then elect the CEO. It's been around since 1956.

Why Don't More Cooperatives Exist in the US?

Cooperatives are a popular business model in many other countries, with some famous examples like Mondragon in Spain, John Lewis Partnership in the UK, and Coop in Italy which have been around for a long time. However, in the United States, cooperatives are not as widespread.

Several reasons contribute to this: First, there is limited guidance available on how to start a co-op because the US has traditionally favored investor-owned businesses over cooperatives. The cooperatives that do exist in the US are primarily in the agricultural industry. Second, the legal and regulatory environment in the US has not always been supportive of cooperative businesses. Finally, the tech industry's startup culture, which is dominant in the US, tends to prioritize fast growth and exit strategies over long-term sustainability and community-focused values that many cooperatives hold.

Despite these challenges, there are still successful cooperatives operating in the US, including some in the tech industry. Check out this repository for a list of some tech cooperatives

Why Do Tech Need Cooperatives?

A software engineer may be content with their six-figure salary today, but consider how the software that they write (which the company uses to sell for profit) earns millions. Yet the millions of dollars are not distributed to the ones who created the software but is instead given to the executives of the company. The engineer probably is only given a "bonus" at the end of the year for their hard work. Given that the average engineer makes more than the average American, this is seen as equitable. This doesn’t change the fact that the model as it exists today is opposed to democracy.

If Facebook were a cooperative, would Cambridge Analytica have been able to use the data of 87 million users without their consent? As workers control the company, they would have a say in the ethics of the company rather than a small few executives.

While the traditional business model may seem equitable for individual engineers, it ultimately concentrates wealth and power in the hands of a few executives. By contrast, cooperatives are democratic, worker-owned businesses that give employees a say in the company's decisions and distribute profits more equitably. This proven and viable alternative has already shown success in other parts of the world. With the rise of tech co-ops and their potential for forming alliances and spreading to other industries, the working class can benefit from a more horizontal and cooperative business model. By embracing cooperatives, the US tech industry can help build a more just and sustainable future.

Rebuilding my Portfolio with Next, MDX, and Contentlayer

roze 🌹 — Wed, 22 Mar 2023 21:19:49 +0000

Why I Stopped Using Ghost

I liked the idea of opening up my iPad, sipping on a caramel latte in an overly-hipster Brooklyn cafe, writing a new tech post. Ghost CMS was my way to do that (see my setup). It was, however, expensive ever since Heroku broke up with us and I moved onto Digital Ocean which is $6 month. But also, sometimes Ghost would crash and I didn't want to spend too long debugging when redeploying quickly fixed whatever was broken.

Ultimately, crashes and money didn't warrant a ridiculous aesthetic of writing in a cafe because I never actually did it. Caramel lattes are also expensive.

And I can also use Obsidian, my markdown notetaker, and then just copy that to my blog, achieving all of this for free.

Technologies

Next JS -- my favorite full stack framework
Tailwind CSS -- because I don't know how to do CSS otherwise
MDX -- to use React within my markdown (probably won't use much JSX, but hey why not at least have it)
Contentlayer -- transform the mdx posts into type-safe json data
Vercel -- deployment

Getting Started

I've started using the T3 CLI to make my apps these days because the stack generally is one I enjoy and I love the cohesion together.

npm create t3-app@latest

Only select Tailwind, we don't need the other packages

After installation, we can clear up the homepage

import { type NextPage } from 'next';
import Head from 'next/head';
const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Create T3 App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] pt-20">
        <h1 className="text-7xl font-bold text-white">My Cool Blog</h1>
      </main>
    </>
  );
};

export default Home;

Configuring MDX

To be able to write .mdx files, we'll need a few plugins

@next/mdx -- to use with Next
@mdx-js/loader -- required package of @next/mdx
@mdx-js/react -- required package of @next/mdx
gray-matter -- to ignore frontmatter from rendering
rehype-autolink-headings -- allows to add links to headings with ids on there already
rehype-slug -- allows to add links to headings for documents that don't already have ids
rehype-pretty-code -- makes code pretty with syntax highlighting, line numbers, etc
remark-frontmatter -- plugin to support frontmatter
shiki -- coding themes we can use for rendering code snippets

yarn add @next/mdx @mdx-js/loader @mdx-js/react gray-matter rehype-autolink-headings rehype-slug rehype-pretty-code remark-frontmatter shiki

Setting Up Contentlayer

Contentlayer makes it super easy to grab our mdx blog posts in a type-safe way.

First install it and its associated Next js plugin

yarn add contentlayer next-contentlayer

Modify your next.config.mjs

// next.config.mjs

import { withContentlayer } from 'next-contentlayer';

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure pageExtensions to include md and mdx
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true,
  swcMinify: true,
};

// Merge MDX config with Next.js config
export default withContentlayer(nextConfig);

Modify your tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "contentlayer/generated": ["./.contentlayer/generated"]
    }
  },
  "include": ["next-env.d.ts", "**/*.tsx", "**/*.ts", ".contentlayer/generated"]
}

Create a file contentlayer.config.ts and we will do three things

Define the schema of our Post and where the content lives
Setup our remark and rehype plugins

import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrettyCode from 'rehype-pretty-code';
import rehypeSlug from 'rehype-slug';
import remarkFrontmatter from 'remark-frontmatter';

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      description: 'The title of the post',
      required: true,
    },
    excerpt: {
      type: 'string',
      description: 'The excerpt of the post',
      required: true,
    },
    date: {
      type: 'string',
      description: 'The date of the post',
      required: true,
    },
    coverImage: {
      type: 'string',
      description: 'The cover image of the post',
      required: false,
    },
    ogImage: {
      type: 'string',
      description: 'The og cover image of the post',
      required: false,
    },
  },
  computedFields: {
    url: {
      type: 'string',
      resolve: (post) => `/blog/${post._raw.flattenedPath}`,
    },
    slug: {
      type: 'string',
      resolve: (post) => post._raw.flattenedPath,
    },
  },
}));

const prettyCodeOptions = {
  theme: 'material-theme-palenight',

  onVisitLine(node: { children: string | unknown[] }) {
    if (node.children.length === 0) {
      node.children = [{ type: 'text', value: ' ' }];
    }
  },

  onVisitHighlightedLine(node: { properties: { className: string[] } }) {
    node.properties.className.push('highlighted');
  },

  onVisitHighlightedWord(node: { properties: { className: string[] } }) {
    node.properties.className = ['highlighted', 'word'];
  },
};

export default makeSource({
  contentDirPath: 'content',
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [remarkFrontmatter],
    rehypePlugins: [
      rehypeSlug,
      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
      [rehypePrettyCode, prettyCodeOptions],
    ],
  },
});

If you're using git, don't forget to add the generated content to your gitignore

# contentlayer
.contentlayer

Add Post Content

Create a folder called content

Create a file in content called first-post.mdx

---
title: "First Post"
excerpt: My first ever post on my blog
date: '2022-02-16'
---
# Hello World

My name is Roze and I built this blog to do cool things

- Like talking about pets
- And other cool stuff

## Random Code

```mdx {1,15} showLineNumbers title="Page.mdx"
import { MyComponent } from '../components/...';

# My MDX page

This is an unordered list

- Item One
- Item Two
- Item Three

<section>And here is _markdown_ in **JSX**</section>

Checkout my React component

<MyComponent />
```

Once you've created a new post, make sure to run your app to trigger contentlayer to generate

yarn dev

You should see a new folder called .contentlayer which will have a generated folder that defines your schemas and types.

Display All Blog Posts

We can use getStaticProps to pull data from our content folder because contentlayer provides us with allPosts

import { allPosts } from "../../.contentlayer/generated";
import { type GetStaticProps } from "next";
...
export const getStaticProps: GetStaticProps = () => {
  const posts = allPosts.sort(
    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
  );

  return {
    props: {
      posts,
    },
  };
};

Then update the component to show these posts

interface Props {
  posts: Post[];
}

const Home: NextPage<Props> = ({ posts }) => {
  return (
    <>
      ...
      <ul className="pt-20">
        {posts.map((post, index) => (
          <li key={index} className="space-y-2 py-2 text-white">
            <h1 className="text-4xl font-semibold hover:text-yellow-200">
              <Link href={post.url}>{post.title} ↗️</Link>
            </h1>
            <h2>{post.excerpt}</h2>
          </li>
        ))}
      </ul>
      ...
    </>
  );
};

Render a Single Post

Now when a user clicks on one of the posts, we should send them to a new page that shows the full post.

Create a new folder in pages called blog and make a file [slug].tsx

We'll meed to define getStaticPaths to generate the dynamic routes and getStaticProps to retrieve and return a single post

export const getStaticPaths: GetStaticPaths = () => {
  const paths = allPosts.map((post) => post.url);

  return {
    paths,
    fallback: false,
  };
};

interface IContextParams extends ParsedUrlQuery {
  slug: string;
}

export const getStaticProps: GetStaticProps = (context) => {
  const { slug } = context.params as IContextParams;
  const post = allPosts.find((post) => post.slug === slug);

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
  };
};

Setup our component

interface Props {
  post: Post;
}

const BlogPost: NextPage<Props> = ({ post }) => {
  return <></>;
};

export default BlogPost;

Before rendering the BlogPost, we can also style some of it using Tailwind Typography

yarn add -D @tailwindcss/typography

Add that to your tailwind.config.cjs

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
};

Now, how do we actually render the blog post? Contentlayer gives us a NextJS specific hook useMDX that allows us to render MDX

import { useMDXComponent } from "next-contentlayer/hooks";
...
  const Component = useMDXComponent(post.body.code);
  return (
    <main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] pt-20">
      <header>
        <h1 className="pb-10 text-7xl text-white">{post.title}</h1>
      </header>
      <article className="prose">
        <Component />
      </article>
    </main>
  );

In the above code we useMDX allows us to render our mdx and the className='prose' applies the Tailwind Typography styles on the content.

But our post looks gross.

We can modify some of the styles in globals.css

First lets fix the typography

.prose :is(h1, h2, h3, h4, h5, h6) > a {
  @apply no-underline text-white;
}
.prose {
  @apply text-white;
}

And lets style our code plugins

code[data-line-numbers] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

code[data-line-numbers] > .line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 1rem;
  margin-right: 1.25rem;
  margin-left: 0.75rem;
  text-align: right;
  color: #676e95;
}

div[data-rehype-pretty-code-title] + pre {
  @apply !mt-0 !rounded-tl-none;
}

div[data-rehype-pretty-code-title] {
  @apply !mt-6 !max-w-max !rounded-t !border-b !border-b-slate-400 !bg-[#2b303b] !px-4 !py-0.5 !text-gray-300 dark:!bg-[#282c34];
}

Much better :)

Building a Blog with Next.js and Ghost

roze 🌹 — Fri, 02 Sep 2022 04:18:15 +0000

Recently, I decided I'd like a blog for my portfolio.

One thing I wanted – to publish on any device. If I'm with my iPad at a coffee shop, I should be able to write a post, publish it, and have it appear on my website without writing any code.

So, I decided on the following stack

Next.js – to build our frontend
Tailwind CSS – to style our frontend
Vercel – to deploy our frontend
Ghost – to write our posts as a headless CMS
Digital Ocean – to deploy Ghost

Let's get started shall we 🥸

Deploying Ghost on Digital Ocean

Ghost offers a sleek blog editor similar to Medium.

Digital Ocean offers high availability with plenty of storage for a relatively low cost (you can also deploy your front end on here too if you'd like). There are free alternatives out there but I've faced some configuration and database challenges.

Prerequisite: you need a domain (you can get one on Namecheap for a decent price) or subdomain (not a subdirectory like www.domain.xyz/blog).

Create the Digital Ocean Ghost Droplet

Create a Ghost Droplet on Digital Ocean
Select Droplet Size (I did the cheapest on the Regular Intel SSD for about $6/month)
Determine other configurations such as datacenter region which should be closest to your audience. I also chose SSH.
Once created you'll have an IP address

Now install ghost by entering the server to complete the setup.

ssh root@use_your_droplet_ip

You'll need to go to your domain name manager (e.g. Namecheap) and configure an A record using your droplet IP. You can also select to add a domain to Digital Ocean.

When you ssh, you'll be prompted for

The blog URL that you set up with the IP
An email (for SSL)

Your blog should now be live at that URL

Ghost Configuration

Navigate to your blog URL and configure your account.

Set your account to private since the front end will be built using Next.js (Settings > General)

Setting up Next.js and Tailwind

Configure Next.js

npx create-next-app@latest --ts

Follow this guide to quickly configure Tailwind CSS.

Do an npm run dev and your website should be live at localhost:3000/

Getting Blog Posts to Show Up

Let's get rid of most things in index.tsx and just have a blog title

import type { NextPage } from 'next';
import Head from 'next/head';

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Welcome to My Blog</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main>
        <h1 className='text-7xl p-4'>Blog</h1>
      </main>
    </div>
  );
};

export default Home;

To interact with Ghost, we'll need to use its API. We can use their /posts/ endpoint to grab our blog posts.

We need to store two variables

Content API Key
Blog URL

Navigate to Settings > Integrations > Add Custom Integration

In your Next app, create .env.local and add your two variables

CONTENT_API_KEY=<your-key>
BLOG_URL=https://blog.domain.dev

Create a new file lib/ghost.ts

Import your two environment variables
fetch the /posts endpoint (with some additional fields)
Return the result

const { CONTENT_API_KEY, BLOG_URL } = process.env;

export async function getPosts() {
  const res: any = await fetch(
    `${BLOG_URL}/ghost/api/v3/content/posts/?key=${CONTENT_API_KEY}&fields=title,slug,custom_excerpt,feature_image,reading_time,published_at,meta_title,meta_description&formats=html`
  ).then((res) => res.json());

  const posts = res.posts;

  return posts;
}

Now we can use getStaticProps to add our posts as props to our page to render.

I also took a look at the object returned from getPosts to create some typings.

import type { NextPage } from 'next';
import Head from 'next/head';
import { getPosts } from '../lib/ghost';
import { GetStaticProps } from 'next/types';

export const getStaticProps: GetStaticProps = async () => {
  const posts = await getPosts();

  if (!posts) {
    return {
      notFound: true,
    };
  }

  return {
    props: { posts },
    revalidate: 120, // in secs, at most 1 request to ghost cms backend
  };
};

interface IBlogProps {
  posts: Post[];
}

export type Post = {
  title: string;
  slug: string;
  custom_excerpt: string;
  feature_image: string;
  html: string;
  reading_time: number;
  published_at: Date;
  meta_title: string;
  meta_description: string;
};

const Home: NextPage<IBlogProps> = ({ posts }) => {
  return (
    <div>
      <Head>
        <title>Welcome to My Blog</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main>
        <h1 className='text-7xl p-4'>Blog</h1>
        <ul>
          {posts.map((post) => (
            <li key={post.slug} className='px-4 py-2'>
              {post.title}
              {/** Add a Divider line */}
              {post.slug !== posts[posts.length - 1].slug && (
                <div className='relative flex py-5 items-center'>
                  <div className='flex-grow border-t border-gray-300 mr-24'></div>
                </div>
              )}
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
};

export default Home;

Let's stylize the titles a bit more by refactoring the code into its own component.

Create a new file /components/blogCard.tsx

import Link from 'next/link';
import type { Post } from '../pages/index';

interface IBlogCardProps {
  post: Post;
}

const BlogCard = ({ post }: IBlogCardProps) => {
  const { title, slug, reading_time, published_at } = post;

  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  return (
    <div>
      <Link href='/post/[slug]' as={`/post/${slug}`}>
        <a className='md:text-2xl text-xl font-bold hover:text-indigo-200 transition duration-300'>
          {title}
        </a>
      </Link>
      <div className='md:flex'>
        <div className='flex pt-4'>
          <p className='italic md:text-sm text-xs'>
            🗓 {new Date(published_at).toLocaleDateString('en-US', options)}
          </p>
          <p className='pl-7 text-gray-300 font-light md:text-sm text-xs'>
            {reading_time} min
          </p>
        </div>
      </div>
    </div>
  );
};

export default BlogCard;

The Link element currently takes us to a dynamic route that we will need to set up in the next section.

Go back to index.tsx and replace {post.title} with the BlogCard component

...
<li key={post.slug} className='px-4 py-2'>
  <BlogCard post={post} />
...

Rendering a Single Blog Post

Our links currently don't take us anywhere. We need to grab blog content from Ghost at the /posts/slug/{slug}/ endpoint and render that content.

Let's add a new function getPost in ghost.ts to do exactly that.

...
export async function getPost(slug: string) {
  const res: any = await fetch(
    `${BLOG_URL}/ghost/api/v3/content/posts/slug/${slug}?key=${CONTENT_API_KEY}&fields=title,slug,custom_excerpt,feature_image,reading_time,published_at,meta_title,meta_description&formats=html`
  ).then((res) => res.json());

  const posts = res.posts;

  return posts[0];
}

Create a new file pages/post/[slug].tsx that will represent a dynamic route where [slug] is a parameter. This route matches what we had in the Link element href.

In this file, we need to

Define getStaticProps that grabs our post content
Define getStaticPaths to generate static paths for the dynamic route
Load the blog content

import { useRouter } from 'next/router';
import { GetStaticPaths, GetStaticProps, NextPage } from 'next/types';
import { ParsedUrlQuery } from 'querystring';
import { Post } from '..';
import { getPost, getPosts } from '../../lib/ghost';

interface IContextParams extends ParsedUrlQuery {
  slug: string;
}

export const getStaticProps: GetStaticProps = async (context) => {
  const { slug } = context.params as IContextParams;
  const post: string = await getPost(slug);

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: { post },
    revalidate: 120, // in secs, at most 1 request to ghost cms backend
  };
};

export const getStaticPaths: GetStaticPaths<IContextParams> = async () => {
  const posts = await getPosts();

  const paths = posts.map((post: Post) => ({
    params: { slug: post.slug },
  }));

  return { paths, fallback: 'blocking' };
};

interface ISlugPostProps {
  post: Post;
}

const Post: NextPage<ISlugPostProps> = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <LoadingPage />;
  }

  return <BlogContent post={post} />;
};

const LoadingPage = () => {
  return (
    <div className='flex items-center justify-center'>
      <h1 className='md:text-5xl text-3xl md:pb-12 pb-8'>Loading...</h1>
    </div>
  );
};

const BlogContent = ({ post }: ISlugPostProps) => {
  const { title, published_at, reading_time, html } = post;

  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  return (
    <article className='flex flex-col items-start justify-center w-full max-w-2xl mx-auto'>
      {/** TITLE */}
      <div className='flex items-center justify-center'>
        <h1 className='md:text-5xl text-3xl md:pb-12 pb-8 pt-4'>{title}</h1>
      </div>
      {/** DATE + READING TIME */}
      <div className='flex pb-6'>
        <p className='italic px-3 tag'>
          🗓 {new Date(published_at).toLocaleDateString('en-US', options)}
        </p>
        <p className='pl-7 text-gray-300 font-light md:text-sm text-xs'>
          {reading_time} min
        </p>
      </div>
      {/** CONTENT */}
      <section>
        <div dangerouslySetInnerHTML={{ __html: html }}></div>
      </section>
    </article>
  );
};

export default Post;

Now when we click a blog post, we're taken to a separate page and can see the content.

It doesn't look great though...

Styling Blog Post

Using Chrome Developer Tools, we can inspect the HTML of our blog post and see what classes are being used, and can style them. By default, Tailwind gets rid of styles for typical <h1>, <h2>, etc elements so we have to define that ourselves.

Create a new file styles/BlogPost.module.css and we can style the elements to our liking.

.postFullContent {
    min-height: 230px;
    line-height: 1.6em;

    @apply text-lg relative
}

.postFullContent a {
    color: black;
    box-shadow: inset 0 -1px 0 black;

    @apply hover:text-indigo-200 transition duration-300
}

.postContent {
    @apply flex flex-col items-center
}

.postContent p {
    @apply mb-6 min-w-full
}

.postContent h2 {
    line-height: 1.25em;
    @apply md:text-3xl text-xl font-semibold mx-0 my-2 min-w-full
}

.postContent h3 {
    line-height: 1.25em;
    @apply md:text-2xl text-lg font-semibold mx-0 mt-2 mb-1 min-w-full
}

.postContent ol {
    list-style: auto;
    padding: revert;
    @apply mb-6 min-w-full
}

.postContent ul {

    list-style: disc;
    padding: revert;
    @apply mb-6 min-w-full
}

.postContent li {
    word-break: break-word;
    line-height: 1.6em;
    @apply my-2 pl-1
}

.postContent blockquote {
    margin: 0 0 1.5em;
    padding: 0 1.5em;
    border-left: 3px solid #D4C3F9;
    @apply min-w-full
}

.postContent code {
    color: #fff;
    background: #000;
    border-radius: 3px;
    padding: 0 5px 2px;
    line-height: 1em;
    font-size: .8em;
}

.postContent pre {
    overflow-x: auto;
    margin: 1.5em 0 3em;
    padding: 20px;
    max-width: 100%;
    border: 1px solid #000;
    color: #e5eff5;
    background: #0e0f11;
    border-radius: 5px;

    @apply min-w-full
}

.postContent pre > code {
    background: transparent;
}

.postContent figure {
    display: block;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    @apply mt-3 mb-9
}

.postContent figure figcaption {
    @apply font-light text-sm text-center my-4
}

.postContent em {
    @apply font-medium
}

Add these styles to pages/post/[slug].tsx

...
import styles from '../../styles/BlogPost.module.css';
...
{/** CONTENT */}
<section className={styles.postFullContent}>
  <div
    className={styles.postContent}
    dangerouslySetInnerHTML={{ __html: html }}
  ></div>
</section>;

Some things need to be styled at the global level, however.

Using the basic Ghost theme, I had to add the following to styles/globals.css

...
.kg-bookmark-container {
    color: black;
    min-height: 148px;
    border-radius: 3px;

    @apply flex md:flex-row flex-col 
}

a.kg-bookmark-container {
    word-break: break-word;
    transition: all .2s ease-in-out;
    background-color: transparent;
    @apply border-2 border-black
}

.kg-bookmark-content {
    align-items: flex-start;
    padding: 20px; 

    @apply flex flex-grow flex-col justify-start md:order-none order-2
}

.kg-bookmark-title {
    line-height: 1.5em;
    @apply hover:text-indigo-200 transition duration-300 font-semibold text-[#372772]
}

.kg-bookmark-description {
    color: black;
    display: -webkit-box;
    overflow-y: hidden;
    margin-top: 12px;
    max-height: 48px;
    color: #5d7179;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 400;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-bookmark-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    color: #5d7179;
    font-size: 1.5rem;
    font-weight: 400;
}

.kg-bookmark-icon {
    margin-right: 8px;

    @apply md:w-[22px] md:h-[22px] w-[18px] h-[18px]
}

.kg-bookmark-publisher {
    overflow: hidden;
    max-width: 240px;
    line-height: 1.5em;
    text-overflow: ellipsis;
    white-space: nowrap;
    @apply text-sm font-light
}

.kg-bookmark-thumbnail {
    position: relative;
    min-width: 33%;
    max-height: 100%;
    @apply min-h-[160px]
}

.kg-bookmark-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 3px 3px 0;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.kg-image {
    max-width: 100%;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    max-width: 1040px;
    width: 100vw;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
}

.kg-gallery-image {
    flex: 1.5 1 0%;
}

Deploying on Vercel

To deploy your blog, we can use Vercel for free.

Push your code to GitHub
Create a Vercel account with GitHub https://vercel.com/signup
Import your blog
Add your environment variables to Vercel (since they aren't pushed through Git)

Now, anytime you make a code change and push it to your main branch, Vercel will automatically deploy that new change.

You won't need to make a code change if you add a new blog post though, it'll automatically appear!

Peace – have fun writing ✌🏽

Say Hi 👋🏼
🐦 Twitter
👩🏽‍💻 Github