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 PostTags from '~/components/common/Tags.astro';
-import SocialShare from '~/components/atoms/SocialShare.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 Fonts from '~/components/common/Fonts.astro';
-import ExtraMetaTags from '../atoms/ExtraMetaTags.astro';
+import ExtraMetaTags from '~/components/common/ExtraMetaTags.astro';
 import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
 
 import { MetaSEO } from '~/types';
 
-const { src: defaultImage } = await getImage({
+const defaultImage = SITE.defaultImage
-	src: defaultImageSrc,
+	? (
+			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 Logo from '~/components/common/Logo.astro';
-import ToggleTheme from '~/components/core/ToggleTheme.astro';
+import ToggleTheme from '~/components/common/ToggleTheme.astro';
-import ToggleMenu from '~/components/core/ToggleMenu.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"
+						href="https://github.com/onwidget/astrowind">Github</a
-						>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/layouts/BaseLayout.astro

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

src/layouts/BlogLayout.astro

@@ -1,24 +0,0 @@
----
-import Layout from '~/layouts/PageLayout.astro';
-
-import { MetaSEO } from '~/types';
-
-export interface Props {
-	meta?: MetaSEO;
-}
-
-const { meta } = Astro.props;
----
-
-<Layout {meta}>
-	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		<header>
-			<h1
-				class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading"
-			>
-				<slot name="title" />
-			</h1>
-		</header>
-		<slot />
-	</section>
-</Layout>

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">
+	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		News and tutorials about
+		<Title>News and tutorials about AstroWind</Title>
-		<span>AstroWind</span>
-	</Fragment>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+	</section>
 </Layout>

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

@@ -3,6 +3,7 @@ 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';
@@ -10,9 +11,7 @@ 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>

src/pages/[...categories]/[category]/[...page].astro

@@ -1,18 +1,18 @@
 ---
 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, cleanSlug, CATEGORY_BASE } from '~/utils/permalinks';
+import Title from '~/components/blog/Title.astro';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.category?.disabled) return [];
 
 	const posts = await fetchPosts();
-
 	const categories = new Set();
 	posts.map((post) => {
 		typeof post.category === 'string' && categories.add(post.category.toLowerCase());
@@ -33,7 +33,6 @@ export async function getStaticPaths({ paginate }) {
 const { page, category } = Astro.props;
 
 const currentPage = page.currentPage ?? 1;
-
 const meta = {
 	title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
@@ -43,9 +42,9 @@ const meta = {
 ---
 
 <Layout meta={meta}>
-	<Fragment slot="title">
+	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		Category: {category}
+		<Title>Category {category}</Title>
-	</Fragment>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+	</section>
 </Layout>

src/pages/[...tags]/[tag]/[...page].astro

@@ -1,18 +1,18 @@
 ---
 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, cleanSlug, TAG_BASE } from '~/utils/permalinks';
+import Title from '~/components/blog/Title.astro';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
 
 	const posts = await fetchPosts();
-
 	const tags = new Set();
 	posts.map((post) => {
 		Array.isArray(post.tags) && post.tags.map((tag) => tags.add(tag.toLowerCase()));
@@ -33,7 +33,6 @@ export async function getStaticPaths({ paginate }) {
 const { page, tag } = Astro.props;
 
 const currentPage = page.currentPage ?? 1;
-
 const meta = {
 	title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
@@ -43,9 +42,9 @@ const meta = {
 ---
 
 <Layout meta={meta}>
-	<Fragment slot="title">
+	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		Tag: {tag}
+		<Title>Tag: {tag}</Title>
-	</Fragment>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+	</section>
 </Layout>

src/types.ts

@@ -24,14 +24,14 @@ export interface Post {
 }
 
 export interface MetaSEO {
-  title?: string,
+	title?: string;
-	description?: string,
+	description?: string;
-	image?: string,
+	image?: string;
 
-	canonical?: string,
+	canonical?: string | URL;
-	noindex?: boolean,
+	noindex?: boolean;
-	nofollow?: boolean,
+	nofollow?: boolean;
 
-	ogTitle?: string,
+	ogTitle?: string;
-	ogType?: string,
+	ogType?: string;
 }

src/utils/directories.ts

@@ -13,6 +13,6 @@ export const getProjectRootDir = (): string => {
 const __srcFolder = path.join(getProjectRootDir(), '/src');
 
 /** */
-export const getRelativeUrlByFilePath = (filepath: string): string | URL => {
+export const getRelativeUrlByFilePath = (filepath: string): string => {
 	return filepath.replace(__srcFolder, '');
 };

src/utils/permalinks.ts

@@ -26,7 +26,7 @@ export const CATEGORY_BASE = cleanSlug(BLOG?.category?.pathname);
 export const TAG_BASE = cleanSlug(BLOG?.tag?.pathname);
 
 /** */
-export const getCanonical = (path = '') => new URL(path, SITE.origin);
+export const getCanonical = (path = ''): string | URL => new URL(path, SITE.origin);
 
 /** */
 export const getPermalink = (slug = '', type = 'page'): string => {

src/utils/posts.ts

@@ -1,6 +1,6 @@
 import { getCollection, getEntry } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
-import type { Post } from "~/types"
+import type { Post } from '~/types';
 
 const getNormalizedPost = async (post: CollectionEntry<'blog'>): Promise<Post> => {
 	const { id, slug, data } = post;

tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
-    "types": ["astro/client"],
     "strictNullChecks": true,
     "allowJs": true,
     "baseUrl": ".",