diff --git a/package-lock.json b/package-lock.json
index 7462149c..445341db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "coryd.dev",
- "version": "1.5.5",
+ "version": "1.5.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
- "version": "1.5.5",
+ "version": "1.5.6",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",
diff --git a/package.json b/package.json
index 229db553..36ee7dfd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "coryd.dev",
- "version": "1.5.5",
+ "version": "1.5.6",
"description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module",
"engines": {
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index bff8a111..c6762b47 100644
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@@ -1,260 +1,269 @@
-window.addEventListener('load', () => {
+window.addEventListener("load", () => {
// menu keyboard controls
- ;(() => {
- const menuInput = document.getElementById('menu-toggle')
- const menuButtonContainer = document.querySelector('.menu-button-container')
- const menuItems = document.querySelectorAll('.menu-primary li')
+ (() => {
+ const menuInput = document.getElementById("menu-toggle");
+ const menuButtonContainer = document.querySelector(
+ ".menu-button-container"
+ );
+ const menuItems = document.querySelectorAll(".menu-primary li");
- menuButtonContainer.addEventListener('keydown', (e) => {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault()
- menuInput.checked = !menuInput.checked
+ menuButtonContainer.addEventListener("keydown", (e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ menuInput.checked = !menuInput.checked;
}
- })
+ });
menuItems.forEach((item) => {
- item.addEventListener('keydown', (e) => {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault()
- item.querySelector('a').click()
+ item.addEventListener("keydown", (e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ item.querySelector("a").click();
}
- })
- })
+ });
+ });
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Escape' && menuInput.checked) menuInput.checked = false
- })
- })()
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "Escape" && menuInput.checked) menuInput.checked = false;
+ });
+ })();
// modal keyboard controls and scroll management
- ;(() => {
- const modalInputs = document.querySelectorAll('.modal-input')
- if (!modalInputs) return
+ (() => {
+ const modalInputs = document.querySelectorAll(".modal-input");
+ if (!modalInputs) return;
const toggleBodyScroll = (disableScroll) => {
if (disableScroll) {
- document.body.style.overflow = 'hidden'
+ document.body.style.overflow = "hidden";
} else {
- document.body.style.overflow = ''
+ document.body.style.overflow = "";
}
- }
+ };
const checkModals = () => {
- let isAnyModalOpen = false
+ let isAnyModalOpen = false;
modalInputs.forEach((modalInput) => {
- if (modalInput.checked) isAnyModalOpen = true
- })
- toggleBodyScroll(isAnyModalOpen)
- }
+ if (modalInput.checked) isAnyModalOpen = true;
+ });
+ toggleBodyScroll(isAnyModalOpen);
+ };
modalInputs.forEach((modalInput) => {
- modalInput.addEventListener('change', checkModals)
- })
+ modalInput.addEventListener("change", checkModals);
+ });
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Escape') {
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "Escape") {
modalInputs.forEach((modalInput) => {
- if (modalInput.checked) modalInput.checked = false
- })
- toggleBodyScroll(false)
+ if (modalInput.checked) modalInput.checked = false;
+ });
+ toggleBodyScroll(false);
}
- })
+ });
- checkModals()
- })()
+ checkModals();
+ })();
// text toggle for media pages
- ;(() => {
- const button = document.querySelector('[data-toggle-button]')
- const content = document.querySelector('[data-toggle-content]')
- const text = document.querySelectorAll('[data-toggle-content] p')
- const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
- const interiorHeight = Array.from(text).reduce((acc, node) => acc + node.scrollHeight, 0)
+ (() => {
+ const button = document.querySelector("[data-toggle-button]");
+ const content = document.querySelector("[data-toggle-content]");
+ const text = document.querySelectorAll("[data-toggle-content] p");
+ const minHeight = 500; // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
+ const interiorHeight = Array.from(text).reduce(
+ (acc, node) => acc + node.scrollHeight,
+ 0
+ );
- if (!button || !content || !text) return
+ if (!button || !content || !text) return;
if (interiorHeight < minHeight) {
- content.classList.remove('text-toggle-hidden')
- button.style.display = 'none'
- return
+ content.classList.remove("text-toggle-hidden");
+ button.style.display = "none";
+ return;
}
- button.addEventListener('click', () => {
- const isHidden = content.classList.toggle('text-toggle-hidden')
- button.textContent = isHidden ? 'Show more' : 'Show less'
- })
- })()
+ button.addEventListener("click", () => {
+ const isHidden = content.classList.toggle("text-toggle-hidden");
+ button.textContent = isHidden ? "Show more" : "Show less";
+ });
+ })();
// search logic
- ;(() => {
- if (!MiniSearch || !document.querySelector('.search__form')) return
-
+ (() => {
+ if (!MiniSearch || !document.querySelector(".search__form--input")) return;
+
const miniSearch = new MiniSearch({
- fields: ['title', 'description', 'tags', 'type'],
- idField: 'id',
- storeFields: ['id', 'title', 'url', 'description', 'type', 'tags', 'total_plays'],
- searchOptions: {
- boost: { title: 2, tags: 1.5 },
- prefix: true,
- fuzzy: 0.3,
- },
- })
-
- const $form = document.querySelector('.search__form')
- const $input = document.querySelector('.search__form--input')
- const $typeCheckboxes = document.querySelectorAll('.search__form--type input[type="checkbox"]')
- const $results = document.querySelector('.search__results')
- const $loadMoreButton = document.querySelector('.search__load-more')
-
- const PAGE_SIZE = 10
- let currentPage = 1
- let currentResults = []
- let totalResults = 0
- let resultsById = {}
- let debounceTimeout
-
- const parseMarkdown = (markdown = '') =>
- markdown
- .replace(/\*\*(.*?)\*\*/g, '$1')
- .replace(/\*(.*?)\*/g, '$1')
+ fields: ["title", "description", "tags", "type"],
+ });
+ const $form = document.querySelector(".search__form");
+ const $input = document.querySelector(".search__form--input");
+ const $fallback = document.querySelector(".search__form--fallback");
+ const $typeCheckboxes = document.querySelectorAll(
+ '.search__form--type input[type="checkbox"]'
+ );
+ const $results = document.querySelector(".search__results");
+ const $loadMoreButton = document.querySelector(".search__load-more");
+
+ $form.removeAttribute("action");
+ $form.removeAttribute("method");
+ if ($fallback) $fallback.remove();
+
+ const PAGE_SIZE = 10;
+ let currentPage = 1;
+ let currentResults = [];
+ let total = 0;
+ let resultsById = {};
+ let debounceTimeout;
+
+ const parseMarkdown = (markdown) => {
+ if (!markdown) return "";
+ return markdown
+ .replace(/\*\*(.*?)\*\*/g, "$1")
+ .replace(/\*(.*?)\*/g, "$1")
.replace(/\[(.*?)\]\((.*?)\)/g, '$1')
- .replace(/\n/g, '
')
- .replace(/[#*_~`]/g, '')
-
+ .replace(/\n/g, "
")
+ .replace(/[#*_~`]/g, "");
+ };
+
const truncateDescription = (markdown, maxLength = 150) => {
- const htmlDescription = parseMarkdown(markdown)
- const tempDiv = document.createElement('div')
- tempDiv.innerHTML = htmlDescription
- const plainText = tempDiv.textContent || tempDiv.innerText || ''
- return plainText.length > maxLength ? `${plainText.substring(0, maxLength)}...` : plainText
- }
-
+ const htmlDescription = parseMarkdown(markdown);
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = htmlDescription;
+ const plainText = tempDiv.textContent || tempDiv.innerText || "";
+ return plainText.length > maxLength
+ ? `${plainText.substring(0, maxLength)}...`
+ : plainText;
+ };
+
const formatArtistTitle = (title, totalPlays) =>
- totalPlays > 0 ? `${title} ${totalPlays} plays` : title
-
- const updateLoadMoreButton = () => {
- const moreResultsToShow = currentPage * PAGE_SIZE < totalResults
- $loadMoreButton.style.display = moreResultsToShow ? 'block' : 'none'
- }
-
- const renderSearchResults = results => {
- const resultHTML = results.map(({ title, url, description, type, total_plays }) => {
- const truncatedDesc = truncateDescription(description)
- const formattedTitle = type === 'artist' && total_plays !== undefined
- ? formatArtistTitle(title, total_plays)
- : title
-
- return `
-
-
- ${formattedTitle}
-
- ${truncatedDesc}
-
- `
- }).join('')
-
- $results.innerHTML = resultHTML || 'No results found.'
- $results.style.display = 'block'
- }
-
- const appendSearchResults = results => {
- const resultHTML = results.map(({ title, url, description, type, total_plays }) => {
- const truncatedDesc = truncateDescription(description)
- const formattedTitle = type === 'artist' && total_plays !== undefined
- ? formatArtistTitle(title, total_plays)
- : title
-
- return `
-
- ${formattedTitle}
- ${truncatedDesc}
-
- `
- }).join('')
-
- $results.insertAdjacentHTML('beforeend', resultHTML)
- }
-
- const loadSearchIndex = async (query = '', types = [], page = 1) => {
- const typeQuery = types.join(',')
- try {
- const response = await fetch(`http://localhost:8787/api/search?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`)
- const index = await response.json()
-
- const results = index.results || []
- totalResults = index.total || 0
-
- if (!Array.isArray(results)) throw new Error('Expected results to be an array')
-
- resultsById = results.reduce((acc, item) => {
- acc[item.id] = item
- return acc
- }, {})
-
- if (page === 1) {
- miniSearch.removeAll()
- miniSearch.addAll(results)
- }
-
- return results
- } catch (error) {
- console.error('Error fetching search data:', error)
- return []
+ totalPlays > 0
+ ? `${title} ${totalPlays} plays`
+ : title;
+
+ const renderSearchResults = (results) => {
+ if (results.length > 0) {
+ const resultHTML = results
+ .map(({ title, url, description, type, total_plays }) => {
+ const truncatedDesc = truncateDescription(description);
+ const formattedTitle =
+ type === "artist" && total_plays !== undefined
+ ? formatArtistTitle(title, total_plays)
+ : title;
+
+ return `
+
+
+ ${formattedTitle}
+
+ ${truncatedDesc}
+
+ `;
+ })
+ .join("");
+
+ $results.innerHTML = resultHTML;
+ $results.style.display = "block";
+ } else {
+ $results.innerHTML =
+ 'No results found.';
+ $results.style.display = "block";
}
- }
-
- const getSearchResults = query =>
- miniSearch.search(query).map(({ id }) => resultsById[id])
- .filter(result => getSelectedTypes().includes(result.type))
-
+ };
+
+ const appendSearchResults = (results) => {
+ const newResults = results
+ .map(({ title, url, description, type, total_plays }) => {
+ const truncatedDesc = truncateDescription(description);
+ const formattedTitle =
+ type === "artist" && total_plays !== undefined
+ ? formatArtistTitle(title, total_plays)
+ : title;
+
+ return `
+
+ ${formattedTitle}
+ ${truncatedDesc}
+
+ `;
+ })
+ .join("");
+ $results.insertAdjacentHTML("beforeend", newResults);
+ };
+
+ const loadSearchIndex = async (query = "", types = []) => {
+ const typeQuery = types.join(",");
+
+ try {
+ const response = await fetch(
+ `https://coryd.dev/api/search?q=${query}&type=${typeQuery}&page=${currentPage}&pageSize=${PAGE_SIZE}`
+ );
+ const index = await response.json();
+ const results = index.results || [];
+
+ total = index.total || results.length;
+
+ resultsById = results.reduce((acc, item) => {
+ acc[item.id] = item;
+ return acc;
+ }, {});
+
+ miniSearch.removeAll();
+ miniSearch.addAll(results);
+
+ currentResults = results;
+ return resultsById;
+ } catch (error) {
+ console.error("Error fetching search data:", error);
+ return {};
+ }
+ };
+
const getSelectedTypes = () =>
Array.from($typeCheckboxes)
- .filter(checkbox => checkbox.checked)
- .map(checkbox => checkbox.value)
-
- const handleInputEvent = async () => {
- const query = $input.value.trim()
- clearTimeout(debounceTimeout)
-
+ .filter((checkbox) => checkbox.checked)
+ .map((checkbox) => checkbox.value);
+
+ $input.addEventListener("input", () => {
+ const query = $input.value.trim();
+ clearTimeout(debounceTimeout);
+
if (!query) {
- renderSearchResults([])
- $loadMoreButton.style.display = 'none'
- return
+ renderSearchResults([]);
+ $loadMoreButton.style.display = "none";
+ return;
}
-
+
debounceTimeout = setTimeout(async () => {
- const results = await loadSearchIndex(query, getSelectedTypes(), 1)
- currentResults = results
- currentPage = 1
-
- renderSearchResults(getResultsForPage(currentPage))
- updateLoadMoreButton()
- }, 300)
- }
-
- const handleCheckboxChange = async () => {
- const results = await loadSearchIndex($input.value.trim(), getSelectedTypes(), 1)
- currentResults = results
- currentPage = 1
-
- renderSearchResults(getResultsForPage(currentPage))
- updateLoadMoreButton()
- }
-
- const handleLoadMoreClick = async () => {
- currentPage++
- const nextResults = await loadSearchIndex($input.value.trim(), getSelectedTypes(), currentPage)
- appendSearchResults(nextResults)
-
- updateLoadMoreButton()
- }
-
- const getResultsForPage = page =>
- currentResults.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
-
- $input.addEventListener('input', handleInputEvent)
- $typeCheckboxes.forEach(checkbox => checkbox.addEventListener('change', handleCheckboxChange))
- $loadMoreButton.addEventListener('click', handleLoadMoreClick)
- })()
-})
\ No newline at end of file
+ await loadSearchIndex(query, getSelectedTypes());
+ currentPage = 1;
+
+ renderSearchResults(getResultsForPage(currentPage));
+ $loadMoreButton.style.display = total > PAGE_SIZE ? "block" : "none";
+ }, 300);
+ });
+
+ $typeCheckboxes.forEach((checkbox) => {
+ checkbox.addEventListener("change", async () => {
+ await loadSearchIndex($input.value.trim(), getSelectedTypes());
+ currentPage = 1;
+
+ renderSearchResults(getResultsForPage(currentPage));
+ $loadMoreButton.style.display = total > PAGE_SIZE ? "block" : "none";
+ });
+ });
+
+ $loadMoreButton.addEventListener("click", () => {
+ currentPage++;
+ const nextResults = getResultsForPage(currentPage);
+ appendSearchResults(nextResults);
+
+ $loadMoreButton.style.display =
+ currentPage * PAGE_SIZE < total ? "block" : "none";
+ });
+
+ const getResultsForPage = (page) =>
+ currentResults.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+ })();
+});
\ No newline at end of file
diff --git a/workers/search/index.js b/workers/search/index.js
index 20909175..1794ea57 100644
--- a/workers/search/index.js
+++ b/workers/search/index.js
@@ -1,47 +1,55 @@
-import { createClient } from '@supabase/supabase-js'
+import { createClient } from "@supabase/supabase-js";
export default {
async fetch(request, env) {
- const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY)
+ const allowedOrigin = "https://coryd.dev";
+ const origin = request.headers.get("Origin") || "";
+ const referer = request.headers.get("Referer") || "";
- const { searchParams } = new URL(request.url)
- const query = searchParams.get('q') || ''
- const types = searchParams.get('type')?.split(',') || []
- const page = parseInt(searchParams.get('page') || '1', 10)
- const pageSize = parseInt(searchParams.get('pageSize') || '10', 10)
- const offset = (page - 1) * pageSize
+ if (!origin.startsWith(allowedOrigin) && !referer.startsWith(allowedOrigin))
+ return new Response("Forbidden", { status: 403 });
+
+ const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
+ const { searchParams } = new URL(request.url);
+ const query = searchParams.get("q") || "";
+ const types = searchParams.get("type")?.split(",") || [];
+ const page = parseInt(searchParams.get("page") || "1", 10);
+ const pageSize = parseInt(searchParams.get("pageSize") || "10", 10);
+ const offset = (page - 1) * pageSize;
try {
let supabaseQuery = supabase
- .from('optimized_search_index')
+ .from("optimized_search_index")
.select(
- 'id, title, description, url, tags, type, total_plays, genre_name, genre_url',
- { count: 'exact' }
+ "id, title, description, url, tags, type, total_plays, genre_name, genre_url",
+ { count: "exact" }
)
- .range(offset, offset + pageSize - 1)
+ .range(offset, offset + pageSize - 1);
- if (types.length > 0) supabaseQuery = supabaseQuery.in('type', types)
+ if (types.length > 0) supabaseQuery = supabaseQuery.in("type", types);
if (query) {
- const queryLower = `%${query.toLowerCase()}%`
+ const queryLower = `%${query.toLowerCase()}%`;
supabaseQuery = supabaseQuery.or(
`title.ilike.${queryLower},description.ilike.${queryLower}`
- )
+ );
}
- const { data, error, count } = await supabaseQuery
+ const { data, error, count } = await supabaseQuery;
if (error) {
- console.error('Supabase query error:', error)
- return new Response(JSON.stringify({ error: 'Error fetching data' }), { status: 500 })
+ console.error("Supabase query error:", error);
+ return new Response(JSON.stringify({ error: "Error fetching data" }), {
+ status: 500,
+ });
}
if (!data || data.length === 0) {
- console.warn('No results found.')
+ console.warn("No results found.");
return new Response(
JSON.stringify({ results: [], total: 0, page, pageSize }),
- { headers: { 'Content-Type': 'application/json' } }
- )
+ { headers: { "Content-Type": "application/json" } }
+ );
}
return new Response(
@@ -53,14 +61,15 @@ export default {
}),
{
headers: {
- 'Content-Type': 'application/json',
- 'Access-Control-Allow-Origin': '*',
+ "Content-Type": "application/json",
},
}
- )
+ );
} catch (error) {
- console.error('Unexpected error:', error)
- return new Response(JSON.stringify({ error: 'Internal Server Error' }), { status: 500 })
+ console.error("Unexpected error:", error);
+ return new Response(JSON.stringify({ error: "Internal Server Error" }), {
+ status: 500,
+ });
}
},
-}
+};