@erudit-js/prose 3.0.0-dev.25

package/dist/elements/link/BlockLink.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import { ProseError, type ProseElement } from '@jsprose/core';
+
+import type { dependencySchema } from './dependency/core.js';
+import type { referenceSchema } from './reference/core.js';
+import type { LinkStorage } from './storage.js';
+import { useProseContext } from '../../app/composables/context.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import { useElementPhrase } from '../../app/composables/language.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import Block from '../../app/shared/block/Block.vue';
+
+const { element } = defineProps<{
+    element:
+        | ProseElement<typeof referenceSchema>
+        | ProseElement<typeof dependencySchema>;
+}>();
+
+const { EruditLink, EruditIcon, eruditIcons } = useProseContext();
+const linkStorage = (await useElementStorage(element as any)) as LinkStorage;
+const formatText = useFormatText();
+
+interface UIData {
+    icon: string;
+    text: string;
+    secondary?: {
+        icon: string;
+        text: string;
+    };
+}
+
+const uiData = shallowRef<UIData>();
+
+switch (linkStorage.type) {
+    case 'unique':
+        const elementPhrase = await useElementPhrase(linkStorage.schemaName);
+        uiData.value = {
+            icon: await useElementIcon(linkStorage.schemaName),
+            text: linkStorage.elementTitle || elementPhrase.element_name,
+            secondary: {
+                icon: eruditIcons[
+                    linkStorage.content.contentType === 'topic'
+                        ? linkStorage.content.topicPart
+                        : linkStorage.content.contentType
+                ],
+                text: linkStorage.content.contentTitle,
+            },
+        };
+        break;
+    case 'contentItem':
+        uiData.value = {
+            icon: eruditIcons[
+                linkStorage.content.contentType === 'topic'
+                    ? linkStorage.content.topicPart
+                    : linkStorage.content.contentType
+            ],
+            text: linkStorage.content.contentTitle,
+        };
+        break;
+    default:
+        throw new ProseError(
+            'BlockLink supports only Unique and Document link types!',
+        );
+}
+</script>
+
+<template>
+    <Block :element>
+        <EruditLink
+            target="_blank"
+            :to="linkStorage.resolvedHref"
+            class="group bg-brand/5 border-brand/20 hocus:bg-brand/10
+                hocus:border-brand/40 relative block rounded-xl border-2
+                border-dashed p-(--proseAsideWidth)
+                transition-[border,background]"
+        >
+            <EruditIcon
+                name="arrow/outward"
+                class="text-brand/15 group-hocus:text-brand/20 top-small
+                    right-small absolute shrink-0 text-[60px]
+                    transition-[color]"
+            />
+            <div
+                class="text-brand/80 group-hocus:text-brand mb-small gap-small
+                    font-medium transition-[color]"
+            >
+                <EruditIcon
+                    :name="uiData!.icon"
+                    class="mr-small relative top-0.5 inline align-baseline
+                        text-[1.1em]"
+                />
+                <span>{{ formatText(uiData!.text) }}</span>
+            </div>
+            <div class="text-text-muted">
+                {{ formatText(element.data.label) }}
+            </div>
+            <div
+                v-if="uiData!.secondary"
+                class="text-text-dimmed mt-small text-main-xs"
+            >
+                <EruditIcon
+                    :name="uiData!.secondary!.icon"
+                    class="mr-small relative top-0.5 inline align-baseline"
+                />
+                <span>{{ formatText(uiData!.secondary!.text) }}</span>
+            </div>
+        </EruditLink>
+    </Block>
+</template>

package/dist/elements/link/Link.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { depSchema } from './dependency/core.js';
+import type { refSchema } from './reference/core.js';
+import type { LinkStorage } from './storage.js';
+import { useProseContext } from '../../app/composables/context.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import Inliner from '../../app/shared/inliner/Inliner.vue';
+
+const { element } = defineProps<{
+    element: ProseElement<typeof refSchema> | ProseElement<typeof depSchema>;
+}>();
+
+const {
+    EruditIcon,
+    EruditLink,
+    eruditIcons,
+    setPreview,
+    closePreview,
+    baseUrl,
+} = useProseContext();
+const formatText = useFormatText();
+const linkStorage = (await useElementStorage(element as any)) as LinkStorage;
+
+const icon = await (async () => {
+    switch (linkStorage.type) {
+        case 'direct':
+            return 'arrow/outward-box';
+        case 'contentItem':
+            return eruditIcons[
+                linkStorage.content.contentType === 'topic'
+                    ? linkStorage.content.topicPart
+                    : linkStorage.content.contentType
+            ];
+        case 'unique':
+            return await useElementIcon(linkStorage.schemaName);
+    }
+})();
+
+const doubleClick = {
+    timeout: undefined as ReturnType<typeof setTimeout> | undefined,
+    startTimeout() {
+        this.timeout = setTimeout(() => {
+            this.reset();
+        }, 400);
+    },
+    reset() {
+        clearTimeout(this.timeout);
+        this.timeout = undefined;
+    },
+};
+
+function linkClick() {
+    if (doubleClick.timeout) {
+        doubleClick.reset();
+        closePreview();
+        const openUrl =
+            linkStorage.type === 'direct'
+                ? linkStorage.resolvedHref
+                : baseUrl + linkStorage.resolvedHref.slice(1);
+        window.open(openUrl, '_blank');
+        return false;
+    }
+
+    setPreview(linkStorage.previewRequest);
+    doubleClick.startTimeout();
+    return false;
+}
+</script>
+
+<template>
+    <Inliner :element>
+        <EruditLink
+            @click.capture.prevent="linkClick"
+            :to="linkStorage.resolvedHref"
+            :style="{ '--tGap': '1px', '--xGap': '4px', '--bGap': '4px' }"
+            class="text-brand hocus:bg-brand/15 relative
+                -mx-[calc(var(--xGap)-3px)] -mt-(--tGap) -mb-(--bGap) rounded-sm
+                bg-transparent px-(--xGap) pt-(--tGap) pb-(--bGap) underline
+                decoration-[color-mix(in_srgb,var(--color-brand)30%,transparent)]
+                decoration-2 underline-offset-2 transition-[color,background]"
+        >
+            <EruditIcon
+                :name="icon"
+                class="micro:pr-1.5 inline pr-1 text-[1.3em]"
+            />
+            <span>{{ formatText(element.data.label) }}</span>
+        </EruditLink>
+    </Inliner>
+</template>

package/dist/elements/link/core.d.ts

@@ -0,0 +1,13 @@
+import { type AnyUnique, type NormalizedChildren } from '@jsprose/core';
+import type { GlobalContentTypeguard } from '@erudit-js/core/content/global';
+import type { EruditRawElement } from '../../rawElement.js';
+import type { depSchema, dependencySchema } from './dependency/core.js';
+import type { referenceSchema, refSchema } from './reference/core.js';
+export interface LinkData {
+    label: string;
+    storageKey?: string;
+}
+export type LinkToProp = string | GlobalContentTypeguard | AnyUnique;
+export declare function handleLinkTag(element: EruditRawElement<typeof depSchema | typeof dependencySchema | typeof refSchema | typeof referenceSchema>, tagName: string, props: {
+    to: LinkToProp;
+}, children: NormalizedChildren): void;

package/dist/elements/link/core.js

@@ -0,0 +1,12 @@
+import { ensureTagChild, ProseError, textSchema } from "@jsprose/core";
+import { createLinkStorageKey } from "./storage.js";
+export function handleLinkTag(element, tagName, props, children) {
+	ensureTagChild(tagName, children, [textSchema]);
+	const child = children[0];
+	const label = child.data.trim();
+	if (!label) {
+		throw new ProseError(`<${tagName}> label cannot be empty!`);
+	}
+	element.data = { label };
+	element.storageKey = createLinkStorageKey(props.to, tagName);
+}

package/dist/elements/link/dependency/_global.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Dependencies are used to reference content the reader **must know and understand** in order to proceed further.
+ *
+ * Never use dependencies to simply mention other content; for that, use `<Ref>` and `<Reference>` tags.
+ *
+ * Dependency types:
+ * * Global Content — points to content items and uniques via `$CONTENT` global object.
+ * * Unique — points to a unique element directly.
+ *
+ * @title Inliner Dependency
+ * @layout inliner
+ * @example
+ * ```tsx
+ * // Global content dependency
+ * <P>
+ *   We need to use <Dep to={$CONTENT.combinatorics.sumRule}>Rule of Sum</Dep> to calculate the answer.
+ * </P>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <P>
+ *   We need to use <Dep to={uniques.intro}>introduction</Dep> to understand this transform.
+ * </P>
+ * ```
+ */
+export const Dep = '_tag_';
+
+/**
+ * Same as `<Dep>`, but as a block element which draws more attention.
+ *
+ * @title Block Dependency
+ * @layout block
+ * @example
+ * ```tsx
+ * // Global content dependency
+ * <Dependency to={$CONTENT.combinatorics.sumRule}>
+ *   To proceed, you must understand the Rule of Sum in combinatorics.
+ * </Dependency>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <Dependency to={uniques.intro}>
+ *   To proceed, you must read the introduction.
+ * </Dependency>
+ * ```
+ */
+export const Dependency = '_tag_';

package/dist/elements/link/dependency/app.d.ts

@@ -0,0 +1,16 @@
+declare const _default: (import("../../../app/appElement.js").AppElement<{
+    name: "dependencyInliner";
+    type: "inliner";
+    linkable: true;
+    Data: import("../core.js").LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+}> | import("../../../app/appElement.js").AppElement<{
+    name: "dependencyBlock";
+    type: "block";
+    linkable: true;
+    Data: import("../core.js").LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+}>)[];
+export default _default;

package/dist/elements/link/dependency/app.js

@@ -0,0 +1,14 @@
+import { defineEruditProseAppElement } from "../../../app/appElement.js";
+import { dependencySchema, depSchema } from "./core.js";
+export default [defineEruditProseAppElement({
+	schema: depSchema,
+	component: () => import("../Link.vue")
+}), defineEruditProseAppElement({
+	schema: dependencySchema,
+	component: () => import("../BlockLink.vue"),
+	icon: () => import("../icon.svg?raw"),
+	languages: {
+		en: () => import("./languages/en.js"),
+		ru: () => import("./languages/ru.js")
+	}
+})];

package/dist/elements/link/dependency/core.d.ts

@@ -0,0 +1,125 @@
+import { type TagChildren } from '@jsprose/core';
+import { type LinkData, type LinkToProp } from '../core.js';
+import { type NoSnippet, type NoToc } from '../../../tag.js';
+import type { EruditRawElement } from '../../../rawElement.js';
+export declare const depSchema: {
+    name: "dependencyInliner";
+    type: "inliner";
+    linkable: true;
+    Data: LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+};
+export declare const dependencySchema: {
+    name: "dependencyBlock";
+    type: "block";
+    linkable: true;
+    Data: LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+};
+export declare const Dep: import("@jsprose/core").Tag<"Dep", {
+    name: "dependencyInliner";
+    type: "inliner";
+    linkable: true;
+    Data: LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+}, {
+    to: Exclude<LinkToProp, string>;
+} & TagChildren & NoSnippet & NoToc>;
+export declare const Dependency: import("@jsprose/core").Tag<"Dependency", {
+    name: "dependencyBlock";
+    type: "block";
+    linkable: true;
+    Data: LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+}, {
+    to: Exclude<LinkToProp, string>;
+} & TagChildren & NoSnippet & NoToc>;
+export declare const depRegistryItem: import("@jsprose/core").RegistryItem<{
+    name: "dependencyInliner";
+    type: "inliner";
+    linkable: true;
+    Data: LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+}, {
+    Dep: import("@jsprose/core").Tag<"Dep", {
+        name: "dependencyInliner";
+        type: "inliner";
+        linkable: true;
+        Data: LinkData;
+        Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+        Children: undefined;
+    }, {
+        to: Exclude<LinkToProp, string>;
+    } & TagChildren & NoSnippet & NoToc>;
+}, undefined>;
+export declare const dependencyRegistryItem: import("@jsprose/core").RegistryItem<{
+    name: "dependencyBlock";
+    type: "block";
+    linkable: true;
+    Data: LinkData;
+    Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+    Children: undefined;
+}, {
+    Dependency: import("@jsprose/core").Tag<"Dependency", {
+        name: "dependencyBlock";
+        type: "block";
+        linkable: true;
+        Data: LinkData;
+        Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+        Children: undefined;
+    }, {
+        to: Exclude<LinkToProp, string>;
+    } & TagChildren & NoSnippet & NoToc>;
+}, undefined>;
+declare const _default: [{
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "dependencyInliner";
+        type: "inliner";
+        linkable: true;
+        Data: LinkData;
+        Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+        Children: undefined;
+    }, {
+        Dep: import("@jsprose/core").Tag<"Dep", {
+            name: "dependencyInliner";
+            type: "inliner";
+            linkable: true;
+            Data: LinkData;
+            Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+            Children: undefined;
+        }, {
+            to: Exclude<LinkToProp, string>;
+        } & TagChildren & NoSnippet & NoToc>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "dependencyBlock";
+        type: "block";
+        linkable: true;
+        Data: LinkData;
+        Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+        Children: undefined;
+    }, {
+        Dependency: import("@jsprose/core").Tag<"Dependency", {
+            name: "dependencyBlock";
+            type: "block";
+            linkable: true;
+            Data: LinkData;
+            Storage: import("../storage.js").ContentItemLinkStorage | import("../storage.js").UniqueLinkStorage;
+            Children: undefined;
+        }, {
+            to: Exclude<LinkToProp, string>;
+        } & TagChildren & NoSnippet & NoToc>;
+    }, undefined>;
+}];
+export default _default;
+export declare const dependencyStep: ({ rawElement, proseElement }: {
+    context: import("../../../context.js").EruditProseContext;
+    rawElement: EruditRawElement<import("@jsprose/core").AnySchema>;
+    proseElement: import("@jsprose/core").ProseElement<import("@jsprose/core").AnySchema>;
+}) => string | undefined;

package/dist/elements/link/dependency/core.js

@@ -0,0 +1,51 @@
+import { defineRegistryItem, defineSchema, isRawElement } from "@jsprose/core";
+import { handleLinkTag } from "../core.js";
+import { defineEruditTag } from "../../../tag.js";
+import { defineResolveStep } from "../../../resolveStep.js";
+import { defineEruditProseCoreElements } from "../../../coreElement.js";
+export const depSchema = defineSchema({
+	name: "dependencyInliner",
+	type: "inliner",
+	linkable: true
+})();
+export const dependencySchema = defineSchema({
+	name: "dependencyBlock",
+	type: "block",
+	linkable: true
+})();
+export const Dep = defineEruditTag({
+	tagName: "Dep",
+	schema: depSchema
+})(({ element, tagName, props, children }) => {
+	handleLinkTag(element, tagName, props, children);
+});
+export const Dependency = defineEruditTag({
+	tagName: "Dependency",
+	schema: dependencySchema
+})(({ element, tagName, props, children }) => {
+	handleLinkTag(element, tagName, props, children);
+});
+export const depRegistryItem = defineRegistryItem({
+	schema: depSchema,
+	tags: [Dep]
+});
+export const dependencyRegistryItem = defineRegistryItem({
+	schema: dependencySchema,
+	tags: [Dependency]
+});
+export default defineEruditProseCoreElements({ registryItem: depRegistryItem }, { registryItem: dependencyRegistryItem });
+//
+// Resolve
+//
+export const dependencyStep = defineResolveStep(({ rawElement, proseElement }) => {
+	if (!isRawElement(rawElement, depSchema) && !isRawElement(rawElement, dependencySchema)) {
+		return;
+	}
+	if (!proseElement.id) {
+		return;
+	}
+	if (!rawElement.storageKey) {
+		return;
+	}
+	return rawElement.storageKey;
+});

package/dist/elements/link/dependency/languages/en.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    element_name: string;
+};
+export default _default;

package/dist/elements/link/dependency/languages/en.js

@@ -0,0 +1,2 @@
+import { defineElementLanguage } from "../../../../app/language/element.js";
+export default defineElementLanguage({ element_name: "Dependency" });

package/dist/elements/link/dependency/languages/ru.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    element_name: string;
+};
+export default _default;

package/dist/elements/link/dependency/languages/ru.js

@@ -0,0 +1,2 @@
+import { defineElementLanguage } from "../../../../app/language/element.js";
+export default defineElementLanguage({ element_name: "Зависимость" });

package/dist/elements/link/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/>
+</svg>

package/dist/elements/link/reference/_global.d.ts

@@ -0,0 +1,49 @@
+/**
+ * References are used to simply mention, **not requiring knowledge of** other content inside or outside site.
+ *
+ * Reference types:
+ * * Global Content — points to content items and uniques via `$CONTENT` global object.
+ * * Unique — points to a unique element directly.
+ * * Direct — points to an external URL (when possible, avoid using of these).
+ *
+ * @title Inliner Reference
+ * @layout inliner
+ * @example
+ * ```tsx
+ * // Global content reference
+ * <P>
+ *   The method we used here is somewhat similar to <Ref to={$CONTENT.combinatorics.sumRule}>Rule of Sum</Ref> in combinatorics.
+ * </P>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <P>
+ *   If you remember, we also did this transform back in the <Ref to={uniques.intro}>introduction</Ref>.
+ * </P>
+ *
+ * // Direct reference
+ * <Ref to="https://google.com">Just Google It!</Ref>
+ * ```
+ */
+export const Ref = '_tag_';
+
+/**
+ * Same as `<Ref>`, but as a block element which draws more attention.
+ *
+ * @title Block Reference
+ * @layout block
+ * @example
+ * ```tsx
+ * // Global content reference
+ * <Reference to={$CONTENT.combinatorics.sumRule}>
+ *   There is a similar method called Rule of Sum in combinatorics which you might want to review.
+ * </Reference>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <Reference to={uniques.intro}>
+ *   If you remember, we also did this transform back in the introduction.
+ * </Reference>
+ * ```
+ */
+export const Reference = '_tag_';

package/dist/elements/link/reference/app.d.ts

@@ -0,0 +1,16 @@
+declare const _default: (import("../../../app/appElement.js").AppElement<{
+    name: "referenceInliner";
+    type: "inliner";
+    linkable: true;
+    Data: import("../core.js").LinkData;
+    Storage: import("../storage.js").LinkStorage;
+    Children: undefined;
+}> | import("../../../app/appElement.js").AppElement<{
+    name: "referenceBlock";
+    type: "block";
+    linkable: true;
+    Data: import("../core.js").LinkData;
+    Storage: import("../storage.js").LinkStorage;
+    Children: undefined;
+}>)[];
+export default _default;

package/dist/elements/link/reference/app.js

@@ -0,0 +1,14 @@
+import { defineEruditProseAppElement } from "../../../app/appElement.js";
+import { referenceSchema, refSchema } from "./core.js";
+export default [defineEruditProseAppElement({
+	schema: refSchema,
+	component: () => import("../Link.vue")
+}), defineEruditProseAppElement({
+	schema: referenceSchema,
+	component: () => import("../BlockLink.vue"),
+	icon: () => import("../icon.svg?raw"),
+	languages: {
+		en: () => import("./languages/en.js"),
+		ru: () => import("./languages/ru.js")
+	}
+})];