compress

Author: hwisu

.github/workflows/deploy.yml

@@ -68,6 +68,14 @@ jobs:
         echo "✅ Using cached embeddings and blog context"
         mkdir -p dist/static/data dist/static/js
 
+    - name: Cache transformer models
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/huggingface
+        key: transformers-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          transformers-
+
     - name: Build site
       run: npm run build
       env:

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 import embeddingsIntegration from './integrations/embeddings.js';
+import compress from 'astro-compress';
 
 // https://astro.build/config
 export default defineConfig({
@@ -56,7 +57,17 @@ export default defineConfig({
       include: ['es-toolkit']
     }
   },
-  integrations: [sitemap(), embeddingsIntegration()],
+  integrations: [
+    sitemap(), 
+    embeddingsIntegration(),
+    compress({
+      CSS: true,
+      HTML: true,
+      Image: false,
+      JavaScript: true,
+      SVG: true
+    })
+  ],
   markdown: {
     shikiConfig: {
       theme: 'github-dark',

package-lock.json

@@ -5,18 +5,20 @@
   "type": "module",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro check && astro build",
+    "build": "astro build",
     "build:local": "astro check && astro build && npm run pdf",
     "preview": "astro preview",
     "check": "astro check",
     "clean": "rm -rf dist",
     "np": "node scripts/new-post.js",
     "rotate": "node scripts/rotate-image.js",
-    "pdf": "node scripts/generate-pdf.js"
+    "pdf": "node scripts/generate-pdf.js",
+    "analyze": "ANALYZE=true astro build"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
     "astro": "^5.11.0",
+    "astro-compress": "^2.3.8",
     "sharp": "^0.34.3",
     "typescript": "^5.8.3"
   },

package.json

@@ -400,3 +400,102 @@ main {
         display: none;
     }
 }
+
+/* Highlight.js styles for AMA code blocks */
+.response-area pre {
+    background: #24292e !important;
+    border-radius: 6px;
+    padding: 1em !important;
+    overflow-x: auto;
+}
+
+.response-area pre code.hljs {
+    background: transparent !important;
+    color: #e1e4e8 !important;
+    padding: 0 !important;
+}
+
+/* Copy highlight.js color scheme from common.css */
+.response-area .hljs-comment,
+.response-area .hljs-quote {
+    color: #6a737d;
+    font-style: italic;
+}
+
+.response-area .hljs-keyword,
+.response-area .hljs-selector-tag,
+.response-area .hljs-type,
+.response-area .hljs-built_in {
+    color: #f97583;
+}
+
+.response-area .hljs-string,
+.response-area .hljs-doctag,
+.response-area .hljs-char {
+    color: #9ecbff;
+}
+
+.response-area .hljs-function,
+.response-area .hljs-title,
+.response-area .hljs-section,
+.response-area .hljs-title.function_,
+.response-area .hljs-title.class_ {
+    color: #b392f0;
+}
+
+.response-area .hljs-variable,
+.response-area .hljs-attribute,
+.response-area .hljs-property,
+.response-area .hljs-attr {
+    color: #79b8ff;
+}
+
+.response-area .hljs-number,
+.response-area .hljs-literal,
+.response-area .hljs-boolean {
+    color: #79b8ff;
+}
+
+.response-area .hljs-regexp,
+.response-area .hljs-link {
+    color: #dbedff;
+}
+
+.response-area .hljs-symbol,
+.response-area .hljs-constant {
+    color: #79b8ff;
+}
+
+.response-area .hljs-tag,
+.response-area .hljs-meta,
+.response-area .hljs-meta-keyword {
+    color: #ea4a5a;
+}
+
+.response-area .hljs-operator,
+.response-area .hljs-punctuation {
+    color: #e1e4e8;
+}
+
+.response-area .hljs-template-variable,
+.response-area .hljs-template-tag {
+    color: #c8e1ff;
+}
+
+.response-area .hljs-emphasis {
+    font-style: italic;
+}
+
+.response-area .hljs-strong {
+    font-weight: bold;
+}
+
+.response-area .hljs-deletion {
+    color: #fdaeb7;
+    background-color: #86181d;
+}
+
+.response-area .hljs-addition {
+    color: #bef5cb;
+    background-color: #22863a;
+}

public/static/css/ama.css

@@ -50,7 +50,7 @@
     background-color: var(--color-bg-secondary);
 }
 
-.post-tags {
+.post-content .post-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
@@ -152,7 +152,7 @@
         font-size: 2rem;
     }
 
-    .post-tags {
+    .post-content .post-tags {
         justify-content: flex-start;
     }
 }

public/static/css/post.css

@@ -799,6 +799,7 @@ footer {
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .search-results {

public/static/css/styles.css

@@ -252,13 +252,29 @@ import _ from './utils/native-utils.js';
     function formatResponse(response) {
         // Use marked.js with highlight.js for proper markdown rendering
         if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {
-            // Configure marked with highlight.js
-            const renderer = new marked.Renderer();
+            // Configure marked without highlight first
+            marked.setOptions({
+                breaks: true,
+                gfm: true,
+                headerIds: false,
+                mangle: false
+            });
+            
+            // Render markdown
+            let html = marked.parse(response);
 
-            // Custom code renderer
-            renderer.code = function(code, language) {
-                // Ensure code is a string
-                const codeStr = String(code || '');
+            // Create a temporary div to manipulate the HTML
+            const temp = document.createElement('div');
+            temp.innerHTML = html;
+            
+            // Find all code blocks and apply highlight.js
+            temp.querySelectorAll('pre code').forEach((block) => {
+                // Try to detect language from class
+                let language = null;
+                const classMatch = block.className.match(/language-(\w+)/);
+                if (classMatch) {
+                    language = classMatch[1];
+                }
 
                 // Handle language aliases
                 const langMap = {
@@ -268,35 +284,23 @@ import _ from './utils/native-utils.js';
                     'exs': 'elixir'
                 };
 
-                const actualLang = langMap[language] || language;
-                let highlighted;
+                if (language && langMap[language]) {
+                    language = langMap[language];
+                }
 
                 try {
-                    if (actualLang && hljs.getLanguage(actualLang)) {
-                        // hljs.highlight expects (language, code) in v11
-                        highlighted = hljs.highlight(actualLang, codeStr).value;
+                    if (language && hljs.getLanguage(language)) {
+                        block.innerHTML = hljs.highlight(language, block.textContent).value;
                     } else {
-                        highlighted = hljs.highlightAuto(codeStr).value;
+                        block.innerHTML = hljs.highlightAuto(block.textContent).value;
                     }
+                    block.classList.add('hljs');
                 } catch (err) {
                     console.warn('Highlight error:', err);
-                    // Fallback to escaped HTML
-                    highlighted = escapeHtml(codeStr);
                 }
-                
-                return `<pre class="hljs" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; padding: 1em;" tabindex="0"><code class="language-${actualLang || ''}">${highlighted}</code></pre>`;
-            };
-            
-            marked.setOptions({
-                renderer: renderer,
-                breaks: true,
-                gfm: true,
-                headerIds: false,
-                mangle: false
             });
 
-            // Render markdown
-            return marked.parse(response);
+            return temp.innerHTML;
         } else {
             // Fallback to simple text if marked is not available
             console.warn('Marked or hljs not available, using fallback');