fix: article page and profile page

src/app/[username]/[slug]/page.tsx

@@ -187,7 +187,7 @@ export default async function PostPage({ params }: PostPageProps) {
 
           <h1
             itemProp="name headline"
-            className="mt-2 text-pretty font-serif text-5xl font-bold leading-none tracking-wider sm:text-7xl sm:leading-tight"
+            className="mt-2 overflow-hidden text-ellipsis text-pretty font-serif text-5xl font-bold leading-none tracking-wider sm:text-7xl sm:leading-tight"
           >
             {post.title}
           </h1>
@@ -275,7 +275,7 @@ export default async function PostPage({ params }: PostPageProps) {
             href="http://creativecommons.org/licenses/by-nc/4.0/"
             className="hover:underline"
           >
-            CC BY-NC 4.0 Licence
+            CC BY-NC 4.0 License
           </Link>
         </p>
       </footer>

src/app/[username]/page.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import { getServerAuthSession } from "@/server/auth";
 import { db } from "@/server/db";
 import { api } from "@/trpc/server";
+import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
 
 type UserPageProps = {
   params: { username: string };
@@ -160,16 +161,22 @@ export default async function UserPage({ params }: UserPageProps) {
               {user?.bio}
             </p>
 
-            <h4 className="mb-2 text-lg font-semibold">Link Sosial Media</h4>
+            <h4 className="mb-2 text-lg font-semibold">Media Sosial</h4>
             <div className="flex flex-col gap-1">
               {user?.socialMedia.map((social, i) => (
                 <Link
                   itemProp="url"
                   key={i}
                   href={social.url}
-                  className="underline-offset-4 hover:underline"
+                  target="_blank"
+                  className="flex w-fit items-center gap-x-2 underline-offset-4 hover:underline"
                 >
-                  {social.name} - {social.username}
+                  {social.name === "instagram" ? (
+                    <SiInstagram className="h-4 w-4" />
+                  ) : (
+                    <SiGithub className="h-4 w-4" />
+                  )}
+                  {social.username}
                 </Link>
               ))}
             </div>

src/server/api/routers/user.ts

@@ -162,6 +162,11 @@ export const userRouter = createTRPCRouter({
     thisMonth.setMonth(thisMonth.getMonth() - 1);
 
     return await ctx.db.user.findMany({
+      orderBy: {
+        posts: {
+          _count: "asc",
+        },
+      },
       where: {
         posts: {
           some: {

src/styles/globals.css

@@ -80,6 +80,12 @@ div[data-youtube-video] {
   margin: 0 16px;
 }
 
+@media screen and (max-width: 768px) {
+  div[data-youtube-video] {
+    margin: 0;
+  }
+}
+
 div[data-youtube-video].ProseMirror-selectednode {
   background: hsl(var(--muted));
 }