mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #94 from prototypa/astro2

Browse Source 
Improve structure and add custom css variables
This commit is contained in:
prototypa
2023-01-22 00:41:51 -05:00
committed by GitHub
parent f0d6a4960e a01fd3880f
commit 3dd103eaa2
40 changed files with 220 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
.vscode/css-custom-data.json vendored Normal file
View File

@ -0,0 +1,17 @@
{
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "@tailwind tailwindcss"
},
{
"name": "@layer",
"description": "@layer tailwindcss"
},
{
"name": "@apply",
"description": "@apply tailwindcss"
}
]
}

1
.vscode/settings.json vendored
View File

@ -1,4 +1,5 @@
{
"css.customData": ["./vscode/css-custom-data.json"],
"eslint.validate": [
"javascript",
"javascriptreact",

24
src/assets/styles/base.css
View File

@ -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 {

4
src/components/blog/GridItem.astro
View File

@ -39,12 +39,12 @@ const image = await findImage(post.image);
) : (
<a
href={getPermalink(post.slug, 'post')}
class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200"
class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
>
{post.title}
</a>
)
}
</h3>
<p class="text-gray-500 dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
<p class="text-muted dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
</article>

4
src/components/blog/HighlightedPosts.astro
View File

@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
{
allPostsText && allPostsLink && (
<a
class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 md:mb-0"
href={allPostsLink}
>
{allPostsText} »
@ -46,7 +46,7 @@ const posts = await findPostsByIds(postIds);
}
</div>
{information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
{information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
</div>
<Grid posts={posts} />

57
src/components/blog/LatestPosts.astro
View File

@ -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 });
---
<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 <a
class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={getBlogPermalink()}>Blog</a
>
</span>
</h2>
<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
<div class="flex flex-col lg:justify-between lg:flex-row mb-8">
<div class="md:max-w-sm">
{
title && (
<h2
class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
set:html={title}
/>
)
}
{
allPostsText && allPostsLink && (
<a
class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
href={allPostsLink}
>
{allPostsText} »
</a>
)
}
</div>
<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
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.
</p>
{information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
</div>
<Grid posts={posts} />
</section>
</section>

10
src/components/blog/ListItem.astro
View File

@ -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';
@ -43,15 +43,15 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
<header>
<div class="mb-1">
<span class="text-sm">
<Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 text-gray-500 dark:text-gray-400" />
<Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
{Math.ceil(post.readingTime)} min read
</span>
</div>
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading text-gray-700 dark:text-slate-300">
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
{
link ? (
<a class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200" href={link}>
<a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
{post.title}
</a>
) : (
@ -61,7 +61,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
</h2>
</header>
{post.excerpt && <p class="flex-grow text-gray-500 dark:text-slate-400 text-lg">{post.excerpt}</p>}
{post.excerpt && <p class="flex-grow text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>}
<footer class="mt-5">
<PostTags tags={post.tags} />
</footer>

14
src/components/blog/SinglePost.astro
View File

@ -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';
@ -22,10 +22,10 @@ const { post, url } = Astro.props;
<header class={post.image ? '' : ''}>
<div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
<p>
<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 text-gray-500 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
Math.ceil(post.readingTime)
} min read
<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
Math.ceil(post.readingTime)
} min read
</p>
</div>
<h1
@ -34,7 +34,7 @@ const { post, url } = Astro.props;
{post.title}
</h1>
<p
class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-gray-500 dark:text-slate-400 font-medium text-justify"
class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-slate-400 text-justify"
>
{post.excerpt}
</p>
@ -60,7 +60,7 @@ const { post, url } = Astro.props;
}
</header>
<div
class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-800 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
>
{
post.Content ? (

2
src/components/common/Tags.astro → src/components/blog/Tags.astro
View File

@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
) : (
<a
href={getPermalink(tag, 'tag')}
class="text-gray-600 dark:text-slate-300 hover:text-primary-800 dark:hover:text-gray-200"
class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
>
{tag}
</a>

23
src/components/common/CustomStyles.astro Normal file
View File

@ -0,0 +1,23 @@
---
import '@fontsource/inter/variable.css';
// Nunito
// Dosis
---
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
<style is:inline is:global>
:root {
--aw-font-sans: 'InterVariable';
--aw-font-serif: var(--aw-font-sans);
--aw-font-heading: 'Nunito'; /* var(--aw-font-sans); */
--aw-color-primary: rgb(30 64 175);
--aw-color-secondary: rgb(30 58 138);
--aw-color-accent: rgb(109 40 217);
--aw-color-text-page: rgb(17 24 39);
--aw-color-text-muted: rgb(75 85 99);
--aw-color-bg-page: rgb(255 255 255);
}
</style>

5
src/components/common/Fonts.astro
View File

@ -1,5 +0,0 @@
---
import '@fontsource/inter/variable.css';
---
<!-- Or Google Fonts -->

6
src/components/common/MetaTags.astro
View File

@ -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 =
}}
/>
<Fonts />
<CustomStyles />
<!-- Google Site Verification -->
{SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}

27
src/components/common/SocialShare.astro
View File

@ -11,20 +11,35 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
---
<div class={className}>
<span class="align-super font-bold dark:text-slate-400">Share:</span>
<span class="align-super font-bold text-gray-400 dark:text-slate-400">Share:</span>
<button class="ml-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
><Icon name="logos:twitter" class="w-6 h-6" />
><Icon
name="ri:twitter-fill"
class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
/>
</button>
<button class="ml-2" title="Facebook Share" data-aw-social-share="facebook" data-aw-url={url}
><Icon name="logos:facebook" class="w-6 h-6" />
><Icon
name="ri:facebook-box-fill"
class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
/>
</button>
<button class="ml-2" title="Linkedin Share" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
><Icon name="logos:linkedin-icon" class="w-6 h-6" />
><Icon
name="ri:linkedin-box-fill"
class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
/>
</button>
<button class="ml-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
><Icon name="logos:whatsapp" class="w-6 h-6" />
><Icon
name="ri:whatsapp-fill"
class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
/>
</button>
<button class="ml-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
><Icon name="tabler:mail" class="w-6 h-6" />
><Icon
name="ri:mail-fill"
class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
/>
</button>
</div>

2
src/components/common/ToggleTheme.astro
View File

@ -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;

4
src/components/widgets/Announcement.astro
View File

@ -3,9 +3,9 @@ import { getPermalink } from '~/utils/permalinks';
---
<div
class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
>
<span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
<span class="text-xs py-0.5 px-1 bg-primary dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
<a
href={getPermalink('useful-resources-to-create-websites', 'post')}
class="hover:underline text-gray-200 dark:text-slate-400"

2
src/components/widgets/CallToAction.astro
View File

@ -34,7 +34,7 @@ const {
/>
)
}
{subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
{
typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />

14
src/components/widgets/Content.astro
View File

@ -31,14 +31,14 @@ const {
} = Astro.props;
---
<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
<section class={`bg-blue-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
{
(title || subtitle || highlight) && (
<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -50,7 +50,7 @@ const {
)}
{subtitle && (
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@ -59,7 +59,7 @@ const {
<div class="mx-auto max-w-screen-xl p-4 md:px-8">
<div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
<div class="md:basis-1/2 self-center">
{content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
{content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
{
items && (
@ -67,13 +67,13 @@ const {
{items.map(({ title: title2, description, icon }) => (
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-800 text-gray-50">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-gray-50">
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
</div>
</div>
<div class="ml-4">
{title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
{title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
</div>
</div>
))}

8
src/components/widgets/FAQs.astro
View File

@ -28,7 +28,7 @@ const {
<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -38,7 +38,7 @@ const {
set:html={title}
/>
)}
{subtitle && <p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
</div>
)
}
@ -52,10 +52,10 @@ const {
{subitems.map(({ question, answer }) => (
<div>
<h3 class="mb-4 text-xl font-bold">
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-800 inline-block" />
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary inline-block" />
{question}
</h3>
{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer} />}
{answer && <div class="text-muted dark:text-gray-400" set:html={answer} />}
</div>
))}
</div>

8
src/components/widgets/Features.astro
View File

@ -29,7 +29,7 @@ const {
<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -41,7 +41,7 @@ const {
)}
{subtitle && (
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@ -53,13 +53,13 @@ const {
{subitems.map(({ title, description, icon }) => (
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-800 dark:bg-primary-700">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary dark:bg-blue-700">
{icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">{title}</h3>
<p class="text-gray-600 dark:text-slate-400" set:html={description} />
<p class="text-muted dark:text-slate-400" set:html={description} />
</div>
</div>
))}

8
src/components/widgets/Features2.astro
View File

@ -23,7 +23,7 @@ const {
---
<section class="relative">
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 -mb-12">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
{
@ -31,7 +31,7 @@ const {
<div class="mb-8 md:mx-auto text-center max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -44,7 +44,7 @@ const {
{subtitle && (
<p
class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"
class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400"
set:html={subtitle}
/>
)}
@ -59,7 +59,7 @@ const {
<Icon name={icon} class="w-10 h-10" />
<div class="ml-4 text-xl font-bold">{title}</div>
</div>
{description && <p class="text-gray-500 dark:text-gray-400 text-md mt-4" set:html={description} />}
{description && <p class="text-muted dark:text-gray-400 text-md mt-4" set:html={description} />}
</div>
))
}

12
src/components/widgets/Footer.astro
View File

@ -34,11 +34,11 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
</div>
<div class="text-sm text-gray-600">
<div class="text-sm text-muted">
{
secondaryLinks.map(({ text, href }) => (
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
href={href}
set:html={text}
/>
@ -49,13 +49,13 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{
links.map(({ title, links }) => (
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
<div class="dark:text-gray-300 font-medium mb-2">{title}</div>
{links && Array.isArray(links) && links.length > 0 && (
<ul class="text-sm">
{links.map(({ text, href, ariaLabel }) => (
<li class="mb-2">
<a
class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
href={href}
aria-label={ariaLabel}
>
@ -76,7 +76,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{socialLinks.map(({ ariaLabel, href, text, icon }) => (
<li>
<a
class="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"
class="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"
aria-label={ariaLabel}
href={href}
>
@ -91,7 +91,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
)
}
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
<div class="text-sm mr-4 dark:text-slate-400">
<Fragment set:html={footNote} />
</div>
</div>

16
src/components/widgets/Header.astro
View File

@ -22,14 +22,18 @@ interface MenuLink extends Link {
}
export interface Props {
links: Array<MenuLink>;
actions: Array<ActionLink>;
links?: Array<MenuLink>;
actions?: Array<ActionLink>;
isFixed?: boolean;
}
const { links = [], actions = [] } = Astro.props;
const { links = [], actions = [], isFixed = false } = Astro.props;
---
<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header">
<header
class:list={[{ sticky: isFixed }, 'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100']}
id="header"
>
<div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
<div class="flex justify-between">
<a class="flex items-center" href={getHomePermalink()}>
@ -41,7 +45,7 @@ const { links = [], actions = [] } = Astro.props;
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-gray-800 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
aria-label="Main navigation"
>
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
@ -84,7 +88,7 @@ const { links = [], actions = [] } = Astro.props;
<ToggleTheme iconClass="w-5 h-5" />
<a
class="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"
class="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"
aria-label="RSS Feed"
href={getAsset('/rss.xml')}
>

2
src/components/widgets/Hero.astro
View File

@ -41,7 +41,7 @@ const {
)
}
<div class="max-w-3xl mx-auto">
{subtitle && <p class="text-xl text-gray-600 mb-6 dark:text-slate-300" set:html={subtitle} />}
{subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
{
callToAction && (

2
src/components/widgets/Note.astro
View File

@ -2,7 +2,7 @@
import { Icon } from 'astro-icon';
---
<section class="bg-primary-50 dark:bg-slate-800">
<section class="bg-blue-50 dark:bg-slate-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
<span class="font-bold">
<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span

6
src/components/widgets/Stats.astro
View File

@ -24,7 +24,7 @@ const {
(title || subtitle || highlight) && (
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
{highlight && (
<p class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase">
<p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
{highlight}
</p>
)}
@ -35,7 +35,7 @@ const {
/>
)}
{subtitle && (
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@ -44,7 +44,7 @@ const {
{
items.map(({ name, value }) => (
<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-800 dark:text-primary-600 font-heading">
<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary dark:text-blue-600 font-heading">
{value}
</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">

10
src/components/widgets/Steps.astro
View File

@ -33,11 +33,11 @@ const {
<div class="flex flex-col items-center mr-4">
<div>
{index !== items.length - 1 ? (
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 dark:border-primary-700 border-2">
{icon && <Icon name={icon} class="w-6 h-6 text-primary-800 dark:text-slate-200" />}
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary dark:border-blue-700 border-2">
{icon && <Icon name={icon} class="w-6 h-6 text-primary dark:text-slate-200" />}
</div>
) : (
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 border-2 bg-primary-800 dark:bg-primary-700 dark:border-primary-700">
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary border-2 bg-primary dark:bg-blue-700 dark:border-blue-700">
<Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
</div>
)}
@ -45,8 +45,8 @@ const {
<div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
</div>
<div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
{title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
{description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
{title && <p class="mb-2 text-xl font-bold dark:text-slate-300" set:html={title} />}
{description && <p class="text-muted dark:text-slate-400" set:html={description} />}
</div>
</div>
))

8
src/components/widgets/Steps2.astro
View File

@ -73,13 +73,13 @@ const {
{
highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)
}
{title && <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
{subtitle && <p class="mb-8 text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="mb-8 text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
<div class="w-full">
{
@ -106,13 +106,13 @@ const {
? items.map(({ title: title2, description, icon }, index) => (
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-100 text-primary-800">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
{icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
</span>
</div>
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
<p class="text-gray-500 dark:text-gray-400" set:html={description} />
<p class="text-muted dark:text-gray-400" set:html={description} />
</div>
</li>
))

4
src/content/config.ts
View File

@ -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,
};

0
src/content/blog/astrowind-template-in-depth.md → src/content/posts/astrowind-template-in-depth.md
View File

0
src/content/blog/get-started-website-with-astro-tailwind-css.md → src/content/posts/get-started-website-with-astro-tailwind-css.md
View File

0
src/content/blog/how-to-customize-astrowind-to-your-brand.md → src/content/posts/how-to-customize-astrowind-to-your-brand.md
View File

0
src/content/blog/markdown-elements-demo-post.mdx → src/content/posts/markdown-elements-demo-post.mdx
View File

0
src/content/blog/useful-resources-to-create-websites.md → src/content/posts/useful-resources-to-create-websites.md
View File

2
src/layouts/BaseLayout.astro
View File

@ -21,7 +21,7 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
<MetaTags {...meta} />
</head>
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-dark">
<body class="antialiased text-page bg-light dark:text-slate-300 tracking-tight dark:bg-dark">
<slot />
<BasicScripts />
<style is:global>

2
src/layouts/MarkdownLayout.astro
View File

@ -16,7 +16,7 @@ const meta: MetaSEO = {
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
<h1 class="font-bold font-heading text-3xl md:text-4xl leading-tighter tracking-tighter">{frontmatter.title}</h1>
<div
class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
>
<slot />
</div>

2
src/layouts/PageLayout.astro
View File

@ -17,7 +17,7 @@ const { meta } = Astro.props;
<Layout {meta}>
<Announcement />
<Header {...headerData} />
<Header {...headerData} isFixed />
<main>
<slot />
</main>

4
src/pages/404.astro
View File

@ -11,10 +11,10 @@ const title = `Error 404`;
<div class="max-w-md text-center">
<h2 class="mb-8 font-bold text-9xl">
<span class="sr-only">Error</span>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
<span class="text-primary">404</span>
</h2>
<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
<p class="mt-4 mb-8 text-lg text-muted dark:text-slate-400">
But dont worry, you can find plenty of other things on our homepage.
</p>
<a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>

17
src/pages/index.astro
View File

@ -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';
@ -30,7 +30,7 @@ const meta = {
>
<Fragment slot="title">
Free template for <span class="hidden lg:inline">create your website <br />with</span>
<span class="text-violet-700 dark:text-white highlight"> Astro v2</span> + Tailwind CSS
<span class="text-accent dark:text-white highlight"> Astro v2</span> + Tailwind CSS
</Fragment>
<Fragment slot="subtitle">
@ -38,7 +38,7 @@ const meta = {
<span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2 +
Tailwind CSS.</span
>
<span class="block mb-1 sm:hidden font-bold text-primary-600">AstroWind: Production-ready.</span> Suitable for Startups,
<span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for Startups,
Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
</Fragment>
</Hero>
@ -102,7 +102,6 @@ const meta = {
<Content
highlight="Inside template"
title="And what's inside? ..."
content="Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates."
items={[
{
title: 'Per ei quaeque sensibus',
@ -124,7 +123,13 @@ const meta = {
src: import('~/assets/images/caos.jpg'),
alt: 'Colorful Image',
}}
/>
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
tacimates.
</Fragment>
</Content>
<!-- Content Widget **************** -->
@ -257,7 +262,7 @@ const meta = {
<!-- HighlightedPosts Widget ******* -->
<HighlightedPosts
<LatestPosts
title="Find out more content in our Blog"
information={`The blog is 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.

6
src/utils/blog.ts
View File

@ -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<Post> => {
const getNormalizedPost = async (post: CollectionEntry<'posts'>): Promise<Post> => {
const { id, slug = '', data } = post;
const { Content, remarkPluginFrontmatter } = await post.render();
@ -28,7 +28,7 @@ const getNormalizedPost = async (post: CollectionEntry<'blog'>): Promise<Post> =
};
const load = async function (): Promise<Array<Post>> {
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))
@ -82,5 +82,5 @@ export const findLatestPosts = async ({ count }: { count?: number }): Promise<Ar
const _count = count || 4;
const posts = await fetchPosts();
return posts ? posts.slice(_count * -1) : [];
return posts ? posts.slice(0, _count) : [];
};

34
tailwind.config.cjs
View File

@ -6,39 +6,17 @@ 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: ["'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 <head>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
*/
// 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",
// };