feat: COM-3646 Edit docs and fix articleTemplate

Author: vkosinov

components/main/Posts/PostCard/PostCard.styles.js

@@ -12,10 +12,6 @@ const base = ({ breakpoints: { mobile }, colors }) => css`
     border-top: 1px solid rgba(155, 155, 155, 0.5);
   }
 
-  &:first-of-type .wrap {
-    border-top: 1px solid rgba(241, 242, 247, 0.5);
-  }
-
   .picture {
     grid-column: 1 / span 3;
     width: ${calcRem(216)};

docs/en/NEW_ARTICLE.md

@@ -1,26 +1,31 @@
 # Creating a new article
 
 ## Article template generator
+
 To create a new article use the command `yarn article en my-article-name`,
 where en is the language (possible choices are en or ru) and `my-article-name` is the name of the new article.
 This command will create a new template article and pictures for it and add it to the home page.
 
 ## Article files
+
 All articles you can find in the [`_posts`](../_posts) folder.
 The name of the file corresponds to the `url` of the article, i.e. if you create a file named `new-awesome-post.md` in `_posts/en`,
 then be sure to find it at `http://localhost:3000/en/article/new-awesome-post`.
 
 ### Images
+
 Images for articles are in the [`public/images`](../public/images/) folder. We can insert images into articles in several ways:
 ``jsx
 <Img src='/foo.png' alt='Description of what's shown in foo.png' withOutProcessing>
+
 ```
 or
 ``jsx
 <Img imageName='foo' alt='Description of what's shown in foo.png'/>
 ```
-In the first case, the image will not go through any processing and will be the same at all resolutions. This is best choice for images that were originally of poor quality or small size, and there is nothing you can do about it. 
-In the second case you have the possibility to specify different versions of the image for different breakpoints. We recommend always using the second syntax and preparing different versions of images for different breakpoints. We have the following breakpoints: 
+
+In the first case, the image will not go through any processing and will be the same at all resolutions. This is best choice for images that were originally of poor quality or small size, and there is nothing you can do about it.
+In the second case you have the possibility to specify different versions of the image for different breakpoints. We recommend always using the second syntax and preparing different versions of images for different breakpoints. We have the following breakpoints:
 
 | breakpoint name | breakpoint boundaries |
 | --------------- | --------------------- |
@@ -35,6 +40,7 @@ In the second case you have the possibility to specify different versions of the
 | all             | 0 - ∞                 |
 
 Different versions of the same image for different breakpoints should be put in the same folder and named according to the breakpoints on which you want to display them. For example, you have an image `foo` and it looks slightly different on desktop, tablet and mobile, then you need to create a folder `foo` and put in it 3 images, each with the same name as the breakpoint on which it will be used:
+
 ```
 └─ foo
     ├─ mobile.all.png
@@ -46,22 +52,12 @@ We also have the ability to prepare different images for screens with different
 
 If you don't want to resize images when processing, then place the original image 1x the size of its size in the article in the [`public/images/dont-resize`](../public/images/dont-resize) folder. This can come in handy when you don't have the ability to get a source image 3x the size of its size in the article.
 
-We recommend always resizing images. 
+We recommend always resizing images.
 
 SVG and GIF images are always placed in the [`public/images/dont-resize`](../public/images/dont-resize) folder and are connected using the syntax `<Img src='/foo.gif' alt='Description of what's shown in foo.gif' withOutProcessing>`.
 
-For each article it is obligatory to create images
-mainCoverL - big tile, mainCoverS - small tile ([Screenshot of "mainCoverS" image for the main page](http://s.csssr.ru/U31J879TR/20200527101534.jpg)) and
-postCover ([Screenshot of the "postCover" image for article header](http://s.csssr.ru/U31J879TR/20200527101626.jpg)).
+For each article it is obligatory to create images postCover ([Screenshot of the "postCover" image for article header](http://s.csssr.ru/U31J879TR/20200527101626.jpg)).
 
 ## Article order
-The order of the articles on the main page is set in [postsOrderEn.json](../postsOrderEn.json) and [postsOrderRu.json](../postsOrderRu.json). This file presents a schematic representation of the articles on the main page.
-```json
-[
-  ["offshore-web-development", "augmented-and-virtual-reality"],
-  ["html-or-cms-or-custom-development", "eight-ways-to-Improve-staff-motivation"],
-  ["creative-and-web-development," "tips-for-task-estimating"],
-  ["the-baltic-e-success"]
-]
-```
-The presence and order of articles in this object determines the presence and order of articles on the homepage. When you create a new article using the `yarn article en my-article-name` command, your article name `my-article-name` will automatically be added first in order.
+
+Articles are sorted by date of publication. From the earliest to the latest.

docs/ru/NEW_ARTICLE.md

@@ -7,21 +7,27 @@
 Эта команда создаст новую шаблонную статью, картинки для неё и добавит её на главную.
 
 ## Файлы статьи
+
 Статьи находятся в папке [`_posts`](../_posts).
 Название файла соответствует `url` статьи, т.e. если создать файл с именем `new-awesome-post.md` в `_posts/ru`,
 то будьте уверены что сможете найти его по адресу `http://localhost:3000/ru/article/new-awesome-post`.
 
 ### Изображения
+
 Картинки для статей находятся в папке [public/images](../public/images/). Мы можете вставлять изображения в статьи несколькими способами:
+
 ```jsx
 <Img src='/foo.png' alt='Описание того что изображено на foo.png' withOutProcessing>
 ```
+
 или же
+
 ```jsx
-<Img imageName='foo' alt='Описание того что изображено на foo.png'/>
+<Img imageName="foo" alt="Описание того что изображено на foo.png" />
 ```
-В первом случае изображение не будет проходить никакую обработку и будет одинаковым на всех разрешениях. Такой вариант подходит для картинок, которые изначально были плохого качества или маленького размера и вы на это никак не можете повлиять. 
-Во втором случае у вас появляется возможность указать разные версии изображения для разных брейкпоинтов. Мы рекомендуем всегда использовать второй вариант синтаксиса и подготавливать разные версии изображений для разных брейкпоинтов. У нас есть следующие брейкпоинты: 
+
+В первом случае изображение не будет проходить никакую обработку и будет одинаковым на всех разрешениях. Такой вариант подходит для картинок, которые изначально были плохого качества или маленького размера и вы на это никак не можете повлиять.
+Во втором случае у вас появляется возможность указать разные версии изображения для разных брейкпоинтов. Мы рекомендуем всегда использовать второй вариант синтаксиса и подготавливать разные версии изображений для разных брейкпоинтов. У нас есть следующие брейкпоинты:
 
 | Название брейкпоинта | Границы брейкпоинта |
 | -------------------- | ------------------- |
@@ -36,6 +42,7 @@
 | all                  | 0 - ∞               |
 
 Разные версии одного и того же изображения для разных брейкпоинтов следуют складывать в одну папку и называть согласно брейкпоинтам, на которых вы хотите их отображать. Например, у вас есть изображении `foo` и у оно у вас выглядит немного по разному на десктопе, таблете и мобилке, тогда вам нужно создать папку `foo` и положить в неё 3 изображения, каждое из которых будет названо так же как и брейкпоинт, на котором оно будет использоваться:
+
 ```
 └─ foo
     ├─ mobile.all.png
@@ -47,22 +54,12 @@
 
 Если не хотите ресайзить изображения при обработке, то разместите исходное изображение 1x размера его следует в папке [public/images/dont-resize](../public/images/dont-resize). Это может пригодится, когда у вас нет возможности получить исходное изображение 3x размера от его размера в статье.
 
-Мы рекомендуем всегда ресайзить изображения. 
+Мы рекомендуем всегда ресайзить изображения.
 
 SVG и GIF изображения всегда размещаются в папке [public/images/dont-resize](../public/images/dont-resize) и подключаются с помощью синтаксиса `<Img src='/foo.gif' alt='Описание того что изображено на foo.gif' withOutProcessing>`.
 
-Для каждой статьи обязательно должны быть созданы картинки
-mainCoverL - большая плитка, mainCoverS - маленькая плитка ([Скриншот изображения «mainCoverS» для главной страницы](http://s.csssr.ru/U31J879TR/20200527101534.jpg)) и
-postCover ([Скриншот изображения «postCover» в заголовке статьи](http://s.csssr.ru/U31J879TR/20200527101626.jpg)).
+Для каждой статьи обязательно должны быть созданы картинки postCover ([Скриншот изображения «postCover» в заголовке статьи](http://s.csssr.ru/U31J879TR/20200527101626.jpg)).
 
 ## Порядок статей
-Порядок статей на главной задаётся в файлах [postsOrderEn.json](../postsOrderEn.json) и [postsOrderRu.json](../postsOrderRu.json). В этом файле представлено схематическое отображение статей на главной странице.
-```json
-[
-  ["offshore-web-development", "augmented-and-virtual-reality"],
-  ["html-or-cms-or-custom-development", "eight-ways-to-Improve-staff-motivation"],
-  ["creative-and-web-development", "tips-for-task-estimating"],
-  ["the-baltic-e-success"]
-]
-```
-Наличие и порядок статей в этом объекте определяет наличие и порядок статей на главной странице. При создании новой статьи с помощью команды `yarn article ru my-article-name` ваше название статьи `my-article-name` будет автоматически добавлено первым в порядке.
+
+Статьи сортируются по дате публикации. От ранней к поздней.

pages/[language]/[category]/[page].js

@@ -33,6 +33,7 @@ export async function getStaticProps({ params }) {
     'date',
     'slug',
     'author',
+    'content',
     'coverImageAlt',
     'tag',
     'images',

pages/[language]/[category]/index.js

@@ -25,6 +25,7 @@ export async function getStaticProps({ params }) {
     'date',
     'slug',
     'author',
+    'content',
     'coverImageAlt',
     'tag',
     'images',