feat: small ui updates

README.md

@@ -17,6 +17,7 @@ and more.
 - `/writing` - Writing page.
 - `/writing/[slug]` - Static pre-rendered writing pages using [Contentful](https://www.contentful.com).
 - `/journey` - Journey page.
+- `/workspace` - Workspace page.
 - `/bookmarks` - Bookmarks page.
 - `/bookmarks/[id]` - Static pre-rendered bookmarks pages using [Raindrop](https://raindrop.io/).
 - `/api` - API routes.
@@ -26,13 +27,13 @@ and more.
 ```bash
 $ git clone https://github.com/suyalcinkaya/onur.dev.git
 $ cd onur.dev
-$ yarn
-$ yarn dev
+$ bun i
+$ bun dev
 ```
 
 Create a `.env` file similar to [`.env.example`](https://github.com/suyalcinkaya/onur.dev/blob/master/.env.example).
 
-## Built With
+## Tech Stack
 
 - [Next.js](https://nextjs.org)
 - [Tailwind CSS](https://tailwindcss.com)
@@ -41,3 +42,15 @@ Create a `.env` file similar to [`.env.example`](https://github.com/suyalcinkaya
 - [Raindrop](https://raindrop.io)
 - [Supabase](https://supabase.com)
 - [Vercel](https://vercel.com)
+
+## Repo Activity
+
+![Alt](https://repobeats.axiom.co/api/embed/2d43636ebc156829d3e99c6f8c2b68d5aa6ebf93.svg "Repobeats analytics image")
+
+## License
+
+1. Feel free to take inspiration from this code.
+2. Avoid directly copying it, please.
+3. Crediting the author is appreciated.
+
+No complicated licensing. Be kind and help others learn.

next.config.js

@@ -3,8 +3,7 @@ module.exports = {
   reactStrictMode: true,
   trailingSlash: false,
   images: {
-    domains: ['images.ctfassets.net', 'assets.ctfassets.net'],
-    deviceSizes: [320, 375, 768, 1024, 1280]
+    deviceSizes: [390, 435, 768, 1024, 1280]
   },
   async redirects() {
     return [

src/app/bookmarks/[slug]/page.js

@@ -31,7 +31,7 @@ export default async function CollectionPage({ params }) {
   const { collection, raindrops } = await fetchData(slug)
 
   return (
-    <ScrollArea className="flex flex-col" hasScrollTitle>
+    <ScrollArea className="bg-grid flex flex-col" hasScrollTitle>
       <FloatingHeader scrollTitle={collection.title} goBackLink="/bookmarks" />
       <div className="content-wrapper">
         <div className="content @container">

src/app/workspace/page.js

@@ -1,3 +1,5 @@
+import Image from 'next/image'
+
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.jsx'
 import { ScrollArea } from '@/components/scroll-area'
 import { FloatingHeader } from '@/components/floating-header'
@@ -14,17 +16,17 @@ export default async function Workspace() {
       <div className="content-wrapper">
         <div className="content">
           <PageTitle title="Workspace" />
-          <div className="-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-scroll pb-6 md:mx-0 md:grid md:snap-none md:grid-cols-2 md:pb-0">
+          <div className="-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-scroll pb-4 mb-4 md:mx-0 md:grid md:snap-none md:grid-cols-2 md:overflow-x-auto md:pb-0">
             <EmptyPlaceholder />
-            <img
+            <Image
               src="/assets/workspace-1.webp"
               alt="Workspace | 1"
               className="w-2/3 snap-center object-cover md:w-full md:snap-align-none"
               width={756}
               height={1008}
               loading="eager"
             />
-            <img
+            <Image
               src="/assets/workspace-2.webp"
               alt="Workspace | 2"
               className="w-2/3 snap-center object-cover md:w-full md:snap-align-none"

src/components/writing-link.js

@@ -35,6 +35,7 @@ export const WritingLink = ({ post, viewCount, isMobile }) => {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.3 }}
+                className="tabular-nums"
               >
                 · {formattedViewCount} {formattedViewCount === 1 ? 'view' : 'views'}
               </m.span>

src/components/writing-list.js

@@ -86,7 +86,7 @@ export const WritingList = ({ items }) => {
                             {formattedViewCount ? (
                               <m.span
                                 key={`${slug}-views`}
-                                className="flex justify-end"
+                                className="flex justify-end tabular-nums"
                                 title={`${formattedViewCount} views`}
                                 initial={{ opacity: 0 }}
                                 animate={{ opacity: 1 }}

src/components/writing-views.js

@@ -40,7 +40,7 @@ export const WritingViews = ({ slug }) => {
             strokeWidth="1.5"
           ></circle>
         </svg>
-        <span>{formattedViewCount}</span>
+        <span className="tabular-nums">{formattedViewCount}</span>
       </m.div>
     </LazyMotion>
   )

src/lib/constants.js

@@ -1,6 +1,5 @@
 import {
   GithubIcon,
-  TwitterIcon,
   LinkedinIcon,
   InstagramIcon,
   YoutubeIcon,
@@ -14,10 +13,27 @@ import {
 
 export const PROFILES = {
   twitter: {
-    title: 'Twitter',
+    title: 'X (Twitter)',
     username: 'onurschu',
     url: 'https://twitter.com/intent/user?screen_name=onurschu',
-    icon: <TwitterIcon size={16} />
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4"
+        width="44"
+        height="44"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        stroke="#000000"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
+        <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
+      </svg>
+    )
   },
   github: {
     title: 'GitHub',

src/middleware.js

@@ -36,6 +36,9 @@ export function middleware(request, event) {
 }
 
 export const config = {
+  // matcher: '/writing/:path/'
+  // The below solution also filters out the user navigations which is not desired:
+  // See: https://github.com/vercel/next.js/discussions/37736#discussioncomment-7886601
   matcher: [
     {
       source: '/writing/:path/',