tikzify 0.0.36 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tikzify",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "exports": "./src/index.ts",
   "files": [
@@ -19,6 +19,7 @@
     "@types/sax": "^1.2.7",
     "p-queue": "^9.1.0",
     "sax": "^1.4.4",
+    "sharp": "^0.34.5",
     "zod": "^4.3.5"
   }
 }

package/src/book.ts

@@ -1,6 +1,6 @@
 import assert from 'assert'
 import z from 'zod'
-import { color, colorMap, defineColors, Emoji, fromSvg, getColors, gradient, Lang, svgTex, type Transform } from './common'
+import { color, colorMap, defineColors, Emoji, fromSvg, getColors, gradient, Lang, svg, } from './common'
 import { emojiMap } from './emojis'
 
 
@@ -10,7 +10,7 @@ export const Page = z.object({
     textBackground: z.string(),
     text: z.string().max(1024),
     emojis: z.array(Emoji).length(6),
-    jpgBase64: z.string().max(500_000)
+    avifBase64: z.string().max(500_000)
 })
 
 export type Book = z.infer<typeof Book>
@@ -21,12 +21,19 @@ export const Book = z.object({
     color: color,
     title: z.string().max(256),
     author: z.string().max(256),
-    heroJpgBase64: z.string().max(300_000),
+    heroAvifBase64: z.string().max(300_000),
 
     // OTHER PAGES
     pages: z.array(Page),
 })
 
+interface Transform {
+    x: number
+    y: number
+    scale: number
+    rotate: number
+}
+
 const TRANSFORMS_TEXT: Transform[] = [
     { x: 10, y: 15, scale: 2.3, rotate: -15, },
     { x: 300, y: 220, scale: 2.1, rotate: 15, },
@@ -39,6 +46,8 @@ const TRANSFORMS_IMAGE: Transform[] = [
     { x: 100, y: 80, scale: 2.3, rotate: 10 }
 ]
 
+const LINE_SPACING = 1.15
+
 export function bookTex(book: Book) {
     const pages = book.pages
 
@@ -73,12 +82,16 @@ export function bookTex(book: Book) {
 }
 
 \usepackage{polyglossia}
-\setmainlanguage{hebrew}
+${book.lang === 'he' ? String.raw`\setmainlanguage{hebrew}
 \newfontfamily\hebrewfont[
 Script=Hebrew,
 Path=./,                
 BoldFont={Fredoka-Bold.ttf} 
-]{Fredoka-Bold.ttf}
+]{Fredoka-Bold.ttf}` : String.raw`\setmainlanguage{english}
+\newfontfamily\englishfont[
+Path=./,                
+BoldFont={Fredoka-Bold.ttf} 
+]{Fredoka-Bold.ttf}`}
 
 
 ${defineColors(colors)}
@@ -116,7 +129,11 @@ ${book.pages.map((page, i) => {
             assert(emojis.length <= transforms.length)
             return emojis.map((emoji, i) => {
                 const els = emojiElements[emoji]!
-                return svgTex(transforms[i]!, els, colors)
+                return svg({
+                    ...transforms[i]!,
+                    elements: els,
+                    colors
+                })
             }).join('\n')
         }
 
@@ -165,7 +182,9 @@ ${esText}
 \begin{center}
 \begin{minipage}{10cm}
 \Huge 
-\raggedleft
+\linespread{${LINE_SPACING}}\selectfont
+\setlength{\parskip}{0.8em}
+${rtl ? '\\raggedleft' : '\\raggedright'}
 ${page.text}
 \end{minipage}
 \end{center}

package/src/common.ts

@@ -10,8 +10,29 @@ export type Emoji = z.infer<typeof Emoji>
 export const Emoji = z.object(emojiMap).keyof()
 
 const langs = ['he', 'en'] as const
+export type Lang = typeof langs[number]
 export const Lang = z.enum(langs)
 
+type LangConfig = {
+    name: string
+    script: string
+}
+
+const langConfig: { [key in Lang]: LangConfig } = {
+    he: { name: 'hebrew', script: 'Hebrew' },
+    en: { name: 'english', script: 'Latin' },
+}
+
+export const langName: { [key in Lang]: string } = {
+    he: langConfig.he.name,
+    en: langConfig.en.name,
+}
+
+export const script: { [key in Lang]: string } = {
+    he: langConfig.he.script,
+    en: langConfig.en.script,
+}
+
 type Path = z.infer<typeof Path>
 const Path = z.object({
     type: z.literal("path"),
@@ -178,16 +199,220 @@ export function defineColors(colors: Record<string, number>) {
     return Object.entries(colors).map(([color, i]) => `\\definecolor{c${i}}{HTML}{${color.replace('#', '')}}`).join('\n')
 }
 
-export interface Transform {
+interface Svg {
     x: number
     y: number
     scale: number
     rotate: number
+    elements: Element[]
+    colors: Record<string, number>
 }
-
-export function svgTex({ x, y, scale, rotate }: Transform, es: Element[], colors: Record<string, number>) {
+export function svg({ x, y, scale, rotate, elements, colors }: Svg) {
     return String.raw`
 \begin{scope}[x=1pt, y=1pt, xshift=${x}, scale=${scale}, yscale=-1, yshift=${y}, rotate=${rotate}]
-${es.map(e => toTikz[e.type](e as any, colors)).join('\n')}
+${elements.map(e => toTikz[e.type](e as any, colors)).join('\n')}
+\end{scope}`
+}
+
+export function poly(lang: Lang) {
+    const { name, script } = langConfig[lang]
+    return String.raw`
+\usepackage{polyglossia}
+\setmainlanguage{${name}}
+\setmainfont{Fredoka}[
+Script=${script},
+Path=./,
+Extension=.ttf,
+UprightFont=*-Regular,
+BoldFont=*-Bold]`
+}
+
+type MiniPage = z.infer<typeof MiniPage>
+const MiniPage = z.object({
+    vAlign: z.enum(['t', 'c', 'b']),
+    width: z.number().min(0).max(1),
+    height: z.number().min(0).max(1),
+    content: z.string(),
+})
+export function minipage(raw: MiniPage) {
+    const { vAlign, width, height, content } = MiniPage.parse(raw)
+    return String.raw`\fbox{%
+    \begin{minipage}[c][${height}\textheight][${vAlign}]{${width}\textwidth}
+${content}
+\end{minipage}}%`
+}
+
+type Background = z.infer<typeof Background>
+const Background = z.object({
+    gradient: gradient,
+    colors: z.record(z.string(), z.number()),
+    content: z.string(),
+    rtl: z.boolean()
+})
+
+export function background(raw: Background) {
+    const { gradient: [c1, c2], content, colors, rtl } = Background.parse(raw)
+    assert(c1 && c2, "Gradient must have two colors")
+    const g1 = colors[c1]
+    const g2 = colors[c2]
+    return String.raw`\begin{tikzpicture}[remember picture, overlay, shift={(current page.north${rtl ? ' west' : ''})}]
+\shade [left color=c${g1}, right color=c${g2}, shading angle=45] 
+(current page.south west) rectangle (current page.north east);
+${content}
+\end{tikzpicture}%`
+}
+
+interface Absolute {
+    rtl: boolean
+    content: string
+}
+export function absolute({ rtl, content }: Absolute) {
+    return String.raw`\begin{tikzpicture}[remember picture, overlay, shift={(current page.north${rtl ? ' west' : ''})}]
+${content}
+\end{tikzpicture}%`
+}
+
+type TextBackground = z.infer<typeof TextBackground>
+const TextBackground = z.object({
+    yshift: z.number(),
+    xshift: z.number(),
+    xscale: z.number(),
+    yscale: z.number(),
+    color: color,
+    opacity: z.number().min(.1).max(1),
+
+})
+export function txtBackground(raw: TextBackground) {
+    const { yshift, xshift, xscale, yscale, color, opacity } = TextBackground.parse(raw)
+    return String.raw`% TEXT BACKGROUND
+\fill[
+yshift=${yshift},
+xshift=${xshift},
+xscale=${xscale},
+yscale=${yscale},
+fill=${color}, 
+opacity=${opacity}] svg "M 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05 C 0.76 0.00 0.54 0.02 0.41 0.05 C 0.28 0.08 0.12 0.10 0.06 0.24 C 0.00 0.37 0.00 0.73 0.05 0.85 C 0.11 0.97 0.26 0.94 0.39 0.96 C 0.51 0.98 0.71 1.00 0.80 0.96 C 0.90 0.92 0.94 0.82 0.97 0.72 C 1.00 0.62 0.99 0.48 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05";`
+}
+
+
+type Img = z.infer<typeof Img>
+const Img = z.object({
+    src: z.string(),
+})
+export function img(raw: Img) {
+    const { src } = Img.parse(raw)
+    return String.raw`\begin{scope}
+\clip[
+scale=349,
+xshift=-.5,
+yshift=-.5,
+] svg "M 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05 C 0.76 0.00 0.54 0.02 0.41 0.05 C 0.28 0.08 0.12 0.10 0.06 0.24 C 0.00 0.37 0.00 0.73 0.05 0.85 C 0.11 0.97 0.26 0.94 0.39 0.96 C 0.51 0.98 0.71 1.00 0.80 0.96 C 0.90 0.92 0.94 0.82 0.97 0.72 C 1.00 0.62 0.99 0.48 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05";
+\node[opacity=.75] at (0,0) {\includegraphics[width=12cm]{${src}}};
 \end{scope}`
-}
+}
+
+export function tikzpicture(content: string) {
+    return String.raw`\begin{tikzpicture}
+${content}
+\end{tikzpicture}%`
+}
+
+interface Rect {
+    x: number
+    y: number
+    width: number
+    height: number
+    fill: string
+    opacity: number
+}
+
+type Tcolorbox = z.infer<typeof Tcolorbox>
+const Tcolorbox = z.object({
+    width: z.number().min(0).max(1),
+    color: z.string(),
+    opacity: z.number().min(0).max(1),
+    arc: z.number(),
+    boxsep: z.number(),
+    halign: z.enum(['left', 'center', 'right']),
+    content: z.string(),
+})
+
+export function tcolorbox(raw: Tcolorbox) {
+    const { width, color, opacity, arc, boxsep, halign, content } = Tcolorbox.parse(raw)
+    return String.raw`\begin{tcolorbox}[
+width=${width}\textwidth,
+enhanced,
+colback=${color},
+colframe=${color},
+opacityback=${opacity},
+opacityframe=0,
+arc=${arc}pt,
+boxsep=${boxsep}cm,
+halign=${halign},
+valign=top]
+${content}
+\end{tcolorbox}`
+}
+
+export function ragged(rtl: boolean) {
+    return rtl
+        ? `\\RaggedLeft`
+        : `\\RaggedRight`
+}
+export function vspace(cm: number) {
+    return `\\vspace{${cm}cm}`
+}
+
+export function Huge(text: string) {
+    return `\\Huge ${text}`
+}
+
+export function Large(text: string) {
+    return `\\Large ${text}`
+}
+
+export function large(text: string) {
+    return `\\large ${text}`
+}
+
+export function normalsize(text: string) {
+    return `\\normalsize ${text}`
+}
+
+export function small(text: string) {
+    return `\\small ${text}`
+}
+
+export function footnotesize(text: string) {
+    return `\\footnotesize ${text}`
+}
+
+export function scriptsize(text: string) {
+    return `\\scriptsize ${text}`
+}
+
+export function tiny(text: string) {
+    return `\\tiny ${text}`
+}
+
+export function bf(text: string) {
+    return `\\textbf{${text}}`
+}
+
+export function parskip(cm: number) {
+    return `\\setlength{\\parskip}{${cm}cm}`
+}
+
+interface Quote {
+    text: string
+    name: string
+}
+
+export function quote({ text, name }: Quote) {
+    return String.raw`
+${footnotesize(bf(`${text}`))} \\[.3cm]
+\hfill ${tiny(`-${name}`)}`
+}
+
+export const vfill = `\\vspace*{\\fill}`
+export const centering = '\\centering'

package/src/cover.ts

@@ -1,13 +1,38 @@
 
 import assert from "assert"
 import { z } from "zod"
-import { colorMap, defineColors, Emoji, fromSvg, getColors, svgTex, type Transform } from "./common"
+import { absolute, background, bf, centering, colorMap, defineColors, Emoji, footnotesize, fromSvg, getColors, gradient, img, Lang, Large, minipage, normalsize, parskip, poly, quote, ragged, svg, tcolorbox, tikzpicture, txtBackground, vfill, vspace } from "./common"
 import { emojiMap } from "./emojis"
 
+const backBackground = String.raw`\fill[
+white, 
+opacity=0.2] 
+($(current page.north east) + (-0.025\paperwidth, -1cm)$) 
+rectangle ++(-0.45\paperwidth, -0.6\paperheight);
+\end{tikzpicture}
+`
+
+const barcode = String.raw`\begin{tikzpicture}
+% 1. Draw the white background rectangle with a thin border
+\fill[white, opacity=0.8, rounded corners=2pt] (0,0) rectangle (4,2);
+
+% 2. Generate "random" vertical lines for the barcode effect
+% {position / thickness}
+\foreach \x / \w in {
+0.3/1.5, 0.5/0.5, 0.7/2.0, 0.9/0.8, 
+1.2/1.2, 1.4/0.4, 1.6/2.5, 1.9/1.0, 
+2.2/0.6, 2.4/1.8, 2.7/0.5, 3.0/2.2, 
+3.3/0.9, 3.5/1.4, 3.7/0.7%
+} {
+\draw[line width=\w pt, black] (\x, 0.2) -- (\x, 1.8);
+}
+\end{tikzpicture} 
+`
 
 export type Cover = z.infer<typeof Cover>
 export const Cover = z.object({
-    gradient: z.array(z.string()).length(2),
+    lang: Lang,
+    gradient: gradient,
     emoji: Emoji,
     title: z.string().max(64),
     author: z.string().max(32),
@@ -16,11 +41,11 @@ export const Cover = z.object({
     testimonial_quote: z.string().max(256),
     testimonial_name: z.string().max(64),
     slogan: z.string().max(64),
-    jpgBase64: z.string().max(500_000),
+    avifBase64: z.string().max(500_000),
 })
 
-const TRANSFORM: Transform = { x: -220, y: 60, scale: 2.3, rotate: -15 }
 export function coverTex({
+    lang,
     gradient,
     emoji,
     title,
@@ -37,127 +62,140 @@ export function coverTex({
     const el = fromSvg(emojiMap[emoji]!)
     const colors = colorMap(new Set([...gradient, ...el.flatMap(getColors)]))
 
+    const rtl = lang === 'he'
+
+    const titlePage = minipage({
+        vAlign: 't',
+        width: .5,
+        height: 1,
+        content: [
+            minipage({
+                vAlign: 'c',
+                width: 1,
+                height: .28,
+                content: [
+                    centering,
+                    Large(bf(title)),
+                    '',
+                    vspace(0.5),
+                    normalsize(author)
+                ].join('\n')
+            }),
+            '',
+            vfill,
+            centering,
+            tikzpicture([
+                img({ src: 'cover.jpg' }),
+            ].join('\n')),
+            vfill,
+        ].join('\n')
+    })
+
+    const backPage = minipage({
+        vAlign: 't',
+        width: .5,
+        height: 1,
+        content: [
+            centering,
+            vspace(1),
+            tcolorbox({
+                width: 0.9,
+                color: 'white',
+                opacity: 0.4,
+                arc: 5,
+                boxsep: .4,
+                halign: rtl ? 'right' : 'left',
+                content: minipage({
+                    vAlign: 't',
+                    width: 1,
+                    height: .6,
+                    content: [
+                        ragged(rtl),
+                        parskip(0.3),
+                        normalsize(bf(tagline)),
+                        '',
+                        vspace(0.3),
+                        footnotesize(blurb),
+                        '',
+                        vfill,
+                        quote({
+                            text: testimonial_quote,
+                            name: testimonial_name,
+                        })
+                    ].join('\n')
+                })
+            }),
+            '',
+            vfill,
+            barcode,
+            '',
+            'https://booky.kids',
+            '',
+            vspace(0.2),
+            footnotesize(slogan),
+            '',
+            vfill,
+        ].join('\n')
+    })
+
+    const pages = [backPage, titlePage]
+    const doc = [
+        // BACKGROUND
+        background({
+            rtl,
+            gradient,
+            colors,
+            content: txtBackground({
+                yshift: -145,
+                xshift: 0,
+                xscale: 410,
+                yscale: 130,
+                color: 'blue!10',
+                opacity: 0.4
+            })
+        }),
+
+        ...(rtl ? pages.reverse() : pages),
+        // EMOJI
+        absolute({
+            rtl,
+            content: [
+                svg({
+                    x: 10,
+                    y: 220,
+                    scale: 2.3,
+                    rotate: -15,
+                    colors,
+                    elements: el,
+                })
+            ].join('\n')
+        })
+    ]
+
     return String.raw`
 \documentclass[17pt]{extarticle}
 \usepackage[a4paper, landscape, margin=0cm]{geometry}
 \usepackage{setspace}
+\usepackage[most]{tcolorbox}
+\usepackage[none]{hyphenat}
+\usepackage{ragged2e}
+
+
 \usepackage{tikz}
 \usetikzlibrary{svg.path}
 \usetikzlibrary{calc}
 
-\usepackage{polyglossia}
-\setmainlanguage{hebrew}
-% Ensure this file exists in your project folder!
-\newfontfamily\hebrewfont[
-Script=Hebrew,
-Path=./,
-Extension=.ttf,
-UprightFont=*-Regular,
-BoldFont=*-Bold
-]{Fredoka}
-
+\setlength{\fboxsep}{0pt}
+\setlength{\fboxrule}{0pt}
+${poly(lang)}
 \pagestyle{empty}
 
 \begin{document}
+${ragged(rtl)}
 ${defineColors(colors)}
-
-\begin{tikzpicture}[remember picture, overlay]
-\shade [shading=axis, shading angle=45, left color=c${colors[c1]}, right color=c${colors[c2]}] 
-(current page.south west) rectangle (current page.north east);
-
-\fill[
-yshift=-130,
-xshift=-20,
-xscale=410,
-yscale=120,
-blue!10, 
-opacity=0.4] svg "M 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05 C 0.76 0.00 0.54 0.02 0.41 0.05 C 0.28 0.08 0.12 0.10 0.06 0.24 C 0.00 0.37 0.00 0.73 0.05 0.85 C 0.11 0.97 0.26 0.94 0.39 0.96 C 0.51 0.98 0.71 1.00 0.80 0.96 C 0.90 0.92 0.94 0.82 0.97 0.72 C 1.00 0.62 0.99 0.48 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05";
-
-\fill[
-white, 
-opacity=0.2] 
-($(current page.north east) + (-0.025\paperwidth, -1cm)$) 
-rectangle ++(-0.45\paperwidth, -0.6\paperheight);
-\end{tikzpicture}
-
+\setlength{\parindent}{0pt}
 \noindent
-\begin{minipage}[c][0.95\textheight]{0.5\textwidth}
-\centering
-\begin{minipage}[t][0.6\textheight]{.8\textwidth}
-\vspace{1cm}
-\small
-\textbf{${tagline}}
-
-\vspace{.5cm}
-\scriptsize
-\begin{spacing}{1.5}
-\setlength{\parskip}{.8em}
-${blurb}
-\end{spacing}
-\vspace{\fill}
-
-\vspace{0.5cm}
-\footnotesize
-\textbf{"${testimonial_quote}"}
-
-\vspace{0.3cm}
-\tiny
-\hfill
-- ${testimonial_name}
-\end{minipage}
-\vspace{\fill}
-\begin{minipage}[c][0.25\textheight]{.8\textwidth}
-\centering
-\vspace{\fill}       
-\begin{tikzpicture}
-% 1. Draw the white background rectangle with a thin border
-\fill[white, opacity=0.8, rounded corners=2pt] (0,0) rectangle (4,2);
-
-% 2. Generate "random" vertical lines for the barcode effect
-% {position / thickness}
-\foreach \x / \w in {
-0.3/1.5, 0.5/0.5, 0.7/2.0, 0.9/0.8, 
-1.2/1.2, 1.4/0.4, 1.6/2.5, 1.9/1.0, 
-2.2/0.6, 2.4/1.8, 2.7/0.5, 3.0/2.2, 
-3.3/0.9, 3.5/1.4, 3.7/0.7%
-} {
-\draw[line width=\w pt, black] (\x, 0.2) -- (\x, 1.8);
-}
-\end{tikzpicture} 
-
-\vspace{\fill}       
-\small
-https://booky.kids
-
-\vspace{0.2cm}
-${slogan}
-
-\end{minipage}
-\end{minipage}
-% 
-% 
-\begin{minipage}[c][0.95\textheight]{0.5\textwidth}
-\begin{minipage}[c][0.25\textheight]{\textwidth}
-\centering
-\large
-\textbf{${title}} \\[.1cm]
-\small
-${author}
-\end{minipage}
-\begin{minipage}[c][0.7\textheight]{\textwidth}
-\centering
-\begin{tikzpicture}
-\begin{scope}
-\clip[
-yshift=-170,
-xshift=-170,
-scale=340] svg "M 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05 C 0.76 0.00 0.54 0.02 0.41 0.05 C 0.28 0.08 0.12 0.10 0.06 0.24 C 0.00 0.37 0.00 0.73 0.05 0.85 C 0.11 0.97 0.26 0.94 0.39 0.96 C 0.51 0.98 0.71 1.00 0.80 0.96 C 0.90 0.92 0.94 0.82 0.97 0.72 C 1.00 0.62 0.99 0.48 0.97 0.37 C 0.95 0.26 0.94 0.11 0.85 0.05";
-\node[opacity=.75] at (0,0) {\includegraphics[width=12cm]{cover.jpg}};
-\end{scope}
-${svgTex(TRANSFORM, el, colors)}
-\end{tikzpicture}
-\end{minipage}
-\end{minipage}
+${(rtl ? doc.reverse() : doc).join('\n')}
 
 \end{document}
 `

package/src/server.ts

@@ -1,6 +1,7 @@
 import { $ } from "bun"
 import { mkdir, writeFile } from "node:fs/promises"
 import PQueue from "p-queue"
+import sharp from "sharp"
 import { Book, bookTex } from "./book"
 import { Cover, coverTex } from "./cover"
 
@@ -22,6 +23,11 @@ interface Build {
     tex: string
 }
 
+async function jpg(base64: string) {
+    const b = Buffer.from(base64, 'base64')
+    return await sharp(b).jpeg({ quality: 90 }).toBuffer()
+}
+
 async function pdf({ tmp, tex }: Build) {
 
     await writeFile(`${tmp}/main.tex`, tex)
@@ -46,11 +52,11 @@ async function book(req: Request) {
     const book = Book.parse(body)
 
     const tmp = await tmpDir()
-    await writeFile(`${tmp}/hero.jpg`, Buffer.from(book.heroJpgBase64, 'base64'))
-    await Promise.all(book.pages.map(async (page, i) => {
+    await writeFile(`${tmp}/hero.jpg`, await jpg(book.heroAvifBase64))
+    for (const [i, page] of book.pages.entries()) {
         console.log(`Writing page ${i} jpg`)
-        writeFile(`${tmp}/${i}.jpg`, Buffer.from(page.jpgBase64, 'base64'))
-    }))
+        await writeFile(`${tmp}/${i}.jpg`, await jpg(page.avifBase64))
+    }
 
     const tex = bookTex(book)
     return pdf({ tmp, tex })
@@ -62,7 +68,7 @@ async function cover(req: Request) {
 
     const tex = coverTex(cover)
     const tmp = await tmpDir()
-    await writeFile(`${tmp}/cover.jpg`, Buffer.from(cover.jpgBase64, 'base64'))
+    await writeFile(`${tmp}/cover.jpg`, await jpg(cover.avifBase64))
     return pdf({ tmp, tex })
 }