From b1c6c919892d663f763152afc7b65be05c9091b2 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 21:37:09 -0500 Subject: [PATCH 01/11] Rename blog collection as posts --- src/content/config.ts | 4 ++-- .../{blog => posts}/astrowind-template-in-depth.md | 0 .../get-started-website-with-astro-tailwind-css.md | 0 .../how-to-customize-astrowind-to-your-brand.md | 0 .../{blog => posts}/markdown-elements-demo-post.mdx | 0 .../useful-resources-to-create-websites.md | 0 src/pages/index.astro | 10 ++++++++-- src/utils/blog.ts | 4 ++-- 8 files changed, 12 insertions(+), 6 deletions(-) rename src/content/{blog => posts}/astrowind-template-in-depth.md (100%) rename src/content/{blog => posts}/get-started-website-with-astro-tailwind-css.md (100%) rename src/content/{blog => posts}/how-to-customize-astrowind-to-your-brand.md (100%) rename src/content/{blog => posts}/markdown-elements-demo-post.mdx (100%) rename src/content/{blog => posts}/useful-resources-to-create-websites.md (100%) diff --git a/src/content/config.ts b/src/content/config.ts index 9cd1142..106b684 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,6 +1,6 @@ import { z, defineCollection } from 'astro:content'; -const blog = defineCollection({ +const posts = defineCollection({ schema: z.object({ title: z.string(), description: z.string().optional(), @@ -23,5 +23,5 @@ const blog = defineCollection({ }); export const collections = { - blog: blog, + posts: posts, }; diff --git a/src/content/blog/astrowind-template-in-depth.md b/src/content/posts/astrowind-template-in-depth.md similarity index 100% rename from src/content/blog/astrowind-template-in-depth.md rename to src/content/posts/astrowind-template-in-depth.md diff --git a/src/content/blog/get-started-website-with-astro-tailwind-css.md b/src/content/posts/get-started-website-with-astro-tailwind-css.md similarity index 100% rename from src/content/blog/get-started-website-with-astro-tailwind-css.md rename to src/content/posts/get-started-website-with-astro-tailwind-css.md diff --git a/src/content/blog/how-to-customize-astrowind-to-your-brand.md b/src/content/posts/how-to-customize-astrowind-to-your-brand.md similarity index 100% rename from src/content/blog/how-to-customize-astrowind-to-your-brand.md rename to src/content/posts/how-to-customize-astrowind-to-your-brand.md diff --git a/src/content/blog/markdown-elements-demo-post.mdx b/src/content/posts/markdown-elements-demo-post.mdx similarity index 100% rename from src/content/blog/markdown-elements-demo-post.mdx rename to src/content/posts/markdown-elements-demo-post.mdx diff --git a/src/content/blog/useful-resources-to-create-websites.md b/src/content/posts/useful-resources-to-create-websites.md similarity index 100% rename from src/content/blog/useful-resources-to-create-websites.md rename to src/content/posts/useful-resources-to-create-websites.md diff --git a/src/pages/index.astro b/src/pages/index.astro index f0cc53e..6686681 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -102,7 +102,6 @@ const meta = { + > + +

+ Ad vix debet docendi +

+ Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates. + + diff --git a/src/utils/blog.ts b/src/utils/blog.ts index 05cb8f2..03d48ef 100644 --- a/src/utils/blog.ts +++ b/src/utils/blog.ts @@ -3,7 +3,7 @@ import type { CollectionEntry } from 'astro:content'; import type { Post } from '~/types'; import { cleanSlug } from './permalinks'; -const getNormalizedPost = async (post: CollectionEntry<'blog'>): Promise => { +const getNormalizedPost = async (post: CollectionEntry<'posts'>): Promise => { const { id, slug = '', data } = post; const { Content, remarkPluginFrontmatter } = await post.render(); @@ -28,7 +28,7 @@ const getNormalizedPost = async (post: CollectionEntry<'blog'>): Promise = }; const load = async function (): Promise> { - const posts = await getCollection('blog'); + const posts = await getCollection('posts'); const normalizedPosts = posts.map(async (post) => await getNormalizedPost(post)); const results = (await Promise.all(normalizedPosts)) From 3933c63b683482804240eb1500d3d9ce825651f8 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 22:28:27 -0500 Subject: [PATCH 02/11] Add css.customData setting for tailwind css --- .vscode/css-custom-data.json | 17 +++++++++++++++++ .vscode/settings.json | 1 + 2 files changed, 18 insertions(+) create mode 100644 .vscode/css-custom-data.json diff --git a/.vscode/css-custom-data.json b/.vscode/css-custom-data.json new file mode 100644 index 0000000..56e07f6 --- /dev/null +++ b/.vscode/css-custom-data.json @@ -0,0 +1,17 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "@tailwind tailwindcss" + }, + { + "name": "@layer", + "description": "@layer tailwindcss" + }, + { + "name": "@apply", + "description": "@apply tailwindcss" + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index e482bb3..be6ddaf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { + "css.customData": ["./vscode/css-custom-data.json"], "eslint.validate": [ "javascript", "javascriptreact", From dcb9350037580d7cdd4a5c6ffd0b8168a5e33958 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 22:29:32 -0500 Subject: [PATCH 03/11] Add astro props --- src/components/blog/LatestPosts.astro | 57 +++++++++++++++++++-------- 1 file changed, 40 insertions(+), 17 deletions(-) diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro index ad8efa7..96244e2 100644 --- a/src/components/blog/LatestPosts.astro +++ b/src/components/blog/LatestPosts.astro @@ -4,27 +4,50 @@ import Grid from '~/components/blog/Grid.astro'; import { getBlogPermalink } from '~/utils/permalinks'; import { findLatestPosts } from '~/utils/blog'; -const count = 4; +export interface Props { + title?: string; + allPostsText?: string; + allPostsLink?: string | URL; + information?: string; + postIds: string[]; +} + +const { + title = await Astro.slots.render('title'), + allPostsText = 'View all posts', + allPostsLink = getBlogPermalink(), + information = await Astro.slots.render('information'), + count = 4, +} = Astro.props; + const posts = await findLatestPosts({ count }); --- -
-
-

- Latest articles in our Blog - -

+
+
+
+ { + title && ( +

+ ) + } + { + allPostsText && allPostsLink && ( + + {allPostsText} » + + ) + } +

-

- The blog will be used to display AstroWind documentation. Each new article will be an important step that you will - need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but - very soon. Astro is a very interesting technology. Thanks. -

+ {information &&

}

-
+
\ No newline at end of file From b49e4301241493a3c8682fd4dce06a70031df7c6 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 22:30:27 -0500 Subject: [PATCH 04/11] Use LatestPosts --- src/pages/index.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 6686681..c0eca35 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -8,7 +8,7 @@ import Features from '~/components/widgets/Features.astro'; import Features2 from '~/components/widgets/Features2.astro'; import Steps from '~/components/widgets/Steps.astro'; import Content from '~/components/widgets/Content.astro'; -import HighlightedPosts from '~/components/blog/HighlightedPosts.astro'; +import LatestPosts from '~/components/blog/LatestPosts.astro'; import FAQs from '~/components/widgets/FAQs.astro'; import Stats from '~/components/widgets/Stats.astro'; import CallToAction from '~/components/widgets/CallToAction.astro'; @@ -263,7 +263,7 @@ const meta = { - Date: Sat, 21 Jan 2023 22:31:30 -0500 Subject: [PATCH 05/11] Fix findLatestPosts implementation --- src/utils/blog.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/blog.ts b/src/utils/blog.ts index 03d48ef..3faf0ca 100644 --- a/src/utils/blog.ts +++ b/src/utils/blog.ts @@ -82,5 +82,5 @@ export const findLatestPosts = async ({ count }: { count?: number }): Promise Date: Sat, 21 Jan 2023 22:33:29 -0500 Subject: [PATCH 06/11] Configure some css variables --- src/components/common/CustomStyles.astro | 13 +++++++++++ src/components/common/Fonts.astro | 5 ---- src/components/common/MetaTags.astro | 6 ++--- tailwind.config.cjs | 29 +++--------------------- 4 files changed, 19 insertions(+), 34 deletions(-) create mode 100644 src/components/common/CustomStyles.astro delete mode 100644 src/components/common/Fonts.astro diff --git a/src/components/common/CustomStyles.astro b/src/components/common/CustomStyles.astro new file mode 100644 index 0000000..e93cc28 --- /dev/null +++ b/src/components/common/CustomStyles.astro @@ -0,0 +1,13 @@ +--- +import '@fontsource/inter/variable.css'; +--- + + diff --git a/src/components/common/Fonts.astro b/src/components/common/Fonts.astro deleted file mode 100644 index c455323..0000000 --- a/src/components/common/Fonts.astro +++ /dev/null @@ -1,5 +0,0 @@ ---- -import '@fontsource/inter/variable.css'; ---- - - diff --git a/src/components/common/MetaTags.astro b/src/components/common/MetaTags.astro index 1a413d0..d30e34f 100644 --- a/src/components/common/MetaTags.astro +++ b/src/components/common/MetaTags.astro @@ -5,10 +5,10 @@ import { getImage } from '@astrojs/image'; import { SITE } from '~/config.mjs'; import { MetaSEO } from '~/types'; -import { getCanonical, getAsset } from '~/utils/permalinks'; +import { getCanonical, getAsset } from '~/utils/permalinks'; import { getRelativeUrlByFilePath } from '~/utils/directories'; -import Fonts from '~/components/common/Fonts.astro'; +import CustomStyles from '~/components/common/CustomStyles.astro'; import SplitbeeAnalytics from './SplitbeeAnalytics.astro'; export interface Props extends MetaSEO { @@ -82,7 +82,7 @@ const image = }} /> - + {SITE.googleSiteVerificationId && } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 371b938..385a57d 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -10,35 +10,12 @@ module.exports = { secondary: colors.pink, }, fontFamily: { - sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans], + sans: ['var(--aw-font-sans)', ...defaultTheme.fontFamily.sans], + serif: ['var(--aw-font-serif)', ...defaultTheme.fontFamily.serif], + heading: ['var(--aw-font-heading)', ...defaultTheme.fontFamily.sans], }, }, }, plugins: [require('@tailwindcss/typography')], darkMode: 'class', }; - -/* - - Alternative tailwind.config.js - - NOTE: Add this fonts to - -*/ - -// module.exports = { -// content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"], -// theme: { -// extend: { -// colors: { -// primary: colors.cyan, -// secondary: colors.lime, -// }, -// fontFamily: { -// sans: ["'Nunito'", ...defaultTheme.fontFamily.sans], -// }, -// }, -// }, -// plugins: [require("@tailwindcss/typography")], -// darkMode: "class", -// }; From 23b961cc19228d10b5aaf8af9aec115d8fa54c53 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 22:34:00 -0500 Subject: [PATCH 07/11] Move Tags component to blog folder --- src/components/{common => blog}/Tags.astro | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{common => blog}/Tags.astro (100%) diff --git a/src/components/common/Tags.astro b/src/components/blog/Tags.astro similarity index 100% rename from src/components/common/Tags.astro rename to src/components/blog/Tags.astro From 571a221926e182cb20a7db6c44e85eb7048221e8 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 22:34:47 -0500 Subject: [PATCH 08/11] Change icons --- src/components/common/SocialShare.astro | 27 +++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/common/SocialShare.astro b/src/components/common/SocialShare.astro index ae26912..91282c9 100644 --- a/src/components/common/SocialShare.astro +++ b/src/components/common/SocialShare.astro @@ -11,20 +11,35 @@ const { text, url, class: className = 'inline-block' } = Astro.props; ---
- Share: + Share:
From 9cfad4d8fac322218dbd0866b7c1535c2124cd03 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sat, 21 Jan 2023 22:35:16 -0500 Subject: [PATCH 09/11] Update path for Tags component --- src/components/blog/ListItem.astro | 2 +- src/components/blog/SinglePost.astro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro index d4697dd..039389b 100644 --- a/src/components/blog/ListItem.astro +++ b/src/components/blog/ListItem.astro @@ -1,7 +1,7 @@ --- import Icon from 'astro-icon'; import { Picture } from '@astrojs/image/components'; -import PostTags from '~/components/common/Tags.astro'; +import PostTags from '~/components/blog/Tags.astro'; import { BLOG } from '~/config.mjs'; import type { Post } from '~/types'; diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro index 3aa6756..ad9919d 100644 --- a/src/components/blog/SinglePost.astro +++ b/src/components/blog/SinglePost.astro @@ -2,7 +2,7 @@ import Icon from 'astro-icon'; import { Picture } from '@astrojs/image/components'; -import PostTags from '~/components/common/Tags.astro'; +import PostTags from '~/components/blog/Tags.astro'; import SocialShare from '~/components/common/SocialShare.astro'; import { getFormattedDate } from '~/utils/utils'; From a3d0855f921f3ef81cd496fef995b8bec17d5342 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sun, 22 Jan 2023 00:38:46 -0500 Subject: [PATCH 10/11] Add custom css variables --- src/assets/styles/base.css | 24 ++++++++++++++++++------ src/components/common/CustomStyles.astro | 16 +++++++++++++--- tailwind.config.cjs | 5 +++-- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 8c1c226..c623a4c 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -3,21 +3,33 @@ @tailwind utilities; @layer components { - .btn { - @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800; + .text-page { + color: var(--aw-color-text-page); } - .btn-ghost { - @apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white; + .text-muted { + color: var(--aw-color-text-muted); } - .btn-primary { - @apply font-semibold bg-primary-800 text-white border-primary-800 hover:bg-primary-900 hover:border-primary-900 hover:text-white dark:text-white dark:bg-primary-800 dark:border-primary-800 dark:hover:border-primary-900 dark:hover:bg-primary-900; + .bg-light { + background-color: var(--aw-color-bg-page); } .bg-dark { @apply bg-slate-900; } + + .btn { + @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800; + } + + .btn-ghost { + @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white; + } + + .btn-primary { + @apply font-semibold bg-primary text-white border-primary hover:bg-blue-900 hover:border-blue-900 hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-blue-900 dark:hover:bg-blue-900; + } } #header.scroll { diff --git a/src/components/common/CustomStyles.astro b/src/components/common/CustomStyles.astro index e93cc28..8d60d9b 100644 --- a/src/components/common/CustomStyles.astro +++ b/src/components/common/CustomStyles.astro @@ -1,13 +1,23 @@ --- import '@fontsource/inter/variable.css'; + +// Nunito +// Dosis --- + + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 385a57d..6b0b7a2 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -6,8 +6,9 @@ module.exports = { theme: { extend: { colors: { - primary: colors.blue, - secondary: colors.pink, + primary: 'var(--aw-color-primary)', + secondary: 'var(--aw-color-secondary)', + accent: 'var(--aw-color-accent)', }, fontFamily: { sans: ['var(--aw-font-sans)', ...defaultTheme.fontFamily.sans], From a01fd3880f31b3186edf675feb6b487ea071a839 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sun, 22 Jan 2023 00:40:14 -0500 Subject: [PATCH 11/11] Improve design using custom variables --- src/components/blog/GridItem.astro | 4 ++-- src/components/blog/HighlightedPosts.astro | 4 ++-- src/components/blog/LatestPosts.astro | 4 ++-- src/components/blog/ListItem.astro | 8 ++++---- src/components/blog/SinglePost.astro | 12 ++++++------ src/components/blog/Tags.astro | 2 +- src/components/common/ToggleTheme.astro | 2 +- src/components/widgets/Announcement.astro | 4 ++-- src/components/widgets/CallToAction.astro | 2 +- src/components/widgets/Content.astro | 14 +++++++------- src/components/widgets/FAQs.astro | 8 ++++---- src/components/widgets/Features.astro | 8 ++++---- src/components/widgets/Features2.astro | 8 ++++---- src/components/widgets/Footer.astro | 12 ++++++------ src/components/widgets/Header.astro | 16 ++++++++++------ src/components/widgets/Hero.astro | 2 +- src/components/widgets/Note.astro | 2 +- src/components/widgets/Stats.astro | 6 +++--- src/components/widgets/Steps.astro | 10 +++++----- src/components/widgets/Steps2.astro | 8 ++++---- src/layouts/BaseLayout.astro | 2 +- src/layouts/MarkdownLayout.astro | 2 +- src/layouts/PageLayout.astro | 2 +- src/pages/404.astro | 4 ++-- src/pages/index.astro | 11 +++++------ 25 files changed, 80 insertions(+), 77 deletions(-) diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro index 95fd1ed..a873018 100644 --- a/src/components/blog/GridItem.astro +++ b/src/components/blog/GridItem.astro @@ -39,12 +39,12 @@ const image = await findImage(post.image); ) : ( {post.title} ) } -

{post.excerpt || post.description}

+

{post.excerpt || post.description}

diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro index 08932dc..875ab84 100644 --- a/src/components/blog/HighlightedPosts.astro +++ b/src/components/blog/HighlightedPosts.astro @@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds); { allPostsText && allPostsLink && ( {allPostsText} » @@ -46,7 +46,7 @@ const posts = await findPostsByIds(postIds); } - {information &&

} + {information &&

} diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro index 96244e2..e608b22 100644 --- a/src/components/blog/LatestPosts.astro +++ b/src/components/blog/LatestPosts.astro @@ -37,7 +37,7 @@ const posts = await findLatestPosts({ count }); { allPostsText && allPostsLink && ( {allPostsText} » @@ -46,7 +46,7 @@ const posts = await findLatestPosts({ count }); } - {information &&

} + {information &&

} diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro index 039389b..06fe825 100644 --- a/src/components/blog/ListItem.astro +++ b/src/components/blog/ListItem.astro @@ -43,15 +43,15 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';

- + ~ {Math.ceil(post.readingTime)} min read
-

+

{ link ? ( - + {post.title} ) : ( @@ -61,7 +61,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';

- {post.excerpt &&

{post.excerpt}

} + {post.excerpt &&

{post.excerpt}

}
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro index ad9919d..32b7f1a 100644 --- a/src/components/blog/SinglePost.astro +++ b/src/components/blog/SinglePost.astro @@ -22,10 +22,10 @@ const { post, url } = Astro.props;

- - ~ { - Math.ceil(post.readingTime) - } min read + + ~ { + Math.ceil(post.readingTime) + } min read

{post.excerpt}

@@ -60,7 +60,7 @@ const { post, url } = Astro.props; }

{ post.Content ? ( diff --git a/src/components/blog/Tags.astro b/src/components/blog/Tags.astro index a285652..122cd91 100644 --- a/src/components/blog/Tags.astro +++ b/src/components/blog/Tags.astro @@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm' } = Astro.props; ) : ( {tag} diff --git a/src/components/common/ToggleTheme.astro b/src/components/common/ToggleTheme.astro index a49986e..5591ad0 100644 --- a/src/components/common/ToggleTheme.astro +++ b/src/components/common/ToggleTheme.astro @@ -13,7 +13,7 @@ export interface Props { const { label = 'Toggle between Dark and Light mode', class: - className = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center', + className = 'text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center', iconClass = 'w-6 h-6', iconName = 'tabler:sun', } = Astro.props; diff --git a/src/components/widgets/Announcement.astro b/src/components/widgets/Announcement.astro index be58a2b..41a2586 100644 --- a/src/components/widgets/Announcement.astro +++ b/src/components/widgets/Announcement.astro @@ -3,9 +3,9 @@ import { getPermalink } from '~/utils/permalinks'; ---