I am using Docusaurus i18n integration to add the language dropdown to site, but it shows weired
enter image description here
How can I handle this issue
Could you please elaborate a bit more on this?
This video is a detailed tutorial on how to translate your Docusaurus website and deploy it to Netlify. The video shows you all the steps, including how to add the language dropdown.
In short, you should be able to add a language dropdown to your site by simply adding the following code in docusaurus.config.js as explained here
module.exports = {
....
....
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
localeConfigs: {
en: {
label: 'English',
},
fr: {
label: 'Français',
},
},
},
};
Finally you can add the language dropdown by adding the following code in docusaurus.config.js:
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'localeDropdown',
position: 'left',
},
],
},
},
};
Related
When I do a npm run start I get the following:
npm run start
> my-website#0.0.0 start
> docusaurus start
[INFO] Starting the development server...
[ERROR] Error: Cannot mix different versions of joi schemas
at new module.exports (/Users/russurquhart_boomi/node_modules/#hapi/hoek/lib/error.js:23:19)
at module.exports (/Users/russurquhart_boomi/node_modules/#hapi/hoek/lib/assert.js:21:11)
at Object.exports.isSchema (/Users/russurquhart_boomi/node_modules/joi/lib/common.js:132:5)
at Object.internals.schema (/Users/russurquhart_boomi/node_modules/joi/lib/compile.js:66:16)
at Object.exports.schema (/Users/russurquhart_boomi/node_modules/joi/lib/compile.js:17:26)
at internals.Base.$_compile (/Users/russurquhart_boomi/node_modules/joi/lib/base.js:646:24)
at /Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:260:92
at Object.exports.tryWithPath (/Users/russurquhart_boomi/node_modules/joi/lib/common.js:176:16)
at internals.Base.method [as keys] (/Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:260:32)
at internals.Base.method [as append] (/Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:189:29)
[INFO] Docusaurus version: 2.1.0
Node version: v16.17.0
Here is my docusaurus.config.js file:
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'Boomi Docusaurus POC',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** #type {import('#docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: 'Boomi Atmosphere',
logo: {
alt: 'Boomi Doc Site',
src: 'img/logo.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Tutorial',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Atmosphere Documentation',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Docusaurus POC - Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
themes: [
[
"#easyops-cn/docusaurus-search-local",
/** #type {import("#easyops-cn/docusaurus-search-local").PluginOptions} */
({
hashed: true,
language: ["en", "zh"],
highlightSearchTermsOnTargetPage: true,
explicitSearchResultPath: true,
}),
],
],
};
module.exports = config;
I got the errors after I added the docusearch-search-local plugin.
Any help is greatly appreciated!
Thanks,
Russ
I solved the issue, I had NOT installed the docusaurus-search-local item in the directory with my docusaurus files, instead I had installed it in ~/. Once I deleted it from this location, and then put it into the correct location, no problems!
I recently deployed our Docusaurus site for the first time and I am running into a weird issue with routing.
Every page in the /docs folder will briefly render the 404.html page when hitting the page directly. However, if I click around in sidebar the pages render properly.
This only happens in the /docs folder. If I click on the home page link I do not see the 404.
I cannot replicate this issue locally. I have tried both yarn start and yarn build/serve and in both cases the app works fine. I do not see any 404s, console errors, etc. The response payload of the 404 is the OOTB Docusaurus page, I have not done any customization to it or how its handled.
Attached is a gif showing the behavior and a screen shot showing that the browser is seeing a hard 404 in my non-localhost environment.
And here's my config file:
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'Guidebook',
tagline: 'Engineering Information',
url: 'https://guidebook.our-internal-domain.tools/',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
favicon: 'img/favicon.png',
organizationName: 'Guidebook',
projectName: 'Guidebook',
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook'
},
blog: false,
theme: {
customCss: require.resolve('./src/css/custom.css')
}
// debug: true
})
]
],
themeConfig: {
navbar: {
title: 'Home',
logo: {
alt: 'Home',
src: 'img/TechnologyGuidebook-Icon_Red_Small.svg'
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Guidebook'
},
{
href: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook',
label: 'GitHub',
position: 'right'
}
]
},
footer: {
style: 'dark',
links: [
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus'
}
]
},
{
title: 'More',
items: [
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus'
}
]
}
],
copyright: `Copyright © ${new Date().getFullYear()} Guidebook V2, Inc. Built with Docusaurus.`
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme
}
}
};
module.exports = config;
I figured it out. It wasn't a Docusaurus problem. The problem was a configuration issue in our CloudFront infrastructure.
I am using Vercel to deploy a Docusaurus V2 website and was running into the same issue with redirects.
Fixed this issue by enabling cleanUrls inside my vercel.json config.
I'm trying to add add a new page in Docusaurus v2, so I added a new item in the navbar:
module.exports = {
...
themeConfig: {
navbar: {
title: 'My Site: API Documentation',
logo: {
alt: 'My Site Logo',
src: 'img/logo.png',
},
items: [
{
to: 'docs/',
activeBasePath: 'docs',
label: 'Docs',
position: 'left',
},
{
to: 'references/',
activeBasePath: 'references',
label: 'References',
position: 'left',
},
],
},
...
},
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};
Problem is that when I click the References link, I am redirected to http://localhost:3000/references/ which gives me a Page Not Found page:
Does anybody know where exactly I need to put my *.mds or what I should do to be able add a page inside /references and to access e.g. http://localhost:3000/references/dymmy_page?
There are a couple options, things to check out. The first page you want showing up for /references, you can add the following to the frontmatter of that markdown file: slug: /
Or you can change to use docId (which I love). It's easier for using an ID and not remembering what file has a slug added to the frontmatter. The docid is the id from your markdown file, formatted just like the id in your sidebars.js (folder/id).
For example:
{
type: 'doc',
docId: 'folder-if-any/id-of-markdown-file',
label: 'References',
position: 'left',
},
If you add references in a dropdown menu, then it would be something like:
{
label: 'Docs',
position: 'left',
items: [
{
type: 'doc',
to: 'docs/folder-if-any/id-of-markdown-file',
label: 'References',
},
{
type: 'doc',
to: 'docs/some-other-folder/id-of-markdown-file',
label: 'Guide',
},
]
},
I am currently making a personal portfolio site using Nuxt.js (using TypeScript).
I decided I want to use Vanta.js Halo effect. for my landing page, but I can't seem to find a way to make it work properly.
I tried using three.js and vanta npm packages, but it produces an error.
'Cannot read property “texture” of undefined'
import * as THREE from 'three'
import HALO from 'vanta/dist/vanta.halo.min.js'
...
*inside Vue.extend block*
mounted(){
this.vantaEffect = HALO({
el: '#landing',
*rest of the settings*
THREE: THREE
})
}
Is there any way I can make it work?
Update:
I managed to get rid of the errors using static files - method from this vanta repo issue, but static script for initiating can't find the #landing element.
/*nuxt.config.js*/
...
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
script: [
{ src: 'vanta.halo.min.js' },
{ src: 'three.min.js' },
{ src: 'effect.js' },
],
},
...
/*effect.js - file that initializes the effect*/
VANTA.HALO({
el: '#landing',
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
baseColor: 0xffffff,
backgroundColor: 0x2d2d2d,
THREE,
})
Update 2:
I managed to fix the problem with not finding the #landing element by exporting a function that initializes the effect and running it from the mounted() and passing the element reference.
/*effect.js*/
const vantaEffect = (elementRef) => {
return window.VANTA.HALO({
el: elementRef,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
THREE: THREE,
})
}
export default vantaEffect
Now this error shows up:
[VANTA] Init error TypeError: Cannot read property 'LinearFilter' of undefined
So, I fiddled a bit with the sandbox that Lawrence provided, and I was able to make it work like this: https://codesandbox.io/s/winter-thunder-pffsq
Basically what happens is that Vanta assumes that THREE is set on window, which doesn't happen when we import it from npm. So you must import Vanta after you import THREE and set it as a window variable.
import * as THREE from "three";
// import HALO from "vanta/dist/vanta.halo.min";
export default {
async mounted() {
// window is only avaiable on browser
if (process.browser) {
window.THREE = THREE;
const { default: HALO } = await import("vanta/dist/vanta.halo.min");
HALO({
el: "#abc",
mouseControls: true,
touchControls: true,
minHeight: 200.0,
minWidth: 200.0,
xOffset: -0.17,
size: 2.1,
THREE: window.THREE
});
}
}
};
I am trying to add some Open Graph tags to each Article of my blog that is hosted in Wordpress.
This code is working when I run "npm run dev", but when I run "npm run generate && firebase deploy" is not doing the same.
This is the code that I am using:
head() {
return {
title: 'This',
meta: [
{
hid: `og:description`,
name: 'og:description',
content: 'title'
},
{
hid: `og:title`,
name: 'og:title',
content: 'title'
}
]
}
In my nuxt.config.js I have configured the following in the head
head() {
return {
title: 'That',
meta: [
{
hid: `og:description`,
name: 'og:description',
content: '3'
},
{
hid: `og:title`,
name: 'og:title',
content: '4'
}
]
}
In the article, the title that is showing is "This" but, the meta is showing the content in nuxt.config.js ("3","4") instead of ("title", "title")
What I would like to obtain is the meta tag of the article one in the with the SSR.
My problem was using spa (single page application) mode instead of universal.
My working settings in nuxt.config.js:
export default {
mode: 'universal', // changed from mode: 'spa'
...
}
I would try using the nuxt-seo package. It adds full support for setting the most common social media tags, including auto generating canonical tags for each of your articles/pages.
You can checkout the docs site, which has a full nuxt blog example.
After installing the nuxt-seo package in your project, add it to your nuxt-config.js file:
{
modules: [
'nuxt-seo'
],
seo: {
// Module Options
}
}
Then on each article/page, you can set the page specific title, description, and pretty much any other meta tag:
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
head({ $seo }) {
return $seo({
title: 'Home Page',
description: 'Hello World Page',
keywords: 'hello, world, home',
})
}
}
</script>
PS: I am the maintainer of the nuxt-seo package.