Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lengyel-arpad85 merged 3 commits into from
Mar 11, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1db4ca0
query parameter added for conditional display of header & footer
lengyel-arpad85 Mar 10, 2025
5c38c2e
include back button logic
lengyel-arpad85 Mar 10, 2025
9a278b3
Merge branch 'main' into al/conditional-header-and-footer
DarianM Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions frontend/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import type { LinksFunction, MetaFunction } from '@remix-run/node'
import type {
LinksFunction,
LoaderFunctionArgs,
MetaFunction
} from '@remix-run/node'
import {
Links,
Meta,
Expand All @@ -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
Expand All @@ -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"
Expand Down
24 changes: 20 additions & 4 deletions frontend/app/routes/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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>
)
Expand Down
17 changes: 14 additions & 3 deletions frontend/app/routes/create.$type.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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}
Expand Down