add a little page footer

LivzMC · Feb 14, 2024 · e256caa · e256caa
1 parent 47f0507
commit e256caa
Show file tree

Hide file tree

Showing 19 changed files with 1,379 additions and 1,088 deletions.
diff --git a/.env.default b/.env.default
@@ -17,3 +17,4 @@ MAIL_USER="noreply@your_domain"
 MAIL_PASS="A_RANDOM_PASSWORD"
 DISCORD_SECRET=""
 DISCORD_ID=""
+GITHUB=livzmc/website
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "A website designed to display Minecraft profiles, skins and capes.",
   "main": "src/index.ts",
   "scripts": {
-    "build": "npm run tailwind:build && npx eslint src && tsc",
+    "build": "npm run tailwind:build && npx eslint src && node script/update_git.js && tsc",
     "tailwind:build": "postcss ./public/style/tailwind.css -o ./public/style/index.css",
     "start": "node dist/index.js",
     "devStart": "nodemon src/index.ts"

diff --git a/public/style/index.css b/public/style/index.css
@@ -525,6 +525,17 @@ video {
     max-width: 1536px;
   }
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -561,6 +572,9 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
+.m-auto {
+  margin: auto;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -569,18 +583,34 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
 .-ml-1 {
   margin-left: -0.25rem;
 }
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+.me-3 {
+  margin-inline-end: 0.75rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
 .ml-\[10px\] {
   margin-left: 10px;
 }
+.ml-\[15px\] {
+  margin-left: 15px;
+}
 .ml-\[2px\] {
   margin-left: 2px;
 }
@@ -596,6 +626,9 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.ms-5 {
+  margin-inline-start: 1.25rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -608,9 +641,6 @@ video {
 .mt-4 {
   margin-top: 1rem;
 }
-.mt-5 {
-  margin-top: 1.25rem;
-}
 .mt-\[10px\] {
   margin-top: 10px;
 }
@@ -659,6 +689,9 @@ video {
 .h-32 {
   height: 8rem;
 }
+.h-4 {
+  height: 1rem;
+}
 .h-5 {
   height: 1.25rem;
 }
@@ -671,6 +704,9 @@ video {
 .h-72 {
   height: 18rem;
 }
+.h-8 {
+  height: 2rem;
+}
 .h-96 {
   height: 24rem;
 }
@@ -706,6 +742,9 @@ video {
 .w-11\/12 {
   width: 91.666667%;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-48 {
   width: 12rem;
 }
@@ -756,12 +795,18 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.max-w-screen-xl {
+  max-width: 1280px;
+}
 .flex-auto {
   flex: 1 1 auto;
 }
 .flex-shrink {
   flex-shrink: 1;
 }
+.flex-grow {
+  flex-grow: 1;
+}
 .origin-top-right {
   transform-origin: top right;
 }
@@ -785,6 +830,9 @@ video {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -821,11 +869,17 @@ video {
 .gap-3 {
   gap: 0.75rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .-space-x-px > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
   margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
 }
+.self-center {
+  align-self: center;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -852,6 +906,9 @@ video {
 .text-ellipsis {
   text-overflow: ellipsis;
 }
+.whitespace-nowrap {
+  white-space: nowrap;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1003,6 +1060,9 @@ video {
 .p-3 {
   padding: 0.75rem;
 }
+.p-4 {
+  padding: 1rem;
+}
 .p-6 {
   padding: 1.5rem;
 }
@@ -1351,6 +1411,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
 .hover\:text-indigo-700:hover {
   --tw-text-opacity: 1;
   color: rgb(67 56 202 / var(--tw-text-opacity));
@@ -1496,6 +1560,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
+:is(.dark .dark\:hover\:text-white:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 :is(.dark .dark\:focus\:border-gray-600:focus) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1506,10 +1574,19 @@ video {
     grid-column: span 2 / span 2;
   }
 
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
 
+  .sm\:flex {
+    display: flex;
+  }
+
   .sm\:grid {
     display: grid;
   }
@@ -1522,10 +1599,26 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:items-center {
+    align-items: center;
+  }
+
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+
   .sm\:gap-4 {
     gap: 1rem;
   }
 
+  .sm\:gap-6 {
+    gap: 1.5rem;
+  }
+
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -1534,9 +1627,17 @@ video {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+
+  .sm\:text-center {
+    text-align: center;
+  }
 }
 @media (min-width: 768px) {
 
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -1561,6 +1662,10 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
   .md\:rounded-none {
     border-radius: 0px;
   }
@@ -1587,6 +1692,11 @@ video {
 }
 @media (min-width: 1024px) {
 
+  .lg\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -1622,6 +1732,11 @@ video {
     padding-top: 0px;
     padding-bottom: 0px;
   }
+
+  .lg\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
 }
 @media (min-width: 1280px) {
 

diff --git a/script/update_git.js b/script/update_git.js
@@ -0,0 +1,21 @@
+require('dotenv').config();
+const fsp = require('fs/promises');
+const { execSync } = require('child_process');
+
+const repoPath = process.env.GITHUB || 'livzmc/website';
+
+(async function () {
+  try {
+    const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
+    const SHA = execSync('git rev-parse HEAD').toString().trim();
+    const footer = await (await fsp.readFile('src/front-end/partials/footer.ejs')).toString();
+    const prev = footer.split('\n').filter(a => a.includes('id="github_hash"'))[0];
+    const new_footer = footer.replace(prev, `${branch}@<a id="github_hash" class="text-indigo-600 dark:text-indigo-500 hover:underline" href="https://github.com/${repoPath}/commits/${SHA}" target="__">${SHA.substring(0, 7)}</a>`);
+    await fsp.writeFile('src/front-end/partials/footer.ejs', new_footer);
+
+    process.exit(0);
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  }
+})();