standalone bundle - styling issue - font #530

thim81 · 2022-01-24T16:08:53Z

Description

When using the latest standalone bundle (react-component@1.0.0-next.31) in a HTML page, it seems that something is missing in the styling of the page.

Expected result

Actual result

The font styling seems off.

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/react-component@1.0.0-next.32/styles/default.min.css">
</head>
<body>

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

<script src="https://unpkg.com/@asyncapi/react-component@1.0.0-next.32/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>

The text was updated successfully, but these errors were encountered:

magicmatatjahu · 2022-01-24T16:41:08Z

@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 · 2022-01-24T17:09:57Z

@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 · 2022-01-24T17:15:53Z

@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 · 2022-01-24T17:33:28Z

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 · 2022-01-24T17:39:18Z

@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 · 2022-01-25T09:32:47Z

@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:

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

magicmatatjahu · 2022-01-25T09:49:31Z

@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 · 2022-01-25T10:37:59Z

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

thim81 · 2022-01-25T16:06:03Z

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

thim81 · 2022-01-26T10:08:01Z

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

magicmatatjahu · 2022-01-26T11:16:28Z

@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 · 2022-01-26T17:49:03Z

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

Thanks 🙏

thim81 mentioned this issue Jan 25, 2022

docs: add custom styling & custom logo #531

Merged

thim81 closed this as completed Jan 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

standalone bundle - styling issue - font #530

standalone bundle - styling issue - font #530

thim81 commented Jan 24, 2022 •

edited

Loading

magicmatatjahu commented Jan 24, 2022 •

edited

Loading

thim81 commented Jan 24, 2022

magicmatatjahu commented Jan 24, 2022

thim81 commented Jan 24, 2022

magicmatatjahu commented Jan 24, 2022

thim81 commented Jan 25, 2022

magicmatatjahu commented Jan 25, 2022

magicmatatjahu commented Jan 25, 2022

thim81 commented Jan 25, 2022

thim81 commented Jan 26, 2022 •

edited

Loading

magicmatatjahu commented Jan 26, 2022

thim81 commented Jan 26, 2022

standalone bundle - styling issue - font #530

standalone bundle - styling issue - font #530

Comments

thim81 commented Jan 24, 2022 • edited Loading

magicmatatjahu commented Jan 24, 2022 • edited Loading

thim81 commented Jan 24, 2022

magicmatatjahu commented Jan 24, 2022

thim81 commented Jan 24, 2022

magicmatatjahu commented Jan 24, 2022

thim81 commented Jan 25, 2022

magicmatatjahu commented Jan 25, 2022

magicmatatjahu commented Jan 25, 2022

thim81 commented Jan 25, 2022

thim81 commented Jan 26, 2022 • edited Loading

magicmatatjahu commented Jan 26, 2022

thim81 commented Jan 26, 2022

thim81 commented Jan 24, 2022 •

edited

Loading

magicmatatjahu commented Jan 24, 2022 •

edited

Loading

thim81 commented Jan 26, 2022 •

edited

Loading