-
Notifications
You must be signed in to change notification settings - Fork 29
/
pages.json
executable file
·177 lines (177 loc) · 64.4 KB
/
pages.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
{
"home": {
"title": "National Gallery - <b>Simple Site</b> Example",
"content": "<p>In addition to hosting software and files, as part of development projects, [GitHub|https://github.com] also provides the resources to host dedicated websites, to present and demonstrate ones work. This project has been developed to provide a, <b>relatively<\/b>, simple system for creating a standard set of these webpages, based on a small set of text files, formatted as [JSON|https://www.json.org] files. It was built to work along side a number of other GitHub projects, to provide a method of creating a set of consistent webpages, delivered using [GitHub Pages|https://pages.github.com].</p>\r\n\t<a href=\"https://github.com/jpadfield/simple-site\">\r\n\t\t<img style=\"position:relative;width:400px;\" class=\"rounded mx-auto d-block\" alt=\"Simple Site Graphic\" src=\"graphics/simple%20site%2001.png\">\r\n\t<\/a>\r\n<br/>\r\n<p>The content of the presented webpages are controlled with two main JSON files, augmented by optional additional files, stored in a local <b>build</b> folder.</p>\r\n<ul>\r\n\t<li>Various site wide details are defined within the [site.json|site.json.html] file.</li>\r\n\t<li>The content for the individual web-pages are defined within the [pages.json|pages.json.html] file. With the main pages being listed as tabs, and any sub-pages, or even sub-sub-pages etc, listed within drop-down menus from the related main page tab.</li>\r\n</ul>\r\n<p>The content added to these JSON files is automatically processed every time the files are edited and a new set of webpages will be created.<\/p>\r\n\r\n<div class=\"alert alert-info\" role=\"alert\">\r\n\t<h4 class=\"alert-heading\">Getting Started</h4>\r\n\t<p>[Join GitHub|https://github.com/join] ↠ [Copy/Fork|https://help.github.com/en/github/getting-started-with-github/fork-a-repo] the repository ↠ setup your [GitHub Action|https://help.github.com/en/actions] ↠ Edit the JSON files ↠ and Enjoy!<\/p>\r\n\t<p>For more information see the [Instructions|instructions.html] page, the [JSON|JSON.html] pages and browse the various examples provided.</p>\r\n</div>\r\n\r\n<div class=\"alert alert-info\" role=\"alert\">\r\n\t<h4 class=\"alert-heading\">New to GitHub</h4>\r\n\t<p>For those new to GitHub there is a lot of general documentation out there, such as [Github Guides|https://guides.github.com/] and [Getting Started with GitHub|https://help.github.com/en/github/getting-started-with-github], but one particular place to start might be the series of videos, [GitHub for Poets|https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV].</p>\r\n</div>",
"content right": "",
"displaycode": true
},
"howto": {
"displayName": "How To",
"title": "Simple Site - HowTo",
"content": "<h4>To set-up this system it is recommended that you<\/h4>\r\n<ul>\r\n\t<li>[Join GitHub|https:\/\/github.com\/join]<\/li>\r\n\t<li>[Copy\/Fork|https:\/\/help.github.com\/en\/github\/getting-started-with-github\/fork-a-repo] the repository.<\/li>\r\n\t<li>Re-enable [GitHub Actions|https:\/\/help.github.com\/en\/actions], which are disabled during the Fork process:\r\n\t\t<ul>\r\n\t\t\t<li>Click on the <b>Actions<\/b> option at the top of your repository page.<\/li>\r\n\t\t\t<li>A warning message will appear indicating that workflows have been disabled during the fork process.<\/li>\r\n\t\t\t<li>Click on the green \u201CI understand...\u201D button to re-enable the GitHub Actions<\/li>\r\n\t\t<\/ul><\/li>\r\n\t<li>Enable GitHub Pages:<ul>\r\n\t\t<li>Click on the <b>Settings<\/b> tab, which should be towards the upper right corner of the page.<\/li>\r\n\t\t<li>Select <b>Pages<\/b> in the new menu down the left.<\/li>\r\n\t\t<li>Select <b>master or main<\/b> in the <b>Source<\/b> <b>Select branch<\/b> dropdown.<\/li>\r\n\t\t<li>Select <b>\/docs<\/b> in the new <b>Select folder<\/b> dropdown.\r\n\t\t<li>Click on the \u201CSave\u201D button to continue.<\/li>\r\n\t\t<li>There will be a slight pause and the screen should be updated to indicate the URL for your website.<\/li>\r\n\t\t<\/ul><\/li>\r\n\t<li>Edit and then save the [pages|pages.json.html] and [site|site.json.html] JSON files found in the <b>build</b> folder of your GitHub Repository and your new project will be automatically updated.<\/li>\t\r\n<\/ul>\r\n\r\n<h4>To make changes to your web-site<\/h4>\r\n<ul>\r\n\t<li>Edit and then save the [pages|pages.json.html] and [site|site.json.html] JSON files found in the <b>build</b> folder of your GitHub Repository and your new project will be automatically updated.<\/li>\t\r\n<\/ul>\r\n\r\n<div class=\"alert alert-info\" role=\"alert\">\r\n\t<h4>You may have to wait a minute or two after an update<\/h4>\r\n\t<p>Although the process of updating your webpages, after each edit of your pages and site JSON files, can take a few minutes to take effect. This is a result of the internal processes of GitHub, but it should not take too long.<\/p>\r\n<\/div><p>Any issues or comments can be added to the Issues section of this GitHub project: [here|https:\/\/github.com\/jpadfield\/simple-site\/issues].<\/p>",
"content right": "<h4>An example Home page<\/h4><figure class=\"figure\"><img style=\"position:relative;width:100%;\" src=\"graphics/example-template-home.png\"><figcaption style=\"padding-left:16px;padding-right:16px;\" class=\"figure-caption\">An example screenshot of the Simple Site home page created from the <b>pages-template.json</b> file included in the <b>build</b> folder.</figcaption></figure>",
"displaycode": true
},
"documentation": {
"title": "Simple Site - Technical Details and Documentation",
"aliases": "instructions",
"content": "<div class=\"alert alert-warning\" role=\"alert\"><p>The pages included below this one contain further technical details of how the Simple Site system works. The two key files [pages.json|pages.json.html] and [site.json|site.json.html], used to control and define the new webpages, are described in detail, along with the various [extensions|extensions.html] to Simple Site, that have been created to add more complex functionality, like adding IIIF viewers.</p><p>The other set of template pages have been included to provide some more simple examples of how \"pages\" can be defined. A copy of these page have also been included as the <b>pages-template.json</b> file found in the <b>build</b> folder in your Github Repository.</p></div>",
"content right": "",
"displaycode": true
},
"json": {
"displayName": "JSON Files",
"aliases": "JSON",
"parent": "documentation",
"title": "Simple Site - JSON Files",
"content": "<h3>What is JSON?<\/h3>\r\n<p>JSON stands for <b>J<\/b>ava<b>S<\/b>cript <b>O<\/b>bject <b>N<\/b>otation and is a lightweight format for storing and transporting data. It should be relatively \"self-describing\" and easy to understand[@@https:\/\/www.w3schools.com\/whatis\/whatis_json.asp].<\/p>\r\n\r\n<p>JSON files are organised in comma separated name\/value pairs held within curly brackets, with additional non-named lists held within square brackets. It is also important to ensure that none of the names or values include any newline characters or special JSON characters. There are a large number of websites describing all of the details and rules of the JSON format, but unless you would really like to learn there is a simple solution. If in doubt just copy and paste you name or value text into an online JSON formatting tool and let it do the work[@@https:\/\/en.wikipedia.org\/wiki\/Escape_character] for you, then copy the processed text into your file and move on.<\/p>\r\n\r\n<p>There are many of these tools online, such as:\/p>\r\n<ul>\r\n<li>[www.freeformatter.com|https:\/\/www.freeformatter.com\/json-escape.html]<\/li>\r\n<li>[codebeautify.org|https:\/\/codebeautify.org\/json-escape-unescape]<\/li>\r\n<li>Or simply explore [Google|https:\/\/www.google.com\/search?q=escape+json].<\/li>\r\n<\/ul>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>DataSetName<\/b>\": {\r\n \"<b>Name<\/b>\": \"Value\",\r\n \"<b>Another Name<\/b>\": \"Another Value\",\r\n \"<b>List Name(for example shapes)<\/b>\": [\r\n {\"shape\": \"square\", \"colour\": \"blue\"},\r\n {\"shape\": \"circle\", \"colour\": \"red\"},\r\n {\"shape\": \"triangle\", \"colour\": \"yellow\"}\r\n ]\r\n }\r\n}\r\n<\/code><\/pre><figcaption class=\"figure-caption\">Simplified example of a JSON data object.<\/figcaption>\r\n<\/figure>\r\n\r\n<p>In addition to ensuring that individual name of value texts are correctly processed it is also common, when editing an existing JSON file to make small errors, forgetting a comma, or a double quotes, etc. If your files start to get longer it is often useful just to check that your file is still a valid JSON file before submitting it. As with the escape process above there are a number of free online tools to do this, such as:<\/p>\r\n<ul>\r\n\t<li>[jsonlint.com|https:\/\/jsonlint.com\/]<\/li>\r\n\t<li>[www.freeformatter.com|https:\/\/www.freeformatter.com\/json-validator.html]<\/li>\r\n\t<li>Or simply explore [Google|https:\/\/www.google.com\/search?q=validate+json].<\/li>\r\n<\/ul>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Take Care<\/h4><p>Ensure your text values have been correctly [escaped|https:\/\/www.freeformatter.com\/json-escape.html] ↠ and check your JSON files are [valid|https:\/\/jsonlint.com\/] before submitting them!<\/p><\/div>",
"content right": "",
"displaycode": true
},
"extensions": {
"parent": "documentation",
"title": "Simple Site - <b>Extensions</b>",
"content": "<h3>Adding further functionality<\/h3>\r\n<p>This project will take a small set of JSON files, process them and produce a formatted set of html webpages. So the next question is, what other processing functions can be added to the system to allow ones GitHub project to host additional tools or even turn a project into a simple virtual research environment.<\/p>\r\n\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">New Opportunities<\/h4><p>What jobs could require consistent processing of simple files of text, or numbers, and then present formatted results in image viewers, graphs, maps, flow charts, etc?<\/p><p>There are lots of great pieces of software out there, so this project is intended to make use of open source libraries rather than creating new ones.<\/p><p>The main question here is, <b>how can researchers, who do not have their own web server, or sufficient coding skills gain access to their own data processing and presentation system?<\/b><\/p><\/div>\r\n\r\n<h3>How it works<\/h3>\r\n<p>As has already been explained, the [page|pages.json.html] JSON file includes two variables that can be used to indicate the inclusion of a page extension.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>... \r\n \"<b>class<\/b>\": [\"Indicates which project extension to use\"],\r\n \"<b>file<\/b>\": [\"Indicates the file in which any required extra data can be found\"],\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">Extension variables included in the [pages.json|pages.json.html] page object.<\/figcaption>\r\n<\/figure>\r\n<p>Simply, the <b>class<\/b> variable indicates what type of extension should be included and the <b>file<\/b> variable indicates the name of the file that includes any required extra data. For example, two classes currently available are:<\/p>\r\n<ul>\r\n<li>The [timeline|timeline.html] class, which can be used to include a formatted [Gantt Chart|https:\/\/en.wikipedia.org\/wiki\/Gantt_chart], using the [Mermaid|https:\/\/mermaid-js.github.io\/mermaid\/#\/] library, to display a simple project timeline.<\/li>\r\n<li>The [mirador|IIIF%20viewer.html] class, which can be used to include an [IIIF|https:\/\/iiif.io\/] images viewer called [Mirador|https:\/\/projectmirador.org\/], to organise and present high resolution images, which are already hosted elsewhere on the web.<\/li>\r\n<\/ul>\r\n<h4>Positioning the extension content<\/h4>\r\n<p>By default all extension content will be automatically added below the details given in the <b>content<\/b> or <b>content right<\/b> fields. If one would like the content to appear before of even embedded within the details provided by <b>content<\/b> or <b>content right<\/b> then it can be positioned by simply adding <b>[##]<\/b> at the appropriate position. The system will automatically replace <b>[##]<\/b> with the chosen extension content.<\/p>\r\n\r\n<h3>Examples Gallery<\/h3>\r\n\r\n\r\n <div class=\"row text-center text-lg-left\">\r\n <div class=\"col-lg-3 col-md-4 col-6\">\r\n <a href=\"timeline.html\" class=\"d-block mb-4 h-100\">\r\n <img class=\"img-fluid img-thumbnail\" src=\"graphics\/timeline_thumb.png\" alt=\"\">\r\n <\/a>\r\n <\/div>\r\n <div class=\"col-lg-3 col-md-4 col-6\">\r\n <a href=\"mirador-viewer.html\" class=\"d-block mb-4 h-100\">\r\n <img class=\"img-fluid img-thumbnail\" src=\"graphics\/mirador_thumb.png\" alt=\"\">\r\n <\/a>\r\n <\/div> \r\n <div class=\"col-lg-3 col-md-4 col-6\">\r\n <a href=\"panel-truck-viewer.html\" class=\"d-block mb-4 h-100\">\r\n <img class=\"img-fluid img-thumbnail\" src=\"graphics\/panel-truck_thumb.png\" alt=\"\">\r\n <\/a>\r\n <\/div> \r\n \r\n <div class=\"col-lg-3 col-md-4 col-6\">\r\n <a href=\"curtain-viewer.html\" class=\"d-block mb-4 h-100\">\r\n <img class=\"img-fluid img-thumbnail\" src=\"graphics\/curtain-viewer_thumb.png\" alt=\"\">\r\n <\/a>\r\n <\/div> \r\n <div class=\"col-lg-3 col-md-4 col-6\">\r\n <a href=\"openseadragon-viewer.html\" class=\"d-block mb-4 h-100\">\r\n <img class=\"img-fluid img-thumbnail\" src=\"graphics\/openseadragon_thumb.png\" alt=\"\">\r\n <\/a>\r\n <\/div> \r\n <div class=\"col-lg-3 col-md-4 col-6\">\r\n <a href=\"lists.html\" class=\"d-block mb-4 h-100\">\r\n <img class=\"img-fluid img-thumbnail\" src=\"graphics\/lists_thumb.png\" alt=\"\">\r\n <\/a>\r\n <\/div> \r\n <\/div>",
"content right": "",
"displaycode": true
},
"template": {
"displayName": "Template",
"aliases": "examples",
"parent": "documentation",
"title": "Simple Site - Template",
"content": "<div class=\"alert alert-warning\" role=\"alert\"><p>The pages included below this one have been created to provide more simplified examples of how new pages can be out together.</p><p>A copy of these page have also been included as the <b>pages-template.json</b> file found in the <b>build</b> folder in your Github Repository</p><p>If you just want to start working from this simpler example just re-name your existing <b>pages.json</b> file to something like <b>pages-old.json</b> and re-name the <b>pages-template.json</b> file as <b>pages.json</b>. This will force GitHub to rebuild your website based on the simpler example.</div>",
"displaycode": true
},
"about": {
"title": "Simple Site - <b>About</b>",
"content": "<div class=\"alert alert-info\" role=\"alert\"><h4>Simple Site Collaborations<\/h4><p>The Simple Site project has developed out of work from a number of different projects, all of which involved some aspect of developing project websites, or documented methods of disseminating formatted data. This work will continue across the listed projects but further collaborations are anticipated.<\/p><\/div>\r\n\r\n<h3>Acknowledgement<\/h3>\r\n\r\n<p>This project has been directly supported by the following projects:<\/p>\r\n\r\n<h4>The SSHOC Project<\/h4>\r\n<figure class=\"figure\">\t\r\n <img style=\"height:64px;\" src=\"graphics\/sshoc-logo.png\" class=\"figure-img img-fluid rounded\" alt=\"The SSHOC Project\">\r\n <img style=\"height:32px;\" src=\"graphics\/sshoc-eu-tag2.png\" class=\"figure-img img-fluid rounded\" alt=\"The SSHOC Project\">\r\n <figcaption class=\"figure-caption\">Social Sciences & Humanities Open Cloud (SSHOC)is a project funded by the EU framework programme Horizon 2020 and unites [20 partner organisations and their 27 associates|https:\/\/www.sshopencloud.eu\/partners] in developing the social sciences and humanities area of the [European Open Science Cloud (EOSC)|http:\/\/www.eosc-portal.eu\/] - [SSHOC|https:\/\/www.sshopencloud.eu\/]<\/figcaption>\r\n<\/figure>\r\n\r\n<h4>The ARTICT Project<\/h4>\r\n<figure class=\"figure\">\r\n <img style=\"height:64px;\" src=\"graphics\/UKRI_EPSR_Council-Logo_Horiz-RGB.png\" class=\"figure-img img-fluid rounded\" alt=\"The ARTICT Project\">\r\n <figcaption class=\"figure-caption\">EPSRC funded - ARTICT | Art Through the ICT Lens: Big Data Processing Tools to Support the Technical Study, Preservation and Conservation of Old Master Paintings - [ARTICT|https:\/\/research.ng-london.org.uk\/external\/ARTICT]<\/figcaption>\r\n<\/figure>\r\n\r\n<h4>The IIIF - TANC Project<\/h4>\r\n<figure class=\"figure\">\r\n <img style=\"height:64px;\" src=\"graphics\/TANC%20-%20IIIF.png\" class=\"figure-img img-fluid rounded\" alt=\"IIIF - TANC\">\r\n <figcaption class=\"figure-caption\">AHRC funded - IIIF-TNC | Practical applications of IIIF as a building block towards a digital National Collection - [IIIF - TNC|https:\/\/tanc-ahrc.github.io\/IIIF-TNC]<\/figcaption>\r\n<\/figure>\r\n\r\n<h4>The HeritagePIDs Project<\/h4>\r\n<figure class=\"figure\">\r\n <img style=\"height:64px;\" src=\"graphics\/TANC%20-%20PIDS.png\" class=\"figure-img img-fluid rounded\" alt=\"PIDS - TANC\">\r\n <figcaption class=\"figure-caption\">AHRC funded - HeritagePIDs | Persistent Identifiers as IRO Infrastructure - [HeritagePIDs|https:\/\/tanc-ahrc.github.io\/HeritagePIDs]<\/figcaption>\r\n<\/figure>",
"content right": "" ,
"displaycode": true
},
"site.json": {
"parent": "json",
"title": "Simple Site - The <b>site.json</b> file",
"content": "<p>The <b>site.json<\/b> file is used to control a few of the more structural aspects of the web pages and relates to all of the pages that will be produced. It's content falls into three main parts: the meta, logos & links, and extras sections. The easiest method of creating your own <b>site.json<\/b> file is to copy the existing one that is provided with the project code and just edit it as needed. The sections shown below are cropped from a full file and contain descriptions rather than real values, for an example of real code please see this example [site.json|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/site.json] file.<\/p>\r\n\r\n<h4>The Meta values<\/h4>\r\n<p>'Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page'[@@For more details see: https:\/\/en.wikipedia.org\/wiki\/Meta_element]. They are used to defined a selection of hidden information which can be used by search engines and web browsers. At this time this project only makes use of 5 of these meta elements, further values could be added if required but this would require making adjustments to the project code rather than just the JSON file.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"metaDescription\": \"Short project description, this can be used and presented by search engines\",\r\n \"metaKeywords\": \"Used to help tag what your project is related to, this will assist search engines to find your project\",\r\n \"metaAuthor\": \"Author Name|Author Email Address|Further Institutional Information as required\",\r\n \"metaTitle\": \"Simple short title For Your website or project, which can be display in browser tabs\",\r\n \"metaFavIcon\": \"URL for your chosen favicon.ico file (https:\/\/en.wikipedia.org\/wiki\/Favicon)\",\r\n...\r\n<\/code><\/pre>\r\n<\/figure>\r\n\r\n<h4>Logos & Links<\/h4>\r\n<p>As can be seen from the figure below the values in this section are reasonably straight forward and directly relate to the images and links that will appear on every page. These values are all optional and can be left blank, particularly the <b>extra_logos<\/b> details, but it is recommend that you do add an appropriate main logo and the required licence details.<\/p>\r\n\r\n<figure>\t\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>...\r\n \"logo_link\": \"The URL you would like the top left logo to point to a default would be \\\".\/\\\" which would point to the home page of your project.\",\r\n \"licence\": \"Clickable links\/icons of indicating the relevant licence or re-use restrictions of your project\",\r\n \"logo_path\": \"The full path or URL to the image you would like to appear in the top left corner\",\r\n \"footer\": \"Optional copy right statement or link you would like to appear on the bottom left of the page \",\r\n \"extra_logos\": {\r\n \"1st Logo\": {\r\n \"link\": \"The clickable link for this specific logo\",\r\n \"logo\": \"The full path or URL for the required logo image file.\",\r\n \"alt\": \"Optional first extra logo related to the project\"\r\n },\r\n \"2nd Logo\": {\r\n \"link\": \"The clickable link for this specific logo\",\r\n \"logo\": \"The full path or URL for the required logo image file.\",\r\n \"alt\": \"Optional second extra logo related to the project\"\r\n }\r\n },\r\n...\r\n<\/code><\/pre>\r\n<\/figure>\r\n\r\n<div class=\"rounded mx-auto d-block\"><figure class=\"figure\"><img src=\"graphics\/site-json.png\" class=\"figure-img img-fluid rounded\" alt=\"site.json image\"><figcaption class=\"figure-caption\">Annotated image highlighting which sections of the page are connected to each of the Logos & Links values.<\/figcaption><\/figure><\/div>\r\n\r\n<h4>Extra JS & CSS Code<\/h4>\r\n<p>For most simple projects the last section of values can be simply left blank as they are only required if more advanced users would like to add additional functionality or styling.<\/p>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>...\r\n \"extra_js_scripts\": [\"A comma separated list of any additional javascript files that need to be included\"],\r\n \"extra_css_scripts\": [\"A comma separated list of any additional css style sheets that need to be included\"],\r\n \"extra_css\": \"Any additional css code that you need to be directly added to all of the pages\",\r\n \"extra_js\": \"Any additional javascript code that you need to be directly added to all of the pages\",\r\n...\r\n<\/code><\/pre><\/figure>\r\n\r\n<h4>Google Analytics<\/h4>\r\n<p>The inbuilt GitHub analytics system will track how people interact with your project files and code but it does not track visitors to your actual webpages. So if analytics are required for your webpages as well an option has been added to use <a href=\"https:\/\/analytics.google.com\/\">Google Analytics<\/a> simply by adding your site Google Analytics ID to your site.json file. Instructions for setting up Google Analytics and getting an Analytics ID can be found <a href=\"https:\/\/support.google.com\/analytics\/answer\/10269537?ref_topic=1009620#zippy=%2Cadd-the-global-site-tag-directly-to-your-web-pages\">here<\/a>.<\/p>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>...\r\n \"GoogleAnalyticsID\": \"G-XXXXXXXXXX\"\r\n}\r\n<\/code><\/pre><\/figure>",
"content right": "",
"displaycode": true
},
"pages.json": {
"parent": "json",
"title": "Simple Site - The <b>pages.json</b> file",
"content": "<p><b>As noted on the main [JSON|JSON.html] page you will need to ensure that your pages.json file is valid JSON, please ensure all double quotes <i>in your added text<\/i> have a <i>/<\/i> in front, like this <i>/"<\/i>, also please ensure that you text is all on one line, with no <i>newlines<\/i>.<\/b><\/p>\r\n\r\n<p>The <b>pages.json<\/b> file is used to define the actual content for your web pages. The file is made up of one or more page objects, an example of which is shown below. The meaning of these fields are relatively straightforward, as described below, though some additional notes are provided below, for an example of real code please see this example [pages.json|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/pages.json] file.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n\"<b>pageName<\/b>\": {\r\n \"<b>title<\/b>\": \"Simple text title\",\r\n \"<b>content<\/b>\": \"Main page content, this can be added as simple text of can include more complex html as required.\",\r\n \"<b>content right<\/b>\": \"Optional second column of text if required.\",\r\n \"<b>parent<\/b>\": \"Optional variable only used to indicate a relationship between a sub-page and a parent page - the pageName of the page, or sub-page above this one\",\r\n \"<b>class<\/b>\": \"Optional variable only used for extension pages, normally leave blank or omit completely\",\r\n \"<b>file<\/b>\": \"Optional variable only used for extension pages, normally leave blank or omit completely\",\r\n \"<b>aliases<\/b>\": \"Optional comma separated list of other names for this page. This can be used to ensure consistency of old links. If the page names need to be changed the old names can be listed here and special stub pages will be created to redirect old URLs to the new page names.\",\r\n \"<b>displayName<\/b>\": \"Optional- Can be used to substitute a more display friendly name for a given page in all links and dropdowns, for example one could use 'Some great examples' as the displayName for a page simply called 'examples'.\",\r\n \"<b>displaycode<\/b>\": \"Optional - true or false (default) value - this option is used for documentation purposes to include the JSON code used to create a page at the bottom of the page.\" \r\n },\r\n\"<b>AnotherPageName<\/b>\": {\r\n \"<b>title<\/b>\": \"Another simple text title\",\r\n \"<b>content<\/b>\": \"Unique page content, this will be different for each page.\",\r\n \"<b>content right<\/b>\": \"\"\r\n }\r\n}\r\n<\/code><\/pre><figcaption class=\"figure-caption\">Simplified example of two page objects, with the variable names highlighted in bold.<\/figcaption>\r\n<\/figure>\r\n<p>Each of the values within an object can include simple text information or more complex html, however you must ensure that you follow guidelines included of the main [JSON|JSON.html] page. The parent field allows you to nest pages under other pages, starting with one of the main pages, but you can then nest sub-sub-pages under sub-pages and so on if really required.<\/p>\r\n\r\n<p>The <b>parent<\/b> field allows you to nest pages under other pages, starting with one of the main pages, but you can then nest sub-sub-pages under sub-pages and so on if really required. The <b>class<\/b> and <b>file<\/b> fields are only used for extensions to the simple-site system and more information can be found [here|extensions.html].<\/p>\r\n\r\n<p>In addition to standard html coding some additional options have been added to make life easier. These do not need to be used if not needed.<\/p>\r\n<ul>\r\n\t<li><b>Adding footnotes<\/b>: Locate footnotes references in your text using <b>[@@Followed by the text of the actual footnote]<\/b>, see the example below. These will all be automatically processed so that all of the footnotes added to the <b>content<\/b> or <b>content right<\/b> are numbered correctly and clickable.<\/li>\r\n\t<li>Adding links: Links can be added to any word or phrase simply by enclosing them in square brackets, separated with a pipe character: <b>[Display text|https:\/\/full.url.com]<\/b><\/li>\r\n<\/ul>\r\n\r\n<h3>Breadcrumb navigation for sub-pages<\/h3>\r\n\r\n<p>Sub-pages are not given there own tabs, as the main pages are, they are nested in dropdown menus below their parent main page. To make it easier to navigate back up a series of nested sub pages an additional [breadcrumb navigation bar|https:\/\/en.wikipedia.org\/wiki\/Breadcrumb_navigation] is automatically added to all sub-pages, as shown below.<\/p>\r\n\r\n<figure class=\"figure\"><img src=\"graphics\/breadcrumb-example.png\" class=\"figure-img img-fluid rounded\" alt=\"An example of the extra breadcrumb navigation used within sub-pages.\"><figcaption class=\"figure-caption\">An example of the extra breadcrumb navigation used within sub-pages.<\/figcaption><\/figure>\r\n\r\n<h3>Included pages navigation for sub-pages<\/h3>\r\n\r\n<p>Also to help navigation to nested sub pages an additional list of links in a <b>Include Pages<\/b> is automatically added for all sub-pages, as shown below.<\/p>\r\n\r\n<figure class=\"figure\"><img src=\"graphics\/children-example.png\" class=\"figure-img img-fluid rounded\" alt=\"An example of the extra navigation links provided to access any related sub-pages.\"><figcaption class=\"figure-caption\">An example of the extra navigation links provided to access any related sub-pages.<\/figcaption><\/figure>\r\n\r\n<h3>Example page objects<\/h3>\r\n<p>This page object was used to define the content of the [Example|example.html], one of the actual pages within this demonstration site.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n\"example\": {\r\n \"title\": \"Simple Site Example\",\r\n \"content\": \"<h3>An additional local title can be added<\/h3><br\/><p>This is an example of a small set of related html pages created automatically based on a set of three JSON[@@https:\/\/www.json.org] files. This example includes simple text, some basic html code and even some additional Bootstrap options. Please note you can simply just use text, the more complex options are just here as an example.<\/p><div style=\\\"text-align:center;\\\"><a class=\\\"btn btn-outline-primary nav-button\\\" style=\\\"left:80px;\\\" id=\\\"nav-models\\\" role=\\\"button\\\" href=\\\".\/\\\">Example Button<\/a><\/div><br\/><p>Button or images or any html markup can be added in to form the bulk of the content[@@Here we can place a lot more detail about this issue] and then presented as a simple html page on Github[@@https:\/\/github.com\/]<\/p><div class=\\\"alert alert-info\\\" role=\\\"alert\\\"><h4>For the adventurous you can also use other [Bootstrap|https:\/\/getbootstrap.com\/] functions<\/h4><p>Extra Bootstrap classes can be used to add colours and emphasis as required.<\/p><\/div>\",\r\n content right\": \"<p>Additional information [@@This extra foot note should be automatically positioned under the second column] easily be added as a second column without the need for more complex html and even add in an image if required:<\/p><figure class=\\\"figure\\\"><img src=\\\"https:\/\/media.ng-london.org.uk\/iiif\/009-01DZ-0000\/full\/512,\/0\/default.jpg\\\" class=\\\"figure-img img-fluid rounded\\\" alt=\\\"Hans Holbein the Younger, Jean de Dinteville and Georges de Selve ('The Ambassadors').\\\"><figcaption class=\\\"figure-caption\\\">Hans Holbein the Younger, Jean de Dinteville and Georges de Selve ('The Ambassadors') \\u00a9 The National Gallery, London. Bought, 1890. This image is licensed under [CC-BY-NC-ND 4.0|https:\/\/creativecommons.org\/licenses\/by-nc-nd\/4.0\/].<\/figcaption><\/figure>\"\r\n }\r\n}\r\n<\/code><\/pre>\r\n<\/figure>\r\n\r\n<p>This second page object was used to define the content of the [example subpages|example-subpage-01.html], one of the actual pages within this demonstration site.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n"example-subpage-01": {\r\n "parent": "example",\r\n "title": "More detail might be needed in some areas",\r\n "content": "<p>Sub pages can be set up to provide additional content without adding to the list of tabs at the top of the page. These are nested using a simple parent child relationship.<\/p>",\r\n "content right": "<img style=\\"position:relative;width:100%;\\" src=\\"graphics\/example_knowledge_graph.png\\"\/>"\r\n }\r\n}\r\n<\/code><\/pre>\r\n<\/figure>",
"content right": "",
"displaycode": true
},
"timeline": {
"parent": "extensions",
"class": "timeline",
"file": "timeline.json",
"title": "Simple Site - The <b>Timeline Extension</b>",
"content": "<p>This extension uses the [Mermaid|https:\/\/mermaid-js.github.io\/mermaid\/#\/] library to produce a customised timeline gantt chart. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.<\/p>\r\n\r\n<h3>The Example<\/h3>\r\n[##]\r\n\r\n<h3>Summary<\/h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables<\/h4><p>For this extension to work the <b>class<\/b> variable needs to be set to <b>timeline<\/b> and the <b>file<\/b> variable needs to give the name of the additional json file including the timeline data as shown below.<\/p><\/div>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>... \r\n \"<b>timeline<\/b>\": {\r\n \"<b>parent<\/b>\": \"extensions\",\r\n \"<b>class<\/b>\": \"timeline\",\r\n \"<b>file<\/b>\": \"timeline.json\",\r\n \"<b>title<\/b>\": \"Simple Site - The <b>Timeline Extension<\/b>\",\r\n \"<b>content<\/b>\": \"<p>This extension uses the [Mermaid|https:\/\/mermaid-js.github.io\/mermaid\/#\/] library to produce a customised timeline gantt chart. It is an example of a special page that can be added to the ... \",\r\n \"<b>content right<\/b>\": \"\"\t\t\r\n\t}\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">Simplified version of the JSON object used to describe this page.<\/figcaption>\r\n<\/figure>\r\n\r\n<p>The details included in the <b>content<\/b> and <b>content right<\/b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>timeline.json<\/b> will be processed to add a formatted timeline to the page.<\/p>\r\n\r\n<h3>Timeline JSON file<\/h3>\r\n\r\n<p>As with the other JSON files the timeline data needs to be organised in a series of JSON objects, an example of which is provided below, for an example of real code please see the [timeline.json|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/timeline.json] file.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>project<\/b>\": \"Simple title for time line\",\r\n \"<b>start date<\/b>\": \"Start date of your project in the 2020-12-31 format\",\r\n \"<b>margin<\/b>\": -3, \/* negative number of months - adds a margin to the left of your timeline to leave room for the group titles.*\/\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">The top three variable required in the timeline JSON file.<\/figcaption>\r\n<\/figure>\r\n\r\n<p>The rest of the data within the JSON file relates to a series of event organised in <b>groups<\/b>, it is ok just to have a single group, but the system automatically applies different background colours to each group, which allows an easy method of breaking up or organising a longer list of events. Each is identified with a unique short tag, and then within each individual group you have a group title and list of events called <b>stages<\/b>.<\/p>\r\n\r\n<p>Each stage is made up of four unnamed variables which equate to:<\/p>\r\n<ul>\r\n<li>The display text that describes the particular stage or event<\/li>\r\n<li>An optional styling class - at this time only three options are used in the example below;\r\n<ul>\r\n<li><b>\"\"<\/b>: (basically empty) a mid blue with a dark blue outline<\/li>\r\n<li><b>\"crit\"<\/b>: a red with a lighter read outline<\/li>\r\n<li><b>\"crit, active\"<\/b>: a lighter blue with a red outline.<\/li>\r\n<\/ul><\/li>\r\n<li>The start of the event: given in a number of months from the start date, or a number of months and days if formatted as \"3,3\" - three months and three days.<\/li>\r\n<li>The end of the event: given in a number of months from the start date, or a number of months and days if formatted as \"3,3\" - three months and three days.<\/li>\r\n<\/ul>\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>\r\n... \r\n \"<b>groups<\/b>\": { \r\n \"<b>tag1<\/b>\": {\r\n \"<b>title<\/b>\": \"Tag1 Title\",\r\n \"<b>stages<\/b>\" : [\r\n [\"Text string describing the stage\", \"\", 1, 2],\r\n [\"Text string describing a critical stage\", \"crit\", 2, 4],\r\n [\"Text string describing an active stage\", \"crit, active\", 3, 8]\r\n ]}\r\n }\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">The first few objects in the [JSON file|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/timeline.json] used to describe the example timeline are shown below.<\/figcaption>\r\n<\/figure>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>project<\/b>\": \"Simple Site Time Line Example\",\r\n \"<b>start date<\/b>\": \"2020-02-01\",\r\n \"<b>margin<\/b>\": -3,\r\n \"<b>groups<\/b>\": {\r\n \"<b>int<\/b>\": {\r\n \"<b>title<\/b>\": \"Initial discussion and planning\",\r\n \"<b>stages<\/b>\" : [\r\n [\"Literature\/website\/software review\", \"\", 2, 8],\r\n [\"Establish communications, collaborative environments and links with related interest groups\",\t\"\", 0, 4],\t\t\t\t\r\n [\"Recruit Project Researcher\", \"crit\", \"3,3\", 6],\r\n [\"Project Researcher In Post\", \"crit\", 6, 21]\r\n ]},\r\n \"<b>ws<\/b>\": {\r\n \"<b>title<\/b>\": \"Workshops\",\r\n \"<b>stages<\/b>\": [\r\n [\"Organise Workshop 1\", \"\", 2, \"5,20\"],\r\n [\"Workshop 1 - The Beginning\", \"crit\", \"5,20\", \"5,21\"],\r\n [\"Organise Workshop 2\",\t\"\", 6, 9],\r\n [\"Workshop 2 - The Middle\", \"crit, active\", 9, 10],\r\n [\"Organise Workshop 3 \u2013 Document available resources and development ideas\", \"\", 10, 18],\r\n [\"Workshop 3 - The End\", \"crit, active\", 18, 19]\r\n ]},\r\n\t\t\t\r\n...\r\n\r\n }\r\n }\r\n<\/code><\/pre><figcaption class=\"figure-caption\">The first few objects in the [JSON file|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/timeline.json] used to describe the example timeline.<\/figcaption>\r\n<\/figure>",
"content right": "",
"displaycode": true
},
"lists": {
"parent": "extensions",
"displayName": "Galleries and Lists",
"aliases": "Galleries and Lists",
"class": "list",
"file": "list-example.json",
"title": "Simple Site - The <b>List and Gallery Extension</b>",
"content": "<p>This extension has been setup to automate the process of creating formatted lists and galleries using [Bootstrap|https:\/\/getbootstrap.com\/]. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.<\/p>\r\n\r\n<h3>The Example<\/h3><p>This example is displaying a list of four entries, displayed four times, demonstrating all four available display formats. An optional table of contents providing links to each of the defined groups has also been included.<\/p>\r\n[##]\r\n\r\n<h3>Summary<\/h3>\r\n\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables<\/h4><p>For this extension to work the <b>class<\/b> variable needs to be set to <b>list<\/b> and the <b>file<\/b> variable needs to give the name of the additional json file including the list data as shown below.<\/p><\/div>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>\r\n... \r\n \"<b>List - Gallery Example<\/b>\": {\r\n \"<b>parent<\/b>\": \"extensions\",\r\n \"<b>class<\/b>\": \"list\",\r\n \"<b>file<\/b>\": \"list-example.json\",\r\n \"<b>title<\/b>\": \"Simple Site - The <b>List Extension Gallery of Supporters<\/b>\",\r\n \"<b>content<\/b>\": \"<p>This extension has been setup to automate the process of creating formatted lists and galleries using [Bootstrap|https:\/\/getbootstrap.com\/]. It is an example of a special page that can be added to the ... \",\r\n \"<b>content right<\/b>\": \"\"\r\n },\r\n...\r\n<\/code>\r\n\t<\/pre>\r\n\t<figcaption class=\"figure-caption\">Simplified version of the JSON object used to describe this page.<\/figcaption>\r\n<\/figure>\r\n\r\n<p>The details included in the <b>content<\/b> and <b>content right<\/b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>timeline.json<\/b> will be processed to add a formatted timeline to the page.<\/p>\r\n\r\n<h3>List JSON file<\/h3>\r\n\r\n<p>As with the other JSON files the list data needs to be organised in a series of JSON objects, these are documented below, but for an example of a fully formatted JSON file please see the [list-example.json|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/list-example.json] file.<\/p>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>defaultcard<\/b>\": \"<b>list<\/b>, <b>full<\/b>, <b>simple<\/b>, <b>presentation<\/b> or <b>image<\/b> - selected default formatting used for each of the included list entries\",\r\n \"<b>displaychecked<\/b>\": \"<b>true<\/b> or <b>false<\/b> - option to display dates of when included or listed links where last checked.\",\r\n \"<b>tableofcontents<\/b>\": \"<b>true<\/b> or <b>false<\/b> - option to include a table of contents\",\r\n \"<b>groups\"<\/b>: \"<b>{}<\/b>\" - optional array of extra variables to define alternative formatting and to include a comment for each defined group of list entries, see below.\",\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">The top four variables required in the list JSON file.<\/figcaption>\r\n<\/figure>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n...\r\n \"group name\" : {\r\n \"<b>comment<\/b>\": \"Optional comment or summary used to describe all of the list items in a given group.\",\r\n \"<b>card<\/b>\": \"<b>list<\/b>, <b>full<\/b>, <b>simple<\/b> or <b>image<\/b> - selected formatting to be used for this specific group of list entries.\"\r\n \"<b>maxcols<\/b>\": \"Optional number from 1 - 12 to indicate the maximum number of columns to allow for simple cards and image cards. The default value is 3.\"\r\n },\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">An example of the optional variables that can be used to further define individual groups of list entries.<\/figcaption>\r\n<\/figure>\r\n\r\n<p>The rest of the data within the JSON file relates to a series of entries organised as a <b>list<\/b>, it is ok just to have a single item in the list.<\/p>\r\n\r\n<p>List entries ....<\/p>\r\n\r\n<figure>\r\n\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>\r\n... \r\n\"list\": [\r\n {\r\n \"groups\": [\"Group Name 1\", \"Group Name 2\"], - \"comma separated list of groups this particular list entry should be display in - normally just a single entry\"\r\n \"ptitle\": \"Primary entry title\",\r\n \"stitle\": \"Optional secondary title\",\r\n \"comment\": \"Optional comment or summary used to describe this particular list entry\",\r\n \"image\": \"Optional file path for image\", \"this can be a full public URL or a local link to an image uploaded into the local <b>graphics<\/b> folder within your GitHub repository\",\r\n \"link\": \"Optional html link to further information or details related to this list entry\",\r\n \"checked\": \"Optional date to define when the provided link was last checked - list format only\",\r\n \"video\": \"Optional - YouTube link or file path pointing to the recording of a given presentation - presentation format only\",\r\n \"slides\": \"Optional - link or file path pointing to the pdf of the slides used in a given presentation - presentation format only\",\r\n \"transcript\": \"Optional - link or file path pointing to the text file of the transcription of the relevant video of a given presentation - presentation format only\",\r\n},\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">The required and optional variables used to define each list entry.<\/figcaption>\r\n<\/figure>",
"content right": "",
"displaycode": true
},
"mirador-viewer": {
"parent": "extensions",
"displayName": "Mirador IIIF viewer",
"aliases": "Mirador IIIF viewer",
"class": "mirador",
"file": "mirador.json",
"title": "Simple Site - The <b>IIIF Mirador Extension</b>",
"content": "<p>This extension uses the [IIIF|https:\/\/iiif.io] image viewer [Mirador|https:\/\/projectmirador.org\/] to produce a customised presentation of a bespoke selection of IIIF manifests[@@IIIF manifests are simply a structured list of web based images resources that can be viewed in a IIIF compliant viewer, for more details see https:\/\/iiif.io\/api\/presentation\/2.1\/#table-of-contents]. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.<\/p>\r\n\r\n<h3>The Example<\/h3>\r\n[##]\r\n<br\/>\r\n<h3>Summary<\/h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables<\/h4><p>For this extension to work the <b>class<\/b> variable needs to be set to <b>mirador<\/b> and the <b>file<\/b> variable needs to give the name of the additional json file including the IIIF manifest list data as shown below.<\/p><\/div>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>... \r\n \"<b>mirador<\/b>\": {\r\n \"<b>parent<\/b>\": \"extensions\",\r\n \"<b>class<\/b>\": \"mirador\",\r\n \"<b>file<\/b>\": \"mirador.json\",\r\n \"<b>title<\/b>\": \"Simple Site - The <b>IIIF Mirador Extension<\/b>\",\r\n \"<b>content<\/b>\": \"<p>This extension uses the [IIIF|https:\/\/iiif.io] to produce a customised presentation of a bespoke selection of [IIIF manifests ... \",\r\n \"<b>content right<\/b>\": \"\"\t\t\r\n }\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">Simplified version of the JSON object used to describe this page.<\/figcaption>\r\n<\/figure>\r\n\r\n<p>The details included in the <b>content<\/b> and <b>content right<\/b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>mirador.json<\/b> will be processed to add a populated Mirador image viewer to the page.<\/p>\r\n\r\n<h3>Mirador JSON file<\/h3>\r\n\r\n<p>As with the other JSON files the mirador data needs to be organised in a series of JSON objects, an example of which is provided below, for an example of real code please see the [mirador.json|https:\/\/github.com\/jpadfield\/simple-site\/blob\/master\/build\/mirador.json] file. The expected data can be split into two parts, the first is required and the second, more complex section is optional.<\/p>\r\n\r\n<h4>Section one - <b>catalog<\/b> object<\/h4>\r\n\r\n<p>This object is composed of a simple list of manifests URIs that should be preloaded into the viewer. If only the catalog object is provided Mirador is setup to autoload in the first image of the first manifest listed.<\/p>\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>...\r\n \"<b>catalog<\/b>\": [\r\n { \"manifestId\": \"<b>https:\/\/web.address\/of\/a\/manifest you want to include\"<\/b> }, \r\n { \"manifestId\": \"<b>https:\/\/you.can.include\/a\/number\/of\/manifests\/as\/required<\/b>\" }\r\n ]\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">A commented example of a catalog object with two manifests listed.<\/figcaption>\r\n<\/figure>\r\n<br\/>\r\n<h4>Section two - the <b>windows<\/b> object<\/h4>\r\n<p>As noted above this section is optional, it can also be a bit more complex. This object id intended to allow users to make use of some of the standard Mirador options to define which manifests and images are automatically loaded into the viewer and how they are arranged.<\/p>\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>...\r\n \"<b>windows<\/b>\": [\r\n {\r\n \"<b>manifestId<\/b>\": \"URI of the manifest, from the included list, that you would like to load into a given slot by default\",\r\n \"<b>canvasIndex<\/b>\":\"The number, starting from 0, of the image, as listed in the manifest, to be loaded in first\",\r\n \"<b>view<\/b>\": \"The optional variable to define the initial view of this slot, enter one of <b>single<\/b>(default) or <b>gallery<\/b>\",\r\n \"<b>id<\/b>: \"Option variable to define a unique id for this slot, can be used in conjunction with more complex options to define the order and position in which listed slots will appear.\"\r\n }\r\n ]\r\n...\r\n<\/code><\/pre><figcaption class=\"figure-caption\">A commented version of a windows object with a single slot defined. More information about these various values can be found on the main [Mirador webpage|https:\/\/github.com\/ProjectMirador\/mirador\/wiki\/Configuration-Guides].<\/figcaption>\r\n<\/figure>\r\n<br\/>\r\n<h3>Mirador Text file<\/h3>\r\n\r\n<p>Although the JSON format described above is preferred and provides additional functions, in order to make this extension as simple an accessible as possible, it is also possible to provide details of required manifests as simple text list, with one manifest per line.<\/p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>https:\/\/manifests.britishart.yale.edu\/manifest\/34\r\nhttps:\/\/iiif.harvardartmuseums.org\/manifests\/object\/299843\r\nhttps:\/\/media.nga.gov\/public\/manifests\/nga_highlights.json\r\n<\/code><\/pre><figcaption class=\"figure-caption\">An example of the simplest way of passing manifests to simple-site page builder, a simple list of manifest urls saved as a text file with one manifest url per line.<\/figcaption>\r\n<\/figure>",
"content right": "",
"displaycode": true
},
"panel-truck-viewer": {
"parent": "extensions",
"displayName": "Panel Truck Viewer",
"aliases": "Panel Truck viewer",
"class": "paneltruck",
"file": "https://gist.githubusercontent.com/garrettdashnelson/73b32f40cccbe30239838dd3bd63988a/raw/7d4f7efc52ee0bb0929110a4438c37d8c98f0aa5/test-screenplay.json",
"title": "Simple Site - The <b>Panel-Truck (IIIF) Extension</b>",
"content": "<p>This extension makes use of [IIIF|https:\/\/iiif.io] and the [panel-truck (v0.1)|https:\/\/geoservices.leventhalmap.org\/cartinal\/documentation\/panel-truck.html] viewer, created by the <a href=\"https:\/\/leventhalmap.org\">Leventhal Map and Education Center<\/a> at the Boston Public Library. The panel-truck viewer is a web UI tool which allows users to present interactive storylines using images and maps. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.<\/p>\r\n\r\n<h3>The Example<\/h3>\r\n[##]\r\n<br\/>\r\n<h3>Summary<\/h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables<\/h4><p>For this extension to work the <b>class<\/b> variable needs to be set to <b>paneltruck<\/b> and the <b>file<\/b> variable needs to give the name of the additional json file including the panel-truck script details as shown below.<\/p><\/div>\r\n\r\n<p>The details included in the <b>content<\/b> and <b>content right<\/b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>test-screenplay.json<\/b> will be processed and displayed in the panel-truck viewer.<\/p>\r\n\r\n<h3>Panel Truck JSON file<\/h3>\r\n\r\n<p>As with the other JSON files the panel-truck data needs to be organised in a series of JSON objects, an example of which is provided below, for a live presentation of the example of code please see the [test-screenplay.json|https:\/\/gist.githubusercontent.com\/garrettdashnelson\/73b32f40cccbe30239838dd3bd63988a\/raw\/7d4f7efc52ee0bb0929110a4438c37d8c98f0aa5\/test-screenplay.json] file.<\/p>\r\n\r\n<p>The required and optional json variables have all been described as part of the standard [panel-truck documentation|https:\/\/geoservices.leventhalmap.org\/cartinal\/documentation\/panel-truck.html#creating-a-screenplay], but for any more information please [get in touch|https:\/\/www.leventhalmap.org\/about\/people\/garrett-nelson\/] with the original project.<\/p>",
"content right": "",
"displaycode": true
},
"curtain-viewer": {
"parent": "extensions",
"displayName": "Curtain Viewer",
"aliases": "Curtain Viewer",
"class": "curtain",
"file": "https://raw.githubusercontent.com/jpadfield/simple-site/master/build/curtain-example-01.json",
"title": "<b>Curtain Viewer</b> - <i>A Dominican, with the Attributes of Saint Peter Martyr</i>",
"content": "<p>This extension makes use of [IIIF|https:\/\/iiif.io] and the [Victoria and Albert Museum|https:\/\/www.vam.ac.uk\/] - [Curtain Viewer|https:\/\/vanda.github.io\/curtain-viewer] which is based on [OpenSeaDragon|https:\/\/openseadragon.github.io\/], using the [curtain-sync plugin|https:\/\/github.com\/cuberis\/openseadragon-curtain-sync] for comparing naturally aligned image variants, such as those obtained by multi-spectral imaging, supplied as canvases in a IIIF manifest.<\/p>\r\n\r\n<p>The images presented here are all representations of [A Dominican, with the Attributes of Saint Peter Martyr about 1490-1500|https:\/\/www.nationalgallery.org.uk\/paintings\/giovanni-bellini-a-dominican-with-the-attributes-of-saint-peter-martyr] by [Giovanni Bellini|http:\/\/www.nationalgallery.org.uk\/artists\/giovanni-bellini] which was presented as part of the [Close Examination: Fakes, Mistakes and Discoveries|https:\/\/www.nationalgallery.org.uk\/exhibitions\/past\/close-examination-fakes-mistakes-and-discoveries] exhibition and is described in more detail [here|http:\/\/www.nationalgallery.org.uk\/paintings\/research\/a-dominican-with-the-attributes-of-saint-peter-martyr].<\/p>\r\n\r\n<p><b>This viewer is limited to displaying three images at a time, but one can select any three from the set provided.<\/b><\/p>\r\n\r\n<h3>The Example<\/h3>\r\n[##]\r\n<br\/>\r\n<h3>Summary<\/h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables<\/h4><p>For this extension to work the <b>class<\/b> variable needs to be set to <b>curtain<\/b> and the <b>file<\/b> variable needs to give the name of the additional json file including the IIIF collection manifest defining the set of images to present, as shown below.<\/p><\/div>\r\n\r\n<p>The details included in the <b>content<\/b> and <b>content right<\/b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>curtain-example-01.json<\/b> will be processed and displayed in the curtain viewer. <b>Please note that a full resolvable URL is required for this file rather than just the local filename<\/b>.<\/p>\r\n\r\n<h3>Curtain Viewer IIIF Collection Manifest JSON file<\/h3>\r\n\r\n<p>As with the other JSON files the curtain viewer data needs to be organised in a series of JSON objects, an example of which is provided below, for a live presentation of the example of code please see the [curtain-example-01.json|https:\/\/raw.githubusercontent.com\/jpadfield\/simple-site\/master\/build\/curtain-example-01.json] file.<\/p>\r\n\r\n<p>More general details of the variables and formatting required for the version of the IIIF Collection manifest used in the curtain viewer can found [here|https:\/\/iiif.io\/api\/presentation\/2.1\/#collection].<\/p>",
"content right": "",
"displaycode": true
},
"openseadragon-viewer": {
"parent": "extensions",
"displayName": "OpenSeadragon Viewer",
"aliases": "OpenSeadragon Viewer",
"class": "openseadragon",
"file": "openseadragon_list.txt",
"title": "Simple Site - The <b>OpenSeadragonViewer (IIIF) Extension</b><i></i>",
"content": "<p>This extension creates an [OpenSeaDragon|https:\/\/openseadragon.github.io\/] viewer based on [IIIF|https:\/\/iiif.io] resources, either images[@@For more information about how direct image URLs are constructed see:https:\/\/iiif.io\/api\/image\/3.0\/#51-image-information-request] or manifests[@@IIIF manifests are simply a structured list of web based images resources that can be viewed in a IIIF compliant viewer, for more details see https:\/\/iiif.io\/api\/presentation\/3.0\/#52-manifest]. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.<\/p>\r\n\r\n<h3>The Example<\/h3>\r\n[##]\r\n<br\/>\r\n<h3>Summary<\/h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables<\/h4><p>For this extension to work the <b>class<\/b> variable needs to be set to <b>openseadragon<\/b> and the <b>file<\/b> variable needs to be a URL to a live IIIF mainifest or the path to a simple text list of either IIIF manifests or individual <b>info.json<\/b> URLs for IIIF images, as shown below.<\/p><\/div>\r\n\r\n<p>The details included in the <b>content<\/b> and <b>content right<\/b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>openseadragon_list.txt<\/b> will be processed and displayed in the openseadragon viewer. <b>Please note that a full resolvable URL is required when a single IIIF manifest is used, but a simple filename can be used to reference a local file<\/b>.<\/p>",
"content right": "",
"displaycode": true
},
"template-home": {
"displayName": "Example Home",
"parent": "template",
"title": "YOUR PAGE TILE APPEARS HERE",
"class": "openseadragon",
"file": "https://data.ng-london.org.uk/0CWR-0001-0000-0000.iiif",
"content": "<h4>SECTION TITLE CAN BE ADDED LIKE THIS</h4><br/><p>This is an example of a small set of related html pages created automatically based on a set of three JSON[@@https://www.json.org] files. This example includes simple text, some basic html code and even some additional Bootstrap options. Please note you can simply just use text, the more complex options are just here as an example.</p><div style=\"text-align:center;\"><a class=\"btn btn-outline-primary nav-button\" style=\"left:80px;\" id=\"nav-models\" role=\"button\" href=\"./\">Example Button</a></div><br/><p>Button or images or any html markup can be added in to form the bulk of the content[@@Here we could place a lot more detail about this issue] and then presented as a simple html page on Github[@@https://github.com/]</p><div class=\"alert alert-info\" role=\"alert\"><h4>For the adventurous you can also use other [Bootstrap|https://getbootstrap.com/] functions</h4><p>Extra Bootstrap classes can be used to add colours and emphasis as required.</p></div><p>N.B. The logos used on this page and the link to the Github repository above can all be modified. See [site.json|site.json.html] in the Documentation section for further details.</p><p>Additional information[@@This extra foot note should be automatically positioned under the second column] can be easily added as a second column without the need for more complex html and one can even add in an image if required:</p><h4>Images</h4><p>TO ADD AN IMAGE TO A PAGE THERE ARE TWO OPTIONS:</p>",
"content right": "<p><b>To insert a static image:</b></p><p>Replace the URL in the centre of this code and update the alternative text and caption (if either is desired): <figure class=\"figure\"><img src=\"https://data.ng-london.org.uk/iiif/image/02NS-0001-0000-0000/full/256,/0/default.jpg\" class=\"figure-img img-fluid rounded\" alt=\"This is where you can add the alternative text for the image\"><figcaption class=\"figure-caption\">There is also the option to add a caption to any image. - Georges Seurat ('Bathers at Asnières') \u00a9 The National Gallery, London. Bought, Courtauld Fund, 1924. This image is licensed under [CC-BY-NC-ND 4.0|https://creativecommons.org/licenses/by-nc-nd/4.0/].</figcaption></figure><p><b>To insert a 'zoom-able' image:</b></p> <p> First, you need a IIIF manifest. Ensure you have <b>\"class\":\"openseadragon\"</b> and <b>\"file\":\"IIIF manifest goes here\"</b> enabled on the page on which you'd like to display the image.</p><p>Given the above conditions you can use this code, amended as you'd like to display the desired image: <figure class=\"figure\">[##]<figcaption style=\"padding-left:16px;padding-right:16px;\" class=\"figure-caption\">Hans Holbein the Younger, Jean de Dinteville and Georges de Selve ('The Ambassadors') \u00a9 The National Gallery, London. Bought, 1890. This image is licensed under [CC-BY-NC-ND 4.0|https://creativecommons.org/licenses/by-nc-nd/4.0/].</figcaption></figure>",
"displaycode": true
},
"example-subpage-01": {
"parent": "template-home",
"displayName": "Nice display pagename",
"title": "More detail might be needed in some areas",
"content": "<p>Sub pages can be set up to provide additional content without adding to the list of tabs at the top of the page. These are nested using a simple parent child relationship.</p><div class=\"alert alert-warning\" role=\"alert\"><p><b>NB:</b> The display name of a page, which appears in the menus and navigation options can be different to the actual name used for the page. For example the display name of this page is <b>Nice display pagename</b>, whereas the actual page name in the URL is <b>example-subpage-01</b>. This can be useful as it is good practice to avoid long page names that include spaces.</p><p>Display names can be set in the [pages.json|pages.json.html] file, using the variable <b>\"displayName\"</b>.</p></div>",
"content right": "<img style=\"position:relative;width:100%;\" alt=\"Example Knowledge Graph\" src=\"graphics/example_knowledge_graph.png\"/>",
"displaycode": true
},
"mirador-example": {
"parent": "template-home",
"displayName": "A Mirador Viewer",
"class": "mirador",
"file": "mirador.json",
"title": "Simple Site - The <b>IIIF Mirador Extension</b>",
"content": "<p>This extension uses the [IIIF|https://iiif.io] image viewer [Mirador|https://projectmirador.org/] to produce a customised presentation of a bespoke selection of IIIF manifests[@@IIIF manifests are simply a structured list of web based images resources that can be viewed in a IIIF compliant viewer, for more details see https://iiif.io/api/presentation/2.1/#table-of-contents]. It is an example of a special page that can be added to the [pages.json|pages.json.html] file. To change the objects displayed in this viewer, modify the <b>mirador.json</b> file found in the <b>build</b> folder in your Github Repository. Further information on the function of the viewer can be found under [Extensions|mirador-viewer.html] in the Documentation section of this site.</p>\r\n\r\n<h3>The Example</h3>\r\n[##]",
"content right": "",
"displaycode": true
},
"example-subpage-02": {
"parent": "template-home",
"displayName": "An Example List",
"class": "list",
"file": "list-example.json",
"title": "Another example of a simple sub page",
"content": "<p>This example is displaying a list of four entries, displayed four times, demonstrating all four available display formats. An optional table of contents providing links to each of the defined groups has also been included.</p><p>It is an example of a special page that can be added to the [pages.json|pages.json.html] file. To change the objects displayed in this list, modify the <b>list-example.json</b> file found in the <b>build</b> folder in your Github Repository. Further information on types and formats of the lists displayed can be found under [Extensions|lists.html] in the Documentation section of this site.</p>\r\n\r\n[##]",
"content right": "",
"displaycode": true
},
"example-sub-subpage-01": {
"parent": "example-subpage-01",
"aliases": "results",
"displayName": "Great webpage name",
"title": "Probably not needed - more nesting",
"content": "<p>As the relationships work on a simple parent child structure more and more pages can be nested as required.</p>",
"content right": "<p>This example also shows that if needed you can automatically have multiple page names point towards the same page. This can be important if you have an old page name that needed to be changed, but has been referenced in the past.<div style=\"text-align:center;\"><a class=\"btn btn-outline-primary nav-button\" style=\"left:80px;\" id=\"nav-models\" role=\"button\" href=\"results.html\">The same page, but with the name \"results.html\"</a></div><br/><div class=\"alert alert-warning\" role=\"alert\"><p>Alternative page names can be set in the [pages.json|pages.json.html] file, using the variable <b>\"aliases\"</b>, and multiple alternative names can be entered as a comma separated list.</p></div>",
"displaycode": true
}
}