Simplify folders and more typescript migration

README.md

@@ -76,9 +76,8 @@ Inside AstroWind template, you'll see the following folders and files:
 |   |   └── styles/
 |   |       └── base.css
 │   ├── components/
-│   │   ├── atoms/
 │   │   ├── blog/
-│   │   ├── core/
+│   │   ├── common/
 |   |   └── widgets/
 |   |       ├── Header.astro
 |   |       ├── Footer.astro

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
   "description": "A template to make your website using Astro + Tailwind CSS.",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "private": true,
   "scripts": {
     "dev": "astro dev",

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/core/MetaTags.astro → 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/atoms/Pagination.astro → 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/atoms/SocialShare.astro → 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/atoms/Tags.astro → 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">

src/config.mjs

@@ -1,3 +1,5 @@
+import defaultImage from './assets/images/default.png';
+
 export const SITE = {
 	name: 'AstroWind',
 
@@ -8,6 +10,8 @@ export const SITE = {
 	title: 'AstroWind — Your website with Astro + Tailwind CSS',
 	description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
 
+	defaultImage: defaultImage,
+
 	googleAnalyticsId: false, // or "G-XXXXXXXXXX",
 	googleSiteVerificationId: 'orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M',
 };

src/content/blog/markdown-elements-demo-post.mdx

@@ -7,7 +7,7 @@ image: '~/assets/images/astronaut.jpg'
 tags: [markdown, blog, Astro]
 ---
 
-import Logo from '~/components/atoms/Logo.astro';
+import Logo from '~/components/common/Logo.astro';
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

src/env.d.ts

@@ -1 +1 @@
-/// <reference types="@astrojs/image/client" />
+/// <reference types="@astrojs/image/client" />

src/layouts/BaseLayout.astro

@@ -1,8 +1,8 @@
 ---
 import '~/assets/styles/base.css';
 
-import MetaTags from '~/components/core/MetaTags.astro';
-import BasicScripts from '~/components/core/BasicScripts.astro';
+import MetaTags from '~/components/common/MetaTags.astro';
+import BasicScripts from '~/components/common/BasicScripts.astro';
 
 import { MetaSEO } from '~/types';
 

src/pages/[...blog]/[...page].astro

@@ -1,18 +1,17 @@
 ---
 import { SITE, BLOG } from '~/config.mjs';
 
-import Layout from '~/layouts/BlogLayout.astro';
+import Layout from '~/layouts/PageLayout.astro';
 import BlogList from '~/components/blog/List.astro';
-import Pagination from '~/components/atoms/Pagination.astro';
+import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/posts';
 import { getCanonical, getPermalink, BLOG_BASE } from '~/utils/permalinks';
+import Title from '~/components/blog/Title.astro';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.blog?.disabled) return [];
-
 	const posts = await fetchPosts();
-
 	return paginate(posts, {
 		params: { blog: BLOG_BASE || undefined },
 		pageSize: BLOG.postsPerPage,
@@ -32,10 +31,9 @@ const meta = {
 ---
 
 <Layout {meta}>
-	<Fragment slot="title">
-		News and tutorials about
-		<span>AstroWind</span>
-	</Fragment>
-	<BlogList posts={page.data} />
-	<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
+		<Title>News and tutorials about AstroWind</Title>
+		<BlogList posts={page.data} />
+		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+	</section>
 </Layout>

src/pages/[...blog]/[slug].astro

@@ -3,16 +3,15 @@ import { SITE, BLOG } from '~/config.mjs';
 
 import Layout from '~/layouts/PageLayout.astro';
 import SinglePost from '~/components/blog/SinglePost.astro';
+import ToBlogLink from '~/components/blog/ToBlogLink.astro';
 
 import { getCanonical, getPermalink, cleanSlug, POST_BASE } from '~/utils/permalinks';
 import { fetchPosts } from '~/utils/posts';
 import { findImage } from '~/utils/images';
 
 export async function getStaticPaths() {
 	if (BLOG?.disabled || BLOG?.post?.disabled) return [];
-
 	const posts = await fetchPosts();
-
 	return posts.map((post) => ({
 		params: {
 			slug: cleanSlug(post.slug),
@@ -37,4 +36,5 @@ const meta = {
 
 <Layout {meta}>
 	<SinglePost post={{ ...post, image: meta.image }} url={url} />
+	<ToBlogLink />
 </Layout>