publish tailwind post with new image diff component

app/globals.css

@@ -53,7 +53,9 @@
 
 @theme inline {
   --font-sans: var(--font-geist-sans);
+  --font-sans--font-feature-settings: "rlig" 1, "calt" 0;
   --font-mono: var(--font-geist-mono);
+  --font-mono--font-feature-settings: "liga" 0;
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -154,9 +156,6 @@
 
   body {
     @apply bg-background text-foreground;
-    font-synthesis-weight: none;
-    font-variant-ligatures: none;
-    text-rendering: optimizeLegibility;
   }
 
   ::-webkit-scrollbar {

app/layout.tsx

@@ -69,9 +69,7 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
           <div className="mx-auto w-full max-w-4xl px-5">
             <Header className="mt-4 mb-6 w-full" />
 
-            <main id={SKIP_NAV_ID} tabIndex={-1}>
-              {children}
-            </main>
+            <main id={SKIP_NAV_ID}>{children}</main>
 
             <Footer className="my-6 w-full" />
           </div>

app/notes/[slug]/page.tsx

@@ -119,16 +119,18 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
           <span>Improve This Post</span>
         </Link>
 
-        <div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
-          <EyeIcon className="inline size-4 shrink-0" />
-          <Suspense
-            // when this loads, the component will count up from zero to the actual number of hits, so we can simply
-            // show a zero here as a "loading indicator"
-            fallback={<span>0</span>}
-          >
-            <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
-          </Suspense>
-        </div>
+        {env.NEXT_PUBLIC_ENV === "production" && (
+          <div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
+            <EyeIcon className="inline size-4 shrink-0" />
+            <Suspense
+              // when this loads, the component will count up from zero to the actual number of hits, so we can simply
+              // show a zero here as a "loading indicator"
+              fallback={<span>0</span>}
+            >
+              <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
+            </Suspense>
+          </div>
+        )}
       </div>
 
       <h1 className="mt-2 mb-3 text-3xl/10 font-bold md:text-4xl/12">
@@ -141,11 +143,15 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
 
       <MDXContent />
 
-      {!frontmatter!.noComments && (
-        <div id="comments" className="border-ring mt-8 min-h-36 border-t-2 pt-8">
-          <Suspense fallback={<Loading boxes={3} width={40} className="mx-auto my-8 block" />}>
-            <Comments title={frontmatter!.title} />
-          </Suspense>
+      {env.NEXT_PUBLIC_ENV === "production" && (
+        <div id="comments" className="mt-8 min-h-36 border-t-2 pt-8">
+          {!frontmatter!.noComments ? (
+            <Suspense fallback={<Loading boxes={3} width={40} className="mx-auto my-8 block" />}>
+              <Comments title={frontmatter!.title} />
+            </Suspense>
+          ) : (
+            <div className="text-foreground/85 text-center font-medium">Comments are disabled for this post.</div>
+          )}
         </div>
       )}
     </>