Рубрики
Без рубрики

Представляем Fusuma: Помощник для создания слайдов с помощью уценки

Представьте инструменты, которые могут сделать слайды, используя CLI. Tagged с JavaScript, React, Markdown, Tools.

Hiroppy/Fusuma

✍fusuma легко делает слайды с отметки.

Функции

  • Нулевая конфигурация
  • Предоставление различных режимов
  • Отметка и MDX
  • Темы
  • Синтаксис кода, Mathjax, диаграммы и блок -схемы
  • Благодаря браузеру слайды
    • Все результаты для маяков идеальны
    • Полная поддержка SEO и OGP
    • Проверка a11y (доступность)
  • Настраиваемый JavaScript и CSS
  • Боковая панель с повесткой дня и некоторыми функциями

Режимы

  • Инициатор режим
    • Создание слайда, стиля, файла конфигурации
    • Создание действий GitHub, которые автоматически развертывают слайды на GH-страницы
  • Режим разработки
    • Бег с HMR
    • Просто кодировка уценки, а иногда и CSS
  • Режим сборки
    • Рендеринг в HTML и оптимизация JS, CSS, MD
    • Создание изображения слайдов как OG: изображение и автоматически проверять A11Y
  • Режим презентации
    • Докладчик
    • Таймер
    • Записание действий и голоса вашей страницы
  • Развернуть режим
    • Развертывание на страницах GitHub
  • PDF -режим
    • Экспорт слайдов в PDF

Демо

Начиная

$ npm i fusuma -D
$

Создал CLI, который поддерживает для выпуска с 1 командой без написания Webpack, Babel, PostCSS и т. Д.

И сделать слайд только с отметки.

Это может быстро создать слайд и опубликовать его на GH-страницах.

Слайд: https://slides.hiroppy.me/the-present-and-future-of-javascript/ Репо: https://github.com/hiroppy/slides/tree/master/slides/the-present-and-future-of-javascript

горка: https://hiroppy.github.io/fusuma/fx/ Репо: https://github.com/hiroppy/fusuma/tree/master/samples/fx

Вы просто выполняете следующие три строки для выполнения, создания и развертывания слайдов.

$ npm i fusuma -D
$ npx fusuma init 
$ mkdir slides && touch slides/title.md && echo '# Hello😄' > slides/title.md

# --- executable tasks---
$ npx fusuma start    # development
$ npx fusuma build    # production as NODE_ENV=production
$ npx fusuma deploy   # deploy to github pages
$ npx fusuma pdf      # export as PDF from HTML

# --- Tree ---
$ tree -a
.
├── .fusumarc.yml
└── slides
    └── title.md

1 directory, 2 files

Когда NPX Fusuma Start выполняется, он выводит следующее.

Тема по умолчанию-сделанная на заказ-темно-небула.

И только .fusumarc.js и слайды/ являются необходимыми файлами во время выполнения.

Фусума поддерживает следующие задачи.

  • init : Сгенерировать файл конфигурации (.fusumarc.js)
  • старт : запустить с WebPack-Dev-Server
  • сборка : построить с WebPack4
  • развернуть : Загрузите предварительные файлы на GH-страницы
  • PDF : преобразовать предварительные файлы из HTML в PDF

Что он может сделать

  • Разработка, сборка и развертывание можно сделать с помощью одной команды
  • режим докладчика
  • Соглашение создается на боковой панели
  • может расширить CSS и JS
  • может установить OGP и SNS
  • так далее…

Что он не может сделать

Выражение анимации сложно, потому что слайд написан Marckdown. Тем не менее, вы можете написать слайд как HTML и расширить JS.

Если вы заинтересованы в Fusuma, пожалуйста, посмотрите этот репозиторий.

https://github.com/hiroppy/fusuma

Спасибо!

Оригинал: “https://dev.to/abouthiroppy/introduce-fusuma-that-is-a-helper-for-creating-a-slide-536”

Читайте ещё по теме: