-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path10-contribute.html
636 lines (635 loc) · 45 KB
/
10-contribute.html
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
---
layout: default
title: Contributing
---
<h1 class="header1">{{ page.title }}</h1>
<hr>
<h1 class="grhead1">Main Table of Contents</h1>
<div id="tableOfContents" class="grid-toc">
<div class="toc1">
<h2 class="grhead2">General</h2>
<h3 class="grhead3"><a href="index.html">Welcome</a></h3>
<h3 class="grhead3"><a href="10-contribute.html">Contribute: Generate Wiki pages from Text Files</a></h3>
<h2 class="grhead2">Wrye Bash Related</h2>
<h3 class="grhead3"><a href="2-wryebashfeatures.html">Wrye Bash Features</a></h3>
<h3 class="grhead3"><a href="3-wryemashusage.html">Wrye Mash Usage</a></h3>
<h3 class="grhead3"><a href="4-generalusage.html">General Usage</a></h3>
<h3 class="grhead3"><a href="5-advancedusage.html">Advanced Usage</a></h3>
</div>
<div class="toc2">
<h3 class="grhead3"><a href="6-technicalreferences.html">Technical References</a></h3>
<h3 class="grhead3"><a href="8-tomeofalt3rn1ty.html">Tome of Alt3rn1ty</a></h3>
<h2 class="grhead2">Morrowind Related</h2>
<h3 class="grhead3"><a href="9-morrowindandbeyond.html">Morrowind And Beyond</a></h3>
<h3 class="grhead3"><a href="14-testoolghostwheel.html">TES Plugin Tool (TESTool) 1.3 Docs</a></h3>
<h2 class="grhead2">Oblivion Related</h2>
<h3 class="grhead3"><a href="7-tomeofpsymon.html">Tome of Psymon - BAIN Mod Installation Projects</a></h3>
<h3 class="grhead3"><a href="13-oblivionandbeyond.html">Oblivion And Beyond</a></h3>
</div>
</div>
<p class="empty"> </p>
<div>
<!-- Needed, sets the top of the page just before the H1 Title -->
<h2 class="header2" id="Intent">Intent</h2>
<p class="list-1">• Do you have Wrye Bash related material that you would like to submit to this site? Are HTML and css style sheets over your head? The files and options provided will allow you to edit a simple text file that I will convert into content for the Wiki.</p>
<p class="empty"> </p>
<p class="list-1">• Optionally if you would like to see what your work will look like on-line I provide an optional Python script that will generate HTML and allow you to double click the file from the windows explorer and see a very close approximation of what it will look like.</p>
<p class="empty"> </p>
<p class="list-1">• Wrye has said in some of his Wrye Mash files that he built all of his pages using this system. I would presume that <a href="http://wryemusings.com/" >Wrye Musings</a> was done this way as well. On this page you will be shown the Wrye Text format and given a download of a python script to run and convert your Wrye Text files to HTML that can be used on this site.</p>
<p class="empty"> </p>
<p class="note">You do not need to know Python or HTML to contribute. The syntax of the text file is explained below along with optional instructions on how to install Python to use the script provided.</p>
<p class="empty"> </p>
<h2 class="header2" id="Whatcontentwouldbeaccepted">What content would be accepted?</h2>
<p class="list-1">• Content should be Wrye related and related to Wrye Mash, and Wrye Bash programs. This can include BAIN installers for mods that do not currently have any or any other content that users could benefit from when using Wrye Bash.</p>
<p class="list-1">• Mod lists and modding guides are also acceptable.</p>
<p class="list-1">• There are many mods that are a must have so guides will include most of these mods. Try not to duplicate other content when possible.</p>
<p class="empty"> </p>
<h2 class="header2" id="Contents">Contents</h2>
<p class="list-1">• <a href="#Requirement">10.1 Requirement</a></p>
<p class="list-2">• <a href="#Downloadpagebuilder_v21zip">10.1.1 Download pagebuilder_v21.zip</a></p>
<p class="list-2">• <a href="#ExampleTemplate">10.1.2 Example Template</a></p>
<p class="list-1">• <a href="#Syntax">10.2 Syntax</a></p>
<p class="list-2">• <a href="#YourPagesTitle">10.2.1 Your Pages Title</a></p>
<p class="list-2">• <a href="#HeadingStyle1">10.2.2 Heading Style 1</a></p>
<p class="list-2">• <a href="#HeadingStyle2">10.2.3 Heading Style 2</a></p>
<p class="list-2">• <a href="#TableofContents">10.2.4 Table of Contents</a></p>
<p class="list-2">• <a href="#Bullets">10.2.5 Bullets</a></p>
<p class="list-2">• <a href="#Styles">10.2.6 Styles</a></p>
<p class="list-2">• <a href="#HeaderRule">10.2.7 Header Rule</a></p>
<p class="list-2">• <a href="#NavigationButtons">10.2.8 Navigation Buttons</a></p>
<p class="list-2">• <a href="#ExtraNavigation">10.2.9 Extra Navigation</a></p>
<p class="list-2">• <a href="#Links">10.2.10 Links</a></p>
<p class="list-2">• <a href="#TextColors">10.2.11 Text Colors</a></p>
<p class="list-2">• <a href="#LinkColors">10.2.12 Link Colors</a></p>
<p class="list-2">• <a href="#LinkTitles">10.2.13 Link Titles</a></p>
<p class="list-2">• <a href="#TooltipText">10.2.14 Tooltip Text</a></p>
<p class="list-2">• <a href="#Html">10.2.15 Html</a></p>
<p class="list-2">• <a href="#Blockquote">10.2.16 Blockquote</a></p>
<p class="list-2">• <a href="#SpoilerTags">10.2.17 Spoiler Tags</a></p>
<p class="list-2">• <a href="#Notes">10.2.18 Notes</a></p>
<p class="list-2">• <a href="#OtherFormattingHTMLElements">10.2.19 Other Formatting & HTML Elements</a></p>
<p class="list-2">• <a href="#Comments">10.2.20 Comments</a></p>
<p class="list-2">• <a href="#Images">10.2.21 Images</a></p>
<p class="list-2">• <a href="#AddinganImage">10.2.22 Adding an Image</a></p>
<p class="list-2">• <a href="#AddinganImagewithaCaption">10.2.23 Adding an Image with a Caption</a></p>
<p class="list-2">• <a href="#AddinganImagewithCaptionandHyperlink">10.2.24 Adding an Image with Caption and Hyperlink</a></p>
<p class="list-2">• <a href="#AddinganinlineImage">10.2.25 Adding an inline Image</a></p>
<p class="list-1">• <a href="#Versions">10.3 Versions</a></p>
<p class="list-2">• <a href="#2100Update2182020">10.3.1 21.00 Update [2/18/2020]</a></p>
<p class="list-2">• <a href="#2000Update1272020">10.3.2 20.00 Update [1/27/2020]</a></p>
<p class="list-2">• <a href="#1900Update1262020">10.3.3 19.00 Update [1/26/2020]</a></p>
<p class="list-2">• <a href="#1800Update1252020">10.3.4 18.00 Update [1/25/2020]</a></p>
<p class="list-2">• <a href="#1700Update1252020">10.3.5 17.00 Update [1/25/2020]</a></p>
<p class="list-1">• <a href="#OptionalRequirement">10.4 Optional Requirement</a></p>
<p class="list-2">• <a href="#PythonInstallation">10.4.1 Python Installation</a></p>
<p class="list-2">• <a href="#WherearethefilesIjustdownloaded">10.4.2 Where are the files I just downloaded?</a></p>
<p class="list-2">• <a href="#InstallingPython">10.4.3 Installing Python</a></p>
<p class="list-2">• <a href="#InstallingPythonscriptforuse">10.4.4 Installing Python script for use</a></p>
<p class="list-1">• <a href="#ReuseandCredits">10.5 Reuse and Credits</a></p>
<p class="list-2">• <a href="#LicenseWML10ModifyandRedistributeShareAlike">10.5.1 License: WML 1.0 Modify and Redistribute, Share Alike</a></p>
<p class="list-2">• <a href="#Credits">10.5.2 Credits</a></p>
<p class="empty"> </p>
<h2 class="header2" id="Requirement">10.1 - Requirement</h2>
<p class="list-1">• The <code>pagebuilder_v21.zip</code> contains all the files shown. However, in the future it may contain other files as well. As the file changes, the file name will have a version number added to it that you can compare to your copy. Then you will know if you have the most recent files.</p>
<h3 id="Downloadpagebuilder_v21zip">10.1.1 - Download pagebuilder_v21.zip</h3>
<p>{% include image.html file="img/pagebuilder.jpg" alt="Page Builder Zipfile" %}</p>
<p class="empty"> </p>
<p class="list-1">• <a href="pagebuilder_v21.zip" >pagebuilder_v21 Download Link.zip</a></p>
<p class="empty"> </p>
<h3 id="ExampleTemplate">10.1.2 - Example Template</h3>
<p>As part of the pagebuilder archive you have <code>Wiki Page Template.txt</code>. This will be the file you will modify as desired for the wiki content you wish to present. I will convert it into usable HTML after you are done and you may update the content and submit the changes.</p>
<p class="empty"> </p>
<h2 class="header2" id="Syntax">10.2 - Syntax</h2>
<h3 class="header3" id="YourPagesTitle">10.2.1 - Your Pages Title</h3>
<p class="empty"> </p>
<p>Your page title will become the first line on the page and will be assigned as the first header. To indicate this text use the following Wrye Tag. Add <code>{% raw %}{{PAGETITLE="Your Page Title"}}{% endraw %}</code> with opening and ending double curly brackets. The text in quotes will become the title of your page as shown below.</p>
<p class="empty"> </p>
<h1 class="header1" id="YourPageTitle">Your Page Title</h1>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="HeadingStyle1">10.2.2 - Heading Style 1</h3>
<p class="empty"> </p>
<p class="list-1">• There are 4 levels of headings defined with different sizes of text and backgrounds.</p>
<p class="list-1">• The level of the heading is determined by number of leading '='s. Trailing equal signs are ignored.</p>
<p class="list-1">• These headings will have some shade of grey bar that extends the width of the page.</p>
<p class="empty"> </p>
<h1 class="header1" id="Heading1">Heading 1</h1>
<h2 class="header2" id="Heading2">Heading 2</h2>
<h3 class="header3" id="Heading3">Heading 3</h3>
<h4 class="header4" id="Heading4">Heading 4</h4>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="HeadingStyle2">10.2.3 - Heading Style 2</h3>
<p class="empty"> </p>
<p class="list-1">• Like the previous heading the amount of leading '#'s determines the level of the heading.</p>
<p class="list-1">• These headings will not have a bar as a background and will have green text</p>
<h1 id="Heading11">Heading 1</h1>
<h2 id="Heading22">Heading 2</h2>
<h3 id="Heading33">Heading 3</h3>
<h4 id="Heading44">Heading 4</h4>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="TableofContents">10.2.4 - Table of Contents</h3>
<p class="empty"> </p>
<p>A table of contents is automatically generated from the headers in the document. It is best to place the first content tag where you want the table of contents to be, and after a header named Contents. The number indicates the level of headers used. You should not use H1 except at the beginning of your page.</p>
<p class="empty"> </p>
<p>In addition to building a table of contents, both the headers and the table of contents will be numbered automatically. It is not necessary to number the headers manually because they will be renumbered automatically as well. The numbering relies on the numer at the begining of the file name. For exmaple all the numbers will start with <code>6.x</code> if the file name is <code>6-yourpagename.html</code>.</p>
<p class="empty"> </p>
<p>A value of two would use H2 headers:</p>
<p class="empty"> </p>
<p class="list-1">• H2 Heading</p>
<p class="list-1">• H2 Heading</p>
<p class="list-1">• H2 Heading</p>
<p class="empty"> </p>
<p>A value of three would include H3 headers as well:</p>
<p class="empty"> </p>
<p class="list-1">• H2 Heading</p>
<p class="list-2">• H3 Heading</p>
<p class="list-1">• H2 Heading</p>
<p class="empty"> </p>
<p>A value of four would include H4 headers:</p>
<p class="empty"> </p>
<p class="list-1">• H2 Heading</p>
<p class="list-2">• H3 Heading</p>
<p class="list-3">• H4 Heading</p>
<p class="list-1">• H2 Heading</p>
<p class="empty"> </p>
<p>The syntax is as follows: <code>{% raw %}{{CONTENTS=2}}{% endraw %}</code> or <code>{% raw %}{{CONTENTS=0}}{% endraw %}</code> to pause using headers in the table of contents.</p>
<p class="empty"> </p>
<p>You can also disable using headers in the table of contents by using a value of <code>0</code>. The headers will not be recorded until there is another contents tag with a value greater than 0.</p>
<p class="empty"> </p>
<p class="note">You can only use one value for the document. Meaning if you use the value of 2 you can not use 3 and later 4 and then later 2 again. Instead use headers in a meaningful way or omit the header by using a 0 value contents tag.</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="Bullets">10.2.5 - Bullets</h3>
<p class="list-1">• Bullets1 - an asterisk <code>*</code> and a space would precede the text</p>
<p class="list-2">• Bullets 2 - two spaces and an asterisk <code>*</code> would precede the text</p>
<p class="list-3">• Bullets 3 - four spaces and an asterisk <code>*</code> would precede the text</p>
<p class="list-4">• Bullets 4 - six spaces and an asterisk <code>*</code> would precede the text</p>
<p class="list-5">• Bullets 5 - six spaces and an asterisk <code>*</code> would precede the text</p>
<p class="list-6">• Bullets 6 - six spaces and an asterisk <code>*</code> would precede the text</p>
<p class="list-1">+ Alternate bullet char - a plus and a space <code>+ </code> would precede the text</p>
<p class="list-1">o Alternate bullet char</p>
<p class="list-1"> For an invisible bullet char you would use a period <code>.</code> at the beginning of the line.</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="Styles">10.2.6 - Styles</h3>
<p class="list-1">• <I>Italic</I> - You would surround the text using two tilde <code>~</code> symbols</p>
<p class="list-1">• <B>Bold</B> - You would surround the text using two underscore <code>_</code> symbols</p>
<p class="list-1">• <B><I>BoldItalic</I></B> - You would surround the text using two asterisk <code>*</code> symbols</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="HeaderRule">10.2.7 - Header Rule</h3>
<p>There are two ways to make a Header Rule to separate content. The traditional HTML <code><hr></code> tag and by adding 4 hyphens <code>----</code> at the beginning of a line.</p>
<p class="empty"> </p>
<hr>
<p class="empty"> </p>
<p class="note">The above white line used the 4 hyphens <code>----</code> as the syntax.</p>
<h3 class="header3" id="NavigationButtons">10.2.8 - Navigation Buttons</h3>
<p>You can add Navigation Buttons to your document to help your reader navagate to other pages or sections on the same page. Below is the syntax for two buttons. The buttons will be arranged horizontally unless on a phone where they will appear vertically.</p>
<p class="empty"> </p>
{% raw %}<pre>
{{nbb}}
[[https://wrye-code-collection.github.io/wcc-wiki/index.html | wcc-wiki]]
[[https://sharlikran.github.io/ | Sharlikran]]
{{nbe}}
</pre>{% endraw %}
<p class="empty"> </p>
<p>Will produce dark teal buttons like this:</p>
<p class="empty"> </p>
<div>
<a href="#Versions" class="drkbtn">Versions</a>
<a href="#Contents" class="drkbtn">Contents</a>
</div>
<p class="empty"> </p>
<p>All Wrye Text link syntax is vallid.</p>
<p class="empty"> </p>
<div>
<a href="#Links" class="drkbtn">See Links</a>
</div>
<h3 class="header3" id="ExtraNavigation">10.2.9 - Extra Navigation</h3>
<p>If you need to link to another part of a page or a different page then you can insert a navigation anchor. The anchor should be placed above the text you want to link to. That way once you click the link the page will move to the anchor and text (where you placed the anchor) will be positioned at the top of the browser.</p>
<p class="empty"> </p>
{% raw %}<pre>
{{nav:gotohere}}
</pre>{% endraw %}
<p class="empty"> </p>
<p>Once you add the navigation link you will need to make a link for users to click on to navigate to the anchor. To do so you need the link to start with <code>#</code> Simply add that somewhere in the document above where you want the anchor</p>
<p class="empty"> </p>
<pre>
[[#|gotohere]]
</pre>
<p class="empty"> </p>
<p>Click <a href="#thislink" >this link</a> and it will jump to the Version section so you can see what happens with this type of anchor.</p>
<p class="empty"> </p>
<p class="note">The anchor <B>does not</B> start with a <code>#</code>. However, the link to the anchor <B>must</B> start with a <code>#</code>.</p>
<p class="empty"> </p>
<h3 class="header3" id="Links">10.2.10 - Links</h3>
<p>There are different ways to add a hyperlink to other content. The two examples that will be internal and external links.</p>
<p class="empty"> </p>
<pre>
External Link: [[https://wryemusings.com/]] or [[https://wryemusings.com/ | Wrye Musings]]
</pre>
<p><a href="https://wryemusings.com/" >https://wryemusings.com/</a> or <a href="https://wryemusings.com/" >Wrye Musings</a></p>
<p class="empty"> </p>
<p>Although the syntax is different they function the same. The difference with the second example is that it has link text. To specify link text you separate the hyperlink and the link text with a pipe <code>|</code> symbol which you get by using <code>SHIFT + \</code>.</p>
<p class="empty"> </p>
<pre>
Internal Link 1: [[#Python Installation | Python Installation]]
Internal Link 2: [[#| Reuse and Credits]]
Internal Link 3: [[#ExtraNavigation | Extra Navigation]]
</pre>
<p>Internal Link 1: <a href="#PythonInstallation" >Python Installation</a></p>
<p>Internal Link 2: <a href="#ReuseandCredits" >Reuse and Credits</a></p>
<p>Internal Link 3: <a href="#ExtraNavigation" >Extra Navigation</a></p>
<p class="empty"> </p>
<p>There is no functional difference between the three examples. They will all link to another part of this document. One slight difference is that in the first two examples the text on the left side of the <code>|</code> has a space. The site builder will automatically convert that to a valid internal link. For a valid internal link you only need to specify the name of the header. The main benefit of this syntax is that as long as the header name does not change, it will not matter what other headers or sections of the document you add or remove. An internal link will always be valid as long as there is a matching header of the same name.</p>
<p class="empty"> </p>
<p class="note">If you duplicate a header name a number will be appended to make the anchor unique. When that happens an internal link to a header will fail unless you specify the exact anchor produced by the pagebuilder. You will need to examine the HTML file generated.</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="TextColors">10.2.11 - Text Colors</h3>
<p class="empty"> </p>
<p>There are 16 dark themed colors (17 if you count black) for you to choose from so they are not (at least to the best of my abilities) as blinding as their regular values. To use these colors you need to use the outdated HTML tag <code>font</code>. The tag needs to have the proper open and closing tag, and the name of the color will be assigned to the word class within quotes.</p>
<p class="empty"> </p>
<pre>
<font class="green">This is green</font>
</pre>
<p class="empty"> </p>
<p class="list-1">• <font class="black">This is black</font></p>
<p class="list-1">• <font class="blue">This is blue</font></p>
<p class="list-1">• <font class="brown">This is brown</font></p>
<p class="list-1">• <font class="cyan">This is cyan</font></p>
<p class="list-1">• <font class="dkgray">This is dkgray</font></p>
<p class="list-1">• <font class="gray">This is gray</font></p>
<p class="list-1">• <font class="green">This is green</font></p>
<p class="list-1">• <font class="ltblue">This is ltblue</font></p>
<p class="list-1">• <font class="ltgray">This is ltgray</font></p>
<p class="list-1">• <font class="ltgreen">This is ltgreen</font></p>
<p class="list-1">• <font class="orange">This is orange</font></p>
<p class="list-1">• <font class="pink">This is pink</font></p>
<p class="list-1">• <font class="purple">This is purple</font></p>
<p class="list-1">• <font class="red">This is red</font></p>
<p class="list-1">• <font class="tan">This is tan</font></p>
<p class="list-1">• <font class="white">This is white</font></p>
<p class="list-1">• <font class="yellow">This is yellow</font></p>
<p class="empty"> </p>
<p class="note">Obviously some colors will not contrast that well against this dark background but would look much better against a lighter background.</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="LinkColors">10.2.12 - Link Colors</h3>
<p class="empty"> </p>
<p>You may be contributing a guide that has people download a mod and you wish to color code them to indicate a special purpose. Maybe the file needs to be converted from Skyrim to Skyrim SE or maybe the mod has special install procedures that make it complicated for new users. Whatever the case may be there is a tag that you may use to indicate the link color.</p>
<p class="empty"> </p>
<pre>
{% raw %}{{a:green}}{% endraw %}</code> in the link's name field will be used to color the link green.
{% raw %}[[https://github.com/Sharlikran | The Link Text Will Be Green{{a:green}}]]{% endraw %}
</pre>
<p class="empty"> </p>
<p><a class="orange" href="https://sharlikran.github.io/" >This Link Text is Orange</a></p>
<p class="empty"> </p>
<p class="note">The tag must be with the link name or it will be ignored.</p>
<hr>
<h3 class="header3" id="LinkTitles">10.2.13 - Link Titles</h3>
<p>Link titles can be used to display a brief description about the link.</p>
<p class="empty"> </p>
<pre>
{% raw %}[[https://github.com/Sharlikran | The will be the Link Text{{title:This will be the brief description}}]]{% endraw %}
</pre>
<p class="empty"> </p>
<p><a href="https://github.com/Sharlikran" title="My modding autobiography and more info">Sharlikran</a></p>
<p class="empty"> </p>
<p class="note">The title text must be with the link name or it will be ignored.</p>
<hr>
<h3 class="header3" id="TooltipText">10.2.14 - Tooltip Text</h3>
<p>Tooltip text can be used to display extra information you want people to know and eliminate some clutter on the page.</p>
<p class="empty"> </p>
<pre>
{% raw %}{{tooltip:This is the text users will see. | This is the tooltip text.}}{% endraw %}
</pre>
<div class="tooltip"><p>This is the text users will see.</p>
<span class="tooltiptext">This is the tooltip text.</span>
</div>
<p class="empty"> </p>
<p class="note">Tooltips should be brief descriptions of the information and not long paragraphs.</p>
<hr>
<h3 class="header3" id="Html">10.2.15 - Html</h3>
<p class="list-1">• <i>Html tags work fine</i></p>
<p class="list-1">• <code>code tag has special formatting</code></p>
<p class="list-1">• <B><I>pre</I></B> tag is useful for code</p>
<pre>
begin widgetScript
short counter
end
</pre>
<p class="empty"> </p>
<p>Refrain from using too many HTML tags if you know the language well. If special styling is needed I can look into a way to provide additional options. However, I would like to keep this custom markdown language as simple as possible so it doesn't become another type of HTML.</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="Blockquote">10.2.16 - Blockquote</h3>
<p>To add a blockquote tag you will need to specify an author for the blockquote. To do so simply add the author name after the colon <code>:</code> symbol. This will be converted into the authors name and placed at the top of the blockquote.</p>
<p class="empty"> </p>
<pre>
[[bb:Quote]]
Example of text in a blockquote
[[be:]]
</pre>
<p class="empty"> </p>
<section class="quote">
<p class="attr">Quote</p>
<p class="list-1"> This is quoted text from another author.</p>
<p class="list-1"> You can also put a blockquote around text for other reasons.</p>
<p class="list-1"> The title of the blockquote can be assigned the author of the quote or even just the word Quote.</p>
</section>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="SpoilerTags">10.2.17 - Spoiler Tags</h3>
<p class="empty"> </p>
<p>To add a spoiler tag you will need to specify both an ID for the spoiler and the spoiler name separated with a pipe <code>|</code> symbol. This will connect the spoiler contents, name, and the button.</p>
<p class="empty"> </p>
{% raw %}<pre>
[[sb:Spoiler1 | Spoiler Name]]
Example of text in the spoiler tag
[[se:]]
</pre>{% endraw %}
<p class="empty"> </p>
<input type="checkbox" id="spoiler1" />
<label for="spoiler1">Spoiler Name</label>
<div class="main-content">
<p>Example of text in the spoiler tag</p>
</div>
<p class="empty"> </p>
<h3 class="header3" id="Notes">10.2.18 - Notes</h3>
<p class="empty"> </p>
<p>A note can be added simply by adding the note tag shown below.</p>
<p class="empty"> </p>
<pre>
{{note:Example of text for a note.}}
</pre>
<p class="empty"> </p>
<p class="note">The note will appear to the right of the image in a bordered box as shown.</p>
<p class="empty"> </p>
<h3 class="header3" id="OtherFormattingHTMLElements">10.2.19 - Other Formatting & HTML Elements</h3>
<p class="empty"> </p>
<p>GitHub uses Jekyll pages. It will process certain characters in an undesirable way. In a future version of pagebuilder I will try to automate this process. For now if you have any of the following characters you can use their HTML element so they are displayed correctly.</p>
<p class="empty"> </p>
<pre>
&#123; = {
&#125; = }
&#91; is for [
&#93; is for ]
&lt; is for <
&gt; is for >
</pre>
<p class="empty"> </p>
<p class="note">Blank lines can be used as spacers</p>
<p class="empty"> </p>
<hr>
<h3 class="header3" id="Comments">10.2.20 - Comments</h3>
<p class="empty"> </p>
<p>Wrye Text will allow a variation of C Language type comments. Comments will not be output to the final HTML file for the Wiki. Useful for remembering information you don't need to end up in the Wiki itself.</p>
<p class="empty"> </p>
<h4 class="header4" id="AllowedSyntax">Allowed Syntax</h4>
<p class="empty"> </p>
{% raw %}<pre>
/* comment goes here */
</pre>{% endraw %}
<p class="empty"> </p>
<p>OR</p>
<p class="empty"> </p>
{% raw %}<pre>
/*
comment goes here
*/
</pre>{% endraw %}
<p class="empty"> </p>
<p class="note">Comments inside of <code><pre></code> or preformatted text elements will not be treated as a comment. For now both single and multi line comments require a trailing <code>*/</code> or the HTML will not be generated properly.</p>
<p class="empty"> </p>
<h4 class="header4" id="InvalidSyntax">Invalid Syntax</h4>
<p class="empty"> </p>
{% raw %}<pre>
// This is a single line comment
</pre>{% endraw %}
<p class="empty"> </p>
<p>OR</p>
<p class="empty"> </p>
{% raw %}<pre>
* This is a bullet of something
* This is a link to a mod // This is a comment after the link
</pre>{% endraw %}
<p class="empty"> </p>
<h3 class="header3" id="Images">10.2.21 - Images</h3>
<p>I apologize for the rather cryptic way of doing this. I needed something easy to work with that didn't require a ridiculous amount of code.</p>
<h3 class="header3" id="AddinganImage">10.2.22 - Adding an Image</h3>
<p>The syntax for an image requires the name of the file and alternate text if the image is not showing.</p>
<p class="empty"> </p>
<h4 id="ExamplesyntaxforanImage">Example syntax for an Image</h4>
{% raw %}<pre>
{{image:pagebuilder.jpg | Page Builder Image}}
</pre>{% endraw %}
<p class="empty"> </p>
<h4 id="ExampleofanImage">Example of an Image</h4>
<p>{% include image.html file="img/pagebuilder.jpg" alt="Page Builder Image" %}</p>
<hr>
<h3 class="header3" id="AddinganImagewithaCaption">10.2.23 - Adding an Image with a Caption</h3>
<p>The syntax for an image with a caption requires the name of the file, alternate text, and a caption. The box for the caption will be the width of the image and will wordwrap.</p>
<p class="empty"> </p>
<h4 id="ExamplesyntaxforanImagewithCaption">Example syntax for an Image with Caption</h4>
{% raw %}<pre>
{{image-caption:pagebuilder.jpg | Page Builder Image | This is what the zip looks like}}
</pre>{% endraw %}
<p class="empty"> </p>
<h4 id="ExampleImagewithaCaption">Example Image with a Caption</h4>
<p>{% include image-caption.html file="img/pagebuilder.jpg" alt="Page Builder Image" caption="This is what the zip looks like" %}</p>
<hr>
<h3 class="header3" id="AddinganImagewithCaptionandHyperlink">10.2.24 - Adding an Image with Caption and Hyperlink</h3>
<p>The syntax for an image with a caption and a hyperlink will require five elements. The name of the file, alternate text, and a caption. In addition to that you need two elements for the hyperlink, the hyperlink itself and a name for the link. The box for the caption will be the width of the image and will wordwrap. The link will appear under the caption and will not be the width of the image.</p>
<p class="empty"> </p>
<h4 id="ExamplesyntaxImagewithaCaptionandHyperlink">Example syntax Image with a Caption and Hyperlink</h4>
{% raw %}<pre>
{{image-cap-url:pagebuilder.jpg | Page Builder Image | This is what the zip looks like | pagebuilder_v21.zip | Page Builder Zip}}
</pre>{% endraw %}
<p class="empty"> </p>
<h4 id="ExampleImagewithCaptionandHyperlink">Example Image with Caption and Hyperlink</h4>
<p>{% include image-caption-url.html file="img/pagebuilder.jpg" alt="Page Builder Image" caption="This is what the zip looks like" url="pagebuilder_v21.zip" urlname="Page Builder Zip" %}</p>
<hr>
<h3 class="header3" id="AddinganinlineImage">10.2.25 - Adding an inline Image</h3>
<p>You can use small inline images between {% include image-inline.html max-width="20px" file="img/Sqinter.png" alt="Wrye Avatar" %} text.</p>
<p class="empty"> </p>
<p>{% include image-inline.html max-width="20px" file="img/Sqdiscus.png" alt="Sqdiscus" %} You can also use a small icon at the beginning of a sentence using the inline image Wrye Tag.</p>
<p class="empty"> </p>
<p>Keep in mind you would want to use small images about 24 to 36 pixels or less. Using large inline {% include image-inline.html max-width="96px" file="img/wrye_monkey_96.png" alt="Wrye Avatar" %} images will look silly.</p>
<p class="empty"> </p>
<h4 id="Examplesyntaxforaninlineimage">Example syntax for an inline image</h4>
{% raw %}<pre>
{{inline:96px | wrye_monkey_96.png | Page Builder}}
</pre>{% endraw %}
<p class="empty"> </p>
<h4 id="Exampleofaninlineimage">Example of an inline image</h4>
<p>{% include image-inline.html max-width="96px" file="img/wrye_monkey_96.png" alt="Wrye Avatar" %} Wrye's Avatar</p>
<hr>
<div id="thislink"></div>
<h2 class="header2" id="Versions">10.3 - Versions</h2>
<p class="empty"> </p>
<h3 class="header3" id="2100Update2182020">10.3.1 - 21.00 Update [2/18/2020]</h3>
<p class="list-1">• released pagebuilder_v21.zip version 21</p>
<p class="list-2">• Added Tooltip Text</p>
<p class="list-2">• Added Link Titles</p>
<p class="empty"> </p>
<h3 class="header3" id="2000Update1272020">10.3.2 - 20.00 Update [1/27/2020]</h3>
<p class="list-1">• released pagebuilder_v20.zip version 20</p>
<p class="list-2">• More updates to how a paragraph is handeled.</p>
<p class="list-2">• An em dash is now represented by using -em- instead of two -- hyphens.</p>
<p class="list-2"> This was to fix converting a hyperlink with two -- into an em dash.</p>
<p class="list-2">• More adjustments to how hyperlinks are handeled. Removed replacement for <code>www.</code> because I don't think websites start with only that anymore.</p>
<p class="empty"> </p>
<h3 class="header3" id="1900Update1262020">10.3.3 - 19.00 Update [1/26/2020]</h3>
<p class="list-1">• released pagebuilder_v19.zip version 19</p>
<p class="list-2">• More updates to hyperlink functions.</p>
<p class="empty"> </p>
<h3 class="header3" id="1800Update1252020">10.3.4 - 18.00 Update [1/25/2020]</h3>
<p class="list-1">• released pagebuilder_v18.zip version 18</p>
<p class="list-2">• Fixed bug when compressing an internal link.</p>
<p class="list-2">• Added additional note syntax. See <a href="#Notes" >Notes</a></p>
<p class="empty"> </p>
<h3 class="header3" id="1700Update1252020">10.3.5 - 17.00 Update [1/25/2020]</h3>
<p class="list-1">• released pagebuilder_v17.zip version 17</p>
<p class="list-2">• Updated Regex for various thins to capture the text more accurately.</p>
<p class="list-2">• Updated link generation. (Provided it is valid to begin with)</p>
<p class="list-2">• Updated header renumbering to use altered header text instead of original text.</p>
<p class="list-2"> from when it was first captured.</p>
<p class="empty"> </p>
<h3 class="header3" id="1600Update1252020">16.00 Update [1/25/2020]</h3>
<p class="list-1">• released pagebuilder_v16.zip version 16</p>
<p class="list-2">• Remove and assign color better for links.</p>
<p class="list-2">• Handle Paragraphs Better.</p>
<p class="list-2">• Provide more control for Preformatted Blocks.</p>
<p class="empty"> </p>
<h3 class="header3" id="1500Update1242020">15.00 Update [1/24/2020]</h3>
<p class="list-1">• released pagebuilder_v15.zip version 15</p>
<p class="list-2">• Fixed bug in page auto renumbering when there is no number prefix for the filename.</p>
<p class="empty"> </p>
<h3 class="header3" id="1400Update1222020">14.00 Update [1/22/2020]</h3>
<p class="list-1">• released pagebuilder_v14.zip version 14</p>
<p class="list-2">• Updated builder to auto renumber page.</p>
<p class="list-2">• Numbering is based on the number prefix of the file name.</p>
<p class="empty"> </p>
<h3 class="header3" id="1300Update1212020">13.00 Update [1/21/2020]</h3>
<p class="list-1">• released pagebuilder_v13.zip version 13</p>
<p class="list-2">• Added syntax for Navigation Buttons.</p>
<p class="empty"> </p>
<div>
<a href="#NavigationButtons" class="drkbtn">See Navigation Buttons</a>
</div>
<p class="empty"> </p>
<h3 class="header3" id="1200Update1192020">12.00 Update [1/19/2020]</h3>
<p class="list-1">• released pagebuilder_v12.zip version 12</p>
<p class="list-2">• Updated builder for Table Of Contents</p>
<p class="empty"> </p>
<h3 class="header3" id="1100Update1182020">11.00 Update [1/18/2020]</h3>
<p class="list-1">• released pagebuilder_v11.zip version 11</p>
<p class="list-2">• Added navigation anchor see <a href="#ExtraNavigation" >ExtraNavigation</a></p>
<p class="empty"> </p>
<h3 class="header3" id="1000Update1182020">10.00 Update [1/18/2020]</h3>
<p class="list-1">• released pagebuilder_v10.zip version 10</p>
<p class="list-2">• Removed max-width from images except inline images</p>
<p class="empty"> </p>
<h3 class="header3" id="900Update1172020">9.00 Update [1/17/2020]</h3>
<p class="list-1">• released pagebuilder_v9.zip version 9</p>
<p class="list-2">• Added image Wrye Tags see <a href="#Images" >Images</a></p>
<p class="list-2">• Updated CSS for user page builder</p>
<p class="empty"> </p>
<h3 class="header3" id="800Update1162020">8.00 Update [1/16/2020]</h3>
<p class="list-1">• released pagebuilder_v8.zip version 8</p>
<p class="list-2">• Updated CSS to reflect changes</p>
<p class="list-2">• Added Pagetitle to Pseudo Page Header</p>
<p class="empty"> </p>
<h3 class="header3" id="700Update1152020">7.00 Update [1/15/2020]</h3>
<p class="list-1">• released pagebuilder_v7.zip version 7</p>
<p class="list-2">• Added a Blockquote Tag see <a href="#Blockquote" >Blockquote</a></p>
<p class="list-2">• Font and Code tags at the start of a line were not assigned a paragraph marker and thus not indenting.</p>
<p class="empty"> </p>
<h3 class="header3" id="600Update1112020">6.00 Update [1/11/2020]</h3>
<p class="list-1">• released pagebuilder_v6.zip version 6</p>
<p class="list-2">• Alter spoiler button to expand its width when there is more text</p>
<p class="empty"> </p>
<h3 class="header3" id="500Update1112020">5.00 Update [1/11/2020]</h3>
<p class="list-1">• released pagebuilder_v5.zip version 5</p>
<p class="list-2">• Fixed a bug in changing color for Internal Links</p>
<p class="empty"> </p>
<h3 class="header3" id="400Update1102020">4.00 Update [1/10/2020]</h3>
<p class="list-1">• released pagebuilder_v4.zip version 4</p>
<p class="list-2">• Added Spoiler Tags see <a href="#SpoilerTags" >SpoilerTags</a></p>
<p class="empty"> </p>
<h3 class="header3" id="300Update1102020">3.00 Update [1/10/2020]</h3>
<p class="list-1">• released pagebuilder_v3.zip version 3</p>
<p class="list-2">• Added C Language type comments see <a href="#Comments" >Comments</a></p>
<p class="empty"> </p>
<h3 class="header3" id="200Update182020">2.00 Update [1/8/2020]</h3>
<p class="list-1">• released pagebuilder_v2.zip version 2</p>
<p class="list-2">• Only the site CSS will be used to illustrate what the finished HTML should look like. Removed the ability to use alternate CSS for end user.</p>
<p class="empty"> </p>
<h3 class="header3" id="100Update172020">1.00 Update [1/7/2020]</h3>
<p class="list-1">• released pagebuilder_v1.zip version 1</p>
<p class="list-2">• This version has a new file in it <code>wtxt-wiki-user.py</code>. That is the file you will use if you want to see what your page will look like once converted to use on the website.</p>
<p class="empty"> </p>
<h3 class="header3" id="000InitialRelease112020">0.00 Initial Release [1/1/2020]</h3>
<p class="list-1">• released pagebuilder.zip version 0</p>
<h2 class="header2" id="OptionalRequirement">10.4 - Optional Requirement</h2>
<p class="list-1">• To generate the HTML files you will need the latest python from Python.org. These files are written for 2.7.x and the current Python 2.7.17 will work just fine. The link is for the 32 bit version. Please download that because the setup will go smoother and add needed configurations to your computer to run the python scripts provided.</p>
<p class="list-1">• Below is a link to Python 2.7.17 and a link to the pagebuilder script and sample file you can generate right away to see it working.</p>
<p class="list-1">• <a href="https://www.python.org/ftp/python/2.7.17/python-2.7.17.msi" >Download Python 2.7.17</a></p>
<p class="empty"> </p>
<h3 class="header3" id="PythonInstallation">10.4.1 - Python Installation</h3>
<h3 id="WherearethefilesIjustdownloaded">10.4.2 - Where are the files I just downloaded?</h3>
<p class="list-1">• The files usually end up in your windows Downloads folder as shown below.</p>
<p>{% include image.html file="img/downloadedfiles.jpg" alt="Downloaded Files" %}</p>
<p class="list-1">• Open your windows explorer and on the left navigate to your Downloads folder.</p>
<p class="list-1">• First you will install Python and then be shown where to put the Python scripts and example files.</p>
<h3 id="InstallingPython">10.4.3 - Installing Python</h3>
<p class="list-1">• Your version of python will be different then show here. What is important is the install location. Leave it at the default settings so that you can follow the instructions for building HTML files with Python.</p>
<p>{% include image.html file="img/pythoninstall.jpg" alt="Python Install" %}</p>
<p class="list-1">• The Python installation will be very simple, just click next and leave all the default settings.</p>
<h3 id="InstallingPythonscriptforuse">10.4.4 - Installing Python script for use</h3>
<p class="list-1">• Once installed Python you will need to unzip the python script and sample text file used to build the html file.</p>
<p class="list-1">• These are really not installed on your system automatically so we will be copying them.</p>
<p class="list-1">• Windows should have a way to open this type of zip file itself but if needed you can download 7zip from <a href="https://www.7-zip.org/" >7-zip.org</a>. It is safe, free and, easy to use.</p>
<p>{% include image.html file="img/unzipfiles.jpg" alt="Unzip Files" %}</p>
<p class="list-1">• To unzip file files simply right click on them and choose <code>Extract to "pagebuilder\"</code></p>
<p>{% include image.html file="img/copyfolder.jpg" alt="Copy Folder" %}</p>
<p class="list-1">• Now we will be copying the files to a more convenient location to run them easily. If left in the Downloads folder or copied onto the Desktop to run the script means you will have to type in command similar to this. <code>C:\Python27\python.exe C:\Users\[username]\Downloads\pagebuilder\wtxt-wiki-user.py genHtml "Wiki Page Template.txt"</code>. While not difficult we will simplify that some to make it easier.</p>
<p class="list-1">• Right click the <code>pagebuilder</code> folder and, choose Copy</p>
<p>{% include image.html file="img/choosecopy.jpg" alt="Choose Copy" %}</p>
<p class="list-1">• Navigate to the C Drive</p>
<p>{% include image.html file="img/gotocdrive.jpg" alt="Choose C Drive" %}</p>
<p class="list-1">• Right click in an empty space and, choose Paste.</p>
<p>{% include image.html file="img/choosepaste.jpg" alt="Choose Paste" %}</p>
<p class="list-1">• Once copied to the C: drive double click the pagebuilder folder and you should see the example file and the Python script</p>
<p>{% include image.html file="img/copiedforuse.jpg" alt="Pagebuilder Copied" %}</p>
<p class="list-1">• To run python and process the example file you need to open a command prompt since Python does not have its own GUI interface.</p>
<p class="list-1"> Type <code>cmd</code> in the red box, and right click <code>cmd.exe</code> and choose "Run As Administrator" as shown in the green box.</p>
<p>{% include image.html file="img/opencommand.jpg" alt="Open CMD Prompt" %}</p>
<p class="list-1"> Which will look like this once it's open</p>
<p>{% include image.html file="img/commandopen.jpg" alt="CMD Prompt Open" %}</p>
<p class="list-1"> As mentioned we needed to put that folder somewhere so that there would be less typing.</p>
<p class="list-1"> As shown type <code>cd c:\pagebuilder</code> and press <code>[ENTER]</code></p>
<p>{% include image.html file="img/changedir.jpg" alt="Change Directory" %}</p>
<p class="list-1"> Now we will run the python script to produce a sample HTML output so you can see a close version of what will be in the wiki.</p>
<p class="list-1"> As shown type <code>c:\python27\python.exe wtxt-wiki-user.py genHtml "Wiki Page Template.txt"</code> and press <code>[ENTER]</code></p>
<p>{% include image.html file="img/runpython.jpg" alt="Run Python" %}</p>
<p class="list-1"> There were no errors and now <code>Wiki Page Template.html</code> appears in the <code>pagebuilder</code> folder.</p>
<p>{% include image.html file="img/outputhtml.jpg" alt="Output HTML" %}</p>
<p class="list-1"> Double click <code>Wiki Page Template.html</code> and you will see more or less what the page would look like.</p>
<p>{% include image.html file="img/examplehtml.jpg" alt="Example HTML" %}</p>
<p class="empty"> </p>
<p>Add the content you wish to add, regenerating the HTML as you go and, you are on your way to producing content for the wiki.</p>
<p class="empty"> </p>
<h2 class="header2" id="ReuseandCredits">10.5 - Reuse and Credits</h2>
<p class="empty"> </p>
<h3 class="header3" id="LicenseWML10ModifyandRedistributeShareAlike">10.5.1 - License: WML 1.0 Modify and Redistribute, Share Alike</h3>
<p class="list-1">• You are free to redistribute this work in unmodified form.</p>
<p class="list-1">• You are free to modify and re-distribute this work, so long as you: 1) give the author(s) credit proportional to their contribution to the final work, 2) distribute the final work under the same terms, and 3) make artistic resources included with the final work available under these same terms.</p>
<p class="empty"> </p>
<h3 class="header3" id="Credits">10.5.2 - Credits</h3>
<p class="list-1">• <B><I>Wrye</I></B>, for creating this markdown language</p>
</div>