How to use @docusaurus/utils - 10 common examples
To help you get started, we’ve selected a few @docusaurus/utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
panjf2000 / gnet / plugins / highlights / index.js View on Github 
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,
};
}guidePosts.map(async guidePost => {
const {metadata} = guidePost;
await createData(
// Note that this created data path must be in sync with metadataPath provided to mdx-loader
`${docuHash(metadata.source)}.json`,
JSON.stringify(metadata, null, 2),
);
addRoute({
path: metadata.permalink,
component: guidePostComponent,
exact: true,
modules: {
content: metadata.source,
},
});
}),
);highlights.map(async highlight => {
const {metadata} = highlight;
await createData(
// Note that this created data path must be in sync with
// metadataPath provided to mdx-loader.
`${docuHash(metadata.source)}.json`,
JSON.stringify(metadata, null, 2),
);
addRoute({
path: metadata.permalink,
component: highlightComponent,
exact: true,
modules: {
content: metadata.source,
},
});
}),
);@docusaurus/utils
Node utility functions for Docusaurus packages.
