Drafts Directory: On this Day

Action

Posted by @derekvan, Last update over 3 years ago

This script presents a prompt for the day (defaults to today) and shows all notes created that day. On line 134, you can adjust tag names to set different colors in the CSS as borders around notes.

Install

Steps

script

// On this Day

    let p = Prompt.create();
    p.title = "On This Day";
    p.addTextField("day","Which day?","today",{"wantsFocus":true});
    p.addButton("OK");

    if (p.show())
    {
        date = p.fieldValues["day"];
    }


// Grab the CSS

var css = `body {
	font-family: Lato, serif;
    font-weight: 400;
    font-style: normal;
	font-size: 1.3em;
}

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

.entry {
	
	border-radius: 15px;
	padding: 20px;
	margin-bottom:10px;
	--pCol: #8A03FD;
	--tCol: #07B1F0;
	--jCol: #B60909;
	--nCol: #FD9703;
	--dCol: #797A78;
}

.entry .tagTitle {
	text-align: left;
	margin-top: -55px;
	height: 40px;
	line-height: 40px;
	font-size: 1em;
	color: white;
}

.loc {
	font-size:.5em;
}

.done {
	list-style: none;
	margin:-20px;
}

.date {
	text-align: center;
}

img {
	max-width: 90%;
}


button {
	display: inline-block;
	text-align: center;
	color: #fffff0;
	font-size: 1em;
}


.ok {
	background-color: #1F1F1FA1;
	width: 95%;
    margin: .5em;
    height: 3.5em;
}
.cancel {
	background-color: #1F1F1FA1;
	width: 95%;
    margin: .5em;
    height: 3.5em;
}




@media (prefers-color-scheme: dark)
{
	body {
		color: #FFFFF0;
		background: #121212;
	}

	a {
		color: #809fff;
	}
	.entry {
		--pCol: #510297;
		--tCol: #056e94;
		--jCol: #920707;
		--nCol: #975b02;
		--dCol: #4d4d4c;
	}
}`;

var today = Date.parse(date).toString("MMdd");
const drafts = Draft.query("","all",[]);

// Create the HTML
var html = `<!DOCTYPE html>
<html dir="auto">
<head>
<title>On This Day</title>
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
<style>
${css}
</style>
</head>
<body>
<h1 class="date">${Date.parse(today).toString("MMMM d")}</h1>`;

const sortedDrafts = drafts.sort((a,b) => a.createdAt - b.createdAt);

for (let dt of sortedDrafts)
{
    let day = Date.parse(dt.createdAt).toString("MMdd");
    // Regex and color lookup table for tags
    const regex = /(practice|today|journal|note)/;
    const tagColors = {
        "practice": "pCol",
        "today": "tCol",
        "journal": "jCol",
        "note": "nCol",
        "": "dCol"
    };
    
    if (today == day) // Grab all notes from "today"
    {
        let tagsA = dt.tags; // grab tags
        let tags = tagsA.join(" "); // create string of tags
        let tagDisplay = "";
        let found = tags.match(regex); // match tags to key categories
        if (found){
            tagDisplay = found[0];
        }
        let tagCol = tagColors[tagDisplay]; // Grab tag color from lookup table
        let preProcess = dt.content;
        
        let mmd = MultiMarkdown.create(); // convert note markdown to HTML
        mmd.format = "html";
        let text = mmd.render(preProcess);
        
       
        html +=`<div class="entry" style="border: 1.4em solid var(--${tagCol})";>
        <h1 class="tagTitle">${tagDisplay}</h1>
        <h1>${Date.parse(dt.createdAt).toString("dddd yyyy")}</h1>
        ${text}
        <p><a href="${dt.permalink}"><button style="background-color:var(--${tagCol})">link</button></a> || ${tags} </p>
        </div>`;
        
    }
    
}

html+=`</body>
</html>`;

console.log(html);
let preview = HTMLPreview.create();
preview.show(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.

After Success	Default
Notification	Info
Log Level	Info