HPG Newspaper

https://hpg-newspaper.surge.sh

Выпуски газеты

Все выпуски хранятся в .md файлах в папке text.

Чтобы создать новый выпуск, нужно просто создать новый файл в папке text с названием номера выпуска. Например 10.md.

По сути это обычный текстовый документ, куда вводится текст статей и заголовки для них.

Статья

Статья выглядит так:

## Заголовок статьи

### Подзаголовок статьи

<!-- метаданные. цвет, картинка и т.д. -->

Абзац 1. **Жирный текст**, _Курсив_, **_жирный курсив_**.

Абзац 2. Ниже разделительная полоса.

---

Абзац 3. Абзацы отделяются переносом строки.

Абзац 4. Пример ссылки: [ссылка](https://clips.twitch.tv/AnnoyingAliveNightingaleTheThing)

Абзац 5. Пример картинки в тексте: ![описание картинки](https://i.imgur.com/pDLMRbi.png)

Заголовок и подзаголовок жолжны быть обязательно в каждой статье. Если статья без заголовка/подзаголовка, вместо него нужно указать знак -.

Пример:

## -

### Статья без заголовка но с подзаголовком

Ингода слова в заголовоке/подзаголовке могут переноситься не так, как нужно.

Чтобы указать место, где в заголовоке/подзаголовке должен переноситься текст, нужно использовать <br>.

Пример:

## Заголовок <br> с переносом текста

### Очень длинный подзаголовок. <br> В два предложения

В статьи так же можно вставлять специфическую HTML-разметку при необходимости.

Метаданные статьи

Метаданные для статьи находятся в yaml блоке.

Метаданные для обычной статьи:

color: цвет блока со статьёй (обязательный параметр) - yellow | blue | white | red
image: путь к картинке
imageHeight: высота картинки в пикселях

Метаданные для статьи-приветствия:

variant: neon

Шаблон для рендера

Шаблон для рендера выпуска находится в jsx блоке после статистики.

Все статьи попадают в массив articles. Например если в документе 8 статей, этот массив будет содержать 8 элементов. Статьи идут в том же порядке, в котором они указаны в документе.

Для отображения статьи есть компонент Article.

Чтобы отобразить первую статью, нужно написать:

<Article {...articles[0]} />

Чтобы отобразить вторую:

<Article {...articles[1]} />

И так далее. Нумерация начинается с 0

Для заголовка используется компонент Heading:

<Heading>Главное</Heading>

Чтобы отобразить статьи в две колонки, нужно использовать компонент Grid:

<Grid container>
  <Grid item>
    <!-- статьи первой колонки -->
  </Grid>
  <Grid item>
    <!-- статьи второй колонки -->
  </Grid>
</Grid>

В целом шаблон для рендера выглядит так:

<Layout {...props}>
  <Article {...articles[0]} />
  <Heading>Главное</Heading>
  <Article {...articles[1]} />
  <Grid container>
    <Grid item>
      <Article {...articles[2]} />
      <Article {...articles[3]} />
    </Grid>
    <Grid item>
      <Article {...articles[4]} />
      <Article {...articles[5]} />
      <Article {...articles[6]} />
    </Grid>
  </Grid>
</Layout>

В большинстве случаев тут достаточно просто поменять количество статей в левой и правой колонках, или добавить/удалить нужные статьи.

Пример:

Представим, что нужно:

• убрать статью после приветствия
• в первой колонке сделать три статьи
• во второй колонке оставить только одну статью
• добавить заголовок "Спецвыпуск" в конце
• добавить статью после заголовка "Спецвыпуск"

Тогда шаблон для рендера будет выглядеть так:

<Layout {...props}>
  <Article {...articles[0]} />
  <Heading>Главное</Heading>
  <Grid container>
    <Grid item>
      <Article {...articles[1]} />
      <Article {...articles[2]} />
      <Article {...articles[3]} />
    </Grid>
    <Grid item>
      <Article {...articles[4]} />
    </Grid>
  </Grid>
  <Heading>Спецвыпуск</Heading>
  <Article {...articles[5]} />
</Layout>

Блок статистики

Блок со статистикой находится в самом начале документа.

Важно: Кавычки и отступы не трогать. Менять только текст.