*

1 files changed, 74 insertions, 30 deletions

diff --git a/html/web-font-vacuum/app.js b/html/web-font-vacuum/app.js
index 8a04356..f90a6f3 100644
--- a/html/web-font-vacuum/app.js
+++ b/html/web-font-vacuum/app.js
@@ -384,7 +384,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     /**
-     * Extracts font URLs from CSS content
+     * Extract font URLs from CSS content
      * 
      * @param {string} css - The CSS content to process
      * @param {string} cssUrl - The URL of the CSS file (for resolving relative paths)
@@ -407,6 +407,9 @@ document.addEventListener('DOMContentLoaded', () => {
             const familyMatch = fontFaceBlock.match(fontFamilyRegex);
             const fontFamily = familyMatch ? familyMatch[1].trim() : 'Unknown Font';
             
+            // Clean up the CSS rule for display
+            const cleanRule = fontFaceBlock.replace(/\s+/g, ' ').trim();
+            
             // Extract all URLs from this @font-face block
             let urlMatch;
             while ((urlMatch = urlRegex.exec(fontFaceBlock)) !== null) {
@@ -437,7 +440,8 @@ document.addEventListener('DOMContentLoaded', () => {
                     fontUrls.add({
                         url: fontUrl,
                         family: fontFamily,
-                        filename: filename
+                        filename: filename,
+                        cssRule: cleanRule
                     });
                 } catch (error) {
                     console.error('Error processing font URL:', urlMatch[1], error);
@@ -476,7 +480,8 @@ document.addEventListener('DOMContentLoaded', () => {
                         fontUrls.add({
                             url: absoluteUrl,
                             family: fontFamilyName,
-                            filename: filename
+                            filename: filename,
+                            cssRule: `@font-face { font-family: "${fontFamilyName}"; src: url("${absoluteUrl}") format("${getFormatFromFilename(filename)}"); }`
                         });
                     }
                 } catch (error) {
@@ -487,6 +492,27 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     /**
+     * Get the format string for a font file based on its filename
+     * @param {string} filename 
+     * @returns {string}
+     */
+    function getFormatFromFilename(filename) {
+        const ext = filename.split('.').pop().toLowerCase();
+        switch (ext) {
+            case 'woff2':
+                return 'woff2';
+            case 'woff':
+                return 'woff';
+            case 'ttf':
+                return 'truetype';
+            case 'otf':
+                return 'opentype';
+            default:
+                return ext;
+        }
+    }
+
+    /**
      * The V of MVC
      *  
      * - Auto-preview for 3 or fewer fonts
@@ -554,32 +580,6 @@ document.addEventListener('DOMContentLoaded', () => {
             fontType.textContent = fontData.filename.split('.').pop().toUpperCase();
             fontInfo.appendChild(fontType);
 
-            // CSS Rule section
-            if (fontData.cssRule) {
-                const ruleContainer = document.createElement('div');
-                ruleContainer.style.marginTop = '1rem';
-                ruleContainer.style.padding = '0.5rem';
-                ruleContainer.style.background = 'rgba(0,0,0,0.05)';
-                ruleContainer.style.border = '1px dashed var(--dark)';
-                ruleContainer.style.fontFamily = 'monospace';
-                ruleContainer.style.fontSize = '0.8rem';
-                ruleContainer.style.overflowX = 'auto';
-                
-                const ruleLabel = document.createElement('div');
-                ruleLabel.style.fontWeight = 'bold';
-                ruleLabel.style.marginBottom = '0.5rem';
-                ruleLabel.textContent = '@font-face Rule:';
-                ruleContainer.appendChild(ruleLabel);
-                
-                const ruleText = document.createElement('pre');
-                ruleText.style.margin = '0';
-                ruleText.style.whiteSpace = 'pre-wrap';
-                ruleText.textContent = fontData.cssRule;
-                ruleContainer.appendChild(ruleText);
-                
-                fontInfo.appendChild(ruleContainer);
-            }
-
             const previewContainer = document.createElement('div');
             previewContainer.style.marginTop = '1rem';
             previewContainer.style.padding = '1rem';
@@ -602,6 +602,50 @@ document.addEventListener('DOMContentLoaded', () => {
             preview.textContent = 'The quick brown fox jumps over the lazy dog 0123456789';
             previewContainer.appendChild(preview);
 
+            // Add CSS Rule section
+            if (fontData.cssRule) {
+                const cssContainer = document.createElement('div');
+                cssContainer.style.marginTop = '1rem';
+                cssContainer.style.marginBottom = '1rem';
+                cssContainer.style.padding = '1rem';
+                cssContainer.style.background = 'var(--dark)';
+                cssContainer.style.color = 'var(--beige)';
+                cssContainer.style.borderRadius = '4px';
+                cssContainer.style.position = 'relative';
+                
+                const cssLabel = document.createElement('div');
+                cssLabel.style.position = 'absolute';
+                cssLabel.style.top = '-10px';
+                cssLabel.style.left = '10px';
+                cssLabel.style.background = 'var(--accent)';
+                cssLabel.style.color = 'var(--dark)';
+                cssLabel.style.padding = '0 0.5rem';
+                cssLabel.style.fontSize = '0.8rem';
+                cssLabel.style.fontWeight = 'bold';
+                cssLabel.textContent = '@font-face';
+                cssContainer.appendChild(cssLabel);
+                
+                const cssContent = document.createElement('pre');
+                cssContent.style.margin = '0';
+                cssContent.style.fontFamily = 'monospace';
+                cssContent.style.fontSize = '0.9rem';
+                cssContent.style.whiteSpace = 'pre-wrap';
+                cssContent.style.wordBreak = 'break-all';
+                
+                // Format the CSS rule nicely
+                const formattedCss = fontData.cssRule
+                    .replace(/{/, ' {\n    ')
+                    .replace(/;/g, ';\n    ')
+                    .replace(/}/g, '\n}')
+                    .replace(/\s+}/g, '}')
+                    .trim();
+                
+                cssContent.textContent = formattedCss;
+                cssContainer.appendChild(cssContent);
+                
+                fontInfo.appendChild(cssContainer);
+            }
+
             const sizeVariations = document.createElement('div');
             sizeVariations.style.borderTop = '1px solid var(--dark)';
             sizeVariations.style.paddingTop = '0.5rem';
@@ -610,7 +654,7 @@ document.addEventListener('DOMContentLoaded', () => {
             [12, 18, 24].forEach(size => {
                 const sizePreview = document.createElement('div');
                 sizePreview.style.fontSize = `${size}px`;
-                sizePreview.textContent = `${size}px - AaBbCc 123`;
+                sizePreview.textContent = `${size}px - The quick brown fox jumps over the lazy dog 0123456789`;
                 sizeVariations.appendChild(sizePreview);
             });