.tsx code block
import { type ActionArgs, json } from "@remix-run/node";
import { useActionData, useTransition, Form } from "@remix-run/react";
import LabeledTextField from "~/components/labeled-text-field";
export async function action({ request, params }: ActionArgs) {
return json(null);
};
export default function InviteTeamMember() {
const errors = useActionData<typeof action>();
const isSubmitting = useTransition().state === "submitting";
return (
<Form method="post">
<LabeledTextField
name="email"
type="text"
label="Email address"
error={errors?.email}
disabled={isSubmitting}
/>
<Button type="submit" disabled={isSubmitting}>
Invite team member
</Button>
</Form>
);
}
.ts code block with line highlighting
Not working yet, syntax does not error
import fs from "node:fs";
import fm from "front-matter";
type FrontMatterAttributes = {
slug: string;
title: string;
description: string;
date: Date;
published: boolean;
};
export async function getPost(slug: string) {
if (!fs.existsSync(`./content/${slug}.md`)) {
return;
}
const file = fs.readFileSync(`./content/${slug}.md`, "utf-8");
const content = fm<FrontMatterAttributes>(file);
return {
slug,
title: content.attributes.title,
description: content.attributes.description,
published: content.attributes.published,
date: content.attributes.date,
markdown: content.body,
};
}
.yaml code block with file name
Not working yet, syntax makes the parser throw