Last active
January 13, 2024 22:47
-
-
Save ramisedhom/47eee0a3e4eb887f02c3730ed5b3c211 to your computer and use it in GitHub Desktop.
Dashboard home page from Joplin notes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Dashboard</title> | |
| <link rel='stylesheet' href='bootstrap-4.4.1/css/bootstrap.min.css'> | |
| <script type='text/javascript' src='markdown-it.min.js'></script> | |
| <script type='text/javascript' src='markdown-it-footnote.min.js'></script> | |
| <script type='text/javascript' src='joplin.js'></script> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <div class='row'> | |
| <div class='col border border-primary rounded m-3'> | |
| <!-- Random note from Joplin folder 'Quotes' --> | |
| <p class='border border-primary rounded m-3 text-center font-weight-bold bg-info text-light'>Daily random quote</p> | |
| <p id='random-note'><script>joplin_query_random_note(token, 'random-note');</script></p> | |
| </div> | |
| <div class='col border border-primary rounded m-3'> | |
| <!-- List of notes created previous years on same day like today --> | |
| <p class='border border-primary rounded m-3 text-center font-weight-bold bg-info text-light'>On this day</p> | |
| <ul id='on-this-day'><script>joplin_query_notes_by_created(token, 'on-this-day');</script></ul> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col border border-primary rounded m-3'> | |
| <!-- Text from Joplin note titled with today date in YYYY-MM-DD format --> | |
| <p class='border border-primary rounded m-3 text-center font-weight-bold bg-info text-light'>Today daily log</p> | |
| <p id='today-log'><script>joplin_query_note_by_title(token, today, 'today-log');</script></p> | |
| </div> | |
| <div class='col border border-primary rounded m-3'> | |
| <!-- Text from Joplin note titled with yesterday date in YYYY-MM-DD format --> | |
| <p class='border border-primary rounded m-3 text-center font-weight-bold bg-info text-light'>Yesterday daily log</p> | |
| <p id='yesterday-log'><script>joplin_query_note_by_title(token, yesterday, 'yesterday-log');</script></p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @author - rami.sedhom@gmail.com | |
| * @description - get markdown notes as from Joplin and convert it to HTML using markdown-it | |
| * @params - User need to set input variables: url, token and folder_id | |
| * @version - 0.0.2 | |
| */ | |
| var url = 'http://127.0.0.1:41184'; | |
| var token = 'PUT YOUR JOPLIN TOKEN HERE'; | |
| // Enable markdown-it | |
| var md = window.markdownit({ | |
| html: true, | |
| linkify: true, | |
| typographer: true, | |
| breaks: true | |
| }) | |
| .use(window.markdownitFootnote);; | |
| // Set today and yesterday dates | |
| var today = new Date(); | |
| today = today.toISOString().substring(0, 10); | |
| var yesterday = new Date(); | |
| yesterday.setDate(yesterday.getDate() - 1); | |
| yesterday = yesterday.toISOString().substring(0, 10); | |
| function joplin_query_note_by_title(token, query, css_id_selector) { | |
| fetch(url + '/search?query=' + query + '&type=note&fields=body&token=' + token) | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById(css_id_selector).innerHTML=(md.render(data[0].body))}); | |
| } | |
| function joplin_query_notes_by_created(token, css_id_selector) { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.addEventListener('readystatechange', function () { | |
| if (this.readyState === this.DONE) { | |
| // Convert to JSON | |
| var jsonResponse = JSON.parse(this.responseText); | |
| // Dates | |
| var one_day = 86400; //(24*60*60) | |
| var dt_today = new Date(); | |
| var ts_today_midnight = dt_today.setHours(0,0,0,0)/1000; | |
| var ts_tomorrow_midnight = ts_today_midnight + one_day; | |
| // Filter | |
| back_years=20; | |
| var ar_note = []; | |
| for (i=1; i<=back_years; i++){ | |
| dt_today_midnight = new Date(ts_today_midnight*1000); | |
| dt_tomorrow_midnight = new Date(ts_tomorrow_midnight*1000); | |
| dt_temp = dt_today_midnight; | |
| ts_on_this_day = dt_temp.setFullYear(dt_temp.getFullYear()-i); | |
| dt_temp = dt_tomorrow_midnight; | |
| ts_on_next_day = dt_temp.setFullYear(dt_temp.getFullYear()-i); | |
| var note = jsonResponse.filter(d => d.user_created_time >= ts_on_this_day && d.user_created_time <= ts_on_next_day); | |
| if (note.length > 0) ar_note.push(note); | |
| } | |
| for (i=0; i<ar_note.length; i++) { | |
| var date = new Date(ar_note[i][0].user_created_time); | |
| document.getElementById(css_id_selector).innerHTML = document.getElementById(css_id_selector).innerHTML + '<li>' + ar_note[i][0].title + ' <em>@ ' + date.getFullYear() + '</em></il>'; | |
| } | |
| } | |
| }); | |
| // Request all notes from Joplin | |
| xhr.open('GET', url + '/notes' + '?token=' + token + '&fields=id,title,user_created_time'); | |
| xhr.send(); | |
| } | |
| function joplin_query_random_note(token, css_id_selector) { | |
| // Get notes from Quotes notebook | |
| // TODO: get notebook by name, return id to be used in 2nd fetch | |
| folder_id = 'PUT FOLDER ID HERE'; | |
| fetch(url + '/folders/' + folder_id + '/notes' + '?token=' + token + '&fields=body' ) | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById('random-note').innerHTML=(data[Math.floor(Math.random() * data.length)].body) | |
| }); | |
| } |
"folder_id" is the ID of the folder that contain some notes from which I get 1 random note. For my case, I point it to folder where I put some notes containing some quotes. To get "folder_id", you can use GET /folders to list all folders and its corresponding IDs. You can then select the desired "folder_id" from this list.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
HI, just wanted to check this out... But I'm not sure what "folder_id" is or where to find the value. Is there a write-up on this somewhere? All I'm seeing is the index.html and joplin.js -- seems like there are some other js files being referenced in the html...