diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/web-font-vacuum/app.js | 106 | ||||
| -rw-r--r-- | html/web-font-vacuum/index.html | 7 |
2 files changed, 107 insertions, 6 deletions
diff --git a/html/web-font-vacuum/app.js b/html/web-font-vacuum/app.js index c9d5f36..e34c519 100644 --- a/html/web-font-vacuum/app.js +++ b/html/web-font-vacuum/app.js @@ -1,4 +1,20 @@ -// List of CORS proxies to try +/** + * Web Font Vacuum - A tool to find and extract web fonts from any website + * + * Architecture Overview: + * This app follows a pipeline pattern where each step processes the data and passes it to the next: + * 1. URL Input → 2. Fetch HTML → 3. Parse & Extract → 4. Process CSS → 5. Display Results + * + * The app uses multiple CORS proxies with a fallback system to handle cross-origin requests, + * and implements a font preview system using the FontFace API. + */ + +/** + * List of CORS proxies we can try if the main one fails. + * We keep track of the last working proxy to optimize future requests. + * Each proxy has a name, base URL, and a formatter function to construct the full URL. + * @type {Array<{name: string, url: string, urlFormatter: (url: string) => string}>} + */ const CORS_PROXIES = [ { name: 'allorigins', @@ -126,6 +142,20 @@ function getFontMimeType(url) { } } +/** + * Main application entry point. Sets up event listeners and initializes the app. + * This is where everything kicks off when the page loads. + * + * The app follows this general flow: + * 1. User enters URL and clicks Analyze + * 2. We fetch the HTML through a CORS proxy + * 3. Parse HTML to find: + * - Direct font links + * - Stylesheet links + * - Inline styles + * 4. Process each CSS source to find @font-face rules + * 5. Display results with preview/download options + */ document.addEventListener('DOMContentLoaded', () => { const urlInput = document.getElementById('urlInput'); const analyzeBtn = document.getElementById('analyzeBtn'); @@ -135,7 +165,16 @@ document.addEventListener('DOMContentLoaded', () => { // Sample text for font preview const PREVIEW_TEXT = 'The quick brown fox jumps over the lazy dog 0123456789'; - // Function to load and preview a font + /** + * Handles the font preview functionality using the FontFace API. + * We try two different methods to load the font: + * 1. First attempt: Using a data URL + * 2. Fallback: Using a blob URL if data URL fails + * + * @param {string} url - The URL of the font file to preview + * @param {string} fontFamily - The font-family name to use + * @returns {Promise<boolean>} - Whether the font was successfully loaded + */ async function previewFont(url, fontFamily) { try { console.log('Loading font from:', url); @@ -205,6 +244,19 @@ document.addEventListener('DOMContentLoaded', () => { } } + /** + * Main click handler for the Analyze button. + * This is the heart of the application - it orchestrates the entire font discovery process. + * + * Process Flow: + * 1. Validate input URL + * 2. Fetch and parse webpage + * 3. Look for fonts in: + * - Direct links (preload, regular links) + * - CSS files (external and inline) + * - Common font directories + * 4. Display results + */ analyzeBtn.addEventListener('click', async () => { const url = urlInput.value.trim(); if (!url) { @@ -321,6 +373,14 @@ document.addEventListener('DOMContentLoaded', () => { } }); + /** + * Processes a CSS URL to extract font information. + * This is called for each external stylesheet found in the HTML. + * + * @param {string} cssUrl - The URL of the CSS file to process + * @param {Set} fontUrls - Set to store found font URLs + * @param {string} baseUrl - Base URL for resolving relative paths + */ async function processCssUrl(cssUrl, fontUrls, baseUrl) { try { console.log('Fetching CSS from:', cssUrl); @@ -334,6 +394,17 @@ document.addEventListener('DOMContentLoaded', () => { } } + /** + * Extracts font URLs from CSS content using regex. + * This is our CSS parser - it looks for @font-face rules and extracts: + * - Font URLs + * - Font family names + * - Full CSS rules for reference + * + * @param {string} css - The CSS content to parse + * @param {string} baseUrl - Base URL for resolving relative paths + * @param {Set} fontUrls - Set to store found font URLs + */ function extractFontUrlsFromCss(css, baseUrl, fontUrls) { // Regular expression to match @font-face rules const fontFaceRegex = /@font-face\s*{[^}]*}/g; @@ -398,7 +469,16 @@ document.addEventListener('DOMContentLoaded', () => { } } - // Function to check for direct font links in the HTML + /** + * Looks for direct font links in HTML. + * Checks two types of links: + * 1. Preload links with as="font" + * 2. Regular <a> tags pointing to font files + * + * @param {Document} doc - Parsed HTML document + * @param {string} baseUrl - Base URL for resolving relative paths + * @param {Set} fontUrls - Set to store found font URLs + */ function extractDirectFontLinks(doc, baseUrl, fontUrls) { // Check for preload links doc.querySelectorAll('link[rel="preload"][as="font"]').forEach(link => { @@ -453,6 +533,20 @@ document.addEventListener('DOMContentLoaded', () => { }); } + /** + * Displays the found fonts in a user-friendly way. + * This is our view layer - it creates all the UI elements for each font. + * + * Features: + * - Auto-preview for 3 or fewer fonts + * - Manual preview toggle for 4+ fonts + * - Download buttons + * - Font information display + * - CSS rule display + * - Preview with multiple sizes + * + * @param {Array} urls - Array of font data objects to display + */ async function displayFontUrls(urls) { const resultsDiv = document.getElementById('results'); resultsDiv.innerHTML = ''; @@ -641,6 +735,12 @@ document.addEventListener('DOMContentLoaded', () => { resultsDiv.appendChild(container); } + /** + * Shows an error message to the user. + * We use this for any user-facing errors during the process. + * + * @param {string} message - The error message to display + */ function showError(message) { errorDiv.textContent = message; errorDiv.style.display = 'block'; diff --git a/html/web-font-vacuum/index.html b/html/web-font-vacuum/index.html index 41cc7d7..f7a9538 100644 --- a/html/web-font-vacuum/index.html +++ b/html/web-font-vacuum/index.html @@ -3,7 +3,8 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Web Font Vacuum</title> + <title>An Immoral Web Font Vacuum</title> + <meta name="description" content="Enter a URL to find, preview, and download web fonts (WOFF/TTF/WOFF2/OTF) present on the page."> <style> :root { --beige: #f5f2e9; @@ -140,8 +141,8 @@ <body> <a href="#main-content" class="skip-link">Skip to main content</a> <div class="container" id="main-content"> - <h1>Web Font Vacuum</h1> - <p>Enter a URL to find and download web fonts (WOFF/TTF/WOFF2/OTF) from any website.</p> + <h1>Immoral Web Font Vacuum</h1> + <p>Enter a URL to find, preview, and download web fonts (WOFF/TTF/WOFF2/OTF) present on the page.</p> <form class="input-group" role="search" aria-label="Website URL search form" onsubmit="event.preventDefault();"> <label for="urlInput" class="sr-only">Website URL</label> |