RSS+Atom Feed Subscribe Button Generator

Finds RSS and/or Atom links on a page and inserts feed subscription links for use by aggregators

< Feedback on RSS+Atom Feed Subscribe Button Generator

Question/comment

schimon
§
Posted: 2023-05-16
Edited: 2023-05-16
Report comment

Scalable graphics

Replace raster graphics (bitmap-based) buttons by scalable HTML (CSS or SVG or both) buttons.

This would also be advantageous, because:

  • The proposed HTML buttons can have custom tags </junkblocker>; and
  • Such tags will not be subjected to changes forced on host page by its styling rules (namely img { /* styling rules */}).

<!DOCTYPE html>
<html>

<head>
  <title>Web Feed Icons</title>
  <style>
    #table * {
      font-weight: bold;
      font-family: system-ui;
      border-radius: 8px;
      padding: 3px;
      padding-right: 5px;
      padding-left: 5px;
      user-select: none;
      color: white;
    }

    a {
      text-decoration: none; }

    #activitystream {
      background: slateblue; }

    #atom {
      background: dimgrey; }

    #json {
      background: limegreen; }

    #rdf {
      background: orangered; }

    #rss {
      background: darkorange; }
  </style>
</head>

<body>
  <junkblocker id="table">
    <a id="activitystream">ActivityStream</a>
    <a id="atom">Atom Feed</a>
    <a id="json">JSON Feed</a>
    <a id="rdf">RDF Vocabulary</a>
    <a id="rss">RSS Feed</a>
  </junkblocker>
</body>

</html>

Instead of using :after or :before pseudo-element, user-select: none has been added to achieve no selectability.

schimon
§
Posted: 2023-05-16
Report comment

Demo preview (PNG image)

schimon
§
Posted: 2023-05-16
Edited: 2023-05-16
Report comment

Another version:


<!DOCTYPE html>
<html>

<head>
  <title>Web Feed Icons</title>
  <style>
    #table * {
      font-weight: bold;
      font-family: system-ui;
      /* border-radius: 8px; */
      padding: 3px;
      padding-right: 5px;
      padding-left: 5px;
      user-select: none;
      color: white;
    }

    a {
      text-decoration: none; }

    .type {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px; }

    .grey {
      background: grey;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px; }

    #activitystream {
      background: slateblue; }

    #atom {
      background: dimgrey; }

    #json {
      background: limegreen; }

    #rdf {
      background: orangered; }

    #rss {
      background: darkorange; }
  </style>
</head>

<body>
  <junkblocker id="table">
    <a href>
      <junkblocker id="activitystream" class="type">Activity</junkblocker><junkblocker class="grey">Stream</junkblocker>
    </a>
    <a href>
      <junkblocker id="atom" class="type">Atom</junkblocker><junkblocker class="grey">Syndication</junkblocker>
    </a>
    <a href>
      <junkblocker id="json" class="type">JSON</junkblocker><junkblocker class="grey">Feed</junkblocker>
    </a>
    <a href>
      <junkblocker id="rdf" class="type">RDF</junkblocker><junkblocker class="grey">Vocabulary</junkblocker>
    </a>
    <a href>
      <junkblocker id="rss" class="type">RSS</junkblocker><junkblocker class="grey">Subscribe</junkblocker>
    </a>
  </junkblocker>
</body>

</html>
schimon
§
Posted: 2023-05-16
Edited: 2023-05-16
Report comment

Sorry for double or triple posting.

This is a version with XML and display: inline-block, because I use two elements for each display: inline-flex, because I use two elements for each and attempt to have a uniform width; See image preview below.

Notes:

  • Style .grey { text-align: center } doesn't work.
  • I think inline-block or table-cell would be better, provided uniform width doesn't matter.
  • Using mono fonts is also an option to achieve uniform width.

<!DOCTYPE html>
<html>

<head>
  <title>Web Feed Icons</title>
  <style>
    #table * {
      display: inline-flex; /* table-cell */ /* inline-block */
      font-weight: bold;
      font-family: system-ui;
      /* border-radius: 8px; */
      padding: 3px;
      padding-right: 5px;
      padding-left: 5px;
      user-select: none;
      color: white;
    }

    a {
      max-width: 190px;
      text-decoration: none; }

    .type {
      width: fit-content;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px; }

    .grey {
      width: 150px; /* any value above 144px */
      text-align: center; /* not working possible due to inline-flex */
      background: grey;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px; }

    #activitystream {
      background: slateblue; }

    #atom {
      background: mediumpurple; } /* dimgrey */

    #json {
      background: limegreen; }

    #rdf {
      background: orangered; }

    #rss {
      background: darkorange; }

    #xml {
      background: purple; }
  </style>
</head>

<body>
  <junkblocker id="table">
    <a href>
      <junkblocker id="activitystream" class="type">Activity</junkblocker><junkblocker class="grey">Stream</junkblocker>
    </a>
    <a href>
      <junkblocker id="atom" class="type">Atom</junkblocker><junkblocker class="grey">Syndication</junkblocker>
    </a>
    <a href>
      <junkblocker id="json" class="type">JSON</junkblocker><junkblocker class="grey">Feed</junkblocker>
    </a>
    <a href>
      <junkblocker id="rdf" class="type">RDF</junkblocker><junkblocker class="grey">Vocabulary</junkblocker>
    </a>
    <a href>
      <junkblocker id="rss" class="type">RSS</junkblocker><junkblocker class="grey">Subscribe</junkblocker>
    </a>
    <a href>
      <junkblocker id="xml" class="type">XML</junkblocker><junkblocker class="grey">Subscribe</junkblocker>
    </a>
  </junkblocker>
</body>

</html>
schimon
§
Posted: 2023-05-16
Edited: 2023-05-16
Report comment

Last prototype version with monospace and pixelized look. See preview below.


<!DOCTYPE html>
<html>

<head>
  <title>Web Feed Icons</title>
  <style>
    #table * {
      display: inline-block;
      font-weight: bold;
      font-family: monospace;
      padding: 3px;
      user-select: none;
      color: white;
    }

    a {
      text-decoration: none; }

    .type {
      outline: black solid 1px;
      white-space: pre; }

    .grey {
      outline: black solid 1px;
      background: grey;
      white-space: pre; }

    #activitystream {
      background: slateblue; }

    #atom {
      background: mediumpurple; } /* dimgrey */

    #json {
      background: limegreen; }

    #rdf {
      background: orangered; }

    #rss {
      background: darkorange; }

    #xml {
      background: purple; }
  </style>
</head>

<body>
  <junkblocker id="table">
    <a href>
      <junkblocker id="activitystream" class="type"> Activity </junkblocker><junkblocker class="grey"> Stream </junkblocker>
    </a>
    <a href>
      <junkblocker id="atom" class="type"> Atom </junkblocker><junkblocker class="grey"> Syndication </junkblocker>
    </a>
    <a href>
      <junkblocker id="json" class="type"> JSON </junkblocker><junkblocker class="grey">    Feed    </junkblocker>
    </a>
    <a href>
      <junkblocker id="rdf" class="type"> RDF </junkblocker><junkblocker class="grey">  Vocabulary </junkblocker>
    </a>
    <a href>
      <junkblocker id="rss" class="type"> RSS </junkblocker><junkblocker class="grey">   Subscribe  </junkblocker>
    </a>
    <a href>
      <junkblocker id="xml" class="type"> XML </junkblocker><junkblocker class="grey">  Subscribe  </junkblocker>
    </a>
  </junkblocker>
</body>

</html>
schimon
§
Posted: 2023-05-16
Report comment

Alternatively, property all: unset; can be used (at the start) and the rest of the porpertoes should be appllied without interference.

Style has:

margin: 50%;
height: 50%;

Apply all: unset; as follows:

all: unset; /* reset everything */
margin: 50%; /* begin styling */
height: 50%;

I'm for the scalable buttons, yet it is not for me to decide.

Azazello
§
Posted: 2023-05-27
Edited: 2023-05-27
Report comment

Wow, some Modern Love for one of my most-favorite scripts! Thank you!

Also, thanks for offering option to have squared boxes - I despise rounded content, but I understand some prefer it.

A request: I prefer the black outline and teeny-tiny border white spaces within, re: image -- any chance of having that also as an option? And custom (or that specific) image for Atom and maybe other formats?

schimon
§
Posted: 2023-05-28
Report comment

Hey, it's nice to receive a feeback, Azazello.

Wow, some Modern Love for one of my most-favorite scripts! Thank you!

Perhaps, contemporary, so to speak.

Well, this is one of the most important programs in web browser history, IMHO.

I wanted to do it a long time ago, but I procrastinated it.

Also, thanks for offering option to have squared boxes - I despise rounded content, but I understand some prefer it.

You are welcome. And I think just like you on that matter!

A request: I prefer the black outline and teeny-tiny border white spaces within, re:  -- any chance of having that also as an option? And custom (or that specific) image for Atom and maybe other formats?

The samples above are just samples and I made them intentionally larger so it would be easier to see the structure.

If at all possible, and it probablt is, I'd like to preserve the original style of the current buttons.

I might be suggesting to add Nerd Fonts to compensate for graphics, though it might be too much, unless we add it as an external library or resource.

In order for me to continue, I'll be waiting for the opinion of the developer.

junkblockerAuthor
§
Posted: 2023-05-28
Report comment

Thanks for the proposals and the passion around the script. I like the latest SVG variations! However, I've left this alone for a decade now and don't plan on investing any more time on it as my reading habits have changed and the script as it stands just works for me.

@schimon, if you want I can add you as an author here or you can equally well create/publish a new one.

schimon
§
Posted: 2023-05-29
Report comment

Please tell me what you want and ow you want it and I'll send you "diff" code to approve (i.e. SVG with dimensions of x y and text sized z).

Post reply

Sign in to post a reply.