Replies: 6 comments
-
This seems like a temporary error, why would it fail otherwise?
This should work # Introduction
{JSON.stringify(frontMatter)}
I can't help if you don't share a repro, or at least a code sample and the errors you encountered with it. A I don't know what Are you comfortable with the React hooks model and understand where you can use them? Including inside MDX? You probably want to crate your own custom import {useHistory} from '@docusaurus/router';
function Tr() {
const history = useHistory();
return <tr onClick={() => history.push("/path")}/>
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you Sébastien, indeed the FrontMatter issue was network related - despide the fact that any other yarn package worked w/o any issues. Regarding the Links i could fix it with ...
function hasProtocol(url) { return /^(?:\w*:|\/\/)/.test(url); }
function isInternalUrl(url) { return typeof url !== 'undefined' && !hasProtocol(url); }
const handleRowClick = (rfcId) => {
const targetLink = `/knowledgebase/docs/RFC/${rfcId}`;
if (isInternalUrl(targetLink)) {
window.docusaurus?.prefetch?.(targetLink);
window.history.pushState(null, '', targetLink);
window.dispatchEvent(new PopStateEvent('popstate', { state: null }));
} else {
window.location.href = targetLink;
}
};
...
return (
...
{rfcData.map((rfc) => (
<tr key={rfc.id} onClick={() => handleRowClick(rfc.id)}>
<td>
... |
Beta Was this translation helpful? Give feedback.
-
|
The frontMatter Installation worked now - restarted internet router. But i don't get it work the way i would like to. When i am inside my |
Beta Was this translation helpful? Give feedback.
-
|
What i want to do is accessing the frontMatter data from a page / document and render it inside the sidebar
|
Beta Was this translation helpful? Give feedback.
-
|
Currently i hack it kinda by streaming ugly strings into the sidebar docs/RFC/RFC-0001.mdx---
slug: 1
title: RFC-0001 Any title text|Rejected # Here i hack the Status into the `title` which
# becomes the `label` inside the `DocSidebarItem`
description: Any title text
pagination_label: Any title text
owner: Owner
author: Author
status: Rejected
implementation: http:/impurl.org
tags: ['RFC']
---src/theme/DocSidebarItem/Link/index.tsx...
const rfcPattern = /^RFC-(\d{4})\s+(.+)/; // Matches "RFC-0001 <title>"
const rfcMatch = label.match(rfcPattern);
var rfcTitle = '';
var docSidebarItemLinkLabelClass = '';
var docSidebarItemLinkStatusClass = '';
if (rfcMatch) {
var status = label.split('|')[1];
if (status != undefined) docSidebarItemLinkStatusClass = 'doc-sidebar-item-link-status';
if (status == 'Accepted') docSidebarItemLinkStatusClass += ' doc-sidebar-item-link-status-accepted';
if (status == 'Accepted - In Progress') docSidebarItemLinkStatusClass += ' doc-sidebar-item-link-status-accepted-inprogress';
if (status == 'Draft') docSidebarItemLinkStatusClass += ' doc-sidebar-item-link-status-draft';
if (status == 'Open') docSidebarItemLinkStatusClass += ' doc-sidebar-item-link-status-open';
if (status == 'Rejected') docSidebarItemLinkStatusClass += ' doc-sidebar-item-link-status-rejected';
if (status == 'Superseded') docSidebarItemLinkStatusClass += ' doc-sidebar-item-link-status-superseded';
const rfcNumber = rfcMatch[1];
rfcTitle = rfcMatch[2].split('|')[0];
label = `RFC-${rfcNumber}`;
docSidebarItemLinkLabelClass = 'doc-sidebar-item-link-label';
}
...Would be much better to be able to directly access the
|
Beta Was this translation helpful? Give feedback.
-
|
Could fix the frontMatter issues by using a script which i execute each time i start or build the docs package.json...
"scripts": {
...
"start": "yarn generate-rfc-data && docusaurus start --no-open",
"build": "yarn generate-rfc-data && docusaurus build",
...
"watch": "nodemon --watch docusaurus.config.ts --watch docs --watch src --ext css,md,mdx,js,jsx,ts,tsx --exec 'yarn build && yarn serve'",
"generate-rfc-data": "node src/plugins/generateRfcData.js"
...src/plugins/generateRfcData.jsconst fs = require('fs');
const path = require('path');
const yaml = require('js-yaml');
const docsDir = path.resolve(__dirname, '../../docs/RFC');
const outputFile = path.resolve(__dirname, '../../src/rfcData.json');
function generateRfcData() {
const files = fs.readdirSync(docsDir);
const rfcData = files.reduce((acc, file) => {
if (file.startsWith('RFC-') && file.endsWith('.mdx')) {
const filePath = path.join(docsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const match = content.match(/---\n([\s\S]+?)\n---/);
// Parse the frontmatter using js-yaml
const frontMatter = match ? match[1] : '{}';
let data = {};
try {
data = yaml.load(frontMatter);
data.subtitle = data.title.slice(9);
} catch (error) {
console.error(`Error parsing YAML frontmatter in ${file}:`, error);
}
if (data.slug && data.slug != 0) {
acc.push({
id: data.slug,
file: file,
rfc: file.split('.mdx')[0],
title: data.title,
subtitle: data.subtitle,
author: data.author,
status: data.status,
});
}
}
return acc;
}, []);
fs.writeFileSync(outputFile, JSON.stringify(rfcData, null, 2));
}
generateRfcData();And then use this extracted data in my Components like src/theme/DocSidebarItem/Link/index.tsximport rfcData from '../../../rfcData.json';
...
export default function DocSidebarItemLink({
...
var status = rfcData.find(item => item.id === Number(rfcNumber))?.status
... |
Beta Was this translation helpful? Give feedback.
-
Question 1
Is there a possibility to access Docs
frontMattervia Docusaurus' API ?It seems,
yarn add docusaurus-theme-frontmatterfails with a timeout. Is there another way to somehow accessfrontMtterfrom docs ?yarn add v1.22.22 [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... info There appears to be trouble with your network connection. Retrying... info There appears to be trouble with your network connection. Retrying... info There appears to be trouble with your network connection. Retrying... info There appears to be trouble with your network connection. Retrying... error Error: https://registry.yarnpkg.com/docusaurus-theme-frontmatter: ETIMEDOUT at Timeout._onTimeout (/opt/homebrew/lib/node_modules/yarn/lib/cli.js:142070:19) at listOnTimeout (node:internal/timers:569:17) at process.processTimers (node:internal/timers:512:7) info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.Question 2
i can not find how to use
Linkto navigate via JavaScript. i need to make a<tr>element navigatable. When i wrap it in a<Link>component, that is not allowed. When i useuseNavigateoruseHistoryfrom@docusaurus/routeri get Hook errors. The only thing i could figure out is to usewindow.location.href = 'MyURL'but this reloads the whole Page and it is much slower than using<Link>. Maybe someone know how to navigate in Docusaurus JavaScript usingLinkor other API calls from Docusaurus.Beta Was this translation helpful? Give feedback.
All reactions