Добро пожаловать во вторую часть нашей серии на jargons.dev!

Давайте займемся этим!

После первоначального коммита я начал работать над «скриптом форка» (интересно, что это такое? Вы узнаете позже в этой серии?), но я должен признаться, и, как вы увидите в истории коммитов, что я взял длительный перерыв (3 месяца) в работе над jargons.dev. За это время у меня была возможность поразмышлять над подсознанием, что очень помогло проекту.

Возможность размышления

Я на какое-то время прекратил работу над jargons.dev, не намеренно, а потому, что был настолько погружен в работу над Hearts, что даже не думал о jargons.dev. Что ж, в течение этих месяцев наступил новый год (конечно, с новыми целями), я также испытал и познакомился с некоторыми новыми технологиями. Одна технология мне особенно запомнилась — Astro.

Астрорезонанс с jargons.dev

В январе у меня была цель «изучить новые технологии с помощью документации». Это была задача, благодаря которой я начал работать с Astro после того, как услышал о ней много интересного.

Перенесемся вперед, в марте я обнаружил, что работаю над другим совершенно другим побочным проектом (wp-тема), я смотрел стрим Эдди Джауда на YT, где сообщил об этом Эдди, но его ответ в конечном итоге подтолкнул меня обратно к работе над жаргоны.dev

У вас довольно много побочных проектов... Я не знаю, какой именно.

Это заявление заставило меня серьезно задуматься, поэтому я решил остановить все множество побочных проектов и сразу сосредоточиться на тех, которые имеют значение, легко вспомнился jargons.dev.

К этому моменту я уже был немного знаком с Astro — фреймворком для веб-приложений, управляемых контентом, с очень простой файловой системой, поддержкой i18n, SSG с отличным SEO (важно для проекта), производительностью, поддержка других фронтенд-библиотек, таких как ReactJS, с островами (эта мне особенно нравится); это был созданный на небесах инструмент для создания jargons.dev.

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

Базовый словарь

Для этого я инициализировал новый проект Astro, достаточно просто запустить команду ниже и следовать подсказкам...

npm create astro@latest

Я также добавил интеграцию Tailwindcss для стилизации; интеграция mdx для контента; это также было очень легко настроить, просто выполнив команду соответственно

npx astro add tailwind
npx astro add mdx

Я продолжил и выполнил следующие задачи

• Создана стандартная домашняя страница со статической формой поиска
• Временно решено использовать каталог src/pages/word в качестве каталога, в котором каждое слово словаря должно храниться в виде файла mdx.
• Реализован макет word.astro, который служит рамкой, внутри которой содержимое всех файлов .mdx для слов внутри каталога src/pages/word/ может быть отображено с использованием Frontmatter.
• Также добавлена ​​статичная мини-форма поиска в навигационную панель макета слов.

Благодаря этой функции мы уже можем просматривать слова из словаря на маршруте jargons.dev/word/[word]. Это означает, что когда файл tuple.mdx присутствует в каталоге src/pages/word/, мы сможем получить доступ к странице, чтобы увидеть словарное слово, посетив jargons.dev/word/tuple

ПР

подвиг: реализовать базовый словарь #4

болтун опубликовано 24 марта 2024 г.

Этот запрос на включение реализует базовое словарное приложение с помощью AstroJS

Внесены изменения

• Начал новый астропроект
• Создана домашняя страница
• Реализовано 2 макета
  • Base — основная первичная оболочка для всех страниц и макетов
  • Word — макет для использования на страницах Word
• Реализованы триггеры статической формы поиска на главной странице и в макете Word

Скриншоты

Домашняя страница

Страница Word

Просмотреть на GitHub