-
Notifications
You must be signed in to change notification settings - Fork 22
/
TmHelpSupport.vue
234 lines (206 loc) · 8.46 KB
/
TmHelpSupport.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<template lang="pug">
div
.container(v-if="$themeConfig && $themeConfig.gutter")
.wrapper
.title(v-if="$themeConfig.gutter.title") {{$themeConfig.gutter.title}}
.links
a(:href="$themeConfig.gutter.chat.url" target="_blank" rel="noreferrer noopener" :style="{'--bg': $themeConfig.gutter.chat.bg}").links__item.links__item__chat
tm-logo-chat(style="fill: white; width: 80px; height: 80px;").links__item__logo
svg(width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg").links__item__icon
path(d="M1.16962 13.7697C0.876728 14.0626 0.876728 14.5374 1.16962 14.8303C1.46252 15.1232 1.93739 15.1232 2.23028 14.8303L1.16962 13.7697ZM15.106 1.95457C15.3989 1.66168 15.3989 1.1868 15.106 0.893912C14.8131 0.601019 14.3382 0.601019 14.0454 0.893913L15.106 1.95457ZM14.9999 1H15.7499V0.25H14.9999V1ZM4.81811 0.25C4.4039 0.25 4.06811 0.585786 4.06811 1C4.06811 1.41421 4.4039 1.75 4.81811 1.75V0.25ZM14.2499 11.1818C14.2499 11.596 14.5857 11.9318 14.9999 11.9318C15.4141 11.9318 15.7499 11.596 15.7499 11.1818H14.2499ZM2.23028 14.8303L15.106 1.95457L14.0454 0.893913L1.16962 13.7697L2.23028 14.8303ZM14.9999 0.25H4.81811V1.75H14.9999V0.25ZM15.7499 11.1818V1H14.2499V11.1818H15.7499Z" fill="white")
div(v-html="md($themeConfig.gutter.chat.title)").links__item__title
div(v-html="md($themeConfig.gutter.chat.text)").links__item__text
a(:href="$themeConfig.gutter.forum.url" target="_blank" rel="noreferrer noopener" :style="{'--bg': $themeConfig.gutter.forum.bg}").links__item.links__item__forum
component(:is="`tm-logo-${$themeConfig.gutter.forum.logo}`" style="fill: white; width: 80px; height: 80px;").links__item__logo
svg(width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg").links__item__icon
path(d="M1.16962 13.7697C0.876728 14.0626 0.876728 14.5374 1.16962 14.8303C1.46252 15.1232 1.93739 15.1232 2.23028 14.8303L1.16962 13.7697ZM15.106 1.95457C15.3989 1.66168 15.3989 1.1868 15.106 0.893912C14.8131 0.601019 14.3382 0.601019 14.0454 0.893913L15.106 1.95457ZM14.9999 1H15.7499V0.25H14.9999V1ZM4.81811 0.25C4.4039 0.25 4.06811 0.585786 4.06811 1C4.06811 1.41421 4.4039 1.75 4.81811 1.75V0.25ZM14.2499 11.1818C14.2499 11.596 14.5857 11.9318 14.9999 11.9318C15.4141 11.9318 15.7499 11.596 15.7499 11.1818H14.2499ZM2.23028 14.8303L15.106 1.95457L14.0454 0.893913L1.16962 13.7697L2.23028 14.8303ZM14.9999 0.25H4.81811V1.75H14.9999V0.25ZM15.7499 11.1818V1H14.2499V11.1818H15.7499Z" fill="white")
div(v-html="md($themeConfig.gutter.forum.title)").links__item__title
div(v-html="md($themeConfig.gutter.forum.text)").links__item__text
a(:href="editLink" target="_blank" rel="noreferrer noopener").links__item.links__item__regular
tm-icon-paper-pen(fill="var(--color-link)" style="width: 80px; height: 80px;").links__item__logo
svg(width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg").links__item__icon
path(d="M1.16962 13.7697C0.876728 14.0626 0.876728 14.5374 1.16962 14.8303C1.46252 15.1232 1.93739 15.1232 2.23028 14.8303L1.16962 13.7697ZM15.106 1.95457C15.3989 1.66168 15.3989 1.1868 15.106 0.893912C14.8131 0.601019 14.3382 0.601019 14.0454 0.893913L15.106 1.95457ZM14.9999 1H15.7499V0.25H14.9999V1ZM4.81811 0.25C4.4039 0.25 4.06811 0.585786 4.06811 1C4.06811 1.41421 4.4039 1.75 4.81811 1.75V0.25ZM14.2499 11.1818C14.2499 11.596 14.5857 11.9318 14.9999 11.9318C15.4141 11.9318 15.7499 11.596 15.7499 11.1818H14.2499ZM2.23028 14.8303L15.106 1.95457L14.0454 0.893913L1.16962 13.7697L2.23028 14.8303ZM14.9999 0.25H4.81811V1.75H14.9999V0.25ZM15.7499 11.1818V1H14.2499V11.1818H15.7499Z" fill="black")
div(v-html="md($themeConfig.gutter.github.title)").links__item__title
div(v-html="md($themeConfig.gutter.github.text)" style="color: rgba(22, 25, 49, 0.65)").links__item__text
.newsletter(v-if="$themeConfig.label == 'sdk'")
.newsletter__image
.newsletter__image__item(v-for="(item, index) in range(15)" :class="[`letter__${index}`]")
image-letter
.newsletter__form
tm-newsletter-form
</template>
<style lang="stylus" scoped>
.newsletter
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05)
margin-top 4rem
margin-bottom 1rem
overflow hidden
min-height 200px
border-radius 0.5rem
position relative
display flex
align-items center
justify-content flex-end
&:hover &__image__item
opacity 0.25
transform scale(0.98)
&:hover &__image__item.letter__10
transform scale(1.5) rotate(25deg)
opacity 1
&__image
transform translate(-125px, -35px) rotate(-25deg)
display grid
width 300px
gap 1rem
grid-template-columns repeat(4, 1fr)
position absolute
left 0
top 0
&__item
opacity 0.5
transition all 0.5s
&.letter__10
opacity 1
background white
&__form
margin-left 250px
padding 30px
width 100%
/deep/
a[href]
color var(--color-link)
strong
font-weight 700
strong
font-weight 600
.container
background var(--sidebar-bg)
.wrapper
max-width calc(1400px - var(--sidebar-width))
.title
font-size 2rem
color var(--color-text, black)
padding 1.5rem 0
font-weight 700
.links
display grid
margin-top 1rem
gap 2rem
grid-template-columns repeat(auto-fit, minmax(250px, 1fr))
&__item
display flex
flex-direction column
align-items center
box-shadow 0px 2px 4px rgba(22, 25, 49, 0.05), 0px 0px 1px rgba(22, 25, 49, 0.2), 0px 0.5px 0px rgba(22, 25, 49, 0.05)
text-align center
border-radius 0.5rem
padding 2rem
line-height 1.25rem
background var(--bg)
transition box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.4s ease-out
position relative
&__icon
position absolute
top 0
right 0
padding 1rem
width 1rem
height 1rem
opacity .26
transition opacity .15s
&:hover &__icon
opacity .36
&__text
font-size .875rem
line-height 1.25rem
&:hover:not(:active),
&:focus:not(:active)
box-shadow 0px 12px 24px rgba(22, 25, 49, 0.07), 0px 4px 8px rgba(22, 25, 49, 0.05), 0px 1px 0px rgba(22, 25, 49, 0.05)
transform translateY(-2px)
transition-duration 0.1s
&:active
opacity 0.7
transition-duration 0s
&__title
margin-top 1.5rem
margin-bottom 0.75rem
font-size 1.25rem
line-height 1.75rem
font-weight 600
a.links__item
color white
a.links__item__regular
color var(--color-text, black)
background rgba(176, 180, 207, 0.09)
@media screen and (max-width: 832px)
.newsletter
height initial
&__form
margin-top 250px
margin-left initial
grid-template-columns 1fr
</style>
<script>
import { range } from "lodash";
const endingSlashRE = /\/$/;
const outboundRE = /^[a-z]+:/i;
export default {
computed: {
editLink() {
if (this.$page.frontmatter.editLink === false) {
return;
}
const {
repo,
editLinks,
docsDir = "",
docsBranch = "master",
docsRepo = repo
} = this.$site.themeConfig;
if (docsRepo && editLinks && this.$page.relativePath) {
return this.createEditLink(
repo,
docsRepo,
docsDir,
docsBranch,
this.$page.relativePath
);
}
},
editLinkText() {
return (
this.$themeLocaleConfig.editLinkText ||
this.$site.themeConfig.editLinkText ||
`Edit this page`
);
}
},
methods: {
createEditLink(repo, docsRepo, docsDir, docsBranch, path) {
const bitbucket = /bitbucket.org/;
if (bitbucket.test(repo)) {
const base = outboundRE.test(docsRepo) ? docsRepo : repo;
return (
base.replace(endingSlashRE, "") +
`/src` +
`/${docsBranch}/` +
(docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
path +
`?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
);
}
const base = outboundRE.test(docsRepo)
? docsRepo
: `https://github.com/${docsRepo}`;
return (
base.replace(endingSlashRE, "") +
`/edit` +
`/${docsBranch}/` +
(docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
path
);
},
range
}
};
</script>