Skip to content

Commit b31724c

Browse files
antonreshetovantonreshetov
committed
refactor: use assets download component
1 parent 4320c6c commit b31724c

File tree

4 files changed

+133
-51
lines changed

4 files changed

+133
-51
lines changed

‎docs/.vitepress/components/global/AssetsDownload.vue

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<h2>macOS</h2>
3+
4+
<VPButton
5+
:href="assets.macM1"
6+
theme="brand"
7+
text="Download for Apple Silicon"
8+
@click="onShowDialog"
9+
/>
10+
11+
<p>macOS 11.0+</p>
12+
13+
<VPButton
14+
:href="assets.mac"
15+
theme="brand"
16+
text="Download for Intel"
17+
@click="onShowDialog"
18+
/>
19+
20+
<p>macOS 10.13+</p>
21+
22+
<h2>Windows</h2>
23+
24+
<VPButton
25+
:href="assets.win"
26+
theme="brand"
27+
text="Download for Windows"
28+
@click="onShowDialog"
29+
/>
30+
31+
<p>Windows 10, 11</p>
32+
33+
<h2>Linux</h2>
34+
35+
<VPButton
36+
:href="assets.linux"
37+
theme="brand"
38+
text="Download for Linux"
39+
@click="onShowDialog"
40+
/>
41+
42+
<p>Ubuntu</p>
43+
44+
<ClientOnly>
45+
<ElDialog
46+
v-model="isShowDialog"
47+
title="Pay what you want"
48+
>
49+
<p>Name your price, or leave $0 to get massCode for free</p>
50+
<ElInput
51+
v-model="price"
52+
style="margin-bottom: 24px"
53+
size="large"
54+
type="number"
55+
placeholder="0"
56+
>
57+
<template #prepend>
58+
$
59+
</template>
60+
</ElInput>
61+
<VPButton
62+
:text="dialogButtonText"
63+
@click="onDownloadAssets"
64+
/>
65+
</ElDialog>
66+
</ClientOnly>
67+
</template>
68+
69+
<script setup lang="ts">
70+
import { ElDialog, ElInput } from 'element-plus'
71+
import { useDownloadAssets } from '../../composables'
72+
import assets from '../../_data/assets.json'
73+
74+
import 'element-plus/theme-chalk/base.css'
75+
import 'element-plus/theme-chalk/el-overlay.css'
76+
import 'element-plus/theme-chalk/el-dialog.css'
77+
import 'element-plus/theme-chalk/el-input.css'
78+
79+
const {
80+
isShowDialog,
81+
price,
82+
dialogButtonText,
83+
onDownloadAssets,
84+
onShowDialog
85+
} = useDownloadAssets()
86+
</script>
87+
88+
<style lang="scss" scoped></style>

‎docs/.vitepress/composables/index.ts

+40-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { onBeforeUnmount, onMounted, ref } from 'vue'
1+
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
22

33
export const useDark = () => {
44
const isDark = ref(false)
@@ -25,3 +25,42 @@ export const useDark = () => {
2525
return { isDark }
2626
}
2727

28+
export const useDownloadAssets = () => {
29+
const isShowDialog = ref(false)
30+
const price = ref()
31+
const url = ref()
32+
const dialogButtonText = computed(() => price.value > 0 ? 'Donate' : 'Download')
33+
34+
const onShowDialog = (e: Event) => {
35+
e.preventDefault()
36+
37+
const target = e.target as HTMLAnchorElement
38+
39+
url.value = target.href
40+
isShowDialog.value = true
41+
}
42+
43+
const onDownloadAssets = () => {
44+
const a = document.createElement('a')
45+
46+
if (price.value > 0) {
47+
a.href = `https://antonreshetov.gumroad.com/l/masscode?price=${price.value}`
48+
}
49+
else {
50+
a.href = url.value
51+
a.setAttribute('download', '')
52+
}
53+
54+
a.click()
55+
isShowDialog.value = false
56+
}
57+
58+
return {
59+
dialogButtonText,
60+
onShowDialog,
61+
onDownloadAssets,
62+
price,
63+
isShowDialog
64+
}
65+
}
66+

‎docs/.vitepress/theme/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import DefaultTheme from 'vitepress/theme'
22
import type { EnhanceAppContext } from 'vitepress'
33
import VueGtag, { pageview } from 'vue-gtag'
44
import { h, watch } from 'vue'
5+
import VPButton from 'vitepress/client/theme-default/components/VPButton.vue'
56
import AppLink from '../components/global/AppLink.vue'
67
import AppVersion from '../components/global/AppVersion.vue'
78
import CodeEditor from '../components/global/CodeEditor.vue'
89
import CodePreview from '../components/global/CodePreview.vue'
910
import CollectionPreview from '../components/global/CollectionPreview.vue'
1011
import SidebarSponsors from '../components/sponsors/SidebarSponsors.vue'
12+
import AssetsDownload from '../components/global/AssetsDownload.vue'
1113

1214
import './styles.scss'
1315

@@ -24,6 +26,8 @@ export default {
2426
context.app.component('CodeEditor', CodeEditor)
2527
context.app.component('CodePreview', CodePreview)
2628
context.app.component('CollectionPreview', CollectionPreview)
29+
context.app.component('AssetsDownload', AssetsDownload)
30+
context.app.component('VPButton', VPButton)
2731

2832
context.app.use(VueGtag, {
2933
config: { id: import.meta.env.VITE_GA }

‎docs/download/index.md

+1-50
Original file line numberDiff line numberDiff line change
@@ -28,57 +28,8 @@ Windows 10, 11
2828

2929
<VPButton @click="onShowDialog" :href="assets.linux" theme="brand" text="Download for Linux" />
3030

31-
Ubuntu
32-
33-
<ClientOnly>
34-
<ElDialog v-model="isShowDialog" title="Pay what you want">
35-
<p>Name your price, or leave $0 to get massCode for free</p>
36-
<ElInput
37-
v-model="price"
38-
style="margin-bottom: 24px;"
39-
size="large"
40-
type="number"
41-
placeholder="0">
42-
<template #prepend>$</template>
43-
</ElInput>
44-
<VPButton @click="onDownload" :text="buttonText"></VPButton>
45-
</ElDialog>
46-
</ClientOnly>
31+
# Select your platform
4732

4833
<script setup lang="ts">
49-
import { ref, computed } from 'vue'
50-
import VPButton from 'vitepress/client/theme-default/components/VPButton.vue'
5134
import assets from '../.vitepress/_data/assets.json'
52-
53-
import { ElInput, ElDialog } from 'element-plus'
54-
55-
import 'element-plus/theme-chalk/base.css'
56-
import 'element-plus/theme-chalk/el-overlay.css'
57-
import 'element-plus/theme-chalk/el-dialog.css'
58-
import 'element-plus/theme-chalk/el-input.css'
59-
60-
const isShowDialog = ref(false)
61-
const price = ref()
62-
const url = ref()
63-
const buttonText = computed(() => price.value > 0 ? 'Donate' : 'Download')
64-
65-
const onShowDialog = (e) => {
66-
e.preventDefault()
67-
url.value = e.target.href
68-
isShowDialog.value = true
69-
}
70-
71-
const onDownload = (e) => {
72-
const a = document.createElement('a')
73-
74-
if (price.value > 0) {
75-
a.href = `https://antonreshetov.gumroad.com/l/masscode?price=${price.value}`
76-
} else {
77-
a.href = url.value
78-
a.download = true
79-
}
80-
81-
a.click()
82-
isShowDialog.value = false
83-
}
8435
</script>

0 commit comments

Comments
 (0)