diff --git a/.gitignore b/.gitignore index 8b2bc87..2750770 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ *.pyc pelican/output/ + +# Ignore VIM temporary files. +*.swp diff --git a/pskov/en/education.01.why.html b/pskov/en/education.01.why.html new file mode 100644 index 0000000..b1af94b --- /dev/null +++ b/pskov/en/education.01.why.html @@ -0,0 +1,208 @@ + + + +
+ +< Back | +Index | +Next > | +
---|---|---|
Not available | +Education | +02. Dependencies | +
In this document we briefly explain why PSKOV was created.
+Estimated completion time: 5 minutes.
+Table of contents
+You might know there already exist quite a lot of static site generators, why create another one? Because they are not good enough for Opensource Game Studio needs.
+Here's a list of features we don't need:
+№ | +Unwelcome feature | +Note | +
---|---|---|
1 | +Learning anything beyond HTML, CSS, JavaScript, and Markdown | +These technologies are enough to deliver information to users | +
2 | +Server side | +Nobody should be able to pull the plug on you except yourself | +
3 | +Installation | +We had enough updates that were never requested | +
4 | +Comprehensible source code | +Single file with just enough number of lines | +
Consequently, here is a list of PSKOV features:
+№ | +PSKOV feature | +Note | +
---|---|---|
1 | +Bare HTML, CSS, JavaScript, and Markdown | +No need for template language, web framework or anything else | +
2 | +Client side | +PSKOV is a client side JavaScript application, it runs solely on your device | +
3 | +Optional installation | +PSKOV is available at http://opengamestudio.org/pskov. However, if you want to keep PSKOV locally, you can get PSKOV single HTML file here and open it locally | +
4 | +Comprehensible source code | +PSKOV is a single HTML file with less than 10000 lines of code | +
5 | +Decades long support (DLS) | +You can use PSKOV on both Windows 2000 and Windows 2030* | +
* Windows 2030 does not (yet) exist, we simply refer to the fact that PSKOV is designed to work for operating systems released in the range of years 2000-2030
+< Back | +Index | +Next > | +
---|---|---|
Not available | +Education | +02. Dependencies | +
In this document we teach how to install PSKOV dependencies.
+Estimated completion time: ?? minutes.
+Table of contents
+ + +We designed PSKOV to run inside web browsers. Hence, here is a list of PSKOV dependencies:
+№ | +Dependency | +Note | +
---|---|---|
1 | +Web browser of 2010 or newer | +PSKOV needs ECMAScript 5 (2009), any modern web browser should work | +
2 | +Local file system access (LFSA) | +LFSA gives PSKOV access to your local file system | +
Since PSKOV is a client side JavaScript application, it has no direct access to your local file system to generate files. That's why we have also created LFSA, a tiny Python server to provide read/write access to your local file system at 8000 port. LFSA is under 200 lines of code, feel free to inspect it to make sure we don't steal your data.
+ +TODO
+ +Tell Showdown.JS is used to convert Markdown to HTML, so users should refer to Showdown.JS for rules.
+< Back | +Index | +Next > | +
---|---|---|
02. Dependencies | +Education | +04. Language | +
In this document we create a simple static web site with two pages.
+Estimated completion time: ? minutes.
+Table of contents
+cfg
fileitem.template
fileindex.md
and cv.md
filesSuppose you are a great Russian painter named Valentin Serov. Everytime anyone wants to know about you they refer to Wikipedia. You wake up earlier today with a distinct desire to have your very own personal web site.
+You set on to create the following pages:
+Some time later you have the following files in your site directory:
+Let's look at their contents closer.
+ +cfg
filecfg
file has the following contents:
input = .
+item = item.template
+
+cfg
is an INI file with the following keys specified:
Key | +Description | +
---|---|
input |
+Points to a directory where item 's file is located |
+
item |
+Points to an HTML template file that will be used to generate HTML files out of Markdown ones | +
In our case, item.template
file is located alongside cfg
, so we use .
to denote current directory.
item.template
fileitem.template
file has the following contents:
<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <head>
+ <style>
+ - - - - Style was collapsed for brevity - - - -
+ </style>
+ <title>Serov</title>
+ </head>
+ <body>
+ <div id="header">
+ <strong>Serov</strong>
+ <a href="index.html">About me</a>
+ <a href="cv.html">CV</a>
+ </div>
+ <center>
+ <h1>PSKOV_ITEM_TITLE</h1>
+ <div class="contents">
+PSKOV_ITEM_CONTENTS
+ </div>
+ </center>
+ </body>
+</html>
+
+Note: style was collapsed for brevity.
+As you can see, item.template
is an average HTML file with two constants specified:
PSKOV constant | +Description | +
---|---|
PSKOV_ITEM_TITLE |
+Provides title from Title: part of page's header section |
+
PSKOV_ITEM_CONTENTS |
+Provides HTML contents generated out of Markdown contents | +
Notes:
+index.md
and cv.md
filesindex.md
file has the following contents:
Title: About me
+ Slug: index
+
+ Hi, my name is Valentin Serov. Here's my self-portrait:
+
+ ![Valentin Serov self-portrait][serov-portrait]
+
+ - - - - Contents were collapsed for brevity - - - -
+
+ Have a look at my [CV][cv] now.
+
+ [serov]: https://en.wikipedia.org/wiki/Valentin_Serov
+ [revolution]: https://en.wikipedia.org/wiki/Russian_Revolution
+ [serov-portrait]: myself.jpg
+ [serov-work]: mywork.jpg
+ [girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches
+ [pskov]: http://opengamestudio.org/pskov
+ [cv]: cv.html
+
+index.md
starts with a so-called header section:
Header constant | +Description | +
---|---|
Title: |
+Provides value for PSKOV_ITEM_TITLE constant when generating HTML out of Markdown |
+
Slug: |
+Tells PSKOV that this particular Markdown file should be saved under <slug>.html filename |
+
The rest of index.md
contents is what any Markdown file looks like.
Note: cv
page is referenced as cv.html
, not cv.md
cv.md
file has the following contents:
Title: Curriculum vitae
+ Slug: cv
+
+ Here's my CV in case my paintings still interest you. I took a bit of a modern IT approach to structure my CV as key-value pairs of a dictionary (map), enjoy!
+
+ | Key | Value |
+ |---|---|
+ | Name | Valentin Serov |
+ | Age | 46 |
+ | Marital status | Married |
+ | Country | Russian Empire |
+ | Alma mater | Imperial Academy of Arts |
+ | Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) |
+
+As you can see, there's nothing new in cv.md
except for a Markdown table.
Launch LFSA so that it points to directory with the files we just observed:
+$ /path/to/local-file-system-access.py /path/to/dir/01.TwoPages
+
+You should see output similar to this:
+DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages'
+PORT: '8000'
+
+
+Now it's finally time to generate your personal web site:
+Path:
points to the same directory you specified beforeInput directory:
and Item template:
have values from cfg
Generate
button to generate HTML files right where Markdown ones resideindex.html
from the site's directoryTake time to observe your new shiny personal web site consisting of two pages.
+< Back | +Index | +Next > | +
---|---|---|
02. Dependencies | +Education | +04. Language | +
In this document we add language selection.
+Estimated completion time: ? minutes.
+Table of contents
+cfg
fileNow that you have your web site in English you start to wonder why there's no Russian version, you're Russian after all!
+You set on to create the following directory structure:
+cfg
en/item.template
en/index.md
en/cv.md
ru/item.template
ru/index.md
ru/cv.md
Let's look at the contents of these files closer.
+ +cfg
filecfg
file has the following contents:
input = en;ru
+item = item.template
+
+As you see, input
can accept multiple directories separated by ;
symbol: PSKOV will go over each directory specified and run as before.
In this case, both en/
and ru/
directories have their own item.template
file.
en/item.template
contents:
- - - - Collapsed for brevity - - - -
+ <title>Serov</title>
+ </head>
+ <body>
+ <div id="header">
+ <strong>Serov</strong>
+ <a href="index.html">About me</a>
+ <a href="cv.html">CV</a>
+ <div id="lang">
+ <a href="../en/PSKOV_ITEM_URL">EN</a>
+ <a href="../ru/PSKOV_ITEM_URL">RU</a>
+ </div>
+ </div>
+ <center>
+- - - - Collapsed for brevity - - - -
+
ru/item.template
contents:
- - - - Collapsed for brevity - - - -
+ <title>Серов</title>
+ </head>
+ <body>
+ <div id="header">
+ <strong>Серов</strong>
+ <a href="index.html">Обо мне</a>
+ <a href="cv.html">Резюме</a>
+ <div id="lang">
+ <a href="../en/PSKOV_ITEM_URL">EN</a>
+ <a href="../ru/PSKOV_ITEM_URL">RU</a>
+ </div>
+ </div>
+ <center>
+- - - - Collapsed for brevity - - - -
+
Note: beginning and ending were collapsed for brevity.
+As you can see, both en/item.template
and ru/item.template
look similar to item.template
we saw before.
The changes include:
+<div id="lang">...</div>
section to present language selectionLanguage selection uses new PSKOV constant:
+PSKOV constant | +Description | +
---|---|
PSKOV_ITEM_URL |
+Provides <slug>.html value for the page |
+
As you see, PSKOV_ITEM_URL
is all you need to have your page in as many languages as you please.
en/index.md
and en/cv.md
files look exactly as before. ru/index.md
and ru/cv.md
are simply Russian variants of the same pages.
For example, ru/cv.md
has the following contents:
Title: Резюме
+ Slug: cv
+
+ Здесь вы можете увидеть моё резюме в том случае, если мои произведения всё ещё вас интересуют. Я использовал современный подход ИТ для структурирования своего резюме в виде пар ключ-значение словаря (карты). Наслаждайтесь!
+
+ | Ключ | Значение |
+ |---|---|
+ | Имя | Валентин Серов |
+ | Возраст | 46 |
+ | Семейное положение | Женат |
+ | Страна | Российская Империя |
+ | Учёба | Императорская Академия художеств |
+ | Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) |
+
+Note: Russian page has exactly the same Slug:
value as English one.
Launch LFSA so that it points to directory with the files we just observed:
+$ /path/to/local-file-system-access.py /path/to/dir/02.Language
+
+Generate the site:
+Generate
buttonen/index.html
or ru/index.html
from the site's directory locallyTake time to observe just how little effort you spent to have your web site localized.
+Here you can find a set of documents to make you proficient in generating static sites with PSKOV. You are encouraged to read the documents in order.
+№ | +Document | +Details | +Demonstration | +Estimated completion time | +
---|---|---|---|---|
1 | +Why | +Find out why PSKOV was created | +- | +5 minutes | +
2 | +Dependencies | +Install dependencies to start using PSKOV | +- | +?? minutes | +
3 | +Site | +Learn how to create a simple static web site with two pages | +TODO Link | +?? minutes | +
4 | +Language | +? | +TODO Link | +? | +
5 | +Blog | +? | +TODO Link | +? | +
PSKOV is a static site generator that runs in your web browser. What you see now has also been generated with PSKOV. If you're new to PSKOV, visit education page.
+ +- Local file system access - | -|
Path: | -Updating... | -
- Configuration - - | -|
Input directory: | -- |
News item template: | -- |
News preview template: | -- |
Index template: | -- |
Output directory: | -- |
Log | -|
- |
+ Local file system access + | +|
Path: | +Updating... | +
+ Configuration + + | +|
Input directory: | ++ |
Item template: | ++ |
Preview template: | ++ |
Index template: | ++ |
Pagination 'Previous' template: | ++ |
Pagination 'Next' template: | ++ |
Pagination 'Previous/Next' template: | ++ |
Preview characters limit: | ++ |
Preview ending string: | ++ |
Previews per page: | ++ |
Preview page base name: | ++ |
+ News + + | +|
Log | +|
+ |