Skip to content

Commit 13071fb

Browse files
yyx990803yyx990803
committed
api index no match
1 parent ddecbe2 commit 13071fb

File tree

2 files changed

+199
-172
lines changed

2 files changed

+199
-172
lines changed

‎src/api/ApiIndex.vue

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<script setup lang="ts">
2+
import apiIndex from './index.json'
3+
import { ref, computed } from 'vue'
4+
5+
const query = ref('')
6+
7+
const filtered = computed(() => {
8+
const q = query.value
9+
return apiIndex
10+
.map((section) => {
11+
const items = section.items
12+
.map(({ text, link, headers }) => {
13+
headers = headers.filter((h) => {
14+
return h.toLowerCase().includes(q.toLowerCase())
15+
})
16+
return headers.length ? { text, link, headers } : null
17+
})
18+
.filter((i) => i)
19+
return items.length ? { text: section.text, items } : null
20+
})
21+
.filter((i) => i)
22+
})
23+
24+
// same as vitepress' slugify logic
25+
function slugify(text) {
26+
return (
27+
text
28+
// Replace special characters
29+
.replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
30+
// Remove continuous separators
31+
.replace(/\-{2,}/g, '-')
32+
// Remove prefixing and trailing separators
33+
.replace(/^\-+|\-+$/g, '')
34+
// ensure it doesn't start with a number (#121)
35+
.replace(/^(\d)/, '_$1')
36+
// lowercase
37+
.toLowerCase()
38+
)
39+
}
40+
</script>
41+
42+
<template>
43+
<div id="api-index">
44+
<div class="header">
45+
<h1>API Reference</h1>
46+
<input class="api-filter" placeholder="Filter" v-model="query" />
47+
</div>
48+
49+
<div v-for="section of filtered" class="api-section">
50+
<h2>{{ section.text }}</h2>
51+
<div class="api-groups">
52+
<div v-for="item of section.items" class="api-group">
53+
<h3>{{ item.text }}</h3>
54+
<ul>
55+
<li v-for="h of item.headers">
56+
<a :href="item.link + '.html#' + slugify(h)">{{ h }}</a>
57+
</li>
58+
</ul>
59+
</div>
60+
</div>
61+
</div>
62+
63+
<div v-if="!filtered.length" class="no-match">
64+
No API matching "{{ query }}" found.
65+
</div>
66+
</div>
67+
</template>
68+
69+
<style scoped>
70+
#api-index {
71+
max-width: 1024px;
72+
margin: 0px auto;
73+
padding: 64px 32px;
74+
}
75+
76+
h1,
77+
h2,
78+
h3 {
79+
font-weight: 600;
80+
line-height: 1;
81+
}
82+
83+
h1,
84+
h2 {
85+
letter-spacing: -0.02em;
86+
}
87+
88+
h1 {
89+
font-size: 38px;
90+
}
91+
92+
h2 {
93+
font-size: 24px;
94+
color: var(--vt-c-text-1);
95+
margin: 36px 0;
96+
transition: color 0.5s;
97+
padding-top: 36px;
98+
border-top: 1px solid var(--vt-c-divider-light);
99+
}
100+
101+
h3 {
102+
letter-spacing: -0.01em;
103+
color: var(--vt-c-green);
104+
font-size: 18px;
105+
margin-bottom: 1em;
106+
transition: color 0.5s;
107+
}
108+
109+
.api-section {
110+
margin-bottom: 64px;
111+
}
112+
113+
.api-groups a {
114+
font-size: 15px;
115+
font-weight: 500;
116+
line-height: 2;
117+
color: var(--vt-c-text-code);
118+
transition: color 0.5s;
119+
}
120+
121+
.dark api-groups a {
122+
font-weight: 400;
123+
}
124+
125+
.api-groups a:hover {
126+
color: var(--vt-c-green);
127+
transition: none;
128+
}
129+
130+
.api-group {
131+
break-inside: avoid;
132+
margin-bottom: 20px;
133+
background-color: var(--vt-c-bg-soft);
134+
border-radius: 8px;
135+
padding: 28px 32px;
136+
transition: background-color 0.5s;
137+
}
138+
139+
.header {
140+
display: flex;
141+
align-items: center;
142+
justify-content: space-between;
143+
}
144+
145+
.api-filter {
146+
border: 1px solid var(--vt-c-divider);
147+
border-radius: 8px;
148+
padding: 6px 12px;
149+
}
150+
151+
.api-filter:focus {
152+
border-color: var(--vt-c-green-light);
153+
}
154+
155+
.no-match {
156+
font-size: 1.2em;
157+
color: var(--vt-c-text-3);
158+
text-align: center;
159+
margin-top: 36px;
160+
padding-top: 36px;
161+
border-top: 1px solid var(--vt-c-divider-light);
162+
}
163+
164+
@media (max-width: 768px) {
165+
#api-index {
166+
padding: 42px 24px;
167+
}
168+
h1 {
169+
font-size: 32px;
170+
margin-bottom: 24px;
171+
}
172+
h2 {
173+
font-size: 22px;
174+
margin: 42px 0 32px;
175+
padding-top: 32px;
176+
}
177+
.api-groups a {
178+
font-size: 14px;
179+
}
180+
.header {
181+
display: block;
182+
}
183+
}
184+
185+
@media (min-width: 768px) {
186+
.api-groups {
187+
columns: 2;
188+
}
189+
}
190+
191+
@media (min-width: 1024px) {
192+
.api-groups {
193+
columns: 3;
194+
}
195+
}
196+
</style>

‎src/api/index.md

Lines changed: 3 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,11 @@
11
---
22
sidebar: false
33
page: true
4+
footer: false
45
---
56

67
<script setup>
7-
import apiIndex from './index.json'
8-
import { ref, computed } from 'vue'
9-
10-
const query = ref('')
11-
12-
const filtered = computed(() => {
13-
const q = query.value
14-
return apiIndex.map(section => {
15-
const items = section.items.map(({ text, link, headers }) => {
16-
headers = headers.filter(h => {
17-
return h.toLowerCase().includes(q.toLowerCase())
18-
})
19-
return headers.length ? { text, link, headers } : null
20-
}).filter(i => i)
21-
return items.length ? { text: section.text, items } : null
22-
}).filter(i => i)
23-
})
24-
25-
// same as vitepress' slugify logic
26-
function slugify(text) {
27-
return text
28-
// Replace special characters
29-
.replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
30-
// Remove continuous separators
31-
.replace(/\-{2,}/g, '-')
32-
// Remove prefixing and trailing separators
33-
.replace(/^\-+|\-+$/g, '')
34-
// ensure it doesn't start with a number (#121)
35-
.replace(/^(\d)/, '_$1')
36-
// lowercase
37-
.toLowerCase()
38-
}
8+
import ApiIndex from './ApiIndex.vue'
399
</script>
4010

41-
<div id="api-index">
42-
<div class="header">
43-
<h1>API Reference</h1>
44-
<input class="api-filter" placeholder="Filter" v-model="query">
45-
</div>
46-
47-
<div v-for="section of filtered" class="api-section">
48-
<h2>{{ section.text }}</h2>
49-
<div class="api-groups">
50-
<div v-for="item of section.items" class="api-group">
51-
<h3>{{ item.text }}</h3>
52-
<ul>
53-
<li v-for="h of item.headers">
54-
<a :href="item.link + '.html#' + slugify(h)">{{ h }}</a>
55-
</li>
56-
</ul>
57-
</div>
58-
</div>
59-
</div>
60-
</div>
61-
62-
<style scoped>
63-
#api-index {
64-
max-width: 1024px;
65-
margin: 0px auto;
66-
padding: 64px 32px;
67-
}
68-
69-
h1,
70-
h2,
71-
h3 {
72-
font-weight: 600;
73-
line-height: 1;
74-
}
75-
76-
h1,
77-
h2 {
78-
letter-spacing: -0.02em;
79-
}
80-
81-
h1 {
82-
font-size: 38px;
83-
}
84-
85-
h2 {
86-
font-size: 24px;
87-
color: var(--vt-c-text-1);
88-
margin: 36px 0;
89-
transition: color 0.5s;
90-
padding-top: 36px;
91-
border-top: 1px solid var(--vt-c-divider-light);
92-
}
93-
94-
h3 {
95-
letter-spacing: -0.01em;
96-
color: var(--vt-c-green);
97-
font-size: 18px;
98-
margin-bottom: 1em;
99-
transition: color 0.5s;
100-
}
101-
102-
.api-section {
103-
margin-bottom: 64px;
104-
}
105-
106-
.api-groups a {
107-
font-size: 15px;
108-
font-weight: 500;
109-
line-height: 2;
110-
color: var(--vt-c-text-code);
111-
transition: color 0.5s;
112-
}
113-
114-
.dark api-groups a {
115-
font-weight: 400;
116-
}
117-
118-
.api-groups a:hover {
119-
color: var(--vt-c-green);
120-
transition: none;
121-
}
122-
123-
.api-group {
124-
break-inside: avoid;
125-
margin-bottom: 20px;
126-
background-color: var(--vt-c-bg-soft);
127-
border-radius: 8px;
128-
padding: 28px 32px;
129-
transition: background-color 0.5s;
130-
}
131-
132-
.header {
133-
display: flex;
134-
align-items: center;
135-
justify-content: space-between;
136-
}
137-
138-
.api-filter {
139-
border: 1px solid var(--vt-c-divider);
140-
border-radius: 8px;
141-
padding: 6px 12px;
142-
}
143-
144-
.api-filter:focus {
145-
border-color: var(--vt-c-green-light);
146-
}
147-
148-
@media (max-width: 768px) {
149-
#api-index {
150-
padding: 42px 24px;
151-
}
152-
h1 {
153-
font-size: 32px;
154-
margin-bottom: 24px;
155-
}
156-
h2 {
157-
font-size: 22px;
158-
margin: 42px 0 32px;
159-
padding-top: 32px;
160-
}
161-
.api-groups a {
162-
font-size: 14px;
163-
}
164-
.header {
165-
display: block;
166-
}
167-
}
168-
169-
@media (min-width: 768px) {
170-
.api-groups {
171-
columns: 2;
172-
}
173-
}
174-
175-
@media (min-width: 1024px) {
176-
.api-groups {
177-
columns: 3;
178-
}
179-
}
180-
</style>
11+
<ApiIndex />

0 commit comments

Comments
 (0)