Dynamically determine application href hostname for self-hosted instances

frontend/src/app/[id]/page.tsx

@@ -12,6 +12,7 @@ import { makeClass, relativeTimeFormat } from '/src/utils'
 
 import EventAvailabilities from './EventAvailabilities'
 import styles from './page.module.scss'
+import appLink from '/src/utils/appLink'
 
 interface PageProps {
   params: { id: string }
@@ -49,10 +50,10 @@ const Page = async ({ params }: PageProps) => {
         >{t('common:created', { date: relativeTimeFormat(Temporal.Instant.fromEpochSeconds(event.created_at), i18n.language) })}</span>
 
         <Copyable className={styles.info}>
-          {`https://crab.fit/${event.id}`}
+          {appLink(event.id)}
         </Copyable>
         <p className={makeClass(styles.info, styles.noPrint)}>
-          <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${event.id}`)}`}>_</a>_</Trans>
+          <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} ${appLink(event.id)}`)}`}>_</a>_</Trans>
         </p>
       </Content>
     </Suspense>

frontend/src/app/layout.tsx

@@ -8,11 +8,12 @@ import { fallbackLng } from '/src/i18n/options'
 import { useTranslation } from '/src/i18n/server'
 
 import './global.css'
+import appLink from '../utils/appLink'
 
 const karla = Karla({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://crab.fit'),
+  metadataBase: new URL(appLink('')),
   title: {
     absolute: 'Crab Fit',
     template: '%s - Crab Fit',

frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx

@@ -5,6 +5,7 @@ import { EventResponse } from '/src/config/api'
 import { useTranslation } from '/src/i18n/client'
 
 import styles from './EventInfo.module.scss'
+import appLink from '/src/utils/appLink'
 
 interface EventInfoProps {
   event: EventResponse
@@ -16,10 +17,10 @@ const EventInfo = ({ event }: EventInfoProps) => {
   return <div className={styles.wrapper}>
     <h2>{event.name}</h2>
     <Copyable className={styles.info}>
-      {`https://crab.fit/${event.id}`}
+      {appLink(event.id)}
     </Copyable>
     <p className={styles.info}>
-      <Trans i18nKey="event:nav.shareinfo_alt" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('nav.email_body')} https://crab.fit/${event.id}`)}`} target="_blank">_</a>_</Trans>
+      <Trans i18nKey="event:nav.shareinfo_alt" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('nav.email_body')} ${appLink(event.id)}`)}`} target="_blank">_</a>_</Trans>
     </p>
   </div>
 }

frontend/src/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import logo from '/src/res/logo.svg'
 import { makeClass } from '/src/utils'
 
 import styles from './Header.module.scss'
+import appLink from '/src/utils/appLink'
 
 const samuraiBob = localFont({
   src: './samuraibob.woff2',
@@ -37,6 +38,7 @@ const Header = async ({ isFull, isSmall }: HeaderProps) => {
       </div>
       <span className={styles.tagline}>{t('common:tagline')}</span>
     </Link>}
+    <p>{appLink('test')}</p>
   </header>
 }
 

frontend/src/utils/appLink.tsx

@@ -0,0 +1,7 @@
+export default function appLink(path: string) {
+  const proto = process?.env?.NODE_ENV === 'production' ? 'https' : 'http'
+  const host =
+    process?.env?.NEXT_PUBLIC_HOSTNAME ??
+    (process?.env?.NODE_ENV === 'production' ? 'crab.fit' : 'localhost:3000')
+  return `${proto}://${host}/${path}`
+}