style: Apply Biome formatter

liam-hq · Oct 2, 2024 · b3f080f · b3f080f
1 parent 4e832d2
commit b3f080f
Show file tree

Hide file tree

Showing 20 changed files with 150 additions and 107 deletions.
diff --git a/frontend/apps/service-site/contentlayer.config.ts b/frontend/apps/service-site/contentlayer.config.ts
@@ -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/src/app/layout.tsx b/frontend/apps/service-site/src/app/layout.tsx
@@ -1,26 +1,24 @@
-import type { Metadata } from "next";
-import "../styles/globals.css";
-import { Header, Footer } from "../components";
+import type { Metadata } from 'next'
+import '../styles/globals.css'
+import { Header, Footer } from '../components'
 
 export const metadata: Metadata = {
-  title: "Liam",
-  description: "Liam blog",
-};
+  title: 'Liam',
+  description: 'Liam blog',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
       <body>
         <Header></Header>
-        <main>
-          {children}
-        </main>
+        <main>{children}</main>
         <Footer></Footer>
       </body>
     </html>
-  );
+  )
 }
diff --git a/frontend/apps/service-site/src/app/page.tsx b/frontend/apps/service-site/src/app/page.tsx
@@ -3,9 +3,9 @@ import { allPosts } from 'contentlayer/generated'
 import { TopCards } from '../components/TopCards'
 
 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
@@ -2,19 +2,20 @@ import { format, parseISO } from 'date-fns'
 import { allPosts } from 'contentlayer/generated'
 
 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>

diff --git a/frontend/apps/service-site/src/app/posts/page.tsx b/frontend/apps/service-site/src/app/posts/page.tsx
@@ -6,9 +6,7 @@ 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')}
@@ -19,7 +17,9 @@ function PostCard(post: Post) {
 }
 
 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>

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 { LiamLogoMark, Github, 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 { LiamLogo } from './logos'
-import styles from './Header.module.css';
+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 { Post } from '@/.contentlayer/generated'
+import Link from 'next/link'
+import Image from 'next/image'
+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,2 @@
-export { Header } from "./Header";
-export { Footer } from "./Footer";
+export { Header } from './Header'
+export { Footer } from './Footer'
diff --git a/frontend/apps/service-site/src/components/logos/Github.tsx b/frontend/apps/service-site/src/components/logos/Github.tsx
@@ -1,31 +1,43 @@
-
 import type { ComponentPropsWithoutRef, FC } from 'react'
 
 type Props = ComponentPropsWithoutRef<'svg'>
 
 export const Github: FC<Props> = (props) => {
   return (
-    <svg role="img"
+    <svg
+      role="img"
       aria-label="GitHub Logo"
       width={16}
       height={16}
       viewBox="0 0 16 16"
       fill="none"
-      {...props}>
+      {...props}
+    >
       <g>
-        <mask id="mask0_90_18926" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-          <path fill="white"/>
+        <mask
+          id="mask0_90_18926"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="16"
+          height="16"
+        >
+          <path fill="white" />
         </mask>
         <g>
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z" fill="white"/>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z"
+            fill="white"
+          />
         </g>
       </g>
       <defs>
         <clipPath>
-        <rect width="16" height="16" fill="white"/>
+          <rect width="16" height="16" fill="white" />
         </clipPath>
       </defs>
     </svg>
-
   )
 }