extract isProd util

Author: nemanjam

src/components/utils/breakpoints.astro

@@ -1,21 +1,11 @@
----
-import { CONFIG_SERVER } from '@/config/server';
-
-const isProd = CONFIG_SERVER.NODE_ENV === 'production';
-
-// component just for debugging responsive styles
----
-
-{
-  !isProd && (
-    <div class="fixed top-24 right-4 z-50 flex size-8 p-3 items-center justify-center rounded-full text-base-100 bg-content text-sm font-mono">
-      <div class="block xs:hidden">2xs</div>
-      <div class="hidden xs:block sm:hidden">xs</div>
-      <div class="hidden sm:block md:hidden">sm</div>
-      <div class="hidden md:block lg:hidden">md</div>
-      <div class="hidden lg:block xl:hidden">lg</div>
-      <div class="hidden xl:block 2xl:hidden">xl</div>
-      <div class="hidden 2xl:block">2xl</div>
-    </div>
-  )
-}
+<div
+  class="fixed top-24 right-4 z-50 flex size-8 p-3 items-center justify-center rounded-full text-base-100 bg-content text-sm font-mono"
+>
+  <div class="block xs:hidden">2xs</div>
+  <div class="hidden xs:block sm:hidden">xs</div>
+  <div class="hidden sm:block md:hidden">sm</div>
+  <div class="hidden md:block lg:hidden">md</div>
+  <div class="hidden lg:block xl:hidden">lg</div>
+  <div class="hidden xl:block 2xl:hidden">xl</div>
+  <div class="hidden 2xl:block">2xl</div>
+</div>

src/layouts/Base.astro

@@ -6,6 +6,7 @@ import Footer from '@/components/Footer.astro';
 import Header from '@/components/Header.astro';
 import ScrollToTop from '@/components/react/ScrollToTop';
 import Breakpoints from '@/components/utils/breakpoints.astro';
+import { isProd } from '@/utils/environment';
 
 import type { BaseHeadProps } from '@/components/BaseHead.astro';
 
@@ -27,6 +28,6 @@ const { metadata } = Astro.props as BaseProps;
       <Icon name="mdi:arrow-up-thin" class="h-10 w-10 text-content hover:text-links-hover" />
     </ScrollToTop>
 
-    <Breakpoints />
+    {!isProd && <Breakpoints />}
   </body>
 </html>

src/modules/common.ts

@@ -1,5 +1,6 @@
 import { getCollection } from 'astro:content';
 
+import { isProd } from '@/utils/environment';
 import { isPreviewMode } from '@/utils/preview';
 
 import type { CollectionEntry, CollectionKey } from 'astro:content';
@@ -24,7 +25,7 @@ export const getAllEntries = async <T extends CollectionKey>(
   const { skipSort = false, includeDrafts = isPreviewMode() } = options ?? {};
 
   const entries = await getCollection<T>(collectionName, ({ data }) => {
-    const isProdAndDraft = import.meta.env.PROD && data.draft;
+    const isProdAndDraft = isProd && data.draft;
     return !isProdAndDraft || includeDrafts;
   });
 

src/utils/environment.ts

@@ -0,0 +1,3 @@
+import { CONFIG_SERVER } from '@/config/server';
+
+export const isProd = CONFIG_SERVER.NODE_ENV === 'production';