Skip to content

Commit 780b9f0

Browse files
HerringtonDarkholmeHerringtonDarkholme
committed
feat: move rule item out
1 parent 6fb5853 commit 780b9f0

File tree

4 files changed

+124
-89
lines changed

4 files changed

+124
-89
lines changed

‎website/_data/catalog.data.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createContentLoader, type ContentData } from 'vitepress'
22
import { ExampleLangs } from '../src/catalog/data'
33
import { loadAll, JSON_SCHEMA } from 'js-yaml'
44

5-
interface RuleMeta {
5+
export interface RuleMeta {
66
id: string
77
name: string
88
type: string

‎website/src/catalog/RuleItem.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script setup lang="ts">
2+
import { type RuleMeta, languages } from './data'
3+
import { type PropType, computed } from 'vue'
4+
5+
const { meta } = defineProps({
6+
meta: {
7+
type: Object as PropType<RuleMeta>,
8+
required: true,
9+
}
10+
})
11+
const displayRuleCount = computed(() => {
12+
const maxRule = meta.features.length > 0 ? 2 : 5
13+
return Math.min(meta.rules.length, maxRule)
14+
})
15+
const displayedRules = computed(() => meta.rules.slice(0, displayRuleCount.value))
16+
const moreRules = computed(() => meta.rules.length - displayRuleCount.value)
17+
const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
18+
</script>
19+
20+
<template>
21+
<li class="rule-item">
22+
<div class="rule-header">
23+
<a :href="meta.link" class="rule-name" target="_blank">{{ meta.name }}</a>
24+
<div class="rule-badges">
25+
<a :href="`/catalog/${meta.language}/`">
26+
<Badge type="info" :text="languages[meta.language]" />
27+
</a>
28+
<Badge v-if="meta.hasFix" type="tip" text="🛠️ Fix" />
29+
</div>
30+
</div>
31+
<div class="rule-details">
32+
<div class="rule-badges">
33+
<Badge v-if="meta.type === 'Pattern'" type="info" text="Simple Pattern Example" />
34+
<template v-else>
35+
📏<span class="emoji-offset"/>
36+
<code class="used" v-for="rule in displayedRules">
37+
{{ rule }}
38+
</code>
39+
<code class="used" v-if="moreRules">
40+
+{{ moreRules }}
41+
</code>
42+
</template>
43+
</div>
44+
<div class="rule-badges" v-if="meta.features.length > 0">
45+
💡
46+
<code class="used" v-for="feature in meta.features">
47+
{{ feature }}
48+
</code>
49+
<code class="used" v-if="moreFeatures">
50+
+{{ moreFeatures }}
51+
</code>
52+
</div>
53+
<a :href="meta.playgroundLink" class="playground-link" target="_blank">
54+
Try in Playground →
55+
</a>
56+
</div>
57+
</li>
58+
</template>
59+
60+
<style scoped>
61+
a {
62+
text-decoration: none;
63+
}
64+
a:hover {
65+
text-decoration: underline;
66+
}
67+
.rule-item {
68+
border: 1px solid var(--vp-c-divider);
69+
border-radius: 8px;
70+
padding: 1rem;
71+
}
72+
73+
.rule-header {
74+
display: flex;
75+
justify-content: space-between;
76+
margin-bottom: 12px;
77+
}
78+
79+
.rule-name {
80+
font-weight: 600;
81+
}
82+
83+
.rule-badges {
84+
display: flex;
85+
gap: 4px;
86+
}
87+
88+
.rule-details {
89+
display: flex;
90+
justify-content: space-between;
91+
align-items: center;
92+
}
93+
94+
.rule-details > div {
95+
flex: 1;
96+
}
97+
98+
.used {
99+
filter: saturate(0);
100+
user-select: none;
101+
height: 24px;
102+
line-height: 24px;
103+
padding-top: 0;
104+
}
105+
106+
.playground-link {
107+
font-size: 0.8em;
108+
color: var(--vp-button-brand-bg);
109+
filter: brightness(1.1);
110+
}
111+
.playground-link:hover {
112+
color: var(--vp-button-brand-bg);
113+
filter: brightness(1.35);
114+
}
115+
.emoji-offset {
116+
/* Offset emoji visual spacing */
117+
margin-right: -2px;
118+
}
119+
</style>

‎website/src/catalog/RuleList.vue‎

Lines changed: 3 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
2-
import { type Filter, getRuleMetaData, languages } from './data'
2+
import { type Filter, getRuleMetaData } from './data'
33
import { computed, type PropType } from 'vue'
4-
import { } from 'vitepress'
4+
import RuleItem from './RuleItem.vue'
55
66
const props = defineProps({
77
filter: {
@@ -17,102 +17,17 @@ const ruleMetaData = computed(() => getRuleMetaData(props.filter))
1717
<h3>Rule List</h3>
1818
<br/>
1919
<TransitionGroup class="rule-list" tag="ul">
20-
<li v-for="meta in ruleMetaData" :key="meta.language + meta.id" class="rule-item">
21-
<div class="rule-header">
22-
<a :href="meta.link" class="rule-name" target="_blank">{{ meta.name }}</a>
23-
<div class="rule-badges">
24-
<a :href="`/catalog/${meta.language}/`">
25-
<Badge type="info" :text="languages[meta.language]" />
26-
</a>
27-
<Badge v-if="meta.hasFix" type="tip" text="🛠️ Fix" />
28-
</div>
29-
</div>
30-
<div class="rule-details">
31-
<div class="rule-badges">
32-
<Badge v-if="meta.type === 'Pattern'" type="info" text="Simple Pattern Example" />
33-
<template v-else>
34-
📏
35-
<code class="used" v-for="r in meta.rules.slice(0, 2)">
36-
{{ r }}
37-
</code>
38-
</template>
39-
</div>
40-
<div class="rule-badges" v-if="meta.features.length > 0">
41-
💡
42-
<code class="used" v-for="feature in meta.features">
43-
{{ feature }}
44-
</code>
45-
</div>
46-
<a :href="meta.playgroundLink" class="playground-link" target="_blank">
47-
Try in Playground →
48-
</a>
49-
</div>
50-
</li>
20+
<RuleItem v-for="meta in ruleMetaData" :key="meta.language + meta.id" :meta="meta"/>
5121
</TransitionGroup>
5222
</template>
5323

5424
<style scoped>
55-
a {
56-
text-decoration: none;
57-
}
58-
a:hover {
59-
text-decoration: underline;
60-
}
6125
.rule-list {
6226
list-style: none;
6327
padding: 0;
6428
margin: 0;
6529
}
6630
67-
.rule-item {
68-
border: 1px solid var(--vp-c-divider);
69-
border-radius: 8px;
70-
padding: 1rem;
71-
}
72-
73-
.rule-header {
74-
display: flex;
75-
justify-content: space-between;
76-
margin-bottom: 12px;
77-
}
78-
79-
.rule-name {
80-
font-weight: 600;
81-
}
82-
83-
.rule-badges {
84-
display: flex;
85-
gap: 0.2em;
86-
}
87-
88-
.rule-details {
89-
display: flex;
90-
justify-content: space-between;
91-
align-items: center;
92-
}
93-
94-
.rule-details > div {
95-
flex: 1;
96-
}
97-
98-
.used {
99-
filter: saturate(0);
100-
user-select: none;
101-
height: 24px;
102-
line-height: 24px;
103-
padding-top: 0;
104-
}
105-
106-
.playground-link {
107-
font-size: 0.8em;
108-
color: var(--vp-button-brand-bg);
109-
filter: brightness(1.1);
110-
}
111-
.playground-link:hover {
112-
color: var(--vp-button-brand-bg);
113-
filter: brightness(1.35);
114-
}
115-
11631
.v-move,
11732
.v-enter-active,
11833
.v-leave-active {

‎website/src/catalog/data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { data as allRules } from '../../_data/catalog.data'
2+
export type { RuleMeta } from '../../_data/catalog.data'
23

34
export function getRuleMetaData(filter: Filter) {
45
const {

0 commit comments

Comments
 (0)