Podcast 2026

📻 Аудио-эпизод⏱️ 11:04

Атомный лес (Мишель)

Etc

💿

<Podcast 
  url="https://pravosleva.pro/d/sounds-in-access-2025/static/projects/atomic-forest/audio/mishel.mp3" 
  title="Атомный лес (Мишель)" 
  description="Etc" 
  durationStr="11:04"
  bg="https://pravosleva.pro/d/sounds-in-access-2025/static/projects/atomic-forest/audio/mishel.jpeg" 
/>

🎙️ Podcast #3

[Podcast 03](https://pravosleva.ru/docs/_exp/podcast/podcast-03.mp3 "Podcast #3")

🎙️ Podcast #0 (Err case)

🎙️ French Jazz

📻 Аудио-эпизод⏱️ -

Phonk

radiorecord.hostingradio.ru/phonk96.aacp

💿

📻 Аудио-эпизод⏱️ -

D'n'B Classics

radiorecord.hostingradio.ru/drumhits96.aacp

💿

📻 Аудио-эпизод⏱️ -

Electro

radiorecord.hostingradio.ru/elect96.aacp

💿

📻 Аудио-эпизод⏱️ -

Dubstep

radiorecord.hostingradio.ru/dub96.aacp

💿

📻 Аудио-эпизод⏱️ -

Future Rave

radiorecord.hostingradio.ru/futurerave96.aacp

💿

Radio Station Streams

https://gist.github.com/ergoz/e7837a54956116167db93b016dbd51a9

v1: Монолитный префиксный локейшн (Самый надежный способ)

Мы внедряем CORS-заголовки прямо в ваш текущий блок /docs. Это сохраняет правильный путь к файлам /home/projects/docs/... и гарантирует отсутствие конфликтов с регулярными выражениями.

# Внутри конфигурации nginx для домена pravosleva.ru
location /docs {
    #auth_basic "Private Area";
    #auth_basic_user_file /var/www/html/.htpasswd;
    root /home/projects;

    /* =========================================================================
       ИСПРАВЛЕНО: CORS-интеграция без потери директивы root (Защита от 404)
       ========================================================================= */
    # Разрешаем вашему основному блогу на .pro читать медиа-потоки
    add_header Access-Control-Allow-Origin "https://pravosleva.pro" always;
    add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Range, Authorization, Cache-Control, Pragma" always;
    add_header Access-Control-Expose-Headers "Content-Length, Content-Range" always;

    # Перехватываем предварительные CORS-запросы OPTIONS
    if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Origin "https://pravosleva.pro" always;
        add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Range, Authorization, Cache-Control, Pragma" always;
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 204;
    }
}

v2: Точечный регулярный локейшн с наследованием корня

Если вы хотите, чтобы заголовки добавлялись строго к аудио/видео файлам внутри папки /docs и не затрагивали другие документы (например, картинки или .txt), вам нужно явно продублировать директиву root внутрь регулярного выражения:

server {
  listen 80;
  listen 443 ssl;

  server_name pravosleva.ru;
  location /docs {
    root /home/projects;
  }

  location ~* ^/docs/.*\.(mp3|mp4|wav|ogg)$ {
    root /home/projects;
    add_header Access-Control-Allow-Origin "https://pravosleva.pro" always;
    add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Range, Authorization, Cache-Contro$
    add_header Access-Control-Expose-Headers "Content-Length, Content-Range" al$
    if ($request_method = 'OPTIONS') {
      add_header Access-Control-Allow-Origin "https://pravosleva.pro" always;
      add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS" always;
      add_header Access-Control-Allow-Headers "Range, Authorization, Cache-Cont$
      return 204;
  }
}

Cards

ЛК ДМС

Личный кабинет ДМС

Uremont.com

Агрегатор автосервисов

<CardsExample
  itemsJson='[
  {"id":0,"title":"ЛК ДМС", "descr":"Личный кабинет ДМС", "links": [{"url":"https://my.rgs.ru/", "title": "my.rgs.ru"}], "bgUrl": ""},
  {"id":1,"title":"Uremont.com", "descr":"Агрегатор автосервисов", "links": [{"title": "uremont.com", "url":"https://uremont.com", "title": "Production"}], "bgUrl": "https://play-lh.googleusercontent.com/iKRqkvIIUNjL60OTg7_hJbKmCCgPs7zy7Hl0BUx9r3V-732oQhSENT3-cFYUYK7wVK4"}
]'
/>

CollapsibleBox with actions

Header

<CollapsibleBox
header="Header"
text="Markdow text"
actionsJson='[
  {
    "label": "LOCAL_LINK",
    "link": "#2-princip-edinstvennoj-otvetstvennosti"
  },
  {
    "label": "NEW_TAB_LINK",
    "link": "https://google.com",
    "target": "_blank"
  },
  {
    "label": "CURRENT_TAB_LINK",
    "link": "https://google.com",
    "target": "_self"
  }
]'
/>

ImageGalleryBox renderer

interface TImagesGalleryBoxProps {
  itemsJson: string;
}

<ImagesGalleryBox itemsJson='[
  {
    "src": "https://path/to/img.jpg",
    "original": "https://path/to/img.jpg",
    "title": "Optional title",
    "caption": "Optional description"
  }
]' />

Желательно не более 3-х картинок в пропсах, т.к. замечено, что начинает глючить верстка сетки

<ImagesGalleryBox2 itemsJson='[
  {
    "src": "https://path/to/img.jpg",
    "original": "https://path/to/img.jpg",
    "title": "Optional title",
    "caption": "Optional description"
  }
]' />

Alert renderer

New syntax 2026

> [!warning] Новый синтаксис
> Первый абзац важного текста с переносом.
>
> Второй абзац текста, который теперь не склеится.
>
> ```js
> // Код-сниппет теперь рендерится идеально!
> const test = "PWA Audio Player";
> console.log(test);
> ```

Новый синтаксис (warning) Первый абзац важного текста с переносом.

Второй абзац текста, который теперь не склеится.

// Код-сниппет теперь рендерится идеально!
const test = "PWA Audio Player";
console.log(test);

Акцент на чем-то важном

Второй абзац текста, который теперь не склеится

// Код-сниппет теперь рендерится идеально!
const test = "PWA Audio Player";
console.log(test);

Последний абзац

Success Первый абзац важного текста с переносом.

Второй абзац текста, который теперь не склеится.

// Код-сниппет теперь рендерится идеально!
const test = "PWA Audio Player";
console.log(test);

Old syntax 2020

interface IAlertProps {
  type?: 'info' | 'success' | 'warning' | 'danger' | 'default';
  header?: string;
  text: string; // Could be as markdown
}
<Alert text='required prop' />

Info

props.type is info

Success Alert

props.type is success; Only inline text

Warning Alert

props.type is warning; inline code

Danger Alert

props.type is danger; Your link

Default Alert

props.type is optional

Without props.header

MD blockquotes

> See also [remark-gfm](https://github.com/remarkjs/remark-gfm)  
> line 2 (two last spaces in line above)

See also remark-gfm
line 2 (two last spaces in line above)

> Новый синтаксис
> Первый абзац важного текста с переносом.
>
> Второй абзац текста, который теперь не склеится.
>
> ```js
> // Код-сниппет теперь рендерится идеально!
> const test = "PWA Audio Player";
> console.log(test);
> ```

Новый синтаксис (+два пробела в конце первой строки, а затем делайте перенос, если нужно продолжить первый абзац)
Первый абзац важного текста с переносом.

Второй абзац текста, который теперь не склеится.

// Код-сниппет теперь рендерится идеально!
const test = "PWA Audio Player";
console.log(test);

Еще кейс когда блок с кодом не последний

const a = 1;
console.log(a);

Последний абзац

Кейс со списком

  • One
  • Two

Inline

Some _emphasis_, **importance**, and `code`.

Some emphasis, importance, and code.

CodeRenderer

JS OOP sample

class A {
  constructor(value) {
    this.value = value
  }
  get a () {
    return this.value
  }
}
class B extends A {
  constructor (ps) {
    super(ps)
  }
  get b () {
    return this.a ** 2
  }
}
const b = new B(2)
console.log(b.a) // 2
console.log(b.b) // 4

GFM

www.example.com, https://example.com, and contact@example.com.

www.example.com, https://example.com, and contact@example.com.

Table

| default | align left  | align right |  align center  |
| - | :- | -: | :-: |
| 1 | 2| 3|4|
defaultalign leftalign rightalign center
1234

See also: react-md-table-generator; markdown-table

ImageRenderer

Markdown syntax

![gk90qga.cFullstack React](https://dzxbosgk90qga.cloudfront.net/fit-in/504x658/n/20190131015240478_fullstack-react-cover-medium%402x.png)

gk90qga.cFullstack React

Open image in new tab

<ImageInNewTab
  src='https://dzxbosgk90qga.cloudfront.net/fit-in/504x658/n/20190131015240478_fullstack-react-cover-medium%402x.png'
/>

Youtube renderer

Single

<YoutubePlayer
  videoId='v_GbcTpMTLE'
/>

In modal

<YoutubeInModal
  videoId="oPssk0PEwtg"
/>

In modal with props.previewSrc?:string

<YoutubeInModal
  previewSrc="https://i1.ytimg.com/vi/oPssk0PEwtg/hqdefault.jpg"
  videoId="oPssk0PEwtg"
/>

YoutubeGrid

<YoutubeGrid
  json='["l-EdCNjumvI", "hqgVYX3zhug", "_i_qxQztHRI", "6XQHpUiiKgc"]'
/>

YoutubeGrid & props.inModal?:boolean

<YoutubeGrid
  inModal
  json='["l-EdCNjumvI", "oPssk0PEwtg", "hqgVYX3zhug", "_i_qxQztHRI", "6XQHpUiiKgc"]'
/>

Planned

Ass time point in prop https://github.com/tjallingt/react-youtube/issues/274

See also: How does it work on this site

GistRenderer

<Gist gistId='6321633' />

JSON Comparison renderer

<JSONComparison
  json1='{"a":1,"b":1,"d":{"d1":1,"e":["one","two"]}}'
  json2='{"a":1,"b":2,"c":2,"d":{"d1":2,"e":["one","two","three"]}, "z": { "a": { "b": 1, "c": "whatever" } }}'
/>

Сравнение JSON структур⏳

ControlsBox renderer

<ControlsBox
  controlsJson='[
    {
      "title": "PREV",
      "label": "Ремонт правой стороны",
      "type": "link",
      "link": "/blog/article/red-shark-2024-2"
    },
    {
      "title": "NEXT",
      "label": "Штраф за пересечение сплошной, есть вопросы",
      "type": "link",
      "link": "/blog/article/red-shark-2024-5"
    }
  ]'
/>

Possible title values

  • NEXT PREV
  • START_PLAY START_DEMO START_CHAT START_TELEGRAM START_NEW_TAB START_DRIVE2
  • END_PLAY END_DEMO END_CHAT END_TELEGRAM END_NEW_TAB END_DRIVE2

НазадРемонт правой стороныДалееШтраф за пересечение сплошной, есть вопросы

Code Comparison renderer

Var A

Простой (Обычным текстом, если код короткий и без спецсимволов маркдауна)

<CodeComparison 
  hideInputs={true}
  oldCodeRaw="const port = 3000;
server.listen(port);"
  newCodeRaw="const PORT = process.env.PORT || 3000;
server.listen(PORT);"
/>

Code

Var B

Если код большой, содержит много кавычек, обратных слэшей или JSX-тегов, маркдаун-парсер может запутаться и сломать гидратацию. Чтобы этого не произошло, переведите строки кода в Base64 (например, в консоли браузера через btoa()) и вставьте их так:

<CodeComparison 
  hideInputs={true} 
  oldCodeBase64="Y29uc3QgYSA9IDEwOwpjb25zb2xlLmxvZyhhKTs=" 
  newCodeBase64="Y29uc3QgYSA9IDIwOwpjb25zb2xlLmxvZyhhKTs=" 
/>

Code

Пример

Вот отличный пример, который наглядно показывает, как наш новый компонент CodeComparison подсветит изменения при оптимизации конфигурационного файла NGINX (например, при включении Gzip-сжатия, кэширования и скрытия технических заголовков для безопасности).Поскольку в коде сервера много кавычек и спецсимволов, мы закодируем старую и новую версии в Base64. Это гарантирует, что парсер Next.js и MDX без проблем соберут страницу, а Web Worker мгновенно выполнит дифф в фоне.

<CodeComparison
  language="nginx"
  oldCodeBase64="c2VydmVyIHsKICBsaXN0ZW4gODA7CiAgc2VydmVyX25hbWUgcHJhdm9zbGV2YS5wcm87CgogIGxvY2F0aW9uIC8gewogICAgcHJveHlfcGFzcyBodHRwOi8vbG9jYWxob3N0OjMwMDA7CiAgfQp9"
  newCodeBase64="c2VydmVyIHsKICBsaXN0ZW4gNDQzIHNzbCBodHRwMjsKICBzZXJ2ZXJfbmFtZSBwcmF2b3NsZXZhLnBybzsKCiAgIyAtLSBPcHRpbWl6YXRpb246IEd6aXAgU21vb3RoaW5nCiAgZ3ppcCBvbjsKICBnemlwX3R5cGVzIHRleHQvcGxhaW4gdGV4dC9jc3MgYXBwbGljYXRpb24vanNvbjsKCiAgIyAtLSBTRU8gJiBDYWNoZSBjb250cm9sIGZvciBzdGF0aWMKICBsb2NhdGlvbiAvc3RhdGljLyB7CiAgICBleHBpcmVzIDM2NWQ7CiAgICBhZGRfaGVhZGVyIENhY2hlLUNvbnRyb2wgInB1YmxpYywgbm8tdHJhbnNmb3JtIjsgCiAgfQoKICBsb2NhdGlvbiAvIHsKICAgIHByb3h5X3Bhc3MgaHR0cDovL2xvY2Fob3N0OjMwMDA7CiAgICBhZGRfaGVhZGVyIFgtQ29udGVudC1UeXBlLU9wdGlvbnMgIm5vc25pZmYiOwogIH0KfQ=="
/>

Оптимизация инфраструктуры: Настройка NGINX под высоконагруженный блог

В процессе разгона сайта в Lighthouse мы полностью переписали серверный конфиг NGINX. Ниже представлено интерактивное сравнение старого базового билда и новой оптимизированной конфигурации с поддержкой Gzip, кэшированием заголовков Cache-Control для статики и защитой от краулеров.

Code

💎 Как это будет выглядеть на разных устройствах:

  • На компьютерах (Десктопах): Воркер сопоставит строки, добавит пустые строки-заглушки напротив блоков gzip и location /static/, выровняет код идеально по горизонтали, подсветит синтаксис NGINX в палитре Material Oceanic и подставит маркеры + и -.
  • На смартфонах (Мобилках): Колонки растянутся, сработает CSS Scroll Snap с mandatory, и читатель сможет плавно свайпать пальцем влево-вправо между старой и новой версиями конфига, а кнопка переключения Side / Line позволит мгновенно увидеть диффы в один сплошной поток.

PWACacheManager

<PWACacheManager />

ДалееNGINX