Added better pictures. improved the default color system and more

Author: ilse-langnar

docs/screenshot-3.png

@@ -340,7 +340,7 @@ class Commands {
                         return `<div class="flex" >
                             <img src="${ilse.require(command.icon)}" style="width: 20px;" />
                             <p data-command-id="${command.id}" > ${command.name} </p>
-                            <p style="position: absolute; right: 0px; color: var( --background-color ); background: var( --text-color ); padding: 3px; border-radius: 4px; min-width: 30px; min-height: 30px; "> ${get_command_by_keyboard_shortcut(command.id)} </p>
+                            <p style="position: absolute; right: 0px; color: var( --primary ); background: var( --secondary ); padding: 3px; border-radius: 4px; min-width: 30px; min-height: 30px; "> ${get_command_by_keyboard_shortcut(command.id)} </p>
                         </div>`
                     }
 
@@ -713,13 +713,32 @@ class Commands {
                 icon: "dice-3.svg",
                 fn: async function() {
 
-                    let list                   = ilse.notes.query_regexp( /(\.png|\.jpg|\.gif)/ )
-                    let random_list            = get_random_array_elements( list, 10 )
-                    let normalized_list        = random_list.map( item => { return `<div @click="navigator.clipboard.writeText('${item}'); api.notify('Copied!', 'Copied: ' + '${item}' + ' To your clipboard' ); " >
+                    // let list                   = ilse.notes.query_regexp( /(\.png|\.jpg|\.gif)/ ) // query imgs
+                    // let random_list            = get_random_array_elements( list, 5 ) // get random set of them
+
+                    /* let normalized_list        = random_list.map( item => { return `<div @click="navigator.clipboard.writeText('${item}'); api.notify('Copied!', 'Copied: ' + '${item}' + ' To your clipboard' ); " >
                         <span x-html="api.markdown(api.notes.list['${item}'].content)" > </span>
                     </div>`
+                    }) */
+
+                    let html  = `<div x-data="{ pointer: 0 }" style="width: 80vw !important; height: 80vh !important; overflow: hidden; " >
+
+                        <div style="display: flex;" style="width: 100px; margin: 0 auto;" >
+                            <img :src="api.require('arrow-narrow-left.svg')" style="width: 40px;" @click="pointer -= 1" />
+                            <img :src="api.require('arrow-narrow-right.svg')" style="width: 40px;" @click="pointer += 1" />
+                        </div>
+
+                        <template x-for="(item, index) in api.utils.get_random_array_elements(api.notes.query_regexp(  /(\.png|\.jpg|\.gif)/  ), 10 )" :key="index" >
+                            <span x-show="pointer === index" x-html="api.markdown(api.notes.list[item].content)" > </span>
+                        </template>
+
+                    </div>`
+
+                    await ilse.commands.run("box", {
+                        html: html,
                     })
 
+                    /*
                     await ilse.commands.run( "html-list", {
                         search: "",
                         list: normalized_list,
@@ -739,6 +758,7 @@ class Commands {
 
                         },
                     })
+                    */
 
 
                 },

docs/screenshot-4.png

@@ -3,7 +3,6 @@ import APP_TEMPLATE         from "@/constants/APP_TEMPLATE.js"
 import CONFIG_TEMPLATE      from "@/constants/CONFIG_TEMPLATE.js"
 import CORE_PLUGINS         from "@/constants/CORE_PLUGINS.js"
 import DEFAULT_COMMANDS     from "@/constants/DEFAULT_COMMANDS.js"
-import DEFAULT_THEME        from "@/constants/DEFAULT_THEME.js"
 import DEMO_NOTES           from "@/constants/DEMO_NOTES.js"
 import LOGIC_TAGS           from "@/constants/LOGIC_TAGS.js"
 import PERMISSIONS          from "@/constants/PERMISSIONS.js"
@@ -19,7 +18,6 @@ export default {
     CONFIG_TEMPLATE,
     CORE_PLUGINS,
     DEFAULT_COMMANDS,
-    DEFAULT_THEME,
     DEMO_NOTES,
     LOGIC_TAGS,
     PERMISSIONS,

docs/screenshot-5.png

@@ -12,7 +12,6 @@ import make_plugin    from "@/html/make-plugin.html"
 import marketplace    from "@/html/marketplace.html"
 import new_tab        from "@/html/new-tab.html"
 import notification   from "@/html/notification.html"
-import outline_search from "@/html/outline-search.html"
 import outline        from "@/html/outline.html"
 import references     from "@/html/references.html"
 import setup          from "@/html/setup.html"
@@ -35,7 +34,6 @@ export default function get_default_components() {
         "marketplace.html":   marketplace,
         "new-tab.html":       new_tab,
         "notification.html":  notification,
-        "outline-search.html":outline_search,
         "outline.html":       outline,
         "references.html":    references,
         "setup.html":         setup,

javascript/web/src/App.vue

@@ -8,6 +8,6 @@ export default {
     regexp: /(^> ?.+?)((\r?\n\r?\n\w)|\Z)/,
     fn: function( match, utils ) {
         let content = match[0]
-        return markdown.render(content)
+        return markdown.render( " " + content )
     }
 }

javascript/web/src/classes/Commands.js

@@ -54,9 +54,14 @@ export default {
             return ` <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLWxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzQ4NTM2MSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMTAgMTRhMy41IDMuNSAwIDAgMCA1IDBsNCAtNGEzLjUgMy41IDAgMCAwIC01IC01bC0uNSAuNSIgLz4KICA8cGF0aCBkPSJNMTQgMTBhMy41IDMuNSAwIDAgMCAtNSAwbC00IDRhMy41IDMuNSAwIDAgMCA1IDVsLjUgLS41IiAvPgo8L3N2Zz4KCgo="/> <iframe class="url" src="${url}" frameBorder="0" style="width: 100%;" > </iframe> `
 
         } else if( is_pdf ) {
+
+            return ` <span class="pdf" > ${url} </span> <img style="width: 15px; display: inline !important;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzQ4NTM2MSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMzg0IDUxMiIgPjxwYXRoIGQ9Ik0xODEuOSAyNTYuMWMtNS0xNi00LjktNDYuOS0yLTQ2LjkgOC40IDAgNy42IDM2LjkgMiA0Ni45em0tMS43IDQ3LjJjLTcuNyAyMC4yLTE3LjMgNDMuMy0yOC40IDYyLjcgMTguMy03IDM5LTE3LjIgNjIuOS0yMS45LTEyLjctOS42LTI0LjktMjMuNC0zNC41LTQwLjh6TTg2LjEgNDI4LjFjMCAuOCAxMy4yLTUuNCAzNC45LTQwLjItNi43IDYuMy0yOS4xIDI0LjUtMzQuOSA0MC4yek0yNDggMTYwaDEzNnYzMjhjMCAxMy4zLTEwLjcgMjQtMjQgMjRIMjRjLTEzLjMgMC0yNC0xMC43LTI0LTI0VjI0QzAgMTAuNyAxMC43IDAgMjQgMGgyMDB2MTM2YzAgMTMuMiAxMC44IDI0IDI0IDI0em0tOCAxNzEuOGMtMjAtMTIuMi0zMy4zLTI5LTQyLjctNTMuOCA0LjUtMTguNSAxMS42LTQ2LjYgNi4yLTY0LjItNC43LTI5LjQtNDIuNC0yNi41LTQ3LjgtNi44LTUgMTguMy0uNCA0NC4xIDguMSA3Ny0xMS42IDI3LjYtMjguNyA2NC42LTQwLjggODUuOC0uMSAwLS4xLjEtLjIuMS0yNy4xIDEzLjktNzMuNiA0NC41LTU0LjUgNjggNS42IDYuOSAxNiAxMCAyMS41IDEwIDE3LjkgMCAzNS43LTE4IDYxLjEtNjEuOCAyNS44LTguNSA1NC4xLTE5LjEgNzktMjMuMiAyMS43IDExLjggNDcuMSAxOS41IDY0IDE5LjUgMjkuMiAwIDMxLjItMzIgMTkuNy00My40LTEzLjktMTMuNi01NC4zLTkuNy03My42LTcuMnpNMzc3IDEwNUwyNzkgN2MtNC41LTQuNS0xMC42LTctMTctN2gtNnYxMjhoMTI4di02LjFjMC02LjMtMi41LTEyLjQtNy0xNi45em0tNzQuMSAyNTUuM2M0LjEtMi43LTIuNS0xMS45LTQyLjgtOSAzNy4xIDE1LjggNDIuOCA5IDQyLjggOXoiLz48L3N2Zz4=" /> `
+
+                /*
             return `
                 <img style="width: 15px; display: inline !important;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLWJvb2siIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzQ4NTM2MSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMyAxOWE5IDkgMCAwIDEgOSAwYTkgOSAwIDAgMSA5IDAiIC8+CiAgPHBhdGggZD0iTTMgNmE5IDkgMCAwIDEgOSAwYTkgOSAwIDAgMSA5IDAiIC8+CiAgPGxpbmUgeDE9IjMiIHkxPSI2IiB4Mj0iMyIgeTI9IjE5IiAvPgogIDxsaW5lIHgxPSIxMiIgeTE9IjYiIHgyPSIxMiIgeTI9IjE5IiAvPgogIDxsaW5lIHgxPSIyMSIgeTE9IjYiIHgyPSIyMSIgeTI9IjE5IiAvPgo8L3N2Zz4KCgo=" />
                 <span class="pdf" > ${url} </span>`
+                */
 
         } else if( is_html ) {
 

javascript/web/src/constants/DEFAULT_THEME.js

@@ -32,7 +32,7 @@ export default {
             } else if( $event.ctrlKey ) {
 
             } else if( !$event.ctrlKey && !$event.shiftKey ){
-            } " > [[${alias}]] </a>`
+            } " > <!-- [[${alias}]] -->  ${alias} </a>`
 
         } else {
 
@@ -48,7 +48,7 @@ export default {
 
                 } else if( !$event.ctrlKey && !$event.shiftKey ) {
 
-                }" > [[${link}]] </a>`
+                }" > <!-- [[${link}]] --> ${link} </a>`
 
         }
 

javascript/web/src/constants/index.js

@@ -14,7 +14,7 @@ export default function modal( content, styles = {} ) {
         html: `
             <div style="width: 100vw; height: 100vh; background: rgba( 255, 255, 255, 0.3 ); z-index: 3; width: 100%; height: 100%; position: fixed; transform: translate( -50%, -50% ); left: 50%; top: 50%; "  >
 
-                <div id="${id}" style="z-index: 5; opacity: 1; position: fixed; left: 50%; top: 50%; transform: translate( -50%, -50% ); width: ${ styles.width || '90%' }; height: ${ styles.height || 'fit-content' }; max-height: 80%; overflow: auto; border-radius: var( --border-radius ); color: var( --text-color ); background: var( --background-color ); padding: 5px; text-align: center; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important; " >
+                <div id="${id}" style="z-index: 5; opacity: 1; position: fixed; left: 50%; top: 50%; transform: translate( -50%, -50% ); width: ${ styles.width || '90%' }; height: ${ styles.height || 'fit-content' }; max-height: 80%; overflow: auto; border-radius: var( --border-radius ); color: var( --secondary ); background: var( --primary ); padding: 5px; text-align: center; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important; " >
                     ${content}
                 </div>
 

javascript/web/src/functions/get_default_components.js

@@ -75,7 +75,7 @@ export default function modal( content, x, y, options = { width: "400px", height
                 <img class="is-pulled-right" style="width: 20px; cursor: pointer;" @click="api.stack.pop(); console.log('api.stack -> ', api.stack);" :src="api.require('x.svg')" />
                 <hr/>
 
-                <div id="${id}" style="z-index: 5; opacity: 1; position: fixed; left: 50%; top: 50%; transform: translate( -50%, -50% ); width: ${ options.width || '90%' }; height: ${ options.height || 'fit-content' }; max-height: 80%; overflow: auto; border-radius: var( --border-radius ); color: var( --text-color ); background: var( --background-color ); padding: 5px; text-align: center; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important; " >
+                <div id="${id}" style="z-index: 5; opacity: 1; position: fixed; left: 50%; top: 50%; transform: translate( -50%, -50% ); width: ${ options.width || '90%' }; height: ${ options.height || 'fit-content' }; max-height: 80%; overflow: auto; border-radius: var( --border-radius ); color: var( --secondary ); background: var( --primary ); padding: 5px; text-align: center; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important; " >
                     ${content}
                 </div>
 

javascript/web/src/functions/markdown_it_plugin_blockquote.js

@@ -11,7 +11,7 @@
                 <!-- <div style="padding: 10px; " x-data="{ list: api.notes.query( item ) }" >  -->
                     <!-- Date + Delete -->
                     <div style="display: flex;">
-                        <h1 style="center !important; color: var( --text-color );" x-text=" '&bull; &nbsp; ' + api.utils.yyyymmddhhss_to_pretty(item)" > </h1>
+                        <h1 style="center !important; color: var( --secondary );" x-text=" '&bull; &nbsp; ' + api.utils.yyyymmddhhss_to_pretty(item)" > </h1>
                         <img x-show="index !== 0" :src="api.require('x.svg')" style="width: 20px;margin-left:20px;cursor:pointer;" alt="" title="Delete" @click="list.splice( index, 1 )" >
                     </div>
                     <br>
@@ -39,10 +39,10 @@ <h1 style="center !important; color: var( --text-color );" x-text=" '&bull; &nbs
                 .load-more {
 
                     background-color: #000;
-                    background-color: var( --text-color );
+                    background-color: var( --secondary );
 
                     color: #fff;
-                    color: var( --background-color );
+                    color: var( --primary );
 
                     padding: 10px;
 
@@ -75,8 +75,8 @@ <h1 style="center !important; color: var( --text-color );" x-text=" '&bull; &nbs
     /*
     #daily-notes .load-more {
         display: block;
-        color: var( --text-color );
-        background: var( --background-color );
+        color: var( --secondary );
+        background: var( --primary );
         padding: 7px;
         border-radius: var( --border-radius );
         margin: 0 auto;

javascript/web/src/functions/markdown_it_plugin_embed.js

@@ -26,7 +26,7 @@
                 border: 1px solid #b7b0b0;
                 border-radius: 10px;
                 border: 1px solid #454545;
-                background: var( --background-color );
+                background: var( --primary );
                 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
                 border: 1.8px solid #b7b0b0; 
                 margin-top: 5px;
@@ -42,11 +42,11 @@
                 height: 30px;
                 margin: 3px;
                 border-radius: var( --border-radius );
-                border: 1px solid var( --text-color );
+                border: 1px solid var( --secondary );
                 border: 1px solid transparent;
                 padding: 3px;
-                color: var( --text-color );
-                background: var( --background-color );
+                color: var( --secondary );
+                background: var( --primary );
                 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
                 border: 1px solid #b7b0b0;
                 width: 90%; 

javascript/web/src/functions/markdown_it_plugin_link.js

@@ -19,7 +19,7 @@
                     :placeholder="props.placeholder ? props.placeholder : 'Search for Something ...' "
                     title="[[Ilse]] [[Programming]] - [[Ilse]] AND [[Programming]] - [[Ilse]] NOT [[Programming]] - #ilse - #math/topology"
                     x-init="document.getElementById('search-input') ? document.getElementById('search-input').focus() : null; setTimeout( () => { search = '' }, 100 ) "
-                    style="color: var( --text-color ); background: var( --background-color ); border-radius: var( --border-radius ); width: 90%; margin-top: 10px; margin-bottom: 10px;"/>
+                    style="color: var( --secondary ); background: var( --primary ); border-radius: var( --border-radius ); width: 90%; margin-top: 10px; margin-bottom: 10px;"/>
 
                 <img :src="api.require('x.svg')" style="width: 20px; margin-right: 10px; cursor: pointer; " @click="api.get('stack').pop()" >
 
@@ -58,7 +58,7 @@
         text-align:   center;
         cursor:       pointer;
         color:        #a3a3a3;
-        color:        var( --text-color );
+        color:        var( --secondary );
         /* font-size: 1.5em; */
         width: 20px;
         cursor:       pointer;
@@ -80,7 +80,6 @@
     }
 
     #search input:focus {
-        /*box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8);*/
         outline: 3px solid transparent;
         border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
         border: 2px solid rgb(124, 138, 255);
@@ -104,8 +103,8 @@
     #search .render {
         cursor: pointer;
         margin-bottom: 5px;
-        color: var( --text-color );
-        background: var( --background-color );
+        color: var( --secondary );
+        background: var( --primary );
         text-align: left;
         padding: 3px;
     }