🔖 v1.2.2

osmium-blog · May 2, 2023 · 34c547d · 34c547d · vercel · May 2, 2023
2 parents a19defe + 7cb72b9
commit 34c547d
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 59 deletions.
diff --git a/assets/icons.scss b/assets/icons.scss
@@ -27,3 +27,6 @@
 @mixin sun ($color, $darkColor: null) { @include _bg("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='$fill'%3E%3Cpath d='M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z'%3E%3C/path%3E%3C/svg%3E", $color, $darkColor); }
 @mixin moon ($color, $darkColor: null) { @include _bg("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='$fill'%3E%3Cpath d='M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z'%3E%3C/path%3E%3C/svg%3E", $color, $darkColor); }
 @mixin computer ($color, $darkColor: null) { @include _bg("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='$fill'%3E%3Cpath d='M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z'%3E%3C/path%3E%3C/svg%3E", $color, $darkColor); }
+@mixin menu-2 ($color, $darkColor: null) { @include _bg("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='$fill'%3E%3Cpath d='M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z'%3E%3C/path%3E%3C/svg%3E", $color, $darkColor); }
+@mixin copy ($color, $darkColor: null) { @include _bg("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='$fill'%3E%3Cpath d='M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6ZM6.9998 11V13H12.9998V11H6.9998ZM6.9998 15V17H12.9998V15H6.9998Z'%3E%3C/path%3E%3C/svg%3E", $color, $darkColor); }
+@mixin check ($color, $darkColor: null) { @include _bg("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='$fill'%3E%3Cpath d='M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z'%3E%3C/path%3E%3C/svg%3E", $color, $darkColor); }
diff --git a/components/NotionRenderer.jsx b/components/NotionRenderer.jsx
@@ -20,49 +20,12 @@ const components = {
       switch (getTextContent(props.block.properties.language)) {
         case 'Mermaid':
           Component = dynamic(() => {
-            return import('@/components/notion-blocks/Mermaid').then(module => module.default)
+            return import('./notion-blocks/Mermaid').then(module => module.default)
           }, { ssr: false })
           break
         default:
           Component = dynamic(() => {
-            return import('react-notion-x/build/third-party/code').then(async module => {
-              // Additional prismjs style and syntax
-              await Promise.all([
-                import('prismjs/themes/prism.css'),
-                import('prismjs/components/prism-markup-templating'),
-                import('prismjs/components/prism-markup'),
-                import('prismjs/components/prism-bash'),
-                import('prismjs/components/prism-c'),
-                import('prismjs/components/prism-cpp'),
-                import('prismjs/components/prism-csharp'),
-                import('prismjs/components/prism-docker'),
-                import('prismjs/components/prism-java'),
-                import('prismjs/components/prism-js-templates'),
-                import('prismjs/components/prism-coffeescript'),
-                import('prismjs/components/prism-diff'),
-                import('prismjs/components/prism-git'),
-                import('prismjs/components/prism-go'),
-                import('prismjs/components/prism-graphql'),
-                import('prismjs/components/prism-handlebars'),
-                import('prismjs/components/prism-less'),
-                import('prismjs/components/prism-makefile'),
-                import('prismjs/components/prism-markdown'),
-                import('prismjs/components/prism-objectivec'),
-                import('prismjs/components/prism-ocaml'),
-                import('prismjs/components/prism-python'),
-                import('prismjs/components/prism-reason'),
-                import('prismjs/components/prism-rust'),
-                import('prismjs/components/prism-sass'),
-                import('prismjs/components/prism-scss'),
-                import('prismjs/components/prism-solidity'),
-                import('prismjs/components/prism-sql'),
-                import('prismjs/components/prism-stylus'),
-                import('prismjs/components/prism-swift'),
-                import('prismjs/components/prism-wasm'),
-                import('prismjs/components/prism-yaml'),
-              ])
-              return module.Code
-            })
+            return import('./notion-blocks/code').then(module => module.default)
           })
       }
       return <Component {...props}/>

diff --git a/components/notion-blocks/code.tsx b/components/notion-blocks/code.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react'
+import type { CodeBlock } from 'notion-types'
+import { getTextContent } from 'notion-utils'
+import { Code } from 'react-notion-x/build/third-party/code'
+import 'prismjs/themes/prism.css'
+import 'prismjs/components/prism-markup-templating'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-c'
+import 'prismjs/components/prism-cpp'
+import 'prismjs/components/prism-csharp'
+import 'prismjs/components/prism-docker'
+import 'prismjs/components/prism-java'
+import 'prismjs/components/prism-js-templates'
+import 'prismjs/components/prism-coffeescript'
+import 'prismjs/components/prism-diff'
+import 'prismjs/components/prism-git'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-graphql'
+import 'prismjs/components/prism-handlebars'
+import 'prismjs/components/prism-less'
+import 'prismjs/components/prism-makefile'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-objectivec'
+import 'prismjs/components/prism-ocaml'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-reason'
+import 'prismjs/components/prism-rust'
+import 'prismjs/components/prism-sass'
+import 'prismjs/components/prism-scss'
+import 'prismjs/components/prism-solidity'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-stylus'
+import 'prismjs/components/prism-swift'
+import 'prismjs/components/prism-wasm'
+import 'prismjs/components/prism-yaml'
+import { useCopyToClipboard } from 'react-use'
+
+type Props = {
+  block: CodeBlock
+  defaultLanguage?: string
+  className?: string
+}
+
+export default function CodeBlock (props: Props) {
+  const content = getTextContent(props.block.properties.title)
+  const [state, copyToClipboard] = useCopyToClipboard()
+  const button = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (state.error) return
+
+    button.current!.dataset.success = 'true'
+    const timer = setTimeout(() => {
+      delete button.current!.dataset.success
+    }, 2000)
+
+    return () => clearTimeout(timer)
+  }, [state])
+
+  function copy () {
+    copyToClipboard(content)
+  }
+
+  return (
+    <div className="osmium-code">
+      <button ref={button} type="button" className="copy-button" onClick={copy}>
+        <i/>
+      </button>
+      <Code {...props}/>
+    </div>
+  )
+}
diff --git a/layouts/docs/header.tsx b/layouts/docs/header.tsx
@@ -39,7 +39,9 @@ export default function Header ({ className }: BasicProps) {
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={css.layout_header_caret}>
         <path d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z"/>
       </svg>
-      <button type="button" className={css.layout_header_burger} onClick={stopPropa(openMenu)}/>
+      <button type="button" className={css.layout_header_burger} onClick={stopPropa(openMenu)}>
+        <i/>
+      </button>
       <SiteTitle/>
       <SiteNav items={navItems} className={css.layout_header_nav}/>
     </div>

diff --git a/layouts/docs/styles.module.scss b/layouts/docs/styles.module.scss
@@ -1,3 +1,5 @@
+@use '@/assets/icons';
+
 .layout {
   --nav-width: 300px;
 
@@ -28,11 +30,20 @@
 }
 
 .layout_header_burger {
-  @apply w-6 h-6 mr-4;
-  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="%23a3a3a3"%3E%3C/path%3E%3C/svg%3E');
+  @apply w-6 h-6 mr-4 justify-center items-center;
+  @apply hidden;
+
+  i {
+    @apply inline-block w-5 h-5 bg-contain;
+    @include icons.menu-2(black, white);
+  }
+
+  @at-root .layout_header:has(+ .layout_main .layout_nav ul) & {
+    @apply flex;
+  }
 
   @media (min-width: theme('screens.lg')) {
-    @apply hidden;
+    @apply hidden #{!important};
   }
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@osmium-blog/osmium",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "homepage": "https://github.com/osmium-blog/osmium",
   "license": "MIT",
   "author": {

diff --git a/styles/notion.scss b/styles/notion.scss
@@ -1,3 +1,5 @@
+@use '../assets/icons';
+
 /* NOTION CSS OVERRIDE */
 
 :root {
@@ -66,6 +68,10 @@
   line-height: var(--no-leading);
 }
 
+.notion-text + .notion-text {
+  @apply mt-3;
+}
+
 .notion-page-link {
   color: inherit;
 }
@@ -244,21 +250,7 @@ pre[class*='language-'] {
 }
 
 .notion-code-copy {
-  top: 10px;
-  right: 10px;
-}
-
-.notion-code-copy-button {
-  padding: 5px;
-
-  svg {
-    @apply w-4 h-4;
-  }
-
-  @at-root .dark & {
-    color: inherit;
-    background: #424242;
-  }
+  @apply hidden #{!important};
 }
 
 @import './prismjs.scss';
@@ -387,3 +379,41 @@ pre[class*='language-'] {
     font-size: 1.2em;
   }
 }
+
+/* Code block */
+
+.osmium-code {
+  @apply mt-2 p-0 relative;
+
+  .copy-button {
+    @apply p-1 bg-transparent hover:bg-white dark:hover:bg-black rounded;
+    @apply absolute top-2.5 right-2.5;
+
+    i {
+      @apply block w-5 h-5 bg-contain;
+      @include icons.copy(black, white);
+    }
+
+    &[data-success] i {
+      @include icons.check(black, white);
+    }
+
+    @media (hover: hover) {
+      @apply invisible;
+
+      @at-root .osmium-code:hover .copy-button {
+        @apply visible;
+      }
+    }
+  }
+
+  > pre {
+    @apply static;
+    @apply m-0 #{!important};
+    padding-top: calc(28px + 12px) !important;
+
+    @media (hover: hover) {
+      padding-top: 1em !important;
+    }
+  }
+}