The guides's discuss from ekaterinburgdev

Update links colors

Before

After

Fix loader size and scroll

(from PR)
#68 (comment)

Show smaller loader
Remove horizontal scroll

Bug

Screen.Recording.2023-03-14.at.00.11.54.mov

Customize `<ManualPage>` sidebar

~~Icon~~
Color links
Background color

Change H2 to H3 in Table Content

Add new components

Page
https://guides.ekaterinburg.design/typical

Design
https://www.figma.com/file/VpUQ8aZanmAIbwlSt5UTKH/%F0%9F%9A%B2-Ekaterinburg.design?node-id=4152%3A7285

Add new Notion types:

<hr> (#47)
<video> (#47)
<iframe> (#90)

Add search with autocomplete

Example data

[
  {
    "section": "Section name"
    "section_id": "section-name-1",
    "items": [
        {
            "page": "Page name 1",
            "page_id": "page-name-1",
            "text": "<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry"
        },
        {
            "page": "Page name 1",
            "page_id": "page-name-2",
            "text": "containing <b>Lorem Ipsum</b> passages, and more recently with desktop publishing software"
        }
    ]
  }
]

Design
https://www.figma.com/file/VpUQ8aZanmAIbwlSt5UTKH/%F0%9F%9A%B2-Ekaterinburg.design?node-id=3405%3A3302

Refactor Notion component detection

Create list of typography components for ekaterinburg-ui (ask designers @kryaazh, @tramakarov)
Add base component. 3 variants:
- <Typography.H1>
- <H1>, <H2> ...
- <Typography as="h1">
Set text as children prop
Refactor
- Rename columnItem prop for typograpy components
- Add <table> to separate component. Add this to file
- Separate components. One component — one file (exclude subcomponent)
- Switch-case must return equal types (components or objects)

TODO
Allow write content inside columns (now all tags in col)

3 component variants library

<>
  {/* Вариант 1. Комопненты имплементирующие элементы

Плюсы
- Настройка любых props
- Интуитивно

Минусы
- Сложно поддерживать обртаную совместимость с HTML (W3C). Пример табилцы
- А не проще использовать HTML + CSS?
*/}
  <H1>Заголовок 1</H1>
  <H2>Заголовок 2</H2>
  <H3>Заголовок 3</H3>
  <H4>Заголовок 4</H4>
  <H5>Заголовок 5</H5>

  <Ul size="xl">
    <Li></Li>
    <Li></Li>
    <Li></Li>
    <Li></Li>
  </Ul>

  <Hr />

  <Ol>
    <Li></Li>
    <Li></Li>
    <Li></Li>
    <Li></Li>
  </Ol>

  <P></P>

  <Table>
    <Thead></Thead>
    <Tbody>
      <Tr>
        <Td></Td>
        <Td></Td>
      </Tr>
    </Tbody>
  </Table>
</>;


<>
  {/* Вариант 2. Комопненты имплементирующие элементы

Плюсы
- Подсказка тегов при наборе Typography (можно `<T />`)
- Удобный доступ render(Typography[componentName])

Минусы
- Громоздко
- Должен быть унифицированный набор props. Скорее всего, многие должны быть перегруженными.
  То есть `size` может обозначать что-угодно для элементов Table и H1
*/}
  <Typography.H1>Заголовок 1</Typography.H1>
  <Typography.H2>Заголовок 2</Typography.H2>
  <Typography.H3>Заголовок 3</Typography.H3>
  <Typography.H4>Заголовок 4</Typography.H4>
  <Typography.H5>Заголовок 5</Typography.H5>

  <Typography.Ul size="xl">
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
  </Typography.Ul>

  <Typography.Hr />

  <Typography.Ol>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
    <Typography.Li></Typography.Li>
  </Typography.Ol>

  <Typography.P></Typography.P>

  <Typography.Table>
    <Typography.Thead></Typography.Thead>
    <Typography.Tbody>
      <Typography.Tr>
        <Typography.Td></Typography.Td>
        <Typography.Td></Typography.Td>
      </Typography.Tr>
    </Typography.Tbody>
  </Typography.Table>
</>;


<>
  {/* Вариант 3. Комопненты имплементирующие элементы

Плюсы
- Подсказка тегов при наборе пропа type
- Удобный доступ <Typography type={componentType} />
- Есть возможность отделять внешний вид от тега, когда они совпадают. 

Минусы
- Громоздко
*/}
  <Typography type="h1">Заголовок 1</Typography>
  <Typography type="h2">Заголовок 2</Typography>
  <Typography type="h3">Заголовок 3</Typography>
  <Typography type="h4">Заголовок 4</Typography>
  <Typography type="h5">Заголовок 5</Typography>

  <Typography type="ul">
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
  </Typography>

  <Typography type="hr" />

  <Typography type="ol">
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
    <Typography type="li"></Typography>
  </Typography>

  <Typography type="p"></Typography>

  <Typography type="table">
    <Typography type="thead"></Typography>
    <Typography type="tbody">
      <Typography type="tr">
        <Typography type="td"></Typography>
        <Typography type="td"></Typography>
      </Typography>
    </Typography>
  </Typography>
</>