feat: updates

scripts/common.js

@@ -3,9 +3,6 @@ let clearing = false;
 
 class SiteHeader extends HTMLElement {
   connectedCallback() {
-    const path = window.location.pathname;
-    const isHome = path === "/" || path === "/index.html";
-    
     this.innerHTML = `
       <header>
         <a href="/" style="text-decoration: none; color: inherit">
@@ -87,4 +84,4 @@ function clearPrompt(delay, callback) {
   }
 
   removeChar();
-}
+}

scripts/index.js

@@ -1,25 +1,22 @@
-// Don't redeclare TERMINAL_PROMPT since it's already in common.js
 let typing = false;
 
-window.typechars = function(e) {
+window.typechars = function (e) {
   e.preventDefault();
 
   if (e.target.classList.contains("active")) return;
   if (typing) return;
   typing = true;
 
-  // Clear active class from all links
   const topics = document.querySelectorAll(".topic a");
   topics.forEach((t) => {
     t.classList.remove("active");
     t.style.color = "";
   });
 
-  // Add active class to clicked link
   e.target.classList.add("active");
 
   const repoName = e.target.textContent;
-  const terminalText = ` ${repoName}`;
+  const terminalText = ` /${repoName}`;
   const terminalPrompt = document.querySelector(".terminal-prompt");
   const delay = 250;
 
@@ -37,42 +34,43 @@ window.typechars = function(e) {
 
     typechar();
   });
-}
+};
 
 function renderRepoDescription(repoLink) {
   const postsContainer = document.getElementById("repos");
   const repoId = repoLink.getAttribute("data-repo-id");
   const repoName = repoLink.textContent;
-  
+
-  // Clear the posts container
   postsContainer.innerHTML = "";
-  
+
-  // Fetch the repository data for this repo
   fetch(`/api/repo/${repoId}`)
-    .then(response => response.json())
+    .then((response) => response.json())
-    .then(repo => {
+    .then((repo) => {
-      // Create a post element
       const post = document.createElement("div");
       post.classList.add("post");
-      
+
-      // Create the description text
       const descriptionText = document.createElement("div");
-      descriptionText.textContent = repo.description || "No description available";
+      descriptionText.textContent =
+        repo.description || "No description available";
       descriptionText.style.textDecoration = "none";
-      
+
       post.appendChild(descriptionText);
-      
+
-      // Add the clone URL to the same post
       const cloneUrl = document.createElement("div");
       cloneUrl.style.marginTop = "15px";
       cloneUrl.innerHTML = `<code>git clone git.barrettruth.com/${repoName}.git</code>`;
-      
+
       post.appendChild(cloneUrl);
-      
+      const viewNote = document.createElement("div");
-      // Add the post to the container
+      viewNote.style.marginTop = "15px";
+      viewNote.style.fontSize = "0.8em";
+      viewNote.style.fontStyle = "italic";
+      viewNote.textContent = "Code should not be viewed in a browser.";
+      post.appendChild(viewNote);
+
       postsContainer.appendChild(post);
     })
-    .catch(error => {
+    .catch((error) => {
       console.error("Error fetching repo data:", error);
       const errorElement = document.createElement("div");
       errorElement.classList.add("post");
@@ -80,7 +78,3 @@ function renderRepoDescription(repoLink) {
       postsContainer.appendChild(errorElement);
     });
 }
-
-document.addEventListener("DOMContentLoaded", function () {
-  // No need to add click listeners here, the onclick attribute in the HTML handles it
-});

styles/common.css

@@ -61,4 +61,6 @@ li {
   border-radius: 4px;
   display: inline-block;
   padding: 0.2em 0.4em;
-}
+  max-width: 100%;
+  user-select: all;
+}

styles/index.css

@@ -45,21 +45,19 @@ ul {
   width: 100%;
 }
 
-.repos,
-.repos-list,
 .posts,
-.topics {
+.topics,
+.repos {
   padding: 0 40px;
   align-self: center;
 }
 
-.repos-list,
 .topics {
   font-size: 3em;
 }
 
-.repos,
+.posts,
-.posts {
+.repos {
   font-size: 2em;
   text-align: right;
   flex: 1;
@@ -69,13 +67,13 @@ a {
   text-decoration: none;
 }
 
-.repo-item,
+.post,
-.post {
+.repo-item {
   margin-bottom: 25px;
 }
 
-.repo-item a,
+.topic a,
-.topic a {
+.repo-item a {
   position: relative;
   display: inline-block;
   color: inherit;
@@ -84,8 +82,8 @@ a {
   transition: color 0.5s ease;
 }
 
-.repo-item a::after,
+.topic a::after,
-.topic a::after {
+.repo-item a::after {
   content: "";
   height: 2px;
   display: block;
@@ -99,10 +97,10 @@ a {
     right 0.5s ease;
 }
 
-.repo-item a:hover::after,
-.repo-item a.active::after,
 .topic a:hover::after,
-.topic a.active::after {
+.topic a.active::after,
+.repo-item a:hover::after,
+.repo-item a.active::after {
   width: 100%;
   right: 0;
 }
@@ -110,4 +108,4 @@ a {
 .repo-description {
   margin-top: 10px;
   font-size: 0.7em;
-}
+}

templates/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/common.css" />
     <link rel="stylesheet" href="/styles/index.css" />
+    <link rel="icon" type="image/webp" href="/public/logo.webp" />
     <title>Barrett Ruth's Git Server</title>
   </head>
   <body class="graph-background">
@@ -15,7 +16,12 @@
         <ul class="topics">
           {% for repo in repositories %}
           <li class="topic">
-            <a href="javascript:void(0)" onclick="typechars(event)" data-repo-id="{{ loop.index0 }}">{{ repo.name }}</a>
+            <a
+              href="javascript:void(0)"
+              onclick="typechars(event)"
+              data-repo-id="{{ loop.index0 }}"
+              >{{ repo.name }}</a
+            >
           </li>
           {% endfor %}
         </ul>