За последние 12 месяцев мой учебник по созданию сайта документации на базе gatsby + airtable медленно, но неуклонно читался. Люди в восторге от этой технологии!
Итак, пришло время опубликовать обновление. Прошло 12 месяцев, но ясно, что эта технология никуда не денется.
Я все еще использую Airtable + Gastby. Я до сих пор люблю это!
Но не только для сайтов документации ... Я использую его для полнофункциональных, адаптивных целевых страниц, витрин и многого другого. Вот что дает мне этот стек:
- Почти идеальная оценка маяка.
- ⚛️ Великолепный React API. С его помощью можно создавать все.
- CSS-in-JS. Стилизованные компоненты, детка!
- … но по-прежнему статический, предварительно сгенерированный HTML. Лучшее из обоих миров!
- Страницы, ориентированные на Markdown. Нужна новая страница в моих документах? Просто напишите и разверните.
- Airtable как CMS. Так что мои партнеры, не являющиеся техническими специалистами, могут вместе писать, редактировать и обсуждать. А поскольку они знают уценку, они могут даже форматировать и добавлять фотографии!
- 🇪🇺 Полная поддержка нескольких языков / i18n. Хотите добавить совершенно новый язык? Я просто приглашаю переводчика в свой Airtable, и все готово! Небольшой скрипт в моем файле gatsby-config.ts заменит каждый ярлык страницы на локализованную версию.
- Все плюсы плагина Gatsby. Заголовки сайтов, Stripe, Analytics, обработка изображений, преобразование разметки в HTML и создание файлов Sitemap.
- Безопасная и полная оплата. Спасибо, Stripe!
- 💸 Совершенно бесплатно. Хостинг Firebase - моя единственная плата, и они очень щедры с их уровнем бесплатного пользования.
Доказательство в пудинге.
Недавно друг и предприниматель обратился к нам с идеей. Он хотел сделать компенсацию выбросов углерода более прозрачной и доступной для обычного человека. Он хотел построить красивую и простую витрину, где можно узнать о тщательно продуманных проектах по сокращению выбросов углерода и компенсировать свой личный углеродный след по разумной цене.
Я ухватился за возможность снова применить эти инструменты!
Он называется Offsetra, и мы его только что запустили. Это все Gatsby, TypeScript, Airtable и Firebase. Проверить это!
Короткое время загрузки, короткий цикл разработки.
Вы можете увидеть некоторое сходство между about.canvis.app и offsetra.com.
Поскольку у меня был отличный шаблон для работы, я просто клонировал репозиторий, затем клонировал базу Airtable, и я уже начал работать!
Но сначала я преобразовал все это в TypeScript. Недавно я преобразовал SPA canvis.app в TypeScript, теперь не могу жить без него. Я закончил макеты дизайна в Figma (дизайн действительно самая сложная часть во всем этом), а затем мы начали редактировать текст в Airtable.
Подготовка базы Airtable.
Я немного подправил свою систему, и мне это очень нравится. Вот как это работает.
Каждая страница на вашем сайте связана с одной таблицей в вашей базе. Например, у меня есть таблицы с названиями Указатель, Купить, Продукты, Проекты, FAQ. В них хранится весь текстовый контент для сайта.
У меня также есть одна таблица для Layout, которая представляет собой глобальные вещи, такие как нижний колонтитул страницы и навигационное меню.
Каждая строка в таблице представляет собой строку на веб-странице. Для простых страниц, таких как целевая страница, мне нужно только следующее:
- ID - «подзаголовок»
- Текст - «Вы можете предотвратить попадание в атмосферу одной тонны CO2 всего за 8 долларов».
- Язык - «en»
- Markdown - [необязательно, используется вместо текста, если моему тексту требуется встроенное форматирование, например полужирный и курсив]
А как насчет автоматически сгенерированных страниц?
Раздел «База знаний» организован несколько иначе. Эти страницы полностью выполнены в разметке. Здесь каждая строка в таблице - это одна страница в базе знаний. Я не буду вдаваться в подробности (см. Старый учебник), но отмечу, что я начал использовать некоторые формулы Airtable для объединения полей. Это полезно для создания полных путей к страницам, а также для объединения некоторых метаданных в верхней части каждой страницы с уценкой.
Как TypeScript сочетается с Gatsby?
Я обнаружил, что одна проблема заключалась в том, что если я неправильно написал идентификатор в своей таблице или в компонентах React, все это сломается. Я также устал переключаться между Airtable и VSCode, чтобы увидеть, какие поля я пропустил. Решение?
Просто скопируйте и вставьте столбец Airtable ID в тип Union!
type LandingPageContent = | "title" | "subtitle" | "project_1_title" | "project_2_title" | "blurb_1_body"
Теперь у меня есть прекрасный опыт редактирования TS. Не говоря уже о том, чтобы убедиться, что все мои реквизиты, состояние и все остальное в надлежащем порядке.
Собираем все вместе.
Установите плагин gatsby-source-airtable. Запросите содержание вашей страницы. Передайте его своему компоненту. Выполнено!
Страница, на которой вы можете подписаться на ежемесячный тарифный план Offsetra, состоит всего из 78 строк кода, включая импорт!
Нужна помощь? Протяни руку.
Я буду занят обновлением страницы about.canvis.app и добавлением функций в Canvis и Offsetra, но я буду рад помочь, если вам это нужно.
Ура,
Брендан
Canvis.app - это платформа для создания и участия в совместных картографических проектах. Недавно мы запустили несколько карт выпускников, где бывшие одноклассники могут повторно подключиться и увидеть, где оказались их сверстники. Вам следует запустить один для своей сети!
