Skip to content

Commit ebbae63

Browse files
shinokadashinokada
committed
api-check: home update
1 parent 83e449e commit ebbae63

File tree

1 file changed

+20
-330
lines changed

1 file changed

+20
-330
lines changed

‎src/routes/api-check/+page.svelte‎

Lines changed: 20 additions & 330 deletions
Original file line numberDiff line numberDiff line change
@@ -1,343 +1,33 @@
11
<script lang="ts">
2-
import { List, Li } from "$lib";
3-
import { CheckCircleSolid, CloseCircleSolid, QuestionCircleSolid } from "flowbite-svelte-icons";
2+
import { List, Li, P, A } from "$lib";
3+
import A4 from "../admin-dashboard/(no-sidebar)/pages/404.svelte";
44
let { data } = $props();
5-
function convertStringToKebabCase(text: string) {
6-
return text.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
5+
6+
function convertString(path: string): string {
7+
return path.replace(/^\/(\w)(\w*)/, (match, firstChar, restOfString) => {
8+
return firstChar.toUpperCase() + restOfString;
9+
});
710
}
8-
interface Component {
9-
checked: boolean;
10-
problems?: string;
11-
notes?: string;
12-
}
13-
14-
interface ListType {
15-
[key: string]: Component;
16-
}
17-
18-
const components: ListType = {
19-
accordion: {
20-
checked: true
21-
},
22-
alert: {
23-
checked: true
24-
},
25-
avatar: {
26-
checked: true
27-
},
28-
badge: {
29-
checked: true
30-
},
31-
banner: {
32-
checked: true
33-
},
34-
bottomNavigation: {
35-
checked: true
36-
},
37-
breadcrumb: {
38-
checked: true
39-
},
40-
buttonGroup: {
41-
checked: true
42-
},
43-
buttons: {
44-
checked: true
45-
},
46-
card: {
47-
checked: true
48-
},
49-
carousel: {
50-
checked: true
51-
},
52-
darkmode: {
53-
checked: true
54-
},
55-
datepicker: {
56-
checked: true,
57-
notes: "style update"
58-
},
59-
deviceMockups: {
60-
checked: true
61-
},
62-
drawer: {
63-
checked: true
64-
},
65-
dropdown: {
66-
checked: true
67-
},
68-
footer: {
69-
checked: true
70-
},
71-
forms: {
72-
checked: true
73-
},
74-
gallery: {
75-
checked: true
76-
},
77-
indicators: {
78-
checked: true
79-
},
80-
kbd: {
81-
checked: true
82-
},
83-
listGroup: {
84-
checked: true
85-
},
86-
megaMenu: {
87-
checked: true
88-
},
89-
modal: {
90-
checked: true
91-
},
92-
navbar: {
93-
checked: true
94-
},
95-
pagination: {
96-
checked: true
97-
},
98-
popover: {
99-
checked: true,
100-
notes: "Animation"
101-
},
102-
progress: {
103-
checked: true
104-
},
105-
rating: {
106-
checked: true
107-
},
108-
sidebar: {
109-
checked: true
110-
},
111-
skeleton: {
112-
checked: true
113-
},
114-
speedDial: {
115-
checked: true
116-
},
117-
spinner: {
118-
checked: true
119-
},
120-
table: {
121-
checked: true,
122-
notes: "Sorting by column"
123-
},
124-
tabs: {
125-
checked: true
126-
},
127-
timeline: {
128-
checked: true
129-
},
130-
toast: {
131-
checked: true
132-
},
133-
tooltip: {
134-
checked: true
135-
},
136-
video: {
137-
checked: true
138-
}
139-
};
140-
141-
const forms: ListType = {
142-
checkbox: {
143-
checked: true
144-
},
145-
fileInput: {
146-
checked: true
147-
},
148-
floatingLabel: {
149-
checked: true
150-
},
151-
inputField: {
152-
checked: true
153-
},
154-
label: {
155-
checked: true
156-
},
157-
radio: {
158-
checked: true
159-
},
160-
range: {
161-
checked: true
162-
},
163-
searchInput: {
164-
checked: true
165-
},
166-
select: {
167-
checked: true
168-
},
169-
textarea: {
170-
checked: true
171-
},
172-
timepicker: {
173-
checked: true
174-
},
175-
toggle: {
176-
checked: true
177-
}
178-
};
179-
180-
const typography: ListType = {
181-
blockquote: {
182-
checked: true
183-
},
184-
heading: {
185-
checked: true
186-
},
187-
hr: {
188-
checked: true
189-
},
190-
image: {
191-
checked: true
192-
},
193-
layout: {
194-
checked: true
195-
},
196-
link: {
197-
checked: true
198-
},
199-
list: {
200-
checked: true
201-
},
202-
paragraph: {
203-
checked: true
204-
},
205-
span: {
206-
checked: true
207-
},
208-
text: {
209-
checked: true
210-
}
211-
};
212-
213-
function analyzeComponents(components: ListType) {
214-
let total = 0;
215-
let pageChecked = 0;
216-
let pageUnchecked = 0;
217-
let pageWithProblems = 0;
218-
let pageWithoutProblems = 0;
219-
let exampleProblems = 0;
220-
221-
for (const component in components) {
222-
total++;
223-
pageChecked += components[component].checked ? 1 : 0;
224-
pageUnchecked += !components[component].checked ? 1 : 0;
225-
pageWithProblems += components[component].problems ? 1 : 0;
226-
// exampleProblems += components[component].problems ? 1 : 0;
227-
228-
// count the number of example problems
229-
let numberOfProblemsForComponent = 0;
230-
if (components[component].problems) {
231-
// Split the problems string by commas (ignoring whitespaces)
232-
const problemsArray = components[component].problems.split(/\s*,\s*/);
233-
// Count the number of elements in the array (number of problems)
234-
numberOfProblemsForComponent = problemsArray.length;
235-
}
236-
// Add the number of problems for this component to the total count
237-
exampleProblems += numberOfProblemsForComponent;
238-
}
239-
pageWithoutProblems = pageChecked - pageWithProblems;
240-
241-
return {
242-
total,
243-
pageChecked,
244-
pageUnchecked,
245-
pageWithProblems,
246-
pageWithoutProblems,
247-
exampleProblems
248-
};
249-
}
250-
251-
const componentsAnalysis = analyzeComponents(components);
252-
const formsAnalysis = analyzeComponents(forms);
253-
const typographyAnalysis = analyzeComponents(typography);
25411
</script>
25512

25613
<h1 class="my-4 text-3xl">API check</h1>
25714

258-
<h2 class="my-4 text-2xl">Components</h2>
259-
<List class="space-y-1 text-gray-500 dark:text-gray-400">
260-
<Li># of pages: {componentsAnalysis.total}</Li>
261-
<Li># of components/pages checked: {componentsAnalysis.pageChecked}</Li>
262-
<Li># of components/pages to be completed: {componentsAnalysis.pageUnchecked}</Li>
263-
<Li class="text-green-500"># of pages without problems: {componentsAnalysis.pageWithoutProblems}</Li>
264-
{#if componentsAnalysis.exampleProblems > 0}
265-
<Li class="text-red-500"># of examples to be completed: {componentsAnalysis.exampleProblems}</Li>
266-
{/if}
267-
</List>
268-
269-
<List class="my-8 space-y-1 text-gray-500 dark:text-gray-400">
270-
{#each Object.entries(components) as [key, { checked, problems, notes }]}
271-
<Li icon>
272-
{#if checked && !problems}
273-
<CheckCircleSolid class="me-2 h-8 w-8 text-green-500 dark:text-green-400" />
274-
{:else if problems}
275-
<CloseCircleSolid class="me-2 h-8 w-8 text-red-500 dark:text-red-400" />
276-
{:else}
277-
<QuestionCircleSolid class="me-2 h-8 w-8 text-gray-500 dark:text-gray-400" />
278-
{/if}
279-
<a href="/api-check/components/{convertStringToKebabCase(key)}" class="text-blue-800 underline hover:text-blue-500 dark:text-blue-300 hover:dark:text-blue-200">{key}</a>
280-
{#if problems}
281-
<span class="ml-4 text-red-500">( {problems})</span>{/if}{#if notes}<span class="ml-4 text-yellow-500">(Todos: {notes})</span>
282-
{/if}
283-
</Li>
284-
{/each}
285-
</List>
15+
<P>Our main documentation is written in .md files, which means editors can’t provide real-time feedback such as syntax errors, type errors, or other code issues.</P>
28616

287-
<h2 class="my-4 text-2xl">Forms</h2>
288-
<List class="space-y-1 text-gray-500 dark:text-gray-400">
289-
<Li># of pages: {formsAnalysis.total}</Li>
290-
<Li># of components/pages checked: {formsAnalysis.pageChecked}</Li>
291-
<Li># of components/pages to be completed: {formsAnalysis.pageUnchecked}</Li>
292-
<Li class="text-green-500"># of pages without problems: {formsAnalysis.pageWithoutProblems}</Li>
293-
{#if formsAnalysis.exampleProblems > 0}
294-
<Li class="text-red-500"># of examples to be completed: {formsAnalysis.exampleProblems}</Li>
295-
{/if}
296-
</List>
17+
<P>The api-check directory uses .svelte files instead, allowing you to verify that the code is valid and type-safe directly in your editor. This ensures that any examples included in the documentation remain accurate and functional.</P>
29718

29819
<List class="my-8 space-y-1 text-gray-500 dark:text-gray-400">
299-
{#each Object.entries(forms) as [key, { checked, problems, notes }]}
300-
<Li icon>
301-
{#if checked && !problems}
302-
<CheckCircleSolid class="me-2 h-8 w-8 text-green-500 dark:text-green-400" />
303-
{:else if problems}
304-
<CloseCircleSolid class="me-2 h-8 w-8 text-red-500 dark:text-red-400" />
305-
{:else}
306-
<QuestionCircleSolid class="me-2 h-8 w-8 text-gray-500 dark:text-gray-400" />
307-
{/if}
308-
<a href="/api-check/forms/{convertStringToKebabCase(key)}" class="text-blue-800 underline hover:text-blue-500 dark:text-blue-300 hover:dark:text-blue-200">{key}</a>
309-
{#if problems}
310-
<span class="ml-4 text-red-500">( {problems})</span>{/if}{#if notes}<span class="ml-4 text-green-500">(DONE: {notes})</span>
311-
{/if}
312-
</Li>
20+
{#each Object.entries(data.posts.apicheck) as [key, values] (key)}
21+
<List class="text-2xl">{key}</List>
22+
{#each values as Array<{path: string}> as item (item.path)}
23+
{@const href = `/api-check/${key}${item.path}`}
24+
{@const linkLabel = convertString(item.path)}
25+
<Li>
26+
<A {href} >
27+
{linkLabel}
28+
</A>
29+
</Li>
30+
{/each}
31331
{/each}
31432
</List>
31533

316-
<h2 class="my-4 text-2xl">Typography</h2>
317-
<List class="space-y-1 text-gray-500 dark:text-gray-400">
318-
<Li># of pages: {typographyAnalysis.total}</Li>
319-
<Li># of components/pages checked: {typographyAnalysis.pageChecked}</Li>
320-
<Li># of components/pages to be completed: {typographyAnalysis.pageUnchecked}</Li>
321-
<Li class="text-green-500"># of pages without problems: {typographyAnalysis.pageWithoutProblems}</Li>
322-
{#if typographyAnalysis.exampleProblems > 0}
323-
<Li class="text-red-500"># of examples to be completed: {typographyAnalysis.exampleProblems}</Li>
324-
{/if}
325-
</List>
326-
327-
<List class="my-8 space-y-1 text-gray-500 dark:text-gray-400">
328-
{#each Object.entries(typography) as [key, { checked, problems, notes }]}
329-
<Li icon>
330-
{#if checked && !problems}
331-
<CheckCircleSolid class="me-2 h-8 w-8 text-green-500 dark:text-green-400" />
332-
{:else if problems}
333-
<CloseCircleSolid class="me-2 h-8 w-8 text-red-500 dark:text-red-400" />
334-
{:else}
335-
<QuestionCircleSolid class="me-2 h-8 w-8 text-gray-500 dark:text-gray-400" />
336-
{/if}
337-
<a href="/api-check/typography/{convertStringToKebabCase(key)}" class="text-blue-800 underline hover:text-blue-500 dark:text-blue-300 hover:dark:text-blue-200">{key}</a>
338-
{#if problems}
339-
<span class="ml-4 text-red-500">( {problems})</span>{/if}{#if notes}<span class="ml-4 text-green-500">(DONE: {notes})</span>
340-
{/if}
341-
</Li>
342-
{/each}
343-
</List>

0 commit comments

Comments
 (0)