qwik-link.tsx

import type { HTMLAttributes, JSXOutput, Signal } from '@builder.io/qwik';
import {
  Slot,
  component$
} from '@builder.io/qwik';
import {
  Link as QwikLink
} from '@builder.io/qwik-city';

export function getBaseUrl(base?: string) {
  const baseEnv = import.meta.env.VITE_BASE_URL;
  const baseUrl = base
    ? `${base.startsWith('/') ? '' : '/'}${base}${
        base.endsWith('/') ? '' : '/'
      }`
    : baseEnv && // default false
      `${baseEnv.startsWith('/') ? '' : '/'}${baseEnv}${
        baseEnv.endsWith('/') ? '' : '/'
      }`;
  return baseUrl;
}

type LinkProps = {
  ref?: Signal<HTMLAnchorElement | undefined>;
  class?: string;
  href?: string;
  server?: boolean; // set the default value for your app (or useContext for app settings)
  base?: string;
  target?: '_blank' | '_self' | '_parent' | '_top';
} & HTMLAttributes<HTMLAnchorElement>;


export const Link = component$<LinkProps>(
  ({ base, ref, server = false, ...props }) => {
    // TODO: better ways to get baseUrl
    const baseUrl = getBaseUrl(base);
    const Tag = server ? 'a' : QwikLink;

    // TODO: better way to do this for server-only
    if (props.href === undefined || props.href === '/') {
      // href = '' will link to root
      props.href = '';
    } else {
      if (server && baseUrl && baseUrl !== '/') {
        if (props.href.startsWith('/')) {
          props.href = props.href.replace(/^\//, baseUrl);
        } else {
          props.href = baseUrl + props.href;
        }
      }
      // fallthrough no baseUrl
    }

    return (
      <Tag {...(ref ? { ref } : {})} {...props}>
        <Slot />
      </Tag>
    );
  },
);

VITE_BASE_URL should always be an absolute path starting and ending with /.

Anything else is a configuration error.

We should add a check to the qwik-city plugin.

The qwik base should also be absolute and ending with / but can be a url.

yeah better errors work