import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faExpand, faPencilAlt, faCompress } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import XSidebar from '@client/components/sidebar.vue';
+import XSidebar from './default.sidebar.vue';
+import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
import XCommon from './_common_/common.vue';
import XHeader from './_common_/header.vue';
-import XSide from './default.side.vue';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
+import * as symbols from '@client/symbols';
const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 600;
export default defineComponent({
components: {
XCommon,
XSidebar,
+ XDrawerSidebar,
XHeader,
XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
- XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
- },
-
- provide() {
- return {
- sideViewHook: this.isDesktop ? (url) => {
- this.$refs.side.navigate(url);
- } : null
- };
},
data() {
return {
pageInfo: null,
- isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
menuDef: sidebarDef,
- navHidden: false,
+ isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+ isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false,
+ fullView: false,
wallpaper: localStorage.getItem('wallpaper') != null,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
};
@@ -125,46 +118,23 @@ export default defineComponent({
},
mounted() {
- this.adjustUI();
-
- const ro = new ResizeObserver((entries, observer) => {
- this.adjustUI();
- });
-
- ro.observe(this.$refs.contents);
-
- window.addEventListener('resize', this.adjustUI, { passive: true });
-
- if (!this.isDesktop) {
- window.addEventListener('resize', () => {
- if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
- }, { passive: true });
- }
+ window.addEventListener('resize', () => {
+ this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
+ this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+ }, { passive: true });
},
methods: {
changePage(page) {
if (page == null) return;
- if (page.INFO) {
- this.pageInfo = page.INFO;
+ if (page[symbols.PAGE_INFO]) {
+ this.pageInfo = page[symbols.PAGE_INFO];
document.title = `${this.pageInfo.title} | ${instanceName}`;
}
},
- adjustUI() {
- const navWidth = this.$refs.nav.$el.offsetWidth;
- this.navHidden = navWidth === 0;
- if (this.$refs.contents == null) return;
- const width = this.$refs.contents.offsetWidth;
- if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
- },
-
- showNav() {
- this.$refs.nav.show();
- },
-
- attachSticky(el) {
- const sticky = new StickySidebar(el, this.$refs.widgetsSpacer);
+ attachSticky() {
+ const sticky = new StickySidebar(this.$refs.widgets, 16);
window.addEventListener('scroll', () => {
sticky.calc(window.scrollY);
}, { passive: true });
@@ -178,6 +148,10 @@ export default defineComponent({
window.scroll({ top: 0, behavior: 'smooth' });
},
+ showDrawerNav() {
+ this.$refs.drawerNav.show();
+ },
+
onTransition() {
if (window._scroll) window._scroll();
},
@@ -201,10 +175,10 @@ export default defineComponent({
type: 'label',
text: path,
}, {
- icon: faColumns,
- text: this.$ts.openInSideView,
+ icon: this.fullView ? faCompress : faExpand,
+ text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
action: () => {
- this.$refs.side.navigate(path);
+ this.fullView = !this.fullView;
}
}, {
icon: faWindowMaximize,
@@ -242,99 +216,119 @@ export default defineComponent({
}
.mk-app {
- $header-height: 58px; // TODO: どこかに集約したい
- $ui-font-size: 1em; // TODO: どこかに集約したい
- $widgets-hide-threshold: 1090px;
+ $header-height: 50px;
+ $ui-font-size: 1em;
+ $widgets-hide-threshold: 1200px;
+ $nav-icon-only-width: 78px; // TODO: どこかに集約したい
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
- display: flex;
&.wallpaper {
background: var(--wallpaperOverlay);
//backdrop-filter: blur(4px);
}
- > .contents {
- width: 100%;
- min-width: 0;
+ &.isMobile {
+ > .columns {
+ display: block;
+ margin: 0;
- &.withHeader {
- padding-top: $header-height;
+ > .main {
+ margin: 0;
+ padding-bottom: 92px;
+ border: none;
+ width: 100%;
+ border-radius: 0;
+
+ > .header {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ > .columns {
+ display: flex;
+ justify-content: center;
+ max-width: 100%;
+ margin: 32px 0;
+
+ &.fullView {
+ margin: 0;
+
+ > .sidebar {
+ display: none;
+ }
+
+ > .widgets {
+ display: none;
+ }
+
+ > .main {
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
+ width: 100%;
+ }
}
- > .header {
- position: fixed;
- z-index: 1000;
- top: 0;
- height: $header-height;
- width: 100%;
- line-height: $header-height;
- text-align: center;
- font-weight: bold;
- //background-color: var(--panel);
- -webkit-backdrop-filter: blur(32px);
- backdrop-filter: blur(32px);
- background-color: var(--header);
- //border-bottom: solid 1px var(--divider);
- user-select: none;
- }
-
- > main {
+ > .main {
min-width: 0;
+ width: 750px;
+ margin: 0 16px 0 0;
+ background: var(--bg);
+ --margin: 12px;
+
+ > .header {
+ position: sticky;
+ z-index: 1000;
+ top: 0;
+ height: $header-height;
+ line-height: $header-height;
+ -webkit-backdrop-filter: blur(32px);
+ backdrop-filter: blur(32px);
+ background-color: var(--header);
+ border-bottom: solid 0.5px var(--divider);
+ }
> .content {
- > * {
- // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
- min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
- }
+ background: var(--bg);
+ --stickyTop: #{$header-height};
}
- > .spacer {
- height: 82px;
+ @media (max-width: 850px) {
+ padding-top: $header-height;
- @media (min-width: ($widgets-hide-threshold + 1px)) {
- display: none;
+ > .header {
+ position: fixed;
+ width: calc(100% - #{$nav-icon-only-width});
}
}
}
- }
- > .side {
- min-width: 370px;
- max-width: 370px;
- border-left: solid 1px var(--divider);
- }
+ > .widgets {
+ //--panelShadow: none;
- > .widgets {
- padding: 0 var(--margin);
- border-left: solid 1px var(--divider);
-
- @media (max-width: $widgets-hide-threshold) {
- display: none;
- }
- }
-
- > .widgetButton {
- display: block;
- position: fixed;
- z-index: 1000;
- bottom: 32px;
- right: 32px;
- width: 64px;
- height: 64px;
- border-radius: 100%;
- box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
- font-size: 22px;
- background: var(--panel);
-
- &.navHidden {
- display: none;
+ @media (max-width: $widgets-hide-threshold) {
+ display: none;
+ }
}
- @media (min-width: ($widgets-hide-threshold + 1px)) {
- display: none;
+ @media (max-width: 850px) {
+ margin: 0;
+
+ > .sidebar {
+ border-right: solid 0.5px var(--divider);
+ }
+
+ > .main {
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
+ width: 100%;
+ }
}
}
@@ -349,10 +343,7 @@ export default defineComponent({
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
-
- &:not(.navHidden) {
- display: none;
- }
+ border-top: solid 0.5px var(--divider);
> .button {
position: relative;
@@ -429,6 +420,3 @@ export default defineComponent({
}
}
-
-
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index 35d3442bb2..b12de841a7 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -61,8 +61,6 @@ export default defineComponent({
.efzpzdvf {
position: sticky;
height: min-content;
- min-height: 100vh;
- padding: var(--margin) 0;
box-sizing: border-box;
> * {
diff --git a/src/client/ui/desktop.vue b/src/client/ui/desktop.vue
index 1480fd1840..a60aed6841 100644
--- a/src/client/ui/desktop.vue
+++ b/src/client/ui/desktop.vue
@@ -12,7 +12,7 @@ import { host } from '@client/config';
import { search } from '@client/scripts/search';
import XCommon from './_common_/common.vue';
import * as os from '@client/os';
-import XSidebar from '@client/components/sidebar.vue';
+import XSidebar from '@client/ui/_common_/sidebar.vue';
import { sidebarDef } from '@client/sidebar';
import { ColdDeviceStorage } from '@client/store';
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
new file mode 100644
index 0000000000..1387b02b2c
--- /dev/null
+++ b/src/client/ui/universal.vue
@@ -0,0 +1,434 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/client/ui/universal.widgets.vue b/src/client/ui/universal.widgets.vue
new file mode 100644
index 0000000000..35d3442bb2
--- /dev/null
+++ b/src/client/ui/universal.widgets.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/client/ui/visitor/a.vue b/src/client/ui/visitor/a.vue
index ba4506ec56..1b080c9e82 100644
--- a/src/client/ui/visitor/a.vue
+++ b/src/client/ui/visitor/a.vue
@@ -49,6 +49,7 @@ import MkPagination from '@client/components/ui/pagination.vue';
import MkButton from '@client/components/ui/button.vue';
import XHeader from './header.vue';
import { ColdDeviceStorage } from '@client/store';
+import * as symbols from '@client/symbols';
const DESKTOP_THRESHOLD = 1100;
@@ -110,8 +111,8 @@ export default defineComponent({
changePage(page) {
if (page == null) return;
- if (page.INFO) {
- this.pageInfo = page.INFO;
+ if (page[symbols.PAGE_INFO]) {
+ this.pageInfo = page[symbols.PAGE_INFO];
}
},
diff --git a/src/client/ui/visitor/b.vue b/src/client/ui/visitor/b.vue
index 34690ec643..da2ae45180 100644
--- a/src/client/ui/visitor/b.vue
+++ b/src/client/ui/visitor/b.vue
@@ -61,6 +61,7 @@ import MkButton from '@client/components/ui/button.vue';
import XHeader from './header.vue';
import XKanban from './kanban.vue';
import { ColdDeviceStorage } from '@client/store';
+import * as symbols from '@client/symbols';
const DESKTOP_THRESHOLD = 1100;
@@ -124,8 +125,8 @@ export default defineComponent({
methods: {
changePage(page) {
if (page == null) return;
- if (page.INFO) {
- this.pageInfo = page.INFO;
+ if (page[symbols.PAGE_INFO]) {
+ this.pageInfo = page[symbols.PAGE_INFO];
}
},
diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue
index 9215a639b0..af3e53225e 100644
--- a/src/client/ui/zen.vue
+++ b/src/client/ui/zen.vue
@@ -28,6 +28,7 @@ import { faBell } from '@fortawesome/free-regular-svg-icons';
import { host } from '@client/config';
import XHeader from './_common_/header.vue';
import XCommon from './_common_/common.vue';
+import * as symbols from '@client/symbols';
export default defineComponent({
components: {
@@ -50,8 +51,8 @@ export default defineComponent({
methods: {
changePage(page) {
if (page == null) return;
- if (page.INFO) {
- this.pageInfo = page.INFO;
+ if (page[symbols.PAGE_INFO]) {
+ this.pageInfo = page[symbols.PAGE_INFO];
}
},
@@ -94,7 +95,7 @@ export default defineComponent({
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
}
> main {
diff --git a/src/client/widgets/aiscript.vue b/src/client/widgets/aiscript.vue
index 84390866bd..f24e033593 100644
--- a/src/client/widgets/aiscript.vue
+++ b/src/client/widgets/aiscript.vue
@@ -122,7 +122,7 @@ export default defineComponent({
color: var(--fg);
background: transparent;
border: none;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
border-radius: 0;
box-sizing: border-box;
font: inherit;
@@ -147,7 +147,7 @@ export default defineComponent({
}
> .logs {
- border-top: solid 1px var(--divider);
+ border-top: solid 0.5px var(--divider);
text-align: left;
padding: 16px;
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 6eb656ce05..f0a79a31a6 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -100,7 +100,7 @@ export default defineComponent({
display: flex;
align-items: center;
padding: 14px 16px;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
> img {
display: block;
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index aaf2b2fc8f..0b560ca56e 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -136,7 +136,7 @@ export default defineComponent({
padding: 16px;
&:not(:first-child) {
- border-top: solid 1px var(--divider);
+ border-top: solid 0.5px var(--divider);
}
> .label {
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index 4a7786312a..c3ab2934a8 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -77,7 +77,7 @@ export default defineComponent({
color: var(--fg);
background: transparent;
border: none;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
border-radius: 0;
box-sizing: border-box;
font: inherit;
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index 300e3b31de..cd7202f1f8 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -79,7 +79,7 @@ export default defineComponent({
display: flex;
align-items: center;
padding: 14px 16px;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
> .tag {
flex: 1;
diff --git a/src/misc/convert-host.ts b/src/misc/convert-host.ts
index f8957a64a8..7b0b0acf10 100644
--- a/src/misc/convert-host.ts
+++ b/src/misc/convert-host.ts
@@ -1,6 +1,6 @@
import { URL } from 'url';
import config from '@/config';
-import { toASCII } from 'punycode';
+import { toASCII } from 'punycode/';
export function getFullApAccount(username: string, host: string | null) {
return host ? `${username}@${toPuny(host)}` : `${username}@${toPuny(config.host)}`;
diff --git a/src/misc/extract-custom-emojis-from-mfm.ts b/src/misc/extract-custom-emojis-from-mfm.ts
index f1477a79f0..b29ce281b3 100644
--- a/src/misc/extract-custom-emojis-from-mfm.ts
+++ b/src/misc/extract-custom-emojis-from-mfm.ts
@@ -2,17 +2,9 @@ import * as mfm from 'mfm-js';
import { unique } from '@/prelude/array';
export function extractCustomEmojisFromMfm(nodes: mfm.MfmNode[]): string[] {
- const emojiNodes = [] as mfm.MfmEmojiCode[];
+ const emojiNodes = mfm.extract(nodes, (node) => {
+ return (node.type === 'emojiCode' && node.props.name.length <= 100);
+ });
- function scan(nodes: mfm.MfmNode[]) {
- for (const node of nodes) {
- if (node.type === 'emojiCode') emojiNodes.push(node);
- else if (node.children) scan(node.children);
- }
- }
-
- scan(nodes);
-
- const emojis = emojiNodes.filter(x => x.props.name.length <= 100).map(x => x.props.name!);
- return unique(emojis);
+ return unique(emojiNodes.map(x => x.props.name));
}
diff --git a/src/misc/extract-hashtags.ts b/src/misc/extract-hashtags.ts
index 9961755ccd..b0a74df219 100644
--- a/src/misc/extract-hashtags.ts
+++ b/src/misc/extract-hashtags.ts
@@ -1,18 +1,9 @@
import * as mfm from 'mfm-js';
import { unique } from '@/prelude/array';
-export default function(nodes: mfm.MfmNode[]): string[] {
- const hashtagNodes = [] as mfm.MfmHashtag[];
+export function extractHashtags(nodes: mfm.MfmNode[]): string[] {
+ const hashtagNodes = mfm.extract(nodes, (node) => node.type === 'hashtag');
+ const hashtags = unique(hashtagNodes.map(x => x.props.hashtag));
- function scan(nodes: mfm.MfmNode[]) {
- for (const node of nodes) {
- if (node.type === 'hashtag') hashtagNodes.push(node);
- else if (node.children) scan(node.children);
- }
- }
-
- scan(nodes);
-
- const hashtags = hashtagNodes.map(x => x.props.hashtag);
- return unique(hashtags);
+ return hashtags;
}
diff --git a/src/misc/extract-mentions.ts b/src/misc/extract-mentions.ts
index a9d4b378f3..cc19b161a8 100644
--- a/src/misc/extract-mentions.ts
+++ b/src/misc/extract-mentions.ts
@@ -2,18 +2,10 @@
import * as mfm from 'mfm-js';
-export default function(nodes: mfm.MfmNode[]): mfm.MfmMention['props'][] {
+export function extractMentions(nodes: mfm.MfmNode[]): mfm.MfmMention['props'][] {
// TODO: 重複を削除
- const mentionNodes = [] as mfm.MfmMention[];
+ const mentionNodes = mfm.extract(nodes, (node) => node.type === 'mention');
+ const mentions = mentionNodes.map(x => x.props);
- function scan(nodes: mfm.MfmNode[]) {
- for (const node of nodes) {
- if (node.type === 'mention') mentionNodes.push(node);
- else if (node.children) scan(node.children);
- }
- }
-
- scan(nodes);
-
- return mentionNodes.map(x => x.props);
+ return mentions;
}
diff --git a/src/misc/extract-url-from-mfm.ts b/src/misc/extract-url-from-mfm.ts
index aa7f5f2540..e6d5d0104a 100644
--- a/src/misc/extract-url-from-mfm.ts
+++ b/src/misc/extract-url-from-mfm.ts
@@ -6,29 +6,14 @@ import { unique } from '@/prelude/array';
const removeHash = (x: string) => x.replace(/#[^#]*$/, '');
export function extractUrlFromMfm(nodes: mfm.MfmNode[], respectSilentFlag = true): string[] {
- const urlNodes = [] as (mfm.MfmUrl | mfm.MfmLink)[];
-
- function scan(nodes: mfm.MfmNode[]) {
- for (const node of nodes) {
- if (node.type === 'url') {
- urlNodes.push(node);
- } else if (node.type === 'link') {
- if (!respectSilentFlag || !node.props.silent) {
- urlNodes.push(node);
- }
- } else if (node.children) {
- scan(node.children);
- }
- }
- }
-
- scan(nodes);
-
- const urls = unique(urlNodes.map(x => x.props.url));
+ const urlNodes = mfm.extract(nodes, (node) => {
+ return (node.type === 'url') || (node.type === 'link' && (!respectSilentFlag || !node.props.silent));
+ });
+ const urls: string[] = unique(urlNodes.map(x => x.props.url));
return urls.reduce((array, url) => {
- const removed = removeHash(url);
- if (!array.map(x => removeHash(x)).includes(removed)) array.push(url);
+ const urlWithoutHash = removeHash(url);
+ if (!array.map(x => removeHash(x)).includes(urlWithoutHash)) array.push(url);
return array;
}, [] as string[]);
}
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index 2c20da41c5..c0ffd75e23 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -6,7 +6,7 @@ import acceptAllFollowRequests from '../../../../services/following/requests/acc
import { publishToFollowers } from '../../../../services/i/update';
import define from '../../define';
import { extractCustomEmojisFromMfm } from '@/misc/extract-custom-emojis-from-mfm';
-import extractHashtags from '@/misc/extract-hashtags';
+import { extractHashtags } from '@/misc/extract-hashtags';
import * as langmap from 'langmap';
import { updateUsertags } from '../../../../services/update-hashtag';
import { ApiError } from '../../error';
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 125285f34a..b9b39d25e4 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -12,9 +12,9 @@ import { updateHashtags } from '../update-hashtag';
import { concat } from '../../prelude/array';
import insertNoteUnread from './unread';
import { registerOrFetchInstanceDoc } from '../register-or-fetch-instance-doc';
-import extractMentions from '@/misc/extract-mentions';
+import { extractMentions } from '@/misc/extract-mentions';
import { extractCustomEmojisFromMfm } from '@/misc/extract-custom-emojis-from-mfm';
-import extractHashtags from '@/misc/extract-hashtags';
+import { extractHashtags } from '@/misc/extract-hashtags';
import { Note, IMentionedRemoteUsers } from '../../models/entities/note';
import { Mutings, Users, NoteWatchings, Notes, Instances, UserProfiles, Antennas, Followings, MutedNotes, Channels, ChannelFollowings } from '../../models';
import { DriveFile } from '../../models/entities/drive-file';
diff --git a/test/extract-mentions.ts b/test/extract-mentions.ts
index 68b59f7f55..9e6d041906 100644
--- a/test/extract-mentions.ts
+++ b/test/extract-mentions.ts
@@ -1,6 +1,6 @@
import * as assert from 'assert';
-import extractMentions from '../src/misc/extract-mentions';
+import { extractMentions } from '../src/misc/extract-mentions';
import { parse } from 'mfm-js';
describe('Extract mentions', () => {
diff --git a/webpack.config.ts b/webpack.config.ts
index 5ead4f3af2..9f2a3a89af 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -103,6 +103,12 @@ module.exports = {
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
}
}, postcss]
+ }, {
+ test: /\.svg$/,
+ use: [
+ 'vue-loader',
+ 'vue-svg-loader',
+ ],
}, {
test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
type: 'asset/resource'
diff --git a/yarn.lock b/yarn.lock
index 02fcf960d0..fb3c82ad9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -917,6 +917,11 @@
resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
+"@types/punycode@2.1.0":
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/@types/punycode/-/punycode-2.1.0.tgz#89e4f3d09b3f92e87a80505af19be7e0c31d4e83"
+ integrity sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g==
+
"@types/q@^1.5.1":
version "1.5.2"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
@@ -6608,10 +6613,10 @@ methods@^1.1.2:
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
-mfm-js@0.12.0:
- version "0.12.0"
- resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.12.0.tgz#47be2fdb18869b9e55576fffcc159d0417c670db"
- integrity sha512-u0IyIMwzsGsOGmctRXcOdWYsh9LWHKHqX+XCBfPjORX+1DCBdonaO6pryOawns6z16Xvus2yZk0KMMqWt2TotQ==
+mfm-js@0.14.0:
+ version "0.14.0"
+ resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.14.0.tgz#0952ed6f0dd8553866bde7e646c3d5d3d23aeae9"
+ integrity sha512-snCiszquj6DIOARdgJfI8b6o9PbojAmJe1thrsBkUTxG+XG27rCOmjEL1kc1705XraJo0aVCLR9vE6YmjHiUQg==
dependencies:
twemoji-parser "13.0.x"
@@ -10045,7 +10050,7 @@ svgo@^0.7.0:
sax "~1.2.1"
whet.extend "~0.9.9"
-svgo@^1.0.0:
+svgo@^1.0.0, svgo@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
@@ -10975,6 +10980,15 @@ vue-style-loader@4.1.3:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
+vue-svg-loader@0.17.0-beta.2:
+ version "0.17.0-beta.2"
+ resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz#954b2a08b5488998dd81ec371ab5fb5ea4182ef7"
+ integrity sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q==
+ dependencies:
+ loader-utils "^2.0.0"
+ semver "^7.3.2"
+ svgo "^1.3.2"
+
vue@3.0.8:
version "3.0.8"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"