Tags & Header Meta Data Example ― Perchance Generator
perchance.org

By “hide” I mean it shows a button in the top-right, which when clicked, shows the full header bar.

Examples:

Please let me know if you run into any issues or have feedback 🙏

Edit: Also, for people who know some JavaScript, you can use the public generator list API to get generators with specific tags like this:

let data = await fetch(`https://perchance.org/api/getGeneratorList?tags=foo`).then(r => r.json()); // returns generators tagged 'foo'
let data = await fetch(`https://perchance.org/api/getGeneratorList?tags=foo,bar`).then(r => r.json()); // foo AND bar
  • @perchanceOPMEnglish
    3•17 days ago

    Also, since I know you’re interested in this sort of thing: Today I also removed the <div id="output-container"></div> inside the body to bring things closer to being “just HTML+JS+CSS”. So everything in the HTML editor goes directly into the <body>. For backwards compat, the <body> element has id="output-container", and beyond that there were only a few generators that had to be semi-manually fixed. Small improvement, but that was annoying me for a long time. The bigger and more painful task (in terms of ensuring backwards-compat) is that square block vs script tag escaping stuff 🥲

    • @wthit56English
      2•16 days ago

      Oh awesome! Nice one!

      The code block thing is definitely a knotty problem. 😬

    • @wthit56English
      2•16 days ago

      Would be grateful if you could tweak the default styles to not apply to body, #output-container because that overrides a simple body selector it seems.

      • @perchanceOPMEnglish
        2•16 days ago

        Oh, could you give an example?

        • @wthit56English
          1•16 days ago

          Well the defaults set text-align:center. I want it left-aligned. But if I just use body { text-align:left; } it won’t override, because an id selector (as in the defaults) has a higher specificity. So anything you set in the defaults will still need to use that id to be able to override.