While refreshing the already built page, the theme is all over the place #113
Comments
|
Can reproduce (though it looks like different visual changes) on this example in the docs: https://rohit-gohri.github.io/redocusaurus/examples/using-spec-yaml/ |
|
It looks comparable though. |
5 tasks
|
I have released a beta for v1 where this is fixed (along with bunch of other things!!): #146 It has some breaking changes (mostly simplification of option names). New docs are at redocusaurus-v1.vercel.app/docs It will be great if you could try it and give some feedback. |
|
So this is till happening in Chrome in v1, it's fixed in Firefox. If javascript is disabled then the page loads correctly, but then react rehydrates and remove the server styles and that causes a flash until the client reapplies the styles. |
Merged
|
Hey, I'm sorry I respond so late. I took vacation for a bit. Thank you for trying to fix my issue. But I think I now have a heap of other issues. Our Docusaurus is meant to doc a lot of different repos. Also I didn't have the time to really clean up our config. So this is currently our config:// @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');
const fs = require('fs');
const path = require('path');
const plugin = require("remark-admonitions");
const reposContent = fs.readFileSync(path.join(__dirname, "repos.json"), "utf8");
const repos = JSON.parse(reposContent);
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'WISdoM Docs',
tagline: 'WISdoM Docs',
url: 'https://wisdom.uol.de/',
baseUrl: '/',
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'wisdom-oss', // Usually your GitHub org/user name.
projectName: 'WISdoM', // Usually your repo name.
themes: [
"docusaurus-theme-redoc"
],
plugins: [
'@docusaurus/theme-classic',
//"@docusaurus/plugin-debug",
"@docusaurus/plugin-content-pages"
// @ts-ignore
].concat(reposDocs()),
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: 'WISdoM Docs',
logo: {
alt: 'WISdoM Logo',
src: 'img/logo.svg',
},
items: [
{
type: "dropdown",
position: "right",
items: [],
customType: "branchSelect",
branches: reposBranches()
},
{
href: 'https://github.com/wisdom-oss',
label: 'GitHub',
position: 'right',
},
// @ts-ignore
].concat(reposNavbar()),
},
footer: {
style: 'dark',
links: [
{
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: [
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} WISdoM. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
function reposNavbar() {
let items = [];
for (let repo of Object.values(repos)) {
if (repo.private) continue;
let {hasAPI, hasDocs, hasReadme} = repo.defaultBranch;
if (!(hasAPI || hasDocs || hasReadme)) continue;
let item = {
label: repo.name,
position: "left"
}
if (hasReadme) {
item.to = `repos/${repo.name}/${repo.defaultBranch.name}/README`;
}
if (hasAPI || hasDocs) {
item.items = [];
item.type = "dropdown";
if (hasAPI) {
item.items.push({
to: `repos/${repo.name}/${repo.defaultBranch.name}/api`,
label: "Rest API"
});
}
if (hasDocs) {
item.items.push({
to: `repos/${repo.name}/${repo.defaultBranch.name}/${repo.defaultBranch.hasDocs.split(".md")[0]}`,
label: "Docs"
});
}
}
items.push(item);
}
return items;
}
function reposDocs() {
let plugins = [];
for (let repo of Object.values(repos)) {
for (let branch of repo.branches) {
if (branch[1].hasReadme) {
plugins.push([
"@docusaurus/plugin-content-pages",
{
id: `repos_pages_${repo.name.replaceAll(/\s+/g, "_")}_${branch[0].replaceAll(/\s+/g, "_")}`,
path: `repos/${repo.name}/${branch[0]}/readme`,
routeBasePath: `repos/${repo.name}/${branch[0]}/`
}
])
}
if (branch[1].hasDocs) {
plugins.push([
"@docusaurus/plugin-content-docs",
{
id: `repos_docs_${repo.name.replaceAll(/\s+/g, "_")}_${branch[0].replaceAll(/\s+/g, "_")}`,
path: `repos/${repo.name}/${branch[0]}/docs/`,
routeBasePath: `repos/${repo.name}/${branch[0]}/docs/`,
sidebarPath: require.resolve("./src/sidebar.js")
}
]);
}
if (branch[1].hasAPI) {
plugins.push([
"docusaurus-plugin-redoc",
{
id: `repos_api_${repo.name.replaceAll(/\s+/g, "_")}_${branch[0].replaceAll(/\s+/g, "_")}`,
spec: `repos/${repo.name}/${branch[0]}/${branch[1].hasAPI}`,
route: `repos/${repo.name}/${branch[0]}/api`
}
])
}
}
}
return plugins;
}
function reposBranches() {
let branchSelect = {};
for (let repo of Object.values(repos)) {
branchSelect[repo.name] = [];
for (let [branch] of repo.branches) {
branchSelect[repo.name].push(branch);
}
}
return branchSelect;
}
module.exports = config;Sadly now we get the error:
Upon clicking the "try again" button, well get that console output: console outputI checked the new documentation but I cannot really find what breaks here. |
|
Hi, I think I am running into a bug related to this. When I navigate to the Redoc page the scrollYOffset works fine, but if I refresh the page the scrollYOffset is ignored so the sidemenu disappears under the navbar. It seems to me that this is partially related to this line: I was able to "fix" the issue by commenting out that line in my installed node_modules and setting a number value for the scrollYOffset in my config: Could this maybe be updated to detect if we have a number value configured for the scrollYOffset and not set the scrollYOffset to 0 in this case? |
|
Could this small issue cause the page to crash? |
|
@jeff1010322 That seems like a valid issue but probably unrelated to this ticket. That was added to fix a warning while building the website, but I guess we can remove it. Can you please open a separate issue? ( PR to remove it also works 🙂 ) @cptpiepmatz Are you using the React component directly? Can you post a small reproduction? |
|
I'll see if I can come up with a small implementation that breaks |
|
@cptpiepmatz the issue you were getting was also reported here #174 and is fixed in the latest version. The original issue is also no longer happening |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
While reloading the page or building the redoc pages I get the warning:
scrollYOffset value is a selector to non-existing element. Using offset 0 by defaultI have not changed anything in the theme configuration.
Maybe this happens because my navbar is not constant but built by reading in a .json file synchronously.
This is how it should look like and is seen if I use the dev server or switch from another page to the api docs:
And this is how it happens to look after reloading:
The text was updated successfully, but these errors were encountered: