Transclude > Preview | Drafts Directory

Action

Posted by agiletortoise, Last update over 3 years ago

Replace any [[Wiki-Style Links]] to other drafts with the content of the draft they are linked to and output the full content to a preview window.

Tested

Trusted member

Install

Steps

script

let findLinkedDraft = (title) => {
	let found = Draft.queryByTitle(title);
	if (found.length == 0) {
		return null;
	}
	return found[0];
}

let transclude = (d) => {
	let re = /\[\[(.+?)\]\]/gm;
	let content = draft.content;

	content = content.replace(re, (match, title) => {
		let d = findLinkedDraft(title);
		if (d) {
			return d.content;
		}
		else { // not found, leave as-is
			return match;
		}
	});
	return content;
}

let content = transclude(draft);
draft.setTemplateTag("content", content);

htmlpreview

<!DOCTYPE html>
<html dir="auto">

<head>
  <title>[[title]]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    @charset "utf-8";

    :root {
      --main-bg-color: white;
      --main-color: black;
      --alternate-bg-color: #efefef;
      --alternate-color: #222222;
      --main-border-color: #BBBBBB;
        --link-color: #627EC9;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --main-bg-color: #222222;
        --main-color: #eeeeee;
        --alternate-bg-color: #444444;
        --alternate-color: #cccccc;
        --main-border-color: #AAAAAA;
          --link-color: #627EC9;
      }
    }

    html {
      font-size: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
      line-height: 1.4;
    }

    body {
      margin: 0;
      padding: 1em;
      background-color: var(--main-bg-color);
      color: var(--main-color);
    }

    @media (max-device-width: 480px) {}

    @media (min-device-width: 481px) {
      body {
        margin: auto;
        max-width: 600px;
      }
    }

    blockquote {
      font-style: italic;
      margin: 1.5em 2em;
      padding: 1em;
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
    }

    a {
      color: var(--link-color);
    }
    pre {
      display: block;
      overflow: scroll;
      width: 100%;
      background-color: var(--alternate-bg-color);
      padding: .5em 1em;
      margin: 1em 0;
    }

    code {
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
      font-family: Menlo, Courier, sans-serif;
      padding: 2px 3px;
    }

    table {
      margin: 1.5em 0;
      border: 1px solid var(--main-border-color);
      border-collapse: collapse;
    }

    th {
      padding: .25em .5em;
      background: var(--alternate-bg-color);
      border: 1px solid var(--main-border-color);
    }

    td {
      padding: .25em .5em;
      border: 1px solid var(--main-border-color);
    }

    img {
      max-width: 90%;
    }
  </style>
</head>

<body>
  %%[[content]]%%
</body>

</html>

Options

After Success Nothing

Notification None

Log Level None

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Nothing
Notification	None
Log Level	None