Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Client Libraries Icons Not Appearing from CDN #1777

Closed
srilman opened this issue May 18, 2024 · 2 comments
Closed

Client Libraries Icons Not Appearing from CDN #1777

srilman opened this issue May 18, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@srilman
Copy link

srilman commented May 18, 2024

What happens?

When testing the docs generation on https://docs.scalar.com, I see that the client libraries section at the top contains a nice row of icons for each language.

But when I tried deploying docs to a local server via the CDN approach, the client libraries display looks very different:

Screenshot 2024-05-17 at 9 44 08 PM

Is there a setting that I am missing?

What did you expect to happen?

I expect to see the icons seen from the official docs source, like so:

Screenshot 2024-05-17 at 9 41 18 PM

How can we reproduce the issue?

This is the HTML that the docs are based on:

<body>
	<script
		id="api-reference"
		data-url="/openapi-3.0.json"></script>
	<script>
		var configuration = {
		  theme: 'purple',
		  hideModels: true, 
		}
		document.getElementById('api-reference').dataset.configuration =
		  JSON.stringify(configuration)
	</script>
	<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
</body>

Swagger/OpenAPI Example

No response
@srilman srilman added the bug Something isn't working label May 18, 2024
@cameronrohani
Copy link
Contributor

cameronrohani commented May 18, 2024 •
edited

Hey @srilman

This was an intentional design decision around continuous feedback that the intro section:

  • Had too much contrast
  • Too much vertical space

If you'd like you can add the following custom CSS to make the intro section closer to the original design:

image 
.client-libraries-content {
  gap: 0;
  padding: 12px 9px 9px 9px !important
}
.client-libraries  {
  max-width: 68px;
}
.client-libraries-content .client-libraries {
  flex-direction: column;
  padding: 0 !important;
  color: white !important;
  border-radius: 12px !important;
  gap: 6px !important;
  padding: 0;
  border: none !important;
}
.client-libraries-content .client-libraries svg {
  max-height: 44px;
  max-width: 44px;
  padding: 12px;
  border-radius: 12px;
}
.client-libraries-content .client-libraries:nth-of-type(1) svg {
  background:  #000;
}
.client-libraries-content .client-libraries:nth-of-type(2) svg {
  background:   #D91405;
}
.client-libraries-content .client-libraries:nth-of-type(3) svg {
  background:   #83CD29;
}
.client-libraries-content .client-libraries:nth-of-type(4) svg {
  background:   #6081B6;
}
.client-libraries-content .client-libraries:nth-of-type(5) svg {
  background:   #316898;
}
.client-libraries-content .client-libraries:nth-of-type(6) svg {
  background:   var(--scalar-background-3);
  color: var(--scalar-color-3) !important;
}
.client-libraries-content .client-libraries__active {
  background-color: transparent !important;
}
.client-libraries span {
  color: var(--scalar-color-3);
  font-size: var(--scalar-micro) !important;
}
.client-libraries__active:after {
  content: "";
  position: absolute;
  bottom: -9px;
  height: 2px;
  background: var(--scalar-color-1);
  width: 100%;
}
.selected-client {
  background-color: var(--scalar-background-2);
}

That being said we're always open to change and feedback so if a lot of people prefer the old design it is something we can iterate upon :)

@srilman
Copy link
Author

srilman commented May 18, 2024

Thanks for the quick response @cameronrohani. Good point that the old design took up too much vertical space; that was something I was worried about in general and was working to trim down the text for. I do like the old design more visually, but I was really mostly concerned that I'd somehow gotten an older version of the package because all of the screenshots in the repo and the docs generator used the old design.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@marclave @cameronrohani @srilman