education.03.site.md 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. Title: Education: 03. Site
  2. Date: 2019-06-25 00:00
  3. Category: Page
  4. Slug: education.03.site
  5. Lang: en
  6. | < Back | Index | Next > |
  7. |---|---|---|
  8. | [02. Dependencies][prev] | [Education][index] | [04. Language][next] |
  9. </div><div class="contents">
  10. In this document we create a simple static web site with two pages.
  11. Estimated completion time: 10 minutes.
  12. **Table of contents**
  13. * [01. Inspiration](#inspiration)
  14. * [02. Investigate `pskov.cfg` file](#cfg)
  15. * [03. Investigate `item.template` file](#item)
  16. * [04. Investigate `about.md` and `cv.md` files](#md)
  17. * [05. Launch LFSA](#lfsa)
  18. * [06. Generate the site](#gen)
  19. * [07. Observe the site](#observe)
  20. * [08. Summary](#summary)
  21. <a name="inspiration"/>
  22. ## 01. Inspiration
  23. Suppose you are a great Russian painter named Valentin Serov. Everytime anyone wants to know about you they refer to [Wikipedia][serov]. You wake up earlier today with a distinct desire to have your very own personal web site.
  24. You set on to create the following pages:
  25. * About me
  26. * Curriculum vitae (CV)
  27. Some time later you have the following files in your [site directory][01-files]:
  28. * pskov.cfg
  29. * item.template
  30. * about.md
  31. * cv.md
  32. Let's look at their contents closer.
  33. <a name="cfg"/>
  34. ## 02. Investigate `pskov.cfg` file
  35. `pskov.cfg` file has the following contents:
  36. ```
  37. input = .
  38. item = item.template
  39. ```
  40. `pskov.cfg` is an [INI file][ini-file] with the following keys specified:
  41. | Key | Description |
  42. |---|---|
  43. | `input` | Points to a directory where `item`'s file is located |
  44. | `item` | Points to an HTML template file that is used to generate HTML files out of Markdown ones |
  45. In our case, `item.template` file is located alongside `pskov.cfg`, so we use `.` to denote current directory.
  46. <a name="item"/>
  47. ## 03. Investigate `item.template` file
  48. `item.template` file has the following contents:
  49. ```
  50. <!DOCTYPE html>
  51. <html>
  52. <meta charset="utf-8">
  53. <head>
  54. <style>
  55. - - - - Collapsed for brevity - - - -
  56. </style>
  57. <title>Serov</title>
  58. </head>
  59. <body>
  60. <div id="header">
  61. <strong>Serov</strong>
  62. <a href="about.html">About me</a>
  63. <a href="cv.html">CV</a>
  64. </div>
  65. <center>
  66. <h1>PSKOV_ITEM_TITLE</h1>
  67. <div class="contents">
  68. PSKOV_ITEM_CONTENTS
  69. </div>
  70. <div id="footer">
  71. This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
  72. </div>
  73. </center>
  74. </body>
  75. </html>
  76. ```
  77. **Note**: style was collapsed for brevity.
  78. As you can see, `item.template` is an average HTML file with two **PSKOV** constants specified:
  79. | PSKOV constant | Description |
  80. |---|---|
  81. | `PSKOV_ITEM_TITLE` | Value of `Title` key of the page's Markdown file |
  82. | `PSKOV_ITEM_CONTENTS` | Provides HTML contents generated out of Markdown contents |
  83. **Notes**:
  84. * other **PSKOV** constants are described later
  85. * page's Markdown file is described below
  86. <a name="md"/>
  87. ## 04. Investigate `about.md` and `cv.md` files
  88. `about.md` file has the following contents:
  89. ```
  90. Title: About me
  91. Slug: about
  92. Hi, my name is Valentin Serov. Here's my self-portrait:
  93. ![Valentin Serov self-portrait][serov-portrait]
  94. - - - - Collapsed for brevity - - - -
  95. Have a look at my [CV][cv] now.
  96. [serov]: https://en.wikipedia.org/wiki/Valentin_Serov
  97. [revolution]: https://en.wikipedia.org/wiki/Russian_Revolution
  98. [serov-portrait]: myself.jpg
  99. [serov-work]: mywork.jpg
  100. [girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches
  101. [pskov]: http://opengamestudio.org/pskov
  102. [cv]: cv.html
  103. ```
  104. `about.md` starts with a so-called header section:
  105. | Header key | Description |
  106. |---|---|
  107. | `Title` | Provides value for `PSKOV_ITEM_TITLE` constant when generating HTML out of Markdown |
  108. | `Slug` | Tells **PSKOV** that particular Markdown file should be saved under `<slug>.html` filename |
  109. The rest of `about.md` contents is what any Markdown file looks like.
  110. **Note**: `cv` page is referenced as `cv.html`, not `cv.md`
  111. `cv.md` file has the following contents:
  112. ```
  113. Title: Curriculum vitae
  114. Slug: cv
  115. 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!
  116. | Key | Value |
  117. |---|---|
  118. | Name | Valentin Serov |
  119. | Age | 46 |
  120. | Marital status | Married |
  121. | Country | Russian Empire |
  122. | Alma mater | Imperial Academy of Arts |
  123. | Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) |
  124. ```
  125. As you can see, there's nothing new in `cv.md` except for a Markdown table.
  126. <a name="lfsa"/>
  127. ## 05. Launch LFSA
  128. <video controls poster="../vid/education.03.site.launch-lfsa.w2k.poster.png">
  129. <source src="../vid/education.03.site.launch-lfsa.w2k.mp4" type ="video/mp4">
  130. <source src="../vid/education.03.site.launch-lfsa.w2k.webm" type ="video/webm">
  131. ERROR Your browser does not support HTML5 video
  132. </video>
  133. Launch [LFSA][lfsa] so that it points to directory with the files we just observed:
  134. ```
  135. $ /path/to/lfsa_1.0.0.py /path/to/dir/01.TwoPages
  136. ```
  137. You should see output similar to this:
  138. ```
  139. DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages'
  140. PORT: '8000'
  141. ```
  142. <a name="gen"/>
  143. ## 06. Generate the site
  144. <video controls poster="../vid/education.03.site.gen.w2k.poster.png">
  145. <source src="../vid/education.03.site.gen.w2k.mp4" type ="video/mp4">
  146. <source src="../vid/education.03.site.gen.w2k.webm" type ="video/webm">
  147. ERROR Your browser does not support HTML5 video
  148. </video>
  149. Go to [Tool][tool] page and press `Generate` button to generate HTML files right where Markdown ones reside.
  150. <a name="observe"/>
  151. ## 07. Observe the site
  152. <video controls poster="../vid/education.03.site.observe.w2k.poster.png">
  153. <source src="../vid/education.03.site.observe.w2k.mp4" type ="video/mp4">
  154. <source src="../vid/education.03.site.observe.w2k.webm" type ="video/webm">
  155. ERROR Your browser does not support HTML5 video
  156. </video>
  157. Observe generated web site locally by opening `about.html` and switching between pages.
  158. <a name="summary"/>
  159. ## 08. Summary
  160. You have successfully generated a web site with two pages. [Check out the result][01-sample].
  161. Introduced **PSKOV** constants include:
  162. | PSKOV constant | Description |
  163. |---|---|
  164. | `PSKOV_ITEM_TITLE` | Value of `Title` key of the page's Markdown file |
  165. | `PSKOV_ITEM_CONTENTS` | Provides HTML contents generated out of Markdown contents |
  166. Introduced configuration keys include:
  167. | Key | Description |
  168. |---|---|
  169. | `input` | Points to a directory where `item`'s file is located |
  170. | `item` | Points to an HTML template file that is used to generate HTML files out of Markdown ones |
  171. Introduced header keys include:
  172. | Header key | Description |
  173. |---|---|
  174. | `Title` | Provides value for `PSKOV_ITEM_TITLE` constant when generating HTML out of Markdown |
  175. | `Slug` | Tells **PSKOV** that particular Markdown file should be saved under `<slug>.html` filename |
  176. </div><div class="contents">
  177. | < Back | Index | Next > |
  178. |---|---|---|
  179. | [02. Dependencies][prev] | [Education][index] | [04. Language][next] |
  180. [index]: education.html
  181. [prev]: education.02.deps.html
  182. [next]: education.04.lang.html
  183. [01-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages
  184. [01-sample]: http://opengamestudio.org/pskov/sample/01.TwoPages/about.html
  185. [ini-file]: https://en.wikipedia.org/wiki/INI_file
  186. [serov]: https://en.wikipedia.org/wiki/Valentin_Serov
  187. [lfsa]: http://opengamestudio.org/lfsa
  188. [tool]: http://opengamestudio.org/pskov