Add Mastodon as a sharing provider
Closes #227 Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
4a63ff4487
commit
c5b9a98334
@ -53,6 +53,14 @@
|
||||
<a :href="twitterShareUrl" target="_blank" rel="nofollow noopener"
|
||||
><b-icon icon="twitter" size="is-large" type="is-primary"
|
||||
/></a>
|
||||
<a
|
||||
:href="mastodonShareUrl"
|
||||
class="mastodon"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
>
|
||||
<mastodon-logo />
|
||||
</a>
|
||||
<a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"
|
||||
><b-icon icon="facebook" size="is-large" type="is-primary"
|
||||
/></a>
|
||||
@ -81,10 +89,12 @@ import { Component, Prop, Vue, Ref } from "vue-property-decorator";
|
||||
import { EventStatus, EventVisibility } from "@/types/enums";
|
||||
import { IEvent } from "../../types/event.model";
|
||||
import DiasporaLogo from "../Share/DiasporaLogo.vue";
|
||||
import MastodonLogo from "../Share/MastodonLogo.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
DiasporaLogo,
|
||||
MastodonLogo,
|
||||
},
|
||||
})
|
||||
export default class ShareEventModal extends Vue {
|
||||
@ -129,6 +139,16 @@ export default class ShareEventModal extends Vue {
|
||||
)}&url=${encodeURIComponent(this.event.url)}`;
|
||||
}
|
||||
|
||||
get mastodonShareUrl(): string {
|
||||
return `https://toot.karamoff.dev/?text=${encodeURIComponent(
|
||||
this.basicTextToEncode
|
||||
)}`;
|
||||
}
|
||||
|
||||
get basicTextToEncode(): string {
|
||||
return `${this.event.title}\r\n${this.event.url}`;
|
||||
}
|
||||
|
||||
copyURL(): void {
|
||||
this.eventURLInput.$refs.input.select();
|
||||
document.execCommand("copy");
|
||||
@ -140,8 +160,10 @@ export default class ShareEventModal extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.diaspora span svg {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
.diaspora,
|
||||
.mastodon {
|
||||
::v-deep span svg {
|
||||
width: 2.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,6 +43,14 @@
|
||||
<a :href="twitterShareUrl" target="_blank" rel="nofollow noopener"
|
||||
><b-icon icon="twitter" size="is-large" type="is-primary"
|
||||
/></a>
|
||||
<a
|
||||
:href="mastodonShareUrl"
|
||||
class="mastodon"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
>
|
||||
<mastodon-logo />
|
||||
</a>
|
||||
<a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"
|
||||
><b-icon icon="facebook" size="is-large" type="is-primary"
|
||||
/></a>
|
||||
@ -70,11 +78,13 @@
|
||||
import { Component, Prop, Vue, Ref } from "vue-property-decorator";
|
||||
import { GroupVisibility } from "@/types/enums";
|
||||
import DiasporaLogo from "../Share/DiasporaLogo.vue";
|
||||
import MastodonLogo from "../Share/MastodonLogo.vue";
|
||||
import { displayName, IGroup } from "@/types/actor";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
DiasporaLogo,
|
||||
MastodonLogo,
|
||||
},
|
||||
})
|
||||
export default class ShareGroupModal extends Vue {
|
||||
@ -116,6 +126,16 @@ export default class ShareGroupModal extends Vue {
|
||||
)}&url=${encodeURIComponent(this.group.url)}`;
|
||||
}
|
||||
|
||||
get mastodonShareUrl(): string {
|
||||
return `https://toot.karamoff.dev/?text=${encodeURIComponent(
|
||||
this.basicTextToEncode
|
||||
)}`;
|
||||
}
|
||||
|
||||
get basicTextToEncode(): string {
|
||||
return `${displayName(this.group)}\r\n${this.group.url}`;
|
||||
}
|
||||
|
||||
copyURL(): void {
|
||||
this.groupURLInput.$refs.input.select();
|
||||
document.execCommand("copy");
|
||||
@ -127,8 +147,10 @@ export default class ShareGroupModal extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.diaspora span svg {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
.diaspora,
|
||||
.mastodon {
|
||||
::v-deep span svg {
|
||||
width: 2.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
25
js/src/components/Share/MastodonLogo.vue
Normal file
25
js/src/components/Share/MastodonLogo.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<span class="icon has-text-primary is-large">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="61.076954mm"
|
||||
height="65.47831mm"
|
||||
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>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class DiasporaLogo extends Vue {}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user