Skip to content

Commit cd1c06c

Browse files
committed
Update to current version
1 parent 62e9ff1 commit cd1c06c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+140
-47
lines changed

examples/storyteller/README.md

Lines changed: 5 additions & 0 deletions
5.41 KB
5.3 KB

examples/storyteller/icons/home.png

8.61 KB

examples/storyteller/icons/info.png

14.1 KB

examples/storyteller/index.html

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,19 @@
77

88
<body>
99

10-
<pre id="storyteller-branch" style="display:none">dev</pre>
11-
<pre id="storyteller-stories" style="display:none">stories</pre>
10+
<pre id="storyteller-stories" style="display:none">storyteller</pre>
1211
<pre id="easycoder-script" style="display:none">
1312

1413
script Boot
15-
pre Branch
16-
variable B
1714
variable Script
18-
attach Branch to `storyteller-branch`
19-
put the content of Branch into B
20-
require js `https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io@` cat B cat `/dist/plugins/showdown.js?v=200413`
21-
rest get Script from `https://cdn.jsdelivr.net/gh/easycoder/storyteller@` cat B cat `/storyteller.txt?v=200413`
15+
require js `https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/plugins/showdown.js?v=200825`
16+
rest get Script from `https://cdn.jsdelivr.net/gh/easycoder/storyteller/storyteller.txt?v=200825`
17+
! rest get Script from `/storyteller.txt`
2218
run Script
2319

2420
</pre>
2521

26-
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=200413'></script>
22+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=2.7.3'></script>
2723

2824
</body>
2925
</html>

examples/storyteller/stories/GetStoryteller/source.txt renamed to examples/storyteller/storyteller/GetStoryteller/content.txt

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
Source code of the 'Setting up' page
2-
3-
Below the line is the page source as typed by the site author.
4-
-----------------------------------------------------------------------------------------------------------
51
Links: ~select:-:Select a subject!selected disabled hidden|S-Structure:The structure of a Storyteller website|S-Markdown:Using Markdown|S-Images:Handling images~~space:3~Next: ~sid:Structure:Website structure~
62

73
# How to set up a Storyteller website
@@ -10,7 +6,7 @@ There are two ways to use Storyteller:
106

117
1. Open a Neocities account and build your site using the instructions below.
128

13-
1. Download Storyteller files from the [Storyteller repository](https://github.com/easycoder/storyteller) and copy them to your server. This is the option for advanced users.
9+
1. Download Storyteller files from the [repository](https://github.com/easycoder/easycoder.github.io/tree/master/storyteller) and copy them to your server. This is the option for people who have direct access to their own websites.
1410

1511
## Setting up using Neocities
1612

@@ -30,19 +26,18 @@ Once you have chosen your name your website will be live and can be seen by anyo
3026

3127
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
3228
<hr>
33-
3429
```
3530
<html>
3631
<head>
3732
<meta charset="UTF-8">
3833
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3934
<title></title>
40-
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/storyteller/storyteller.js'></script>
4135
</head>
4236

4337
<body>
4438

45-
<pre id="storyteller-branch">master</pre>
39+
<pre id="storyteller-branch" style="display:none">master</pre>
40+
<pre id="storyteller-stories" style="display:none">(Name-of-my-stories-folder)</pre>
4641
<pre id="easycoder-script" style="display:none">
4742

4843
script Boot
@@ -51,20 +46,31 @@ Once you have chosen your name your website will be live and can be seen by anyo
5146
variable Script
5247
attach Branch to `storyteller-branch`
5348
put the content of Branch into B
54-
rest get Script from `https://cdn.jsdelivr.net/gh/easycoder/storyteller@` cat B cat `/storyteller.txt`
49+
require js `https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io@` cat B cat `/dist/plugins/showdown.js?v=200413`
50+
rest get Script from `https://cdn.jsdelivr.net/gh/easycoder/storyteller@` cat B cat `/storyteller.txt?v=200413`
5551
run Script
5652

5753
</pre>
5854

55+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=200413'></script>
56+
5957
</body>
6058
</html>
6159
```
6260
<hr>
63-
Now carefully follow these steps:
61+
That's the file that will run when your site is loaded; apart from the name of the stories folder it's the same for all StoryTeller websites. What follows next is all the stuff that makes your own site distictive. Carefully follow these steps:
6462

65-
1. Click the `New Folder` button and type the name `stories`.
63+
1. Click the `Edit` button for `index.html`.
64+
65+
1. Find the text `(Name-of-my-stories-folder)` and replace it (the text and the 2 brackets) with a name you will use for your stories folder. The name can be anything you like (but no spaces, please) so make it appropriate. For example, if you are writing about holidays you could call it `MyHolidays`.
66+
67+
1. Click `Save`.
68+
69+
1. Back out of the editor to the Dashboard.
70+
71+
1. Click the `New Folder` button and type the name you just gave for your stories. This folder is where you will keep all your story files.
6672

67-
1. Click its name (`stories`) to go into the folder.
73+
1. Click its name to go into your stories folder.
6874

6975
1. Click `New File` and type the name `title.txt`. Click `Create`.
7076

@@ -123,4 +129,4 @@ You can do all your editing in Neocities using their built-in editor or you can
123129

124130
~sid:Images:Handling images~
125131

126-
[Click here to see the source code for this page(/stories/GetStoryteller/source.txt)
132+
[Click here to see the source code for this page](/storyteller/GetStoryteller/source.txt)

examples/storyteller/stories/GetStoryteller/content.txt renamed to examples/storyteller/storyteller/GetStoryteller/source.txt

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
Source code of the 'Setting up' page
2+
3+
Below the line is the page source as typed by the site author.
4+
-----------------------------------------------------------------------------------------------------------
15
Links: ~select:-:Select a subject!selected disabled hidden|S-Structure:The structure of a Storyteller website|S-Markdown:Using Markdown|S-Images:Handling images~~space:3~Next: ~sid:Structure:Website structure~
26

37
# How to set up a Storyteller website
@@ -58,7 +62,7 @@ Once you have chosen your name your website will be live and can be seen by anyo
5862
</html>
5963
```
6064
<hr>
61-
Now carefully follow these steps:
65+
That's the file that will run when your site is loaded; apart from the name of the stories folder it's the same for all StoryTeller websites. What follows next is all the stuff that makes your own site distictive. Carefully follow these steps:
6266

6367
1. Click the `Edit` button for `index.html`.
6468

examples/storyteller/stories/Markdown/source.txt renamed to examples/storyteller/storyteller/Markdown/content.txt

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
Source code of the 'Markdown' page
2-
3-
Below the line is the page source as typed by the site author.
4-
-----------------------------------------------------------------------------------------------------------
51
Links: ~select:-:Select a subject!selected disabled hidden|S-GetStoryteller:Getting started with Storyteller|S-Structure:The structure of a Storyteller website|S-Images:Handling images~~space:3~Next: ~sid:Images:Handling images~
62

73
# Using Markdown in Storyteller
@@ -16,20 +12,17 @@ Storyteller adds custom enhancements to Markdown, to do things that would be imp
1612

1713
- &#126;`tid:{name}:{link text}`&#126; sets up a hyperlink that when the user clicks it the page changes to the Topic whose name is `{name}` in the current Subject. In this case the `.txt` part of the name is omitted. As with `sid`, id the colon and the second part are omitted the system will use the same text for both.
1814

19-
- &#126;`img:{url}:{class}!{options}`&#126; Although standard Markdown has markup to add an image, this takes it further. The first part, `{url}` is the URL of the image. If this begins with `http` it's taken to be an external image at the full path given. If not, then it's assumed to be an image in the `images` folder of the current Subject. So the images for each Subject are independent.
15+
- &#126;`stid:{subject}/{topic}:{link text}`&#126; sets up a hyperlink that when the user clicks it the page changes to the Subject and Topic whose names are `{subject}` and `{topic}`. This lets you link to anywhere in the entire page structure.
16+
17+
- &#126;`img:{url}:{styles}!{options}`&#126; Although standard Markdown has markup to add an image, this takes it further. The first part, `{url}` is the URL of the image. If this begins with `http` it's taken to be an external image at the full path given. If not, then it's assumed to be an image in the `images` folder of the current Subject. So the images for each Subject are independent.
2018

21-
The second part, `class`, separated from the first part by a colon, is a list of space-delimited styles you want to apply to the image, for example to have it float left or right, add a border around it or whatever. The current list of styles available are:
19+
The second part, `styles`, separated from the first part by a colon, is a list of space-delimited styles you want to apply to the image, for example to have it float left or right, add a border around it or whatever. The current list of styles available are:
2220
- `border` Place a thin border around the image
2321
- `left` Make the image float to the left
2422
- `right` Make the image float to the right
2523
- `center` Make the image sit in the middle of the page
2624
- `clear` Make the image sit below anything else already on the page
27-
- `10%` Make the width of the image 10% of the page
28-
- `25%` Make the width of the image 25% of the page
29-
- `33%` Make the width of the image 33% of the page
30-
- `50%` Make the width of the image 50% of the page
31-
- `90%` Make the width of the image 90% of the page
32-
- `100%` Make the width of the image 100% of the page
25+
- `<w>%` Make the width of the image &lt;w&gt;% of the page width, e.g. 10%, 25%, 50% etc.
3326

3427
The final part is optional. When used, an exclamation mark is followed by a list of options. At present there is only one; `nolink`. The standard behavior of a link is to display it as a bigger image when the user clicks it. If you don't want this to happen, use `nolink`.
3528

@@ -53,12 +46,12 @@ Storyteller adds custom enhancements to Markdown, to do things that would be imp
5346

5447
As well as content, the page style itself is also a variable. At present we have a single style, that of a bordered page. In future we'll add a convential scrolling page option too. There's also the theme, being the appearance and size of the border. This only applies to the _bordered_ style; scrolling pages may well have their own themes in due course. We'll be offering a selection of themes that you can try out here or even in your own page. To do this you need a special Markdown tag, as follows:
5548

56-
- &#126;`theme:{prompt}`&#126; invokes the theme selector. If you choose a theme from the list offered it overrides the one named in your `theme.txt` file, but only for your current browser and computer. Nobody else is affected. If that's not clear, try it and see by clicking ~theme:here~.
49+
- &#126;`theme:{prompt}`&#126; invokes the theme selector. If you choose a theme from the list offered it overrides the one named in your `theme.txt` file, but only for your current browser and computer. Nobody else is affected. If that's not clear, try it and see by clicking ~theme:here~. You may have to refresh your browser to see the new theme properly.
5750

5851
~sid:GetStoryteller:Getting started with Storyteller~
5952

6053
~sid:Structure:The structure of a Storyteller website~
6154

6255
~sid:Images:Handling images~
6356

64-
[Click here to see the source code for this page](/stories/Markdown/source.txt)
57+
[Click here to see the source code for this page](/storyteller/Markdown/source.txt)

examples/storyteller/stories/Markdown/content.txt renamed to examples/storyteller/storyteller/Markdown/source.txt

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
Source code of the 'Markdown' page
2+
3+
Below the line is the page source as typed by the site author.
4+
-----------------------------------------------------------------------------------------------------------
15
Links: ~select:-:Select a subject!selected disabled hidden|S-GetStoryteller:Getting started with Storyteller|S-Structure:The structure of a Storyteller website|S-Images:Handling images~~space:3~Next: ~sid:Images:Handling images~
26

37
# Using Markdown in Storyteller
@@ -12,20 +16,15 @@ Storyteller adds custom enhancements to Markdown, to do things that would be imp
1216

1317
- &#126;`tid:{name}:{link text}`&#126; sets up a hyperlink that when the user clicks it the page changes to the Topic whose name is `{name}` in the current Subject. In this case the `.txt` part of the name is omitted. As with `sid`, id the colon and the second part are omitted the system will use the same text for both.
1418

15-
- &#126;`img:{url}:{class}!{options}`&#126; Although standard Markdown has markup to add an image, this takes it further. The first part, `{url}` is the URL of the image. If this begins with `http` it's taken to be an external image at the full path given. If not, then it's assumed to be an image in the `images` folder of the current Subject. So the images for each Subject are independent.
19+
- &#126;`img:{url}:{styles}!{options}`&#126; Although standard Markdown has markup to add an image, this takes it further. The first part, `{url}` is the URL of the image. If this begins with `http` it's taken to be an external image at the full path given. If not, then it's assumed to be an image in the `images` folder of the current Subject. So the images for each Subject are independent.
1620

17-
The second part, `class`, separated from the first part by a colon, is a list of space-delimited styles you want to apply to the image, for example to have it float left or right, add a border around it or whatever. The current list of styles available are:
21+
The second part, `styles`, separated from the first part by a colon, is a list of space-delimited styles you want to apply to the image, for example to have it float left or right, add a border around it or whatever. The current list of styles available are:
1822
- `border` Place a thin border around the image
1923
- `left` Make the image float to the left
2024
- `right` Make the image float to the right
2125
- `center` Make the image sit in the middle of the page
2226
- `clear` Make the image sit below anything else already on the page
23-
- `10%` Make the width of the image 10% of the page
24-
- `25%` Make the width of the image 25% of the page
25-
- `33%` Make the width of the image 33% of the page
26-
- `50%` Make the width of the image 50% of the page
27-
- `90%` Make the width of the image 90% of the page
28-
- `100%` Make the width of the image 100% of the page
27+
- `<w>%` Make the width of the image &lt;w&gt;% of the page width, e.g. 10%, 25%, 50% etc.
2928

3029
The final part is optional. When used, an exclamation mark is followed by a list of options. At present there is only one; `nolink`. The standard behavior of a link is to display it as a bigger image when the user clicks it. If you don't want this to happen, use `nolink`.
3130

@@ -49,7 +48,7 @@ Storyteller adds custom enhancements to Markdown, to do things that would be imp
4948

5049
As well as content, the page style itself is also a variable. At present we have a single style, that of a bordered page. In future we'll add a convential scrolling page option too. There's also the theme, being the appearance and size of the border. This only applies to the _bordered_ style; scrolling pages may well have their own themes in due course. We'll be offering a selection of themes that you can try out here or even in your own page. To do this you need a special Markdown tag, as follows:
5150

52-
- &#126;`theme:{prompt}`&#126; invokes the theme selector. If you choose a theme from the list offered it overrides the one named in your `theme.txt` file, but only for your current browser and computer. Nobody else is affected. If that's not clear, try it and see by clicking ~theme:here~.
51+
- &#126;`theme:{prompt}`&#126; invokes the theme selector. If you choose a theme from the list offered it overrides the one named in your `theme.txt` file, but only for your current browser and computer. Nobody else is affected. If that's not clear, try it and see by clicking ~theme:here~. You may have to refresh your browser to see the new theme properly.
5352

5453
~sid:GetStoryteller:Getting started with Storyteller~
5554

examples/storyteller/stories/home/content.txt renamed to examples/storyteller/storyteller/home/content.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Storyteller is a software toolkit for building websites that are mainly text wit
66

77
~img:demo0.jpg:right 25%~Personal/family histories and other forms of legacy website need to continue after the author has moved on or died and it often cannot be guaranteed that anyone will pay for hosting. Other good subjects for this kind of presentation are instruction manuals - such as for car maintenance - and cooking or gardening guides. Once created, these sites rarely need changing.
88

9-
~img:demo3.jpg:left 25%~No programming experience is needed to build pages yourself using Storyteller; not even of HTML. If you can use a word processor you already have all the skills needed. Everything is done with "Markdown", a much simpler coding system that is mostly plain text, with a few special symbols used to create headings, link to other pages, call external websites and so on. All this is documented here.
9+
~img:demo3.jpg:left 25%~No programming experience is needed to build pages yourself using Storyteller; not even of HTML. If you can use a word processor you already have all the skills needed. Virtually everything is done with "Markdown", a much simpler coding system that is mostly plain text, with a few special symbols used to create headings, link to other pages, call external websites and so on. All this is documented here.
1010

1111
~img:demo5.jpg:right 25%~ In these pages we will show you how to quickly setup a free website on [Neocities](https://neocities.org) to supply information on any subject you choose. Storyteller is for _authors_; people with something to say who need a simple way to get their message out rather than getting bogged down in Web technologies.
1212

16.1 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":1,
5+
"border-t":1,
6+
"border-r":3,
7+
"border-b":3,
8+
"font-scale":42
9+
}
2.91 KB
79.9 KB
530 KB
142 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":14,
5+
"border-t":20,
6+
"border-r":14,
7+
"border-b":15,
8+
"font-scale":26
9+
}
146 KB
84.7 KB
2.21 MB
2.27 MB
Binary file not shown.
135 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":8,
5+
"border-t":8,
6+
"border-r":10,
7+
"border-b":11,
8+
"font-scale":40
9+
}
82.3 KB
2.26 KB
2.26 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":1,
5+
"border-t":1,
6+
"border-r":1,
7+
"border-b":1,
8+
"font-scale":40
9+
}
2.26 KB
17.9 KB
51.5 KB
28.5 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":10,
5+
"border-t":10,
6+
"border-r":10,
7+
"border-b":10,
8+
"font-scale":40
9+
}
17.8 KB
Binary file not shown.
3.65 KB
2.27 MB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":6,
5+
"border-t":6,
6+
"border-r":8,
7+
"border-b":15,
8+
"font-scale":40
9+
}
89.6 KB
2.21 MB
Binary file not shown.
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
storyteller
2+
grass
3+
herbal
4+
pencil
5+
thin-gold
6+
wood1
7+
wood2
8+
none
6.72 KB
31.4 KB
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"style":"bordered",
3+
"aspect-w":4,
4+
"aspect-h":3,
5+
"border-l":3,
6+
"border-t":4,
7+
"border-r":4,
8+
"border-b":6,
9+
"font-scale":40
10+
}
3.22 KB
37.7 KB
122 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":13,
5+
"border-t":18,
6+
"border-r":13,
7+
"border-b":18,
8+
"font-scale":30
9+
}
39 KB
1.55 MB
11.9 KB
35.6 KB
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"aspect-w":4,
3+
"aspect-h":3,
4+
"border-l":7,
5+
"border-t":9,
6+
"border-r":7,
7+
"border-b":11,
8+
"font-scale":40
9+
}
12 KB
3.99 MB

0 commit comments

Comments
 (0)