Action

On this Day

Posted by @derekvan, Last update 25 days 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.

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.