feat: remove shell, head and title and use minimal arrow

examples/html.ts

@@ -12,13 +12,6 @@ import { obj } from './values.js'
 
 console.log(
   dump(obj, {
-    styles: themes.minLight,
-    head: {
-      title: 'DUMPER',
-      source: {
-        link: '',
-        text: 'pages/posts/index.edge(32:2)',
-      },
-    },
+    styles: themes.catppuccin,
   })
 )

formatters/html/formatter.ts

@@ -104,29 +104,8 @@ export class HTMLFormatter {
     const id = `dump-${nanoid()}`
     const nonce = this.#config.cspNonce ? ` nonce="${this.#config.cspNonce}"` : ''
 
-    let head = ''
-    const title = this.#config.head?.title
-    const source = this.#config.head?.source
-
-    /**
-     * Constructing the head elements when source or the
-     * title are provided
-     */
-    if (title || source) {
-      head =
-        `<div class="dumper-head" style="${this.styles.head}">` +
-        (title ? `<div class="dumper-title">${title}</div>` : '') +
-        (source
-          ? '<div class="dumper-source">' +
-            `<a style="${this.styles.sourceLink}" href="${source.link}">${source.text}</a>` +
-            '</div>'
-          : '') +
-        '</div>'
-    }
-
     return (
-      `<div id="${id}" class="dumper-dump" style="${this.styles.shell}">` +
-      head +
+      `<div id="${id}" class="dumper-dump">` +
       `<pre style="${this.styles.pre}"><code>${code}</code></pre>` +
       `<script${nonce}>dumperActivate('${id}')</script>` +
       '</div>'

formatters/html/head.ts

@@ -4,24 +4,7 @@
  */
 export function createStyleSheet() {
   return `.dumper-dump, .dumper-dump pre, .dumper-dump code, .dumper-dump samp {
-  font-family: Menlo, Monaco, Consolas, monospace;
-}
-.dumper-dump {
-  padding: 4px;
-  border-radius: 4px;
-  font-size: 13px;
-}
-.dumper-dump .dumper-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 3px 8px 6px 8px;
-}
-.dumper-dump .dumper-source {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 10px;
+  font-family: JetBrains Mono, monaspace argon, Menlo, Monaco, Consolas, monospace;
 }
 .dumper-dump pre {
   line-height: 24px;
@@ -30,7 +13,6 @@ export function createStyleSheet() {
   position:relative;
   z-index:99999;
   padding: 10px 15px;
-  border-radius: 4px;
   margin: 0;
 }
 .dumper-dump pre samp {
@@ -42,13 +24,20 @@ export function createStyleSheet() {
 .dumper-dump .dumper-prototype-group {
   opacity: 0.5;
 }
+
+.dumper-dump .dumper-toggle {
+   transform: rotate(270deg);
+}
+
 .dumper-dump .dumper-toggle span {
   display: inline-block;
   position: relative;
-  top: 3px;
+  top: 1px;
+  margin: 0 5px;
+  font-size: 14px;
 }
-.dumper-dump .dumper-toggle[aria-expanded="true"] span {
-  transform: rotate(90deg);
+.dumper-dump .dumper-toggle[aria-expanded="true"] {
+  transform: none;
 }`
 }
 

formatters/html/printers/main.ts

@@ -11,7 +11,7 @@ import { HTMLFormatter } from '../main.js'
 import type { TokenPrinters } from '../types.js'
 import { htmlEscape, wordWrap } from '../helpers.js'
 
-const dropdownIcon = `<svg version="1.1" role="presentation" viewBox="0 0 256 512" style="width: 20px; height: 16px; color: inherit;"><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" fill="currentColor"></path> </svg>`
+const dropdownIcon = `▼`
 
 function openingBrace(formatter: HTMLFormatter) {
   return `<span style="${formatter.styles.braces}">{</span>`

formatters/html/themes.ts

@@ -16,10 +16,7 @@ import type { HTMLPrinterStyles } from './types.js'
 export const themes = {
   nightOwl: {
     pre: 'background-color: #061626; color: #c792ea;',
-    shell: 'background-color: #0c2f4c;',
-    head: 'color: #cdd6f4;',
-    sourceLink: 'color: #cdd6f4; font-style: italic;',
-    toggle: 'color: #978f63; background: none; border: none;',
+    toggle: 'color: #4f5357; background: none; border: none;',
     braces: 'color: #ffd700;',
     brackets: 'color: #ffd700;',
     number: 'color: #f78c6c;',
@@ -52,10 +49,7 @@ export const themes = {
   },
   minLight: {
     pre: 'background-color: #fff; color: #212121;',
-    shell: 'background-color: #eeeeee;',
-    head: 'color: #212121;',
-    sourceLink: 'color: #1976d2; font-style: italic;',
-    toggle: 'color: #8992be; background: none; border: none;',
+    toggle: 'color: #989999; background: none; border: none;',
     braces: 'color: #0431fa;',
     brackets: 'color: #0431fa;',
     number: 'color: #1976d2;',
@@ -88,10 +82,7 @@ export const themes = {
   },
   catppuccin: {
     pre: 'background-color: #1e1e2e; color: #94e2d5;',
-    shell: 'background-color: #35354b;',
-    head: 'color: #cdd6f4;',
-    sourceLink: 'color: #cdd6f4; font-style: italic;',
-    toggle: 'color: #85656e; background: none; border: none;',
+    toggle: 'color: #7c7c8c; background: none; border: none;',
     braces: 'color: #f38ba8;',
     brackets: 'color: #f38ba8;',
     number: 'color: #fab387;',

formatters/html/types.ts

@@ -22,24 +22,6 @@ import type { HTMLFormatter } from './main.js'
  * ```
  */
 export type HTMLPrinterStyles = {
-  /**
-   * The shell div contains the head and the
-   * pre tags
-   */
-  shell: string
-
-  /**
-   * Styles for the dumper head element that contains
-   * the title and the source link anchor tag
-   */
-  head: string
-
-  /**
-   * Styles for the anchor tag that displays
-   * the source file info
-   */
-  sourceLink: string
-
   pre: string
   braces: string
   brackets: string
@@ -149,19 +131,6 @@ export type TokenPrinters = {
 export type HTMLFormatterConfig = {
   styles?: Partial<HTMLPrinterStyles>
   cspNonce?: string
-
-  /**
-   * The head section contains the metadata about the
-   * dumped values. It can have a title and a link
-   * to the source file that printed the dump
-   */
-  head?: {
-    title?: string
-    source?: {
-      link: string
-      text: string
-    }
-  }
 }
 
 /**