swap copy to clipboard octicons

components/clipboard/CopyButton.module.css

@@ -1,25 +1,19 @@
-.copy_button {
+.copy {
   position: absolute;
   top: 0;
   right: 0;
-  padding: 0.75em;
+  padding: 0.65em;
   line-height: 1;
-  color: var(--text);
+  color: var(--medium-dark);
   background-color: var(--background-inner);
   border: 1px solid var(--kinda-light);
   cursor: pointer;
 }
 
-.copy_button:hover {
+.copy:hover {
   color: var(--link);
 }
 
-.octicon {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-bottom;
-}
-
-.octicon-check {
-  color: var(--success);
+.success {
+  color: var(--success) !important;
 }

components/clipboard/CopyButton.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect } from "react";
+import classNames from "classnames/bind";
 import copy from "copy-to-clipboard";
 import innerText from "react-innertext";
-import { CopyOcticon, CheckOcticon } from "../icons/octicons";
+import { PasteOcticon, CheckOcticon } from "../icons/octicons";
 import type { ReactNode } from "react";
 
 import styles from "./CopyButton.module.css";
+const cx = classNames.bind(styles);
 
 type Props = {
   source: ReactNode;
@@ -15,8 +17,6 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (e) => {
-    // stop browser from navigating away from page (this shouldn't happen anyways)
-    e.preventDefault();
     // prevent unintentional double-clicks by unfocusing button
     e.target.blur();
 
@@ -28,13 +28,13 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
   };
 
   useEffect(() => {
-    // reset everything after given ms (defaults to 2 seconds)
+    // reset to original icon after given ms (defaults to 2 seconds)
     if (copied) {
-      const id = setTimeout(() => {
+      const reset = setTimeout(() => {
         setCopied(false);
       }, timeout);
 
-      return () => clearTimeout(id);
+      return () => clearTimeout(reset);
     }
 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -43,16 +43,16 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
 
   return (
     <button
-      className={styles.copy_button}
+      className={cx({ copy: true, success: !!copied })}
       title="Copy to clipboard"
       aria-label="Copy to clipboard"
       onClick={handleCopy}
-      disabled={copied}
+      disabled={!!copied}
     >
       {copied ? (
-        <CheckOcticon fill="currentColor" className={`${styles.octicon} ${styles["octicon-check"]}`} />
+        <CheckOcticon className="icon" fill="currentColor" />
       ) : (
-        <CopyOcticon fill="currentColor" className={styles.octicon} />
+        <PasteOcticon className="icon" fill="currentColor" />
       )}
     </button>
   );

components/embeds/Code.tsx

@@ -10,32 +10,29 @@ const CustomCode = (props: CustomCodeProps) => {
   if (props.className?.split(" ").includes("code-highlight")) {
     const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
 
-    // full multi-line code blocks with highlight.js and copy-to-clipboard button
+    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
     return (
-      <div>
-        <CopyButton source={props.children} />
-        <code {...props}>{props.children}</code>
+      <>
+        <div className="code-block">
+          <CopyButton source={props.children} />
+          <code {...props}>{props.children}</code>
+        </div>
 
-        <style jsx>{`
-          div {
+        <style jsx global>{`
+          .code-block {
             position: relative;
-            max-width: 100%;
+            width: 100%;
             overflow-x: scroll;
-            margin: 1em 0;
+            margin: 1em auto;
           }
 
-          div > code {
+          .code-highlight {
             display: block;
             overflow-x: auto;
             padding: 1em;
             tab-size: 2;
-          }
-        `}</style>
-
-        <style jsx global>{`
-          .code-highlight {
             color: var(--code-text);
-            background: var(--code-background);
+            background-color: var(--code-background);
           }
 
           /* leave room for clipboard button to the right of the first line */
@@ -119,7 +116,7 @@ const CustomCode = (props: CustomCodeProps) => {
             font-style: italic;
           }
         `}</style>
-      </div>
+      </>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)

components/icons/octicons.ts

@@ -2,5 +2,6 @@ export { default as CheckOcticon } from "./octicons/check.svg";
 export { default as CopyOcticon } from "./octicons/copy.svg";
 export { default as ForkOcticon } from "./octicons/fork.svg";
 export { default as OctocatOcticon } from "./octicons/octocat.svg";
+export { default as PasteOcticon } from "./octicons/paste.svg";
 export { default as StarOcticon } from "./octicons/star.svg";
 export { default as XOcticon } from "./octicons/x.svg";

components/icons/octicons/paste.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>

next.config.js

@@ -2,6 +2,8 @@
  * @type {import('next').NextConfig}
  */
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const path = require("path");
 const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
 const withPlugins = require("next-compose-plugins");

notes/my-first-code.mdx

@@ -90,11 +90,11 @@ Incredibly ambitious emoticon and [BBCode](https://en.wikipedia.org/wiki/BBCode)
 
 ```php showLineNumbers
 <?php
-$replacement = '<Image SRC=images/emoticons/smile.gif>';
-$replacement2 = '<Image SRC=images/emoticons/bigsmile.gif>';
-$replacement3 = '<Image SRC=images/emoticons/frown.gif>';
-$replacement4 = '<Image SRC=images/emoticons/crying.gif>';
-$replacement5 = '<Image SRC=images/emoticons/blush.gif>';
+$replacement = '<img src=images/emoticons/smile.gif>';
+$replacement2 = '<img src=images/emoticons/bigsmile.gif>';
+$replacement3 = '<img src=images/emoticons/frown.gif>';
+$replacement4 = '<img src=images/emoticons/crying.gif>';
+$replacement5 = '<img src=images/emoticons/blush.gif>';
 // ... yada yada yada ...
 $replacement21 = '<a href="';
 $replacement22 = '">';

styles/colors.css

@@ -17,7 +17,7 @@
 
   /* Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
   --code-text: #313131;
-  --code-background: #fbfbfb;
+  --code-background: #fdfdfd;
   --code-comment: #656e77;
   --code-keyword: #029cb9;
   --code-attribute: #70a800;