Skip to content

Commit 8169e42

Browse files
graham-trottgraham-trott
committed
Rework demos
1 parent 936c2b2 commit 8169e42

File tree

25 files changed

+653
-0
lines changed

25 files changed

+653
-0
lines changed

‎demos/storyteller/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title></title>
6+
</head>
7+
8+
<body>
9+
10+
<pre id="storyteller-branch" style="display:none">dev</pre>
11+
<pre id="storyteller-stories" style="display:none">stories</pre>
12+
<pre id="easycoder-script" style="display:none">
13+
14+
script Boot
15+
pre Branch
16+
variable B
17+
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`
22+
run Script
23+
24+
</pre>
25+
26+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=200413'></script>
27+
28+
</body>
29+
</html>

‎demos/storyteller/stories/GetStoryteller/content.txt

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
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~
2+
3+
# How to set up a Storyteller website
4+
5+
There are two ways to use Storyteller:
6+
7+
1. Open a Neocities account and build your site using the instructions below.
8+
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.
10+
11+
## Setting up using Neocities
12+
13+
Start by opening a [Neocities](https://neocities.org) account. This is pretty simple; the main thing is to decide what you want to call your website and hope nobody else has already taken that name.
14+
15+
Once you have chosen your name your website will be live and can be seen by anyone who knows its name. All editing of your site is done in the Neocities online editor, so go into that. You'll see some standard files as supplied by the Neocities registration robot. Follow these simple steps:
16+
17+
1. Delete all the files and folders listed except `index.html`.
18+
19+
1. Click the `Edit` button to edit the `index.html` file.
20+
21+
1. Delete its existing contents.
22+
23+
1. Copy the HTML text below (between the horizontal lines) and paste it into the editor.
24+
25+
1. Click `Save`.
26+
27+
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
28+
<hr>
29+
```
30+
<html>
31+
<head>
32+
<meta charset="UTF-8">
33+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
34+
<title></title>
35+
</head>
36+
37+
<body>
38+
39+
<pre id="storyteller-branch" style="display:none">master</pre>
40+
<pre id="storyteller-stories" style="display:none">(Name of my stories folder)</pre>
41+
<pre id="easycoder-script" style="display:none">
42+
43+
script Boot
44+
pre Branch
45+
variable B
46+
variable Script
47+
attach Branch to `storyteller-branch`
48+
put the content of Branch into B
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`
51+
run Script
52+
53+
</pre>
54+
55+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=200413'></script>
56+
57+
</body>
58+
</html>
59+
```
60+
<hr>
61+
Now carefully follow these steps:
62+
63+
1. Click the `Edit` button for `index.html`.
64+
65+
1. Find the text `(Name of my stories folder)` and replace it (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.
72+
73+
1. Click its name to go into your stories folder.
74+
75+
1. Click `New File` and type the name `title.txt`. Click `Create`.
76+
77+
1. Click `Edit` against the new file.
78+
79+
1. Type the name of your website as you'd like it to appear in the title bar of the browser.
80+
81+
1. Click `Save`.
82+
83+
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
84+
85+
1. Click `New File` and type the name `theme.txt`. Click `Create`.
86+
87+
1. Click `Edit` against the new file.
88+
89+
1. Type the name of a theme chosen from this list of those currently available:
90+
91+
- `storyteller`, the theme used by this site, with a scroll border and blue sky header
92+
93+
- `grass`, lush border of thick grass
94+
95+
- `herbal`, which has a border of what looks like short grass
96+
97+
- `pencil`, a border design made of 2 pencils bent into a frame
98+
99+
- `thin-gold`, a thin gold frame
100+
101+
- `wood1`, a thick wooden frame
102+
103+
- `wood2`, a much thinner wooden frame
104+
105+
1. Click `Save`.
106+
107+
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
108+
109+
You now have an empty Storyteller website, so now you can actually start building your own website. The way it works is that inside the `stories` folder you can have any number of _subject_ folders, each handling one or more pages on your site. Each of these folders has inside it another folder for any images that will be used by that subject, plus 2 text files:
110+
111+
- `title.txt` - holds the text of the title that will appear at the top of the page (here it's `Starting Storyteller`).
112+
- `content.txt` - holds the content of your page, which is text plus images, where the images are not directly embedded but are referred to by their names in the `images` folder.
113+
114+
The system always starts off by looking in the subject folder whose name is `home`, so create a folder called `home` inside your stories folder. Inside this create the `images` folder and the `title.txt` and `content.txt` text files. Click the `Edit` button for `title.txt`, type the title of your website and save it. Then click the `Edit` button for `content.txt` and type a couple of short paragraphs - anything you like just to test the system. Save this file.
115+
116+
Each Subject starts off with just the one topic (`content.txt`) but you can add as many more as you like. For example, if you want to write a page about a holiday in India you might call it `India.txt`. There'a full description of all this on our ~sid:Structure~ page.
117+
118+
Now you can view your website by clicking the big box at the top left of the editor screen or the site title to its right. Your content with the title you chose should appear in a new browser window. It it doesn't, look carefully at all the files and make any necessary corrections. On our ~sid:info~ page you'll see contact details if you need to ask questions.
119+
120+
The best way to learn is often by following examples. So at the bottom of each of these pages you'll see a link that when clicked opens a page containing the _source code_ of the page; in other words what the author of the page was working with. You can use this to check on the precise syntax of any feature such as a right-aligned image or a drop-down list.
121+
122+
Sometimes your browser may not notice you have made changes to your website and will continue to show you the old version. This is rather annoying and to get round it you will need to learn how to clear the browser cache. This process varies from browser to browser but Google will be able to tell you how to do it. Just search for _firefox clear cache_ or _chrome clear cache_ etc.
123+
124+
You can do all your editing in Neocities using their built-in editor or you can maintain a corresponding set of files on your computer and upload each one after making changes. If you understand the processes involved you can also run a copy of the website on your own computer by using the `rest.py` webserver provided in our [Github repository](https://github.com/easycoder/storyteller), which makes for a quicker way to make changes and test them before uploading to the live site. (You will also need to download `bottle.py` for this to work.)
125+
126+
~sid:Structure:The structure of a Storyteller website~
127+
128+
~sid:Markdown:Using Markdown in Storyteller~
129+
130+
~sid:Images:Handling images~
131+
132+
[Click here to see the source code for this page](/storyteller/GetStoryteller/source.txt)

‎demos/storyteller/stories/GetStoryteller/source.txt

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
Source code of the 'Setting up' page
2+
3+
Below the line is the page source as typed by the site author.
4+
-----------------------------------------------------------------------------------------------------------
5+
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~
6+
7+
# How to set up a Storyteller website
8+
9+
There are two ways to use Storyteller:
10+
11+
1. Open a Neocities account and build your site using the instructions below.
12+
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.
14+
15+
## Setting up using Neocities
16+
17+
Start by opening a [Neocities](https://neocities.org) account. This is pretty simple; the main thing is to decide what you want to call your website and hope nobody else has already taken that name.
18+
19+
Once you have chosen your name your website will be live and can be seen by anyone who knows its name. All editing of your site is done in the Neocities online editor, so go into that. You'll see some standard files as supplied by the Neocities registration robot. Follow these simple steps:
20+
21+
1. Delete all the files and folders listed except `index.html`.
22+
23+
1. Click the `Edit` button to edit the `index.html` file.
24+
25+
1. Delete its existing contents.
26+
27+
1. Copy the HTML text below (between the horizontal lines) and paste it into the editor.
28+
29+
1. Click `Save`.
30+
31+
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
32+
<hr>
33+
34+
```
35+
<html>
36+
<head>
37+
<meta charset="UTF-8">
38+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
39+
<title></title>
40+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/easycoder/storyteller/storyteller.js'></script>
41+
</head>
42+
43+
<body>
44+
45+
<pre id="storyteller-branch">master</pre>
46+
<pre id="easycoder-script" style="display:none">
47+
48+
script Boot
49+
pre Branch
50+
variable B
51+
variable Script
52+
attach Branch to `storyteller-branch`
53+
put the content of Branch into B
54+
rest get Script from `https://cdn.jsdelivr.net/gh/easycoder/storyteller@` cat B cat `/storyteller.txt`
55+
run Script
56+
57+
</pre>
58+
59+
</body>
60+
</html>
61+
```
62+
<hr>
63+
Now carefully follow these steps:
64+
65+
1. Click the `New Folder` button and type the name `stories`.
66+
67+
1. Click its name (`stories`) to go into the folder.
68+
69+
1. Click `New File` and type the name `title.txt`. Click `Create`.
70+
71+
1. Click `Edit` against the new file.
72+
73+
1. Type the name of your website as you'd like it to appear in the title bar of the browser.
74+
75+
1. Click `Save`.
76+
77+
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
78+
79+
1. Click `New File` and type the name `theme.txt`. Click `Create`.
80+
81+
1. Click `Edit` against the new file.
82+
83+
1. Type the name of a theme chosen from this list of those currently available:
84+
85+
- `storyteller`, the theme used by this site, with a scroll border and blue sky header
86+
87+
- `grass`, lush border of thick grass
88+
89+
- `herbal`, which has a border of what looks like short grass
90+
91+
- `pencil`, a border design made of 2 pencils bent into a frame
92+
93+
- `thin-gold`, a thin gold frame
94+
95+
- `wood1`, a thick wooden frame
96+
97+
- `wood2`, a much thinner wooden frame
98+
99+
1. Click `Save`.
100+
101+
1. Click `Dashboard` on the left of the button bar to return to the file listing screen.
102+
103+
You now have an empty Storyteller website, so now you can actually start building your own website. The way it works is that inside the `stories` folder you can have any number of _subject_ folders, each handling one or more pages on your site. Each of these folders has inside it another folder for any images that will be used by that subject, plus 2 text files:
104+
105+
- `title.txt` - holds the text of the title that will appear at the top of the page (here it's `Starting Storyteller`).
106+
- `content.txt` - holds the content of your page, which is text plus images, where the images are not directly embedded but are referred to by their names in the `images` folder.
107+
108+
The system always starts off by looking in the subject folder whose name is `home`, so create a folder called `home` inside your stories folder. Inside this create the `images` folder and the `title.txt` and `content.txt` text files. Click the `Edit` button for `title.txt`, type the title of your website and save it. Then click the `Edit` button for `content.txt` and type a couple of short paragraphs - anything you like just to test the system. Save this file.
109+
110+
Each Subject starts off with just the one topic (`content.txt`) but you can add as many more as you like. For example, if you want to write a page about a holiday in India you might call it `India.txt`. There'a full description of all this on our ~sid:Structure~ page.
111+
112+
Now you can view your website by clicking the big box at the top left of the editor screen or the site title to its right. Your content with the title you chose should appear in a new browser window. It it doesn't, look carefully at all the files and make any necessary corrections. On our ~sid:info~ page you'll see contact details if you need to ask questions.
113+
114+
The best way to learn is often by following examples. So at the bottom of each of these pages you'll see a link that when clicked opens a page containing the _source code_ of the page; in other words what the author of the page was working with. You can use this to check on the precise syntax of any feature such as a right-aligned image or a drop-down list.
115+
116+
Sometimes your browser may not notice you have made changes to your website and will continue to show you the old version. This is rather annoying and to get round it you will need to learn how to clear the browser cache. This process varies from browser to browser but Google will be able to tell you how to do it. Just search for _firefox clear cache_ or _chrome clear cache_ etc.
117+
118+
You can do all your editing in Neocities using their built-in editor or you can maintain a corresponding set of files on your computer and upload each one after making changes. If you understand the processes involved you can also run a copy of the website on your own computer by using the `rest.py` webserver provided in our [Github repository](https://github.com/easycoder/storyteller), which makes for a quicker way to make changes and test them before uploading to the live site. (You will also need to download `bottle.py` for this to work.)
119+
120+
~sid:Structure:The structure of a Storyteller website~
121+
122+
~sid:Markdown:Using Markdown in Storyteller~
123+
124+
~sid:Images:Handling images~
125+
126+
[Click here to see the source code for this page(/stories/GetStoryteller/source.txt)

‎demos/storyteller/stories/GetStoryteller/title.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Starting Storyteller

‎demos/storyteller/stories/Images/content.txt

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
Links: ~select:-:Select a subject!selected disabled hidden|S-GetStoryteller:Getting started with Storyteller|S-Structure:The structure of a Storyteller website|S-Markdown:Using Markdown~~space:3~
2+
3+
# How to handle images
4+
5+
When you are an author, text is the easy part but images present problems, no matter if you are using a word processor or an online editing system. The problems fall into two main groups; where to get good images and how to include them in a document.
6+
7+
Many people have only a poor understanding of what is meant by _image size_. It's not just the amount of space it takes up in storage; of far more importance is the information relating to the dimensions of a picture. In the world of computers this is not inches or centimeters; it's _pixels_.
8+
9+
If you look closely at a photo in a newspaper, using a magnifying glass, you may see it's constructed of little colored dots. The more dots you have (for the same size in inches) the harder it is to see the dots. In the old days, computers had screens of maybe 9 inches from corner to corner and they displayed 640 dots across and 480 down. This is something around 75 dots per inch. On a bigger screen the dots become much more noticeable.
10+
11+
Modern smartphones have a longer dimension of 4.5 inches (12cm) or more and a screen _resolution_ (number of dots of 1920, which equates to about 420 dots per inch. This is far too many for the eye to detect so we get the impression of continuous color.
12+
13+
So to display an image you might assume it should be big enough to fill such a display. Well, this will certainly work, but in fact the image doesn't have to be quite that big. Partly because we can't see all those dots (pixels) and partly because the way the eye detects color requires far less data than that. You might notice a 'jaggy' effect on a single black diagonal line on a white background, but never in a photo. When you magnify a photo you'll see that edges never go straight from black to white; there are always intermediate shades in there too, and this fools the eye into thinking it's seeing a straight line.
14+
15+
The reason for all this discussion is that photos take up space. On an account such as Neocities you only have a limited amount of this, so it makes no sense for pictures to be any bigger than they need to be. The bigger they are, the longer they take to download too, so pages with big photos load slower.
16+
17+
The trouble is, your phone takes photos that may be 6000 or more pixels wide and take up many megabytes of storage each. These photos have massive detail so they can be printed on large sheets of paper and still give superb quality. When they are displayed on a screen such as a phone, however, the phone has to squeeze them into the space available, and it does this by throwing away much of the information, to get 6000 pixels down to 1920 or less. This makes little sense, so it's far better if you do the job before putting the photo on your website.
18+
19+
All computers - including phones - can edit photos. Most of us simply keep the originals and never use a photo editor. Maybe we'll do a bit of simple rotation or cropping but that's it. You probably don't even know what your computer's photo editor is called, let alone how to use it. Well, the good news is, you don't need to.
20+
21+
As with most things, photo editing can be done online. On any of several websites you upload a photo from your computer, then you have a selection of things you can do with it, including cropping and rotation. But the main thing is to resize it to dimensions that are more suitable for putting onto a website. Then you save the photo back onto your computer, ready to be uploaded to Neocities.
22+
23+
The size you pick is always a compromise. Bigger means people can download a better quality copy if they want one; smaller saves space. On a big PC screen it's best to keep the width above 1200 pixels so when people click it the full version will fill the screen, but below 2000 pixels to keep the file size down. I usually settle for 1600 pixels wide.
24+
25+
I haven't done an exhaustive study of online photo editors, but one that seems pretty easy to use is [Photo Resizer](https://www.photoresizer.com/). Try it and see how you get on.
26+
27+
~sid:GetStoryteller:Getting started with Storyteller~
28+
29+
~sid:Structure:The structure of a Storyteller website~
30+
31+
~sid:Markdown:Using Markdown in Storyteller~
32+
33+
[Click here to see the source code for this page](/storyteller/Images/source.txt)

0 commit comments

Comments
 (0)