LaTeX/sample.html at main · ferahfeza/LaTeX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Örnek Detay</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- highlight.js (tema: GitHub) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/styles/github.min.css">
  <style>
    pre.code-view {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      padding: 1rem;
      overflow: auto;
      height: 80vh;
    }
    .pdf-frame {
      width: 100%;
      height: 80vh;
      border: 1px solid #dee2e6;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
  <div class="container">
    <a class="navbar-brand" href="./">LaTeX/TikZ</a>
  </div>
</nav>

<main class="container">
  <div id="meta" class="mb-3">
    <!-- Başlık, kategori, taglar -->
  </div>

  <div class="row g-4">
    <div class="col-md-6">
      <div class="d-flex align-items-center justify-content-between">
        <h2 class="h6 mb-2">LaTeX Kodu</h2>
        <button id="copyBtn" class="btn btn-sm btn-outline-secondary" disabled>Kopyala</button>
      </div>
      <pre class="code-view"><code id="codeBlock" class="language-latex">Yükleniyor...</code></pre>
    </div>
    <div class="col-md-6">
      <h2 class="h6 mb-2">PDF Çıktı</h2>
      <iframe id="pdfFrame" class="pdf-frame" title="PDF Çıktı"></iframe>
      <div class="mt-2 d-flex gap-2">
        <a id="openPdf" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener">PDF'i yeni sekmede aç</a>
        <a id="downloadTex" class="btn btn-sm btn-outline-secondary" download>LaTeX (.tex) indir</a>
      </div>
    </div>
  </div>
</main>

<footer class="container my-5 text-center text-muted">
  <small>Ali İhsan Çanakoğlu · 2025</small>
</footer>

<script src="js/utils.js"></script>
<!-- highlight.js çekirdek + LaTeX dili -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/latex.min.js"></script>
<script>
(async function() {
  const slug = getQueryParam('slug');
  const metaDiv = document.getElementById('meta');
  const codeBlock = document.getElementById('codeBlock');
  const pdfFrame = document.getElementById('pdfFrame');
  const openPdf = document.getElementById('openPdf');
  const downloadTex = document.getElementById('downloadTex');
  const copyBtn = document.getElementById('copyBtn');

  let rawCode = '';

  if (!slug) {
    metaDiv.innerHTML = '<div class="alert alert-danger">Geçersiz bağlantı: slug eksik.</div>';
    codeBlock.textContent = '';
    return;
  }

  // JSON'dan örneği bul
  let item = null;
  try {
    const res = await fetch('data/samples.json', { cache: 'no-store' });
    const data = await res.json();
    item = data.find(x => x.slug === slug);
  } catch (e) {
    console.error(e);
  }
  if (!item) {
    metaDiv.innerHTML = '<div class="alert alert-danger">Örnek bulunamadı.</div>';
    codeBlock.textContent = '';
    return;
  }

  // Üst meta
  const tagsHtml = (item.tags || []).map(t => `<span class="badge text-bg-secondary me-1">${escapeHTML(t)}</span>`).join(' ');
  metaDiv.innerHTML = `
    <div class="d-flex flex-wrap align-items-center justify-content-between">
      <div>
        <h1 class="h4 mb-1">${escapeHTML(item.name || '')}</h1>
        <div class="text-muted">
          ${item.category ? `<span class="badge text-bg-info me-2">${escapeHTML(item.category)}</span>` : ''}
          ${tagsHtml || '<span class="text-muted">Tag yok</span>'}
        </div>
        ${item.description ? `<p class="mt-2 mb-0">${escapeHTML(item.description)}</p>` : ''}
      </div>
      <div class="text-muted">${item.createdAt ? formatDate(item.createdAt) : ''}</div>
    </div>
  `;

  // Kod yükle (XSS güvenli: textContent)
  try {
    const res = await fetch(item.texPath, { cache: 'no-store' });
    if (!res.ok) throw new Error('Kod dosyası bulunamadı');
    rawCode = await res.text();
    codeBlock.textContent = rawCode;
    // highlight.js ile vurgula
    if (window.hljs) {
      hljs.highlightElement(codeBlock);
    }
    // Kopyala butonunu etkinleştir
    copyBtn.disabled = false;
  } catch (e) {
    codeBlock.textContent = 'LaTeX dosyası yüklenemedi: ' + e.message;
  }

  // PDF iframe ve linkler
  pdfFrame.src = item.pdfPath;
  openPdf.href = item.pdfPath;
  downloadTex.href = item.texPath;

  // Kopyala davranışı
  copyBtn.addEventListener('click', async () => {
    if (!rawCode) return;
    const originalText = copyBtn.textContent;
    try {
      await copyTextToClipboard(rawCode);
      copyBtn.textContent = 'Kopyalandı!';
      copyBtn.classList.remove('btn-outline-secondary');
      copyBtn.classList.add('btn-success');
    } catch (e) {
      copyBtn.textContent = 'Kopyalanamadı';
      copyBtn.classList.remove('btn-outline-secondary');
      copyBtn.classList.add('btn-danger');
      console.error(e);
    } finally {
      setTimeout(() => {
        copyBtn.textContent = originalText;
        copyBtn.classList.remove('btn-success', 'btn-danger');
        copyBtn.classList.add('btn-outline-secondary');
      }, 1500);
    }
  });
})();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>