ColinEberhardt/applause-button

Minimal working example

azzamsa opened this issue · 2 comments

azzamsa commented

I've try to put it on my blog, but it didn't respect the css file: Pelican-Elegant/elegant#532 (comment)

So I try the Minimal Working Example to reproduce it. But I can't get it working.

SyntaxError: import declarations may only appear at top level of a module applause-button.js:1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!-- add the button style & script -->
        <link rel="stylesheet" href="applause-button.css" />
        <script src="applause-button.js"></script>
    </head>

    <body>
        <!-- add the button! -->
        <applause-button style="width: 58px; height: 58px;"/>
    </body>

</html>

​
Thank you

ColinEberhardt commented

Are you sure the CSS file has loaded?

Here's a complete minimal example (the same as your above, but with the applause button code loaded from a CDN network):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!-- add the button style & script -->
        <link rel="stylesheet" href="https://unpkg.com/applause-button@3.3.0/dist/applause-button.css" />
        <script src="https://unpkg.com/applause-button@3.3.0/dist/applause-button.js"></script>
    </head>

    <body>
        <!-- add the button! -->
        <applause-button style="width: 58px; height: 58px; margin-top: 50px;"/>
    </body>
</html>

You can see it working here: https://codepen.io/colineberhardt-the-bashful/pen/MWYWjmV?editors=1000