gatsby#withPrefix TypeScript Examples

render() {
		const { title, narrowLayout } = this.props;
		return (
			<React.Fragment>

				<StaticQuery
					query={query}
					render={(data) => (
						<Helmet titleTemplate={data.site.siteMetadata.titleTemplate} defaultTitle={data.site.siteMetadata.defaultTitle}>
							{title && <title>{title}</title>}
							<meta property='og:type' content='website' />
							<meta property='og:title' content={`${title ? `${title} - ` : ''}${data.site.siteMetadata.defaultTitle}`} />
							<meta property='og:site_name' content='DataCore' />
							<meta property='og:image' content={`${data.site.siteMetadata.baseUrl}/media/logo.png`} />
							<meta property='og:description' content={data.site.siteMetadata.defaultDescription} />
							<link id='defaultThemeCSS' rel='stylesheet' type='text/css' href={withPrefix('styles/semantic.slate.css')} />
							<link rel='stylesheet' type='text/css' href={withPrefix('styles/easymde.min.css')} />
							<script src={withPrefix('styles/theming.js')} type='text/javascript' />
							<script src={withPrefix('polyfills.js')} type='text/javascript' />
						</Helmet>
					)}
				/>
				<TopMenu narrowLayout={narrowLayout}>
					{this.props.children}
				</TopMenu>
			</React.Fragment>
		);
	}

removePathPrefix = (pathname: string) => {
  const pathPrefix = withPrefix('/');
  if (pathname.startsWith(pathPrefix)) {
    return pathname.replace(pathPrefix, '/');
  }

  return pathname;
}

AnchorTag = ({
  title,
  href,
  references = [],
  withoutLink,
  withoutPopup,
  currentSlug,
  currentLocation,
  refWordMdxSlugDict,
  wikiLinkLabelTemplateFn,
  ...restProps
}: Props) => {
  // prettier-ignore
  const { anchorSlug } = genHrefInfo({ currentSlug, href })

  function getSlugByRefWord(title: string) {
    if (!refWordMdxSlugDict) return;
    if (title in refWordMdxSlugDict) return `/${refWordMdxSlugDict[title]}`
  }

  let ref: Reference | undefined

  ref = references.find((x) => {
    const refSlug = x.target.parent?.fields.slug || ''
    return (
      `/${x.refWord}` === href ||
      getSlugByRefWord(title) === refSlug ||
      withPrefix(refSlug) === withPrefix(anchorSlug)
    )
  })
  // console.log('ref', ref, 'href', href, 'anchorSlug', anchorSlug, references)

  let content
  let popupContent
  let child

  if (ref && ref.target.parent) {
    // console.log('reference is', ref, 'withoutLink', withoutLink)
    const targetFileNode = ref.target.parent
    const fields = ref.target.parent.fields
    const mdxBody = ref.target.body
    const nestedComponents = {
      a(props) {
        const {
          anchorSlug: nestedAnchorSlug,
          isExternalLink: nestedIsExternalLink,
        } = genHrefInfo({ currentSlug, href: props.href })
        if (nestedIsExternalLink) {
          return <a href={props.href}>{props.children}</a>
        } else {
          let toSlug = nestedAnchorSlug
          if (refWordMdxSlugDict) {
            // nested content's anchor label will not be replaced with topic title,
            // so it can be used to form slug
            const maybeSlug = getSlugByRefWord(props.title)
            if (maybeSlug) toSlug = maybeSlug
          }
          return <Link to={toSlug}>{props.children}</Link>
        }
      },
      p(props) {
        return <span {...props} />
      },
    }
    content = wikiLinkLabelTemplateFn
      ? wikiLinkLabelTemplateFn({ refWord: ref.refWord, title: fields.title })
      : restProps.children
    popupContent = (
      <div id={targetFileNode.id} className="anchor-tag__popover with-markdown">
        <React.Fragment>
          <MDXProvider components={nestedComponents}>
            <MDXRenderer>{mdxBody}</MDXRenderer>
          </MDXProvider>
        </React.Fragment>
      </div>
    )
    child = (
      <Link
        {...restProps}
        to={padHrefWithAnchor(fields.slug, ref.targetAnchor)}
        title={title}
      >
        {content}
      </Link>
    )
  } else {
    content = restProps.children
    popupContent = <div className="popover no-max-width">{href}</div>
    child = (
      <a
        {...restProps}
        href={
          !href || (href.indexOf && href.indexOf('#') === 0)
            ? href
            : withPrefix(href)
        }
        title={title}
      />
    )
    return child
  }

  if (withoutLink) {
    return <span>{content}</span>
  }

  if (withoutPopup) {
    return child
  }

  return (
    <Tippy
      animation="shift-away"
      content={popupContent}
      maxWidth="none"
      interactive
    >
      {child}
    </Tippy>
  )
}

Layout: React.FC<Props> = ({ location, children }) => {
  const rootPath = withPrefix("/");
  const notesPath = withPrefix("/notes/");
  const infoPath = withPrefix("/info/");
  const otherPath = withPrefix("/other/");
  let header;

  if (
    location.pathname === rootPath ||
    location.pathname === notesPath ||
    location.pathname === otherPath ||
    location.pathname === infoPath
  ) {
    header = <StyledHeader />;
  } else {
    header = (
      <h3
        style={{
          fontFamily: `Roboto, sans-serif`,
          marginTop: 0,
        }}
      >
        <Link
          style={{
            boxShadow: `none`,
            color: `inherit`,
          }}
          to={`/`}
        >
          Back to home
        </Link>
      </h3>
    );
  }

  const [spook, setSpooks] = useState<SpookSetting | null>(null);

  const renderSpook = isSpooktober
    ? (setting: SpookSetting) => {
        return (
          <div
            style={{
              position: "fixed",
              left: setting.x,
              top: setting.y,
              zIndex: 10,
            }}
          >
            <img src={setting.url} alt="A spooky ghost" />
            <div
              style={{
                position: "absolute",
                left: 10,
                bottom: 40,
              }}
            >
              Powered by Giphy
            </div>
          </div>
        );
      }
    : undefined;

  const spookEvent = isSpooktober
    ? async (x: number, y: number) => {
        if (!process.env.GATSBY_GIPHY_KEY) {
          console.log("Missing GATSBY_GIPHY_KEY environment variable");
          return;
        }
        if (!Math.floor(Math.random() * 5)) {
          const gif = await axios.get<GiphyResponse>(
            `https://api.giphy.com/v1/gifs/random?tag=skeleton&api_key=${String(
              process.env.GATSBY_GIPHY_KEY
            )}`
          );
          setSpooks({
            x: x,
            y: y,
            url: gif.data.data.images.original.url,
          });
          clearTimeout(spookTimer);
          spookTimer = setTimeout(setSpooks, 2000, null);
        }
      }
    : undefined;

  return (
    <Theme>
      <div
        style={{
          marginLeft: `auto`,
          marginRight: `auto`,
          maxWidth: rhythm(24),
          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
        }}
        role="button"
        {...(isSpooktober
          ? {
              tabIndex: 0,
              onMouseDown: async (e) => {
                e.persist();
                await spookEvent?.(e.clientX, e.clientY);
              },
              onKeyDown: async () => {
                const rects = document.activeElement?.getBoundingClientRect();
                await spookEvent?.(rects?.top ?? 0, rects?.left ?? 0);
              },
            }
          : {})}
      >
        <header>{header}</header>
        <Nav />
        <main>
          {isSpooktober && spook && renderSpook?.(spook)}
          {children}
        </main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a> |{" "}
          <Link to={"/about/"}>About</Link>
        </footer>
      </div>
    </Theme>
  );
}

wrapPageElement = (
  {element, props}: WrapPageElementBrowserArgs<any, PageContext>,
  {
    i18nextOptions = {},
    redirect = true,
    generateDefaultLanguagePage = false,
    siteUrl,
    localeJsonNodeName = 'locales',
    fallbackLanguage
  }: PluginOptions
) => {
  if (!props) return;
  const {data, pageContext, location} = props;
  const {routed, language, languages, originalPath, defaultLanguage, path} = pageContext.i18n;
  const isRedirect = redirect && !routed;

  if (isRedirect) {
    const {search} = location;

    // Skip build, Browsers only
    if (typeof window !== 'undefined') {
      let detected =
        window.localStorage.getItem(LANGUAGE_KEY) ||
        browserLang({
          languages,
          fallback: fallbackLanguage || language
        });

      if (!languages.includes(detected)) {
        detected = language;
      }

      window.localStorage.setItem(LANGUAGE_KEY, detected);

      if (detected !== defaultLanguage) {
        const queryParams = search || '';
        const newUrl = withPrefix(
          `/${detected}${removePathPrefix(location.pathname)}${queryParams}${location.hash}`
        );
        // @ts-ignore
        window.___replace(newUrl);
        return null;
      }
    }
  }

  const localeNodes: Array<{node: LocaleNode}> = data?.[localeJsonNodeName]?.edges || [];

  if (languages.length > 1 && localeNodes.length === 0 && process.env.NODE_ENV === 'development') {
    console.error(
      outdent`
      No translations were found in "${localeJsonNodeName}" key for "${originalPath}". 
      You need to add a graphql query to every page like this:
      
      export const query = graphql\`
        query($language: String!) {
          ${localeJsonNodeName}: allLocale(language: {eq: $language}}) {
            edges {
              node {
                ns
                data
                language
              }
            }
          }
        }
      \`;
      `
    );
  }

  const namespaces = localeNodes.map(({node}) => node.ns);

  // We want to set default namespace to a page namespace if it exists
  // and use other namespaces as fallback
  // this way you dont need to specify namespaces in pages
  let defaultNS = i18nextOptions.defaultNS || 'translation';
  defaultNS = namespaces.find((ns) => ns !== defaultNS) || defaultNS;
  const fallbackNS = namespaces.filter((ns) => ns !== defaultNS);

  const resources: Resource = localeNodes.reduce<Resource>((res: Resource, {node}) => {
    const parsedData: ResourceKey = JSON.parse(node.data);

    if (!(node.language in res)) res[node.language] = {};

    res[node.language][node.ns] = parsedData;

    return res;
  }, {});

  const i18n = i18next.createInstance();

  i18n.init({
    ...i18nextOptions,
    resources,
    lng: language,
    fallbackLng: defaultLanguage,
    defaultNS,
    fallbackNS,
    react: {
      useSuspense: false
    }
  });

  if (i18n.language !== language) {
    i18n.changeLanguage(language);
  }

  const context = {
    routed,
    language,
    languages,
    originalPath,
    defaultLanguage,
    generateDefaultLanguagePage,
    siteUrl,
    path
  };

  return withI18next(i18n, context)(element);
}