erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/scripts/preview/request.ts

@@ -1,51 +1,51 @@
-import type { LinkData } from '@erudit/shared/bitran/link/shared';
-import type { LinkTarget } from '@erudit/shared/bitran/link/target';
-
-import type { PreviewData } from './data';
-
-export enum PreviewRequestType {
-    Link = 'link',
-    Data = 'data',
-    MissingElement = 'missing-element',
-    HashMismatch = 'hash-mismatch',
-}
-
-export interface PreviewRequestData extends PreviewRequestBase {
-    type: PreviewRequestType.Data;
-    data: PreviewData;
-}
-
-export interface PreviewRequestLink extends PreviewRequestBase {
-    type: PreviewRequestType.Link;
-    linkData: LinkData;
-    linkTarget: LinkTarget;
-}
-
-export interface PreviewRequestMissingElement extends PreviewRequestBase {
-    type: PreviewRequestType.MissingElement;
-    elementId: string;
-    hashMismatch?: {
-        current: string;
-        expected: string;
-    };
-}
-
-export interface PreviewRequestHashMismatch extends PreviewRequestBase {
-    type: PreviewRequestType.HashMismatch;
-    currentHash: string;
-    expectedHash: string;
-}
-
-export type PreviewRequest =
-    | PreviewRequestData
-    | PreviewRequestLink
-    | PreviewRequestMissingElement
-    | PreviewRequestHashMismatch;
-
-//
-//
-//
-
-interface PreviewRequestBase {
-    type: `${PreviewRequestType}`;
-}
+import type { LinkData } from '@erudit/shared/bitran/link/shared';
+import type { LinkTarget } from '@erudit/shared/bitran/link/target';
+
+import type { PreviewData } from './data';
+
+export enum PreviewRequestType {
+    Link = 'link',
+    Data = 'data',
+    MissingElement = 'missing-element',
+    HashMismatch = 'hash-mismatch',
+}
+
+export interface PreviewRequestData extends PreviewRequestBase {
+    type: PreviewRequestType.Data;
+    data: PreviewData;
+}
+
+export interface PreviewRequestLink extends PreviewRequestBase {
+    type: PreviewRequestType.Link;
+    linkData: LinkData;
+    linkTarget: LinkTarget;
+}
+
+export interface PreviewRequestMissingElement extends PreviewRequestBase {
+    type: PreviewRequestType.MissingElement;
+    elementId: string;
+    hashMismatch?: {
+        current: string;
+        expected: string;
+    };
+}
+
+export interface PreviewRequestHashMismatch extends PreviewRequestBase {
+    type: PreviewRequestType.HashMismatch;
+    currentHash: string;
+    expectedHash: string;
+}
+
+export type PreviewRequest =
+    | PreviewRequestData
+    | PreviewRequestLink
+    | PreviewRequestMissingElement
+    | PreviewRequestHashMismatch;
+
+//
+//
+//
+
+interface PreviewRequestBase {
+    type: `${PreviewRequestType}`;
+}

package/app/scripts/preview/state.ts

@@ -1,63 +1,63 @@
-import { objectsEqual } from '@shared/utils/objectsEqual';
-import { PreviewRequestType, type PreviewRequest } from './request';
-
-export enum PreviewThemeName {
-    Error = 'error',
-    Warn = 'warn',
-    Success = 'success',
-    Brand = 'brand',
-}
-
-//
-
-const _request = ref<PreviewRequest>();
-const _visible = ref(false);
-const _history = ref<PreviewRequest[]>([]);
-const _theme = ref<PreviewThemeName>();
-const _blinki = ref(0);
-
-//
-
-export const previewRequest = readonly(_request);
-export const previewVisible = readonly(_visible);
-export const previewTheme = readonly(_theme);
-export const previewBlinkTrigger = readonly(_blinki);
-
-export const hasPreviewHistory = computed(() => _history.value.length > 0);
-
-export function showPreviousPreview() {
-    if (!hasPreviewHistory.value) return;
-
-    _request.value = _history.value.pop();
-}
-
-export function showPreview(request: PreviewRequest) {
-    if (objectsEqual(_request.value, request)) {
-        if (_visible.value) _blinki.value++;
-        else _visible.value = true;
-        return;
-    }
-
-    if (_request.value) _history.value.push(_request.value);
-
-    _request.value = request;
-    _visible.value = true;
-}
-
-export function closePreview() {
-    _visible.value = false;
-    _request.value = undefined;
-    _history.value.length = 0;
-}
-
-export function togglePreview(visible?: boolean) {
-    _visible.value = visible === undefined ? !_visible.value : visible;
-}
-
-export function setPreviewTheme(newTheme: PreviewThemeName) {
-    _theme.value = newTheme;
-}
-
-export function unsetPreviewTheme() {
-    _theme.value = undefined;
-}
+import { objectsEqual } from '@shared/utils/objectsEqual';
+import { PreviewRequestType, type PreviewRequest } from './request';
+
+export enum PreviewThemeName {
+    Error = 'error',
+    Warn = 'warn',
+    Success = 'success',
+    Brand = 'brand',
+}
+
+//
+
+const _request = ref<PreviewRequest>();
+const _visible = ref(false);
+const _history = ref<PreviewRequest[]>([]);
+const _theme = ref<PreviewThemeName>();
+const _blinki = ref(0);
+
+//
+
+export const previewRequest = readonly(_request);
+export const previewVisible = readonly(_visible);
+export const previewTheme = readonly(_theme);
+export const previewBlinkTrigger = readonly(_blinki);
+
+export const hasPreviewHistory = computed(() => _history.value.length > 0);
+
+export function showPreviousPreview() {
+    if (!hasPreviewHistory.value) return;
+
+    _request.value = _history.value.pop();
+}
+
+export function showPreview(request: PreviewRequest) {
+    if (objectsEqual(_request.value, request)) {
+        if (_visible.value) _blinki.value++;
+        else _visible.value = true;
+        return;
+    }
+
+    if (_request.value) _history.value.push(_request.value);
+
+    _request.value = request;
+    _visible.value = true;
+}
+
+export function closePreview() {
+    _visible.value = false;
+    _request.value = undefined;
+    _history.value.length = 0;
+}
+
+export function togglePreview(visible?: boolean) {
+    _visible.value = visible === undefined ? !_visible.value : visible;
+}
+
+export function setPreviewTheme(newTheme: PreviewThemeName) {
+    _theme.value = newTheme;
+}
+
+export function unsetPreviewTheme() {
+    _theme.value = undefined;
+}

package/app/styles/_immediate.css

@@ -1,7 +1,7 @@
-/* Instant color theme setup */
-:root {
-    color-scheme: light;
-}
-:root[data-theme='dark'] {
-    color-scheme: dark;
-}
+/* Instant color theme setup */
+:root {
+    color-scheme: light;
+}
+:root[data-theme='dark'] {
+    color-scheme: dark;
+}

package/app/styles/_util.scss

@@ -1,43 +1,43 @@
-@mixin transition($properties...) {
-    transition: all var(--transitionSpeed) var(--transitionFunction);
-    transition-property: $properties;
-}
-
-@mixin dark {
-    :root[data-theme='dark'] & {
-        @content;
-    }
-}
-
-@mixin hoverLink {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    @include transition(text-decoration-color);
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-@mixin scroll {
-    -webkit-overflow-scrolling: auto;
-
-    &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        height: 5px;
-        width: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: var(--scrollbar);
-        &:hover {
-            background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%);
-        }
-    }
-
-    &::-webkit-scrollbar-corner {
-        background: var(--border);
-    }
-}
+@mixin transition($properties...) {
+    transition: all var(--transitionSpeed) var(--transitionFunction);
+    transition-property: $properties;
+}
+
+@mixin dark {
+    :root[data-theme='dark'] & {
+        @content;
+    }
+}
+
+@mixin hoverLink {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    @include transition(text-decoration-color);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+@mixin scroll {
+    -webkit-overflow-scrolling: auto;
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        height: 5px;
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--scrollbar);
+        &:hover {
+            background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%);
+        }
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: var(--border);
+    }
+}

package/app/styles/_utils.scss

@@ -1,44 +1,44 @@
-@mixin transition($properties...) {
-    transition: all var(--transitionSpeed) var(--transitionFunction);
-    transition-property: $properties;
-}
-
-@mixin dark {
-    :root[data-theme='dark'] & {
-        @content;
-    }
-}
-
-@mixin hoverLink {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    @include transition(text-decoration-color);
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-@mixin scroll {
-    -webkit-overflow-scrolling: auto;
-
-    &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        height: 5px;
-        width: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: var(--scrollbar);
-
-        &:hover {
-            background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%);
-        }
-    }
-
-    &::-webkit-scrollbar-corner {
-        background: var(--border);
-    }
-}
+@mixin transition($properties...) {
+    transition: all var(--transitionSpeed) var(--transitionFunction);
+    transition-property: $properties;
+}
+
+@mixin dark {
+    :root[data-theme='dark'] & {
+        @content;
+    }
+}
+
+@mixin hoverLink {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    @include transition(text-decoration-color);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+@mixin scroll {
+    -webkit-overflow-scrolling: auto;
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        height: 5px;
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--scrollbar);
+
+        &:hover {
+            background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%);
+        }
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: var(--border);
+    }
+}

package/app/styles/app.scss

@@ -1,91 +1,91 @@
-@use '$/def/size';
-
-//
-// Vars
-//
-
-:root {
-    --transitionSpeed: 200ms;
-    --transitionFunction: cubic-bezier(0, 0, 0.5, 1);
-    interpolate-size: allow-keywords;
-}
-
-// Sizes
-
-:root {
-    --wAside: #{size.$wAside};
-    --wMainMin: #{size.$wMainMin};
-    --wMainMax: #{size.$wMainMax};
-
-    --gap: #{size.$gap};
-    --gapSmall: #{size.$gapSmall};
-    --gapBig: #{size.$gapBig};
-}
-
-// Colors
-
-:root {
-    --bg: light-dark(#ebebeb, #141414);
-    --bgAside: light-dark(#f7f7f7, #1b1b1b);
-    --bgMain: light-dark(#ffffff, #212121);
-    --bgAccent: light-dark(#e6e6e6, #262626);
-
-    --border: light-dark(#d7d7d7, #373737);
-
-    --text: light-dark(#373737, #b9b9b9);
-    --textDeep: light-dark(#232323, #e1e1e1);
-    --textMuted: light-dark(#696969, #7f7f7f);
-    --textDimmed: light-dark(#969696, #616161);
-    --textDisabled: light-dark(#b9b9b9, #4f4f4f);
-
-    --brand: light-dark(#1879d9, #4e94d9);
-    --error: light-dark(#d91818, #d94e4e);
-    --warn: light-dark(#d98718, #d9b44e);
-    --success: light-dark(#12a512, #51a551);
-
-    --scrollbar: light-dark(#bfbfbf, #494949);
-
-    --invert: light-dark(black, white);
-}
-
-//
-// General rules
-//
-
-// Noto Sans + Noto Serif
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
-
-body {
-    background: var(--bg);
-    font-family: 'Noto Sans', system-ui, sans-serif;
-    color: var(--text);
-}
-
-button {
-    all: unset;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong {
-    color: var(--textDeep);
-}
-
-:focus-visible {
-    outline: 2px solid var(--brand);
-    border-radius: 3px;
-}
-
-::selection {
-    background: color-mix(in srgb, var(--brand), transparent 65%);
-}
-
-.icon-flip-h {
-    [my-icon] svg {
-        transform: scaleX(-1);
-    }
-}
+@use '$/def/size';
+
+//
+// Vars
+//
+
+:root {
+    --transitionSpeed: 200ms;
+    --transitionFunction: cubic-bezier(0, 0, 0.5, 1);
+    interpolate-size: allow-keywords;
+}
+
+// Sizes
+
+:root {
+    --wAside: #{size.$wAside};
+    --wMainMin: #{size.$wMainMin};
+    --wMainMax: #{size.$wMainMax};
+
+    --gap: #{size.$gap};
+    --gapSmall: #{size.$gapSmall};
+    --gapBig: #{size.$gapBig};
+}
+
+// Colors
+
+:root {
+    --bg: light-dark(#ebebeb, #141414);
+    --bgAside: light-dark(#f7f7f7, #1b1b1b);
+    --bgMain: light-dark(#ffffff, #212121);
+    --bgAccent: light-dark(#e6e6e6, #262626);
+
+    --border: light-dark(#d7d7d7, #373737);
+
+    --text: light-dark(#373737, #b9b9b9);
+    --textDeep: light-dark(#232323, #e1e1e1);
+    --textMuted: light-dark(#696969, #7f7f7f);
+    --textDimmed: light-dark(#969696, #616161);
+    --textDisabled: light-dark(#b9b9b9, #4f4f4f);
+
+    --brand: light-dark(#12968e, #379c97);
+    --error: light-dark(#d91818, #d94e4e);
+    --warn: light-dark(#d98718, #d9b44e);
+    --success: light-dark(#12a512, #51a551);
+
+    --scrollbar: light-dark(#bfbfbf, #494949);
+
+    --invert: light-dark(black, white);
+}
+
+//
+// General rules
+//
+
+// Noto Sans + Noto Serif
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+body {
+    background: var(--bg);
+    font-family: 'Noto Sans', system-ui, sans-serif;
+    color: var(--text);
+}
+
+button {
+    all: unset;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+    color: var(--textDeep);
+}
+
+:focus-visible {
+    outline: 2px solid var(--brand);
+    border-radius: 3px;
+}
+
+::selection {
+    background: color-mix(in srgb, var(--brand), transparent 65%);
+}
+
+.icon-flip-h {
+    [my-icon] svg {
+        transform: scaleX(-1);
+    }
+}

package/app/styles/def/_bp.scss

@@ -1,27 +1,27 @@
-@use 'sass:map';
-
-@use '$/def/size';
-
-$bps: (
-    'mobile': 500px,
-    'aside1': size.$wMainMin + size.$wAside,
-    'aside2': size.$wMainMin + size.$wAside * 2,
-);
-
-@mixin above($bp) {
-    @media (min-width: map.get($bps, $bp)) {
-        @content;
-    }
-}
-
-@mixin below($bp) {
-    @media (max-width: (map.get($bps, $bp) - 1)) {
-        @content;
-    }
-}
-
-@mixin between($bp1, $bp2) {
-    @media (min-width: map.get($bps, $bp1)) and (max-width: (map.get($bps, $bp2) - 1)) {
-        @content;
-    }
-}
+@use 'sass:map';
+
+@use '$/def/size';
+
+$bps: (
+    'mobile': 500px,
+    'aside1': size.$wMainMin + size.$wAside,
+    'aside2': size.$wMainMin + size.$wAside * 2,
+);
+
+@mixin above($bp) {
+    @media (min-width: map.get($bps, $bp)) {
+        @content;
+    }
+}
+
+@mixin below($bp) {
+    @media (max-width: (map.get($bps, $bp) - 1)) {
+        @content;
+    }
+}
+
+@mixin between($bp1, $bp2) {
+    @media (min-width: map.get($bps, $bp1)) and (max-width: (map.get($bps, $bp2) - 1)) {
+        @content;
+    }
+}

package/app/styles/def/_size.scss

@@ -1,7 +1,7 @@
-$wMainMin: 800px;
-$wMainMax: 1024px;
-$wAside: 300px;
-
-$gap: 15px;
-$gapSmall: calc($gap / 2);
-$gapBig: calc($gap * 2);
+$wMainMin: 800px;
+$wMainMax: 1024px;
+$wAside: 300px;
+
+$gap: 15px;
+$gapSmall: calc($gap / 2);
+$gapBig: calc($gap * 2);

package/app/styles/def/_z.scss

@@ -1,5 +1,5 @@
-$bg: 10;
-$main: 20;
-$asideSwitch: 30;
-$preview: 40;
-$aside: 50;
+$bg: 10;
+$main: 20;
+$asideSwitch: 30;
+$preview: 40;
+$aside: 50;