build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
20
src/components/Share/DiasporaLogo.vue
Normal file
20
src/components/Share/DiasporaLogo.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<span class="text-black dark:text-white dark:fill-white">
|
||||
<svg
|
||||
version="1.1"
|
||||
viewBox="0 0 65.131 65.131"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Diaspora logo</title>
|
||||
<path
|
||||
d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z"
|
||||
stroke-width=".33922"
|
||||
/>
|
||||
<path
|
||||
d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z"
|
||||
fill="transparent"
|
||||
stroke-width=".093311"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
14
src/components/Share/MastodonLogo.vue
Normal file
14
src/components/Share/MastodonLogo.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="text-primary dark:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976">
|
||||
<title>Mastodon logo</title>
|
||||
<path
|
||||
d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"
|
||||
/>
|
||||
<path
|
||||
d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
182
src/components/Share/ShareModal.vue
Normal file
182
src/components/Share/ShareModal.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="dark:text-white p-4">
|
||||
<header class="">
|
||||
<h2 class="text-2xl">{{ title }}</h2>
|
||||
</header>
|
||||
|
||||
<section class="flex">
|
||||
<div class="w-full">
|
||||
<slot></slot>
|
||||
<o-field :label="inputLabel" label-for="url-text">
|
||||
<o-input id="url-text" ref="URLInput" :modelValue="url" expanded />
|
||||
<p class="control">
|
||||
<o-tooltip
|
||||
:label="t('URL copied to clipboard')"
|
||||
:active="showCopiedTooltip"
|
||||
always
|
||||
variant="success"
|
||||
position="left"
|
||||
>
|
||||
<o-button
|
||||
variant="primary"
|
||||
icon-right="content-paste"
|
||||
native-type="button"
|
||||
@click="copyURL"
|
||||
@keyup.enter="copyURL"
|
||||
:title="t('Copy URL to clipboard')"
|
||||
/>
|
||||
</o-tooltip>
|
||||
</p>
|
||||
</o-field>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<a
|
||||
:href="twitterShare"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="Twitter"
|
||||
><Twitter :size="48" class="dark:text-white"
|
||||
/></a>
|
||||
<a
|
||||
:href="mastodonShare"
|
||||
class="mastodon"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="Mastodon"
|
||||
>
|
||||
<mastodon-logo />
|
||||
</a>
|
||||
<a
|
||||
:href="facebookShare"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="Facebook"
|
||||
><Facebook :size="48" class="dark:text-white"
|
||||
/></a>
|
||||
<a
|
||||
:href="whatsAppShare"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="WhatsApp"
|
||||
><Whatsapp :size="48" class="dark:text-white"
|
||||
/></a>
|
||||
<a
|
||||
:href="telegramShare"
|
||||
class="telegram"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="Telegram"
|
||||
>
|
||||
<telegram-logo />
|
||||
</a>
|
||||
<a
|
||||
:href="linkedInShare"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="LinkedIn"
|
||||
><LinkedIn :size="48" class="dark:text-white"
|
||||
/></a>
|
||||
<a
|
||||
:href="diasporaShare"
|
||||
class="diaspora"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="Diaspora"
|
||||
>
|
||||
<diaspora-logo />
|
||||
</a>
|
||||
<a
|
||||
:href="emailShare"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
title="Email"
|
||||
>
|
||||
<Email :size="48" class="dark:text-white" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import DiasporaLogo from "./DiasporaLogo.vue";
|
||||
import MastodonLogo from "./MastodonLogo.vue";
|
||||
import TelegramLogo from "./TelegramLogo.vue";
|
||||
import Email from "vue-material-design-icons/Email.vue";
|
||||
import LinkedIn from "vue-material-design-icons/Linkedin.vue";
|
||||
import Whatsapp from "vue-material-design-icons/Whatsapp.vue";
|
||||
import Facebook from "vue-material-design-icons/Facebook.vue";
|
||||
import Twitter from "vue-material-design-icons/Twitter.vue";
|
||||
import {
|
||||
diasporaShareUrl,
|
||||
emailShareUrl,
|
||||
facebookShareUrl,
|
||||
linkedInShareUrl,
|
||||
mastodonShareUrl,
|
||||
telegramShareUrl,
|
||||
twitterShareUrl,
|
||||
whatsAppShareUrl,
|
||||
} from "@/utils/share";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title: string;
|
||||
url: string;
|
||||
text: string;
|
||||
inputLabel: string;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const URLInput = ref<{ $refs: { input: HTMLInputElement } } | null>(null);
|
||||
|
||||
const showCopiedTooltip = ref(false);
|
||||
|
||||
const twitterShare = computed((): string | undefined =>
|
||||
twitterShareUrl(props.url, props.text)
|
||||
);
|
||||
const facebookShare = computed((): string | undefined =>
|
||||
facebookShareUrl(props.url)
|
||||
);
|
||||
const linkedInShare = computed((): string | undefined =>
|
||||
linkedInShareUrl(props.url, props.text)
|
||||
);
|
||||
const whatsAppShare = computed((): string | undefined =>
|
||||
whatsAppShareUrl(props.url, props.text)
|
||||
);
|
||||
const telegramShare = computed((): string | undefined =>
|
||||
telegramShareUrl(props.url, props.text)
|
||||
);
|
||||
const emailShare = computed((): string | undefined =>
|
||||
emailShareUrl(props.url, props.text)
|
||||
);
|
||||
const diasporaShare = computed((): string | undefined =>
|
||||
diasporaShareUrl(props.url, props.text)
|
||||
);
|
||||
const mastodonShare = computed((): string | undefined =>
|
||||
mastodonShareUrl(props.url, props.text)
|
||||
);
|
||||
|
||||
const copyURL = (): void => {
|
||||
URLInput.value?.$refs.input.select();
|
||||
document.execCommand("copy");
|
||||
showCopiedTooltip.value = true;
|
||||
setTimeout(() => {
|
||||
showCopiedTooltip.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.diaspora,
|
||||
.mastodon,
|
||||
.telegram {
|
||||
:deep(span svg) {
|
||||
width: 2.5rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
src/components/Share/TelegramLogo.vue
Normal file
10
src/components/Share/TelegramLogo.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span class="text-primary dark:text-white dark:fill-white">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Telegram</title>
|
||||
<path
|
||||
d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
Reference in New Issue
Block a user