As I know, Docusaurus supports customized pages, but is there a way to have two docs in one Docusaurus project?
The original Navbar items have:
Docs
Blog
...
I want to have something like this:
Docs 1
Docs 2
Blog
...
I know I can make many subfolders just in one doc, but for some reason, I want a two Docs structure, which gives me a cleaner way to access docs.
If Docusaurus cannot offer this feature currently, I want to ask is there other documentation frameworks offer this feature?
You need to use the plugin-content-docs.
First, create the other docs folder, like docs, docs-api, docs-system.
(1) In your docusaurus.config.js file, configure your "default" docs:
(module.exports = { // start of the module.export declaration
[…]
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
routeBasePath: 'docs',
path: 'docs',
sidebarPath: require.resolve('./sidebars.js'),
lastVersion: 'current',
onlyIncludeVersions: ['current'],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
[…]
}); // end of the module-export declaration
(2) Now, the magic!: in the same file, configure your other documents:
(module.exports = { // start of the module.export declaration
[…]
plugins: [
[…]
[
'#docusaurus/plugin-content-docs',
{
id: 'docs-api',
path: 'docs-api',
routeBasePath: 'docs-api',
sidebarPath: require.resolve('./sidebars.js'),
},
],
[
'#docusaurus/plugin-content-docs',
{
id: 'docs-system',
path: 'docs-system',
routeBasePath: 'docs-system',
sidebarPath: require.resolve('./sidebars.js'),
},
],
],
[…]
}); // end of the module-export declaration
(3) Now you probably want these documents in your NavBar, right? So add then!
(module.exports = { // start of the module.export declaration
[…]
navbar: {
hideOnScroll: true,
title: 'your title',
logo: {
alt: '',
src: 'img/favicon.ico',
},
items: [
{
to: '/docs/Intro', // ./docs/Intro.md
label: 'Docs Title',
position: 'left',
activeBaseRegex: `/docs/`,
},
{
to: '/docs-api/Intro', // ./docs-api/Intro.md
label: 'API',
position: 'left',
activeBaseRegex: `/docs-api/`,
},
{
to: '/docs-system/Introducao', // ./docs-system/Intro.md
label: 'My System',
position: 'left',
activeBaseRegex: `/docs-system/`,
},
],
},
[…]
}); // end of the module-export declaration
IMPORTANT
Sometimes you will modify your docusaurus.config.js and will not "work", so close the docusaurus service (just Ctrl+C in your terminal/power shell) and restart it -- I could have saved a few hours if a had known this before.
If you don't have the plugin-content-docs plugin, just install it:
npm install --save #docusaurus/plugin-content-docs
ROADMAP
I had a hard time figuring this out. What I did was download the whole docusaurus project, get the website part, trim everything that I did not need and this is what I got.
REFERENCES (Update 2022/03/02)
https://docusaurus.io/docs/docs-multi-instance
This solution worked for me. Using the 'autogenerated' sidebar in Docusaurus v2.0.0-beta.15
sidebars.js
/** #type {import('#docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
newone: [{type: 'autogenerated', dirName: 'newone'}], // foldername
newtwo: [{type: 'autogenerated', dirName: 'newtwo'}], // foldername
};
module.exports = sidebars;
docusaurus.config.js
navbar: {
title: 'My Site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
// {
// type: 'doc',
// docId: 'intro',
// position: 'left',
// label: 'Tutorials',
// },
{
type: 'docSidebar', // docSidebar
position: 'left',
sidebarId: 'newone', // foldername
label: 'NEWONE', // navbar title
},
{
type: 'docSidebar', // docSidebar
position: 'left',
sidebarId: 'newtwo', // foldername
label: 'NEWTWO', // navbar title
},
{to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
Your docs folder:
docs/
newone/
intro.md
newtwo/
intro.md
I tried this way and it's working.
[Edit 1]: But when I select API then both API and Docs in Navbar becomes green. Can you tell us what's the reason behind this #Yangshun Tay and can you suggest the edit for that?
[Edit 2]: I read the documentation, it's written in #docusaurus/theme-classic, if we set activeBasePath property then links with that common path (docs in this case) will have active attribute.
sidebar.js
module.exports = {
someSidebar: {
Docusaurus: ['doc1', 'doc2'],
Features: ['doc3']
},
someOtherSidebar: {
Test: ['mdx']
}
};
docusaurus.config.js
The navbar links are like this -
links: [
{
to: 'docs/doc1',
// activeBasePath: 'docs', // [Edit 3]
label: 'Docs',
position: 'left'
},
{
to: 'docs/mdx',
label: 'API',
position: 'left'
},
]
Folder structure of docs folder is like this -
docs
├── docs1.md
├── mdx.md
Regardless of whether you're using v1 or v2, the sidebars.js configuration can contain multiple keys, each having its own sidebar.
You need to use the doc type in docusaurus config. I think the "to" type is for pages not docs.
To make the sidebar correct, you need to also set the activeSidebarClassName value in the config to let it know which sidebar (among those you exported in the sidebars.js) you want to use for this doc.
activeSidebarClassName: 'navbar__link--active',
https://docusaurus.io/docs/api/themes/configuration#navbar-doc-link
Setting up Docusaurus to be multi-instance spans changes across many files. To make it easier to set up, I've created a base install with all the necessary changes to go multi-instance, and have released it as a GitHub template.
Fork it here:
mg0716/docusaurus-multi
Many of the changes in this repo were a result from #d-kastier's original comment.
Very open to feedback and pull requests, so feel free to give it a shot!
on my test, you MUST Include path "docs-xxxxxxxxx" ! do not create another name such "education" you will get page crash !
Whenever I select a language in my application, it saves this parameter in the "lang" cookie, but accessing the root (http://localhost) without the language path (http://localhost/en) it loads the default language "pt", even the cookie set in another language "en" or "es". This is normal? Or is there any configuration for this type of situation?
[
'nuxt-i18n',
{
locales: [
{
code: 'en',
file: 'en.js'
},
{
code: 'es',
file: 'es.js'
},
{
code: 'pt',
file: 'pt.js'
}
],
lazy: true,
langDir: 'lang/',
parsePages: false,
strategy: 'prefix',
defaultLocale: 'pt',
rootRedirect: 'pt',
detectBrowserLanguage: {
useCookie: true,
cookieDomain: null,
cookieKey: 'lang',
alwaysRedirect: false,
fallbackLocale: 'pt'
},
}
]
Method change lang:
changeLanguage(lang) {
this.locale = lang
this.$i18n.setLocale(lang)
this.$moment.locale(lang);
},
I found that I needed to set the alwaysRedirect parameter to true, it forces the redirect by the cookie.
detectBrowserLanguage: {
alwaysRedirect: true
},
Is there a way to add parameters on a moleculer-web route path?
I would like to add a parameter in the path to avoid to add in each alias.
I have tried to add a parameter, but after that, I could not reach the endpoint anymore
broker.createService({
mixins: [ApiService],
settings: {
routes: [
{
path: "/lng/:lng",
aliases: {
"GET /secret": [
auth.isAuthenticated(),
auth.hasRole("admin"),
"top.secret"
]
}
}
]
}
});
Thanks
No, you can use params in aliases only:
broker.createService({
mixins: [ApiService],
settings: {
routes: [{
path: "/lng",
aliases: {
"GET /:lng/secret": [
auth.isAuthenticated(),
auth.hasRole("admin"),
"top.secret"
]
}
}]
}
});
How do we get around the "document is not defined" error when doing a r.js build via r.js -o against a dijit?
Specifically, I'm trying to build r-build.js:
define(["require", "exports", "dijit/layout/ContentPane"], function (require, exports, ContentPane) {
function simple() {
return ContentPane;
}
return simple;
});
Using r.js.cmd -o r-build.js and it reports:
ReferenceError: document is not defined
In module tree:
test/simple
dijit/layout/ContentPane
dijit/_Widget
dojo/query
dojo/selector/_loader
My r-build.js file looks like this:
({
appDir: "../",
baseUrl: "amd",
dir: "../../release",
optimize: "none",
modules: [
{
name: "test/simple",
exclude: ["jquery", "dojo"]
}
],
packages: [
{
name: 'cm',
location: 'http://localhost:93/CodeMirror'
},
{
name: 'jquery',
location: 'd:/code/jquery/src',
main: 'jquery'
},
{
name: 'jquery/ui',
location: 'http://localhost:93/jquery-ui/ui'
},
{
name: 'jquery/themes',
location: 'http://localhost:93/jquery-ui/themes'
},
{
name: 'sizzle',
location: 'http://localhost:93/jquery/external/sizzle/dist',
main: 'sizzle'
},
{
name: 'dojo',
location: 'd:/code/dojo'
},
{
name: 'dijit',
location: 'd:/code/dijit'
},
{
name: 'xstyle',
location: 'http://localhost:93/xstyle'
}
]
})
I'm fighting with the same issue. Building a r.js bundle with Dojo is a pain.
That one can be easy to fix... If you don't have problems with the supported browsers (post pre-ie9, for instance) override that file and change the lines that check the querySelectorAll to true and you will not need to do those checks. Like...
has.add("dom-qsa2.1", true);
has.add("dom-qsa3", true);
Hope it helps a bit...
i have a following requirejs configuration in my code:
require.config({
baseUrl: "js",
// urlArgs: 'cb=' + Math.random(),
deps:["config","app"],
paths: {
'jquery' : 'jquery/jquery',
'jquerymobile.config' : 'mobile/jquerymobile.config',
'jquerymobile': 'mobile/jquery.mobile-1.3.1.min' ,
'underscore': 'underscore-amd/underscore-min',
'backbone' : 'backbone-amd/backbone-min',
text: 'plugins/text'
},
shim: {
underscore: {
exports: "_"
},
'jquery' : 'jquery',
'jquerymobile.config' : ['jquery'],
jquerymobile : {
deps : ["jquery", 'jquerymobile.config']
},
backbone: {
deps: ['underscore', 'jquery', 'jquerymobile'],
exports: 'Backbone'
}
}
});
inside jquerymobile.config file i have console log statement, which cannot be seen after optimization with following build profile (build.js):
({
appDir: '../',
baseUrl: 'js',
dir: '../../dist',
name: 'config',
skipDirOptimize:true,
fileExclusionRegExp: /^(r|build)\.js$/,
excludeShallow: ['settings'],
mainConfigFile: '../js/config.js',
optimizeCss: 'standard',
removeCombined: true,
deps:["config","app"]
})
I have a feeling that r.js ignoring the shim, dependecies,\n
is there any workaround?
thanks for help
Please try the following way:
include your jquerymobile.config in main.js require dependencies list:
require(['app', 'jquerymobile.config', 'jquerymobile'], function(App) {
App.initialize();
});