memex copy-paster templating language research

readme.md

Output:

ejs

HTML:

<a href="http://some-url.com">
  test title
</a>
<a href="https://worldbrain.io">
  Memex
</a>
<a href="https://weird.io">
  Weird title with "quotes"
</a>

Markdown:

[test title](http://some-url.com)
[Memex](https://worldbrain.io)
[Weird title with "quotes"](https://weird.io)

JSON:

{
  title: "test title",
  url: "http://some-url.com"
}
{
  title: "Memex",
  url: "https://worldbrain.io"
}
{
  title: "Weird title with &#34;quotes&#34;",
  url: "https://weird.io"
}

Bonus:

FROM COMPILED STRING

handlebars


HTML:

<a href="http://some-url.com">
  test title
</a>
<a href="https://worldbrain.io">
  Memex
</a>
<a href="https://weird.io">
  Weird title with "quotes"
</a>

Markdown:

[test title](http://some-url.com)
[Memex](https://worldbrain.io)
[Weird title with "quotes"](https://weird.io)

JSON:

{
  title: "test title",
  url: "http://some-url.com"
}
{
  title: "Memex",
  url: "https://worldbrain.io"
}
{
  title: "Weird title with &quot;quotes&quot;",
  url: "https://weird.io"
}

Both ejs, and handlebars allow us to handle escaped and unescaped strings.

ejs exposes full javascript within the templates which might not be ideal (security concerns?)

We could also use "standard" javascript template strings, but then we would have to write the escaping logic by ourselves, and they also (like ejs) expose full JS runtime.

templating.js

const URL_DATA = [
  {
    title: "test title",
    url: "http://some-url.com",
  },
  {
    title: "Memex",
    url: "https://worldbrain.io",
  },
  {
    title: `Weird title with "quotes"`,
    url: "https://weird.io",
  },
];

// ------------ EJS

const ejs = require("ejs");
console.log("ejs\n");

// ------------ HTML

console.log("HTML:\n");

// note the `<%-` usage - this outputs unescaped text
const ejsToHTML = `<a href="<%= url %>">
  <%- title %>
</a>`;

URL_DATA.forEach((page) => {
  const rendered = ejs.render(ejsToHTML, page);
  console.log(rendered);
});

// ------------ Markdown

console.log("\nMarkdown:\n");

// note the `<%-` usage - this outputs unescaped text
const ejsToMarkdown = `[<%- title %>](<%= url %>)`;

URL_DATA.forEach((page) => {
  const rendered = ejs.render(ejsToMarkdown, page);
  console.log(rendered);
});

// ------------ JSON

console.log("\nJSON:\n");

// note the `<%=` usage - this outputs escaped text
const ejsToJSON = `{
  title: "<%= title %>",
  url: "<%= url %>"
}`;

URL_DATA.forEach((page) => {
  const rendered = ejs.render(ejsToJSON, page);
  console.log(rendered);
});

// ------------ bonus

console.log("\nBonus:\n");

// note that "FROM COMPILED STRING" appears in terminl - EJS allows arbitrary JS inside the template
ejs.render(`<% console.log("FROM COMPILED STRING") %>`);

// ------------ HANDLEBARS

const handlebars = require("handlebars");
console.log("\nhandlebars\n");

// ------------ HTML

console.log("\nHTML:\n");

// note the `{{{` - this outputs unescaped text
const hsToHTML = `<a href="{{url}}">
  {{{title}}}
</a>`;

URL_DATA.forEach((page) => {
  const rendered = handlebars.compile(hsToHTML)(page);
  console.log(rendered);
});

// ------------ Markdown

console.log("\nMarkdown:\n");

// note the `<%-` usage - this outputs unescaped text
const hsToMarkdown = `[{{{title}}}]({{url}})`;

URL_DATA.forEach((page) => {
  const rendered = handlebars.compile(hsToMarkdown)(page);
  console.log(rendered);
});

// ------------ JSON

console.log("\nJSON:\n");

// note the `<%=` usage - this outputs escaped text
const hsToJSON = `{
  title: "{{title}}",
  url: "{{url}}"
}`;

URL_DATA.forEach((page) => {
  const rendered = handlebars.compile(hsToJSON)(page);
  console.log(rendered);
});