Make it more Notion-like

vantezzen · Mar 31, 2023 · 5f65a2f · 5f65a2f
1 parent e202f16
commit 5f65a2f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 16 deletions.
diff --git a/components/notion-blocks/Toggle.js b/components/notion-blocks/Toggle.js
@@ -1,15 +1,24 @@
 import { Text } from 'react-notion-x'
+import cn from 'classnames'
 
 export default function Toggle ({ block, children }) {
   return (
-    <details className="w-full mt-4 border border-dashed border-violet-600">
+    <details className={cn('nobelium-block nobelium-toggle', { 'nobelium-toggle-empty': !children })}>
       <summary className="relative">
-        <Text value={block.properties?.title} block={block} />
-        <span className="text-xs absolute top-0 right-0 text-gray-400">Rendered by Nobelium</span>
+        <span className="nobelium-toggle-triangle">
+          <svg viewBox="0 0 100 100">
+            <polygon points="5.9,88.2 50,11.8 94.1,88.2" />
+          </svg>
+        </span>
+        <span className="nobelium-toggle-title">
+          <Text value={block.properties?.title} block={block} />
+        </span>
       </summary>
-      <div>
-        {children}
-      </div>
+      {children && (
+        <div className="nobelium-toggle-content">
+          {children}
+        </div>
+      )}
     </details>
   )
 }
diff --git a/styles/notion.css b/styles/notion.css
@@ -137,18 +137,61 @@ pre[class*='language-'] {
   padding-right: 2px;
 }
 
-.notion-toggle {
-  padding-left: 28px;
+/* Every block */
+
+.nobelium-block {
+  @apply my-0.5; /* OVERRIDES */
 }
 
-.notion-toggle > summary {
-  list-style-position: outside;
-  padding-left: 2px;
-  padding-right: 2px;
+/* Toggle block */
+
+.nobelium-toggle {
+  @apply w-full;
+
 }
 
-.notion-toggle > summary + div {
-  margin-left: 0;
-  padding-left: 2px;
-  padding-right: 2px;
+.nobelium-toggle ::marker {
+  content: '';
+}
+
+.nobelium-toggle > summary {
+  @apply cursor-pointer flex items-start;
+}
+
+.nobelium-toggle-empty > summary {
+  @apply cursor-default;
+}
+
+.nobelium-toggle-triangle {
+  @apply flex-none w-7 text-center;
+  line-height: inherit;
+}
+
+.nobelium-toggle-triangle svg {
+  @apply inline-block fill-current;
+  width: 0.6875em;
+  height: 0.6875em;
+  backface-visibility: hidden;
+  transition: transform 200ms ease-out 0s;
+  transform: rotateZ(90deg);
+}
+
+.nobelium-toggle[open]:not(.nobelium-toggle-empty) > * > .nobelium-toggle-triangle svg {
+  transform: rotateZ(180deg);
+}
+
+.nobelium-toggle-empty > * > .nobelium-toggle-triangle svg {
+  @apply opacity-50;
+}
+
+.nobelium-toggle-title {
+  @apply flex-1;
+}
+
+.nobelium-toggle-content {
+  @apply pl-7 mt-0.5;
+}
+
+.nobelium-toggle-content > * {
+  @apply my-0.5; /* OVERRIDES */
 }