Add a buttiful edit button to all questions

_includes/layouts/question.tsx

@@ -16,16 +16,8 @@ interface QuestionPageData extends Lume.Data {
   showtitle: boolean;
 }
 
-export default ({
-  title,
-  children,
-  showtitle,
-  course,
-  tags,
-  groups,
-  search,
-  home,
-}: QuestionPageData) => {
+export default ({ title, children, showtitle, course, tags, groups, search, home, page }: QuestionPageData) => {
+  const githubLink = page.src.entry ? `https://github.com/cafour/fi/blob/main${page.src.entry.path}` : null;
   return (
     <>
       <nav class="nav">
@@ -55,8 +47,41 @@ export default ({
   {/each} */}
       </nav>
       <main>
-        {showtitle && <h1>{title}</h1>}
+        <header>
+          {showtitle && <h1>{title}</h1>}
+          {githubLink && (
+            <a class="edit-link btn" href={githubLink} target="_blank">
+              <img class="icon pixelart" src="/icons/edit_really_smol.png" />
+              <span>Editovat</span>
+            </a>
+          )}
+        </header>
+
         {children}
+
+        <footer>
+          {githubLink && (
+            <div class="admonitionblock tip">
+              <p>
+                Vloudila se sem chyba? Něco ti tu chybí? Řekni mi to skrz{" "}
+                <a href="https://github.com/cafour/fi/issues/" target="_blank">
+                  issue na GitHubu
+                </a>{" "}
+                nebo to (ideálně){" "}
+                <a href={githubLink} target="_blank">
+                  uprav
+                </a>{" "}
+                a vytvoř pull request! Pokud nevíš jak na to,{" "}
+                <a
+                  href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request"
+                  target="_blank"
+                >
+                  mrkni sem.
+                </a>
+              </p>
+            </div>
+          )}
+        </footer>
       </main>
     </>
   );

_includes/styles/components/_button.scss

@@ -0,0 +1,26 @@
+@use "../base/config";
+@use "../base/responsive";
+
+.btn {
+    background-color: config.$color-paper;
+    border: 2px solid config.$color-desk;
+    padding: 1rem;
+    position: relative;
+    top: 0;
+
+    &::before {
+        border-bottom: 2px solid config.$color-desk;
+        position: absolute;
+        inset: 0;
+        content: " ";
+    }
+
+    &:hover {
+        background-color: config.mt-shift(config.$color-paper, -1);
+        top: 2px;
+
+        &::before {
+            border-bottom: none;
+        }
+    }
+}

_includes/styles/question.scss

@@ -3,6 +3,7 @@
 @use "./components/navigation";
 @use "./components/asciidoc";
 @use "./components/admonitions";
+@use "./components/button";
 
 html, body {
     background-color: config.$color-desk;
@@ -83,7 +84,7 @@ html, body {
     }
 
     // Based on https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images
-    .logo {
+    .logo, .pixelart {
         image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
         image-rendering: -moz-crisp-edges;          /* Firefox                        */
         image-rendering: -o-crisp-edges;            /* Opera                          */
@@ -92,4 +93,27 @@ html, body {
         image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
         -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
     }
+
+    .edit-link {
+        align-self: flex-end;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+
+        .icon {
+            width: 3rem;
+            height: 3rem;
+        }
+    }
+
+    header {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 4rem;
+
+        h1 {
+            margin-bottom: 0;
+        }
+    }
 }