How to use the @docusaurus/utils.normalizeUrl function in @docusaurus/utils

permalink: prevItem.metadata.permalink,
                    };
                }
                const nextItem = index < highlights.length - 1 ? highlights[index + 1] : null;
                if (nextItem) {
                    highlight.metadata.nextItem = {
                        title: nextItem.metadata.title,
                        permalink: nextItem.metadata.permalink,
                    };
                }
            });
            //
            // Highlight tags
            //
            const highlightTags = {};
            const tagsPath = utils_1.normalizeUrl([basePageUrl, 'tags']);
            highlights.forEach(highlight => {
                const { tags } = highlight.metadata;
                if (!tags || tags.length === 0) {
                    // TODO: Extract tags out into a separate plugin.
                    // eslint-disable-next-line no-param-reassign
                    highlight.metadata.tags = [];
                    return;
                }
                // eslint-disable-next-line no-param-reassign
                highlight.metadata.tags = tags.map(tag => {
                    if (typeof tag === 'string') {
                        const normalizedTag = lodash_1.default.kebabCase(tag);
                        const permalink = utils_1.normalizeUrl([tagsPath, normalizedTag]);
                        if (!highlightTags[normalizedTag]) {
                            highlightTags[normalizedTag] = {
                                // Will only use the name of the first occurrence of the tag.

highlight.metadata.tags = tags.map(tag => {
                    if (typeof tag === 'string') {
                        const normalizedTag = lodash_1.default.kebabCase(tag);
                        const permalink = utils_1.normalizeUrl([tagsPath, normalizedTag]);
                        if (!highlightTags[normalizedTag]) {
                            highlightTags[normalizedTag] = {
                                // Will only use the name of the first occurrence of the tag.
                                name: tag.toLowerCase(),
                                items: [],
                                permalink,
                            };
                        }
                        highlightTags[normalizedTag].items.push(highlight.id);
                        return {
                            label: tag,
                            permalink,
                        };
                    }
                    else {
                        return tag;

//

      const {
        highlightComponent,
        highlightListComponent,
        highlightTagComponent,
        highlightTagListComponent,
      } = options;

      const aliasedSource = (source: string) =>
        `~highlight/${path.relative(dataDir, source)}`;
      const {addRoute, createData} = actions;
      const {highlights, highlightTags} = highlightContents;
      const {routeBasePath} = options;
      const {siteConfig: {baseUrl = ''}} = context;
      const basePageUrl = normalizeUrl([baseUrl, routeBasePath]);

      const highlightItemsToMetadata: HighlightItemsToMetadata = {};
      highlights.map(highlight => {
        highlightItemsToMetadata[highlight.id] = highlight.metadata;
      });

      //
      // Highlights page
      //

      addRoute({
        path: basePageUrl,
        component: highlightListComponent,
        exact: true,
        modules: {
          items: highlights.map(highlight => {

async loadContent() {
            const { routeBasePath } = options;
            const { siteConfig: { baseUrl = '' } } = context;
            const basePageUrl = utils_1.normalizeUrl([baseUrl, routeBasePath]);
            //
            // Highlights
            //
            highlights = await highlightUtils_1.generateHighlights(contentPath, context, options);
            // Colocate next and prev metadata.
            highlights.forEach((highlight, index) => {
                const prevItem = index > 0 ? highlights[index - 1] : null;
                if (prevItem) {
                    highlight.metadata.prevItem = {
                        title: prevItem.metadata.title,
                        permalink: prevItem.metadata.permalink,
                    };
                }
                const nextItem = index < highlights.length - 1 ? highlights[index + 1] : null;
                if (nextItem) {
                    highlight.metadata.nextItem = {

return {
                            content: {
                                __import: true,
                                path: metadata.source,
                                query: {
                                    truncated: true,
                                },
                            },
                        };
                    }),
                },
            });
            //
            // Highlight tags
            //
            const tagsPath = utils_1.normalizeUrl([basePageUrl, 'tags']);
            const tagsModule = {};
            await Promise.all(Object.keys(highlightTags).map(async (tag) => {
                const { name, items, permalink } = highlightTags[tag];
                tagsModule[tag] = {
                    allTagsPath: tagsPath,
                    slug: tag,
                    name,
                    count: items.length,
                    permalink,
                };
                const tagsMetadataPath = await createData(`${utils_1.docuHash(permalink)}.json`, JSON.stringify(tagsModule[tag], null, 2));
                addRoute({
                    path: permalink,
                    component: highlightTagComponent,
                    exact: true,
                    modules: {

async contentLoaded({ content: highlightContents, actions, }) {
            if (!highlightContents) {
                return;
            }
            //
            // Prepare
            //
            const { highlightComponent, highlightListComponent, highlightTagComponent, highlightTagListComponent, } = options;
            const aliasedSource = (source) => `~highlight/${path_1.default.relative(dataDir, source)}`;
            const { addRoute, createData } = actions;
            const { highlights, highlightTags } = highlightContents;
            const { routeBasePath } = options;
            const { siteConfig: { baseUrl = '' } } = context;
            const basePageUrl = utils_1.normalizeUrl([baseUrl, routeBasePath]);
            const highlightItemsToMetadata = {};
            highlights.map(highlight => {
                highlightItemsToMetadata[highlight.id] = highlight.metadata;
            });
            //
            // Highlights page
            //
            addRoute({
                path: basePageUrl,
                component: highlightListComponent,
                exact: true,
                modules: {
                    items: highlights.map(highlight => {
                        const metadata = highlight.metadata;
                        // To tell routes.js this is an import and not a nested object to recurse.
                        return {

addRoute({
            path: metadata.permalink,
            component: guidePostComponent,
            exact: true,
            modules: {
              content: metadata.source,
            },
          });
        }),
      );

      const {routeBasePath} = options;
      const {
        siteConfig: {baseUrl = ''},
      } = context;
      const basePageUrl = normalizeUrl([baseUrl, routeBasePath]);

      const listPageMetadataPath = await createData(
        `${docuHash(`${basePageUrl}`)}.json`,
        JSON.stringify({}, null, 2),
      );

      let basePageItems = guidePosts.map(guidePost => {
        const {metadata} = guidePost;
        // To tell routes.js this is an import and not a nested object to recurse.
        return {
          content: {
            __import: true,
            path: metadata.source,
            query: {
              truncated: true,
            },

async loadContent() {
      const {routeBasePath} = options;
      const {siteConfig: {baseUrl = ''}} = context;
      const basePageUrl = normalizeUrl([baseUrl, routeBasePath]);

      //
      // Highlights
      //

      highlights = await generateHighlights(contentPath, context, options);

      // Colocate next and prev metadata.
      highlights.forEach((highlight, index) => {
        const prevItem = index > 0 ? highlights[index - 1] : null;
        if (prevItem) {
          highlight.metadata.prevItem = {
            title: prevItem.metadata.title,
            permalink: prevItem.metadata.permalink,
          };
        }

const fileNameMatch = fileName.match(FILENAME_PATTERN);
        if (frontMatter.draft && process.env.NODE_ENV === 'production') {
            return;
        }
        let date = fileNameMatch ? new Date(fileNameMatch[1]) : new Date(Date.now());
        let description = frontMatter.description || excerpt;
        let id = frontMatter.id || frontMatter.title;
        let linkName = relativeSource.replace(/\.mdx?$/, '');
        let tags = frontMatter.tags || [];
        let title = frontMatter.title || linkName;
        highlights.push({
            id: id,
            metadata: {
                date: date,
                description: description,
                permalink: utils_1.normalizeUrl([
                    baseUrl,
                    routeBasePath,
                    frontMatter.id || linkName,
                ]),
                readingTime: readingStats.text,
                source: aliasedSource,
                tags: tags,
                title: title,
                truncated: (truncateMarker === null || truncateMarker === void 0 ? void 0 : truncateMarker.test(content)) || false,
            },
        });
    }));
    return highlights.sort((a, b) => b.metadata.date.getTime() - a.metadata.date.getTime());

return;
      }

      let date = fileNameMatch ? new Date(fileNameMatch[1]) : new Date(Date.now());
      let description = frontMatter.description || excerpt;
      let id = frontMatter.id || frontMatter.title;
      let linkName = relativeSource.replace(/\.mdx?$/, '');
      let tags = frontMatter.tags || [];
      let title = frontMatter.title || linkName;

      highlights.push({
        id: id,
        metadata: {
          date: date,
          description: description,
          permalink: normalizeUrl([
            baseUrl,
            routeBasePath,
            frontMatter.id || linkName,
          ]),
          readingTime: readingStats.text,
          source: aliasedSource,
          tags: tags,
          title: title,
          truncated: truncateMarker?.test(content) || false,
        },
      });
    }),
  );