style: apply Biome formatter

liam-hq · Oct 3, 2024 · f0da17d · f0da17d
1 parent 3867c14
commit f0da17d
Show file tree

Hide file tree

Showing 21 changed files with 165 additions and 117 deletions.
diff --git a/frontend/apps/service-site/contentlayer.config.ts b/frontend/apps/service-site/contentlayer.config.ts
@@ -2,7 +2,7 @@ import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 
 export const Post = defineDocumentType(() => ({
   name: 'Post',
-  filePathPattern: `posts/*.md`,
+  filePathPattern: 'posts/*.md',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
@@ -27,10 +27,10 @@ export const Post = defineDocumentType(() => ({
   computedFields: {
     href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
     slug: {
-      type: "string",
+      type: 'string',
       resolve: (post) => {
-        const segments = post._raw.flattenedPath.split("/");
-        return segments[segments.length - 1];
+        const segments = post._raw.flattenedPath.split('/')
+        return segments[segments.length - 1]
       },
     },
   },

diff --git a/frontend/apps/service-site/next.config.mjs b/frontend/apps/service-site/next.config.mjs
@@ -1,4 +1,4 @@
-import { withContentlayer } from 'next-contentlayer';
+import { withContentlayer } from 'next-contentlayer'
 /** @type {import('next').NextConfig} */
-const nextConfig = { reactStrictMode: true, images: { domains: ['localhost'] } };
-export default withContentlayer(nextConfig)
+const nextConfig = { reactStrictMode: true, images: { domains: ['localhost'] } }
+export default withContentlayer(nextConfig)
diff --git a/frontend/apps/service-site/package.json b/frontend/apps/service-site/package.json
@@ -10,7 +10,7 @@
     "lint:biome": "biome check .",
     "lint:next": "next lint",
     "fmt": "conc -c auto pnpm:fmt:*",
-    "fmt:biome": "biome format --write ."
+    "fmt:biome": "biome check --write --unsafe ."
   },
   "dependencies": {
     "contentlayer": "^0.3.4",

diff --git a/frontend/apps/service-site/src/app/layout.tsx b/frontend/apps/service-site/src/app/layout.tsx
@@ -1,26 +1,25 @@
-import type { Metadata } from "next";
-import "../styles/globals.css";
-import { Header, Footer } from "../components";
+import type { Metadata } from 'next'
+import '@/styles/globals.css'
+import { Footer, Header } from '@/components'
+import type { ReactNode } from 'react'
 
 export const metadata: Metadata = {
-  title: "Liam",
-  description: "Liam blog",
-};
+  title: 'Liam',
+  description: 'Liam blog',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode
 }>) {
   return (
     <html lang="en">
       <body>
-        <Header></Header>
-        <main>
-          {children}
-        </main>
-        <Footer></Footer>
+        <Header />
+        <main>{children}</main>
+        <Footer />
       </body>
     </html>
-  );
+  )
 }
diff --git a/frontend/apps/service-site/src/app/page.tsx b/frontend/apps/service-site/src/app/page.tsx
@@ -1,11 +1,11 @@
-import { compareDesc } from 'date-fns'
 import { allPosts } from 'contentlayer/generated'
-import { TopCards } from '../components/TopCards'
+import { compareDesc } from 'date-fns'
+import { TopCards } from '../components'
 
 export default function Home() {
-  const posts = allPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
-
-  return (
-    <TopCards posts={posts.slice(0, 14)}/>
+  const posts = allPosts.sort((a, b) =>
+    compareDesc(new Date(a.date), new Date(b.date)),
   )
+
+  return <TopCards posts={posts.slice(0, 14)} />
 }
diff --git a/frontend/apps/service-site/src/app/posts/[slug]/page.tsx b/frontend/apps/service-site/src/app/posts/[slug]/page.tsx
@@ -1,20 +1,21 @@
-import { format, parseISO } from 'date-fns'
 import { allPosts } from 'contentlayer/generated'
+import { format, parseISO } from 'date-fns'
 
 export const getPost = (slug: string) => {
-  return allPosts.find((post) => post.href === slug);
-};
+  return allPosts.find((post) => post.href === slug)
+}
 
-export const generateStaticParams = async () => allPosts.map((post) => ({ slug: post._raw.flattenedPath }))
+export const generateStaticParams = async () =>
+  allPosts.map((post) => ({ slug: post._raw.flattenedPath }))
 
 export const generateMetadata = ({ params }: { params: { slug: string } }) => {
-  const post = getPost(`/posts/${params.slug}`);
+  const post = getPost(`/posts/${params.slug}`)
   if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
   return { title: post.title }
 }
 
 const PostLayout = ({ params }: { params: { slug: string } }) => {
-  const post = getPost(`/posts/${params.slug}`);
+  const post = getPost(`/posts/${params.slug}`)
   if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
   return (
     <article>
@@ -24,6 +25,7 @@ const PostLayout = ({ params }: { params: { slug: string } }) => {
         </time>
         <h1>{post.title}</h1>
       </div>
+      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
       <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
     </article>
   )

diff --git a/frontend/apps/service-site/src/app/posts/page.tsx b/frontend/apps/service-site/src/app/posts/page.tsx
@@ -1,31 +1,32 @@
-import Link from 'next/link'
+import { type Post, allPosts } from 'contentlayer/generated'
 import { compareDesc, format, parseISO } from 'date-fns'
-import { allPosts, Post } from 'contentlayer/generated'
+import Link from 'next/link'
 
 function PostCard(post: Post) {
   return (
     <div>
       <h2>
-        <Link href={post.href}>
-          {post.title}
-        </Link>
+        <Link href={post.href}>{post.title}</Link>
       </h2>
       <time dateTime={post.date}>
         {format(parseISO(post.date), 'LLLL d, yyyy')}
       </time>
+      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
       <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
     </div>
   )
 }
 
 export default function Home() {
-  const posts = allPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
+  const posts = allPosts.sort((a, b) =>
+    compareDesc(new Date(a.date), new Date(b.date)),
+  )
 
   return (
     <div>
       <h1>Posts</h1>
-      {posts.map((post, idx) => (
-        <PostCard key={idx} {...post} />
+      {posts.map((post) => (
+        <PostCard key={post.slug} {...post} />
       ))}
     </div>
   )

diff --git a/frontend/apps/service-site/src/components/Footer.module.css b/frontend/apps/service-site/src/components/Footer.module.css
@@ -37,7 +37,8 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  transition: color var(--default-hover-animation-duration) var(--default-timing-function);
+  transition: color var(--default-hover-animation-duration)
+    var(--default-timing-function);
   padding: var(--spacing-2, 8px);
 
   &:hover {
@@ -48,7 +49,8 @@
 .snsLink {
   & path {
     fill: var(--overlay-70);
-    transition: fill var(--default-hover-animation-duration) var(--default-timing-function);
+    transition: fill var(--default-hover-animation-duration)
+      var(--default-timing-function);
   }
 
   &:hover path {

diff --git a/frontend/apps/service-site/src/components/Footer.tsx b/frontend/apps/service-site/src/components/Footer.tsx
@@ -1,7 +1,6 @@
-import Link from 'next/link';
-import styles from './Footer.module.css';
-import { LiamLogoMark, Github, X } from './logos';
-
+import Link from 'next/link'
+import styles from './Footer.module.css'
+import { Github, LiamLogoMark, X } from './logos'
 
 export const Footer = () => {
   return (
@@ -10,22 +9,28 @@ export const Footer = () => {
         <Link href="/" className={styles.logo}>
           <LiamLogoMark />
         </Link>
-        <p className={styles.text}>
-          &copy; 2024 Liam
-        </p>
+        <p className={styles.text}>&copy; 2024 Liam</p>
       </div>
       <div className={styles.linksContainer}>
         <Link href="/" className={styles.textLink}>
           {/* TODO: Add Privacy Policy link */}
           Privacy Policy
         </Link>
-        <Link href="https://github.com/route06inc/liam" className={styles.snsLink} target="_blank">
+        <Link
+          href="https://github.com/route06inc/liam"
+          className={styles.snsLink}
+          target="_blank"
+        >
           <Github />
         </Link>
-        <Link href="https://x.com/liam_app" className={styles.snsLink} target="_blank">
+        <Link
+          href="https://x.com/liam_app"
+          className={styles.snsLink}
+          target="_blank"
+        >
           <X />
         </Link>
       </div>
     </footer>
-  );
-};
+  )
+}
diff --git a/frontend/apps/service-site/src/components/Header.tsx b/frontend/apps/service-site/src/components/Header.tsx
@@ -1,15 +1,15 @@
 import Link from 'next/link'
+import styles from './Header.module.css'
 import { LiamLogo } from './logos'
-import styles from './Header.module.css';
 
 export const Header = () => {
-    return (
-      <header className={styles.header}>
-        <Link href="/">
-          <h1 className={styles.h1}>
-            <LiamLogo />
-          </h1>
-        </Link>
-      </header>
-    );
-  };
+  return (
+    <header className={styles.header}>
+      <Link href="/">
+        <h1 className={styles.h1}>
+          <LiamLogo />
+        </h1>
+      </Link>
+    </header>
+  )
+}
diff --git a/frontend/apps/service-site/src/components/TopCards.module.css b/frontend/apps/service-site/src/components/TopCards.module.css
@@ -47,7 +47,7 @@
 .title {
   font-size: var(--font-size-10, 24px);
   font-weight: 400;
-  line-height: 120%; 
+  line-height: 120%;
   font-family: var(--message-font);
 }
 
@@ -71,7 +71,6 @@
 }
 
 .topCards > :not(:first-child):not(:nth-child(2)) {
-
   .title {
     line-clamp: 4;
     -webkit-line-clamp: 4;
@@ -84,7 +83,6 @@
 
 .topCards > :first-child,
 .topCards > :nth-child(2) {
-
   .textContainer {
     margin: var(--spacing-20, 80px) 0;
     justify-content: flex-start;
@@ -105,7 +103,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    height: auto
+    height: auto;
   }
 
   .introduction {
@@ -142,23 +140,20 @@
 }
 
 .topCards > :first-child {
-
   .topCard {
     padding-left: 0;
-    margin-left: calc(-1 * var(--spacing-20, 80px)); 
+    margin-left: calc(-1 * var(--spacing-20, 80px));
   }
 
   .textContainer {
     padding-left: var(--spacing-20, 80px);
   }
 }
 
-
 .topCards > :nth-child(2) {
-
   .topCard {
     padding-right: 0;
-    margin-right: - var(--spacing-20, 80px);
+    margin-right: calc(-1 * var(--spacing-20, 80px));
   }
 
   .textContainer {

diff --git a/frontend/apps/service-site/src/components/TopCards.tsx b/frontend/apps/service-site/src/components/TopCards.tsx
@@ -1,9 +1,9 @@
-import { Post } from "@/.contentlayer/generated";
-import Link from "next/link";
-import Image from "next/image";
-import styles from "./TopCards.module.css";
+import type { Post } from 'contentlayer/generated'
+import Image from 'next/image'
+import Link from 'next/link'
+import styles from './TopCards.module.css'
 interface TopCardsProps {
-  posts: Post[];
+  posts: Post[]
 }
 
 export function TopCards({ posts }: TopCardsProps) {
@@ -27,22 +27,18 @@ export function TopCards({ posts }: TopCardsProps) {
             <div className={styles.textContainer}>
               <div className={styles.tags}>
                 {post.tags.map((tag) => (
-                  <span key={tag} className={styles.tag}>( {tag} )</span>
+                  <span key={tag} className={styles.tag}>
+                    ( {tag} )
+                  </span>
                 ))}
               </div>
-              <h2 className={styles.title}>
-                {post.title}
-              </h2>
-              <p className={styles.writer}>
-                Text by {post.writer}
-              </p>
-              <div className={styles.introduction}>
-                {post.introduction}
-              </div>
+              <h2 className={styles.title}>{post.title}</h2>
+              <p className={styles.writer}>Text by {post.writer}</p>
+              <div className={styles.introduction}>{post.introduction}</div>
             </div>
           </div>
         </Link>
       ))}
     </div>
-  );
+  )
 }
diff --git a/frontend/apps/service-site/src/components/index.ts b/frontend/apps/service-site/src/components/index.ts
@@ -1,2 +1,3 @@
-export { Header } from "./Header";
-export { Footer } from "./Footer";
+export { Header } from './Header'
+export { Footer } from './Footer'
+export * from './TopCards'