feat: query parameter added for conditional display of header & footer (#53)

lengyel-arpad85 · DarianM · web-flow · commit 6eccaf72d0b0 · 2025-03-11T19:26:15.000+02:00
* query parameter added for conditional display of header &amp; footer
* include back button logic

---------

Co-authored-by: darian &lt;darian410@gmail.com&gt;
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
@@ -1,4 +1,8 @@
-import type { LinksFunction, MetaFunction } from '@remix-run/node'
+import type {
+  LinksFunction,
+  LoaderFunctionArgs,
+  MetaFunction
+} from '@remix-run/node'
 import {
   Links,
   Meta,
@@ -16,20 +20,25 @@ import stylesheet from '~/tailwind.css?url'
 import { Button, Footer, Header, Snackbar } from './components/index.js'
 import { XCircle } from './components/icons.js'
 
-export const loader = async () => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url)
+  const contentOnlyParam = url.searchParams.get('contentOnly')
+
   let message
 
   if (!message) {
-    return json({ message: null })
+    return json({ message: null, contentOnlyParam })
   }
 
-  return json({ message })
+  return json({ message, contentOnlyParam })
 }
 
 export default function App() {
-  const { message } = useLoaderData<typeof loader>()
+  const { message, contentOnlyParam } = useLoaderData<typeof loader>()
   const [snackbarOpen, setSnackbarOpen] = useState(false)
 
+  const contentOnly = contentOnlyParam != null
+
   useEffect(() => {
     if (!message) {
       return
@@ -48,10 +57,10 @@ export default function App() {
       <body className="h-screen">
         <main className="h-auto min-h-full flex flex-col justify-between">
           <div className="h-full flex flex-col  bg-[url(/images/bg-tile.svg)] bg-[auto_25em]">
-            <Header />
+            {!contentOnly && <Header />}
             <Outlet />
           </div>
-          <Footer />
+          {!contentOnly && <Footer />}
         </main>
         <Snackbar
           id="snackbar"
diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
@@ -1,4 +1,5 @@
-import type { MetaFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import { json, useLoaderData } from '@remix-run/react'
 import { TypeCard } from '~/components/index.js'
 import { availableTools } from '~/lib/presets.js'
 
@@ -9,13 +10,28 @@ export const meta: MetaFunction = () => {
   ]
 }
 
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url)
+  const contentOnlyParam = url.searchParams.get('contentOnly')
+
+  return json({ contentOnlyParam })
+}
+
 export default function Index() {
+  const { contentOnlyParam } = useLoaderData<typeof loader>()
+  const contentOnly = contentOnlyParam != null
+
   return (
     <div className="h-full p-14">
       <div className="flex flex-wrap justify-center gap-6 max-w-prosex p-4 mx-auto">
-        {availableTools.map((tool) => (
-          <TypeCard key={tool.link} {...tool} />
-        ))}
+        {availableTools.map((tool) => {
+          const toolLink = `${tool.link}${contentOnly ? '?contentOnly' : ''}`
+          const props = {
+            ...tool,
+            link: toolLink
+          }
+          return <TypeCard key={toolLink} {...props} />
+        })}
       </div>
     </div>
   )
diff --git a/frontend/app/routes/create.$type.tsx b/frontend/app/routes/create.$type.tsx
@@ -44,6 +44,9 @@ import {
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const elementType = params.type
 
+  const url = new URL(request.url)
+  const contentOnlyParam = url.searchParams.get('contentOnly')
+
   const cookies = request.headers.get('cookie')
 
   const session = await messageStorage.getSession(cookies)
@@ -56,15 +59,23 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   const ilpayUrl = process.env.ILPAY_URL || ''
   const toolsUrl = process.env.FRONTEND_URL || ''
 
-  return { elementType, defaultConfig, message, ilpayUrl, toolsUrl }
+  return {
+    elementType,
+    defaultConfig,
+    message,
+    ilpayUrl,
+    toolsUrl,
+    contentOnlyParam
+  }
 }
 
 export default function Create() {
-  const { elementType, defaultConfig, ilpayUrl, toolsUrl } =
+  const { elementType, defaultConfig, ilpayUrl, toolsUrl, contentOnlyParam } =
     useLoaderData<typeof loader>()
   const response = useActionData<typeof action>()
   const { state } = useNavigation()
   const isSubmitting = state === 'submitting'
+  const contentOnly = contentOnlyParam != null
 
   const [openWidget, setOpenWidget] = useState(false)
   const [toolConfig, setToolConfig] = useState<ElementConfigType>(defaultConfig)
@@ -179,10 +190,10 @@ export default function Create() {
   return (
     <div className="flex flex-col gap-6 min-w-128 max-w-prose mx-auto my-8">
       <PageHeader
-        link="/"
         title={`Create ${elementType}`}
         elementType={elementType}
         setImportModalOpen={setImportModalOpen}
+        link={`/${contentOnly ? '?contentOnly' : ''}`}
         setNewVersionModalOpen={setNewVersionModalOpen}
         setConfirmModalOpen={setConfirmModalOpen}
         versionOptions={versionOptions}
