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

View File

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

View File

@ -33,6 +33,15 @@ const css = {
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
* ------------------------------------------------------------------------- */
@ -47,7 +56,6 @@ const css = {
export function renderClipboard(
id: string
) {
const path = require("material-design-icons-svg/paths/content-copy.json")
return (
<button
class={css.container}

View File

@ -39,6 +39,20 @@ const css = {
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
* ------------------------------------------------------------------------- */
@ -54,31 +68,30 @@ export function renderSearchResult(
{ article, sections }: SearchResult
) {
// create page with icon
const path = require("material-design-icons-svg/paths/file-search-outline.json")
/* Render icon */
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 { location, title, text } = document
return (
<a href={location} class={css.link} tabIndex={-1}>
<article class={"parent" in document ? css.section : css.article}>
{!("parent" in document)
? <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
}
{!("parent" in document) && icon}
<h1 class={css.title}>{title}</h1>
{text.length
? <p class={css.teaser}>{truncate(text, 320)}</p>
: undefined
}
{text.length > 0 && <p class={css.teaser}>{truncate(text, 320)}</p>}
</article>
</a>
)
})
/* Render search result */
return (
<li class={css.item}>
{children}

View File

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

View File

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