refactor: use Tailwind CSS prose styles

This commit is contained in:
Oliver Davies 2023-04-22 21:57:02 +01:00
parent 84be97413d
commit f4bcae37db
14 changed files with 102 additions and 136 deletions

View file

@ -5,69 +5,6 @@
text-underline-offset: 0.1em; text-underline-offset: 0.1em;
} }
.markdown {
> * + * {
@apply mt-4;
}
> *:first-child {
@apply mt-0;
}
h2 + * {
@apply mt-2;
}
h2 {
@apply mt-6;
}
h3 {
@apply mt-8 font-bold;
}
h2 + h3 {
@apply mt-2
}
blockquote {
@apply my-8;
}
ol {
@apply pl-6 list-decimal;
}
ul {
@apply pl-6 list-disc;
}
li {
@apply mt-1 first:mt-0;
}
a {
@apply link;
}
pre {
@apply my-8;
}
pre code {
@apply block;
}
.media--type-image {
@apply my-8;
}
.speakerdeck-embed-wrapper,
.video-full {
@apply my-8 aspect-w-4 aspect-h-3;
}
}
.visually-hidden { .visually-hidden {
@apply sr-only; @apply sr-only;
} }

View file

@ -1,24 +1,30 @@
---
import Markdown from "./Markdown.astro";
---
<aside> <aside>
<h2>About me</h2> <Markdown>
<h2>About me</h2>
<div class="flex mt-4 space-x-4"> <div class="flex space-x-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0 flex flex-col justify-start">
<img <img
src="/images/social-avatar.jpg" src="/images/social-avatar.jpg"
alt="Picture of Oliver" alt="Picture of Oliver"
class="w-16 h-16 rounded-full border border-grey" class="not-prose my-0 w-16 h-16 rounded-full border border-grey"
/> />
</div> </div>
<div> <Markdown>
<p> <p>
Oliver Davies is a PHP Developer and Linux Systems Administrator based Oliver Davies is a PHP Developer and Linux Systems Administrator based
in the UK. He is a Full Stack Software Consultant specialising in Drupal in the UK. He is a Full Stack Software Consultant specialising in
application development, and a Lead Developer at <a Drupal application development, and a Lead Developer at <a
href="https://tfw.wales" href="https://tfw.wales"
class="link">Transport for Wales</a class="link">Transport for Wales</a
>. >.
</p> </p>
</Markdown>
</div> </div>
</div> </Markdown>
</aside> </aside>

View file

@ -1,4 +1,5 @@
--- ---
import Markdown from "./Markdown.astro";
const { intro } = Astro.props; const { intro } = Astro.props;
--- ---
@ -55,9 +56,11 @@ const { intro } = Astro.props;
</div> </div>
<footer class="px-4 mt-4 text-center"> <footer class="px-4 mt-4 text-center">
<p> <Markdown>
Not sure? <a class="link" href="/archive">Browse the archive →</a> <p>
</p> Not sure? <a class="link" href="/archive">Browse the archive &rarr;</a>
</p>
</Markdown>
</footer> </footer>
<style> <style>

View file

@ -1,4 +1,6 @@
--- ---
import Markdown from "./Markdown.astro";
interface ItemProps { interface ItemProps {
date: string; date: string;
description?: string; description?: string;
@ -12,20 +14,22 @@ const { slug } = Astro.props.item;
--- ---
<article> <article>
<a href={slug} class="mb-2"><h2>{title}</h2></a> <Markdown overrideLinkColours={true}>
<a href={slug}><h2>{title}</h2></a>
{ {
date && ( date && (
<time class="block mt-0 mb-2 text-base" datetime={date}> <time class="block mt-0 mb-2 text-base" datetime={date}>
{new Date(date).toLocaleDateString("en-GB", { {new Date(date).toLocaleDateString("en-GB", {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
})} })}
</time> </time>
) )
} }
{description && <p>{description}</p>} {description && <p>{description}</p>}
{excerpt && <p>{excerpt}</p>} {excerpt && <p>{excerpt}</p>}
</Markdown>
</article> </article>

View file

@ -1,3 +1,19 @@
<div class="markdown"> ---
type Props = {
overrideLinkColours: boolean;
};
const { overrideLinkColours } = Astro.props as Props;
---
<div
class:list={[
"prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3",
{
"prose-a:text-blue-primary dark:prose-a:text-blue-400 prose-headings:text-current":
overrideLinkColours,
},
]}
>
<slot /> <slot />
</div> </div>

View file

@ -1,4 +1,6 @@
--- ---
import Markdown from "../Markdown.astro";
interface Event { interface Event {
date: string; date: string;
location: string; location: string;
@ -17,15 +19,15 @@ const { events } = Astro.props;
{ {
events && ( events && (
<div> <Markdown>
<h2>Events</h2> <h2>Events</h2>
<div> <div>
<ul class="ml-4 list-disc"> <ul>
{events.map((event) => ( {events.map((event) => (
<li> <li>
{event.url ? ( {event.url ? (
<a class="link" href={event.url}> <a class="inline-block" href={event.url}>
{event.name} {event.name}
</a> </a>
) : ( ) : (
@ -42,6 +44,6 @@ const { events } = Astro.props;
))} ))}
</ul> </ul>
</div> </div>
</div> </Markdown>
) )
} }

View file

@ -1,4 +1,6 @@
--- ---
import Markdown from '../Markdown.astro';
interface Props { interface Props {
id: string; id: string;
ratio?: string; ratio?: string;
@ -7,7 +9,7 @@ interface Props {
const { id, ratio }: Props = Astro.props; const { id, ratio }: Props = Astro.props;
--- ---
<div> <Markdown>
<h2 class="mb-2">Slides</h2> <h2 class="mb-2">Slides</h2>
<div class="slides"> <div class="slides">
@ -19,4 +21,4 @@ const { id, ratio }: Props = Astro.props;
src="//speakerdeck.com/assets/embed.js" src="//speakerdeck.com/assets/embed.js"
></script> ></script>
</div> </div>
</div> </Markdown>

View file

@ -1,4 +1,6 @@
--- ---
import Markdown from '../Markdown.astro';
interface Props { interface Props {
id: string; id: string;
type: string; type: string;
@ -9,7 +11,7 @@ const { id, type }: Props = Astro.props;
{ {
type == "youtube" && ( type == "youtube" && (
<div> <Markdown>
<h2 class="mb-2">Video</h2> <h2 class="mb-2">Video</h2>
<div> <div>
@ -20,6 +22,6 @@ const { id, type }: Props = Astro.props;
src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`} src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`}
/> />
</div> </div>
</div> </Markdown>
) )
} }

View file

@ -73,7 +73,7 @@ const footerLinks = [
footerLinks && footerLinks &&
footerLinks.map((link) => ( footerLinks.map((link) => (
<a <a
class="mx-3 mb-3 text-sm md:text-lg dark:text-white link dark:hover:text-blue-400 hover:text-grey-900" class="mx-3 mb-3 text-sm underline md:text-lg dark:text-white hover:no-underline link dark:hover:text-blue-400 hover:text-grey-900"
href={link.href} href={link.href}
> >
{link.title} {link.title}

View file

@ -1,12 +1,9 @@
--- ---
import BaseLayout from "./Layout.astro"; import BaseLayout from "./Layout.astro";
import Markdown from "../components/Markdown.astro";
const { title } = Astro.props.frontmatter || Astro.props; const { title } = Astro.props.frontmatter || Astro.props;
--- ---
<BaseLayout title={title}> <BaseLayout title={title}>
<Markdown> <slot />
<slot />
</Markdown>
</BaseLayout> </BaseLayout>

View file

@ -16,19 +16,22 @@ export const testimonials = [
}, },
{ {
name: "Stephen Mulvihill", name: "Stephen Mulvihill",
text: 'I like the "$ git log -S" and "$ git log --grep" commands, will definitely be using these, thanks!', text: '<p>I like the "$ git log -S" and "$ git log --grep" commands, will definitely be using these, thanks!</p>',
image: "stephen-mulvihill.jpg", image: "stephen-mulvihill.jpg",
}, },
{ {
name: "Marcos Duran", name: "Marcos Duran",
text: "<p> I am a big fan of your git approaches. I especially remember pairing with you and watching how many commands you run to solve many problems and how fast you were. It's a skill I believe not many have, particularly those who are used to working with a GUI like me, and personally I think it is quite valuable.</p>", text: "<p>I am a big fan of your git approaches. I especially remember pairing with you and watching how many commands you run to solve many problems and how fast you were. It's a skill I believe not many have, particularly those who are used to working with a GUI like me, and personally I think it is quite valuable.</p>",
image: "marcos-duran.jpg", image: "marcos-duran.jpg",
}, },
]; ];
export const sortedTestimonials = _.reverse(testimonials); export const sortedTestimonials = _.reverse(testimonials);
A daily newsletter on software development, DevOps, community, and open-source. <p>
A daily newsletter on software development, DevOps, community, and
open-source.
</p>
<div class="space-y-12"> <div class="space-y-12">
<div class="space-y-20"> <div class="space-y-20">
@ -42,11 +45,11 @@ A daily newsletter on software development, DevOps, community, and open-source.
{testimonials.map(testimonial => ( {testimonials.map(testimonial => (
<article class="flex space-x-10"> <article class="flex space-x-10">
<div> <div>
<blockquote class="m-0"> <Markdown>
<Markdown set:html={testimonial.text} /> <blockquote class="m-0"set:html={testimonial.text} />
</blockquote>
<figcaption class="mt-6">{testimonial.name}</figcaption> <figcaption class="mt-6">{testimonial.name}</figcaption>
</Markdown>
</div> </div>
<div class="hidden flex-shrink-0 sm:block"> <div class="hidden flex-shrink-0 sm:block">

View file

@ -24,7 +24,7 @@ const { events, speakerdeck, title, video } = Astro.props.talk.data;
--- ---
<Layout title={title}> <Layout title={title}>
<div class="space-y-6"> <div class="space-y-8">
<Markdown> <Markdown>
<Content /> <Content />
</Markdown> </Markdown>

View file

@ -2,6 +2,7 @@
import ListingPage from "~/components/ListingPage.astro"; import ListingPage from "~/components/ListingPage.astro";
import _ from "lodash"; import _ from "lodash";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import Markdown from "~/components/Markdown.astro";
const talks = await getCollection("talk"); const talks = await getCollection("talk");
@ -28,9 +29,11 @@ const sortedTalks = talks
--- ---
<ListingPage items={sortedTalks} title="Talks and workshops"> <ListingPage items={sortedTalks} title="Talks and workshops">
<p slot="intro"> <Markdown>
Starting with my first talk in September 2012, I have given {talkCount} presentations <p slot="intro">
and workshops at various conferences and meetups, in-person and remotely, on Starting with my first talk in September 2012, I have given {talkCount} presentations
topics including PHP, Drupal, automated testing, Git, CSS, and systems administration. and workshops at various conferences and meetups, in-person and remotely, on
</p> topics including PHP, Drupal, automated testing, Git, CSS, and systems administration.
</p>
</Markdown>
</ListingPage> </ListingPage>

View file

@ -7,22 +7,13 @@ module.exports = {
mode: "jit", mode: "jit",
darkMode: "media", darkMode: "media",
important: true, important: true,
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
outline: { outline: {
black: "1px solid black", black: "1px solid black",
white: "1px solid white", white: "1px solid white",
}, },
extend: { extend: {
typography: (theme) => ({
DEFAULT: {
css: {
p: {
lineHeight: 400,
},
},
},
}),
colors, colors,
fontFamily: { fontFamily: {
sans: [ sans: [