-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.json
80 lines (80 loc) · 11.9 KB
/
demo.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
[
{
"name": "demo",
"children": [
{
"name": "a quick start",
"children": [],
"notes": [
{
"tabName": "How to organize info",
"content": "<m-text1 shadow-content=\"<div class="u-body" contenteditable="true">\n <section class="u-align-center u-clearfix u-grey-5 u-section-2" id="carousel_c98a">\n <div class="u-clearfix u-sheet u-sheet-1">\n <div class="u-clearfix u-gutter-100 u-layout-wrap u-layout-wrap-1">\n <div class="u-layout">\n <div class="u-layout-row">\n <div class="u-container-style u-layout-cell u-size-30 u-layout-cell-1">\n <div class="u-container-layout u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-1">\n <h2 class="u-custom-font u-font-playfair-display u-text u-text-1">Tippy's way</h2>\n </div>\n </div>\n <div class="u-container-style u-layout-cell u-size-30 u-layout-cell-2">\n <div class="u-container-layout u-container-layout-2">\n <h5 class="u-custom-font u-font-playfair-display u-text u-text-2">focus on simplicity and flexibility</h5>\n <p class="u-text u-text-3">the way how to organize info within tippy is centered around outliner with node and note, which essentially provides unlimited combination how user likes to organize info. in addition, tippy supports customized format via rich text editing (popup panel) and templating (tag menu). this is actually an example of using one of the templates.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n<a id="clone-link" style="cursor: pointer; color: blue; text-decoration: none; font-size: 1.2em; text-align: left;">+</a>\n</div>\"></m-text1>"
},
{
"tabName": "How to quick get started",
"content": "<m-detail shadow-content=\"<div window="">\n <div contenteditable="true" class="main">\n <h1>Quickly start tippy</h1>\n <details>\n <summary>Download tippy as a web app</summary>\n <div class="detail-body">\n <p>\n Tippy can be used directly in browser but could be more convenient to install local as web app.&nbsp;</p>\n </div>\n </details>\n <details>\n <summary>Download Sample.json</summary>\n <div class="detail-body">\n <p>Download Sample.json from tippy home at GitHub. Open it in tippy web app, navigate to Setting -&gt; autorun, then go to saveConfig note, and click run button. It saves entire Sample.json in localStorage, which contains some template examples, user configuration, and scripts to initialize template gallery. Once it is saved, it will be picked up by next web app start. So please close tippy web app and restart it. You should find additional menu items under main menu on the left side, as well as under Note/Tag menu. This will stay at tippy web app level.</p>\n </div>\n </details>\n <details>\n <summary>Download demo.json</summary>\n <div class="detail-body">\n <p>\n download demo.json (this document) from tippy site at GitHub.</p>\n </div>\n </details>\n <details>\n <summary>Open demo.json in tippy web app and follow through</summary>\n <div class="detail-body">\n <p>\n demo.json is created within tippy web app as an example illustrating various features of tippy. it is a great way to try and play around.</p>\n </div>\n </details>\n <a id="clone-link" style="cursor: pointer; color: blue; text-decoration: none; font-size: 1.2em; text-align: left;">+</a>\n </div>\n</div>\"></m-detail>"
}
],
"expanded": true
},
{
"name": "user",
"children": [
{
"name": "basic",
"children": [],
"notes": [
{
"tabName": "Rich text editing",
"content": "<div>Every note is a rich text editor itself, which when saved contains all the text and style.</div><div>To enable rich text, simply highlight the text to be edited and a panel will popup (see picture below).</div><div><br></div><div><span style=\"font-weight: bold;\">Headings:</span><br><ul><h1><ul><li>H1 headers</li></ul></h1><h2><ul><li>H2 headers</li></ul></h2></ul><span style=\"font-weight: bold;\">Text Formatting:</span><br><ol><ul><li><span style=\"font-weight: bold;\">Bold</span></li><li><span style=\"font-style: italic;\">Italic</span></li><li><span style=\"text-decoration-line: line-through;\">Strikethrough</span></li><li><span style=\"text-decoration-line: underline;\">Underscore</span></li><li><span style=\"background-color: rgb(218, 247, 166);\">Highlight</span></li></ul><blockquote><ul><li>Quote</li></ul></blockquote></ol><span style=\"font-weight: bold;\">Code Block:</span><br><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><pre>(println \"hello world\")</pre></blockquote><span style=\"font-weight: bold;\">Link and Image:</span></div><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><ul><li><a href=\"https://www.google.com\">www.google.com</a> </li></ul><div><ul><li><img src=\"https://raw.githubusercontent.com/kangaroolab/tippy/refs/heads/main/images/pell.png\"></li></ul></div></blockquote><div><span style=\"font-weight: bold;\">Accordion:</span></div><details class=\"accordion\"><summary>summary goes here</summary><p>detail goes here</p></details><div>else continue...</div><div><br></div><div><span style=\"font-weight: bold;\">Bookmark:</span></div><div><details class=\"bookmark\"><summary>bookmark goes here</summary><p>description goes here</p></details><p>else continue... </p><p><br></p><span style=\"font-weight: bold;\">List:</span><br><ul><ul><li>Ordered list:</li></ul><ol><ol><li>first item</li><li>second item</li><li>third item</li></ol></ol><ul><li>Unordered list:</li><ul><li>item one</li><li>item two</li><li>item three</li></ul></ul></ul></div><div>you can try others to play around and get familiar, for example horizontal line, indent left/right, paragraph, remove format etc. last Cljs is to edit/run clojurescript in tippy, which we will cover in detail in advanced section.</div>"
},
{
"tabName": "Copy/paste text",
"content": "<div>to copy text only, please use ctrl-shift-v</div><div><br></div><div>to copy text including style (e.g. if you like to copy/paste a web page), please use ctrl-v</div>"
},
{
"tabName": "Copy/paste note",
"content": "<div>under Note menu:</div><div>- \"Add Note\": this will add a new note for the currently selected node. note (or tab) name can be edited by double clicking it</div><div>- \"Copy Note\": this works at session level and will copy current note</div><div>- \"Paste Note\": to use this, please add a new note, click within it (so it has the focus), then click \"Paste Note\", which will paste the last saved note (via last \"Copy Note\")</div><div><br></div><div>you can use copy note/paste note to move note to different nodes</div>"
},
{
"tabName": "Export/import node",
"content": "<div>under main menu on the left:</div><div>- \"Export Node\": will save current selected node in localstorage, which remains between tippy web app start/close</div><div>- \"Import Node\": will append saved node to current selected node</div><div><br></div><div>this essentially can be used to move Node around within the same file, or to other file</div>"
}
],
"expanded": true
},
{
"name": "advanced",
"children": [],
"notes": [
{
"tabName": "How to use template",
"content": "<div>template is custom HTML tag that can be used as specific format that user can edit content. I include some of the examples that I find on Internet, which user can also create their own (will cover in developer section).</div><div><br></div><div>to add a template, please click in the node where you like to add, then go to Tag menu and use \"Template Gallery\" to select template. you need to click \"X\" to close the gallery.</div><div><br></div><div>all the editing within the template will be saved. for template where there is \"+\" sign, it can be used to add another one underneath. </div><div><br></div><div>to save editing within template, please click mouse outside it so the content will be saved when it loses focus.</div><div><br></div><div>below is an example:</div><div><m-paper shadow-content=\"<div contenteditable="true" window="">\n <div class="w3-light-grey w3-padding-32 w3-center">\n <h1 class="w3-jumbo">Tippy</h1>\n </div>\n <div class="w3-row w3-container w3-margin-top">\n <div class="w3-third w3-justify w3-container">\n <h2>Organize</h2>\n <p>Utilize outliner of node and note with extensive flexibility ...</p>\n </div>\n <div class="w3-third w3-justify w3-container">\n <h2>Rich Editing</h2>\n <p>With rich text and template that user can define and extend ...</p>\n </div>\n <div class="w3-third w3-justify w3-container">\n <h2>Customizable</h2>\n <p>Support of clojurescript that can be used to customize tippy ...</p>\n </div>\n </div>\n </div>\"></m-paper></div>"
},
{
"tabName": "How to edit/run clojurescript",
"content": "<div>\"Cljs\" at the last one in editing panel (please see screenshot under user basic), is meant to edit/run clojurescript. </div><div><br></div><div>To add a \"Cljs\" panel, please type any text in a note, highlight it which will popup editing panel and then select cljis, that will add a clojurescript mini-editor underneath it.</div><div><br></div><div>Clojurescript min-editor uses Scittle behind the scene to run Clojure code. the mini-editor has basic code editing functionalities including highlight keywords. Please always use ctrl+shift+v to paste code.</div><div><br></div><div>below is a cljs hello world example:</div><div contenteditable=\"false\"><div id=\"hiddenCode\" code=\"(with-out-str\n (println "hello world"))\n\" style=\"display: none;\"></div><mini-editor></mini-editor></div><br>"
}
],
"expanded": true
}
],
"notes": [],
"expanded": true
},
{
"name": "developer",
"children": [],
"notes": [],
"expanded": true
}
],
"notes": [
{
"tabName": "to use demo.json",
"content": "<ol><li>Download Sample.json and demo.json from tippy home at GitHub. </li><li>Open Sample.json in tippy web app, navigate to Setting -> autorun, then go to saveConfig note, and click run button. It saves entire Sample.json in localStorage, which contains some template examples, user configuration, and scripts to initialize template gallery. </li><li>Once it is saved, it will be picked up by next web app start. So please close tippy web app, restart it and open demo.json. </li><li>You should find additional menu items under main menu on the left side, as well as under Note/Tag menu. This will stay at tippy web app level.</li><li>You should see other content in demo.json</li></ol>"
}
],
"expanded": true
}
]