338 lines
9.2 KiB
Plaintext
338 lines
9.2 KiB
Plaintext
---
|
|
// FileExample.astro - Static file display component with syntax highlighting
|
|
import Prism from 'prismjs';
|
|
import 'prismjs/components/prism-python';
|
|
import 'prismjs/components/prism-typescript';
|
|
import 'prismjs/components/prism-javascript';
|
|
import 'prismjs/components/prism-jsx';
|
|
import 'prismjs/components/prism-tsx';
|
|
import 'prismjs/components/prism-docker';
|
|
import 'prismjs/components/prism-yaml';
|
|
import 'prismjs/components/prism-json';
|
|
import 'prismjs/components/prism-markup';
|
|
import 'prismjs/components/prism-css';
|
|
import 'prismjs/components/prism-sql';
|
|
import 'prismjs/components/prism-bash';
|
|
import 'prismjs/components/prism-markdown';
|
|
|
|
interface Props {
|
|
filename: string;
|
|
content: string;
|
|
language: string;
|
|
description?: string;
|
|
tags?: string[];
|
|
id: string;
|
|
}
|
|
|
|
const { filename, content, language, id } = Astro.props;
|
|
|
|
const safeId = String(id).replace(/[^a-zA-Z0-9_-]/g, '');
|
|
const headerId = `file-example-header-${safeId}`;
|
|
const contentId = `file-example-content-${safeId}`;
|
|
|
|
const fileExtension = filename.split('.').pop() || language;
|
|
|
|
const prismLanguageMap: Record<string, string> = {
|
|
py: 'python',
|
|
ts: 'typescript',
|
|
tsx: 'tsx',
|
|
js: 'javascript',
|
|
jsx: 'jsx',
|
|
dockerfile: 'docker',
|
|
docker: 'docker',
|
|
yml: 'yaml',
|
|
yaml: 'yaml',
|
|
json: 'json',
|
|
html: 'markup',
|
|
css: 'css',
|
|
sql: 'sql',
|
|
sh: 'bash',
|
|
bash: 'bash',
|
|
md: 'markdown',
|
|
};
|
|
|
|
const prismLanguage = prismLanguageMap[fileExtension] || 'markup';
|
|
|
|
const highlightedCode = Prism.highlight(
|
|
content,
|
|
Prism.languages[prismLanguage] || Prism.languages.markup,
|
|
prismLanguage,
|
|
);
|
|
---
|
|
|
|
<div
|
|
class="file-example w-full bg-white border border-slate-200/80 rounded-lg overflow-hidden"
|
|
data-file-example
|
|
data-expanded="false"
|
|
>
|
|
<div
|
|
class="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50/60 transition-colors"
|
|
data-file-header
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded="false"
|
|
aria-controls={contentId}
|
|
id={headerId}
|
|
>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<svg
|
|
class="w-3 h-3 text-slate-400 flex-shrink-0 toggle-icon transition-transform"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
|
|
<span class="text-xs font-mono text-slate-900 truncate" title={filename}>{filename}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 flex-shrink-0" onclick="event.stopPropagation()">
|
|
<button
|
|
type="button"
|
|
class="copy-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors"
|
|
data-content={content}
|
|
data-filename={filename}
|
|
title="Copy to clipboard"
|
|
aria-label={`Copy ${filename} to clipboard`}
|
|
>
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="download-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors"
|
|
data-content={content}
|
|
data-filename={filename}
|
|
title="Download file"
|
|
aria-label={`Download ${filename}`}
|
|
>
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="file-example__content max-h-0 opacity-0 overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-slate-50"
|
|
data-file-content
|
|
id={contentId}
|
|
role="region"
|
|
aria-labelledby={headerId}
|
|
>
|
|
<pre
|
|
class="m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded"
|
|
style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; max-height: 22rem;"
|
|
><code class={`language-${prismLanguage}`} set:html={highlightedCode}></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('[data-file-example]').forEach((node) => {
|
|
if (!(node instanceof HTMLElement)) return;
|
|
|
|
const header = node.querySelector('[data-file-header]');
|
|
const content = node.querySelector('[data-file-content]');
|
|
if (!(header instanceof HTMLElement) || !(content instanceof HTMLElement)) return;
|
|
|
|
const collapse = () => {
|
|
node.dataset.expanded = 'false';
|
|
header.setAttribute('aria-expanded', 'false');
|
|
content.classList.add('max-h-0', 'opacity-0');
|
|
content.classList.remove('max-h-[22rem]', 'opacity-100');
|
|
};
|
|
|
|
const expand = () => {
|
|
node.dataset.expanded = 'true';
|
|
header.setAttribute('aria-expanded', 'true');
|
|
content.classList.remove('max-h-0', 'opacity-0');
|
|
content.classList.add('max-h-[22rem]', 'opacity-100');
|
|
};
|
|
|
|
collapse();
|
|
|
|
const toggle = () => {
|
|
const isExpanded = node.dataset.expanded === 'true';
|
|
if (isExpanded) collapse();
|
|
else expand();
|
|
|
|
if (!isExpanded) {
|
|
setTimeout(() => {
|
|
node.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}, 120);
|
|
}
|
|
};
|
|
|
|
header.addEventListener('click', toggle);
|
|
header.addEventListener('keydown', (e) => {
|
|
if (e.key !== 'Enter' && e.key !== ' ') return;
|
|
e.preventDefault();
|
|
toggle();
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.copy-btn').forEach((btn) => {
|
|
if (!(btn instanceof HTMLButtonElement)) return;
|
|
|
|
btn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const text = btn.dataset.content || '';
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
btn.dataset.copied = 'true';
|
|
setTimeout(() => {
|
|
delete btn.dataset.copied;
|
|
}, 900);
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
alert('Failed to copy to clipboard');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.download-btn').forEach((btn) => {
|
|
if (!(btn instanceof HTMLButtonElement)) return;
|
|
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const fileContent = btn.dataset.content || '';
|
|
const fileName = btn.dataset.filename || 'download.txt';
|
|
|
|
const blob = new Blob([fileContent], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = fileName;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style is:global>
|
|
[data-file-example] {
|
|
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
[data-file-example][data-expanded='true'] .toggle-icon {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.toggle-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.copy-btn,
|
|
.download-btn {
|
|
color: #475569;
|
|
}
|
|
|
|
.copy-btn[data-copied='true'] {
|
|
color: #065f46;
|
|
background: rgba(16, 185, 129, 0.10);
|
|
border-color: rgba(16, 185, 129, 0.35);
|
|
}
|
|
|
|
/* Prism.js syntax highlighting - light, low-noise */
|
|
code[class*='language-'],
|
|
pre[class*='language-'],
|
|
pre:has(code[class*='language-']) {
|
|
color: #0f172a;
|
|
background: transparent;
|
|
text-shadow: none;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.65;
|
|
direction: ltr;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
tab-size: 2;
|
|
hyphens: none;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: #64748b;
|
|
font-style: italic;
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.token.operator {
|
|
color: #64748b;
|
|
}
|
|
|
|
.token.property,
|
|
.token.tag,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.deleted {
|
|
color: #c2410c;
|
|
}
|
|
|
|
.token.boolean,
|
|
.token.number {
|
|
color: #a16207;
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.char,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: #059669;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.language-css .token.string,
|
|
.style .token.string {
|
|
color: #475569;
|
|
}
|
|
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword {
|
|
color: #7c3aed;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.token.function,
|
|
.token.class-name {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.token.regex,
|
|
.token.important,
|
|
.token.variable {
|
|
color: #db2777;
|
|
}
|
|
</style>
|