mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 11:12:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add and run prettier-plugin-tailwindcss

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-30 23:29:38 -07:00
parent b1721e7f41
commit 501faf1ef8
7 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.prettierrc
View file

@ -1,5 +1,9 @@
{ {
"plugins": ["prettier-plugin-astro", "prettier-plugin-svelte"], "plugins": [
"prettier-plugin-astro",
"prettier-plugin-svelte",
"prettier-plugin-tailwindcss"
],
"overrides": [ "overrides": [
{ {
"files": "*.astro", "files": "*.astro",

2
src/layouts/ProseLayout.astro
View file

@ -1,5 +1,5 @@
<div <div
class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h1:font-light prose-h1:leading-snug prose-h1:underline prose-h1:decoration-yellow-400 prose-h1:decoration-2 prose-h1:underline-offset-8 prose-p:text-gray-700 prose-a:text-emerald-700 prose-a:underline-offset-2 prose-a:duration-100 hover:prose-a:text-emerald-500 prose-strong:text-gray-700 before:prose-code:content-[''] after:prose-code:content-[''] prose-code:font-normal prose-code:text-gray-700 prose-code:bg-slate-200 prose-code:px-1 prose-code:rounded prose-code:tracking-tight" class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h1:font-light prose-h1:leading-snug prose-h1:underline prose-h1:decoration-yellow-400 prose-h1:decoration-2 prose-h1:underline-offset-8 prose-p:text-gray-700 prose-a:text-emerald-700 prose-a:underline-offset-2 prose-a:duration-100 hover:prose-a:text-emerald-500 prose-strong:text-gray-700 prose-code:rounded prose-code:bg-slate-200 prose-code:px-1 prose-code:font-normal prose-code:tracking-tight prose-code:text-gray-700 before:prose-code:content-[''] after:prose-code:content-['']"
> >
<slot /> <slot />
</div> </div>

2
src/pages/404.astro
View file

@ -7,7 +7,7 @@ import NotFoundImage from "../assets/images/404.jpeg";
<BaseLayout title="Mikkel Svartveit"> <BaseLayout title="Mikkel Svartveit">
<section class="mx-auto max-w-4xl px-3 pb-8 pt-12 sm:px-6"> <section class="mx-auto max-w-4xl px-3 pb-8 pt-12 sm:px-6">
<h1 <h1
class="mb-8 text-center text-3xl font-serif font-light tracking-wide text-gray-600 sm:text-4xl" class="mb-8 text-center font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
> >
PAgE nOT fOuNd PAgE nOT fOuNd
</h1> </h1>

10
src/pages/articles/index.astro
View file

@ -35,20 +35,20 @@ const articles = await getCollection("blog");
return ( return (
<a <a
href={`/articles/${slug}`} href={`/articles/${slug}`}
class="my-8 grid grid-cols-1 mx-auto max-w-xs sm:max-w-none sm:grid-cols-3 overflow-hidden rounded-lg bg-white shadow duration-100 hover:translate-x-1 hover:shadow-md group" class="group mx-auto my-8 grid max-w-xs grid-cols-1 overflow-hidden rounded-lg bg-white shadow duration-100 hover:translate-x-1 hover:shadow-md sm:max-w-none sm:grid-cols-3"
> >
<Image <Image
src={image} src={image}
alt={title} alt={title}
class="col-span-1 object-cover h-48 sm:h-full" class="col-span-1 h-48 object-cover sm:h-full"
/> />
<div class="col-span-1 sm:col-span-2 px-4 py-5"> <div class="col-span-1 px-4 py-5 sm:col-span-2">
<h2 class="mb-2 text-xl font-serif text-gray-700 sm:line-clamp-1 group-hover:underline underline-offset-4"> <h2 class="mb-2 font-serif text-xl text-gray-700 underline-offset-4 group-hover:underline sm:line-clamp-1">
{title} {title}
</h2> </h2>
<p class="sm:line-clamp-3 text-gray-500">{intro}</p> <p class="text-gray-500 sm:line-clamp-3">{intro}</p>
</div> </div>
</a> </a>
); );

18
src/pages/index.astro
View file

@ -18,9 +18,9 @@ const latestArticleImage = latestArticle.data.image;
<BaseLayout> <BaseLayout>
<div <div
class="mx-auto flex max-w-5xl flex-col-reverse px-3 pb-6 pt-8 sm:px-6 md:flex-row items-stretch" class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-3 pb-6 pt-8 sm:px-6 md:flex-row"
> >
<section class="w-full md:w-3/5 mb-10 mt-4"> <section class="mb-10 mt-4 w-full md:w-3/5">
<h1 <h1
class="mb-8 font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl" class="mb-8 font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
> >
@ -50,7 +50,7 @@ const latestArticleImage = latestArticle.data.image;
</div> </div>
</section> </section>
<figure class="px-4 md:w-1/2 my-auto"> <figure class="my-auto px-4 md:w-1/2">
<Image <Image
class="mx-auto mb-12 block w-full max-w-sm rounded-full border-4 border-white bg-gray-100 text-transparent shadow-lg shadow-gray-400 md:mx-0 md:ml-auto md:w-5/6" class="mx-auto mb-12 block w-full max-w-sm rounded-full border-4 border-white bg-gray-100 text-transparent shadow-lg shadow-gray-400 md:mx-0 md:ml-auto md:w-5/6"
src={portraitImage} src={portraitImage}
@ -63,22 +63,22 @@ const latestArticleImage = latestArticle.data.image;
</figure> </figure>
</div> </div>
<h2 class="text-center text-lg mb-3 text-gray-500">Latest article</h2> <h2 class="mb-3 text-center text-lg text-gray-500">Latest article</h2>
<a <a
href={`/articles/${latestArticleSlug}`} href={`/articles/${latestArticleSlug}`}
class="mx-auto block max-w-lg px-3 sm:px-6 text-gray-600" class="mx-auto block max-w-lg px-3 text-gray-600 sm:px-6"
> >
<div <div
class="flex bg-white shadow transition hover:shadow-md hover:underline underline-offset-4 rounded-lg overflow-hidden items-center" class="flex items-center overflow-hidden rounded-lg bg-white underline-offset-4 shadow transition hover:underline hover:shadow-md"
> >
<Image src={latestArticleImage} alt="" class="w-24 h-16 object-cover" /> <Image src={latestArticleImage} alt="" class="h-16 w-24 object-cover" />
<h3 class="text-lg font-serif mx-3 line-clamp-2 leading-snug"> <h3 class="mx-3 line-clamp-2 font-serif text-lg leading-snug">
{latestArticleTitle} {latestArticleTitle}
</h3> </h3>
</div> </div>
</a> </a>
<footer class="mb-8 mt-20 flex justify-center w-full"> <footer class="mb-8 mt-20 flex w-full justify-center">
<p class="text-xs text-gray-500"> <p class="text-xs text-gray-500">
Built with Built with
<a <a

4
src/pages/photography/[photo].astro
View file

@ -22,7 +22,7 @@ const { photo } = Astro.props;
<RootLayout title="Photo" hideScrollbar themeColor="#111827"> <RootLayout title="Photo" hideScrollbar themeColor="#111827">
<div <div
class="cursor-pointer bg-gray-900 w-full h-[100svh] fixed flex justify-center" class="fixed flex h-[100svh] w-full cursor-pointer justify-center bg-gray-900"
onclick=" onclick="
history.back() history.back()
" "
@ -32,7 +32,7 @@ const { photo } = Astro.props;
alt="" alt=""
height={2000} height={2000}
quality="high" quality="high"
class="object-contain rounded w-auto h-full" class="h-full w-auto rounded object-contain"
transition:name={photo.default.src} transition:name={photo.default.src}
/> />
</div> </div>

8
src/pages/photography/index.astro
View file

@ -40,21 +40,21 @@ export const getFileNameFromPath = (path: string) => {
</ContainerLayout> </ContainerLayout>
<section <section
class="px-3 mb-2 columns-2 gap-3 sm:px-4 sm:gap-4 md:columns-3 lg:columns-4" class="mb-2 columns-2 gap-3 px-3 sm:gap-4 sm:px-4 md:columns-3 lg:columns-4"
> >
{ {
photos.sort(sortFiles).map((photo) => ( photos.sort(sortFiles).map((photo) => (
<a <a
href={`/photography/${getFileNameFromPath(photo.default.src)}`} href={`/photography/${getFileNameFromPath(photo.default.src)}`}
class="flex w-full py-1.5 duration-100 hover:-translate-y-1 rounded-lg sm:py-2" class="flex w-full rounded-lg py-1.5 duration-100 hover:-translate-y-1 sm:py-2"
> >
<div class="bg-gray-200 rounded"> <div class="rounded bg-gray-200">
<Image <Image
src={photo.default} src={photo.default}
alt="" alt=""
width={1000} width={1000}
quality="mid" quality="mid"
class="object-contain rounded" class="rounded object-contain"
transition:name={photo.default.src} transition:name={photo.default.src}
/> />
</div> </div>