5

I'm trying to implement Sign in and Sign up buttons on the Docusaurus navbar...

enter image description here

...but since my app is in a subdomain, Docusaurus thinks they are external links and adds this ugly SVG.

How do I disable the external behavior? I was looking for an external:false in the navbar configuration but I couldn't find it. I also tried setting target:_self but that didn't remove the SVG. https://docusaurus.io/docs/api/themes/configuration#navbar

Andre Pena
  • 56,650
  • 48
  • 196
  • 243

2 Answers2

8

I know you posted this question a while back but I found something that is easier than the workaround proposed above. Instead of using href you can use the to attribute.

In docusaurus.config.js

{
    to: 'https://netdata.cloud',
    label: 'netdata.cloud',
    position: 'right',
},

The link will still work but the theme's urge to append the SVG won't be triggered.

I hope this helps.

Noor A Shuvo
  • 2,639
  • 3
  • 23
  • 48
kickoke
  • 81
  • 1
  • 2
1

I couldn't find anyway to just disable the external link, but perhaps you could use an svg, even if it is just text. If you look at the example of the GitHub logo on the Docusaurus site, if you do not have the label, the svg doesn't get applied to it.

docusaurus.config.js

{
   // no 'label' property
    href: 'https://github.com/facebook/docusaurus',
    position: 'right',
    className: 'header-github-link',
    'aria-label': 'GitHub repository',
},

src/css/custom.css

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

[data-theme='dark'] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

Update:

Actually, this works, I don't know why I didn't think about it earlier, just set the content value:

.header-search:before {
  content: "GitHub";
  display: flex;
  width: 24px;
  height: 24px;
}
Ash
  • 3,030
  • 3
  • 15
  • 33