Simplify folders and more typescript migration

src/components/blog/Grid.astro

@@ -1,6 +1,6 @@
 ---
 import Item from '~/components/blog/GridItem.astro';
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 export interface Props {
 	posts: Array<Post>;

src/components/blog/GridItem.astro

@@ -4,7 +4,7 @@ import { Picture } from '@astrojs/image/components';
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 export interface Props {
 	post: Post;

src/components/blog/HighlightedPosts.astro

@@ -1,6 +1,7 @@
 ---
 import Grid from '~/components/blog/Grid.astro';
 
+import { getBlogPermalink } from '~/utils/permalinks';
 import { findPostsByIds } from '~/utils/posts';
 
 const ids = [
@@ -15,7 +16,12 @@ const posts = await findPostsByIds(ids);
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
 	<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
 		<h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
-			<span class="inline-block mb-1 sm:mb-4">Find out more content<br class="hidden md:block" /> in our Blog</span>
+			<span class="inline-block mb-1 sm:mb-4"
+				>Find out more content<br class="hidden md:block" /> in our <a
+					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+					href={getBlogPermalink()}>Blog</a
+				>
+			</span>
 		</h2>
 
 		<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">

src/components/blog/LatestPosts.astro

@@ -1,6 +1,7 @@
 ---
 import Grid from '~/components/blog/Grid.astro';
 
+import { getBlogPermalink } from '~/utils/permalinks';
 import { findLatestPosts } from '~/utils/posts';
 
 const count = 4;
@@ -10,7 +11,12 @@ const posts = await findLatestPosts({ count });
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
 	<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
 		<h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
-			<span class="inline-block mb-1 sm:mb-4">Latest articles<br class="hidden md:block" /> in our Blog</span>
+			<span class="inline-block mb-1 sm:mb-4"
+				>Latest articles<br class="hidden md:block" /> in our <a
+					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+					href={getBlogPermalink()}>Blog</a
+				>
+			</span>
 		</h2>
 
 		<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">

src/components/blog/List.astro

@@ -1,6 +1,6 @@
 ---
 import Item from '~/components/blog/ListItem.astro';
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 export interface Props {
 	posts: Array<Post>;

src/components/blog/ListItem.astro

@@ -1,12 +1,12 @@
 ---
 import { Picture } from '@astrojs/image/components';
-import PostTags from '~/components/atoms/Tags.astro';
+import PostTags from '~/components/common/Tags.astro';
 
 import { getPermalink } from '~/utils/permalinks';
 import { findImage } from '~/utils/images';
 import { getFormattedDate } from '~/utils/utils';
 
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 export interface Props {
 	post: Post;

src/components/blog/SinglePost.astro

@@ -1,15 +1,15 @@
 ---
 import { Picture } from '@astrojs/image/components';
-import PostTags from '~/components/atoms/Tags.astro';
-import SocialShare from '~/components/atoms/SocialShare.astro';
+import PostTags from '~/components/common/Tags.astro';
+import SocialShare from '~/components/common/SocialShare.astro';
 
 import { getFormattedDate } from '~/utils/utils';
 
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 export interface Props {
 	post: Post;
-	url: string;
+	url: string | URL;
 }
 
 const { post, url } = Astro.props;

src/components/blog/Title.astro

@@ -0,0 +1,8 @@
+---
+---
+
+<header>
+	<h1 class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading">
+		<slot />
+	</h1>
+</header>

src/components/blog/ToBlogLink.astro

@@ -0,0 +1,10 @@
+---
+import { Icon } from 'astro-icon';
+import { getBlogPermalink } from '~/utils/permalinks';
+---
+
+<div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 pb-12 md:pb-20 text-center md:text-left">
+	<a class="btn btn-ghost px-3" href={getBlogPermalink()}
+		><Icon name="tabler:chevron-left" class="w-5 h-5 mr-1" /> Back to Blog</a
+	>
+</div>

src/components/common/MetaTags.astro

@@ -4,21 +4,23 @@ import { GoogleAnalytics } from '@astrolib/analytics';
 import { getImage } from '@astrojs/image';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import defaultImageSrc from '~/assets/images/default.png';
-
 import { SITE } from '~/config.mjs';
-import Fonts from '../atoms/Fonts.astro';
-import ExtraMetaTags from '../atoms/ExtraMetaTags.astro';
+import Fonts from '~/components/common/Fonts.astro';
+import ExtraMetaTags from '~/components/common/ExtraMetaTags.astro';
 import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
 
 import { MetaSEO } from '~/types';
 
-const { src: defaultImage } = await getImage({
-	src: defaultImageSrc,
-	alt: 'Default image',
-	width: 1200,
-	height: 628,
-});
+const defaultImage = SITE.defaultImage
+	? (
+			await getImage({
+				src: SITE.defaultImage,
+				alt: 'Default image',
+				width: 1200,
+				height: 628,
+			})
+	  ).src
+	: '';
 
 export interface Props extends MetaSEO {}
 
@@ -39,7 +41,8 @@ const image =
 	typeof _image === 'string'
 		? new URL(_image, Astro.site)
 		: _image && typeof _image['src'] !== 'undefined'
-		? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
+		? // @ts-ignore
+		  new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
 		: null;
 ---
 
@@ -49,11 +52,11 @@ const image =
 <AstroSeo
 	title={title}
 	description={description}
-	canonical={canonical}
+	canonical={String(canonical)}
 	noindex={noindex}
 	nofollow={nofollow}
 	openGraph={{
-		url: canonical,
+		url: String(canonical),
 		title: ogTitle,
 		description: description,
 		type: ogType,

src/components/common/Pagination.astro

@@ -18,14 +18,14 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 			<div class="flex flex-row mx-auto container justify-between">
 				<a href={getRelativeLink(prevUrl)} class={`btn btn-ghost px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}>
 					<div class="flex flex-row align-middle">
-						<Icon name="tabler:arrow-left" class="w-6 h-6" />
+						<Icon name="tabler:chevron-left" class="w-6 h-6" />
 						<p class="ml-2">{prevText}</p>
 					</div>
 				</a>
 				<a href={getRelativeLink(nextUrl)} class={`btn btn-ghost px-3 ${!nextUrl ? 'invisible' : ''}`}>
 					<div class="flex flex-row align-middle">
 						<span class="mr-2">{nextText}</span>
-						<Icon name="tabler:arrow-right" class="w-6 h-6" />
+						<Icon name="tabler:chevron-right" class="w-6 h-6" />
 					</div>
 				</a>
 			</div>

src/components/common/SocialShare.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon';
 
 export interface Props {
 	text: string;
-	url: string;
+	url: string | URL;
 	class?: string;
 }
 

src/components/common/Tags.astro

@@ -1,7 +1,7 @@
 ---
 import { getPermalink } from '~/utils/permalinks';
 
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 export interface Props {
 	tags: Post['tags'];

src/components/widgets/Header.astro

@@ -1,8 +1,8 @@
 ---
 import { Icon } from 'astro-icon';
-import Logo from '~/components/atoms/Logo.astro';
-import ToggleTheme from '~/components/core/ToggleTheme.astro';
-import ToggleMenu from '~/components/core/ToggleMenu.astro';
+import Logo from '~/components/common/Logo.astro';
+import ToggleTheme from '~/components/common/ToggleTheme.astro';
+import ToggleMenu from '~/components/common/ToggleMenu.astro';
 
 import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } from '~/utils/permalinks';
 ---
@@ -69,9 +69,8 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } fro
 				<li class="md:hidden">
 					<a
 						class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-						href="https://github.com/onwidget/astrowind"
-						>Github
-					</a>
+						href="https://github.com/onwidget/astrowind">Github</a
+					>
 				</li>
 			</ul>
 			<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">