opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: use Tailwind CSS prose styles

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

63
assets/css/components.pcss
View file

@ -5,69 +5,6 @@
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 {
@apply sr-only;
}

44
src/components/AboutMe.astro
View file

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

9
src/components/DailyEmailForm.astro
View file

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

32
src/components/ListingPageItem.astro
View file

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

18
src/components/Markdown.astro
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 />
</div>

10
src/components/talk/Events.astro
View file

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

6
src/components/talk/Slides.astro
View file

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

6
src/components/talk/Video.astro
View file

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

2
src/layouts/Layout.astro
View file

@ -73,7 +73,7 @@ const footerLinks = [
footerLinks &&
footerLinks.map((link) => (
<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}
>
{link.title}

5
src/layouts/PageLayout.astro
View file

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

17
src/pages/daily.mdx
View file

@ -16,19 +16,22 @@ export const testimonials = [
},
{
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",
},
{
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",
},
];
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-20">
@ -42,11 +45,11 @@ A daily newsletter on software development, DevOps, community, and open-source.
{testimonials.map(testimonial => (
<article class="flex space-x-10">
<div>
<blockquote class="m-0">
<Markdown set:html={testimonial.text} />
</blockquote>
<Markdown>
<blockquote class="m-0"set:html={testimonial.text} />
<figcaption class="mt-6">{testimonial.name}</figcaption>
<figcaption class="mt-6">{testimonial.name}</figcaption>
</Markdown>
</div>
<div class="hidden flex-shrink-0 sm:block">

2
src/pages/talks/[slug].astro
View file

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

13
src/pages/talks/index.astro
View file

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

11
tailwind.config.cjs
View file

@ -7,22 +7,13 @@ module.exports = {
mode: "jit",
darkMode: "media",
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: {
outline: {
black: "1px solid black",
white: "1px solid white",
},
extend: {
typography: (theme) => ({
DEFAULT: {
css: {
p: {
lineHeight: 400,
},
},
},
}),
colors,
fontFamily: {
sans: [