Drafts Directory: Workspace Table of Contents

Action

Posted by agiletortoise, Last update over 2 years ago

Create a workspace table of content in an HTML preview using only Mustache templates and no script.

Edit the first “Define Template Tag” value to set the name of a valid workspace in your installation.

This action maybe be useful on its own, but is intended mostly as an example of some of the possibilities offered by Mustache templates.

Trusted member

Install

Steps

defineTemplateTag
name
workspaceName
template
DEBUG

htmlpreview

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

<head>
  <title>[[title]]</title>
  <meta charset="UTF-8">
  <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: #111111;
        --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>
{{#markdown}}
# Workspace: {{workspaceName}}
{{# _workspaceDrafts(workspaceName, "inbox") }}
* {{#isFlagged}}🚩{{/isFlagged}}[{{displayTitle}}]({{permalink}}){{/}}
{{/markdown}}
</body>

</html>

Options

After Success Default

Notification Info

Log Level Info

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

name	workspaceName
template	DEBUG

After Success	Default
Notification	Info
Log Level	Info

Action

Workspace Table of Contents

Steps

defineTemplateTag

htmlpreview

Options