feat(blog): add feed xlst options to render beautiful RSS and Atom fe…

…eds (#9252) Co-authored-by: ozakione <[email protected]> Co-authored-by: sebastien <[email protected]>
facebook · Aug 2, 2024 · 7be1fea · 7be1fea
1 parent 08a893a
commit 7be1fea
Show file tree

Hide file tree

Showing 37 changed files with 3,229 additions and 118 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -32,6 +32,8 @@
     "website/_dogfooding/_pages tests/diagrams.mdx",
     "*.xyz",
     "*.docx",
+    "*.xsl",
+    "*.xslt",
     "*.gitignore",
     "versioned_docs",
     "*.min.*",

diff --git a/packages/create-docusaurus/templates/classic-typescript/docusaurus.config.ts b/packages/create-docusaurus/templates/classic-typescript/docusaurus.config.ts
@@ -42,6 +42,10 @@ const config: Config = {
         },
         blog: {
           showReadingTime: true,
+          feedOptions: {
+            type: ['rss', 'atom'],
+            xslt: true,
+          },
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:

diff --git a/packages/create-docusaurus/templates/classic/docusaurus.config.js b/packages/create-docusaurus/templates/classic/docusaurus.config.js
@@ -48,6 +48,10 @@ const config = {
         },
         blog: {
           showReadingTime: true,
+          feedOptions: {
+            type: ['rss', 'atom'],
+            xslt: true,
+          },
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:

diff --git a/packages/docusaurus-plugin-content-blog/assets/atom.css b/packages/docusaurus-plugin-content-blog/assets/atom.css
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+main {
+  flex: 1 0 auto;
+  width: 100%;
+  margin: 2rem auto;
+  max-width: 800px;
+  /* stylelint-disable-next-line font-family-name-quotes */
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
+}
+
+.info {
+  display: block;
+  margin: 2rem 0;
+  padding: 1.6rem 2.4rem;
+  border: 1px solid dodgerblue;
+  border-left-width: 0.5rem;
+  border-radius: 0.4rem;
+  background-color: #edf5ff;
+}
+
+a {
+  color: #005aff;
+  text-decoration: none;
+}
+
+h1 {
+  text-wrap: balance;
+  font-size: 3.4rem;
+  font-weight: 800;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+h1 .rss-icon {
+  height: 3.2rem;
+  width: 3.2rem;
+  margin-right: 1rem;
+}
+
+h2 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 0.2rem;
+}
+
+h3 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 0.1rem;
+}
+
+.blog-description {
+  font-size: 1.4rem;
+  margin-bottom: 0.6rem;
+}
+
+.blog-post-date {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  font-style: italic;
+  color: #797b7e;
+}
+
+.blog-post-description {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  color: #434349;
+}
diff --git a/packages/docusaurus-plugin-content-blog/assets/atom.xsl b/packages/docusaurus-plugin-content-blog/assets/atom.xsl
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xsl:stylesheet
+  version="3.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:atom="http://www.w3.org/2005/Atom">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" />
+
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <head>
+        <title>Atom Feed | <xsl:value-of
+            select="atom:feed/atom:title"
+          /></title>
+        <link rel="stylesheet" href="atom.css" />
+      </head>
+      <body>
+        <main>
+          <div class="description">
+            <div class="info">
+              <strong>This is an Atom feed</strong>. Subscribe by copying the URL
+              from the address bar into your newsreader. Visit
+              <a href="https://aboutfeeds.com/">About Feeds</a> to learn more
+              and get started. It’s free.
+            </div>
+            <h1>
+              <div class="rss-icon">
+                <svg
+                  version="1.1"
+                  id="Capa_1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  viewBox="0 0 455.731 455.731"
+                  xml:space="preserve">
+                  <g>
+                    <rect
+                      x="0"
+                      y="0"
+                      style="fill: #f78422"
+                      width="455.731"
+                      height="455.731"
+                    />
+                    <g>
+                      <path
+                        style="fill: #ffffff"
+                        d="M296.208,159.16C234.445,97.397,152.266,63.382,64.81,63.382v64.348
+                c70.268,0,136.288,27.321,185.898,76.931c49.609,49.61,76.931,115.63,76.931,185.898h64.348
+                C391.986,303.103,357.971,220.923,296.208,159.16z"
+                      />
+                      <path
+                        style="fill: #ffffff"
+                        d="M64.143,172.273v64.348c84.881,0,153.938,69.056,153.938,153.939h64.348
+                C282.429,270.196,184.507,172.273,64.143,172.273z"
+                      />
+                      <circle
+                        style="fill: #ffffff"
+                        cx="109.833"
+                        cy="346.26"
+                        r="46.088"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </div>
+              <xsl:value-of select="atom:feed/atom:title" />
+            </h1>
+            <p class="blog-description">
+              <xsl:value-of select="atom:feed/atom:subtitle" />
+            </p>
+          </div>
+          <h2>Recent Posts</h2>
+          <div class="blog-posts">
+            <xsl:for-each select="atom:feed/atom:entry">
+              <div class="blog-post">
+                <h3><a href="{atom:link[@rel='alternate']/@href}"><xsl:value-of
+                      select="atom:title"
+                    /></a></h3>
+                <div class="blog-post-date">
+                  Published on <xsl:value-of
+                    select="substring(atom:updated,0,11)"
+                  />
+                </div>
+                <div class="blog-post-description">
+                  <xsl:value-of select="atom:summary" />
+                </div>
+              </div>
+            </xsl:for-each>
+          </div>
+        </main>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/packages/docusaurus-plugin-content-blog/assets/rss.css b/packages/docusaurus-plugin-content-blog/assets/rss.css
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+main {
+  flex: 1 0 auto;
+  width: 100%;
+  margin: 2rem auto;
+  max-width: 800px;
+  /* stylelint-disable-next-line font-family-name-quotes */
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
+}
+
+.info {
+  display: block;
+  margin: 2rem 0;
+  padding: 1.6rem 2.4rem;
+  border: 1px solid dodgerblue;
+  border-left-width: 0.5rem;
+  border-radius: 0.4rem;
+  background-color: #edf5ff;
+}
+
+a {
+  color: #005aff;
+  text-decoration: none;
+}
+
+h1 {
+  text-wrap: balance;
+  font-size: 3.4rem;
+  font-weight: 800;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+h1 .rss-icon {
+  height: 3.2rem;
+  width: 3.2rem;
+  margin-right: 1rem;
+}
+
+h2 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 0.2rem;
+}
+
+h3 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 0.1rem;
+}
+
+.blog-description {
+  font-size: 1.4rem;
+  margin-bottom: 0.6rem;
+}
+
+.blog-post-date {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  font-style: italic;
+  color: #797b7e;
+}
+
+.blog-post-description {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  color: #434349;
+}
diff --git a/packages/docusaurus-plugin-content-blog/assets/rss.xsl b/packages/docusaurus-plugin-content-blog/assets/rss.xsl
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xsl:stylesheet
+  version="3.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:atom="http://www.w3.org/2005/Atom">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" />
+
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <head>
+        <title>RSS Feed | <xsl:value-of select="rss/channel/title" /></title>
+        <link rel="stylesheet" href="rss.css" />
+      </head>
+      <body>
+        <main>
+          <div class="description">
+            <div class="info">
+              <strong>This is an RSS feed</strong>. Subscribe by copying the URL
+              from the address bar into your newsreader. Visit
+              <a href="https://aboutfeeds.com/">About Feeds</a> to learn more
+              and get started. It’s free.
+            </div>
+            <h1>
+              <div class="rss-icon">
+                <svg
+                  version="1.1"
+                  id="Capa_1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  viewBox="0 0 455.731 455.731"
+                  xml:space="preserve">
+                  <g>
+                    <rect
+                      x="0"
+                      y="0"
+                      style="fill: #f78422"
+                      width="455.731"
+                      height="455.731"
+                    />
+                    <g>
+                      <path
+                        style="fill: #ffffff"
+                        d="M296.208,159.16C234.445,97.397,152.266,63.382,64.81,63.382v64.348
+                c70.268,0,136.288,27.321,185.898,76.931c49.609,49.61,76.931,115.63,76.931,185.898h64.348
+                C391.986,303.103,357.971,220.923,296.208,159.16z"
+                      />
+                      <path
+                        style="fill: #ffffff"
+                        d="M64.143,172.273v64.348c84.881,0,153.938,69.056,153.938,153.939h64.348
+                C282.429,270.196,184.507,172.273,64.143,172.273z"
+                      />
+                      <circle
+                        style="fill: #ffffff"
+                        cx="109.833"
+                        cy="346.26"
+                        r="46.088"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </div>
+              <xsl:value-of select="rss/channel/title" />
+            </h1>
+            <p class="blog-description">
+              <xsl:value-of select="rss/channel/description" />
+            </p>
+          </div>
+          <h2>Recent Posts</h2>
+          <div class="blog-posts">
+            <xsl:for-each select="rss/channel/item">
+              <div class="blog-post">
+                <h3><a href="{link}"><xsl:value-of select="title" /></a></h3>
+                <div class="blog-post-date">
+                  Published on <xsl:value-of select="substring(pubDate,0,17)" />
+                </div>
+                <div class="blog-post-description">
+                  <xsl:value-of select="description" />
+                </div>
+              </div>
+            </xsl:for-each>
+          </div>
+        </main>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/packages/docusaurus-plugin-content-blog/package.json b/packages/docusaurus-plugin-content-blog/package.json
@@ -59,6 +59,7 @@
     "node": ">=18.0"
   },
   "devDependencies": {
-    "@total-typescript/shoehorn": "^0.1.2"
+    "@total-typescript/shoehorn": "^0.1.2",
+    "tree-node-cli": "^1.6.0"
   }
 }