Getting Started

If you're not running Gatsby, keep reading for guides to quickly adding Second Edition to any site. More integration guides to come!

Integration Guides

Quick Start

Let's use Second Edition's client-side library to include your articles on your site.

The library is available on NPM. In this demo, we'll import it into our page as a UMD module via JSDelivr.

Here's the complete code (try this live on JSFiddle):

<html lang="en">
  <head>
    <title>Second Edition Demo</title>
    <script src="https://cdn.jsdelivr.net/dompurify/0.8.5/purify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/secondedition-fetch@0.0.2/dist/umd.js"></script>
    <style>
      body {
        margin: 0;
        padding: 20px;
      }
      img {
        max-width: 350px;
      }
    </style>
  </head>
  <body>
    <secondedition src="17841402319431460;17864918269813308"></secondedition>
    <script>
      se.fetchAndInjectAll((unsafeHtml) => DOMPurify.sanitize(unsafeHtml));
    </script>
  </body>
</html>

The two key points are:

  • the <secondedition> HTML tag
  • the fetchAndInjectAll function which pulls the formatted article from Second Edition and inserts it at each <secondedition> tag

For security, we also sanitise the pulled content using DOMPurify. In the next step, we'll also use this library to help us style the article.

Styling the article

We're going to make our page look a lot nicer by importing Tailwind CSS and applying stylings to elements in our article.

View the final result on JSFiddle.

The key part is this JavaScript which customises DOMPurify to add Tailwind stylings to certain HTML elements in the article's HTML before the article is injected into the DOM.

DOMPurify.addHook("beforeSanitizeAttributes", function(node, data) {
  if (node.tagName === "IMG") {
    node.setAttribute("class", "rounded-md");
  }

  if (node.tagName === "P") {
    node.setAttribute("class", "my-4 w-4/5 font-light");
  }

  if (node.tagName === "DIV") {
    if (node.hasAttribute("class")) {
      if (node.getAttribute("class").indexOf("se-gallery") > -1) {
        node.setAttribute("class", "grid grid-cols-2 gap-x-4 gap-y-4");
      }
    }
  }
});

se.fetchAndInjectAll((s) => DOMPurify.sanitize(s));