@brillout/docpress 0.6.14 → 0.6.16

package/components/Note.css

@@ -18,6 +18,22 @@ blockquote.note-color-yellow {
   --color-strengh-border: 8;
   --color: 255, 204, 50;
 }
+blockquote.note-color-green {
+  --color-strengh-bg: 4;
+  --color-strengh-border: 4;
+  --color: 000, 204, 50;
+  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;
+  --color: 000, 204, 50;
+  border-left-color: rgb(255, 0, 100, 0.3);
+  background-color: rgb(255, 0, 100, 0.1);
+}
+*/
 .blockquote-content {
   display: inline;
 }
@@ -31,20 +47,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,5 +1,6 @@
 export { Warning }
 export { Construction }
+export { Contribution }
 export { Danger }
 export { NoteWithoutIcon }
 export { NoteWithCustomIcon }
@@ -23,6 +24,9 @@ function Warning({ children }: { children: React.ReactNode }) {
 function Construction({ children }: { children: React.ReactNode }) {
   return <NoteGeneric type="construction">{children}</NoteGeneric>
 }
+function Contribution({ children }: { children: React.ReactNode }) {
+  return <NoteGeneric type="contribution">{children}</NoteGeneric>
+}
 function Danger({ children }: { children: React.ReactNode }) {
   return <NoteGeneric type="danger">{children}</NoteGeneric>
 }
@@ -38,13 +42,16 @@ function NoteWithCustomIcon({ icon, children }: { children: React.ReactNode; ico
 function NoteGeneric({
   type,
   icon,
+  iconMargin,
   children,
 }: {
   icon?: null | CustomIcon
-  type?: 'danger' | 'warning' | 'construction'
+  iconMargin?: null | number
+  type?: 'danger' | 'warning' | 'construction' | 'contribution'
   children: React.ReactNode
 }) {
   assert(icon === null || icon || type, { icon, type })
+  iconMargin ??= 2
 
   let className = 'custom-icon'
   if (type) {
@@ -53,17 +60,21 @@ 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'
+    }
     assert(icon)
     assert(classColor)
     className = `${className} ${classColor}`
@@ -71,7 +82,9 @@ function NoteGeneric({
   return (
     <blockquote className={className}>
       <div style={{ marginBottom: 20 }} />
-      {icon} <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "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
-}