feat: add individual post page (#4)

* chore: add markdown lint to ignore no h1 heading in markdown files * chore: update example settings * chore: update example development env file * fix: remove fixed 100% height on container * feat: add individual post page * chore: update README.md * feat: add links to headings in post and add copy button to code blocks * tests: add tests for get post async method * tests: remove heading for test blogs * fix: only add links to headings in markdown body * tests: add tests for post page * tests: add test to check for blog content * docs: add jsdoc comments * chore: fix incorrect env variable format in example * fix: don't render anything if blog post is null * fix: don't render anything until posts are fetched * chore: add docker compose file for prod
2024-04-11 00:58:22 -05:00
parent 75831e5f45
commit dd7e7e1783
19 changed files with 1774 additions and 13 deletions
@@ -0,0 +1,62 @@
+
+/**
+ * @summary Adds anchors to each heading in the post
+ * so that users can link directly to them. 
+*/ 
+export function addAnchors() {
+  const selectors = [
+    '.markdown-body h2',
+    '.markdown-body h3',
+    '.markdown-body h4',
+    '.markdown-body h5',
+    '.markdown-body h6'
+  ];
+
+  // relies on AnchorJS library
+  // being loaded in Post.razor
+  anchors.add(selectors.join(','));
+}
+
+/**
+ * @summary Adds a button to each code block that
+ * allows users to copy the code to their clipboard.
+ */
+export function addClipboard() {
+  const codeBlocks = document.querySelectorAll('pre');
+  
+  codeBlocks.forEach((block) => {
+    const button = document.createElement('button');
+    button.className = 'copy-button';
+    button.type = 'button';
+    button.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
+        <path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/>
+      </svg>
+    `
+    button.onclick = () => {
+      button.style.color = 'green';
+      setTimeout(() => {
+        button.style.color = '';
+      }, 1000);
+    };
+
+    const buttonText = document.createElement('span');
+    buttonText.className = 'sr-only';
+    buttonText.textContent = 'Copy';
+
+    button.appendChild(buttonText);
+    block.appendChild(button);
+  });
+
+  // relies on ClipboardJS library
+  // being loaded in Post.razor
+  var clipboard = new ClipboardJS('.copy-button', {
+    target: (trigger) => {
+      return trigger.previousElementSibling;
+    }
+  });
+
+  clipboard.on('success', function(e) {
+    e.clearSelection();
+  });
+}