Содержание статьи
Адам Келли
В этой статье я расскажу, как вы можете создать содержание для своей публикации Medium, и я покажу вам, как я создал эту функцию.
Содержание
Многие из вас, вероятно, видели эту публикацию о том, как ссылаться на части вашей статьи Medium. Возможно, вы также видели это расширение Chrome, упрощающее процесс.
Ну, вы можете сделать что-нибудь лучшее. Вот как автоматически создать содержимое для вашей статьи Medium.
1. Получите URL-адрес
Во-первых, вам нужен URL-адрес вашей средней статьи. Если он был опубликован, просто возьмите ссылку с адресной строки
Если вы все еще пишете, нажмите кнопку «поделиться» в правом верхнем углу и скопируйте ссылку оттуда
2. Создайте свое содержание
Теперь легкое. Перейдите на сайт www.mediumtoc.com, вставьте свой URL-адрес в строку ввода и нажмите «перейти».
Затем он должен предоставить вам содержимое, которое вы можете скопировать и вставить в свою среднюю статью!
Вы можете увидеть это в действии в верхней части публикации.
Как я это сотворил
Дизайн:
Сначала я создал сайт в Sketch. Я решил взять некоторые дизайнерские подсказки с веб-сайта Medium со шрифтом с засечками для заголовка, а также использовал тот же дизайн кнопки.
Я решил использовать панель ввода, поскольку дизайн функциональный и минималистичный, стиль, к которому я стремился.
развитие:
Архитектура этой программы в значительной степени базируется на стеке JAM. Это основано на идее наличия Javascript на стороне клиента, многократного использования API и предварительно созданной разметки. Это позволяет сайтам переходить на CDN.
Архитектура сайта такова:
Интерфейс: React и Preact (легкая виртуальная реализация DOM) в производстве
Задняя часть: Express работает на Now, хотя я планирую перейти на AWS Lambda, поскольку есть только 1 конечная точка API. Версия сканирует заголовки из статьи Medium и возвращает их ссылки.
Интерфейсный хостинг / CDN: Сайт работает на Netlify, который имеет бесплатную интеграцию SSL и автоматически разворачивается с главной ветви на GitHub.
Если кого-то заинтересовала любая из этих тем, оставьте комментарии и я напишу о них больше!
Сайт создавался и разрабатывался в течение двух дней. Первый день был сосредоточен на задней части сайта и дизайне. Второй день был разработкой. Есть только 4 компонента react, и я решил не использовать redux, потому что состояние не очень сильно меняется.
Получить источник!
Это открытый код, так что вы можете получить весь код на github.com/adamisntdead/medium-toc. ✨
Большая благодарность сообществу freeCodeCamp за отличную публикацию!