From 046009ec8c57b5703635c4038a9394c73c359835 Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 3 Jan 2023 22:52:10 -0500 Subject: [PATCH] Simplify folders and more typescript migration --- README.md | 3 +- package.json | 2 +- src/components/blog/Grid.astro | 2 +- src/components/blog/GridItem.astro | 2 +- src/components/blog/HighlightedPosts.astro | 8 ++++- src/components/blog/LatestPosts.astro | 8 ++++- src/components/blog/List.astro | 2 +- src/components/blog/ListItem.astro | 4 +-- src/components/blog/SinglePost.astro | 8 ++--- src/components/blog/Title.astro | 8 +++++ src/components/blog/ToBlogLink.astro | 10 +++++++ .../{core => common}/BasicScripts.astro | 0 .../{atoms => common}/ExtraMetaTags.astro | 0 src/components/{atoms => common}/Fonts.astro | 0 src/components/{atoms => common}/Logo.astro | 0 .../{core => common}/MetaTags.astro | 29 ++++++++++--------- .../{atoms => common}/Pagination.astro | 4 +-- .../{atoms => common}/SocialShare.astro | 2 +- .../{core => common}/SplitbeeAnalytics.astro | 0 src/components/{atoms => common}/Tags.astro | 2 +- .../{core => common}/ToggleMenu.astro | 0 .../{core => common}/ToggleTheme.astro | 0 src/components/widgets/Header.astro | 11 ++++--- src/config.mjs | 4 +++ .../blog/markdown-elements-demo-post.mdx | 2 +- src/env.d.ts | 2 +- src/layouts/BaseLayout.astro | 4 +-- src/layouts/BlogLayout.astro | 24 --------------- src/pages/[...blog]/[...page].astro | 18 +++++------- src/pages/[...blog]/[slug].astro | 4 +-- .../[category]/[...page].astro | 17 +++++------ src/pages/[...tags]/[tag]/[...page].astro | 17 +++++------ src/types.ts | 18 ++++++------ src/utils/directories.ts | 2 +- src/utils/permalinks.ts | 2 +- src/utils/posts.ts | 2 +- tsconfig.json | 1 - 37 files changed, 114 insertions(+), 108 deletions(-) create mode 100644 src/components/blog/Title.astro create mode 100644 src/components/blog/ToBlogLink.astro rename src/components/{core => common}/BasicScripts.astro (100%) rename src/components/{atoms => common}/ExtraMetaTags.astro (100%) rename src/components/{atoms => common}/Fonts.astro (100%) rename src/components/{atoms => common}/Logo.astro (100%) rename src/components/{core => common}/MetaTags.astro (79%) rename src/components/{atoms => common}/Pagination.astro (88%) rename src/components/{atoms => common}/SocialShare.astro (98%) rename src/components/{core => common}/SplitbeeAnalytics.astro (100%) rename src/components/{atoms => common}/Tags.astro (92%) rename src/components/{core => common}/ToggleMenu.astro (100%) rename src/components/{core => common}/ToggleTheme.astro (100%) delete mode 100644 src/layouts/BlogLayout.astro diff --git a/README.md b/README.md index 125dd2c..9cd831d 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 51a55f8..2cfb15d 100644 --- a/package.json +++ b/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", diff --git a/src/components/blog/Grid.astro b/src/components/blog/Grid.astro index 291073d..9504be3 100644 --- a/src/components/blog/Grid.astro +++ b/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; diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro index 311b7bc..e3cd7b0 100644 --- a/src/components/blog/GridItem.astro +++ b/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; diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro index ed1181b..1a327d9 100644 --- a/src/components/blog/HighlightedPosts.astro +++ b/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);

- Find out more content in our Blog + Find out more content in our Blog +

diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro index 9075902..2dd8522 100644 --- a/src/components/blog/LatestPosts.astro +++ b/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 });

- Latest articles in our Blog + Latest articles in our Blog +

diff --git a/src/components/blog/List.astro b/src/components/blog/List.astro index 741e4cf..994aece 100644 --- a/src/components/blog/List.astro +++ b/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; diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro index 8333abe..f56137d 100644 --- a/src/components/blog/ListItem.astro +++ b/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; diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro index 21f3c84..5867627 100644 --- a/src/components/blog/SinglePost.astro +++ b/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; diff --git a/src/components/blog/Title.astro b/src/components/blog/Title.astro new file mode 100644 index 0000000..a54655c --- /dev/null +++ b/src/components/blog/Title.astro @@ -0,0 +1,8 @@ +--- +--- + +

+

+ +

+
diff --git a/src/components/blog/ToBlogLink.astro b/src/components/blog/ToBlogLink.astro new file mode 100644 index 0000000..fd9ec08 --- /dev/null +++ b/src/components/blog/ToBlogLink.astro @@ -0,0 +1,10 @@ +--- +import { Icon } from 'astro-icon'; +import { getBlogPermalink } from '~/utils/permalinks'; +--- + +
+ Back to Blog +
diff --git a/src/components/core/BasicScripts.astro b/src/components/common/BasicScripts.astro similarity index 100% rename from src/components/core/BasicScripts.astro rename to src/components/common/BasicScripts.astro diff --git a/src/components/atoms/ExtraMetaTags.astro b/src/components/common/ExtraMetaTags.astro similarity index 100% rename from src/components/atoms/ExtraMetaTags.astro rename to src/components/common/ExtraMetaTags.astro diff --git a/src/components/atoms/Fonts.astro b/src/components/common/Fonts.astro similarity index 100% rename from src/components/atoms/Fonts.astro rename to src/components/common/Fonts.astro diff --git a/src/components/atoms/Logo.astro b/src/components/common/Logo.astro similarity index 100% rename from src/components/atoms/Logo.astro rename to src/components/common/Logo.astro diff --git a/src/components/core/MetaTags.astro b/src/components/common/MetaTags.astro similarity index 79% rename from src/components/core/MetaTags.astro rename to src/components/common/MetaTags.astro index 49f7405..b1b5ae0 100644 --- a/src/components/core/MetaTags.astro +++ b/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 =
- +

{prevText}
{nextText} - +
diff --git a/src/components/atoms/SocialShare.astro b/src/components/common/SocialShare.astro similarity index 98% rename from src/components/atoms/SocialShare.astro rename to src/components/common/SocialShare.astro index 2acee92..290261e 100644 --- a/src/components/atoms/SocialShare.astro +++ b/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; } diff --git a/src/components/core/SplitbeeAnalytics.astro b/src/components/common/SplitbeeAnalytics.astro similarity index 100% rename from src/components/core/SplitbeeAnalytics.astro rename to src/components/common/SplitbeeAnalytics.astro diff --git a/src/components/atoms/Tags.astro b/src/components/common/Tags.astro similarity index 92% rename from src/components/atoms/Tags.astro rename to src/components/common/Tags.astro index 54b95e1..d2a6285 100644 --- a/src/components/atoms/Tags.astro +++ b/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']; diff --git a/src/components/core/ToggleMenu.astro b/src/components/common/ToggleMenu.astro similarity index 100% rename from src/components/core/ToggleMenu.astro rename to src/components/common/ToggleMenu.astro diff --git a/src/components/core/ToggleTheme.astro b/src/components/common/ToggleTheme.astro similarity index 100% rename from src/components/core/ToggleTheme.astro rename to src/components/common/ToggleTheme.astro diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro index 63a8be9..f0f71e8 100644 --- a/src/components/widgets/Header.astro +++ b/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
  • Github - + href="https://github.com/onwidget/astrowind">Github
    • diff --git a/src/config.mjs b/src/config.mjs index 9a7f821..6683378 100644 --- a/src/config.mjs +++ b/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', }; diff --git a/src/content/blog/markdown-elements-demo-post.mdx b/src/content/blog/markdown-elements-demo-post.mdx index 4b6a690..3ef3ebe 100644 --- a/src/content/blog/markdown-elements-demo-post.mdx +++ b/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. diff --git a/src/env.d.ts b/src/env.d.ts index dc790a8..9231795 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1 @@ -/// \ No newline at end of file +/// diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index ed65397..511e548 100644 --- a/src/layouts/BaseLayout.astro +++ b/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'; diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro deleted file mode 100644 index 83a8919..0000000 --- a/src/layouts/BlogLayout.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -import Layout from '~/layouts/PageLayout.astro'; - -import { MetaSEO } from '~/types'; - -export interface Props { - meta?: MetaSEO; -} - -const { meta } = Astro.props; ---- - - -
    -
    -

    - -

    -
    - -
    -     diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro index 44bc622..69cf92a 100644 --- a/src/pages/[...blog]/[...page].astro +++ b/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 = { --- - - News and tutorials about - AstroWind - - - +
    + News and tutorials about AstroWind + + +
    diff --git a/src/pages/[...blog]/[slug].astro b/src/pages/[...blog]/[slug].astro index 0ff1ab2..ee972d4 100644 --- a/src/pages/[...blog]/[slug].astro +++ b/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 = { + diff --git a/src/pages/[...categories]/[category]/[...page].astro b/src/pages/[...categories]/[category]/[...page].astro index 8fc1399..1b70f32 100644 --- a/src/pages/[...categories]/[category]/[...page].astro +++ b/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 = { --- - - Category: {category} - - - +
    + Category {category} + + +
    diff --git a/src/pages/[...tags]/[tag]/[...page].astro b/src/pages/[...tags]/[tag]/[...page].astro index 446391b..f6c5b2c 100644 --- a/src/pages/[...tags]/[tag]/[...page].astro +++ b/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 = { --- - - Tag: {tag} - - - +
    + Tag: {tag} + + +
    diff --git a/src/types.ts b/src/types.ts index 4ef6ef3..7164312 100644 --- a/src/types.ts +++ b/src/types.ts @@ -24,14 +24,14 @@ export interface Post { } export interface MetaSEO { - title?: string, - description?: string, - image?: string, + title?: string; + description?: string; + image?: string; - canonical?: string, - noindex?: boolean, - nofollow?: boolean, + canonical?: string | URL; + noindex?: boolean; + nofollow?: boolean; - ogTitle?: string, - ogType?: string, -} \ No newline at end of file + ogTitle?: string; + ogType?: string; +} diff --git a/src/utils/directories.ts b/src/utils/directories.ts index bf0dfe5..b4180a5 100644 --- a/src/utils/directories.ts +++ b/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, ''); }; diff --git a/src/utils/permalinks.ts b/src/utils/permalinks.ts index 4ab1395..a58ba1e 100644 --- a/src/utils/permalinks.ts +++ b/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 => { diff --git a/src/utils/posts.ts b/src/utils/posts.ts index 5638b5d..3476cb3 100644 --- a/src/utils/posts.ts +++ b/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 => { const { id, slug, data } = post; diff --git a/tsconfig.json b/tsconfig.json index 7d01264..8543cd5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,6 @@ { "extends": "astro/tsconfigs/base", "compilerOptions": { - "types": ["astro/client"], "strictNullChecks": true, "allowJs": true, "baseUrl": ".",