article.html (2785B)
1 <!doctype html> 2 <html lang="jp"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Article</title> 6 <link rel="stylesheet" href="styles.css" /> 7 </head> 8 <body> 9 <header> 10 <a href="index.html" style="color: white; text-decoration: none" 11 >Trinity Library</a 12 > 13 </header> 14 <main> 15 <h1 id="article-title"></h1> 16 <article> 17 <span class="doc-id" id="doc-id" 18 >DOC_TYPE: ARTICLE / REF_NO: 775</span 19 > 20 <div id="article-content" class="content"></div> 21 </article> 22 </main> 23 24 <script> 25 window.addEventListener("DOMContentLoaded", () => { 26 const params = new URLSearchParams(window.location.search); 27 const articleId = params.get("id"); 28 29 const titleElement = document.getElementById("article-title"); 30 const contentElement = 31 document.getElementById("article-content"); 32 33 if (!articleId) { 34 titleElement.textContent = "Error"; 35 contentElement.innerHTML = `<p class="error">No article ID provided. Please use a URL like <code>article.html?id=1</code></p>`; 36 return; 37 } 38 39 fetch(`articles/${articleId}.txt`) 40 .then((response) => { 41 if (!response.ok) { 42 throw new Error( 43 `Article not found. The file <code>articles/${articleId}.txt</code> does not exist.`, 44 ); 45 } 46 return response.text(); 47 }) 48 .then((text) => { 49 const lines = text.split("\n"); 50 const title = lines[0]; 51 const preformattedContent = lines.slice(1).join("\n"); 52 53 document.title = title; 54 titleElement.textContent = title; 55 56 const preElement = document.createElement("pre"); 57 preElement.textContent = preformattedContent; 58 preElement.style.whiteSpace = "pre-wrap"; 59 60 contentElement.innerHTML = ""; 61 contentElement.appendChild(preElement); 62 }) 63 .catch((error) => { 64 console.error("Error fetching article:", error); 65 titleElement.textContent = "Error"; 66 contentElement.innerHTML = `<p class="error">${error.message}</p>`; 67 }); 68 }); 69 </script> 70 </body> 71 </html>