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

Гэтсби искры радости

Я мигрировал из Джекилла в Гэтсби недавно и до сих пор у меня было действительно аккуратное время. Весь процесс т … Помечено GATSBY, WEBDEV, JavaScript, CSS.

Я мигрировал из Джекилла в Гэтсби недавно и до сих пор у меня было действительно аккуратное время. Весь процесс занял около недели повседневного кодирования (несколько часов здесь и там). Экосистема GATSBY позволила мне быстро добавить несколько функций в мой блог, который я подумал, что не хватает; Темный режим, лучший синтаксис подсветки и способность дизайна с компонентами.

GATSBY PELTERS – сайты Boilerplate GATSBY поддерживается сообществом Отказ Одна из причин, по которым я люблю их, это то, что они используют Семантический HTML . Это здорово, потому что:

  • Он помогает с поисковой оптимизацией – веб-скалы могут понимать, какие части ваших страниц важны.
  • Это помогает с доступностью – для людей, которые используют нетрадиционные браузеры и ScreeneeDers.
  • Это помогает с техническим обслуживанием – я смог подобрать стартер и понять, какие разные части шаблона упоминаются из-за семантических меток.

Возьми этот пример из GATSBY-Starter-Blog – самый популярный стартер и база для моего Текущий блог (встроенный стиль удален).

{post.frontmatter.title}

{post.frontmatter.date}


Я видел довольно несколько ресурсов для новичков веб-разработки, которые пропускают семантические HTML и поощряют то, что я позвоню «Div-Spamming». HTML5 SPEC весит на этом Выпуск Отказ

Авторы настоятельно рекомендуются просмотреть элемент div в качестве элемента последней курорта, потому что ни один другой элемент не подходит. Использование более подходящих элементов вместо элемента DIV приводит к лучшему доступности для читателей и более простых удобств для авторов.

Исходя из Джекилла

Я начал вести блог с Jekyll год назад, потому что я разместил свой блог на страницах GitHub, и это был статический генератор сайта с наименьшим трением. Это был отличный выбор в то время, когда он позволил мне встать и бежать сразу.

Я видел, как многие люди предупреждают других (в частности, инженеров), чтобы избежать качения своих собственных растворов для блога. Совет заключается в том, что вы должны сначала начать писать и публиковать. Это связано с тем, что построение блога может функционировать как промедление и кто знает, если вы на самом деле наслаждаетесь блогом (деятельностью) или идеей в блоге (достижение).

С Jekyll я использовал базовую усадьбу и передаю письменное содержание в GATSBY было не слишком сложно. Изображения должны были быть перемещены из одной дезорганизованной папки в отдельные папки. URL-адреса были немного боли и заняли 1,5 час ручной работы. Я хотел, чтобы все мои старые сообщения сохраняли свое местоположение в Интернете, поэтому я добавил бирку передней материи под названием дорожка Чтобы переопределить схему именования по умолчанию. Мои старые URL были слишком длинными и включены категории (которые я все еще предпринимаю), поэтому схема пути отныне будет только заголовка.

Я протянул Oncreatenode в gatsby-node.js. . Я не уверен, что это лучший путь для реализации этой функции Но это отлично работает.

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    // Check to use legacy path
    const slug = node.frontmatter.path || createFilePath({ node, getNode })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

Синтаксис выделения

Кодовые выдержки отображаются во многих моих сообщениях, и мне нравится, чтобы они были легко разбираться.

Я установил ГАТСБИ-ЗАМЕЧАНИЕ-ПРИМИСЫ Для синтаксиса выделения и поднялись и запущены примерно через час с другим часом, потраченным в стилях, чтобы соответствовать моим ложке света/темного режима. Я использую Тема новой луны Tania Rascia для моих выдержков кода. Я не мог найти версию темы для Prismjs, поэтому я извлек укладку из Тани (MIT-лицензирован) блог . Генеральная цветная тема сайта таможенная.

Одной из причин, по которым я упоминаю плагины, состоит в том, что мне трудно интегрировать их с Джекиллом, и я чувствую, что это не только мое неопытость с Рубином, который удерживал меня обратно. Возможно, это связано с ошеломляющим GATSBY, что означает, что есть современные ресурсы. Я внес один (маленький) исправление с открытым исходным кодом в проект Jekyll, и я все равно порекомендую это для тех, кто ищет разумную систему для HTML/CSS, имеющих широкую поддержку сообщества E.g., страницы GitHub, NetLify и т. Д. Если вы хотите избежать JavaScript, Jekyll – это путь.

Для моего света/темного режима я использую Гэтсби-плагин-темный режим который работает хорошо из коробки и имеет хорошую (но не большую) документацию. Для тематического переключения я исследовал и обнаружил, что общий шаблон должен был объявить переменные CSS в объеме организма, а затем переопределить эти переменные в класс объем. Таким образом, темный Класс может быть добавлен в Тег, который означает темный Переменные CSS принимают приоритет из-за специфичности CSS. Занятия затем переключаются и выключены

body {
  --bg: #eaeaeb;
  --textNormal: #414158;
}

body.dark {
  --bg: #21212c;
  --textNormal: #eaeaeb;
}

Проектирование с компонентами

Первый компонент реагирования, который я написал для моего блога, был для упаковки <Темаetoggler/> от Гэтсби-плагин-темный режим в компонент. Он переключается между солнцем и луной, чтобы сообщить пользователю, на какую тему можно переключить. База для этого является примером кода из документы .


  {({ theme, toggleTheme }) => (
    
  )}

Я никогда не использовал реагирование как часть раствора блога. Мне нравится иерархический подход UI, который поощряется. В том числе CSS-In-JS имеет смысл для масштаба моего сайта. Мне легче рассуждать и быстро и быстро

Как я развернул

Мой источник веб-сайта существует в репозитории Github. Я пишу в Markdown в VS Code, Commit и push. NetLify подключается к репозитории и создает и развертывает каждый коммит для освоения. Процесс сборки занимает 2М50 (30-е годы).

Я ранее использовал NetLify для Jekyll и устанавливая либо статический генератор сайта, вовлеченный около 10 кликов и ввод одну или две команды сборки. Прохождение покрывает все.

В целом, опыт GATSBY был очень приятным. Везде я смотрю в мой онлайн пузырь (Twitter, dev, lobste.rs), говорят о GATSBY. Приятно быть частью толпы.

Я также счастлив, что мой сайт (несмотря на то, что на основе реагирования) работает нормально без JavaScript (запрещая тему переключатель, что я могу спрятаться с Styling).

Присоединяйтесь к 200+ людям зарегистрировано на мой рассылка О программировании и личном росте!

Я чирикаю о коде @healecodes Отказ

Оригинал: “https://dev.to/healeycodes/gatsby-sparks-joy-409k”