Exclude the footer from the index.html file by configuring it in the docusaurus.config.js file

From what I understand, the docusuarus.config.js file is responsible for translating specified information into HTML to construct your website. This translated information is then directed to the 'index.html' file.

However, I am encountering an issue where certain components, like my footer, defined in my config.js file are not showing up in the index.html file. For instance, in my docusaurus.config.js file, I have set up a footer:

 footer: {
        copyright: `<b>Unless otherwise noted, all files contained herein are X Company, Inc., Proprietary and Confidential Information.</b>
        <br/><br/>
        Copyright © ${new Date().getFullYear()} Company, Version 1.00`,

This footer was functioning properly until I made changes to the homepage index.js file. It appears that the index.js file is conflicting with certain elements.

In the index.html file, the displayed footer is:

footer class="footer"><div class="container container-fluid">
<div class="footer__bottom text--center">
<div class="footer__copyright">
Copyright © 2024 My Project, Inc. Built with Docusaurus.</div></div></div></footer></div>

It is worth noting that the text "Copyright © 2024 My Project, Inc. Built with Docusaurus." is not part of any code in my website files. This seems to be the default footer content.

For unknown reasons, Docusaurus is defaulting to this generic content and disregarding specific information specified in my docusaurus.config.js.

I have not come across any resources that address this issue directly as: "My index.html file is not recognizing or receiving details from my docusaurus.config.js file."

I previously encountered this problem on a different website and thought it was a one-off issue. Starting a new site, I am facing the same challenge.

I am hesitant to delete the index.js file, as it has been functioning correctly and has not caused issues in the past.

I have attempted the following troubleshooting steps:

  • Updating Node versions
  • Restarting the development server
  • Creating a new Docusaurus site
  • Rebuilding the site
  • Comparing with older sites that are functioning correctly (no noticeable differences)

Answer №1

Discovered the root of my issue. Ignorance is to blame.

The problem I described was unfamiliar to me, which made it all the more perplexing.

Actual Issue: i18n files were overwriting content specified in my docusaurus.config.js.

The content in the docusaurus-theme located in the i18n\locale folders was overriding the configurations in my config file, including:

  • Footer content
  • Navbar content
  • Site Title
  • (potentially other elements)

For some reason, the i18n files were not in sync with my current theme files, leading to the information specified in my docusaurus.config.js file being overwritten (partially; some content remained unaffected).

Solution: Removal of i18n Content, Replacement with Current Content in i18n File Locales

Erased all directories/content in the i18n folder. Preserved i18n folder. Recopied all existing website documentation, blog posts, pages, and themes to the i18n locales to reconstruct i18n locales with current content.

[create folder/copy theme content]
npm run write-translations -- --locale fr

[create folder/copy docs files]
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current
cp -r docs/** i18n/fr/docusaurus-plugin-content-docs/current

[create folder/copy blog content]
mkdir -p i18n/fr/docusaurus-plugin-content-blog
cp -r blog/** i18n/fr/docusaurus-plugin-content-blog

[create folder/copy pages content]
mkdir -p i18n/fr/docusaurus-plugin-content-pages
cp -r src/pages/**.md i18n/fr/docusaurus-plugin-content-pages
cp -r src/pages/**.mdx i18n/fr/docusaurus-plugin-content-pages

I'm surprised this issue hadn't affected me earlier. It now makes sense why I couldn't pinpoint what was overriding my config file. Checking the i18n assets was literally my last resort!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align the 'Typography' component in the center?

Attempting to center it using flexbox with justify-content did not yield the desired result. I also tried replacing the Typography component with a div tag, but still no success. import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,ma ...

Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked. Can someone please provide guidance on achieving this? --code not mine-- ...

Identifying functions that contain dots in their names using JSHint

While running jshint on a JavaScript file, I encountered functions with dots in their names for namespacing purposes. Specifically, within the d3 library, there is a significant portion of code that resembles: d3.select("something") Should I simply disab ...

Why does Material-UI's "withStyles()" not function properly with a specified constructor in Typescript?

Update: Please note that there was an issue with the constructor generated by IntelliJ IDEA, but it has been fixed. You can find more details here: I'm exploring the use of Material-UI in my application, and I've encountered some challenges wit ...

JavaScript for automatic file reading

I'm currently working on a personal file storage website as part of a practice project. The code itself is functional, but I'm facing the challenge of managing a large JSON file containing the names of all the files I want to display on the websi ...

Running cy.task after all test suites can be done by adding the task in a

I need some guidance on running cy.task after executing all test suites. I have a file generated at the start of the tests that I would like to remove once they are completed. Regardless of whether any tests passed or failed, I want to trigger cy.task im ...

Learn how to transfer and retrieve data in a different jade template using Node.js without relying on session management or query strings

I am currently facing an issue where I need to redirect and send data from one view to another in a single step using Jade templates. The code snippet below shows my attempt: customer.js var express = require('express'); var router = express.Ro ...

What is the best way to display my to-do list items within a React component

I'm working on a straightforward todo application using fastapi and react. How can I display my todos? I attempted to use {todo.data}, but it's not functioning as expected. Here is my Todos.js component: import React, { useEffect, useState } fro ...

The leaking of angular-material CSS onto other divs is causing unexpected styling

I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...

Encountering a surprise Illegal Token JS Error

I am encountering a persistent "Unexpected Token ILLEGAL" error while attempting to run the script on the page after it has been registered. StringBuilder str = new StringBuilder(); str.Append("<script type='text/javascript&apos ...

Is it possible to dispatch actions from getters in Vuex?

Fiddle : here Currently, I am in the process of developing a web application using Vue 2 with Vuex. Within my store, I aim to retrieve state data from a getter. My intention is for the getter to trigger a dispatch and fetch the data if it discovers that t ...

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

Preventing autocomplete from filling in empty password fields (React.js)

Once the browser autocompletes my login form, I notice that the password input's value is initially empty. However, when I click on the password field, suddenly the value appears. Additionally, there are several inexplicable events being triggered by ...

Calculating the vertical distance between an element and the top of the page

I am attempting to calculate the distance between the top of an element and the top of the page every time the user scrolls. Although I have managed to make it work, the issue arises when scrolling - the distance remains unchanged. I tried addressing this ...

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

Activate a tooltip on the button depending on the value entered in the search field

I need to display a tooltip on the button when the search field is empty. Here is what I have attempted: // Enable hover feature const searchBtn = document.querySelector('.find__btn'); searchBtn.addEventListener('mouseover', () => ...

The animated loading image is taking an eternity to actually load

My website is loaded with heavy front-end features and I'm using a loading gif to help with the loading process. However, I've noticed that in Safari, there is a delay before the gif loads after the background does, which takes away from the inte ...

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

Utilize the Webstorm debugger in conjunction with node.js for seamless debugging

Several weeks ago, I attempted to get the webstorm debugger up and running, but unfortunately, it didn't work. Now, I'm giving it another shot, but I'm faced with the same outcome. I am following the instructions outlined here: http://www.j ...

Creating a database using Angular2+ in CouchDB can be achieved by following these steps

I have been attempting to set up a database in couchdb using angular2+. My goal is to create a button that, when clicked, will initiate the creation of the database. However, I keep encountering an error message. "ERROR Error: Uncaught (in promise): H ...