README_russian.md

Anisun

Сайт для просмотра аниме на основе Next.js и Mantine UI

Сайт переписывается. Прогресс можно посмотреть здесь: v5 branch

English | Русский

📱 Скриншоты

Больше скриншотов

Раскрыть

⚙️ Набор технологий

• Next.js с использованием TypeScript

• Mantine UI в качестве UI-кита с PostCSS

• Drizzle ORM и Neon Serverless DB для хранения данных

• Tanstack Query и axios для получения данных с API

• Слайдер аниме карточек на базе Embla Carousel и Mantine UI Carousel

• Clerk Auth для авторизации

• Плеер видео для Anilibria API на основе Vidstack.js и HLS.js

• KodikWrapper для получения видеоплеера Kodik по Shikimori ID

• Система уведомлений на базе Mantine UI Notifications

• Форматирование даты и времени с помощью Day.js

• Применение CSS-модулей

⭐️ Возможности

• Просмотр аниме с субтитрами или озвучкой (на русском или английском)

• Загрузка аниме с торрента или напрямую через сайт (.m3u8)

• Авторизация в аккаунт

• Система комментариев с бесконечной вложенностью, как на реддите

• Тёмная и светлая темы

• Поиск аниме с фильтрами

• Кастомная навигация с помощью router'а из Next.js для более быстрого перемещения между страницами

...и ещё много чего!

✅ Список задач

• Локализировать сайт с next-intl

• Добавить возможность выбирать базу данных в .env.local

• Добавить возможность загрузки аниме с торрента или напрямую через сайт

• Прикрутить API от SovetRomanticaVideo

• Доделать страницу с поиском и фильтрами аниме

• Доделать комментарии

• Доделать страницу с популярными аниме

⬇️ Запуск

Локально

Подготовка

Раскрыть шаги

Клонирование репозитория

1. Клонируйте этот репозиторий, введя git clone https://github.com/notwindstone/anisun

2. Переименуйте находящийся в корне приложения файл .env.example в .env.local

Настройка Clerk auth

1. Зарегистрируйтесь на https://clerk.com

2. Зайдите в Панель управления (Dashboard) Clerk и создайте новое приложение

3. Перейдите в пункт API Keys в левом меню и скопируйте Publishable key (Пример: pk_test_qwertyuiop1234567890)

4. Вставьте Publishable key в строку NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY в файле .env.local

5. Перейдите в пункт API Keys в левом меню и скопируйте Secret keys (Пример: sk_test_qwertyuiop1234567890)

6. Вставьте Publishable key в строку CLERK_SECRET_KEY в файле .env.local

Настройка базы данных: 1. Neon Serverless DB

Вы можете использовать Neon Serverless DB в качестве базы данных. Если вы собираетесь использовать локальный PostgreSQL, то перейдите к следующему этапу

1. Зарегистрируйтесь на https://neon.tech/ и создайте там новый проект

2. Перейдите в Панель управления (Dashboard) Neon DB и скопируйте Connection string (Пример: postgres://postgres:adminadmin@0.0.0.0:5432/db?sslmode=require)

3. Вставьте Connection string в строку NEON_DATABASE_URL в файле .env.local

4. Убедитесь, что в строке DATABASE_TYPE в файле .env.local стоит значение NEON

Настройка базы данных: 2. Локальный PostgreSQL

Вы можете использовать локальный PostgreSQL в качестве базы данных. Если вы собираетесь использовать базу данных Neon Serverless, то пропустите этот этап

1. Откройте файл .env.local и вставьте адрес базы данных в POSTGRESQL_DATABASE_URL

2. Поменяйте значение у DATABASE_TYPE с NEON на POSTGRESQL в файле .env.local

Последние штрихи

1. (Необязательно) Если вы хотите смотреть аниме не только через плеер Anisun (который только с озвучкой Anilibria), но и через Kodik, то получите токен Kodik на http://kodik.cc/ (вам нужно связаться с ними через email почту)

2. Запустите команду npm install для того, чтобы установить все зависимости

3. Создайте таблицу комментариев в базе данных с помощью команды npx drizzle-kit push:pg

4. Готово! Теперь вы можете запустить приложение

Important

Вот так должен выглядеть файл .env.local после всех махинаций выше с конфигурацией базы данных Neon Serverless DB

DATABASE_TYPE='NEON'
NEON_DATABASE_URL='postgres://postgres:adminadmin@0.0.0.0:5432/db'
POSTGRESQL_DATABASE_URL='CHANGE_IT_postgres://postgres:adminadmin@0.0.0.0:5432/db'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_qwertyuiop1234567890
CLERK_SECRET_KEY=sk_test_qwertyuiop1234567890
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
KODIK_TOKEN='qwertyuiop1234567890'

Important

Вот так должен выглядеть файл .env.local после всех махинаций выше с конфигурацией базы данных локального PostgreSQL

DATABASE_TYPE='POSTGRESQL'
NEON_DATABASE_URL='CHANGE_IT_postgres://postgres:adminadmin@0.0.0.0:5432/db'
POSTGRESQL_DATABASE_URL='postgres://postgres:adminadmin@0.0.0.0:5432/db'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_qwertyuiop1234567890
CLERK_SECRET_KEY=sk_test_qwertyuiop1234567890
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
KODIK_TOKEN='qwertyuiop1234567890'

Разработки

Если вы хотите запустить сайт в режиме разработки

npm run dev

Продакшн

Tip

Запускайте сайт в этом режиме, если не знаете, какой выбрать

Если вы хотите запустить сайт в режиме продакшна

npm run build

npm run start

Ссылка на сайт

Откройте http://localhost:3000 в браузере, чтобы зайти на сайт

Vercel

Раскрыть шаги

Нажмите кнопку ниже:

Затем перейдите по Project -> Settings -> Environment Variables и создайте следующие переменные с ключом и значением:

1. DATABASE_TYPE - NEON

2. NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL - /

3. NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL - /

4. NEXT_PUBLIC_CLERK_SIGN_UP_URL - /

5. NEXT_PUBLIC_CLERK_SIGN_IN_URL - /

6. CLERK_SECRET_KEY - ваш собственный Secret key с сайта https://clerk.com

7. NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY - ваш собственный Publishable key с сайта https://clerk.com

8. NEON_DATABASE_URL - ваш собственный Connection string с сайта https://neon.tech/

9. (Необязательно) KODIK_TOKEN - ваш собственный ключ с сайта http://kodik.cc/ (вам нужно связаться с ними через email почту). Сайт может работать и без ключа, но в таком случае не будут показываться аниме в Kodik Player'е

Termux

Раскрыть шаги

1. Установите PRoot дистрибутив линукса, например, через Andronix

2. Установите Node.js, NPM и Git

3. Следуйте дальнейшим указаниям из пункта локального запуска

💬 Контакты

Напрямую

• Telegram - @windst1

• Discord - @notwindstone

Через наш чат или сервер

• Discord - Сага о сервере

🤝 Помочь с переводом

Помощь приветствуется!

Note

To-Do: Hosted Weblate

⭐️ График роста кол-ва звёздочек

❤️ Особая благодарность

• zvshka за оказание помощи при создании проекта

• cos (discord аккаунт) за оказание помощи в дизайне сайта

• Shikimori, Anilibria, Kodik и SovetRomantica за их прекрасные API, без которых Anisun не смог бы работать

• Sora и Sync for Reddit. Некоторые элементы дизайна были позаимствованы у них

• Node-shikimori wrapper. Некоторый код был позаимствован с этого враппера

📜 Лицензия

🌐 Ресурсы

• Refactoring Hell

• Соглашение о коммитах

• Realtime Colors