diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 /build/rss-click | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/rss-click')
| -rw-r--r-- | build/rss-click/index.html | 65 |
1 files changed, 38 insertions, 27 deletions
diff --git a/build/rss-click/index.html b/build/rss-click/index.html index 1dbe5d9..5913050 100644 --- a/build/rss-click/index.html +++ b/build/rss-click/index.html @@ -1,51 +1,62 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Clickable Links Inside XML</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Clickable Links Inside XML</h1> +<h1 id="clickable-links-inside-xml">Clickable Links Inside XML</h1> + <p>2022-06-20</p> + <p>With the recent patch to the Shinobi Website project, I thought it would be best to share my experience implementing clickable links inside a rendered XML RSS file directly through a browser. This is made possible thanks to the awesome power of XSL formatting.</p> + <p>Before we begin, it should be noted that both Safari for macOS and <em>all</em> browsers on iOS do NOT support the ability to render XML files. Instead you are required to download the feeds as static files to your system. Major bummmer. Hopefully this will be fixed in the near future.</p> -<h2>The Code</h2> + +<h2 id="the-code">The Code</h2> + <p>Rendering your entry links as interactive URLs is fairly intuitive. You just need to:</p> + <ol> -<li>Tell the file which tag it needs to render as the "a:link" element</li> -<li>Set the inner child attribute to "href"</li> -<li>Set the value of that attribute to use the entry's <code>link</code> parameter</li> +<li><p>Tell the file which tag it needs to render as the “a:link” element</p></li> +<li><p>Set the inner child attribute to “href”</p></li> +<li><p>Set the value of that attribute to use the entry’s <code>link</code> parameter</p> + +<p><a href="/xsl:attribute">/xsl:attribute</a> + +<a href="/xsl:element">/xsl:element</a></p></li> </ol> -<pre><code><xsl:element name="a"> - <xsl:attribute name="href"> - <xsl:value-of select="link"/> - </xsl:attribute> - <pre><xsl:value-of select="title"/></pre> -</xsl:element> -</code></pre> + <p>In the instance above I am rendering the entry title as a clickable element which will direct users to the specific entry URL. You could simply render the full entry link URL text as the interactive link if you prefer. Something like:</p> -<pre><code><xsl:element name="a"> - <xsl:attribute name="href"> - <xsl:value-of select="link"/> - </xsl:attribute> - <pre><xsl:value-of select="link"/></pre> -</xsl:element> + +<pre><code><xsl:element name="a"> + <xsl:attribute name="href"> + <xsl:value-of select="link"/> + </xsl:attribute> + <pre><xsl:value-of select="link"/></pre> +</xsl:element> </code></pre> -<h2>Live Example</h2> -<p>In a supported browser, you can see the code in action here: https://pblog.bt.ht/feed.xml</p> -<p>That's really all there is to it.</p> -<h2>Refs</h2> + +<h2 id="live-example">Live Example</h2> + +<p>In a supported browser, you can see the code in action here: <a href="https://pblog.bt.ht/feed.xml">https://pblog.bt.ht/feed.xml</a></p> + +<p>That’s really all there is to it.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>https://shinobi.bt.ht/posts/patch-3.txt</li> +<li><a href="https://shinobi.bt.ht/posts/patch-3.txt">https://shinobi.bt.ht/posts/patch-3.txt</a></li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> |