README.md

Datalegreya.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# WXYZ and [Datalegreya]\n",
    "\n",
    "[Datalegreya] is a fun font that can encode _text_ and _data_. Here's a pretty advanced example.\n",
    "\n",
    "[Datalegreya]: https://github.com/figs-lab/datalegreya"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "example = \"{10:00}§2d|1a|0[-]t|3a|2l|1e|2g|1r|3[++]e|2y|1a|2{18:30}[17°c [11°c ]\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This is an encoding of the name of the font, and a seemingly-random set of digits, 0-3."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text = \"datalgreya\"\n",
    "digits = \"210321213212\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as W, traitlets as T, random, yaml, toml, pathlib, jinja2, base64, IPython\n",
    "from wxyz.tpl_jinja import Template\n",
    "from wxyz.json_schema_form import JSONSchemaForm\n",
    "from wxyz.lab import DockBox, DockPop"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dock = DockBox(layout=dict(min_height=\"400px\"))\n",
    "dock"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We wish to encode:\n",
    "- three \"font families\"\n",
    "- a font size\n",
    "- a line height"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "form = JSONSchemaForm(\n",
    "    schema=toml.loads(f'''\n",
    "title = \"A Datalgreya String\"\n",
    "type = \"object\"\n",
    "\n",
    "[properties.text]\n",
    "title = \"text\"\n",
    "type = \"string\"\n",
    "default = \"{ text }\"\n",
    "\n",
    "[properties.digits]\n",
    "title = \"digits\"\n",
    "type = \"string\"\n",
    "default = \"{ digits }\"\n",
    "pattern = \"[0-3]+\"\n",
    "\n",
    "[properties.size]\n",
    "title = \"size\"\n",
    "type = \"number\"\n",
    "format = \"float\"\n",
    "minimum = 1.0\n",
    "maximum = 100.0\n",
    "default = 10.0\n",
    "multipleOf = 0.1\n",
    "\n",
    "[properties.family]\n",
    "title = \"family\"\n",
    "enum = [\"Dot\", \"Gradient\", \"Thin\"]\n",
    "default = \"Dot\"\n",
    "\n",
    "[properties.line_height]\n",
    "title = \"line height\"\n",
    "type = \"number\"\n",
    "format = \"float\"\n",
    "minimum = 0.1\n",
    "maximum = 10.0\n",
    "default = 0.7\n",
    "multipleOf = 0.1\n",
    "'''),\n",
    "    ui_schema={\n",
    "        \"line_height\": {\"ui:widget\": \"range\"},\n",
    "        \"size\": {\"ui:widget\": \"range\"},\n",
    "        \"family\": {\"ui:widget\": \"radio\"}\n",
    "    }\n",
    ")\n",
    "form"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dock.children = [form, *dock.children]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "for family in form.schema[\"properties\"][\"family\"][\"enum\"]:\n",
    "    p = pathlib.Path(f\"Datalegreya-{family}.otf\")\n",
    "    if not p.exists():\n",
    "        !wget -N https://www.datalegreya.com/assets/fonts/Datalegreya-{family}.otf\n",
    "    display(IPython.display.HTML(jinja2.Template(\"\"\"<style>\n",
    "        @font-face { \n",
    "            font-family: Datalegreya{{ family }}; \n",
    "            src: url(\"data:font/opentype;charset=utf-8;base64,{{ base64 }}\");\n",
    "        }\n",
    "    </style>\n",
    "    \"\"\").render(family=family, base64=base64.b64encode(p.read_bytes()).decode(\"utf-8\"))\n",
    "    ))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> it looks like this\n",
    "\n",
    "# <span style=\"font-size: 10rem; font-family: DatalegreyaThin\">{10:00}§2d|1a|0[-]t|3a|2l|1e|2g|1r|3[++]e|2y|1a|2{18:30}[17°c [11°c ]</span>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = W.HTML()\n",
    "template = Template(source=\"<blockquote>we'd like this {{ value.text }} to look cool with {{ value.family}}</blockquote>\", context=form)\n",
    "dock.children = [*dock.children, html]\n",
    "html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "W.dlink((template, \"value\"), (html, \"value\"))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "template.source = \"\"\"\n",
    "<style>\n",
    "\n",
    ".dg {\n",
    "    font-family: Datalegreya{{ value.family }};\n",
    "    font-size: {{ value.size }}rem;\n",
    "    word-break: break-all;\n",
    "    line-height: {{ value.line_height }};\n",
    "    transition: all 0.1s;\n",
    "}\n",
    "\n",
    ".dg-1, .dg-2 { color: blue; }\n",
    ".dg-2, .dg-3 { color: green; }\n",
    ".dg-4, .dg-5 { color: yellow; }\n",
    ".dg-6, .dg-7 { color: orange; }\n",
    ".dg-9, .dg-8 { color: red; }\n",
    "\n",
    "</style>\n",
    "<div class=\"dg\">\n",
    "{% for c in value.text -%}\n",
    "<span class=\"dg-{{ value.digits[loop.index0 % value.digits|length] }}\">{{ c }}|{{ value.digits[loop.index0 % value.digits|length] % 4 }}</span>{%- endfor %}\n",
    "</div>\n",
    "\"\"\""
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

postBuild

#!/usr/bin/env bash
set -ex
jupyter labextension disable jupyter-offlinenotebook || echo "whatever"
jupyter labextension uninstall --debug --no-build jupyter-offlinenotebook || echo "whatever"
jupyter serverextension list
jupyter labextension list

requirements.txt

jupyterlab >=3,<4
ipywidgets >=7.6.3
jupyterlab-widgets >=1.0.0
# wxyz stuff
wxyz_lab
wxyz_yaml
wxyz_tpl_jinja
wxyz_json_schema_form
# util
toml
nbgitpuller