mirror of https://github.com/requarks/wiki
NGPixel
1 month ago
parent
81fc8db4f7
commit
8e6a35de98
@ -0,0 +1,8 @@
|
|||||||
|
CREATE TABLE "siteAssets" (
|
||||||
|
"siteId" uuid,
|
||||||
|
"kind" varchar(255),
|
||||||
|
"data" bytea NOT NULL,
|
||||||
|
CONSTRAINT "siteAssets_pkey" PRIMARY KEY("siteId","kind")
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
ALTER TABLE "siteAssets" ADD CONSTRAINT "siteAssets_siteId_sites_id_fkey" FOREIGN KEY ("siteId") REFERENCES "sites"("id");
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,281 @@
|
|||||||
|
<template>
|
||||||
|
<div class="editor-redirect">
|
||||||
|
<w-scroll-area style="height: 100%">
|
||||||
|
<div class="editor-redirect-form">
|
||||||
|
<w-card class="pb-2">
|
||||||
|
<w-card-header>{{ t('editor.redirect.title') }}</w-card-header>
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<!-- Title -->
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<w-item>
|
||||||
|
<blueprint-icon icon="new-document" />
|
||||||
|
<w-item-section>
|
||||||
|
<w-item-label>{{ t('editor.redirect.pageTitle') }}</w-item-label>
|
||||||
|
<w-item-label caption>{{ t('editor.redirect.pageTitleHint') }}</w-item-label>
|
||||||
|
</w-item-section>
|
||||||
|
<w-item-section>
|
||||||
|
<!--
|
||||||
|
The same title the header edits in place, so the two are one field with two places to
|
||||||
|
type it: both write to the store, and the header's watcher follows what is typed here.
|
||||||
|
-->
|
||||||
|
<w-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="pageStore.title"
|
||||||
|
:aria-label="t(`editor.redirect.pageTitle`)"
|
||||||
|
@update:model-value="setTitle" />
|
||||||
|
</w-item-section>
|
||||||
|
</w-item>
|
||||||
|
<w-separator class="my-2" inset />
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<!-- Target -->
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<w-item>
|
||||||
|
<blueprint-icon icon="advance" />
|
||||||
|
<w-item-section>
|
||||||
|
<w-item-label>{{ t('editor.redirect.target') }}</w-item-label>
|
||||||
|
<w-item-label caption>{{ t('editor.redirect.targetHint') }}</w-item-label>
|
||||||
|
</w-item-section>
|
||||||
|
<w-item-section side>
|
||||||
|
<w-btn
|
||||||
|
class="acrylic-btn"
|
||||||
|
flat
|
||||||
|
icon="la:folder-open"
|
||||||
|
color="primary"
|
||||||
|
padding="xs md"
|
||||||
|
no-caps
|
||||||
|
:label="t(`editor.redirect.choose`)"
|
||||||
|
@click="chooseTarget" />
|
||||||
|
</w-item-section>
|
||||||
|
</w-item>
|
||||||
|
<!--
|
||||||
|
What was chosen, indented to the row above rather than made a row of its own: it is that
|
||||||
|
row's answer, and a `w-item` of its own would need an empty avatar section to line up
|
||||||
|
with. The icon says which kind it is, which is the only place that distinction shows now
|
||||||
|
that one dialog answers both halves of it.
|
||||||
|
-->
|
||||||
|
<div class="editor-redirect-field">
|
||||||
|
<div class="text-body2 font-robotomono editor-redirect-target" v-if="state.target">
|
||||||
|
<w-icon
|
||||||
|
class="mr-2"
|
||||||
|
:name="state.kind === `url` ? `la:globe` : `la:file-alt`"
|
||||||
|
size="sm" />
|
||||||
|
{{ state.target }}
|
||||||
|
</div>
|
||||||
|
<div class="text-caption opacity-60" v-else>
|
||||||
|
{{ t('editor.redirect.noTargetSelected') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<w-separator class="my-2" inset />
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<!-- Interstitial -->
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<w-item>
|
||||||
|
<blueprint-icon icon="timer" />
|
||||||
|
<w-item-section>
|
||||||
|
<w-item-label>{{ t('editor.redirect.showInterstitial') }}</w-item-label>
|
||||||
|
<w-item-label caption>{{ t('editor.redirect.showInterstitialHint') }}</w-item-label>
|
||||||
|
</w-item-section>
|
||||||
|
<w-item-section side>
|
||||||
|
<w-toggle
|
||||||
|
:model-value="state.showInterstitial"
|
||||||
|
:aria-label="t(`editor.redirect.showInterstitial`)"
|
||||||
|
@update:model-value="setShowInterstitial" />
|
||||||
|
</w-item-section>
|
||||||
|
</w-item>
|
||||||
|
</w-card>
|
||||||
|
<!--
|
||||||
|
What the page will do, spelled out, because everything above is settings and none of it says
|
||||||
|
what a reader arriving here actually gets. Also where a half-filled form is reported: the
|
||||||
|
save is refused by the server either way, and this says so before it is attempted.
|
||||||
|
-->
|
||||||
|
<div
|
||||||
|
class="editor-redirect-summary"
|
||||||
|
:class="isFollowable(state) ? `is-ready` : `is-incomplete`">
|
||||||
|
<w-icon :name="isFollowable(state) ? `la:info-circle` : `la:exclamation-triangle`" />
|
||||||
|
<div class="pl-3">
|
||||||
|
<template v-if="!isFollowable(state)">
|
||||||
|
{{ t('editor.redirect.summaryIncomplete') }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="state.showInterstitial">
|
||||||
|
{{ t('editor.redirect.summaryInterstitial', { target: state.target }) }}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ t('editor.redirect.summaryDirect', { target: state.target }) }}
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</w-scroll-area>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineAsyncComponent, reactive, watch } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { dialog } from '@/composables/dialog'
|
||||||
|
|
||||||
|
import { isFollowable, parseRedirect, serializeRedirect } from '@/helpers/pageRedirect'
|
||||||
|
|
||||||
|
import { useEditorStore } from '@/stores/editor'
|
||||||
|
import { usePageStore } from '@/stores/page'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The `redirect` editor: a page that sends its reader somewhere else.
|
||||||
|
*
|
||||||
|
* There is no content to write, so this is a form rather than an editor — a title, where the page
|
||||||
|
* points, and whether the reader is told about it on the way. All three are the page's own fields:
|
||||||
|
* the title is the page's, and the other two are its content, as JSON. See `helpers/pageRedirect.js`.
|
||||||
|
*
|
||||||
|
* What the page then DOES with that is `PageRedirect.vue`, which is what the page view draws in place
|
||||||
|
* of an article.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const editorStore = useEditorStore()
|
||||||
|
const pageStore = usePageStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The redirection being edited, which is also exactly what gets saved — the form has no field that is
|
||||||
|
* not one of these three. Seeded from the stored content and written back by the watcher below.
|
||||||
|
*/
|
||||||
|
const state = reactive(parseRedirect(pageStore.content))
|
||||||
|
|
||||||
|
// WATCHERS
|
||||||
|
|
||||||
|
/*
|
||||||
|
The form IS the content, so the store follows it on every keystroke — there is nothing here that a
|
||||||
|
save would collect afterwards.
|
||||||
|
|
||||||
|
Immediate, and deliberately not a change: this also writes the canonical spelling of what was
|
||||||
|
already stored, and seeds a page being created with an empty redirection. Neither is an edit, so
|
||||||
|
neither may set the unsaved-changes flag — `touch` is called by the handlers instead, where a
|
||||||
|
person actually did something.
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
state,
|
||||||
|
(value) => {
|
||||||
|
pageStore.content = serializeRedirect(value)
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
/** Say that the page has unsaved changes, which is what turns the header's Save button on. */
|
||||||
|
function touch() {
|
||||||
|
editorStore.lastChangeTimestamp = Temporal.Now.instant()
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTitle(title) {
|
||||||
|
pageStore.title = title
|
||||||
|
touch()
|
||||||
|
}
|
||||||
|
|
||||||
|
function setShowInterstitial(showInterstitial) {
|
||||||
|
state.showInterstitial = showInterstitial
|
||||||
|
touch()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Picks where this page sends its reader: a page of this wiki, or any URL.
|
||||||
|
*
|
||||||
|
* One dialog for both, because they are one question — the link picker asks it the way the rest of the
|
||||||
|
* app already asks it, and answers with which of its two tabs the answer came from. That is what
|
||||||
|
* `kind` is: the choice somebody made, rather than a guess made afterwards from the look of the
|
||||||
|
* string. It opens on the current target, so coming back starts from what is already set.
|
||||||
|
*
|
||||||
|
* Its "open in a new tab" offer is turned off. A redirection is not a link somebody clicks — the
|
||||||
|
* reader is taken there — so there is no tab to choose, and nowhere here to store the answer.
|
||||||
|
*/
|
||||||
|
function chooseTarget() {
|
||||||
|
dialog({
|
||||||
|
component: defineAsyncComponent(() => import('./LinkPickerDialog.vue')),
|
||||||
|
componentProps: {
|
||||||
|
title: t('editor.redirect.pickerTitle'),
|
||||||
|
okLabel: t('common.actions.select'),
|
||||||
|
initialHref: state.target,
|
||||||
|
newTabOption: false
|
||||||
|
}
|
||||||
|
}).onOk(({ href, kind }) => {
|
||||||
|
state.kind = kind === 'url' ? 'url' : 'page'
|
||||||
|
state.target = href
|
||||||
|
touch()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.editor-redirect {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
@at-root .body--light & {
|
||||||
|
background-color: $grey-3;
|
||||||
|
}
|
||||||
|
@at-root .body--dark & {
|
||||||
|
background-color: $dark-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -> A form, not a document: it stops widening well before the column does */
|
||||||
|
&-form {
|
||||||
|
max-width: 780px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px 16px 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Lined up with the main section of the row above it: `w-item` pads 16px and its avatar section is
|
||||||
|
56px wide, so the field starts where that row's label does.
|
||||||
|
*/
|
||||||
|
&-field {
|
||||||
|
padding: 0 16px 8px 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-target {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The one line that says what a reader arriving at this page gets. Blue while the form is answerable
|
||||||
|
and amber while it is not -- the second is a warning about a save that will be refused, not an
|
||||||
|
error that has happened yet.
|
||||||
|
*/
|
||||||
|
&-summary {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
&.is-ready {
|
||||||
|
background-color: rgba(25, 118, 210, 0.1);
|
||||||
|
color: $blue-9;
|
||||||
|
|
||||||
|
@at-root .body--dark &.is-ready {
|
||||||
|
color: $blue-3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-incomplete {
|
||||||
|
background-color: rgba(255, 152, 0, 0.12);
|
||||||
|
color: $orange-9;
|
||||||
|
|
||||||
|
@at-root .body--dark &.is-incomplete {
|
||||||
|
color: $orange-3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,263 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-placeholder">
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<!-- Nowhere to go -->
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<template v-if="problem">
|
||||||
|
<w-icon class="page-placeholder-icon" name="la:exclamation-triangle" />
|
||||||
|
<div class="text-h6">{{ t(`common.redirect.${problem}`) }}</div>
|
||||||
|
<div class="text-body2 mt-1 opacity-60" v-if="canEditPage">
|
||||||
|
{{ t('common.redirect.brokenHint') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-caption font-robotomono mt-3 opacity-50" v-if="redirect.target">
|
||||||
|
{{ redirect.target }}
|
||||||
|
</div>
|
||||||
|
<w-btn
|
||||||
|
class="mt-6"
|
||||||
|
v-if="canEditPage"
|
||||||
|
unelevated
|
||||||
|
icon="la:edit"
|
||||||
|
color="primary"
|
||||||
|
padding="xs lg"
|
||||||
|
:label="t(`common.actions.edit`)"
|
||||||
|
@click="editPage" />
|
||||||
|
</template>
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<!-- Held, so the page can be worked on -->
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<template v-else-if="!following">
|
||||||
|
<w-icon class="page-placeholder-icon" name="la:directions" />
|
||||||
|
<div class="text-h6">{{ t('common.redirect.held') }}</div>
|
||||||
|
<div class="text-caption font-robotomono mt-3 opacity-50">{{ redirect.target }}</div>
|
||||||
|
<w-btn
|
||||||
|
class="mt-6"
|
||||||
|
unelevated
|
||||||
|
icon="la:arrow-right"
|
||||||
|
color="primary"
|
||||||
|
padding="xs lg"
|
||||||
|
:label="t(`common.redirect.follow`)"
|
||||||
|
@click="follow" />
|
||||||
|
</template>
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<!-- On the way -->
|
||||||
|
<!-- ----------------------- -->
|
||||||
|
<template v-else>
|
||||||
|
<w-icon class="page-placeholder-icon" name="la:directions" />
|
||||||
|
<!--
|
||||||
|
`aria-live`, because nothing here is clicked: a reader on a screen reader is told where they
|
||||||
|
are being taken at the moment the page announces it, not when they get around to reading it.
|
||||||
|
-->
|
||||||
|
<div class="text-h6" role="status" aria-live="polite">
|
||||||
|
{{ t('common.redirect.redirectingTo', { target: redirect.target }) }}
|
||||||
|
</div>
|
||||||
|
<!-- -> The way out of a wait, and the way past it: a reader who does not want to sit through
|
||||||
|
the notice can go now, and one who lands here with scripting half-loaded has a link -->
|
||||||
|
<w-btn
|
||||||
|
class="mt-6"
|
||||||
|
unelevated
|
||||||
|
icon="la:arrow-right"
|
||||||
|
color="primary"
|
||||||
|
padding="xs lg"
|
||||||
|
:label="t(`common.redirect.goNow`)"
|
||||||
|
@click="go" />
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { loading } from '@/composables/loading'
|
||||||
|
|
||||||
|
import { isFollowable, parseRedirect, REDIRECT_INTERSTITIAL_MS } from '@/helpers/pageRedirect'
|
||||||
|
|
||||||
|
import { usePageStore } from '@/stores/page'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* What the page view draws in place of an article for a page authored with the `redirect` editor.
|
||||||
|
*
|
||||||
|
* A redirection has no body: it sends its reader somewhere else, either straight away or after a
|
||||||
|
* short notice saying where. See `helpers/pageRedirect.js` for what is stored, and
|
||||||
|
* `EditorRedirect.vue` for where it is filled in.
|
||||||
|
*
|
||||||
|
* **`?redirect=no` holds it**, which is what makes a redirection maintainable: without it, a page
|
||||||
|
* whose whole purpose is to bounce the reader elsewhere cannot be opened by the person who has to
|
||||||
|
* fix it. The link a redirection's own screens hand out carries it, so following a chain of them
|
||||||
|
* backwards keeps working.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* How many redirections may be followed one after another before the chain is treated as a loop.
|
||||||
|
*
|
||||||
|
* `A → B → A` is a browser that never stops navigating, and no single page can see it: each one is
|
||||||
|
* pointing somewhere perfectly reasonable. Only the count across them says otherwise. Generous enough
|
||||||
|
* that a chain nobody meant to build still works, and small enough to stop before anything hangs.
|
||||||
|
*/
|
||||||
|
const MAX_HOPS = 5
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Redirections followed in a row. Deliberately outside the component, because that is the whole point:
|
||||||
|
* the page view keeps this one component mounted from a redirection to the next, and the count is
|
||||||
|
* about the chain rather than about any page in it. Reset the moment the chain ends — a page that is
|
||||||
|
* read rather than followed unmounts this, and one held by `?redirect=no` is not being followed.
|
||||||
|
*/
|
||||||
|
let hops = 0
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const pageStore = usePageStore()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
// ROUTER
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
/** The timer behind the interstitial. Cleared on the way out, so a page left early does not fire. */
|
||||||
|
let timer = null
|
||||||
|
|
||||||
|
/** Whether this page ends a chain that has gone on too long; see `MAX_HOPS`. */
|
||||||
|
const chainStopped = ref(false)
|
||||||
|
|
||||||
|
// COMPUTED
|
||||||
|
|
||||||
|
const redirect = computed(() => parseRedirect(pageStore.content))
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Why this redirection cannot be followed, if it cannot: nothing was filled in, it points at the page
|
||||||
|
* it is on, or it is the last hop of a chain that has come back around. All three would leave a reader
|
||||||
|
* bouncing rather than arriving.
|
||||||
|
*
|
||||||
|
* Doubles as the name of the string that says so.
|
||||||
|
*/
|
||||||
|
const problem = computed(() => {
|
||||||
|
if (!isFollowable(redirect.value)) {
|
||||||
|
return 'broken'
|
||||||
|
}
|
||||||
|
if (chainStopped.value) {
|
||||||
|
return 'chain'
|
||||||
|
}
|
||||||
|
return redirect.value.kind === 'page' && isSelf(redirect.value.target) ? 'loop' : null
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the reader is on their way, rather than being held.
|
||||||
|
*
|
||||||
|
* Two things hold a redirection. `?redirect=no` is the one a person asks for. The other is an editor
|
||||||
|
* route: `/_edit/<path>` and `/_create/<editor>` load the page BEFORE they open the editor on it, and
|
||||||
|
* in the gap between the two the page view is drawn for a page that is already known to be a
|
||||||
|
* redirection — which would take the author to the target instead of showing them the form for it.
|
||||||
|
* Nobody on those routes is reading the page, so nothing there is ever followed.
|
||||||
|
*/
|
||||||
|
const following = computed(
|
||||||
|
() =>
|
||||||
|
route.query.redirect !== 'no' &&
|
||||||
|
!route.path.startsWith('/_edit') &&
|
||||||
|
!route.path.startsWith('/_create')
|
||||||
|
)
|
||||||
|
|
||||||
|
/** Whoever can save the page is who the broken-redirection screen offers a way to fix it to. */
|
||||||
|
const canEditPage = computed(() =>
|
||||||
|
['write:pages', 'manage:pages'].some((permission) =>
|
||||||
|
userStore.pagePermissions.includes(permission)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
// WATCHERS
|
||||||
|
|
||||||
|
/*
|
||||||
|
Keyed on the page rather than run on mount: this component stays mounted from one redirection to the
|
||||||
|
next -- the page view swaps the store's contents under it -- so a mount hook would fire for the
|
||||||
|
first one only.
|
||||||
|
|
||||||
|
`immediate`, because arriving at a redirection directly is the ordinary case.
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => [pageStore.id, redirect.value.target, following.value],
|
||||||
|
() => {
|
||||||
|
clear()
|
||||||
|
if (!following.value) {
|
||||||
|
// -> Held, so nothing is being followed and whatever came before it was not a chain
|
||||||
|
hops = 0
|
||||||
|
chainStopped.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (problem.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Counted here rather than in `go`, so that the interstitial on the page that breaks the chain is
|
||||||
|
never shown: it would say the reader is on their way somewhere they are about to be told they
|
||||||
|
cannot go. A URL target leaves the app entirely, which ends any chain by itself.
|
||||||
|
*/
|
||||||
|
if (redirect.value.kind === 'page' && ++hops > MAX_HOPS) {
|
||||||
|
chainStopped.value = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!redirect.value.showInterstitial) {
|
||||||
|
go()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
timer = setTimeout(go, REDIRECT_INTERSTITIAL_MS)
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
clear()
|
||||||
|
// -> Whatever comes next is read rather than followed, so the chain ends here
|
||||||
|
hops = 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
clearTimeout(timer)
|
||||||
|
timer = null
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Whether a page target is the page holding it, however the two are spelled. */
|
||||||
|
function isSelf(target) {
|
||||||
|
const stored = `/${pageStore.path}`.replace(/\/+$/, '')
|
||||||
|
const to = target.replace(/\/+$/, '').toLowerCase()
|
||||||
|
return to === stored.toLowerCase() || (stored === '/home' && to === '')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Take the reader on.
|
||||||
|
*
|
||||||
|
* `replace` rather than a push, both ways: a redirection is not somewhere anyone meant to be, and
|
||||||
|
* leaving it in the history means the back button lands on it and bounces straight forward again.
|
||||||
|
*/
|
||||||
|
function go() {
|
||||||
|
clear()
|
||||||
|
if (problem.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (redirect.value.kind === 'url') {
|
||||||
|
// -> Leaving the app entirely, so the loading bar is what stands in for the wait
|
||||||
|
loading.show()
|
||||||
|
window.location.replace(redirect.value.target)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
router.replace(redirect.value.target)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Follow it deliberately, from the screen `?redirect=no` holds the reader on. */
|
||||||
|
function follow() {
|
||||||
|
router.replace({ path: route.path, query: { ...route.query, redirect: undefined } })
|
||||||
|
}
|
||||||
|
|
||||||
|
function editPage() {
|
||||||
|
router.push(`/_edit/${pageStore.path}`)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
* The one spelling a page path has.
|
||||||
|
*
|
||||||
|
* Mirrors `normalizePagePath` in the backend's `helpers/common.ts`, so that a path typed into a
|
||||||
|
* dialog is corrected in front of the person typing it rather than silently changed by the server
|
||||||
|
* after they hit save. Whether what comes out is *allowed* is still each field's own rule — this only
|
||||||
|
* settles casing and spaces.
|
||||||
|
*/
|
||||||
|
export function normalizePagePath(input) {
|
||||||
|
return (input ?? '')
|
||||||
|
.trim()
|
||||||
|
.replace(/^\/+/, '')
|
||||||
|
.replace(/\/+$/, '')
|
||||||
|
.replaceAll(/\s+/g, '-')
|
||||||
|
.toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Drop a site's page extension from the end of a URL path.
|
||||||
|
*
|
||||||
|
* The server redirects these too, but a link inside page content is followed by the router without
|
||||||
|
* ever asking it — so `/foo/bar.md` written into a page has to resolve to `/foo/bar` here as well.
|
||||||
|
* Mirrors `stripPageExtension` in the backend's `helpers/common.ts`.
|
||||||
|
*
|
||||||
|
* @param extensions Lowercase and without the dot, as `siteStore.pageExtensions` holds them
|
||||||
|
* @returns The path without the extension, or null if it does not end in one of them
|
||||||
|
*/
|
||||||
|
export function stripPageExtension(urlPath, extensions) {
|
||||||
|
if (!extensions?.length) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
const dot = urlPath.lastIndexOf('.')
|
||||||
|
if (dot < 1 || urlPath[dot - 1] === '/' || urlPath.lastIndexOf('/') > dot) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if (!extensions.includes(urlPath.slice(dot + 1).toLowerCase())) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
return urlPath.slice(0, dot)
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
/**
|
||||||
|
* What a redirection page holds instead of a body.
|
||||||
|
*
|
||||||
|
* A redirection is an ordinary page authored with the `redirect` editor: it has a path, a title and a
|
||||||
|
* place in the tree, and nothing to read. Where it points is its content, as JSON — see
|
||||||
|
* `normalizeRedirectContent` in the backend's `models/pages.ts`, which is the authority on the shape
|
||||||
|
* and refuses a save that does not match it. This file is the same reading, in front of the author:
|
||||||
|
* the editor round-trips through it, and the page view follows what it returns.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* How long the interstitial is shown before the reader is taken on, in milliseconds.
|
||||||
|
*
|
||||||
|
* Long enough to read one line and see where they are going, short enough that nobody waits on it.
|
||||||
|
*/
|
||||||
|
export const REDIRECT_INTERSTITIAL_MS = 2500
|
||||||
|
|
||||||
|
/** An empty redirection, which is what a page being created starts as. */
|
||||||
|
export function emptyRedirect() {
|
||||||
|
return { kind: 'page', target: '', showInterstitial: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read a stored redirection. Never throws: content that is missing or unparseable comes back as an
|
||||||
|
* empty redirection, which the editor opens on and the page view reports as having nowhere to go.
|
||||||
|
*/
|
||||||
|
export function parseRedirect(content) {
|
||||||
|
let parsed = null
|
||||||
|
try {
|
||||||
|
parsed = JSON.parse(content ?? '')
|
||||||
|
} catch {
|
||||||
|
// -> An empty redirection is the answer; see above
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
kind: parsed?.kind === 'url' ? 'url' : 'page',
|
||||||
|
target: typeof parsed?.target === 'string' ? parsed.target.trim() : '',
|
||||||
|
showInterstitial: parsed?.showInterstitial === true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The canonical spelling of a redirection, which is what gets saved. */
|
||||||
|
export function serializeRedirect({ kind, target, showInterstitial } = {}) {
|
||||||
|
return JSON.stringify({
|
||||||
|
kind: kind === 'url' ? 'url' : 'page',
|
||||||
|
target: (target ?? '').trim(),
|
||||||
|
showInterstitial: showInterstitial === true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether a redirection can actually be followed.
|
||||||
|
*
|
||||||
|
* The same two rules the server enforces: a page target is a rooted path within this wiki, and a URL
|
||||||
|
* target is a complete `http(s)` address — anything else is either not a destination or, for
|
||||||
|
* `javascript:`, a link nobody chose to follow.
|
||||||
|
*/
|
||||||
|
export function isFollowable({ kind, target } = {}) {
|
||||||
|
const value = (target ?? '').trim()
|
||||||
|
if (value.length < 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return kind === 'url'
|
||||||
|
? /^https?:\/\/\S/i.test(value)
|
||||||
|
: value.startsWith('/') && !value.startsWith('//')
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
/**
|
||||||
|
* The images a site has of its own — its logo, its favicon and the backdrop of its login page.
|
||||||
|
*
|
||||||
|
* Uploading one is the same exchange whichever it is, and the accepted formats have to agree with
|
||||||
|
* what the endpoint checks, so both live here rather than in each admin view that offers an upload.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** What the endpoint accepts, mirroring the formats it recognizes from the bytes themselves. */
|
||||||
|
export const SITE_IMAGE_TYPES = [
|
||||||
|
'image/svg+xml',
|
||||||
|
'image/png',
|
||||||
|
'image/jpeg',
|
||||||
|
'image/webp',
|
||||||
|
'image/gif'
|
||||||
|
]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ask for an image file.
|
||||||
|
*
|
||||||
|
* @returns The chosen file, or null if the picker was dismissed
|
||||||
|
*/
|
||||||
|
export function pickSiteImage() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const input = document.createElement('input')
|
||||||
|
input.type = 'file'
|
||||||
|
input.accept = SITE_IMAGE_TYPES.join(',')
|
||||||
|
input.onchange = (ev) => resolve(ev.target.files?.[0] ?? null)
|
||||||
|
// -> Dismissing the picker fires no `change` event, so the promise would otherwise never settle
|
||||||
|
input.oncancel = () => resolve(null)
|
||||||
|
input.click()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether a chosen file is one the endpoint will take. The picker's filter is a suggestion the user
|
||||||
|
* can override, and the server checks the bytes anyway; asking here beats a 415 with nothing to
|
||||||
|
* explain it.
|
||||||
|
*/
|
||||||
|
export function isAcceptedSiteImage(file) {
|
||||||
|
return SITE_IMAGE_TYPES.includes(file.type)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Replace one of a site's images.
|
||||||
|
*
|
||||||
|
* @param kind One of `logo`, `favicon` or `loginBg`
|
||||||
|
*/
|
||||||
|
export async function uploadSiteImage(siteId, kind, file) {
|
||||||
|
// -> The image is the request body itself: the endpoint takes the raw file, not a form
|
||||||
|
const resp = await API_CLIENT.put(`sites/${siteId}/images/${kind}`, {
|
||||||
|
body: file,
|
||||||
|
headers: {
|
||||||
|
'content-type': file.type
|
||||||
|
}
|
||||||
|
}).json()
|
||||||
|
if (!resp?.ok) {
|
||||||
|
throw new Error(resp?.message || 'An unexpected error occured.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove one of a site's images, leaving the built-in default in its place.
|
||||||
|
*/
|
||||||
|
export async function clearSiteImage(siteId, kind) {
|
||||||
|
const resp = await API_CLIENT.delete(`sites/${siteId}/images/${kind}`).json()
|
||||||
|
if (!resp?.ok) {
|
||||||
|
throw new Error(resp?.message || 'An unexpected error occured.')
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue