Skip to content

Commit 02ad328

Browse files
roxblnfkroxblnfk
committed
Add component JetBrainsPlugin
1 parent 92413ba commit 02ad328

2 files changed

Lines changed: 132 additions & 0 deletions

File tree

‎.vitepress/theme/JetBrainsPlugin.vue‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<script setup lang="ts">
2+
import { data as jbPlugin } from './jetbrains-plugin.data'
3+
4+
const pluginUrl = `https://plugins.jetbrains.com/plugin/${jbPlugin.pluginId}`
5+
6+
const formatDownloads = (num: number): string => {
7+
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
8+
if (num >= 1000) return (num / 1000).toFixed(1) + 'K'
9+
return num.toString()
10+
}
11+
</script>
12+
13+
<template>
14+
<a :href="pluginUrl" target="_blank" rel="noopener" class="jb-plugin-card">
15+
<span class="jb-plugin-card-gradient"></span>
16+
<span class="jb-plugin-card-body">
17+
<span class="jb-plugin-card-icon">
18+
<svg viewBox="0 0 24 24" width="32" height="32" fill="none">
19+
<rect width="24" height="24" rx="4" fill="#000"/>
20+
<rect x="4" y="17" width="8" height="2" fill="#fff"/>
21+
<text x="4" y="14" font-size="10" font-weight="700" font-family="system-ui, sans-serif" fill="#fff">PS</text>
22+
</svg>
23+
</span>
24+
<span class="jb-plugin-card-content">
25+
<span class="jb-plugin-card-title">Testo for PhpStorm</span>
26+
<span class="jb-plugin-card-meta">
27+
JetBrains Marketplace
28+
<span v-if="jbPlugin.rating" class="jb-plugin-card-rating">
29+
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
30+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
31+
</svg>
32+
{{ jbPlugin.rating.toFixed(1) }}
33+
</span>
34+
<span v-if="jbPlugin.downloads" class="jb-plugin-card-downloads">
35+
{{ formatDownloads(jbPlugin.downloads) }} downloads
36+
</span>
37+
</span>
38+
</span>
39+
<span class="jb-plugin-card-arrow">
40+
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
41+
<path d="M7 17L17 7M17 7H7M17 7v10"/>
42+
</svg>
43+
</span>
44+
</span>
45+
</a>
46+
</template>
47+
48+
<style scoped>
49+
.jb-plugin-card {
50+
display: block;
51+
position: relative;
52+
margin: 24px 0;
53+
border-radius: 12px;
54+
overflow: hidden;
55+
text-decoration: none;
56+
background: var(--vp-c-bg-soft);
57+
border: 1px solid var(--vp-c-divider);
58+
transition: all 0.3s ease;
59+
}
60+
61+
.jb-plugin-card:hover {
62+
border-color: var(--vp-c-divider);
63+
box-shadow: 0 8px 24px rgba(255, 49, 140, 0.1), 0 4px 12px rgba(254, 121, 64, 0.08);
64+
transform: translateY(-2px);
65+
}
66+
67+
.jb-plugin-card-gradient {
68+
position: absolute;
69+
left: 0;
70+
top: 0;
71+
bottom: 0;
72+
width: 4px;
73+
background: linear-gradient(to bottom, #ff318c, #fe7940, #f5df36);
74+
}
75+
76+
.jb-plugin-card-body {
77+
display: flex;
78+
align-items: center;
79+
gap: 16px;
80+
padding: 16px 20px 16px 24px;
81+
}
82+
83+
.jb-plugin-card-icon {
84+
flex-shrink: 0;
85+
display: flex;
86+
}
87+
88+
.jb-plugin-card-content {
89+
flex: 1;
90+
min-width: 0;
91+
}
92+
93+
.jb-plugin-card-title {
94+
display: block;
95+
font-weight: 600;
96+
font-size: 15px;
97+
color: var(--vp-c-text-1);
98+
line-height: 1.4;
99+
}
100+
101+
.jb-plugin-card-meta {
102+
display: flex;
103+
align-items: center;
104+
gap: 12px;
105+
font-size: 13px;
106+
color: var(--vp-c-text-3);
107+
margin-top: 2px;
108+
}
109+
110+
.jb-plugin-card-rating,
111+
.jb-plugin-card-downloads {
112+
display: inline-flex;
113+
align-items: center;
114+
gap: 3px;
115+
}
116+
117+
.jb-plugin-card-rating svg {
118+
color: #f5a623;
119+
}
120+
121+
.jb-plugin-card-arrow {
122+
flex-shrink: 0;
123+
color: var(--vp-c-text-3);
124+
transition: color 0.2s ease;
125+
}
126+
127+
.jb-plugin-card:hover .jb-plugin-card-arrow {
128+
color: var(--vp-c-brand-1);
129+
}
130+
</style>

‎.vitepress/theme/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import BlogSponsor from './BlogSponsor.vue'
66
import GitHubStars from './GitHubStars.vue'
77
import CodeTabs from './CodeTabs.vue'
88
import JetBrainsPluginButton from './JetBrainsPluginButton.vue'
9+
import JetBrainsPlugin from './JetBrainsPlugin.vue'
910
import BlogPosts from './BlogPosts.vue'
1011
import BlogPostHeader from './BlogPostHeader.vue'
1112
import { isBlogPath, getBlogBackLink, localNavBackKey } from '../locales'
@@ -31,6 +32,7 @@ export default {
3132
enhanceApp({ app }) {
3233
app.component('CodeTabs', CodeTabs)
3334
app.component('JetBrainsPluginButton', JetBrainsPluginButton)
35+
app.component('JetBrainsPlugin', JetBrainsPlugin)
3436
app.component('BlogPosts', BlogPosts)
3537
},
3638
} satisfies Theme

0 commit comments

Comments
 (0)