Подробности про новый сайт

Перенос данных

protected static function normalizeContent(string $content): string
{

    // Убираем экранирование всяких тегов MODX
    $content = html_entity_decode($content);

    // Заменяем теги с кодом на плейсхолдеры, чтобы конвертор их не трогал
    $content = str_replace(
        ["'<pre>'", "'</pre>'", '"<pre>"', '"</pre>"'],
        ["'&lt;pre&gt;'", "'&lt;/pre&gt;'", '"&lt;pre&gt;"', '"&lt;/pre&gt;"'],
        $content
    );
    $blocks = [];
    preg_match_all('#<(?:pre|code).*?>(.*?)</(?:pre|code)>#ms', $content, $matches);
    if (!empty($matches[1])) {
        foreach ($matches[1] as $idx => $match) {
            if ($match) {
                $blocks[$idx] = $match;
                $content = str_replace($matches[0][$idx], "\n<!--code-$idx-code-->\n", $content);
            }
        }
    }

    // Меняем старые теги на понятные конвертору
    $content = str_replace(
        ['<b>', '</b>', '<i>', '</i>', '<s>', '</s>'],
        ['<strong>', '</strong>', '<em>', '</em>', '~~', '~~'],
        $content
    );
    // Тут тоже меняем старое барахло и приводим в порядок переносы и пустые строки
    $content = preg_replace('#<cut\s?/>#m', "\n", $content);
    $content = preg_replace('#<(br.*?|br)>#m', "\n", $content);
    $content = preg_replace("#[\n\r]{2,}#m", '<br><br>', $content);
    $content = preg_replace('#<video>(.*?)</video>#m', '<a href="$1">$1</a>', $content);

    // Самое главное - конвертирование из HTML в Markdown
    $converter = new HtmlConverter([
        'strip_tags' => false,
        'hard_break' => true,
        'use_autolinks' => false,
        'preserve_comments' => true,
    ]);
    $converter->getEnvironment()->addConverter(new TableConverter());
    try {
        $content = $converter->convert($content);
    } catch (Exception $e) {
        // Если конвертор офигел от содержимого - смотрим, что там
        echo $content;
        print_r($blocks);
    }

    // Заменяем плейсхолдеры обратно на блоки с кодом
    if (!empty($blocks)) {
        foreach ($blocks as $idx => $block) {
            $content = str_replace(
                ["\<!--code-$idx-code-->", "<!--code-$idx-code-->"],
                "\n```\n$block\n```\n",
                $content
            );
        }
    }

    // Повторно декодируем всё экранированное, вдруг что осталось
    $content = html_entity_decode($content);

    // А это уже остаётся от комментариев после конвертора - тоже убираем
    return str_replace('\<!--', '<!--', $content);
}

Как работает сайт

Редактор

• Ctrl+B - жирный текст
• Ctrl+S - сохранить
• Ctrl+I - курсив
• Ctrl+F - развернуть и свернуть на весь экран
• Ctrl+P - вкл\выкл предпросмотр

    ```php

    echo 'Hello World';

И получится
```php

echo 'Hello World';

const renderText = (text) => {
  text = marked.parse(text) // Markdown => HTML

  // Вырезаем опасные теги и прочий XSS, если вдруг как-то пролезло
  if (DOMPurify.sanitize) {
    text = DOMPurify.sanitize(text, purifyConfig)
  }

  // Тут идёт замена регулярок для ссылок youtube на iframe
  replaceFrom.forEach((regexp, idx) => {
    text = text.replace(regexp, replaceTo[idx])
  })

  // И поиск галерей внутри ul и ol
  const matches = text.match(/<(?:ul|ol)>.*?<\/(?:ul|ol)>/gms)
  if (matches) {
    matches.forEach((match) => {
      if (match.includes('<img')) {
        text = text.replace(match, match.replace(/<(ul|ol)>/, '<$1 class="thumbnails">'))
      }
    })
  }

  return text.trim()
}

const clickText = (e) => {
  // Выбираем ссылки
  const link = e.target.tagName === 'A' ? e.target : e.target.parentNode.tagName === 'A' ? e.target.parentNode : null
  if (link) {
    let href = link.href
    const isImg = /\.(jpe?g|gif|png|webp)$/.test(href)
    // Если это картинка
    if (isImg) {
      const elements = []
      const thumbnails = e.target.closest('ul.thumbnails')
      // И картинка внутри галереи
      if (thumbnails) {
        const links = thumbnails.querySelectorAll('a')
        // Собираем внутрь все картинки блока
        links.forEach((a) => {
          elements.push({href: a.href, type: 'image'})
        })
      } else {
        elements.push({href, type: 'image'})
      }
      // И выводим картинку всплывашкой
      if (elements.length) {
        e.preventDefault()
        app.$lightbox({elements}).open()
      }
    }

    // Если же это обычная ссылка, то проверяем адрес
    // Относительные ссылки приводим к абсолютным
    if (!/:\/\//.test(href) && !/mailto:/.test(href)) {
      href = 'https://bezumkin.ru' + href
    }

    // А потом проверяем адрес и внутренние страницы открываем через роутер Vue
    if (/https?:\/\/bezumkin\.ru/.test(href) && !/\.ru\/api\//.test(href)) {
      const url = new URL(href)
      const route = app.router.resolve(url.pathname + url.search + url.hash)
      if (route.route) {
        e.preventDefault()
        app.router.push(route.route)
      }
    } else {
      // Все остальные ссылки открываем в новом окне
      link.target = '_blank'
    }
  }
}

Планы на будущее

• [x] Настроить OpenGraph для красивого расшаривания заметок
• [ ] Редактирование профиля пользователя, включая загрузку аватарок.
• [ ] Поддержку этих аватарок в комментариях
• [ ] Удобную загрузку картинок, по типу Github и Gitlab (когда их просто кидаешь в текст)
• [ ] Старые картинки все нужно проверить и выкачать на свой сервер
• [ ] А еще нужно проверить и отредактировать старые заметки, заодно проверить и убрать мёртвые ссылки
• [ ] Избранные заметки и комментарии
• [ ] Поиск по сайту

• Начать писать заметки по работе с Vesp, которые будут переезжать на https://vesp.pro как документация.
• Возможно (возможно!) новые платные обучающие курсы по работе с современными технологиями. Но тут как и соцсетями непонятно, нужно ли это кому, учитывая как заспамили всё вокруг всякие geekbox и skillbrains.

• Например, сделать закрытые разделы по типу patreon только для подписчиков и там рассказывать про что-то очень интересное, вроде опыта работы с международными проектами.
• Дать возможность пользоваться этим и другим авторам со справедливой моделью выплат, вроде честного процента от ативности подписчиков. Типа у кого сколько заметки читали\комментировали - столько процентов от месячного сбора подписок и получаешь.