From 6075a4504ef234c5067070c4cb7462a964f533d1 Mon Sep 17 00:00:00 2001
From: "Samuel M. Bednarz" <samuelmorkbednarz@gmail.com>
Date: Sun, 22 Dec 2024 21:00:23 +0100
Subject: [PATCH] adds blur

---
 apps/hub/app/components/RichArtickle.vue      |  75 ------------
 .../useTiptap/extensions/DisplayHeader.ts     |  14 ---
 .../useTiptap/extensions/Overflow.ts          |  48 --------
 .../useTiptap/extensions/Slugline.ts          |  23 ----
 apps/hub/app/composables/useTiptap/index.ts   |  97 ---------------
 apps/hub/app/layouts/default.vue              | 112 ++++++++++++++++++
 6 files changed, 112 insertions(+), 257 deletions(-)
 delete mode 100644 apps/hub/app/components/RichArtickle.vue
 delete mode 100644 apps/hub/app/composables/useTiptap/extensions/DisplayHeader.ts
 delete mode 100644 apps/hub/app/composables/useTiptap/extensions/Overflow.ts
 delete mode 100644 apps/hub/app/composables/useTiptap/extensions/Slugline.ts
 delete mode 100644 apps/hub/app/composables/useTiptap/index.ts

diff --git a/apps/hub/app/components/RichArtickle.vue b/apps/hub/app/components/RichArtickle.vue
deleted file mode 100644
index 7c93cf6..0000000
--- a/apps/hub/app/components/RichArtickle.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { EditorContent } from '@tiptap/vue-3'
-import { useEditor, useTitleEditor } from '../composables/useTiptap'
-
-const { data } = await useFetch('/api/thread')
-
-const titleEditor = useTitleEditor({
-  content: `<h1 class="display">THE RUBIK'S CUBE IS THE WORLD’S BEST SELLING PUZZLE TOY</h1>`,
-})
-
-const contentEditor = useEditor({
-  placeholder: 'Write your post here...',
-  content: `
-    <p>Nuxt layers are a powerful feature that you can use to share and reuse <strong>partial</strong> Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
-    <p class="slugline">Nuxt applications within a monorepo, or from a git repository or npm package. Nuxt applications within a monorepo, or from a git repository or npm package</p>
-    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
-    <h1>Title</h1>
-    <p>The Rubik's Cube is the World’s best selling puzzle toy</p>
-    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
-    <h2>THE RUBIK'S CUBE IS THE WORLD’S BEST SELLING PUZZLE TOY</h2>
-    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
-    <h3>THE RUBIK'S CUBE IS THE WORLD’S BEST SELLING PUZZLE TOY</h3>
-    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
-  `,
-})
-console.log('rex: ', data.value)
-</script>
-
-<template>
-  <div class="content post">
-    <EditorContent :editor="titleEditor" />
-    <EditorContent :editor="contentEditor" />
-    <!-- <TextMenuFloating :editor="editor" />
-      <TextMenuBubble :editor="editor" /> -->
-  </div>
-</template>
-
-<style lang="scss">
-.content.post {
-  display: grid;
-  gap: var(--space-3);
-  align-items: center;
-}
-
-.ProseMirror {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.ProseMirror .is-editor-empty {
-  color: var(--base-60);
-}
-
-.ProseMirror:focus {
-  outline: none !important;
-  border: none !important;
-}
-
-.ProseMirror p.is-editor-empty:first-child::before,
-.ProseMirror h1.is-editor-empty:first-child::before {
-  color: var(--foreground-20);
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-
-// Oveflowing text
-.ProseMirror p span.overflow {
-  color: var(--warning-100);
-  text-decoration: line-through;
-}
-</style>
diff --git a/apps/hub/app/composables/useTiptap/extensions/DisplayHeader.ts b/apps/hub/app/composables/useTiptap/extensions/DisplayHeader.ts
deleted file mode 100644
index 205347f..0000000
--- a/apps/hub/app/composables/useTiptap/extensions/DisplayHeader.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import Heading from '@tiptap/extension-heading'
-import { mergeAttributes } from '@tiptap/core'
-
-export const DisplayHeader = Heading.extend({
-  renderHTML({ HTMLAttributes }) {
-    return [
-      `h1`,
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: `display`,
-      }),
-      0,
-    ]
-  },
-})
diff --git a/apps/hub/app/composables/useTiptap/extensions/Overflow.ts b/apps/hub/app/composables/useTiptap/extensions/Overflow.ts
deleted file mode 100644
index a6aa881..0000000
--- a/apps/hub/app/composables/useTiptap/extensions/Overflow.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import Bold from '@tiptap/extension-bold'
-import { mergeAttributes } from '@tiptap/core'
-import type { Editor, Mark } from '@tiptap/core'
-
-export const Overflow = Bold.extend({
-  name: 'overflow',
-  renderHTML({ HTMLAttributes }) {
-    return ['span', mergeAttributes(HTMLAttributes, { class: 'overflow' }), 0]
-  },
-})
-
-export function getCurrentBlock(editor: Editor) {
-  const { state } = editor
-  return {
-    start: state.selection.$from.before(),
-    node: state.doc.nodeAt(state.selection.$from.before()),
-    size: state.doc.nodeAt(state.selection.$from.before())?.content.size || 0,
-    end: 0,
-  }
-}
-
-export function validateOverflow(editor: Editor, props: { limit: number }) {
-  const { state, view, schema } = editor
-  const dispatch = view.dispatch
-  const transaction = state.tr
-
-  function removeMark(from: number, to: number, mark: Mark) {
-    return dispatch(transaction.removeMark(from, to, mark))
-  }
-
-  function addMark(from: number, to: number, mark: Mark) {
-    return dispatch(transaction.addMark(from, to, mark))
-  }
-
-  const current = getCurrentBlock(editor)
-
-  current.end = current.start + current.size + 1
-  const atLimit = current.size >= props.limit
-  const limit = current.start + props.limit
-  const inner = Math.min(current.end, limit)
-
-  console.log('current', schema.marks)
-
-  const overflowMark = schema.marks.overflow.create()
-
-  removeMark(current.start, inner, overflowMark)
-  atLimit && addMark(limit, current.end, overflowMark)
-}
diff --git a/apps/hub/app/composables/useTiptap/extensions/Slugline.ts b/apps/hub/app/composables/useTiptap/extensions/Slugline.ts
deleted file mode 100644
index ee1819d..0000000
--- a/apps/hub/app/composables/useTiptap/extensions/Slugline.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import Paragraph from '@tiptap/extension-paragraph'
-
-// slugline is just a paragraph with a slugline class
-export const Slugline = Paragraph.extend({
-  name: 'slugline',
-  addAttributes() {
-    return {
-      class: {
-        default: 'slugline',
-        parseHTML: (element) => {
-          return {
-            class: element.getAttribute('class'),
-          }
-        },
-        renderHTML: (attributes) => {
-          return {
-            class: attributes.class,
-          }
-        },
-      },
-    }
-  },
-})
diff --git a/apps/hub/app/composables/useTiptap/index.ts b/apps/hub/app/composables/useTiptap/index.ts
deleted file mode 100644
index 464ec0e..0000000
--- a/apps/hub/app/composables/useTiptap/index.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useEditor as useTiptap } from '@tiptap/vue-3'
-import type { Editor } from '@tiptap/core'
-import Document from '@tiptap/extension-document'
-import Text from '@tiptap/extension-text'
-import Paragraph from '@tiptap/extension-paragraph'
-import Bold from '@tiptap/extension-bold'
-import Italic from '@tiptap/extension-italic'
-import Heading from '@tiptap/extension-heading'
-import History from '@tiptap/extension-history'
-import CharacterCount from '@tiptap/extension-character-count'
-import Placeholder from '@tiptap/extension-placeholder'
-import { Overflow, validateOverflow } from './extensions/Overflow'
-import { Slugline } from './extensions/Slugline'
-import { DisplayHeader } from './extensions/DisplayHeader'
-
-interface useTiptapProps {
-  limit?: number
-  placeholder?: string
-  content?: string
-  onChange?: (editor: Editor) => void
-}
-
-export function useTitleEditor({
-  limit = 120,
-  placeholder = 'Write a title...',
-  content,
-  onChange = () => {},
-}: useTiptapProps) {
-  const editor = useTiptap({
-    content,
-    onUpdate: ({ editor }) => onChange(editor),
-    extensions: [
-      Document,
-      Text,
-      Heading,
-      DisplayHeader,
-      CharacterCount.configure({ limit }),
-      Placeholder.configure({
-        placeholder: placeholder,
-      }),
-    ],
-  })
-
-  onBeforeUnmount(() => {
-    if (!editor.value) return
-    editor.value.destroy()
-  })
-
-  return editor
-}
-
-export function useEditor({
-  limit = 4000,
-  placeholder = 'Write something...',
-  content,
-  onChange = () => {},
-}: useTiptapProps) {
-  const editor = useTiptap({
-    content,
-    onUpdate,
-    extensions: [
-      Document,
-      Text,
-      Bold,
-      Italic,
-      Heading,
-      Paragraph,
-      Slugline,
-      History,
-      Overflow,
-      Placeholder.configure({ placeholder }),
-      CharacterCount.configure({ limit }),
-    ],
-  })
-
-  const currentNodeLength = ref(0)
-  function countNodeLength(editor: Editor) {
-    const { $head } = editor.state.selection
-    const nodeSize = $head.parent.content.size
-    currentNodeLength.value = nodeSize
-  }
-
-  function onUpdate({ editor }: { editor: Editor }) {
-    onChange(editor)
-    countNodeLength(editor)
-    validateOverflow(editor, {
-      limit: 280,
-    })
-  }
-
-  onBeforeUnmount(() => {
-    if (!editor.value) return
-    editor.value.destroy()
-  })
-
-  return editor
-}
diff --git a/apps/hub/app/layouts/default.vue b/apps/hub/app/layouts/default.vue
index 7f67d72..35b4cba 100644
--- a/apps/hub/app/layouts/default.vue
+++ b/apps/hub/app/layouts/default.vue
@@ -17,6 +17,14 @@ onKeyStroke('Escape', () => {
 <template>
   <div class="layout" :class="classObject">
     <div class="burger" @click="toggleReveal" />
+    <div class="frost">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
     <div class="content-layer">
       <div class="vignet" @click="toggleReveal" />
       <main class="page">
@@ -167,4 +175,108 @@ onKeyStroke('Escape', () => {
   grid-area: content;
   background-color: var(--base-20);
 }
+
+.layout .frost {
+  --blur-contrast: 1.3;
+  --blur-brightness: 0.9;
+
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+
+  height: 15dvh;
+  width: 100dvw;
+  pointer-events: none;
+
+  & > div,
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+  }
+  &::before {
+    content: '';
+    z-index: 1;
+    backdrop-filter: blur(0.5px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 1) 12.5%,
+      rgba(0, 0, 0, 1) 25%,
+      rgba(0, 0, 0, 0) 37.5%
+    );
+  }
+  & > div:nth-of-type(1) {
+    z-index: 2;
+    backdrop-filter: blur(1px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 12.5%,
+      rgba(0, 0, 0, 1) 25%,
+      rgba(0, 0, 0, 1) 37.5%,
+      rgba(0, 0, 0, 0) 50%
+    );
+  }
+  & > div:nth-of-type(2) {
+    z-index: 3;
+    backdrop-filter: blur(2px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 25%,
+      rgba(0, 0, 0, 1) 37.5%,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(0, 0, 0, 0) 62.5%
+    );
+  }
+  & > div:nth-of-type(3) {
+    z-index: 4;
+    backdrop-filter: blur(4px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 37.5%,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(0, 0, 0, 1) 62.5%,
+      rgba(0, 0, 0, 0) 75%
+    );
+  }
+  & > div:nth-of-type(4) {
+    z-index: 5;
+    backdrop-filter: blur(8px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 50%,
+      rgba(0, 0, 0, 1) 62.5%,
+      rgba(0, 0, 0, 1) 75%,
+      rgba(0, 0, 0, 0) 87.5%
+    );
+  }
+  & > div:nth-of-type(5) {
+    z-index: 6;
+    backdrop-filter: blur(16px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 62.5%,
+      rgba(0, 0, 0, 1) 75%,
+      rgba(0, 0, 0, 1) 87.5%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  & > div:nth-of-type(6) {
+    z-index: 7;
+    backdrop-filter: blur(32px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 75%,
+      rgba(0, 0, 0, 1) 87.5%,
+      rgba(0, 0, 0, 1) 100%
+    );
+  }
+  &::after {
+    content: '';
+    z-index: 8;
+    backdrop-filter: blur(64px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
+  }
+}
 </style>