Merge branch 'refactor/rxjs-typescript' into feature/landing-page

This commit is contained in:
squidfunk 2020-03-28 18:12:09 +01:00
commit 6b5ab8a161
15 changed files with 111 additions and 73 deletions

View File

@ -225,7 +225,7 @@ matches the new structure:
{% if config.extra.manifest %} {% if config.extra.manifest %}
<link rel="manifest" href="{{ config.extra.manifest | url }}" crossorigin="use-credentials"> <link rel="manifest" href="{{ config.extra.manifest | url }}" crossorigin="use-credentials">
{% endif %} {% endif %}
@@ -95,47 +77,46 @@ @@ -95,47 +77,50 @@
{% endblock %} {% endblock %}
{% block extrahead %}{% endblock %} {% block extrahead %}{% endblock %}
</head> </head>
@ -255,20 +255,23 @@ matches the new structure:
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
- <label class="md-overlay" data-md-component="overlay" for="__drawer"></label> - <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
+ <label class="md-overlay" for="__drawer"></label> + <label class="md-overlay" for="__drawer"></label>
{% if page.toc | first is defined %} + <div data-md-component="skip">
- <a href="{{ (page.toc | first).url }}" tabindex="0" class="md-skip"> + {% if page.toc | first is defined %}
+ {% set skip = page.toc | first %} + {% set skip = page.toc | first %}
+ <a href="{{ skip.url | url }}" class="md-skip" data-md-component="skip"> + <a href="{{ skip.url | url }}" class="md-skip">
{{ lang.t('skip.link.title') }} + {{ lang.t('skip.link.title') }}
</a> + </a>
{% endif %} + {% endif %}
+ {% if self.announce() %} + </div>
+ <aside class="md-announce" data-md-component="announce"> + <div data-md-component="announce">
+ <div class="md-announce__inner md-grid md-typeset"> + {% if self.announce() %}
+ {% block announce %}{% endblock %} + <aside class="md-announce">
+ </div> + <div class="md-announce__inner md-grid md-typeset">
+ </aside> + {% block announce %}{% endblock %}
+ {% endif %} + </div>
+ </aside>
+ {% endif %}
+ </div>
{% block header %} {% block header %}
{% include "partials/header.html" %} {% include "partials/header.html" %}
{% endblock %} {% endblock %}

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,10 +1,10 @@
{ {
"assets/javascripts/bundle.js": "assets/javascripts/bundle.edc2ff56.min.js", "assets/javascripts/bundle.js": "assets/javascripts/bundle.0ddca959.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.edc2ff56.min.js.map", "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.0ddca959.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.c1fcc1cc.min.js", "assets/javascripts/vendor.js": "assets/javascripts/vendor.c1fcc1cc.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.c1fcc1cc.min.js.map", "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.c1fcc1cc.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3bc815f0.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3bc815f0.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.3bc815f0.min.js.map", "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.3bc815f0.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.b32d3181.min.css", "assets/stylesheets/main.css": "assets/stylesheets/main.c1451e9e.min.css",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css" "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.b32d3181.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c1451e9e.min.css' | url }}">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
{% endif %} {% endif %}
@ -88,19 +88,23 @@
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label> <label class="md-overlay" for="__drawer"></label>
{% if page.toc | first is defined %} <div data-md-component="skip">
{% set skip = page.toc | first %} {% if page.toc | first is defined %}
<a href="{{ skip.url | url }}" class="md-skip" data-md-component="skip"> {% set skip = page.toc | first %}
{{ lang.t('skip.link.title') }} <a href="{{ skip.url | url }}" class="md-skip">
</a> {{ lang.t('skip.link.title') }}
{% endif %} </a>
{% if self.announce() %} {% endif %}
<aside class="md-announce" data-md-component="announce"> </div>
<div class="md-announce__inner md-grid md-typeset"> <div data-md-component="announce">
{% block announce %}{% endblock %} {% if self.announce() %}
</div> <aside class="md-announce">
</aside> <div class="md-announce__inner md-grid md-typeset">
{% endif %} {% block announce %}{% endblock %}
</div>
</aside>
{% endif %}
</div>
{% block header %} {% block header %}
{% include "partials/header.html" %} {% include "partials/header.html" %}
{% endblock %} {% endblock %}
@ -175,7 +179,7 @@
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/vendor.c1fcc1cc.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/vendor.c1fcc1cc.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.edc2ff56.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.0ddca959.min.js' | url }}"></script>
{%- set translations = {} -%} {%- set translations = {} -%}
{%- for key in [ {%- for key in [
"clipboard.copy", "clipboard.copy",

View File

@ -39,6 +39,7 @@ import { getElement, replaceElement } from "browser"
* Component * Component
*/ */
export type Component = export type Component =
| "announce" /* Announcement bar */
| "container" /* Container */ | "container" /* Container */
| "header" /* Header */ | "header" /* Header */
| "header-title" /* Header title */ | "header-title" /* Header title */
@ -114,6 +115,7 @@ export function setupComponents(
switch (name) { switch (name) {
/* Top-level components: update */ /* Top-level components: update */
case "announce":
case "header-title": case "header-title":
case "container": case "container":
case "skip": case "skip":

View File

@ -73,6 +73,7 @@ export interface Header {
* Mount options * Mount options
*/ */
interface MountOptions { interface MountOptions {
document$: Observable<Document> /* Document observable */
viewport$: Observable<Viewport> /* Viewport observable */ viewport$: Observable<Viewport> /* Viewport observable */
} }
@ -88,11 +89,11 @@ interface MountOptions {
* @return Operator function * @return Operator function
*/ */
export function mountHeader( export function mountHeader(
{ viewport$ }: MountOptions { document$, viewport$ }: MountOptions
): OperatorFunction<HTMLElement, Header> { ): OperatorFunction<HTMLElement, Header> {
return pipe( return pipe(
switchMap(el => { switchMap(el => {
const header$ = watchHeader(el) const header$ = watchHeader(el, { document$ })
/* Compute whether the header should switch to page header */ /* Compute whether the header should switch to page header */
const type$ = useComponent("main") const type$ = useComponent("main")

View File

@ -28,10 +28,12 @@ import {
pipe pipe
} from "rxjs" } from "rxjs"
import { import {
distinctUntilChanged,
finalize, finalize,
map, map,
observeOn, observeOn,
shareReplay, shareReplay,
switchMap,
tap tap
} from "rxjs/operators" } from "rxjs/operators"
@ -43,6 +45,17 @@ import {
setHeaderTitleActive setHeaderTitleActive
} from "../set" } from "../set"
/* ----------------------------------------------------------------------------
* Helper types
* ------------------------------------------------------------------------- */
/**
* Watch options
*/
interface WatchOptions {
document$: Observable<Document> /* Document observable */
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
* Functions * Functions
* ------------------------------------------------------------------------- */ * ------------------------------------------------------------------------- */
@ -55,27 +68,36 @@ import {
* @return Header observable * @return Header observable
*/ */
export function watchHeader( export function watchHeader(
el: HTMLElement el: HTMLElement, { document$ }: WatchOptions
): Observable<Omit<Header, "type">> { ): Observable<Omit<Header, "type">> {
const styles = getComputedStyle(el) return document$
if ([ .pipe(
"sticky", /* Modern browsers */ map(() => {
"-webkit-sticky" /* Safari */ const styles = getComputedStyle(el)
].includes(styles.position)) { return [
return watchElementSize(el) "sticky", /* Modern browsers */
.pipe( "-webkit-sticky" /* Safari */
map(({ height }) => ({ ].includes(styles.position)
sticky: true, }),
height distinctUntilChanged(),
})), switchMap(sticky => {
shareReplay(1) if (sticky) {
) return watchElementSize(el)
} else { .pipe(
return of({ map(({ height }) => ({
sticky: false, sticky: true,
height: 0 height
}) }))
} )
} else {
return of({
sticky: false,
height: 0
})
}
}),
shareReplay(1)
)
} }
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */

View File

@ -158,6 +158,7 @@ export function initialize(config: unknown) {
/* Set up component bindings */ /* Set up component bindings */
setupComponents([ setupComponents([
"announce", /* Announcement bar */
"container", /* Container */ "container", /* Container */
"header", /* Header */ "header", /* Header */
"header-title", /* Header title */ "header-title", /* Header title */
@ -192,7 +193,7 @@ export function initialize(config: unknown) {
/* Create header observable */ /* Create header observable */
const header$ = useComponent("header") const header$ = useComponent("header")
.pipe( .pipe(
mountHeader({ viewport$ }), mountHeader({ document$, viewport$ }),
shareReplay(1) shareReplay(1)
) )

View File

@ -26,6 +26,7 @@
// Announcement bar // Announcement bar
.md-announce { .md-announce {
overflow: auto;
background-color: var(--md-default-fg-color); background-color: var(--md-default-fg-color);
// Actual content // Actual content

View File

@ -201,21 +201,25 @@
<label class="md-overlay" for="__drawer"></label> <label class="md-overlay" for="__drawer"></label>
<!-- Link to skip to content --> <!-- Link to skip to content -->
{% if page.toc | first is defined %} <div data-md-component="skip">
{% set skip = page.toc | first %} {% if page.toc | first is defined %}
<a href="{{ skip.url | url }}" class="md-skip" data-md-component="skip"> {% set skip = page.toc | first %}
{{ lang.t('skip.link.title') }} <a href="{{ skip.url | url }}" class="md-skip">
</a> {{ lang.t('skip.link.title') }}
{% endif %} </a>
{% endif %}
</div>
<!-- Announcement bar --> <!-- Announcement bar -->
{% if self.announce() %} <div data-md-component="announce">
<aside class="md-announce" data-md-component="announce"> {% if self.announce() %}
<div class="md-announce__inner md-grid md-typeset"> <aside class="md-announce">
{% block announce %}{% endblock %} <div class="md-announce__inner md-grid md-typeset">
</div> {% block announce %}{% endblock %}
</aside> </div>
{% endif %} </aside>
{% endif %}
</div>
<!-- Application header --> <!-- Application header -->
{% block header %} {% block header %}