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

standalone bundle - styling issue - font #530

Closed
thim81 opened this issue Jan 24, 2022 · 12 comments
Closed

standalone bundle - styling issue - font #530

thim81 opened this issue Jan 24, 2022 · 12 comments

Comments

@thim81
Copy link

thim81 commented Jan 24, 2022 •
edited
Loading

Description

When using the latest standalone bundle ([email protected]) in a HTML page, it seems that something is missing in the styling of the page.

Expected result

2022-01-24 at 17 02 39

Actual result

The font styling seems off.

2022-01-24 at 17 03 29

Steps to reproduce

You can use the HTML below to reproduce the styling issue

I'm using a standalone HTML implementation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>AsyncAPI Reference</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/@asyncapi/[email protected]/styles/default.min.css">
</head>
<body>

<div id="asyncapi"></div>

<script src="https://unpkg.com/@asyncapi/[email protected]/browser/standalone/index.js"></script>
<script>
    AsyncApiStandalone.render({
        schema: {
            url: '../spec/smc.asyncapi.yaml',
            options: { method: "GET", mode: "cors" },
        },
        config: {
            show: {
                sidebar: true,
            }
        },
    }, document.getElementById('asyncapi'));
</script>

</body>
</html>
@magicmatatjahu
Copy link
Member

magicmatatjahu commented Jan 24, 2022 •
edited
Loading

@thim81 Hi! To next-25 version we injected in global css values for html and body using the reset.css but some users had problem with that, because we overrided some their styles, so we removed that (including global fonts, but I think it was a mistake), so if you want add your fonts and other global styles you need to do manually. Here is a small snippet that you should put in the <head> before link to css to "fix" that:

    <style>
      html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}
    </style>

In most cases, people use the component in larger applications, not in a single page, so they give the fonts themselves from global css.

@thim81
Copy link
Author

thim81 commented Jan 24, 2022

@magicmatatjahu I added something similar as work-around, but I wasn't sure if that was expected behaviour, but now I do :-) Thanks for clarifying.

The font-family and html/body margins/lineheights are the only CSS differences, that are left out?

@magicmatatjahu
Copy link
Member

@thim81 We exactly used that file https://meyerweb.com/eric/tools/css/reset/ so you can check what exactly we "removed" + of course global font-family :)

I think that we should clarify that in the docs, do you wanna create PR with that? :)

@thim81
Copy link
Author

thim81 commented Jan 24, 2022

I ll create PR to document this. Shall I add on the main readme or do you prefer that I put it on a dedicated page for the standalone bundle?

@magicmatatjahu
Copy link
Member

@thim81

I ll create PR to document this. Shall I add on the main readme or do you prefer that I put it on a dedicated page for the standalone bundle?

Please add in the Readme in the section when we describe styling https://github.com/asyncapi/asyncapi-react/tree/next#styles Remember about contribution to the next branch :)

@thim81
Copy link
Author

thim81 commented Jan 25, 2022

@magicmatatjahu I also applied a "hack" CSS to inject a logo placeholder, is this something you think is valuable to include in the "styling" section?

Example:

 <style>
        div.sidebar::before {
            background-color:#00b8fb;
            background-image: url(./logo.png');
            background-size: cover;
            background-position: center;
            display: inline-block;
            width: 17rem;
            height: 11rem;
            content:"";
        }
    </style>

Resulting in something like this:
2022-01-25 at 10 31 35

(I'm not CSS expert so if you have suggestions to handle this more gracefully, feel free to share)

@magicmatatjahu
Copy link
Member

@thim81 Custom logo we supported by custom extension in the InfoObject (by x-logo) probably from next-1 (as I remember) but that feature is not documented. This is a leftover from an html-template where someone needed to display a logo in the documentation, so if you want add that custom logo you should write (example doc):

{
      "asyncapi": "2.2.0",
      "info": {
        "title": "Account Service",
        "version": "1.0.0",
        "description": "This service is in charge of processing user signups",
        "x-logo": "https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png"
      },
      "channels": {
        "user/signedup": {
          "subscribe": {
            "message": {
              "$ref": "#/components/messages/UserSignedUp"
            }
          }
        }
      },
      "components": {
        "messages": {
          "UserSignedUp": {
            "payload": {
              "type": "object",
              "properties": {
                "displayName": {
                  "type": "string",
                  "description": "Name of the user"
                },
                "email": {
                  "type": "string",
                  "format": "email",
                  "description": "Email of the user"
                }
              }
            }
          }
        }
      }
    };

and you don't need to inject logo by css :)

@magicmatatjahu
Copy link
Member

@thim81 If you want, you can document also that extension :)

@thim81 thim81 mentioned this issue Jan 25, 2022
Merged
@thim81
Copy link
Author

thim81 commented Jan 25, 2022

@magicmatatjahu The PR is created, looking forward for receiving feedback.

@thim81
Copy link
Author

thim81 commented Jan 26, 2022 •
edited
Loading

@magicmatatjahu Should I also create a PR for x-logo on the extension repo ?

@magicmatatjahu
Copy link
Member

@thim81

Should I also create a PR for x-logo on the extension repo ?

I don't think so. Of course people can use extensions in their specs, but problem is that atm we don't clarify the "shape" of the extension, I mean some JSON Schema to describe that extensions (like here https://github.com/asyncapi/extensions-catalog#twitter). That repo defined x-twitter extension but we have to redefine extensions, I don't know when because atm we are focused on the 3.0.0 - asyncapi/spec#691

@thim81
Copy link
Author

thim81 commented Jan 26, 2022

Going to close the issue, since the PR is being reviewed and you provided all the info to style my AsyncAPI document.

Thanks 🙏

@thim81 thim81 closed this as completed Jan 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thim81 @magicmatatjahu