Removed SVG factories to further reduce size

This commit is contained in:
squidfunk 2020-09-27 22:35:28 +02:00
parent ab513f036e
commit 9c4009f608
11 changed files with 40 additions and 147 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.6f400298.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.6f400298.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.4fb8c892.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4fb8c892.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.e3b5b4d0.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.e3b5b4d0.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2693be28.min.js",

View File

@ -173,7 +173,7 @@
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.e3b5b4d0.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.6f400298.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.4fb8c892.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

View File

@ -22,17 +22,6 @@
import { h, translate } from "utilities"
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* CSS classes
*/
const css = {
container: "md-clipboard md-icon"
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
@ -44,12 +33,10 @@ const css = {
*
* @return Element
*/
export function renderClipboardButton(
id: string
) {
export function renderClipboardButton(id: string) {
return (
<button
class={css.container}
class="md-clipboard md-icon"
title={translate("clipboard.copy")}
data-clipboard-target={`#${id} > code`}
></button>

View File

@ -27,24 +27,6 @@ import {
} from "integrations/search"
import { h, translate, truncate } from "utilities"
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* CSS classes
*/
const css = {
item: "md-search-result__item",
link: "md-search-result__link",
more: "md-search-result__more",
article: "md-search-result__article md-search-result__article--document",
section: "md-search-result__article",
title: "md-search-result__title",
teaser: "md-search-result__teaser",
terms: "md-search-result__terms"
}
/* ----------------------------------------------------------------------------
* Helper function
* ------------------------------------------------------------------------- */
@ -67,15 +49,18 @@ function renderArticleDocument(
...list, ...!terms[key] ? [<del>{key}</del>, " "] : []
], [])
return (
<a href={location.toString().replace(/%20/g, "+")} class={css.link} tabIndex={-1}>
<article class={css.article} data-md-score={score.toFixed(2)}>
<a href={location.toString().replace(/%20/g, "+")} class="md-search-result__link" tabIndex={-1}>
<article
class="md-search-result__article md-search-result__article--document"
data-md-score={score.toFixed(2)}
>
<div class="md-search-result__icon md-icon"></div>
<h1 class={css.title}>{title}</h1>
<h1 class="md-search-result__title">{title}</h1>
{teaser && text.length > 0 &&
<p class={css.teaser}>{truncate(text, 320)}</p>
<p class="md-search-result__teaser">{truncate(text, 320)}</p>
}
{teaser && miss.length > 0 &&
<p class={css.terms}>
<p class="md-search-result__terms">
{translate("search.result.term.missing")}: {...miss.slice(0, -1)}
</p>
}
@ -100,14 +85,14 @@ function renderSection(
...list, ...!terms[key] ? [<del>{key}</del>, " "] : []
], [])
return (
<a href={location.toString().replace(/%20/g, "+")} class={css.link} tabIndex={-1}>
<article class={css.section} data-md-score={score.toFixed(2)}>
<h1 class={css.title}>{title}</h1>
<a href={location.toString().replace(/%20/g, "+")} class="md-search-result__link" tabIndex={-1}>
<article class="md-search-result__article" data-md-score={score.toFixed(2)}>
<h1 class="md-search-result__title">{title}</h1>
{text.length > 0 &&
<p class={css.teaser}>{truncate(text, 320)}</p>
<p class="md-search-result__teaser">{truncate(text, 320)}</p>
}
{miss.length > 0 &&
<p class={css.terms}>
<p class="md-search-result__terms">
{translate("search.result.term.missing")}: {...miss.slice(0, -1)}
</p>
}
@ -150,7 +135,7 @@ export function renderSearchResult(
renderArticleDocument(article, !parent && index === 0),
...best.map(renderSection),
...more.length ? [
<details class={css.more}>
<details class="md-search-result__more">
<summary tabIndex={-1}>
{more.length > 0 && more.length === 1
? translate("search.result.more.one")
@ -164,7 +149,7 @@ export function renderSearchResult(
/* Render search result */
return (
<li class={css.item}>
<li class="md-search-result__item">
{children}
</li>
)

View File

@ -23,18 +23,6 @@
import { SourceFacts } from "patches/source"
import { h } from "utilities"
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* CSS classes
*/
const css = {
facts: "md-source__facts",
fact: "md-source__fact"
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
@ -49,12 +37,11 @@ const css = {
export function renderSource(
facts: SourceFacts
) {
const children = facts.map(fact => (
<li class={css.fact}>{fact}</li>
))
return (
<ul class={css.facts}>
{children}
<ul class="md-source__facts">
{facts.map(fact => (
<li class="md-source__fact">{fact}</li>
))}
</ul>
)
}

View File

@ -22,18 +22,6 @@
import { h } from "utilities"
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* CSS classes
*/
const css = {
wrapper: "md-typeset__scrollwrap",
table: "md-typeset__table"
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
@ -49,8 +37,8 @@ export function renderTable(
table: HTMLTableElement
) {
return (
<div class={css.wrapper}>
<div class={css.table}>
<div class="md-typeset__scrollwrap">
<div class="md-typeset__table">
{table}
</div>
</div>

View File

@ -29,7 +29,7 @@ import { JSX as JSXInternal } from "preact"
* ------------------------------------------------------------------------- */
/**
* HTML and SVG attributes
* HTML attributes
*/
type Attributes =
& JSXInternal.HTMLAttributes
@ -41,7 +41,6 @@ type Attributes =
*/
type Child =
| HTMLElement
| SVGElement
| Text
| string
| number
@ -50,69 +49,13 @@ type Child =
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Create an element
*
* @param tagName - HTML or SVG tag
*
* @return Element
*/
function createElement(tagName: string): HTMLElement | SVGElement {
switch (tagName) {
/* SVG elements */
case "svg":
case "path":
return document.createElementNS("http://www.w3.org/2000/svg", tagName)
/* HTML elements */
default:
return document.createElement(tagName)
}
}
/**
* Set an attribute
*
* @param el - Element
* @param name - Attribute name
* @param value - Attribute value
*/
function setAttribute(
el: HTMLElement | SVGElement, name: string, value: string) {
switch (name) {
/* Attributes to be ignored */
case "xmlns":
break
/* Attributes of SVG elements */
case "viewBox":
case "d":
if (typeof value !== "boolean")
el.setAttributeNS(null, name, value)
else if (value)
el.setAttributeNS(null, name, "")
break
/* Attributes of HTML elements */
default:
if (typeof value !== "boolean")
el.setAttribute(name, value)
else if (value)
el.setAttribute(name, "")
}
}
/**
* Append a child node to an element
*
* @param el - Element
* @param child - Child node(s)
*/
function appendChild(
el: HTMLElement | SVGElement, child: Child | Child[]
): void {
function appendChild(el: HTMLElement, child: Child | Child[]): void {
/* Handle primitive types (including raw HTML) */
if (typeof child === "string" || typeof child === "number") {
@ -136,21 +79,24 @@ function appendChild(
/**
* JSX factory
*
* @param tagName - HTML or SVG tag
* @param tag - HTML tag
* @param attributes - HTML attributes
* @param children - Child elements
*
* @return Element
*/
export function h(
tagName: string, attributes: Attributes | null, ...children: Child[]
): HTMLElement | SVGElement {
const el = createElement(tagName)
tag: string, attributes: Attributes | null, ...children: Child[]
): HTMLElement {
const el = document.createElement(tag)
/* Set attributes, if any */
if (attributes)
for (const attr of Object.keys(attributes))
setAttribute(el, attr, attributes[attr])
if (typeof attributes[attr] !== "boolean")
el.setAttribute(attr, attributes[attr])
else if (attributes[attr])
el.setAttribute(attr, "")
/* Append child nodes */
for (const child of children)
@ -166,7 +112,7 @@ export function h(
export declare namespace h {
namespace JSX {
type Element = HTMLElement | SVGElement
type Element = HTMLElement
type IntrinsicElements = JSXInternal.IntrinsicElements
}
}