@brillout/docpress 0.6.15 → 0.6.17

package/components/Note.css

@@ -25,7 +25,6 @@ blockquote.note-color-green {
   border-left-color: rgb(0, 179, 0, 0.3);
   background-color: rgb(0, 179, 0, 0.08);
 }
-/*
 blockquote.note-color-pink {
   --color-strengh-bg: 4;
   --color-strengh-border: 4;
@@ -33,7 +32,6 @@ blockquote.note-color-pink {
   border-left-color: rgb(255, 0, 100, 0.3);
   background-color: rgb(255, 0, 100, 0.1);
 }
-*/
 .blockquote-content {
   display: inline;
 }
@@ -47,20 +45,6 @@ blockquote.custom-icon > .blockquote-content > :first-child {
 /************************/
 /*** Icon Positioning ***/
 /************************/
-blockquote.type-construction img[src^="https://twemoji."]
-{
-  margin-right: 2px;
-}
-blockquote.type-warning img[src^="https://twemoji."]
-{
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
-blockquote.type-danger img[src^="https://twemoji."]
-{
-  margin-right: 2px;
-}
 blockquote > p:first-child::before,
 /* blockquote > p:first-of-type::before, */
 blockquote > div.paragraph:first-child::before {

package/components/Note.tsx

@@ -1,4 +1,5 @@
 export { Warning }
+export { Advanced }
 export { Construction }
 export { Contribution }
 export { Danger }
@@ -21,6 +22,9 @@ import './Note.css'
 function Warning({ children }: { children: React.ReactNode }) {
   return <NoteGeneric type="warning">{children}</NoteGeneric>
 }
+function Advanced({ children }: { children: React.ReactNode }) {
+  return <NoteGeneric type="advanced">{children}</NoteGeneric>
+}
 function Construction({ children }: { children: React.ReactNode }) {
   return <NoteGeneric type="construction">{children}</NoteGeneric>
 }
@@ -47,10 +51,11 @@ function NoteGeneric({
 }: {
   icon?: null | CustomIcon
   iconMargin?: null | number
-  type?: 'danger' | 'warning' | 'construction' | 'contribution'
+  type?: 'danger' | 'warning' | 'construction' | 'contribution' | 'advanced'
   children: React.ReactNode
 }) {
   assert(icon === null || icon || type, { icon, type })
+  iconMargin ??= 2
 
   let className = 'custom-icon'
   if (type) {
@@ -59,21 +64,24 @@ function NoteGeneric({
   if (!icon && type) {
     let classColor = ''
     if (type === 'danger') {
-      icon = ':no_entry:'
+      icon = '⛔'
       classColor = 'note-color-red'
     }
     if (type === 'warning') {
-      icon = ':warning:'
+      icon = '⚠️'
       classColor = 'note-color-yellow'
     }
     if (type === 'construction') {
-      icon = ':construction:'
+      icon = '🚧'
       classColor = 'note-color-yellow'
     }
     if (type === 'contribution') {
       icon = '💚'
       classColor = 'note-color-green'
-      iconMargin = 2
+    }
+    if (type === 'advanced') {
+      icon = '🧠'
+      classColor = 'note-color-pink'
     }
     assert(icon)
     assert(classColor)
@@ -82,7 +90,9 @@ function NoteGeneric({
   return (
     <blockquote className={className}>
       <div style={{ marginBottom: 20 }} />
-      {icon}<span style={{width: iconMargin ?? undefined, display: 'inline-block'}}></span> <div className="blockquote-content">{children}</div>
+      <span style={{ fontFamily: 'emoji' }}>{icon}</span>
+      <span style={{ width: iconMargin ?? undefined, display: 'inline-block' }}></span>{' '}
+      <div className="blockquote-content">{children}</div>
       <div style={{ marginTop: 20 }} />
     </blockquote>
   )

package/css/code/block.css

@@ -4,11 +4,6 @@ pre > code {
 pre [data-line] {
   padding: 0px 16px !important;
 }
-@media screen and (max-width: 900px) {
-  pre > code {
-    font-size: 0.7em;
-  }
-}
 pre {
   display: grid;
 }
@@ -17,27 +12,38 @@ pre > code {
   overflow-x: auto;
 }
 
-@media screen and (max-width: 1139px) {
+pre > code {
+  display: reset;
+  word-break: reset;
+}
+
+figure[data-rehype-pretty-code-figure] {
+  margin: 0 !important;
+}
+
+/* 821px screen width => the width of code blocks isn't shrinked anymore => no need to reduce the font-size of code blocks */
+@media screen and (max-width: 820px) {
   pre > code {
-    font-size: 0.95em;
+    font-size: 0.9em !important;
   }
 }
-@media screen and (max-width: 1040px) {
+@media screen and (max-width: 720px) {
   pre > code {
-    font-size: 0.8em;
+    font-size: 0.8em !important;
   }
 }
-@media screen and (max-width: 940px) {
+@media screen and (max-width: 620px) {
   pre > code {
-    font-size: 0.7em;
+    font-size: 0.7em !important;
   }
 }
-
-pre > code {
-  display: reset;
-  word-break: reset;
+@media screen and (max-width: 550px) {
+  pre > code {
+    font-size: 0.6em !important;
+  }
 }
-
-figure[data-rehype-pretty-code-figure] {
-  margin: 0 !important;
+@media screen and (max-width: 450px) {
+  pre > code {
+    font-size: 0.5em !important;
+  }
 }

package/css/heading.css

@@ -1,6 +1,6 @@
 h1 { font-size: 2.30em }
 h2 { font-size: 1.80em }
-h3 { font-size: 1.15em }
+h3 { font-size: 1.25em }
 
 .doc-page h1 {
   margin-top: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.6.15",
+  "version": "0.6.17",
   "type": "module",
   "scripts": {
     "// Build vite.config.ts and +config.ts": "",
@@ -25,7 +25,6 @@
     "rehype-pretty-code": "0.13.0",
     "remark-gfm": "4.0.0",
     "shiki": "1.2.0",
-    "twemoji": "13.1.1",
     "vike-contributors": "^0.0.9"
   },
   "peerDependencies": {
@@ -77,7 +76,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.4.3",
-    "vike": "^0.4.174",
+    "vike": "^0.4.180",
     "vite": "^5.2.2"
   },
   "repository": "https://github.com/brillout/docpress",

package/renderer/onRenderHtml.tsx

@@ -6,7 +6,6 @@ import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { PageLayout } from '../PageLayout'
 import { resolvePageContext, PageContextOriginal } from '../config/resolvePageContext'
 import { getDocSearchJS, getDocSearchCSS } from '../algolia/DocSearch'
-import { parseEmojis } from '../parseEmojis'
 import { assert } from '../utils/server'
 
 async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
@@ -26,8 +25,7 @@ async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
   const docSearchJS = getDocSearchJS(pageContextResolved)
   const docSearchCSS = getDocSearchCSS(pageContextResolved)
 
-  let pageHtml = ReactDOMServer.renderToString(page)
-  pageHtml = parseEmojis(pageHtml)
+  const pageHtml = ReactDOMServer.renderToString(page)
 
   return escapeInject`<!DOCTYPE html>
     <html>

package/parseEmojis.ts

@@ -1,35 +0,0 @@
-export { parseEmojis }
-
-import twemoji from 'twemoji'
-
-const emojiList = {
-  // https://emojipedia.org/no-entry/
-  ':no_entry:': 0x26d4,
-  // https://emojipedia.org/warning/
-  ':warning:': 0x26a0,
-  // https://emojipedia.org/trophy/
-  ':trophy:': 0x1f3c6,
-  // https://emojipedia.org/construction/
-  ':construction:': 0x1f6a7,
-  /*
-  // https://emojipedia.org/red-heart/
-  ':heart:': 0x2764,
-  */
-}
-
-function parseEmojis(html: string) {
-  Object.entries(emojiList).forEach(([shortcode, codepoint]) => {
-    if (!html.includes(shortcode)) {
-      return
-    }
-    const emojiStr = twemoji.convert.fromCodePoint(codepoint as any)
-    let emojiImg: any = twemoji.parse(emojiStr, {
-      folder: 'svg',
-      ext: '.svg',
-    })
-    const style = 'height: 1.275em; width: 1.275em; vertical-align: -20%'
-    emojiImg = emojiImg.replace('<img class="emoji" ', `<img style="${style}" `)
-    html = html.split(shortcode).join(emojiImg)
-  })
-  return html
-}