Consistency and Lighthouse fixes, update deps. Qodana fix for PRs

Signed-off-by: Filip Piękoś <mail@filippiekos.com>

.env.example

@@ -0,0 +1,2 @@
+# GitHub Auth Token
+GITHUB_TOKEN=

.github/workflows/code_quality.yml

@@ -19,6 +19,6 @@ jobs:
                   ref: ${{ github.event.pull_request.head.sha }}
                   fetch-depth: 0
             - name: "Qodana Scan"
-              uses: JetBrains/qodana-action@v2023.3
+              uses: JetBrains/qodana-action@v2023.3.1
               env:
                   QODANA_TOKEN: ${{ secrets.QODANA_TOKEN }}

app/(content)/_components/code.tsx

@@ -39,15 +39,13 @@ function Code({ children, raw, language, ...props }: CodeProps) {
     return (
         <>
             {language && (
-                <>
-                    <div className="flex justify-between border-b bg-background p-2 text-xs text-slate-500">
-                        <span className="flex select-none items-center gap-2">
-                            <DynamicLanguageIcon className="h-5 w-5" />
-                            <span>{language}</span>
-                        </span>
-                        <CopyButton raw={raw} />
-                    </div>
-                </>
+                <div className="flex justify-between border-b bg-background p-2 text-xs text-slate-500">
+                    <span className="flex select-none items-center gap-2">
+                        <DynamicLanguageIcon className="h-5 w-5" />
+                        <span>{language}</span>
+                    </span>
+                    <CopyButton raw={raw} />
+                </div>
             )}
             <code {...props}>{children}</code>
         </>

app/(content)/articles/[slug]/page.tsx

@@ -2,6 +2,7 @@ import defaults from "@/app.config";
 import { CustomMDX } from "@/app/(content)/_components/mdx";
 import { Navbar } from "@/app/(content)/_components/navbar";
 import { Footer } from "@/components/footer";
+import { Card } from "@/components/ui/card";
 import { getArticles, saveDataToJson } from "@/lib/blog";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
@@ -75,14 +76,17 @@ export default function Article({ params }: { params: { slug: string; metadata:
                     }),
                 }}
             />
-            <header className="w-full max-w-screen-lg rounded-3xl border-2 bg-card p-5 shadow-md md:p-10">
+            <Card type="header" className="w-full max-w-screen-lg rounded-3xl border-2 shadow-md md:p-10">
                 <Navbar />
                 <h1 className="title mt-5 break-words text-4xl font-bold lg:text-5xl">{post.title}</h1>
                 <h2 className="description mb-4 mt-3 break-words">{post.description}</h2>
-            </header>
-            <article className="prose prose-slate w-full max-w-screen-lg flex-1 rounded-3xl border-2 bg-card p-5 shadow-md dark:prose-invert max-[350px]:prose-sm md:p-10">
+            </Card>
+            <Card
+                type="article"
+                className="prose prose-slate w-full max-w-screen-lg flex-1 rounded-3xl border-2 shadow-md dark:prose-invert max-[350px]:prose-sm md:p-10"
+            >
                 <CustomMDX source={post.content} />
-            </article>
+            </Card>
             <Footer className="max-w-screen-lg" />
         </>
     );

app/(content)/posts/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { CustomMDX } from "@/app/(content)/_components/mdx";
 import { Navbar } from "@/app/(content)/_components/navbar";
 import { Footer } from "@/components/footer";
 import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { getPosts, saveDataToJson } from "@/lib/blog";
 import { formatDate } from "@/lib/date";
@@ -84,7 +85,7 @@ export default function Post({ params }: { params: { slug: string; metadata: Met
                     }),
                 }}
             />
-            <header className="w-full max-w-screen-lg rounded-3xl border-2 bg-card p-5 shadow-md md:p-10">
+            <Card type="header" className="w-full max-w-screen-lg rounded-3xl border-2 shadow-md md:p-10">
                 <Navbar link="/" />
                 <Suspense fallback={<Skeleton className="description mb-2 mt-5 h-6 w-48" />}>
                     <h3 className="description mb-2 mt-5 text-muted-foreground">{formatDate(post.date)}</h3>
@@ -108,10 +109,13 @@ export default function Post({ params }: { params: { slug: string; metadata: Met
                         </Link>
                     ))}
                 </div>
-            </header>
-            <article className="prose prose-slate w-full max-w-screen-lg flex-1 rounded-3xl border-2 bg-card p-5 shadow-md dark:prose-invert max-[350px]:prose-sm md:p-10">
+            </Card>
+            <Card
+                type="article"
+                className="prose prose-slate w-full max-w-screen-lg flex-1 rounded-3xl border-2 shadow-md dark:prose-invert max-[350px]:prose-sm md:p-10"
+            >
                 <CustomMDX source={post.content} />
-            </article>
+            </Card>
             <Footer type="posts" className="max-w-screen-lg" />
         </>
     );

app/(content)/tags/[tag]/page.tsx

@@ -2,6 +2,7 @@ import { Navbar } from "@/app/(content)/_components/navbar";
 import { Footer } from "@/components/footer";
 import { PostList } from "@/components/post-list";
 import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
 import { getTags, saveDataToJson } from "@/lib/blog";
 import type { Metadata } from "next";
 import Link from "next/link";
@@ -19,17 +20,17 @@ export const metadata: Metadata = {
 export default function Tag({ params }: { params: { tag: string } }) {
     return (
         <>
-            <header className="w-full max-w-screen-lg rounded-3xl border-2 bg-card p-5 shadow-md md:p-10">
+            <Card type="header" className="w-full max-w-screen-lg rounded-3xl border-2 shadow-md md:p-10">
                 <Navbar link="/" />
                 <div className="mt-4 flex flex-wrap gap-2">
                     <Link href={`/tags/${params.tag}`}>
                         <Badge variant="muted">{params.tag}</Badge>
                     </Link>
                 </div>
-            </header>
-            <article className="w-full max-w-screen-lg flex-1 rounded-3xl border-2 bg-card p-5 shadow-md">
+            </Card>
+            <Card type="article" className="w-full max-w-screen-lg flex-1 rounded-3xl border-2 shadow-md">
                 <PostList type="posts" tag={params.tag} />
-            </article>
+            </Card>
             <Footer className="max-w-screen-lg" />
         </>
     );

app/(main)/_components/achievements.tsx

@@ -14,23 +14,29 @@ export interface IAchievementItem {
 
 function AchievementCard({ achievement, index }: { achievement: IAchievementItem; index: number }) {
     return (
-        <Link href={achievement.url || "/"} key={index} passHref legacyBehavior>
+        <Link
+            href={achievement.url || "/"}
+            key={index}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-grid"
+        >
             <Card
                 variant="outline"
                 hover
                 key={index}
                 className="flex min-h-32 cursor-pointer items-center max-lg:min-h-44 max-lg:flex-col max-lg:justify-center max-lg:text-center lg:gap-5"
             >
-                <div className="basis-1/5 text-center lg:grid">
+                <header className="basis-1/5 text-center lg:grid">
                     {achievement.type === "Scholarship" && <LuGraduationCap className="mx-auto h-12 w-12" />}
                     {achievement.place != "" && <h1 className="text-5xl font-extrabold">{achievement.place}</h1>}
                     <p className="text-xs">{achievement.type}</p>
-                </div>
+                </header>
                 <div className="grid gap-1">
                     <h2 className="line-clamp-2 text-lg font-bold">{achievement.title}</h2>
-                    <h4 className="text-sm font-medium uppercase text-muted-foreground">
+                    <h3 className="text-sm font-medium uppercase text-muted-foreground">
                         {achievement.date} {achievement.location && "— " + achievement.location}
-                    </h4>
+                    </h3>
                 </div>
             </Card>
         </Link>

app/(main)/_components/all.tsx

@@ -2,15 +2,16 @@ import { CustomMDX } from "@/app/(content)/_components/mdx";
 import { Achievements } from "@/app/(main)/_components/achievements";
 import { Projects } from "@/app/(main)/_components/projects";
 import { PostList } from "@/components/post-list";
+import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { readMDXFile } from "@/lib/blog";
 
 export function All() {
     return (
-        <section className="h-full overflow-y-auto rounded-3xl border-2 bg-card pb-5 shadow-md">
+        <Card type="article" className="basis-1/2 overflow-y-auto rounded-3xl border-2 p-0 pb-5 shadow-md">
             <Tabs defaultValue="about">
-                <TabsList className="sticky top-0 w-full border-b-2 bg-card min-[400px]:justify-start">
+                <TabsList className="sticky top-0 z-50 w-full border-b-2 bg-card min-[400px]:justify-start">
                     <TabsTrigger className="min-[400px]:rounded-tl-[1.2rem]" value="about">
                         About
                     </TabsTrigger>
@@ -33,6 +34,6 @@ export function All() {
                     </TabsContent>
                 </section>
             </Tabs>
-        </section>
+        </Card>
     );
 }

app/(main)/_components/about.tsx → app/(main)/_components/aside.tsx

@@ -32,9 +32,13 @@ const socials: ISocialItem[] = defaults.socials.map((social) => ({
     url: social[1],
 }));
 
-export function About() {
+export function Aside() {
     return (
-        <Card variant="outline" className="grid h-full rounded-3xl border-2 shadow-md lg:overflow-y-auto">
+        <Card
+            type="aside"
+            variant="outline"
+            className="grid h-full basis-1/4 rounded-3xl border-2 shadow-md lg:overflow-y-auto"
+        >
             <div className="my-auto flex flex-col items-center text-center">
                 <Image
                     src={profilePic}

app/(main)/_components/projects.tsx

@@ -14,16 +14,16 @@ export interface IProjectItem {
 
 function ProjectCard({ project, index }: { project: IProjectItem; index: number }) {
     return (
-        <Link href={project.url || "/"} key={index} passHref legacyBehavior>
-            <Card variant="outline" hover className="group grid cursor-pointer gap-2 sm:grid-cols-4">
-                <h3 className="mt-1.5 text-xs font-medium uppercase text-muted-foreground sm:col-span-1">
+        <Link href={project.url || "/"} key={index} target="_blank" rel="noopener noreferrer">
+            <Card variant="outline" hover className="group grid gap-2 sm:grid-cols-4">
+                <header className="mt-1.5 text-xs font-medium uppercase text-muted-foreground sm:col-span-1">
                     {project.date}
-                </h3>
+                </header>
                 <div className="grid sm:col-span-3">
-                    <h1 className="items-center text-lg font-medium">
+                    <h3 className="items-center text-lg font-medium">
                         {project.title}
                         <LuArrowUpRight className="inline-block h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
-                    </h1>
+                    </h3>
                     <p className="my-1 text-sm text-muted-foreground">{project.description}</p>
                     <div className="flex flex-wrap gap-2">
                         {project.tags.map((tag, index) => (

app/(main)/page.tsx

@@ -1,18 +1,14 @@
-import { About } from "@/app/(main)/_components/about";
 import { All } from "@/app/(main)/_components/all";
+import { Aside } from "@/app/(main)/_components/aside";
 import { Posts } from "@/app/(main)/_components/posts";
 import { Footer } from "@/components/footer";
 import { GitHubStats } from "./_components/github";
 
 export default function Main() {
     return (
         <>
-            <section className="basis-1/4">
-                <About />
-            </section>
-            <section className="basis-1/2">
-                <All />
-            </section>
+            <Aside />
+            <All />
             <section className="flex basis-1/4 flex-col gap-5">
                 <Posts type="articles" />
                 <GitHubStats />

app/template.tsx

@@ -6,7 +6,7 @@ import React from "react";
 export default function Template({ children }: { children: React.ReactNode }) {
     return (
         <motion.div
-            initial={{ y: 20, opacity: 0 }}
+            initial={{ y: 20, opacity: 0.01 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ ease: "easeInOut", duration: 0.5 }}
         >

components/footer.tsx

@@ -1,18 +1,18 @@
 import defaults from "@/app.config";
 import { PostList } from "@/components/post-list";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { contentTypes } from "@/lib/blog";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 
 export function Footer({ className, type }: { className?: string; type?: keyof typeof contentTypes }) {
     return (
-        <footer
-            className={cn(
-                "w-full items-center justify-center rounded-3xl border-2 p-5 shadow-md sm:p-8 md:p-10",
-                className,
-            )}
+        <Card
+            type="footer"
+            variant="outline"
+            className={cn("w-full items-center justify-center rounded-3xl shadow-md sm:p-8 md:p-10", className)}
         >
             {type && (
                 <div>
@@ -26,6 +26,6 @@ export function Footer({ className, type }: { className?: string; type?: keyof t
                 </Link>
                 <ThemeToggle className="text-muted-foreground" />
             </div>
-        </footer>
+        </Card>
     );
 }

components/post-item.tsx

@@ -3,10 +3,11 @@ import { contentTypes } from "@/lib/blog";
 import { formatDate } from "@/lib/date";
 import Image from "next/image";
 import Link from "next/link";
+import { LuArrowUpRight } from "react-icons/lu";
 
 export const PostListItem = ({ post, type }: { post: any; type: keyof typeof contentTypes }) => (
     <Link key={post.slug} href={`/${type}/${post.slug}`}>
-        <Card variant="outline" hover className="flex items-center gap-3 border-none p-3">
+        <Card variant="outline" hover className="group flex items-center gap-3 border-none p-3">
             {post.image && (
                 <Image
                     className="h-16 w-16 rounded-xl bg-white object-contain ring-2 ring-ring"
@@ -19,7 +20,10 @@ export const PostListItem = ({ post, type }: { post: any; type: keyof typeof con
             )}
             <div className="grid">
                 {post.date && <p className="text-sm text-muted-foreground">{formatDate(post.date)}</p>}
-                <h3 className="line-clamp-2 text-lg font-medium sm:line-clamp-3">{post.title}</h3>
+                <h3 className="line-clamp-2 items-center text-lg font-medium sm:line-clamp-3">
+                    {post.title}
+                    <LuArrowUpRight className="inline-block h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+                </h3>
                 {post.description && <h4 className="line-clamp-2">{post.description}</h4>}
             </div>
         </Card>

components/ui/card.tsx

@@ -4,6 +4,14 @@ import * as React from "react";
 
 const CardVariants = cva("rounded-xl border bg-card shadow-sm p-5", {
     variants: {
+        type: {
+            aside: "aside",
+            article: "article",
+            header: "header",
+            nav: "nav",
+            section: "section",
+            footer: "footer",
+        },
         variant: {
             default: "bg-card",
             outline: "bg-transparent",
@@ -14,6 +22,7 @@ const CardVariants = cva("rounded-xl border bg-card shadow-sm p-5", {
         },
     },
     defaultVariants: {
+        type: "section",
         variant: "default",
         hover: false,
     },
@@ -23,9 +32,13 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Variant
     hover?: boolean;
 }
 
-const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, hover = false, variant, ...props }, ref) => (
-    <div ref={ref} className={cn(CardVariants({ hover, variant: variant }), className)} {...props} />
-));
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+    ({ className, type, hover = false, variant, ...props }, ref) => {
+        const Comp = type || "section";
+        return <Comp ref={ref} className={cn(CardVariants({ hover, variant: variant }), className)} {...props} />;
+    },
+);
+
 Card.displayName = "Card";
 
 export { Card };

package.json

@@ -19,13 +19,13 @@
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
-        "@sentry/nextjs": "^7.106.0",
+        "@sentry/nextjs": "^7.106.1",
         "@vercel/analytics": "^1.2.2",
         "@vercel/speed-insights": "^1.0.10",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
-        "framer-motion": "^11.0.8",
+        "framer-motion": "^11.0.12",
         "next": "14.1.3",
         "next-mdx-remote": "^4.4.1",
         "next-themes": "^0.2.1",