Some magic to hide the blog post

remix-run · May 15, 2024 · 63b67af · 63b67af
1 parent dd3c139
commit 63b67af
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/app/routes/_extras.blog.$slug.tsx b/app/routes/_extras.blog.$slug.tsx
@@ -17,7 +17,16 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
 
+  const { searchParams } = requestUrl;
+  const unhide = searchParams.get("unhide") === "true";
+
   let post = await getBlogPost(slug);
+
+  // @ts-expect-error - remove before publishing
+  if (!unhide && post.hidden) {
+    throw new Response("Not Found", { status: 404, statusText: "Not Found" });
+  }
+
   return json(
     { siteUrl, post },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },

diff --git a/app/routes/_extras.blog._index.tsx b/app/routes/_extras.blog._index.tsx
@@ -1,15 +1,29 @@
 import * as React from "react";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { useLoaderData, Link } from "@remix-run/react";
+import { useLoaderData, Link, useSearchParams } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
 import { json } from "@remix-run/node";
 import { Subscribe } from "~/ui/subscribe";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { getBlogPostListings } from "~/lib/blog.server";
 
-export const loader = async (_: LoaderFunctionArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const { searchParams } = new URL(request.url);
+
+  const unhide = searchParams.get("unhide") === "true";
+
+  let posts = await getBlogPostListings();
+
+  posts = posts.filter(
+    (post) =>
+      // @ts-expect-error - remove before publishing
+      unhide || !post.hidden!,
+  );
+
+  // posts.filter((post) => post.featured).slice(0, 3);
+
   return json(
-    { posts: await getBlogPostListings() },
+    { posts },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );
 };
@@ -30,6 +44,8 @@ export default function Blog() {
 
   let featuredPosts = data.posts.filter((post) => post.featured);
 
+  const [searchParams] = useSearchParams();
+
   return (
     <main
       className="mt-8 flex max-w-full flex-1 flex-col px-6 sm:container"
@@ -38,7 +54,11 @@ export default function Blog() {
       <div className="md:grid md:grid-cols-12">
         <div className="md:col-span-7">
           <div className="mb-14">
-            <Link to={latestPost.slug} prefetch="intent">
+            <Link
+              // TODO: remove before publishing
+              to={latestPost.slug + `?${searchParams}`}
+              prefetch="intent"
+            >
               <div className="aspect-h-9 aspect-w-16 mb-6">
                 <img
                   className="mb-6 h-full w-full object-cover object-top shadow md:rounded-md"
@@ -56,7 +76,11 @@ export default function Blog() {
           <div className="mt-12 lg:grid lg:grid-cols-2 lg:gap-6">
             {posts.map((post) => (
               <div key={post.slug}>
-                <Link to={post.slug} prefetch="intent">
+                <Link
+                  // TODO: remove before publishing
+                  to={post.slug + `?${searchParams}`}
+                  prefetch="intent"
+                >
                   <div className="aspect-h-9 aspect-w-16 mb-6">
                     <img
                       className="h-full w-full object-cover object-top shadow md:rounded-md"
@@ -85,7 +109,8 @@ export default function Blog() {
                     <div className="flex flex-col">
                       <div className="flex flex-col">
                         <Link
-                          to={post.slug}
+                          // TODO: remove before publishing
+                          to={post.slug + `?${searchParams}`}
                           prefetch="intent"
                           className="text-sm lg:text-base"
                         >

diff --git a/vite.config.mts b/vite.config.mts
@@ -5,7 +5,8 @@ import arraybuffer from "vite-plugin-arraybuffer";
 
 export default defineConfig({
   build: {
-    sourcemap: true,
+    // TODO: remove before publishing
+    // sourcemap: true,
   },
   ssr: {
     noExternal: ["@docsearch/react"],