Resolve Typescript Issues 2/2 (skeletonlabs#2125)

Co-authored-by: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com>
Mahmoud-zino · Oct 13, 2023 · a6fa50f · a6fa50f
1 parent 01153dc
commit a6fa50f
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 14 deletions.
diff --git a/sites/skeleton.dev/.eslintrc.cjs b/sites/skeleton.dev/.eslintrc.cjs
@@ -26,6 +26,13 @@ module.exports = {
 	},
 	rules: {
 		'no-useless-escape': 'off',
-		'svelte/no-at-html-tags': 'off'
+		'svelte/no-at-html-tags': 'off',
+		'@typescript-eslint/no-unused-vars': [
+			'warn',
+			{
+				argsIgnorePattern: '^_',
+				varsIgnorePattern: '^\\$\\$(Props|Events|Slots|Generic)$'
+			}
+		]
 	}
 };
diff --git a/sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/+page.svelte
@@ -70,7 +70,7 @@
 		<DocsPreview regionPreview="text-token" regionViewport="!p-0" regionFooter="text-center">
 			<svelte:fragment slot="preview">
 				<div class="snap-x scroll-px-4 snap-mandatory scroll-smooth flex gap-4 overflow-x-auto px-4 py-10">
-					{#each Array.from({ length: 8 }) as _, i}
+					{#each { length: 8 } as _, i}
 						<div class="{currentSnap} shrink-0 card py-20 w-40 md:w-80 text-center">{i + 1}</div>
 					{/each}
 				</div>

diff --git a/sites/skeleton.dev/src/routes/(inner)/elements/typography/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/elements/typography/+page.svelte
@@ -3,7 +3,7 @@
 	import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
 	import DocsPreview from '$lib/components/DocsPreview/DocsPreview.svelte';
 	// Components
-	import { CodeBlock, Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+	import { CodeBlock } from '@skeletonlabs/skeleton';
 
 	// Docs Shell
 	const settings: DocsShellSettings = {

diff --git a/sites/skeleton.dev/src/routes/+layout.svelte b/sites/skeleton.dev/src/routes/+layout.svelte
@@ -122,9 +122,9 @@
 	}
 
 	// Lifecycle
-	afterNavigate((params: any) => {
+	afterNavigate((params) => {
 		// Scroll to top
-		const isNewPage: boolean = params.from && params.to && params.from.route.id !== params.to.route.id;
+		const isNewPage = params.from && params.to && params.from.route.id !== params.to.route.id;
 		const elemPage = document.querySelector('#page');
 		if (isNewPage && elemPage !== null) {
 			elemPage.scrollTop = 0;

diff --git a/sites/skeleton.dev/src/routes/blog/[slug]/+page.svelte b/sites/skeleton.dev/src/routes/blog/[slug]/+page.svelte
@@ -19,11 +19,12 @@
 		// Element Page
 		elemPage = document.querySelector('#page');
 		// CodeBlock Highlight
-		document.querySelectorAll('pre code').forEach((elem: any) => {
+		document.querySelectorAll('pre code').forEach((elem) => {
+			if (!(elem instanceof HTMLElement)) return;
 			hljs.highlightElement(elem);
 		});
 		// Table
-		document.querySelectorAll('table').forEach((elem: any) => {
+		document.querySelectorAll('table').forEach((elem) => {
 			elem.classList.add('table');
 		});
 	});

diff --git a/sites/skeleton.dev/src/routes/blog/blog-service.ts b/sites/skeleton.dev/src/routes/blog/blog-service.ts
@@ -6,19 +6,18 @@ const baseUrl = 'https://skeleton.ghost.io/ghost/api/content';
 const ghostKey = 'c76a270f160dbf241b27b81dc2';
 const headers = { 'Accept-Version': 'v5.0' };
 
-export async function getBlogList(page = 1): Promise<any> {
+export async function getBlogList(page = 1) {
 	const http = await fetch(`${baseUrl}/posts/?key=${ghostKey}&page=${page}&include=tags`, { headers });
-	const res = await http.json();
-
+	const res = (await http.json()) as BlogList;
 	if (http.ok) return res;
-	throw new Error(res);
+	throw new Error(http.statusText);
 }
 
-export async function getBlogPost(slug: string): Promise<any> {
+export async function getBlogPost(slug: string) {
 	const http = await fetch(`${baseUrl}/posts/slug/${slug}/?key=${ghostKey}&include=tags,authors`, { headers });
-	const res = await http.json();
+	const res = (await http.json()) as BlogList;
 	if (http.ok) return res;
-	throw new Error(res);
+	throw new Error(http.statusText);
 }
 
 // Formatters ---
@@ -28,3 +27,99 @@ export function blogDateFormatter(date: string): string {
 	const d: Date = new Date(date);
 	return d.toLocaleDateString('en-US', options);
 }
+
+// Types ---
+type BlogList = {
+	meta: Meta;
+	posts: Post[];
+	vercelEnv: string;
+};
+
+type Meta = {
+	pagination: {
+		page: number;
+		pages: number;
+		limit: number;
+		total: number;
+		next: number;
+		prev: number | null;
+	};
+};
+
+type Post = {
+	id: string;
+	uuid: string;
+	title: string;
+	slug: string;
+	html: string;
+	comment_id: string;
+	feature_image: string;
+	featured: boolean;
+	visibility: string;
+	created_at: string;
+	updated_at: string;
+	published_at: string;
+	custom_excerpt: string;
+	codeinjection_head: string | null;
+	codeinjection_foot: string | null;
+	custom_template: string | null;
+	canonical_url: string | null;
+	tags: Tag[];
+	primary_tag: Tag;
+	url: string;
+	excerpt: string;
+	reading_time: number;
+	access: boolean;
+	comments: boolean;
+	og_image: string | null;
+	og_title: string | null;
+	og_description: string | null;
+	twitter_image: string | null;
+	twitter_title: string | null;
+	twitter_description: string | null;
+	meta_title: string | null;
+	meta_description: string | null;
+	email_subject: string | null;
+	frontmatter: string | null;
+	feature_image_alt: string | null;
+	feature_image_caption: string | null;
+	primary_author: Author;
+};
+
+type Tag = {
+	id: string;
+	name: string;
+	slug: string;
+	description: string;
+	feature_image: string | null;
+	visibility: string;
+	og_image: string | null;
+	og_title: string | null;
+	og_description: string | null;
+	twitter_image: string | null;
+	twitter_title: string | null;
+	twitter_description: string | null;
+	meta_title: string | null;
+	meta_description: string | null;
+	codeinjection_head: string | null;
+	codeinjection_foot: string | null;
+	canonical_url: string | null;
+	accent_color: string;
+	url: string;
+};
+
+type Author = {
+	id: string;
+	name: string;
+	slug: string;
+	profile_image: string;
+	cover_image: string;
+	bio: string;
+	website: string;
+	location: string;
+	facebook: string | null;
+	twitter: string | null;
+	meta_title: string | null;
+	meta_description: string | null;
+	url: string;
+};