Fine-tune Prettier configuration 💅.

package.json

@@ -44,6 +44,8 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.12",
+    "prettier": "^3.2.5",
+    "prettier-plugin-astro": "^0.13.0",
     "tailwindcss": "^3.4.3"
   },
   "overrides": {
@@ -55,11 +57,12 @@
     }
   },
   "prettier": {
-    "arrowParens": "always",
     "astroAllowShorthand": true,
-    "printWidth": 80,
+    "embeddedLanguageFormatting": "off",
     "semi": false,
     "singleQuote": true,
-    "trailingComma": "es5"
+    "plugins": [
+      "prettier-plugin-astro"
+    ]
   }
 }

src/components/Header.astro

@@ -48,7 +48,7 @@ const navigationLinks = NAVIGATION
             >
               {t(link.title)}
             </HeaderLink>
-          )
+          ),
         )
     }
     <div class="flex justify-center items-center gap-4">

src/components/solidjs/ThemeSwitcher.tsx

@@ -23,7 +23,7 @@ export default function ThemeSwitcher() {
 
   createEffect(() => {
     document.documentElement.classList.remove(
-      getTheme() === 'dark' ? 'light' : 'dark'
+      getTheme() === 'dark' ? 'light' : 'dark',
     )
     document.documentElement.classList.add(getTheme())
     localStorage.setItem('theme', getTheme())

src/content/authors/default.mdx

@@ -10,17 +10,17 @@ gitlab: https://gitlab.com/gmarty
 github: https://github.com/gmarty
 ---
 
-Guillaume (pronounced */ghee-yom/*) has been working in the tech industry for two decades. He was previously as a software engineer at **Mozilla** on the Firefox OS, and an engineering manager and coach at **Twitter**.
+Guillaume (pronounced _/ghee-yom/_) has been working in the tech industry for two decades. He was previously as a software engineer at **Mozilla** on the Firefox OS, and an engineering manager and coach at **Twitter**.
 
 He's passionate about web technologies and contributes regularly to open source projects (check the [Gitlab](https://gitlab.com/gmarty) and [Github](https://github.com/gmarty) accounts).
 
 He's also fascinated by video games, animation, history, and, as a Japanese speaker, foreign languages.
 
 Find Guillaume online:
 
-* Mastodon: <a rel="me" href="https://indieweb.social/@gmarty">@gmarty (@indieweb.social)</a>
-* Gitlab: [gmarty](https://gitlab.com/gmarty)
-* Github: [gmarty](https://github.com/gmarty)
-* Linkedin: [gmarty](https://www.linkedin.com/in/gmarty)
-* Pixelfed: [gmarty](https://pixelfed.social/gmarty)
-* [vCard](/gmarty.vcf)
+- Mastodon: <a rel="me" href="https://indieweb.social/@gmarty">@gmarty (@indieweb.social)</a>
+- Gitlab: [gmarty](https://gitlab.com/gmarty)
+- Github: [gmarty](https://github.com/gmarty)
+- Linkedin: [gmarty](https://www.linkedin.com/in/gmarty)
+- Pixelfed: [gmarty](https://pixelfed.social/gmarty)
+- [vCard](/gmarty.vcf)

src/functions.ts

@@ -11,7 +11,7 @@ import type { CollectionEntry } from 'astro:content'
  * @returns Collection of blog posts sorted by date
  */
 export const sortBlogPosts = (
-  posts: CollectionEntry<'blog'>[] | null
+  posts: CollectionEntry<'blog'>[] | null,
 ): CollectionEntry<'blog'>[] => {
   if (!posts) return []
   return posts.sort((a, b) => {

src/i18n/utils.ts

@@ -12,7 +12,7 @@ export function getLangFromUrl(url: URL) {
 export function useTranslations(lang: keyof typeof ui = defaultLang) {
   return function t(
     key: keyof (typeof ui)[typeof defaultLang],
-    tags?: Record<string, string>
+    tags?: Record<string, string>,
   ) {
     const translation = ui[lang][key] || ui[defaultLang][key]
 
@@ -24,7 +24,7 @@ export function useTranslations(lang: keyof typeof ui = defaultLang) {
     // where in the translation file we have: 'Toggle {darkMode}'
     return (ui[lang][key] || ui[defaultLang][key]).replace(
       /\{(\w+)\}/g,
-      (_, match) => tags?.[match] || ''
+      (_, match) => tags?.[match] || '',
     )
   }
 }

src/layouts/ListWithTagsLayout.astro

@@ -127,7 +127,7 @@ const isBlogPage = Astro.url.pathname.startsWith('/posts')
                     </div>
                   </article>
                 </li>
-              )
+              ),
             )
           }
         </ul>

src/layouts/PostLayout.astro

@@ -26,11 +26,11 @@ interface Props {
 
 const { post, next, prev } = Astro.props as Props
 const authors: CollectionEntry<'authors'>[] = await getEntries(
-  post.data.authors
+  post.data.authors,
 )
 const tags: CollectionEntry<'tags'>[] = await getEntries(post.data.tags)
 const related: CollectionEntry<'blog'>[] = await getEntries(
-  post.data.related
+  post.data.related,
 ).then(sortBlogPosts)
 
 const articleOgDetails = {

src/layouts/SimplePostLayout.astro

@@ -24,11 +24,11 @@ interface Props {
 
 const { post, next, prev } = Astro.props as Props
 const authors: CollectionEntry<'authors'>[] = await getEntries(
-  post.data.authors
+  post.data.authors,
 )
 const tags: CollectionEntry<'tags'>[] = await getEntries(post.data.tags)
 const related: CollectionEntry<'blog'>[] = await getEntries(
-  post.data.related
+  post.data.related,
 ).then(sortBlogPosts)
 
 const articleOgDetails = {

src/pages/apps.astro

@@ -74,7 +74,7 @@ const data = [
               {imgType}
               {href}
             />
-          )
+          ),
         )
       }
     </div>

src/pages/meetups.astro

@@ -80,7 +80,7 @@ const data = [
               {imgType}
               {href}
             />
-          )
+          ),
         )
       }
     </div>

src/pages/tags/[slug]/[...page].astro

@@ -21,7 +21,7 @@ export const getStaticPaths = (async ({ paginate }) => {
 
   return tags.flatMap((entry) => {
     const tagPosts = posts.filter((post) =>
-      post.data.tags.some(({ slug }) => slug === entry.slug)
+      post.data.tags.some(({ slug }) => slug === entry.slug),
     )
     return paginate(tagPosts, {
       pageSize: ITEMS_PER_PAGE,

src/pages/talks.astro

@@ -85,7 +85,7 @@ const data = [
         data.map(
           (
             { title, date, location, description, imgSrc, imgType, href },
-            index
+            index,
           ) => (
             <Card
               {index}
@@ -97,7 +97,7 @@ const data = [
               {imgType}
               {href}
             />
-          )
+          ),
         )
       }
     </div>

src/styles/global.css

@@ -109,7 +109,9 @@ body {
 /* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
-  transition: background-color 600000s 0s, color 600000s 0s;
+  transition:
+    background-color 600000s 0s,
+    color 600000s 0s;
 }
 
 lite-youtube {