Как импортировать сообщения Gatsby в Medium с помощью фрагментов кода Gist

Medium — отличная платформа для обмена сообщениями в блоге с более широкой аудиторией, но немного раздражает то, что для того, чтобы иметь фрагменты кода, вам нужно создать GitHub Gist (или другие) и встроить его в сообщение.

Поскольку я пишу много руководств в своем блоге, добавление всех моих фрагментов кода один за другим в GitHub Gist занимает много времени, а я очень ленив, поэтому давайте автоматизируем это.

Фрагменты кода на Гэтсби

Чтобы добавить фрагменты кода в Gatsby, вам нужно только использовать тройную обратную кавычку уценки и язык, который вы используете, как в примере ниже.

```javascript
    console.log('hello world!');
```

При этом Gatsby сгенерирует HTML-код, подобный приведенному ниже. Это будет важно позже.

Проблема

У Medium есть очень полезный инструмент для импорта любого поста из любого места в историю Medium, но, к сожалению, каждый фрагмент кода будет проигнорирован им.

В идеале я мог бы иметь специальный URL-адрес для своих сообщений в блоге, где все мои фрагменты кода были бы заменены URL-адресом GitHub Gist с этим кодом, и это именно то, что я собираюсь сделать дальше 😎.

Создание специального URL для Medium

Я хочу иметь возможность добавлять /medium-import в конец URL-адреса сообщений в блоге и загружать специальную страницу сообщений со всеми фрагментами кода, замененными GitHub Gists.

На файле gatsby-node.js в функции createPages я создам дополнительную страницу с путем /medium-import в конце.

Ко всем моим сообщениям в блоге теперь можно получить доступ через /blog-post-url, а также /blog-post-url/medium-import.

Генерация другого HTML для Medium

Для функции generateMediumHTML я буду использовать querySelectorAll, чтобы найти все узлы HTML с фрагментами кода и заменить их URL-адресами GitHub Gists.

Поскольку весь этот код будет выполняться на Node, мне понадобится jsdom, чтобы иметь возможность манипулировать файлом HTML DOM.

Все фрагменты кода будут заменены на <div class="gatsby-highlight" data-language="javascript">https://gist.github.com/some-gist-id</div>.

Использование API-интерфейса GitHub Gist

Я буду использовать GitHub Gist API для двух целей: получить все мои существующие Gist, чтобы избежать создания одного и того же Gist дважды с запросом GET, и создать новый Gist с запросом POST.

Поскольку код будет выполняться в Node, я буду использовать node-fetch для запросов API.

Для функции generateGistUrlsForPost я снова буду использовать функцию querySelectorAll, чтобы получить код через свойство textContent, а затем отправить его на GitHub через Gist API, для этого мне понадобится GitHub Personal Access Token.

Рендеринг нового HTML

В шаблоне компонента React у меня есть доступ к новому атрибуту с именем mediumHTML внутри pageContext, и это новый HTML со всеми фрагментами кода, замененными на GitHub Gists.

Теперь я могу зайти в Инструмент импорта носителя и импортировать любой пост через файл /blog-post-url/medium-import.

Со всей этой автоматизацией ожидайте увидеть гораздо больше Публикаций в Medium от меня 😊.

Первоначально опубликовано на https://pablo.gg.

Дополнительные материалы на plainenglish.io