Хотел назвать эту статью «Как устроен типичный проект Sveltekit”, но понял, что имею очень маленький опыт разработки на этом фреймворке, поэтому правильнее и честнее было выбрать текущее название для статьи. В ней расскажу о внутренней кухне этого проекта, как все устроено изнутри, папки, файлы и так далее. Поехали в общем…

📌

Обратите внимание

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

Как и любой проект на NodeJS мой сайт внутри содержит в себе множество файлов и папок.

Проект
koltandev/
├── src/
│   ├── content/
│   │   ├── posts/
│   │   │   ├── first-post.md
│   │   │   ├── second-post.md
│   │   │   └── ...
│   │   └── works/
│   │       └── works.js
│   ├── lib/
│   │   ├── assets/
│   │   │   └── images/
│   │   │       ├── posts/
│   │   │       └── works/
│   │   ├── components/
│   │   │   ├── globals/
│   │   │   ├── home/
│   │   │   ├── icons/
│   │   │   ├── md/
│   │   │   ├── posts/
│   │   │   ├── BlogItem.svelte
│   │   │   └── ...
│   │   ├── styles/
│   │   │   └── style.css
│   │   ├── utils/
│   │   │   ├── dateFormat.js
│   │   │   ├── getPosts.js
│   │   │   └── ...
│   │   └── vars.js
│   └── routes/
│       ├── (pages)/
│       │   ├── about/
│       │   │   └── +page.svelte
│       │   ├── contact/
│       │   └── ...
│       ├── api/
│       │   └── posts/
│       │       └── +server.js
│       ├── blog/
│       │   ├── [slug]/
│       │   │   ├── +page.js
│       │   │   └── +page.svelte
│       │   ├── tag/
│       │   │   └── [tag]/
│       │   │       ├── +page.js
│       │   │       └── +page.svelte
│       │   ├── +page.js
│       │   └── +page.svelte
│       ├── rss.xml/
│       │   └── +server.js
│       ├── sitemap.xml/
│       ├── works/
│       │   └── +page.svelte
│       ├── +error.svelte
│       ├── +layout.svelte
│       ├── +page.svelte
│       ├── app.html
│       └── hooks.server.js
├── static/
│   ├── fonts/
│   │   └── ...
│   ├── icons/
│   │   ├── favicon.png
│   │   └── ...
│   ├── img/
│   │   └── ...
│   └── robots.txt
├── README.md
├── jsconfig.json
├── package.json
├── svelte.config.js
└── vite.config.js

Если не брать в расчет файлы package.json и vite.config.js, как наиболее общие нужные файлы, самый важный файл проекта это sveltekit.config.js. В нем прописана конфигурация моего сайта. Здесь мы подключаем adapter, нужный для правильного разворачивания проекта на выбранном хостинге, подключаем важные препроцессоры, в том числе css, подключаем важные плагины, например, mdsvex, который нужен для обработки markdown. Настройки безопасности, пререндеринга, да чего там только нет, в этом файле. Все очень нужное и полезное для проекта.

Static

Папка static находится в корне проекта. Внутри нее находятся шрифты, которые я затем подключаю через директиву @font-face в главном стилевом файле, а также фавиконки, некоторые картинки для сайта и файлы. Из последнего, у меня например в папке static находится файл robots.txt, который нужен для поисковиков.

Папка с контентом

Весь основной контент сайта находится в папке src. У меня два основных вида контента - это статьи и портфолио. Я их закинул в папку content. В подпапке posts находятся файлы markdown, в которых записаны статьи. Сделать из этих файлов полноценные страницы статей позволяет плагин mdsvex. В папке works, находится один единственный файл works.js, который содержит большой массив объектов, превращающихся затем в портфолио. При желании его можно организовать в аналогичную статьям систему, но я решил это не делать, чтобы сайт не разрастался на сотни малопосещаемых страниц.

Папка lib

Папка lib - самая функциональная. В ней содержатся подпапки, у каждой из которых свое предназначение. В assets содержатся картинки, которые затем обрабатываются для предания сайту скорости. В папке styles находится единственный файл стилей, где прописаны глобальные правила, переменные, сбросы и тому подобное. Большая папка utils включает в себя набор функций для помощи в правильном отображении разных частей сайта. Например, там есть скрипт, обрабатывающий markdown-файлы, скрипт, форматирующий дату, скрипт переключения сайта на темную тему и так далее.

Особое место в папке lib занимает папка с компонентами. В ней тоже много папок, которые я разделил по принципу принадлежности этих компонентов: там есть папка глобальных компонентов(вроде Header.svelte), папка компонентов для домашней страницы, папка для компонентов на странице статей (блоки похожих статей, например) и тому подобное. Папок много не бывает, я считаю, к тому же они более или менее правильно организуют рабочее пространство в проекте.

Заканчивая обзор папки lib, хочу рассказать про файл vars.js, находящийся в ее корне. Этот файл я завел не так давно и записал в него информационные и функциональные переменные для сайта, например, ссылки на мессенджеры, или, например, количество статей, которые должны выводится по нажатию на кнопку в блоге. Это позволит мне в будущем, если я захочу что-либо поменять на сайте, не бегать по файлам в поисках искомых данных, а менять все в одном файле, после чего все изменения окажутся в нужном месте.

Маршруты

Эта папка самая важная - ведь благодаря ей строятся страницы, их вложенность и адреса в поисковых строках браузера. В корне этой папки лежат файлы домашней страницы, главного макета сайта и страницы ошибки. В Svelte маршрут определяет папка внутри папки routes, а контент страницы по маршруту файлы, которые в ней лежат. Этой теме посвящен большой раздел в документации Svelte. Рекомендую к прочтению.

В моих маршрутах есть папки sitemap.xml и rss.xml, генерирующие, соответственно, карту сайта и фид блога. Парка works выводит страницу работ в портфолио. Папка api с подпапкой posts и файлом +server.js создает json-файл, который затем используется для создания блога. Сама папка blog кроме файлов с load-функцией и файла, выводящего посты на странице блога, также имеет в своем составе папку tag/[tag] создающую маршрут со статьями с определенными метками. Папка [slug] с файлами +page.js и +page.svelte динамически формирует страницы с отдельными статьями.

Полностью статичные страницы, к примеру, страницы «Обо мне», «Контакты» или «Политика конфиденциальности», у меня находится в папке (pages). Папка, внутри папки routes, название которой указано в круглых скобках, не формирует отдельный родительский маршрут для своих подпапок, а просто позволяет упорядочить страницы в проекте. Очень удобная фишка Svelte.

На этом все. Вряд ли эта статья станет для вас откровением, или с помощью нее вы познаете структуру проектов на Sveltekit, поэтому могу только надеяться на то, что она будет вам полезна. В будущей статье хочу рассказать вам о том, как можно создавать обычные страницы на своем сайте, не мучаясь с html-разметкой и при этом соблюдая правила маршрутизации Svelte. Подписывайтесь на блог. До встречи.

UPD. Новая таксономия на сайте

Уже после того, как я написал эту статью, на сайте произошло обновление, касаемое блога. Я добавил новую таксономию под названием «Серия». Главная причина - желание объединять некоторые статьи не только по тегу, но и по другому сугубо тематическому принципу. Дело в том, что тег - достаточно объемное понятие, а если я рассказываю про какую-то конкретную тематику, количество статей в которых априори ограничено, то создавать для нее отдельный тег неправильно. Поэтому в скором времени на сайте выйдет несколько серий, состоящих из частей/статей. Впрочем, одна серия уже вышла, и в ней уже два поста. Речь идет про мой рассказ и неряшливый туториал по установке статического сайта на Yandex Cloud. Можете присоединиться к прочтению. Скоро выйдет продолжение. Теперь точно, до встречи.