1+ <!doctype html>
2+ < html lang ="en-us ">
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7+ < link rel ="icon " href ="images/favicon.svg " type ="image/svg+xml ">
8+ < title > LibreBlog - A tool for independent journalism</ title >
9+ < link rel ="stylesheet " href ="css/style.css ">
10+ </ head >
11+
12+ < body >
13+ < div id ="horizontal-bar ">
14+ < div id ="horizontal-bar-contents ">
15+ < div id ="horizontal-bar-logo ">
16+ < a href ="https://libreblog.org "> < img src ="images/logo.svg " alt ="Logo " height ="24px " /> </ a >
17+ </ div >
18+ < div id ="dropdown-menu ">
19+ < img id ="dropdown-menu-icon " class ="icon " src ="images/menu.svg "/>
20+ < ul id ="dropdown-menu-list ">
21+ < li > < a href ="/index.html "> < img class ="icon " src ="images/dashboard.svg "/> Dashboard</ a > </ li >
22+ < li > < a href ="/articles.html "> < img class ="icon " src ="images/articles.svg "/> Articles</ a > </ li >
23+ < li > < a href ="/series.html "> < img class ="icon " src ="images/series.svg "/> Series</ a > </ li >
24+ < li > < a href ="/sections.html "> < img class ="icon " src ="images/sections.svg "/> Sections</ a > </ li >
25+ < li > < a href ="/relations.html "> < img class ="icon " src ="images/relations.svg "/> Relations</ a > </ li >
26+ < li > < a href ="/sources.html "> < img class ="icon " src ="images/sources.svg "/> Sources</ a > </ li >
27+ < li > < a href ="/navbar.html "> < img class ="icon " src ="images/navbar.svg "/> Navigation</ a > </ li >
28+ < li > < a href ="/media.html "> < img class ="icon " src ="images/media.svg "/> Media</ a > </ li >
29+ < li > < a href ="/authors.html "> < img class ="icon " src ="images/authors.svg "/> Authors</ a > </ li >
30+ < li > < a href ="/appearance.html "> < img class ="icon " src ="images/appearance.svg "/> Appearance</ a > </ li >
31+ < li > < a href ="/templates.html "> < img class ="icon " src ="images/templates.svg "/> Templates</ a > </ li >
32+ < li > < a href ="/settings.html "> < img class ="icon " src ="images/settings.svg "/> Settings</ a > </ li >
33+ </ ul >
34+ </ div >
35+ </ div >
36+ </ div >
37+ < div id ="vertical-navbar ">
38+ < ul >
39+ < li > < a href ="/index.html "> < img class ="icon " src ="images/dashboard.svg "/> Dashboard</ a > </ li >
40+ < li class ="active "> < a href ="/articles.html "> < img class ="icon " src ="images/articles.svg "/> Articles</ a > < div class ="triangle "> </ div > </ li >
41+ < li > < a href ="/series.html "> < img class ="icon " src ="images/series.svg "/> Series</ a > </ li >
42+ < li > < a href ="/sections.html "> < img class ="icon " src ="images/sections.svg "/> Sections</ a > </ li >
43+ < li > < a href ="/relations.html "> < img class ="icon " src ="images/relations.svg " /> Relations</ a > </ li >
44+ < li > < a href ="/sources.html "> < img class ="icon " src ="images/sources.svg "/> Sources</ a > </ li >
45+ < li > < a href ="/navbar.html "> < img class ="icon " src ="images/navbar.svg "/> Navigation</ a > </ li >
46+ < li > < a href ="/media.html "> < img class ="icon " src ="images/media.svg "/> Media</ a > </ li >
47+ < li > < a href ="/authors.html "> < img class ="icon " src ="images/authors.svg "/> Authors</ a > </ li >
48+ < li > < a href ="/appearance.html "> < img class ="icon " src ="images/appearance.svg "/> Appearance</ a > </ li >
49+ < li > < a href ="/templates.html "> < img class ="icon " src ="images/templates.svg "/> Templates</ a > </ li >
50+ < li > < a href ="/settings.html "> < img class ="icon " src ="images/settings.svg "/> Settings</ a > </ li >
51+ </ ul >
52+ < div id ="logo-bottom ">
53+ < a href ="https://libreblog.org " target ="_blank "> < img src ="images/logo.svg " alt ="Logo " width ="110px " /> </ a >
54+ </ div >
55+ </ div >
56+
57+ < div id ="content ">
58+ < div class ="row ">
59+ < div class ="column60 ">
60+ < div class ="title-div "> Edit Article</ div >
61+ < div id ="editor-toolbar ">
62+ < div id ="disposable-toolbar " class ="toolbar ">
63+ < button > < img src ="images/bold.svg "/> </ button >
64+ < button > < img src ="images/italic.svg "/> </ button >
65+ < button > < img src ="images/heading.svg "/> </ button >
66+ < button > < img src ="images/undo.svg "/> </ button >
67+ < button > < img src ="images/image.svg "/> </ button >
68+ < button > < img src ="images/reference.svg "/> </ button >
69+ < button > < img src ="images/save.svg "/> </ button >
70+ </ div >
71+ </ div >
72+ < div id ="editor-container ">
73+ < div id ="editor "> </ div >
74+ </ div >
75+ < br />
76+ < details class ="extrainfo ">
77+ < summary > Shortcuts and tips</ summary >
78+ < div class ="infocontent ">
79+ < code > < b > Ctrl-S</ b > (or Cmd-S): To save the article. < br /> < b > Ctrl-R</ b > (or Cmd-R): To add references to the text. < br /> For more shortcuts < a href ="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts " target ="_blank "> click here</ a > .< br /> For more information on the Markdown markup language, visit this < a href ='https://www.markdownguide.org/basic-syntax/ ' target ="_blank "> Markdown Guide</ a > .< br /> < br /> < i > Note 1</ i > : You can insert an image from your media library into the body of the article with an expression like this: < b > {{ img('image-id.jpg', a, {width: 725, height: 400, title: true, caption: true, style: 'float: right', version: 'small'}) }}</ b > . Remark: You can enter a < i > string</ i > in the < i > title/caption</ i > attribute if you want to use a text other than the one defined in the image record. For example: < b > {{ img('image-id.jpg', {title: 'My tooltip'}, a) }}</ b > .< br /> < br /> < i > Note 2</ i > : You can use the < i > declare</ i > function within the Twig code to change some template settings without having to change it for all the other articles. For example, < b > {{ declare('timeline-label', 'Events', a) }}</ b > changes the label of the list of events displayed on the < i > Analysis</ i > page, which now displays the text "Events" instead of "Timeline". To change the label of the "Key elements", type < b > {{ declare('key-elements-label', 'New text', a) }}</ b > . For the "Related Analyses" label, type < b > {{ declare('related-analyses-label', 'New text', a) }}</ b > .< br /> < br /> < i > Note 3</ i > : To insert a code snippet into the head of the article, use < b > {{ declare("head-snippet", "<script>...</script>", a) }}</ b > . In the body, use < b > {{ declare("body-snippet", "<script>...</script>", a) }}</ b > . You can insert these codes (from notes 2 and 3) anywhere in your text, as they will not be displayed on the page.
80+ </ code > </ div >
81+ </ details >
82+ </ div >
83+ < div class ="column40 ">
84+ < div class ="title-div ">
85+ < div id ="properties-label "> Article Details</ div >
86+ </ div >
87+ < div class ="form-div ">
88+ < form id ="article-form " autocomplete ="off ">
89+ < label for ="uri "> ID < span class ="required-field-label "> (required)</ span > </ label >
90+ < input type ="text " id ="uri " placeholder ="my-article-1 " pattern ="^[a-z0-9\-]+$ " title ="Lowercase letters, numbers and hyphens only " autocorrect ="off " autocapitalize ="off " spellcheck ="false " required >
91+ < label for ="title "> Title < span class ="required-field-label "> (required)</ span > </ label >
92+ < input type ="text " id ="title " placeholder ="Title " required >
93+ < label for ="subtitle "> Subtitle < span class ="required-field-label "> (recommended)</ span > </ label >
94+ < input type ="text " id ="subtitle " placeholder ="Subtitle ">
95+ < label id ="type-label " for ="type "> Type of article < span class ="required-field-label "> (required)</ span > </ label >
96+ < select id ="type " required >
97+ < option value ="" selected disabled > Choose one</ option >
98+ </ select >
99+ < label for ="label "> Label</ label >
100+ < input type ="text " id ="label " placeholder ="Ex.: Opinion, Review, Press release... ">
101+ < label for ="section-uri "> Section ID</ label >
102+ < a id ="create-one-section " class ="button " href ="/section-edit.html "> Create One</ a >
103+ < select id ="section-uri ">
104+ < option value =""> None</ option >
105+ </ select >
106+ < label for ="series-uri "> Series ID</ label >
107+ < a id ="create-one-series " class ="button " href ="/series-edit.html "> Create One</ a >
108+ < select id ="series-uri ">
109+ < option value =""> None</ option >
110+ </ select >
111+ < br />
112+ < br />
113+ < input type ="checkbox " id ="highlight-mainpage " value ="mainpage " checked =true >
114+ < label for ="highlight-mainpage "> Featured on the main page?</ label > < br />
115+ < input type ="checkbox " id ="highlight-section " value ="section ">
116+ < label for ="highlight-section "> Featured on the section page?</ label > < br />
117+ < input type ="checkbox " id ="in-sitemap " value ="sitemap " checked =true >
118+ < label for ="in-sitemap "> Listed in the sitemap? < span class ="info-span " data-title ="And also in
search results. " data-title-right > < img src ="images/info.svg "/> </ span > </ label > < br />
119+ < input type ="checkbox " id ="enable-comments " value ="comments ">
120+ < label id ="enable-comments-label " for ="enable-comments "> Enable comments?</ label > < br />
121+ < br />
122+ < label for ="authors "> Authors' IDs</ label >
123+ < a id ="add-one-author " class ="button " href ="/author-edit.html "> Add One</ a >
124+ < select multiple id ="authors "> </ select >
125+ < label for ="photo "> Picture< a id ="add-photo " class ="button "> Pick one</ a > </ label >
126+ < input type ="text " id ="photo " placeholder ="image-id.jpg or https://my.url/image.jpg " autocorrect ="off " autocapitalize ="off " spellcheck ="false " />
127+ < label for ="photo-info "> Picture info</ label >
128+ < input type ="text " id ="photo-info " placeholder ="Description, attribution, license... " spellcheck ="false ">
129+ < label for ="summary "> Summary</ label >
130+ < textarea type ="text " id ="summary " placeholder ="Summary (markdown format supported) " rows =2 spellcheck ="false "> </ textarea >
131+ < label for ="notes "> Notes</ label >
132+ < textarea type ="text " id ="notes " placeholder ="Disclaimer, errata... (markdown format supported) " rows =2 spellcheck ="false "> </ textarea >
133+ < label for ="editorial-notes "> Editorial Notes</ label >
134+ < textarea type ="text " id ="editorial-notes " placeholder ="They will not be displayed on the website " rows =2 > </ textarea >
135+ < label for ="published "> Published on < span class ="info-span " data-title ="If not provided, the date it
was created will be used. " data-title-right > < img src ="images/info.svg "/> </ span > </ label >
136+ < input id ="published " type ="datetime-local ">
137+ < label for ="status "> Status</ label >
138+ < select id ="status ">
139+ < option name ="published " value ="Published "> Published</ option >
140+ < option name ="unpublished " value ="Unpublished "> Unpublished</ option >
141+ </ select >
142+ <!-- Not yet implemented -->
143+ < input type ="hidden " id ="geolocation " placeholder ="Not yet implemented ">
144+ < input type ="hidden " id ="keywords " placeholder ="Not yet implemented ">
145+ < input type ="hidden " id ="language " placeholder ="Not yet implemented ">
146+ < input type ="hidden " id ="video " placeholder ="Not yet implemented ">
147+ < input type ="hidden " id ="video-info " placeholder ="Not yet implemented ">
148+ < input type ="hidden " id ="audio " placeholder ="Not yet implemented ">
149+ < input type ="hidden " id ="audio-info " placeholder ="Not yet implemented ">
150+ <!-- end -->
151+
152+ < div id ="updated-div "> </ div >
153+
154+ < input id ="save " type ="submit " value ="Save ">
155+ </ form >
156+ </ div >
157+ </ div >
158+ </ div >
159+ </ div >
160+
161+ < div id ="preview-modal " class ="modal ">
162+ < div class ="modal-content ">
163+ < span id ="close-preview-modal " class ="close "> ×</ span >
164+ < div id ="preview-container ">
165+ < div id ="gw-loader " class ="loader-container-wrapper ">
166+ < div class ="loader-container ">
167+ < span > Wait...</ span >
168+ < span class ="loader "> </ span >
169+ </ div >
170+ </ div >
171+ </ div >
172+ </ div >
173+ </ div >
174+
175+ < div id ="media-modal " class ="modal ">
176+ < div class ="modal-content ">
177+ < span id ="close-media-modal " class ="close "> ×</ span >
178+ < div id ="media-modal-title ">
179+ < span > Choose a file</ span >
180+ < input id ="filename-filter " type ="text " placeholder ="Filter by file name... "/> </ div >
181+ < div id ="media-container ">
182+ </ div >
183+ </ div >
184+ </ div >
185+
186+ < div id ="references-modal " class ="modal ">
187+ < div class ="modal-content ">
188+ < span id ="close-references-modal " class ="close "> ×</ span >
189+ < form id ="references-modal-form " autocomplete ="off ">
190+ < input id ="submit-references " type ="submit " value ="Insert " />
191+ < select id ="select-filter ">
192+ < option value ="none "> Filter by...</ option >
193+ </ select >
194+ < input id ="filter " type ="text " placeholder ="Filter... " />
195+ </ form >
196+ < div id ="mrt-wrapper1 ">
197+ < div id ="mrt-wrapper2 ">
198+ < table id ="modal-references-table " class ="data-table ">
199+ < thead >
200+ < tr >
201+ < th > < div > </ div > </ th >
202+ < th > < div > </ div > </ th >
203+ < th > < div > </ div > </ th >
204+ < th > < div > </ div > </ th >
205+ < th > < div > </ div > </ th >
206+ < th > < div > </ div > </ th >
207+ </ tr >
208+ </ thead >
209+ < tbody >
210+ < tr >
211+ < td > < div > </ div > </ td >
212+ < td > < div > </ div > </ td >
213+ < td > < div > </ div > </ td >
214+ < td > < div > </ div > </ td >
215+ < td > < div > </ div > </ td >
216+ < td > < div > </ div > </ td >
217+ </ tr >
218+ </ tbody >
219+ < tfoot >
220+ < tr >
221+ < td colspan ="3 " id ="tfoot-left-td "> Showing < span id ="data-table-from "> 0</ span > to < span id ="data-table-to "> 0</ span > of < span id ="data-table-of "> 0</ span > < span id ="entries-label-span "> entries</ span > </ td >
222+ < td colspan ="3 " id ="tfoot-right-td ">
223+ < span id ="data-pagination-span "> < span id ="go-to-first-page "> « </ span > < span id ="go-to-previous-page "> ‹ </ span > < span id ="current-page-span "> < input type ="number " id ="current-page " min ="1 " /> </ span > < span id ="go-to-next-page "> › </ span > < span id ="go-to-last-page "> » </ span > </ span >
224+ < span id ="entries-per-page-span "> Entries/page < select id ="entries-per-page "> < option value ="10 "> 10</ option > < option value ="20 "> 20</ option > < option value ="50 "> 50</ option > < option value ="100 "> 100</ option > </ select > </ span >
225+ </ td >
226+ </ tr >
227+ </ tfoot >
228+ </ table >
229+ </ div >
230+ < br /> < br />
231+ </ div >
232+ </ div >
233+ </ div >
234+
235+ < script type ="module " src ="js/script.js "> </ script >
236+ </ body >
237+ </ html >
0 commit comments