Skip to content

Commit 9c5d269

Browse files
phananphanan
authored
Migrate Partners page (#53)
* feat: migrate Partners page * fix a typo * no target=_blank please * Use an icon for Proficiencies
1 parent c873c6b commit 9c5d269

File tree

9 files changed

+502
-43
lines changed

9 files changed

+502
-43
lines changed

‎src/.vuepress/components/common/social-icon.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<a :href="url" :title="type">
3+
<i class="fa" :class="extraClass"/>
4+
<span class="sr-only">{{ type }}</span>
5+
</a>
6+
</template>
7+
8+
<script>
9+
const SOCIAL_ICON_CLASS_MAP = {
10+
Email: 'fa-envelope',
11+
GitHub: 'fa-github',
12+
Twitter: 'fa-twitter-square',
13+
LinkedIn: 'fa-linkedin-square',
14+
YouTube: 'fa-youtube-square',
15+
Facebook: 'fa-facebook-square',
16+
Instagram: 'fa-instagram',
17+
CodePen: 'fa-codepen'
18+
}
19+
20+
export default {
21+
props: {
22+
url: {
23+
type: String,
24+
required: true
25+
},
26+
27+
type: {
28+
type: String,
29+
required: true,
30+
validator: value => Object.keys(SOCIAL_ICON_CLASS_MAP).includes(value)
31+
}
32+
},
33+
34+
computed: {
35+
extraClass () {
36+
return SOCIAL_ICON_CLASS_MAP[this.type]
37+
}
38+
}
39+
}
40+
</script>
41+
42+
<style lang="scss" scoped>
43+
.fa {
44+
&-github, &-codepen, &-envelope {
45+
color: #000;
46+
}
47+
48+
&-twitter, &-twitter-square {
49+
color: #1da1f3;
50+
}
51+
52+
&-linkedin, &-linkedin-square {
53+
color: #0077b5;
54+
}
55+
56+
&-facebook, &-facebook-square {
57+
color: #3b5998;
58+
}
59+
60+
&-youtube, &-youtube-play, &-youtube-square {
61+
color: #f00;
62+
}
63+
64+
&-instagram {
65+
color: #c13584;
66+
}
67+
}
68+
</style>

‎src/.vuepress/components/community/partners/index.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<main>
3+
<PartnerItem v-for="partner in partners" :key="partner.name" :partner="partner"/>
4+
</main>
5+
</template>
6+
7+
<script>
8+
import partners from './partners'
9+
10+
export default {
11+
components: {
12+
PartnerItem: () => import('./partner-item')
13+
},
14+
15+
data: () => ({
16+
partners
17+
})
18+
}
19+
</script>

‎src/.vuepress/components/community/partners/partner-item.vue

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<template>
2+
<div class="partner">
3+
<div class="logo">
4+
<a :href="partner.urlLink">
5+
<img :alt="`${partner.name}'s logo`" :src="logo" width="125" height="auto">
6+
</a>
7+
</div>
8+
<div class="profile">
9+
<p class="description">{{ partner.description }}</p>
10+
<dl>
11+
<dt>
12+
<i class="fa fa-link"></i>
13+
<span class="sr-only">Link</span>
14+
</dt>
15+
<dd>
16+
<a :href="partner.urlLink">{{ partner.urlText }}</a>
17+
</dd>
18+
19+
<dt>
20+
<i class="fa fa-map-marker"></i>
21+
<span class="sr-only">Location</span>
22+
</dt>
23+
<dd>{{ partner.location }}</dd>
24+
25+
<dt>
26+
<i class="fa fa-globe"></i>
27+
<span class="sr-only">Languages</span>
28+
</dt>
29+
<dd class="language-list">
30+
<ul>
31+
<li v-for="language in languages" :key="language">{{ language }}</li>
32+
</ul>
33+
</dd>
34+
35+
<dt title="Proficiencies">
36+
<i class="fa fa-briefcase"></i>
37+
<span class="sr-only">Proficiencies</span>
38+
</dt>
39+
<dd class="proficiency-list">
40+
<ul>
41+
<li v-for="proficiency in partner.proficiencies" :key="proficiency.name">
42+
<a v-if="proficiency.url" :href="proficiency.url">
43+
{{ proficiency.name }}
44+
</a>
45+
<template v-else>{{ proficiency.name }}</template>
46+
</li>
47+
</ul>
48+
</dd>
49+
50+
<dd class="social">
51+
<SocialIcon v-if="partner.email" type="Email" :url="mailHref"/>
52+
<SocialIcon v-for="link in partner.socialLinks" :key="link.name" :type="link.name" :url="link.url"/>
53+
</dd>
54+
</dl>
55+
</div>
56+
</div>
57+
</template>
58+
59+
<script>
60+
export default {
61+
props: {
62+
partner: Object
63+
},
64+
65+
components: {
66+
SocialIcon: () => import('../../common/social-icon')
67+
},
68+
69+
computed: {
70+
languages () {
71+
return [].concat(this.partner.languages)
72+
},
73+
74+
mailHref () {
75+
return `mailto:${this.partner.email}?subject=Hire ${this.partner.name}`
76+
},
77+
78+
logo () {
79+
if (/(https:\/\/|\/).*/.test(this.partner.logo)) {
80+
return this.partner.logo
81+
}
82+
83+
return `/images/partners/${this.partner.logo}`
84+
}
85+
}
86+
}
87+
</script>
88+
89+
<style lang="scss" scoped>
90+
.partner {
91+
display: flex;
92+
padding: 25px 0;
93+
94+
&:first-of-type {
95+
margin-top: 0.6em;
96+
}
97+
98+
&+.partner {
99+
border-top: 1px dotted #ddd;
100+
}
101+
}
102+
103+
.logo {
104+
flex: 0 0 125px;
105+
}
106+
107+
.profile {
108+
padding: 0 26px;
109+
flex: 1;
110+
111+
p {
112+
margin-top: 0;
113+
}
114+
115+
ul, li, dd, dt {
116+
display: inline;
117+
padding: 0;
118+
margin: 0;
119+
line-height: 1.3;
120+
}
121+
122+
dl {
123+
margin: 0.6em 0 0;
124+
}
125+
126+
dt {
127+
text-transform: uppercase;
128+
font-size: 0.84em;
129+
font-weight: 600;
130+
min-width: 1.2em;
131+
margin-right: 0.5em;
132+
display: inline-block;
133+
}
134+
135+
dd {
136+
font-weight: 600;
137+
138+
&::after {
139+
display: block;
140+
content: '';
141+
margin-top: 0.6em;
142+
}
143+
}
144+
145+
li+li::before {
146+
display: inline-block;
147+
content: '·';
148+
margin: 0 0.4em;
149+
}
150+
}
151+
152+
dd.proficiency-list {
153+
line-height: 1.6;
154+
}
155+
156+
dd.social {
157+
margin-top: 1.2em;
158+
display: block;
159+
160+
a {
161+
display: inline-block;
162+
margin-right: 0.3em;
163+
font-size: 1.3em;
164+
text-decoration: none;
165+
}
166+
}
167+
</style>

0 commit comments

Comments
 (0)