mirror of https://github.com/requarks/wiki
NGPixel
4 days ago
parent
acb555eaa7
commit
50adab2eac
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="page-header flex flex-wrap">
|
||||
<!-- PAGE ICON -->
|
||||
<!--
|
||||
Never a button, unlike `PageHeader`'s: there is no editing surface on a snapshot, so the icon is
|
||||
the drawing and nothing else. Same size and same column so the two headers line up exactly --
|
||||
walking from a page to one of its versions should move the title bar's contents nowhere.
|
||||
-->
|
||||
<div class="flex-none pl-4 flex items-center">
|
||||
<w-icon class="rounded" :name="icon" :size="iconSize" color="primary" />
|
||||
</div>
|
||||
<!-- PAGE HEADING -->
|
||||
<!--
|
||||
Centred rather than top-aligned, as in `PageHeader`: with no description the title is the only
|
||||
line in this column and would otherwise sit above the middle of the icon beside it.
|
||||
-->
|
||||
<div class="min-w-0 flex-1 flex flex-col justify-center p-2 sm:p-4">
|
||||
<div class="text-h4 page-header-title">{{ title }}</div>
|
||||
<div class="text-subtitle2 page-header-subtitle">{{ description }}</div>
|
||||
</div>
|
||||
<!-- VERSION ACTIONS -->
|
||||
<!--
|
||||
What this header has in place of Watch / Print / Edit: the three things there are to do with a
|
||||
snapshot. Two are icons -- taking a copy of it, in either of two forms -- and the third is
|
||||
labelled, because it is the one that WRITES, and a button that overwrites the live page should
|
||||
not be a glyph somebody presses to find out what it does. Its ellipsis is doing the same work:
|
||||
restoring asks first.
|
||||
|
||||
Download, Restore and Branch off each do the same as their entry in the history overlay's version
|
||||
menu, through the same code. Export to PDF is the one still disabled, because it is not wired up
|
||||
yet -- disabled rather than inert on purpose: a button that silently does nothing when pressed
|
||||
reads as a bug, where a dimmed one reads as not-yet.
|
||||
|
||||
Restore is the only one that WRITES to the live page, which is why it keeps the orange this app
|
||||
gives an action that changes a page, and why it asks before doing it. Branch off creates a page
|
||||
instead of overwriting one, so it sits with the harmless ones.
|
||||
|
||||
They stay on a phone, where `PageHeader` drops its whole row: that row is icons for things
|
||||
reachable elsewhere -- Print is the browser's own menu -- while these three are the only actions
|
||||
this view offers at all, so hiding them would leave the screen with none.
|
||||
|
||||
What they do instead is take a row of their own, which is what `w-full` at phone widths buys: the
|
||||
bar already wraps, but this block is `flex-none` and about 230px wide, so beside a 32px icon it
|
||||
left the title column ~60px and the description came out one word per line. Full width wraps it
|
||||
under the title, and `.page-header` is `height: auto` on the same breakpoint so the bar grows by
|
||||
the row rather than squeezing it.
|
||||
-->
|
||||
<!--
|
||||
`ml-2` throughout, which is the editor's own action row (see `PageHeader`): 8px between buttons
|
||||
rather than 16. Every one of them is acrylic and flat there too, except View Live, which is the
|
||||
one filled button -- see its own note below.
|
||||
|
||||
The icon-only pair takes the same treatment as View Documentation in that row: acrylic, flat,
|
||||
grey, and NOT `dense`, so a glyph-only button is the same height as the labelled ones beside it
|
||||
instead of a smaller target floating in the middle of them.
|
||||
-->
|
||||
<div
|
||||
class="page-header-actions w-full sm:w-auto flex-none px-4 pb-4 sm:p-4 flex items-center justify-end">
|
||||
<w-btn
|
||||
class="acrylic-btn ml-2"
|
||||
flat
|
||||
icon="la:download"
|
||||
color="grey"
|
||||
:aria-label="t(`history.downloadVersion`)"
|
||||
@click="emit(`download`)">
|
||||
<w-tooltip>{{ t('history.downloadVersion') }}</w-tooltip>
|
||||
</w-btn>
|
||||
<w-btn
|
||||
class="acrylic-btn ml-2"
|
||||
flat
|
||||
icon="la:file-pdf"
|
||||
color="grey"
|
||||
disable
|
||||
:aria-label="t(`history.exportPdf`)">
|
||||
<w-tooltip>{{ t('history.exportPdf') }}</w-tooltip>
|
||||
</w-btn>
|
||||
<!--
|
||||
Branch off before Restore: it reads as the gentler of the two, and Restore stays next to the
|
||||
confirmation it raises.
|
||||
|
||||
Indigo, which is the colour this app gives history -- the Schedule tab's calendar, the version
|
||||
timeline's dots, the bar at the top of this very screen. It also tells this button apart from
|
||||
the disabled Export to PDF beside it, which grey did not.
|
||||
|
||||
Two shades, because one will not do: as a LABEL, `indigo` measures 6.3:1 on the light header
|
||||
and 2.5:1 on the dark one, while `indigo-4` is 5.0:1 dark and 3.2:1 light. So each theme takes
|
||||
the shade that is legible in it. Bound rather than left to a `dark:` class because `WBtn`
|
||||
writes the colour as an inline style (`--w-btn-color`, and `color` with it), which no
|
||||
stylesheet outranks without `!important`.
|
||||
-->
|
||||
<w-btn
|
||||
class="acrylic-btn ml-2"
|
||||
flat
|
||||
icon="la:code-branch"
|
||||
:color="dark.isActive ? `indigo-4` : `indigo`"
|
||||
no-caps
|
||||
:label="t(`history.branchOffShort`)"
|
||||
:aria-label="t(`history.branchOffShort`)"
|
||||
@click="emit(`branch`)" />
|
||||
<!-- -> The same orange every page header gives the action that changes the page -->
|
||||
<w-btn
|
||||
class="acrylic-btn ml-2"
|
||||
flat
|
||||
icon="la:undo"
|
||||
color="deep-orange-9"
|
||||
no-caps
|
||||
:label="t(`history.restore`)"
|
||||
:aria-label="t(`history.restore`)"
|
||||
@click="emit(`restore`)" />
|
||||
<!--
|
||||
The one live control on this row, and the only way out of the snapshot that does not go
|
||||
backwards: everything else here acts on the version, while this leaves it for the page as it
|
||||
stands. In the site's own colour rather than the orange beside it, because it is not a change
|
||||
to anything -- it is navigation.
|
||||
|
||||
A `to`, not a click handler: it is a link to a path, so it should behave like one — middle-click
|
||||
and ctrl-click open the live page in a tab, and the status bar shows where it goes.
|
||||
|
||||
Solid rather than acrylic, and the only filled button in the row: it is where a reader goes
|
||||
when they are done here, so it carries the weight. `unelevated` because that is how this app
|
||||
does a solid primary button everywhere else -- the unlock and create buttons in `Index.vue`
|
||||
-- and a raised one would be the only shadow in a flat header.
|
||||
|
||||
No `acrylic-btn`, which paints a 10% tint of the button colour and would be a second, weaker
|
||||
background under the fill. And no `dark:` variant either: `primary-light` is right for
|
||||
primary as TEXT on a dark page, but as a FILL behind white it measures 2.4:1 where plain
|
||||
`primary` gives 4.6:1. A fill carries its own contrast, so one colour serves both themes.
|
||||
|
||||
Rendered only with a path to go to. In practice there is always one, since the endpoint behind
|
||||
this view refuses a version whose page has been deleted (page rules need a page to be checked
|
||||
against), but a button whose target is empty would navigate to the site root and quietly look
|
||||
like it had worked.
|
||||
-->
|
||||
<w-btn
|
||||
class="ml-2"
|
||||
v-if="livePath"
|
||||
unelevated
|
||||
icon="la:eye"
|
||||
color="primary"
|
||||
no-caps
|
||||
:to="livePath"
|
||||
:label="t(`history.viewLive`)"
|
||||
:aria-label="t(`history.viewLive`)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useDark } from '@/composables/dark'
|
||||
import { useMinWidth } from '@/composables/screen'
|
||||
|
||||
const emit = defineEmits(['download', 'restore', 'branch'])
|
||||
|
||||
defineProps({
|
||||
/** The page's icon as the version recorded it, an Iconify reference. */
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* Where the live page sits now, ready to route to — locale prefix and all. Empty when there is
|
||||
* nowhere to send the reader, which hides the View Live button rather than pointing it at nothing.
|
||||
*/
|
||||
livePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// COMPOSABLES
|
||||
|
||||
const dark = useDark()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// COMPUTED
|
||||
|
||||
/**
|
||||
* The page icon, halved on a phone — the same call, and the same reason, as `PageHeader`: `WIcon`
|
||||
* renders `size` as an inline `font-size`, which no stylesheet can outrank without `!important`, so it
|
||||
* has to be bound rather than left to a media query.
|
||||
*/
|
||||
const isAtLeastSm = useMinWidth(600)
|
||||
const iconSize = computed(() => (isAtLeastSm.value ? '64px' : '32px'))
|
||||
</script>
|
||||
@ -0,0 +1,416 @@
|
||||
/*
|
||||
The chrome a page view is drawn in: the breadcrumb bar, the title header, and the column the article
|
||||
and its footer scroll inside. Plus the placeholder screen that stands in for the article when there
|
||||
is nothing to draw there.
|
||||
|
||||
Here rather than in `pages/Index.vue`, where all of it began, because there is now more than one view
|
||||
wearing it -- `pages/PageVersion.vue` draws a historical snapshot in the same chrome. An SFC's
|
||||
unscoped styles ship in that component's own lazily-imported chunk, so a second view reusing these
|
||||
class names got the markup and none of the rules, which is the way this goes wrong invisibly: the
|
||||
header renders, and it is a plain box with no gradient, no border and no height.
|
||||
|
||||
The contents column is here too, panel behaviour and all: both views have one, and the version view's
|
||||
is the same column drawing the same list from the same `toc`. What stayed behind in `Index.vue` is
|
||||
only what a snapshot has no use for -- the toggle on the tags heading, tags being editable on a page
|
||||
and not on a record of one.
|
||||
*/
|
||||
|
||||
/*
|
||||
The Sass variables, loaded explicitly. `vite.config.js` injects both of these into every SFC through
|
||||
`additionalData`, but that reaches only the files Vite itself hands to Sass -- a partial pulled in by
|
||||
`@use` from `app.scss` is resolved by Sass and arrives without it. Same note as `_page-contents.scss`,
|
||||
which is here for the same reason.
|
||||
|
||||
Both, not just the palette: the greys and the breakpoint come from `_palette.scss`, the `$dark-*` ramp
|
||||
these gradients are built on from `_theme.scss`.
|
||||
*/
|
||||
@use 'palette' as *;
|
||||
@use 'theme' as *;
|
||||
|
||||
/*
|
||||
Where the contents column stops being able to afford 300px. A page view's own threshold, not one of the
|
||||
app's -- `_palette.scss` is for the breakpoints the whole app shares, and this one is a function of a
|
||||
page's two sidebars. Stated as a `max` value just under 1400px, the way the shared ones are.
|
||||
*/
|
||||
$toc-narrow-max: 1399.98px;
|
||||
|
||||
/*
|
||||
...and where it stops being a column at all and becomes a panel over the article. The same boundary as
|
||||
the 750px `useMinWidth` in each view, which decides whether that view renders the opener, and as the
|
||||
one each layout uses to stand scroll-to-top down from this corner. They all have to agree.
|
||||
*/
|
||||
$toc-overlay-max: 749.98px;
|
||||
|
||||
/*
|
||||
The column in place of the article: the lock screen, the page that does not exist, and the
|
||||
redirection on its way somewhere else. All three are the same shape -- a large faint icon, a
|
||||
sentence, and the one button that does something about it -- and share the styling so they cannot
|
||||
drift apart. `PageRedirect.vue` draws its own screens with these classes for that reason.
|
||||
*/
|
||||
.page-placeholder {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* -> Off dead centre: the text reads better a little above the middle of the column */
|
||||
padding: 0 24px 10vh;
|
||||
text-align: center;
|
||||
|
||||
/*
|
||||
Stated per theme, as everything else in this column is: the article's own colours come from
|
||||
`_page-contents.scss`, so a plain block dropped in beside it inherits the document's black and
|
||||
goes invisible on the dark surface. The icon below takes its colour from here as well.
|
||||
*/
|
||||
@at-root .body--light & {
|
||||
color: $grey-9;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Large and faint. It is the illustration on an otherwise empty column, not something to look at -- the
|
||||
sentence under it is what the reader is here to read.
|
||||
*/
|
||||
.page-placeholder-icon {
|
||||
margin-bottom: 24px;
|
||||
font-size: 96px;
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
.page-breadcrumbs {
|
||||
@at-root .body--light & {
|
||||
background: linear-gradient(to bottom, $grey-1 0%, $grey-3 100%);
|
||||
border-bottom: 1px solid $grey-4;
|
||||
}
|
||||
/*
|
||||
The bar sets a background per theme, so it owes a foreground too: the LAST crumb -- the current
|
||||
page -- deliberately inherits rather than taking `active-color`, and what it was inheriting in
|
||||
dark mode was the document's black.
|
||||
*/
|
||||
@at-root .body--light & {
|
||||
color: var(--color-black);
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background: linear-gradient(to bottom, $dark-3 0%, $dark-4 100%);
|
||||
border-bottom: 1px solid $dark-3;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/*
|
||||
A point off the trail on a phone, on the bar rather than on the crumbs: `WBreadcrumbs` sets no size
|
||||
of its own and its icons are 125% of whatever it inherits, so one declaration here takes the text and
|
||||
the icons down together and keeps the two in proportion.
|
||||
|
||||
13px is where it stops. The trail is how a reader gets back out, and it is already the smallest type
|
||||
on the screen -- what is wanted is a bar that gives way to the page under it, not one nobody can read.
|
||||
*/
|
||||
@media (max-width: $breakpoint-xs-max) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
The version view's bar, which says which snapshot is on screen rather than where a page sits.
|
||||
|
||||
Indigo and not the page view's grey, because it is not the same statement: the trail on a page is
|
||||
chrome a reader looks past, while this one is the only thing on screen saying that what is under it
|
||||
is a RECORD of a page and not the page. A coloured band is what carries that at a glance, and indigo
|
||||
is the colour the interface already gives history -- the Schedule tab's calendar, the version
|
||||
timeline's own dots.
|
||||
|
||||
Both themes take the same treatment rather than the light one being tinted and the dark one left
|
||||
dark: the point is a band that stands out from the chrome above and below it, and in the dark theme
|
||||
a grey bar between a dark header and a dark article is exactly what does not.
|
||||
|
||||
Declared after the block above and overriding it at equal specificity, so source order is what
|
||||
settles it -- one file, one place to look, and nothing depending on which chunk loaded last.
|
||||
|
||||
The foreground is stated once for everything in the bar, which is why the markup carries no colour
|
||||
of its own: the icon paints with `currentColor` and the date inherits. `<strong>` is what marks the
|
||||
date out, as it did when the bar was grey.
|
||||
*/
|
||||
.page-breadcrumbs--version {
|
||||
@at-root .body--light & {
|
||||
background: linear-gradient(to bottom, var(--color-indigo-6) 0%, var(--color-indigo-7) 100%);
|
||||
border-bottom: 1px solid var(--color-indigo-9);
|
||||
color: #fff;
|
||||
}
|
||||
/* -> A step down the same ramp, so the band reads as deliberate against a dark page rather than as
|
||||
the light theme's bar left switched on */
|
||||
@at-root .body--dark & {
|
||||
background: linear-gradient(to bottom, var(--color-indigo-7) 0%, var(--color-indigo-9) 100%);
|
||||
border-bottom: 1px solid var(--color-indigo-9);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
The frame round the whole version view: 5px down both sides and along the bottom, with the bar above
|
||||
closing the fourth. Together they box the screen in, which is the point -- the indigo says "what you
|
||||
are reading is a RECORD of a page", and that is true of the whole view rather than of its first 30px.
|
||||
|
||||
Its colour is the DARK end of that bar's gradient in each theme, which is what makes the top corners
|
||||
corners: the bar finishes on this exact value, so where the two meet there is no seam and the eye
|
||||
reads one shape bent round the content. Picking the light end instead would draw a line across the
|
||||
join.
|
||||
|
||||
No top width, since the bar is already there -- a border under it would be a second line saying the
|
||||
same thing, and the bar has an underline of its own.
|
||||
|
||||
On the page element, which is what makes all three sides land where they should: it is a flex item in
|
||||
`WPageContainer` that also claims `h-full`, so it is exactly as tall as the content cell, and the
|
||||
bottom edge sits at the bottom of the window rather than below the fold. The article scrolls inside
|
||||
its own box further in (`.page-container-scrl`), so the frame holds still while the content moves
|
||||
behind it.
|
||||
|
||||
`box-sizing: border-box` is global (Tailwind's reset), so all 10px of the sides come out of the
|
||||
content box and the view does not grow a scrollbar in either direction. That reset also declares
|
||||
`border: 0 solid`, which is why a width and a colour are the whole of this -- and why the widths can
|
||||
be stated once for both themes with only the colour switching.
|
||||
*/
|
||||
.page-version {
|
||||
border-style: solid;
|
||||
border-width: 0 5px 5px;
|
||||
|
||||
@at-root .body--light & {
|
||||
border-color: var(--color-indigo-7);
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
border-color: var(--color-indigo-9);
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 95px;
|
||||
|
||||
/*
|
||||
Sized by its contents on a phone instead, which comes out around 70px: the 95px is pitched for a 64px
|
||||
icon beside 34px display type, and holding it under the halved icon and title of the phone layout left
|
||||
a band of empty gradient under the description.
|
||||
|
||||
`auto` rather than a smaller fixed height, because a fixed one is what the desktop bar can only just
|
||||
afford: a title long enough to wrap has nowhere to go in it. Here the bar grows by a line instead, and
|
||||
a page with no description gets a bar shorter still.
|
||||
*/
|
||||
@media (max-width: $breakpoint-xs-max) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@at-root .body--light & {
|
||||
background: linear-gradient(to bottom, $grey-2 0%, $grey-1 100%);
|
||||
border-bottom: 1px solid $grey-4;
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background: linear-gradient(to bottom, $dark-4 0%, $dark-3 100%);
|
||||
// border-bottom: 1px solid $dark-5;
|
||||
border-top: 1px solid $dark-6;
|
||||
}
|
||||
|
||||
.no-height .q-field__control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
/*
|
||||
`text-h4` is a 34px display size written for a header the width of a desktop window: at 390px a
|
||||
title of any length wrapped and pushed the description out of the bar. 24px is the step
|
||||
`text-h5` takes, written as a value rather than as that class so the size sits beside the
|
||||
breakpoint asking for it.
|
||||
|
||||
Here rather than in a header component's scoped block, where it started: scoped rules carry a
|
||||
data attribute and reach only that one component's markup, so the second header wearing these
|
||||
classes rendered a 34px title on a phone. The header's own `@media` block keeps what is its own
|
||||
business -- which of ITS actions survive the narrow layout.
|
||||
*/
|
||||
@media (max-width: $breakpoint-xs-max) {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
@at-root .body--light & {
|
||||
color: $grey-9;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&-subtitle {
|
||||
@at-root .body--light & {
|
||||
color: $grey-7;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
The article and the footer under it, stacked inside the one box that scrolls.
|
||||
|
||||
`flex: 1 0 auto` on the article is what keeps the footer at the BOTTOM of a short page instead of
|
||||
leaving it hanging under two lines of content: the article takes the leftover height, and past that
|
||||
grows with its own content and pushes the footer out of view until the reader gets there. It must
|
||||
not shrink either, or a long article would be squeezed to make room rather than scrolling.
|
||||
*/
|
||||
.page-container-scrl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-container-body {
|
||||
flex: 1 0 auto;
|
||||
|
||||
/*
|
||||
The other half of the padding change each view makes on a phone, where the article column pads by
|
||||
8px a side instead of 16.
|
||||
|
||||
`--content-bleed` is how far the rule under an h1 reaches BACK through the padding of whatever holds
|
||||
the content, so that it starts at the sidebar rather than at the text -- so it is a statement about
|
||||
this surface's padding, and left at 1rem against 0.5rem of it the rule overhung the column by 8px.
|
||||
`_page-contents.scss` declares the property expecting exactly this: a surface that pads differently
|
||||
overrides the one property rather than the rule.
|
||||
|
||||
On the `.page-contents` element rather than here, because that is where the default is declared and a
|
||||
custom property set on the parent would simply be shadowed by it. The editor's preview pane carries
|
||||
the class itself and still pads 1rem, so it keeps the default.
|
||||
*/
|
||||
@media (max-width: $breakpoint-xs-max) {
|
||||
.page-contents {
|
||||
--content-bleed: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
A hairline of the page's OWN background between the header and whatever the column starts with, in
|
||||
each theme's colour -- so it is invisible against the article, which is that colour, and reads as one
|
||||
pixel of daylight under anything that starts flush to the top of the column. A site banner does
|
||||
exactly that, and against the header's bottom border it needs the gap.
|
||||
|
||||
Both themes: with the dark one left out the banner butted straight into the header there and not in
|
||||
the light theme, which is the sort of difference that reads as a bug in whichever one you see second.
|
||||
*/
|
||||
.page-container {
|
||||
@at-root .body--light & {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
border-top: 1px solid $dark-6;
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
flex: 0 0 300px;
|
||||
|
||||
/*
|
||||
Narrower once the window is: 300px is pitched for a wide desktop, where it is a tenth of the width, and
|
||||
by 1200px it is a quarter of what is left after the nav sidebar. 200px still holds a heading of a few
|
||||
words per line -- the contents list wraps rather than truncating (see `PageToc`) -- and hands the
|
||||
article the other 100px.
|
||||
|
||||
1400px is this view's own threshold rather than one of the app's `--breakpoint-*`: it is where THIS
|
||||
column starts crowding the article, which depends on its own width and the nav's.
|
||||
*/
|
||||
@media (max-width: $toc-narrow-max) {
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
|
||||
/*
|
||||
And below 750px it stops being a column at all: even at 200px it is a third of a 600px window, and an
|
||||
article is what the reader came for. It becomes a panel the width of the wide column, parked off the
|
||||
right edge and slid in when asked for -- the same shape as the nav drawer on a narrow screen, and for
|
||||
the same reason, so the two behave alike from opposite sides.
|
||||
|
||||
`position: fixed` is what takes it out of the row, so the article gets the whole width whether the
|
||||
panel is open or not; the reader is never made to choose between the two, only to look at one at a
|
||||
time. `transform` is what animates, being the one property that moves a box without laying anything
|
||||
out again -- and the panel is out of flow, so there is nothing behind it to reflow anyway.
|
||||
|
||||
Right regardless of `tocPosition`: the opener is in the bottom-RIGHT corner, and a panel arriving from
|
||||
the far side of the screen from the button that summoned it reads as something else appearing.
|
||||
*/
|
||||
@media (max-width: $toc-overlay-max) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 40;
|
||||
/* -> The wide column's width, capped so it cannot take the whole of a small screen */
|
||||
width: 300px;
|
||||
max-width: 85vw;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.2s var(--ease-standard);
|
||||
box-shadow: -2px 0 12px rgb(0 0 0 / 0.3);
|
||||
|
||||
&.is-open {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .body--light & {
|
||||
background-color: $grey-2;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-5;
|
||||
}
|
||||
|
||||
// A light rule on the light sidebar, near-black on the dark one -- it reads as the bevel between
|
||||
// two panels rather than as a drawn line.
|
||||
//
|
||||
// The original set a background-colour here as well as a border. It never showed: the element is
|
||||
// 1px tall with `box-sizing: border-box`, so the content box is 0px and the opaque border covers
|
||||
// it completely. Only the border colour is carried across.
|
||||
.w-separator {
|
||||
--w-hairline-color: #fff;
|
||||
}
|
||||
@at-root .body--dark & .w-separator {
|
||||
--w-hairline-color: #070a0d;
|
||||
}
|
||||
|
||||
/*
|
||||
The column is the height of the shell, so its own content scrolls when there is more of it than
|
||||
there is room -- a long contents list, in practice. Nothing sticky is involved: the shell holds
|
||||
still on its own, and the article beside this scrolls in its own box.
|
||||
*/
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(102 102 102 / 0.5) transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
Behind the panel, and under it: the same tint and the same z-index as the nav drawer's scrim, one step
|
||||
below the panel it dims. The opener is at z-30 as well and is not rendered while the panel is open, so
|
||||
the two never overlap.
|
||||
*/
|
||||
.page-sidebar-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
background-color: rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
.page-sidebar-scrim-enter-active,
|
||||
.page-sidebar-scrim-leave-active,
|
||||
.toc-open-btn-enter-active,
|
||||
.toc-open-btn-leave-active {
|
||||
transition: opacity 0.2s var(--ease-standard);
|
||||
}
|
||||
.page-sidebar-scrim-enter-from,
|
||||
.page-sidebar-scrim-leave-to,
|
||||
.toc-open-btn-enter-from,
|
||||
.toc-open-btn-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.page-sidebar,
|
||||
.page-sidebar-scrim-enter-active,
|
||||
.page-sidebar-scrim-leave-active,
|
||||
.toc-open-btn-enter-active,
|
||||
.toc-open-btn-leave-active {
|
||||
transition-duration: 0.01ms;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@use 'base';
|
||||
@use 'animation';
|
||||
@use 'page-chrome';
|
||||
@use 'page-contents';
|
||||
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import { fileSave } from 'browser-fs-access'
|
||||
|
||||
import { MarkdownRenderer } from '@/renderers/markdown'
|
||||
|
||||
/**
|
||||
* What a recorded page version is, to the two screens that show one.
|
||||
*
|
||||
* The history overlay and the version view both have to answer the same questions about a version --
|
||||
* what format was it written in, what does its source save as, and what HTML does it become -- and
|
||||
* they used to answer them separately. The format question alone is asked six times between them
|
||||
* (colouring a diff, two renders, two downloads, a restore), so it lives here once.
|
||||
*
|
||||
* Nothing here touches a store or the i18n catalogue, which is what keeps it a helper: a caller
|
||||
* supplies the renderer config it already holds, and reports failures in its own words.
|
||||
*/
|
||||
|
||||
/** What a version's source is saved as, by the format it was written in. */
|
||||
const FILE_TYPES = {
|
||||
markdown: { ext: 'md', mime: 'text/markdown' },
|
||||
html: { ext: 'html', mime: 'text/html' }
|
||||
}
|
||||
|
||||
/** For a format nothing here knows: plain text saves and reads as itself. */
|
||||
const FALLBACK_TYPE = { ext: 'txt', mime: 'text/plain' }
|
||||
|
||||
/**
|
||||
* The format a version was written in -- which decides how it colours, how it renders and what it
|
||||
* downloads as.
|
||||
*
|
||||
* Read off the VERSION and never off the page it belongs to: a page converted from markdown to HTML
|
||||
* since is still a markdown version, and asking the page would render it as the wrong thing.
|
||||
*
|
||||
* `meta.contentType` is what `pageHistory.record` writes for every version, so the rest is belt and
|
||||
* braces for a row that somehow lacks it.
|
||||
*
|
||||
* @param {object} version A version as the API returns one.
|
||||
* @returns {string} `markdown`, `html`, or whatever the version claims.
|
||||
*/
|
||||
export function versionContentType(version) {
|
||||
return version?.meta?.contentType || version?.meta?.editor || 'markdown'
|
||||
}
|
||||
|
||||
/**
|
||||
* Save a version's source to a file the reader picks.
|
||||
*
|
||||
* Named for the page and the moment -- `notes-2026-09-07-03-30-38.md` -- because a folder of
|
||||
* `page.md` files says nothing about which page or which version each one is.
|
||||
*
|
||||
* @param {object} version A version WITH its `content`; the history list alone does not carry it.
|
||||
* @returns {Promise<boolean>} True once written, false if the reader dismissed the picker. Anything
|
||||
* that actually went wrong is thrown, for the caller to report in its own words.
|
||||
*/
|
||||
export async function saveVersionSource(version) {
|
||||
const type = FILE_TYPES[versionContentType(version)] ?? FALLBACK_TYPE
|
||||
const name = version.path?.split('/').at(-1) || 'page'
|
||||
const stamp = (version.versionDate ?? '').slice(0, 19).replace(/[:T]/g, '-')
|
||||
try {
|
||||
/*
|
||||
A bare MIME type, with no `;charset=` on it: the save picker uses this as an `accept` key and
|
||||
rejects a type carrying parameters outright. Nothing is lost by dropping it -- a Blob built from
|
||||
a JS string is UTF-8 already.
|
||||
*/
|
||||
await fileSave(new Blob([version.content ?? ''], { type: type.mime }), {
|
||||
fileName: `${name}-${stamp}.${type.ext}`,
|
||||
extensions: [`.${type.ext}`]
|
||||
})
|
||||
return true
|
||||
} catch (err) {
|
||||
// -> Dismissing the file picker is not a failure, and nothing should be said about it
|
||||
if (err.name === 'AbortError') {
|
||||
return false
|
||||
}
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A version's source as the HTML a page stores.
|
||||
*
|
||||
* Produced on this side for the same reason every save produces it here: the markdown pipeline is a
|
||||
* frontend one, and the server would otherwise have to drive a headless browser. A version records
|
||||
* the source it held and not the render, so there is nothing stored to use instead.
|
||||
*
|
||||
* The config is passed IN rather than read from `stores/editor` here, because no other helper in this
|
||||
* directory reaches for a store and this is not the file to start in. The caller has it already, and
|
||||
* has to make sure it is loaded (`editorStore.fetchConfigs()`) before asking.
|
||||
*
|
||||
* @param {object} version A version WITH its `content`.
|
||||
* @param {object} options
|
||||
* @param {object} options.markdownConfig `editorStore.editors.markdown` — per-site renderer settings
|
||||
* (line breaks, typographer, …).
|
||||
* @param {string} options.pagePath The page this HTML is FOR, which is what a relative image in it
|
||||
* resolves against. Not always the version's own `path`: content being restored onto a page that
|
||||
* has since moved belongs to where that page is now.
|
||||
* @returns {string} The HTML, or the source unchanged for a format this does not render.
|
||||
*/
|
||||
export function renderVersionSource(version, { markdownConfig, pagePath }) {
|
||||
const content = version?.content ?? ''
|
||||
if (versionContentType(version) !== 'markdown') {
|
||||
return content
|
||||
}
|
||||
return new MarkdownRenderer(markdownConfig ?? {}).render(content, { pagePath })
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<w-layout>
|
||||
<w-header class="site-header-wrap">
|
||||
<header-nav />
|
||||
</w-header>
|
||||
<!--
|
||||
No `<w-drawer>`, which is the whole of what separates this from `MainLayout`: a snapshot is
|
||||
reached from a link rather than browsed to, and the navigation tree is about where pages are NOW
|
||||
-- every entry in it would lead out of the version being read without saying so.
|
||||
|
||||
What follows from that is the simple part of this file. There is no sidebar, so there is no
|
||||
opener for one on a narrow viewport, and no column for scroll-to-top to end at: it sits in the
|
||||
corner at every width, which is the `scrollerAnchorX: null` case `MainLayout` reaches when a site
|
||||
has its sidebar off.
|
||||
-->
|
||||
<!--
|
||||
No `<w-footer>` here, for the same reason as `MainLayout`: this shell holds still and the article
|
||||
column scrolls inside it, so a footer at this level would be pinned to the window. The version
|
||||
view puts one at the end of that scrolling column instead.
|
||||
-->
|
||||
<w-page-container>
|
||||
<router-view />
|
||||
<!--
|
||||
Below 750px the version view turns its contents column into a panel and takes this corner for
|
||||
the opener, exactly as the page view does -- so this stands down there, and the two never
|
||||
overlap. `.page-container-scrl` is the article column, which is what actually scrolls.
|
||||
-->
|
||||
<w-page-scroller
|
||||
v-if="isAtLeastTocPanelWidth"
|
||||
:scroll-offset="150"
|
||||
:anchor-x="null"
|
||||
target=".page-container-scrl">
|
||||
<w-btn
|
||||
class="corner-btn corner-btn--right"
|
||||
icon="la:arrow-up"
|
||||
color="primary"
|
||||
round
|
||||
size="md" />
|
||||
</w-page-scroller>
|
||||
</w-page-container>
|
||||
</w-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMinWidth } from '@/composables/screen'
|
||||
import { useMeta } from '@/composables/meta'
|
||||
|
||||
import { useSiteStore } from '@/stores/site'
|
||||
|
||||
// COMPONENTS
|
||||
|
||||
import HeaderNav from '@/components/HeaderNav.vue'
|
||||
|
||||
// STORES
|
||||
|
||||
const siteStore = useSiteStore()
|
||||
|
||||
// META
|
||||
|
||||
/*
|
||||
The same title template as `MainLayout`, and a getter for the same reason: the site config is
|
||||
fetched, so a template closing over `siteStore.title` and registered once would keep whatever the
|
||||
store held at mount. The version view supplies the title half.
|
||||
*/
|
||||
useMeta(() => {
|
||||
const siteTitle = siteStore.title
|
||||
return {
|
||||
titleTemplate: (title) => (title ? `${title} - ${siteTitle}` : siteTitle)
|
||||
}
|
||||
})
|
||||
|
||||
// COMPUTED
|
||||
|
||||
/**
|
||||
* At or above 750px, which is where scroll-to-top keeps the bottom-right corner. Below it the version
|
||||
* view turns its contents column into a panel and puts that panel's opener here instead. The view owns
|
||||
* the threshold (`$toc-overlay-max` and the 750px `useMinWidth` in `pages/PageVersion.vue`); this is
|
||||
* the same number from the side that has to get out of the way.
|
||||
*/
|
||||
const isAtLeastTocPanelWidth = useMinWidth(750)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*
|
||||
The window behind the shell, in the dark theme.
|
||||
|
||||
Every layout that holds a page-shaped view declares this for itself -- `MainLayout`, `InboxLayout`
|
||||
and `ProfileLayout` all carry the identical rule -- because it paints `body`, which is outside the
|
||||
app's own markup and so cannot be reached by anything scoped. Without it the article column sits on
|
||||
the browser's default white while the header, the contents column and the footer are all dark, and
|
||||
the body text, which IS white in that theme, disappears into it.
|
||||
*/
|
||||
body.body--dark {
|
||||
background-color: $dark-6;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,551 @@
|
||||
<template>
|
||||
<!--
|
||||
`h-full min-h-0`, as in the page view: the shell hands this a definite height and it has to CLAIM
|
||||
it, or the article column below cannot scroll on its own and the whole page scrolls in the shell.
|
||||
-->
|
||||
<w-page class="page-version flex flex-col h-full min-h-0">
|
||||
<!--
|
||||
Where the page view puts the breadcrumb trail. A snapshot has no trail to draw: the crumbs lead
|
||||
to where each folder is NOW, which is a walk out of the version and into the live wiki without
|
||||
saying so -- and the version's own path is already the title bar's business. What identifies this
|
||||
screen is the version, so the version is what the bar says.
|
||||
-->
|
||||
<div
|
||||
class="page-breadcrumbs page-breadcrumbs--version py-1 px-4 sm:py-2 flex flex-wrap"
|
||||
v-if="state.version">
|
||||
<div class="min-w-0 flex-1 flex items-center">
|
||||
<!-- -> No `color` on the icon and no grey on the date: the indigo bar states one foreground
|
||||
for everything in it, and `WIcon` paints with `currentColor`, so both inherit it -->
|
||||
<w-icon class="mr-2" name="la:history" size="sm" />
|
||||
<!-- -> `shrink-0`, so it is the ID that truncates on a narrow bar and never the words saying
|
||||
what the ID is -->
|
||||
<span class="text-caption shrink-0 mr-1">{{ t('history.viewingVersionId') }}</span>
|
||||
<!-- -> Monospaced and selectable: it is an identifier, and the reason to show one in full is
|
||||
so it can be read off and quoted -->
|
||||
<span class="text-caption font-robotomono select-all truncate">{{ state.version.id }}</span>
|
||||
</div>
|
||||
<!--
|
||||
Off on a phone, as the page view's date is: on a 390px screen it takes a whole line of its own
|
||||
under the identifier.
|
||||
-->
|
||||
<div class="flex-none items-center justify-end hidden sm:flex">
|
||||
<div class="text-caption">
|
||||
{{ t('history.snapshotFrom') }} <strong>{{ snapshotFrom }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<page-version-header
|
||||
v-if="state.version"
|
||||
:icon="versionIcon"
|
||||
:title="state.version.title"
|
||||
:description="versionDescription"
|
||||
:live-path="livePath"
|
||||
@download="downloadVersion"
|
||||
@restore="restoreVersion"
|
||||
@branch="branchFrom" />
|
||||
<!-- -> `min-h-0` so the columns inside can be shorter than their content and scroll -->
|
||||
<div class="page-container flex min-h-0 flex-nowrap items-stretch" style="flex: 1 1 100%">
|
||||
<div
|
||||
class="min-w-0 flex-1"
|
||||
:style="siteStore.theme.tocPosition === `left` ? `order: 2;` : `order: 1;`">
|
||||
<!--
|
||||
The same placeholder column the page view uses for a page that is not there, and for the
|
||||
same reason: this is a state of the view rather than an error screen. Nothing here offers a
|
||||
way to fix it -- a version either exists and may be read, or it does not -- so the way out is
|
||||
the way they came.
|
||||
-->
|
||||
<div v-if="state.failed" class="page-placeholder">
|
||||
<w-icon class="page-placeholder-icon" name="la:history" />
|
||||
<div class="text-h6">{{ t('history.versionUnavailable') }}</div>
|
||||
<div class="text-body2 mt-1 opacity-60">{{ t('history.versionUnavailableHint') }}</div>
|
||||
<w-btn
|
||||
class="mt-6"
|
||||
outline
|
||||
icon="la:arrow-left"
|
||||
color="primary"
|
||||
padding="xs lg"
|
||||
:label="t(`common.newpage.goback`)"
|
||||
@click="goBack" />
|
||||
</div>
|
||||
<w-scroll-area class="page-container-scrl" v-else style="height: 100%">
|
||||
<!-- -> Half the padding on a phone, matching the page view; `--content-bleed` follows in
|
||||
`_page-chrome.scss` -->
|
||||
<div class="page-container-body p-2 sm:p-4">
|
||||
<!--
|
||||
Delegated rather than bound per link: the anchors are written by `v-html`, so there is
|
||||
nothing here to put a handler on.
|
||||
-->
|
||||
<div
|
||||
class="page-contents"
|
||||
ref="pageContents"
|
||||
v-html="state.render"
|
||||
@click="onContentClick" />
|
||||
</div>
|
||||
<!-- -> Inside the scrolling column and last, so it is the bottom of the page rather than
|
||||
something sitting over the article -->
|
||||
<w-footer>
|
||||
<footer-nav />
|
||||
</w-footer>
|
||||
</w-scroll-area>
|
||||
</div>
|
||||
<!-- -> The scrim behind the contents panel while it overlays the article, and how it is
|
||||
dismissed without picking a heading -->
|
||||
<transition name="page-sidebar-scrim">
|
||||
<div v-if="tocPanelIsOpen" class="page-sidebar-scrim" @click="closeTocPanel" />
|
||||
</transition>
|
||||
<!--
|
||||
The contents column, drawn from the `toc` the version recorded -- see `models/pageHistory.ts`,
|
||||
where `toc` is kept in a version's `meta` for exactly this. Below 750px it stops being a column
|
||||
and slides in over the article instead, which is why it stays mounted at every width and
|
||||
`is-open` is what decides whether it is on screen.
|
||||
|
||||
Contents and nothing else. The page view's tags and rating are beside them there because both
|
||||
are things to DO to the page in front of the reader, and neither is a thing to do to a record
|
||||
of what it once said -- editing tags writes the live page, and a rating is about the page as it
|
||||
stands.
|
||||
-->
|
||||
<div
|
||||
class="page-sidebar"
|
||||
v-if="showToc"
|
||||
:class="{ 'is-open': tocPanelIsOpen }"
|
||||
:style="siteStore.theme.tocPosition === `left` ? `order: 1;` : `order: 2;`"
|
||||
@click="onSidebarClick">
|
||||
<div class="p-4 flex items-center">
|
||||
<w-icon class="mr-2" name="la:stream" color="grey" />
|
||||
<div class="text-caption text-grey-7">{{ t('common.page.contents') }}</div>
|
||||
</div>
|
||||
<div class="px-4 pb-2">
|
||||
<page-toc
|
||||
:nodes="versionToc"
|
||||
:min-depth="tocDepth.min"
|
||||
:max-depth="tocDepth.max"
|
||||
v-model:selected="state.tocSelected" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
What opens that panel, in the bottom-right corner -- the corner `VersionLayout` gives to
|
||||
scroll-to-top, which stands down below 750px so that this can have it. Same position and the same
|
||||
`.corner-btn` shape, so the two read as one button that changes what it does.
|
||||
-->
|
||||
<transition name="toc-open-btn">
|
||||
<div v-if="showTocPanelBtn" class="fixed bottom-0 right-0 z-30">
|
||||
<w-btn
|
||||
class="corner-btn corner-btn--right"
|
||||
icon="mdi:file-tree"
|
||||
color="primary"
|
||||
round
|
||||
size="md"
|
||||
:aria-label="t(`common.page.contents`)"
|
||||
:aria-expanded="tocPanelIsOpen"
|
||||
@click="openTocPanel" />
|
||||
</div>
|
||||
</transition>
|
||||
</w-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineAsyncComponent, nextTick, reactive, ref, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useMeta } from '@/composables/meta'
|
||||
import { useMinWidth } from '@/composables/screen'
|
||||
import { confirm, dialog } from '@/composables/dialog'
|
||||
import { notify } from '@/composables/notify'
|
||||
import { loading } from '@/composables/loading'
|
||||
import { apiErrorMessage } from '@/helpers/apiError'
|
||||
import { scrollToAnchor } from '@/helpers/anchors'
|
||||
import { enhanceRenderedContent, resolveContentClick } from '@/helpers/renderedContent'
|
||||
import { renderVersionSource, saveVersionSource } from '@/helpers/pageVersions'
|
||||
import { flattenToc } from '@/helpers/toc'
|
||||
|
||||
import { useEditorStore } from '@/stores/editor'
|
||||
import { useSiteStore } from '@/stores/site'
|
||||
|
||||
import FooterNav from '@/components/FooterNav.vue'
|
||||
import PageToc from '@/components/PageToc.vue'
|
||||
import PageVersionHeader from '@/components/PageVersionHeader.vue'
|
||||
|
||||
// STORES
|
||||
|
||||
const editorStore = useEditorStore()
|
||||
const siteStore = useSiteStore()
|
||||
|
||||
// ROUTER
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// DATA
|
||||
|
||||
const state = reactive({
|
||||
/** The version as the API answered it, or null while it is on its way — and after it fails. */
|
||||
version: null,
|
||||
/** The version's source, rendered here. See `renderFor`. */
|
||||
render: '',
|
||||
/**
|
||||
* Whether the version could not be loaded — gone, never there, or not this reader's to see. One flag
|
||||
* for all three: the API deliberately does not tell them apart (a version on a page you cannot read
|
||||
* is indistinguishable from one that does not exist), so neither can this.
|
||||
*/
|
||||
failed: false,
|
||||
tocSelected: null,
|
||||
/** Whether the contents panel has been slid open. Only consulted below 750px. */
|
||||
tocPanelOpen: false
|
||||
})
|
||||
|
||||
const pageContents = ref(null)
|
||||
|
||||
// META
|
||||
|
||||
/*
|
||||
A getter, for the same reason as the page view's: the title is not known when this runs -- the view
|
||||
mounts for the version ID and the snapshot arrives a moment later.
|
||||
|
||||
Below `state` and not above it, which is not a matter of taste: `useMeta` runs the getter straight
|
||||
away, so declared first it read `state` from inside its temporal dead zone and the whole view failed
|
||||
to mount with "Cannot access 'state' before initialization".
|
||||
*/
|
||||
useMeta(() => ({
|
||||
title: state.version?.title ?? ''
|
||||
}))
|
||||
|
||||
// COMPUTED
|
||||
|
||||
/** Below 750px, where the contents stop being a column beside the article and become a panel over it. */
|
||||
const isAtLeast750 = useMinWidth(750)
|
||||
const tocIsPanel = computed(() => !isAtLeast750.value)
|
||||
|
||||
const tocPanelIsOpen = computed(() => tocIsPanel.value && showToc.value && state.tocPanelOpen)
|
||||
|
||||
const showTocPanelBtn = computed(() => tocIsPanel.value && showToc.value && !state.tocPanelOpen)
|
||||
|
||||
/**
|
||||
* The page's own fields as the version recorded them.
|
||||
*
|
||||
* Everything but the path, the title and the date lives in `meta` — those four have columns of their
|
||||
* own on `pageHistory`. Read off the VERSION rather than off the live page throughout: the point of
|
||||
* this screen is what the page said then, and its icon and description are part of that.
|
||||
*/
|
||||
const versionIcon = computed(() => state.version?.meta?.icon || 'la:file-alt')
|
||||
const versionDescription = computed(() => state.version?.meta?.description ?? '')
|
||||
const versionToc = computed(() => state.version?.meta?.toc ?? [])
|
||||
const tocDepth = computed(() => state.version?.meta?.config?.tocDepth ?? { min: 1, max: 2 })
|
||||
|
||||
/**
|
||||
* Where the live page is, for the View Live button.
|
||||
*
|
||||
* Built from `pagePath` / `pageLocale` — the page as it stands — and NOT from `version.path`, which is
|
||||
* where the page was when this snapshot was written: a page that has since moved would send the reader
|
||||
* to a path that no longer holds anything.
|
||||
*
|
||||
* Prefixed the way every other in-app link to a page is, so a site that brackets its URLs by locale
|
||||
* lands on the right one rather than being redirected to the primary locale's copy.
|
||||
*/
|
||||
const livePath = computed(() => {
|
||||
const path = state.version?.pagePath
|
||||
if (!path) {
|
||||
return ''
|
||||
}
|
||||
return `${siteStore.localeUrlPrefix(state.version.pageLocale)}/${path}`
|
||||
})
|
||||
|
||||
/*
|
||||
Whether there is a contents section to draw, rather than whether the page asked for one: a version
|
||||
with no headings, or whose depth settings leave nothing to list, would otherwise show "Contents" over
|
||||
an empty space. Asked of the same helper the list itself draws from, so the two cannot disagree.
|
||||
|
||||
`showToc` on the version is the page's own setting as it stood, and the site's `tocPosition` is the
|
||||
live one — there being no historical copy of a site's theme to consult.
|
||||
*/
|
||||
const showToc = computed(() => {
|
||||
if (!state.version || siteStore.theme.tocPosition === 'off') {
|
||||
return false
|
||||
}
|
||||
if (state.version.meta?.config?.showToc === false) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
flattenToc(versionToc.value, {
|
||||
minDepth: tocDepth.value.min,
|
||||
maxDepth: tocDepth.value.max
|
||||
}).length > 0
|
||||
)
|
||||
})
|
||||
|
||||
/**
|
||||
* When the snapshot was taken — what stands where the page view says "Last modified on".
|
||||
*
|
||||
* The same fields that view formats, so the two bars read alike.
|
||||
*/
|
||||
const snapshotFrom = computed(() => {
|
||||
return state.version?.versionDate
|
||||
? Temporal.Instant.from(state.version.versionDate).toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
})
|
||||
: 'N/A'
|
||||
})
|
||||
|
||||
// WATCHERS
|
||||
|
||||
/*
|
||||
The copy buttons on code blocks are part of the content, so they are re-added whenever the content
|
||||
is. Keyed on the render rather than on the route, since it arrives after this has already mounted.
|
||||
*/
|
||||
watch(
|
||||
() => state.render,
|
||||
() => {
|
||||
nextTick(() => enhanceRenderedContent(pageContents.value))
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
/*
|
||||
The version in the URL is what this view is OF, so it is what drives the load — immediately, since
|
||||
arriving here IS the request. The router reuses this component when only the parameter changes,
|
||||
which is what walking from one version to another would do.
|
||||
*/
|
||||
watch(() => route.params.versionId, loadVersion, { immediate: true })
|
||||
|
||||
// METHODS
|
||||
|
||||
async function loadVersion(versionId) {
|
||||
if (!versionId) {
|
||||
state.failed = true
|
||||
return
|
||||
}
|
||||
loading.show()
|
||||
try {
|
||||
const version = await API_CLIENT.get(`sites/${siteStore.id}/versions/${versionId}`).json()
|
||||
if (!version?.id) {
|
||||
throw new Error('ERR_VERSION_NOT_FOUND')
|
||||
}
|
||||
state.render = await renderFor(version, version.path)
|
||||
state.version = version
|
||||
state.failed = false
|
||||
state.tocPanelOpen = false
|
||||
} catch (err) {
|
||||
state.version = null
|
||||
state.render = ''
|
||||
state.failed = true
|
||||
notify({
|
||||
type: 'negative',
|
||||
message: apiErrorMessage(err, t('history.versionLoadFailed'))
|
||||
})
|
||||
} finally {
|
||||
loading.hide()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The HTML for a version's source.
|
||||
*
|
||||
* @param version The version to render.
|
||||
* @param pagePath The page the HTML is FOR, which is what a relative image in it resolves against.
|
||||
* Reading a snapshot, that is the path the version was written at -- it is the page as it was, so
|
||||
* its links should resolve as they did. Restoring or branching, it is where the content is GOING,
|
||||
* because that is the page the reader will follow those links from.
|
||||
*/
|
||||
async function renderFor(version, pagePath) {
|
||||
// -> The renderer is configured per site (line breaks, typographer, …), and that configuration
|
||||
// arrives with the editor configs rather than on its own
|
||||
if (!editorStore.configIsLoaded) {
|
||||
await editorStore.fetchConfigs()
|
||||
}
|
||||
return renderVersionSource(version, {
|
||||
markdownConfig: editorStore.editors.markdown,
|
||||
pagePath
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Save this version's source, the same as the history overlay's Download.
|
||||
*
|
||||
* No fetch first, unlike there: the overlay downloads from a timeline that carries no source, while
|
||||
* this screen already has the whole version in hand -- it is what is being read.
|
||||
*/
|
||||
async function downloadVersion() {
|
||||
if (!state.version) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await saveVersionSource(state.version)
|
||||
} catch (err) {
|
||||
notify({ type: 'negative', message: t('history.downloadFailed'), caption: err.message })
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Put this version's source back on the page, as the history overlay's Restore does.
|
||||
*
|
||||
* The source only: the page keeps the title, tags and settings it has now. Restoring those too would
|
||||
* quietly undo everything done since, and a reader asking for an old version back is asking for the
|
||||
* text. Nothing is lost either way -- this is an ordinary edit, so it becomes a version of its own
|
||||
* with the current state recorded in it.
|
||||
*/
|
||||
function restoreVersion() {
|
||||
const version = state.version
|
||||
if (!version) {
|
||||
return
|
||||
}
|
||||
confirm({
|
||||
title: t('history.restore'),
|
||||
message: [
|
||||
t('history.restoreConfirm', { date: snapshotFrom.value }),
|
||||
t('history.restoreConfirmHint')
|
||||
],
|
||||
caption: t('history.versionId', { id: version.id }),
|
||||
cancel: true,
|
||||
color: 'negative',
|
||||
okLabel: t('history.restore')
|
||||
}).onOk(async () => {
|
||||
loading.show()
|
||||
try {
|
||||
const resp = await API_CLIENT.patch(`sites/${siteStore.id}/pages/${version.pageId}`, {
|
||||
json: {
|
||||
content: version.content ?? '',
|
||||
// -> For where the content is going, which is the page's path NOW and not the version's
|
||||
render: await renderFor(version, version.pagePath),
|
||||
reasonForChange: t('history.restoreReason', { date: snapshotFrom.value })
|
||||
}
|
||||
}).json()
|
||||
if (!resp?.page?.id) {
|
||||
throw new Error(resp?.message || 'An unexpected error occured.')
|
||||
}
|
||||
notify({ type: 'positive', message: t('history.restoreSuccess') })
|
||||
/*
|
||||
On to the live page, which is where the restore actually happened. The overlay reloads the
|
||||
page behind itself for the same reason; here there is nothing behind, and a snapshot does not
|
||||
change -- staying put would leave the reader on a screen that looks exactly as it did and
|
||||
gives no sign anything had happened.
|
||||
*/
|
||||
router.push(livePath.value)
|
||||
} catch (err) {
|
||||
notify({
|
||||
type: 'negative',
|
||||
message: t('history.restoreFailed'),
|
||||
caption: apiErrorMessage(err)
|
||||
})
|
||||
} finally {
|
||||
loading.hide()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a new page from this version, leaving the live one alone.
|
||||
*
|
||||
* What to do with an old version that is worth keeping but not worth reverting to. The same path
|
||||
* picker as duplicating a page, because that is what this is -- a duplicate of a page as it was.
|
||||
*/
|
||||
function branchFrom() {
|
||||
const version = state.version
|
||||
if (!version) {
|
||||
return
|
||||
}
|
||||
dialog({
|
||||
component: defineAsyncComponent(() => import('@/components/TreeBrowserDialog.vue')),
|
||||
componentProps: {
|
||||
mode: 'duplicatePage',
|
||||
folderPath: '',
|
||||
itemId: version.pageId,
|
||||
itemTitle: version.title,
|
||||
itemFileName: version.pagePath,
|
||||
locale: version.pageLocale
|
||||
}
|
||||
}).onOk(async (target) => {
|
||||
loading.show()
|
||||
try {
|
||||
const resp = await API_CLIENT.post(`sites/${siteStore.id}/pages`, {
|
||||
json: {
|
||||
path: target.path,
|
||||
title: target.title,
|
||||
locale: version.pageLocale,
|
||||
editor: version.meta?.editor || 'markdown',
|
||||
content: version.content ?? '',
|
||||
// -> Rendered for where it is going, not for where the version came from
|
||||
render: await renderFor(version, target.path),
|
||||
description: version.meta?.description ?? '',
|
||||
icon: version.meta?.icon ?? '',
|
||||
tags: version.meta?.tags ?? [],
|
||||
// -> A version that was scheduled carries dates this new page has not got, and the API
|
||||
// rightly refuses that combination
|
||||
publishState: version.meta?.publishState === 'published' ? 'published' : 'draft',
|
||||
reasonForChange: t('history.branchReason', { date: snapshotFrom.value })
|
||||
}
|
||||
}).json()
|
||||
const page = resp?.page
|
||||
if (!page?.id) {
|
||||
throw new Error(resp?.message || 'An unexpected error occured.')
|
||||
}
|
||||
notify({ type: 'positive', message: t('history.branchSuccess') })
|
||||
// -> This page went up with the version's tags, so a tag no page carried any more is back; the
|
||||
// tag fields have to hear about it, the same as after a save
|
||||
siteStore.staleTags()
|
||||
router.push(`/${page.path}`)
|
||||
} catch (err) {
|
||||
notify({
|
||||
type: 'negative',
|
||||
message: t('history.branchFailed'),
|
||||
caption: apiErrorMessage(err)
|
||||
})
|
||||
} finally {
|
||||
loading.hide()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onContentClick(ev) {
|
||||
const intent = resolveContentClick(ev, window.location)
|
||||
if (!intent) {
|
||||
return
|
||||
}
|
||||
// -> A heading in the snapshot: travelled to rather than jumped at, as everywhere else in the app.
|
||||
// The URL follows so the section can be linked to, and Back returns to the one before.
|
||||
if (intent.kind === 'hash') {
|
||||
if (scrollToAnchor(intent.hash, { smooth: true })) {
|
||||
ev.preventDefault()
|
||||
router.push({ path: route.path, query: route.query, hash: intent.hash })
|
||||
}
|
||||
return
|
||||
}
|
||||
/*
|
||||
Anything else goes to the LIVE wiki, and deliberately so: a link in a snapshot was written to point
|
||||
at a page, not at that page as it stood on the same day, and there is no version of the target to
|
||||
send the reader to even if it had been.
|
||||
*/
|
||||
ev.preventDefault()
|
||||
router.push(intent.target)
|
||||
}
|
||||
|
||||
/*
|
||||
Following a link out of the panel puts it away, since what the reader asked for is behind it. A
|
||||
`<button>` in here is not that, which is why the test is `closest('a')` rather than any click.
|
||||
*/
|
||||
function onSidebarClick(ev) {
|
||||
if (tocPanelIsOpen.value && ev.target?.closest?.('a')) {
|
||||
closeTocPanel()
|
||||
}
|
||||
}
|
||||
|
||||
function openTocPanel() {
|
||||
state.tocPanelOpen = true
|
||||
}
|
||||
|
||||
function closeTocPanel() {
|
||||
state.tocPanelOpen = false
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue