Inlined icons referenced from JavaScript

This commit is contained in:
squidfunk 2020-03-15 15:20:48 +01:00
parent 278a40e8d7
commit df1c7e5590
14 changed files with 55 additions and 33 deletions

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 0.75C8.5 0.335786 8.16421 0 7.75 0C7.33579 0 7 0.335786 7 0.75V5.93933L4.39125 3.33058C4.09836 3.03768 3.62348 3.03768 3.33059 3.33058C3.03769 3.62347 3.0377 4.09835 3.33059 4.39124L5.93935 7H0.75C0.335787 7 0 7.33579 0 7.75C0 8.16421 0.335787 8.5 0.75 8.5H5.93936L3.33059 11.1088C3.0377 11.4017 3.0377 11.8765 3.33059 12.1694C3.62349 12.4623 4.09836 12.4623 4.39125 12.1694L7 9.56068V14.75C7 15.1642 7.33579 15.5 7.75 15.5C8.16421 15.5 8.5 15.1642 8.5 14.75V9.56065L11.1088 12.1694C11.4017 12.4623 11.8765 12.4623 12.1694 12.1694C12.4623 11.8765 12.4623 11.4016 12.1694 11.1088L9.56067 8.5H14.75C15.1642 8.5 15.5 8.16421 15.5 7.75C15.5 7.33579 15.1642 7 14.75 7H9.56068L12.1694 4.39125C12.4623 4.09836 12.4623 3.62349 12.1694 3.33059C11.8765 3.0377 11.4017 3.0377 11.1088 3.33059L8.5 5.93936V0.75Z" />
</svg>

After

Width:  |  Height:  |  Size: 908 B

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

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,8 +1,8 @@
{ {
"assets/javascripts/bundle.js": "assets/javascripts/bundle.7bc07fc0.min.js", "assets/javascripts/bundle.js": "assets/javascripts/bundle.94ba1295.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7bc07fc0.min.js.map", "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.94ba1295.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.b0b43276.min.js", "assets/javascripts/vendor.js": "assets/javascripts/vendor.f33cd904.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.b0b43276.min.js.map", "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f33cd904.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.784c5235.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.784c5235.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.784c5235.min.js.map", "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.784c5235.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.4e5ff6db.min.css", "assets/stylesheets/main.css": "assets/stylesheets/main.4e5ff6db.min.css",

View File

@ -177,8 +177,8 @@
<script>var __config={}</script> <script>var __config={}</script>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/vendor.b0b43276.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/vendor.f33cd904.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.7bc07fc0.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.94ba1295.min.js' | url }}"></script>
{%- set translations = {} -%} {%- set translations = {} -%}
{%- for key in [ {%- for key in [
"clipboard.copy", "clipboard.copy",

View File

@ -33,6 +33,15 @@ const css = {
container: "md-clipboard md-icon" container: "md-clipboard md-icon"
} }
/* ------------------------------------------------------------------------- */
/**
* Path of `file-search-outline` icon
*/
const path =
"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 " +
"21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
* Functions * Functions
* ------------------------------------------------------------------------- */ * ------------------------------------------------------------------------- */
@ -47,7 +56,6 @@ const css = {
export function renderClipboard( export function renderClipboard(
id: string id: string
) { ) {
const path = require("material-design-icons-svg/paths/content-copy.json")
return ( return (
<button <button
class={css.container} class={css.container}

View File

@ -39,6 +39,20 @@ const css = {
teaser: "md-search-result__teaser" teaser: "md-search-result__teaser"
} }
/* ------------------------------------------------------------------------- */
/**
* Path of `content-copy` icon
*/
const path =
"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H13C12.59,21.75 12.2,21.44 " +
"11.86,21.1C11.53,20.77 11.25,20.4 11,20H6V4H13V9H18V10.18C18.71,10.34 " +
"19.39,10.61 20,11V8L14,2M20.31,18.9C21.64,16.79 21,14 " +
"18.91,12.68C16.8,11.35 14,12 12.69,14.08C11.35,16.19 12,18.97 " +
"14.09,20.3C15.55,21.23 17.41,21.23 " +
"18.88,20.32L22,23.39L23.39,22L20.31,18.9M16.5,19A2.5,2.5 0 0,1 " +
"14,16.5A2.5,2.5 0 0,1 16.5,14A2.5,2.5 0 0,1 19,16.5A2.5,2.5 0 0,1 16.5,19Z"
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
* Functions * Functions
* ------------------------------------------------------------------------- */ * ------------------------------------------------------------------------- */
@ -54,31 +68,30 @@ export function renderSearchResult(
{ article, sections }: SearchResult { article, sections }: SearchResult
) { ) {
// create page with icon /* Render icon */
const path = require("material-design-icons-svg/paths/file-search-outline.json") const icon = (
<div class="md-search-result__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d={path}></path>
</svg>
</div>
)
/* Render article and sections */
const children = [article, ...sections].map(document => { const children = [article, ...sections].map(document => {
const { location, title, text } = document const { location, title, text } = document
return ( return (
<a href={location} class={css.link} tabIndex={-1}> <a href={location} class={css.link} tabIndex={-1}>
<article class={"parent" in document ? css.section : css.article}> <article class={"parent" in document ? css.section : css.article}>
{!("parent" in document) {!("parent" in document) && icon}
? <div class="md-search-result__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d={path}></path>
</svg>
</div>
: null
}
<h1 class={css.title}>{title}</h1> <h1 class={css.title}>{title}</h1>
{text.length {text.length > 0 && <p class={css.teaser}>{truncate(text, 320)}</p>}
? <p class={css.teaser}>{truncate(text, 320)}</p>
: undefined
}
</article> </article>
</a> </a>
) )
}) })
/* Render search result */
return ( return (
<li class={css.item}> <li class={css.item}>
{children} {children}

View File

@ -31,7 +31,6 @@
"workers": ["workers"] "workers": ["workers"]
}, },
"removeComments": false, "removeComments": false,
"resolveJsonModule": true,
"sourceMap": true, "sourceMap": true,
"strictBindCallApply": true, "strictBindCallApply": true,
"strictFunctionTypes": true, "strictFunctionTypes": true,

View File

@ -74,8 +74,7 @@ function config(args: Configuration): Configuration {
transpileOnly: true, transpileOnly: true,
compilerOptions: { compilerOptions: {
importHelpers: true, importHelpers: true,
module: "esnext", module: "esnext"
removeComments: false
} }
} }
} }
@ -183,7 +182,7 @@ function config(args: Configuration): Configuration {
/\.(html|py|yml)$/ /\.(html|py|yml)$/
], ],
warningsFilter: [ warningsFilter: [
/export '.*' was not found in/ /export '.[^']+' was not found in/
] ]
} }
} }