Цей репозиторій містить простий мінімалістичний сайт‑портфоліо у стилі gruvbox, призначений для розгортання на GitHub Pages. Я описую, як працює автоматичне сканування підпапок, які файли шукаються, і як ти можеш налаштувати визначення власника/репо та поведінку автодетекції.
- Головна сторінка (root) —
index.html— містить логіку, яка намагається знайти підпапки в корені репозиторію та відобразити їх як "проєкти". - Для кожної підпапки сайт намагається отримати короткий опис: спочатку локально (через
./<folder>/index.html), потім через GitHub API (шукаєREADME.md,readme.md,index.htmlв цій папці). - Якщо нічого не знайдено, папка буде показана лише за назвою і посиланням на
./<folder>/. - UI має кнопки: переключити тему, оновити список, перемикати режим роботи (GitHub API vs локальний режим), показати/приховати "сховані" папки.
- Для швидкої діагностики у консолі браузера доступний об'єкт
window.pg(дивindex.html/script.js), який дозволяє вручну викликати сканування.
Скрипт намагається виявити owner та repo в такому порядку:
-
Метатеги в
index.html:- Якщо ти хочеш вказати явно, додай у
<head>:<meta name="gh-owner" content="твій-github-логін"><meta name="gh-repo" content="назва-репо">
- Цей варіант найнадійніший, особливо коли сайт не хоститься як
username.github.io.
- Якщо ти хочеш вказати явно, додай у
-
Якщо сайт хоститься як user page —
username.github.io:- Скрипт виводить
owner = username,repo = username.github.io.
- Скрипт виводить
-
Фallback через структуру URL:
- Якщо сайт розміщений під шляхом
/owner/repo/, скрипт спробує витягтиownerіrepoз першої і другої частин шляху.
- Якщо сайт розміщений під шляхом
Якщо визначити репозиторій не вдається — скрипт переходить до локального сканування (див. далі).
- Перш за все він намагається використати GitHub API (якщо дозволено і обрано режим
useApi).- Запит:
GET https://api.github.com/repos/{owner}/{repo}/contents/ - Отримує список елементів в корені репо, фільтрує елементи типу
dir. - Для кожної директорії може додатково робити запити на вміст файлів:
README.md,index.html.
- Запит:
- Якщо GitHub API недоступний (rate limit, CORS чи заблоковано), скрипт:
- Повертається до локального підходу: робить
HEAD/GETзапити до./<folder>/index.html, щоб перевірити наявність сторінки. - Може використовувати локальний файл
index.json(якщо ти бажаєш вручну вказати список папок), наприклад:index.json:{"folders": ["proj-a", "blog", "IWantSomeCatGirls"]}
- Повертається до локального підходу: робить
- Створи підпапку в корені репо, наприклад
projects/my-cool-site/. - Всередині папки має бути файл
index.html(рекомендовано) абоREADME.md(GitHub API).index.htmlдозволяє показати прев'ю,<title>і мета-опис без API.README.mdчитатиметься через GitHub API (при успішному використанні API).
- Після додавання — відкрий головну сторінку і натисни "Оновити" (Refresh) або виконай
window.pg.scan()в консолі.
- Явне вказання репозиторію (додай в
index.html):<meta name="gh-owner" content="cmpdchtr"><meta name="gh-repo" content="cmpdchtr.github.io">
- Вручну вказати список папок — створи
index.jsonв корені:{"folders": ["IWantSomeCatGirls", "projects", "docs"]}
- Змінити кольори/тему — редагуй
style.cssв корені (rootstyle.cssдля головної сторінки). Підсторінки мають свої стилі.
- GitHub API:
- Публічний GitHub API підтримує CORS, але існують обмеження за кількістю запитів (rate limits). Анонімні запити мають низький ліміт — при інтенсивному використанні може виникнути помилка.
- Якщо репозиторій приватний — клієнтська автентифікація з токеном не рекомендується в статичному сайті (токен буде доступний у браузері). Для приватних репо потрібен серверний проксі або інший підхід.
- CORS / Браузерні обмеження:
- Локальні
fetch('./folder/index.html')працюють лише якщо файл доступний по тій же області (same-origin) — це нормально для GitHub Pages.
- Локальні
- Безпека:
- Не додавай секретні токени у фронтенд.
- Уникай виконання стороннього JS зі знайдених підпапок автоматично (зміст підпапки використовується лише для читання title/description).
- Головна сторінка та логіка автосканування:
index.html(root). - Скрипт:
script.js(root) — тут знаходиться логіка визначення репо, запитів до GitHub API і локального сканування. - Стилі:
style.css(root) — gruvbox‑палітра і компоненти UI. - Існуючі підпапки в репо (наприклад
IWantSomeCatGirls/) мають своїindex.html,style.cssтаscript.jsза потреби.
- Відкрий DevTools → Console.
- Виклич:
window.pg.scan()— вручну примусити сканування.window.pg.setPreferApi(false)— заборонити використання GitHub API (форсувати локальний режим).window.pg.setShowHidden(true)— показати сховані папки.
- Статус дій скрипту видно у бічній панелі (aside) і внизу секцій.
- Кожна "папка-проєкт" повинна мати хоча б
index.htmlабоREADME.mdдля гарного прев'ю. - У
index.htmlкожної підпапки рекомендую додати<title>та<meta name="description" content="...">— скрипт зчитає ці поля й покаже опис в карточці. - Щоб була автоматична детекція власника, хости сайт як user page (
username.github.io) — тоді визначення owner/repo працює без додаткових метатегів.
Якщо хочеш, я можу:
- Згенерувати чіткий приклад
index.jsonабо шаблонindex.htmlдля підпапки. - Допомогти додати README в кожну підпапку із шаблоном для кращого прев'ю.
- Письмово показати приклад метатегів, якщо треба вставити їх прямо в
index.html.
Пиши, що саме ти хочеш покращити або автоматизувати далі — я допоможу конкретним кодом та інструкціями.