From d6f3055e31974e6aa1193365a4ad82c10784b7e0 Mon Sep 17 00:00:00 2001 From: prototypa Date: Thu, 27 Jul 2023 21:52:04 -0400 Subject: [PATCH] Add support for new config.yaml --- README.md | 112 ++++++++------ src/assets/styles/tailwind.css | 13 +- src/components/CustomStyles.astro | 21 ++- src/components/Logo.astro | 4 +- src/components/blog/GridItem.astro | 9 +- src/components/blog/HighlightedPosts.astro | 53 ------- src/components/blog/LatestPosts.astro | 53 ------- src/components/blog/ListItem.astro | 9 +- src/components/blog/SinglePost.astro | 10 +- src/components/blog/Tags.astro | 4 +- src/components/common/Analytics.astro | 8 + src/components/common/ApplyColorMode.astro | 33 +++++ src/components/common/BasicScripts.astro | 4 +- src/components/common/CommonMeta.astro | 8 + src/components/common/MetaTags.astro | 88 ----------- src/components/common/Metadata.astro | 68 +++++++++ src/components/common/SiteVerification.astro | 5 + src/components/common/ToggleTheme.astro | 4 +- .../widgets/BlogHighlightedPosts.astro | 64 ++++++++ src/components/widgets/BlogLatestPosts.astro | 64 ++++++++ src/components/widgets/Content.astro | 2 +- src/components/widgets/Footer.astro | 4 +- src/components/widgets/Steps.astro | 3 +- src/config.mjs | 62 -------- src/content/config.ts | 63 ++++++-- .../post/astrowind-template-in-depth.mdx | 4 +- ...started-website-with-astro-tailwind-css.md | 4 +- ...ow-to-customize-astrowind-to-your-brand.md | 3 +- .../post/markdown-elements-demo-post.mdx | 1 - src/env.d.ts | 1 + src/layouts/BaseLayout.astro | 37 ----- src/layouts/Layout.astro | 49 ++++++ src/layouts/MarkdownLayout.astro | 6 +- src/layouts/PageLayout.astro | 10 +- src/pages/404.astro | 4 +- src/pages/[...blog]/[...page].astro | 28 ++-- .../[...blog]/[category]/[...page].astro | 41 ++--- src/pages/[...blog]/[tag]/[...page].astro | 41 ++--- src/pages/[...blog]/index.astro | 47 +++--- src/pages/about.astro | 4 +- src/pages/contact.astro | 4 +- src/pages/index.astro | 12 +- src/pages/landing/mobile-app.astro | 4 +- src/pages/landing/saas.astro | 4 +- src/pages/landing/startup.astro | 4 +- src/pages/pricing.astro | 4 +- src/pages/rss.xml.ts | 12 +- src/pages/services.astro | 4 +- src/types.d.ts | 81 +++++++--- src/utils/blog.ts | 140 ++++++++++++++---- src/utils/images.ts | 65 +++++++- src/utils/permalinks.ts | 21 +-- src/utils/utils.ts | 45 +++++- tailwind.config.cjs | 3 +- 54 files changed, 860 insertions(+), 591 deletions(-) delete mode 100644 src/components/blog/HighlightedPosts.astro delete mode 100644 src/components/blog/LatestPosts.astro create mode 100644 src/components/common/Analytics.astro create mode 100644 src/components/common/ApplyColorMode.astro create mode 100644 src/components/common/CommonMeta.astro delete mode 100644 src/components/common/MetaTags.astro create mode 100644 src/components/common/Metadata.astro create mode 100644 src/components/common/SiteVerification.astro create mode 100644 src/components/widgets/BlogHighlightedPosts.astro create mode 100644 src/components/widgets/BlogLatestPosts.astro delete mode 100644 src/config.mjs delete mode 100644 src/layouts/BaseLayout.astro create mode 100644 src/layouts/Layout.astro diff --git a/README.md b/README.md index 00f1b6d..4b42319 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,7 @@ Inside AstroWind template, you'll see the following folders and files: │ │ ├-- rss.xml.ts │ │ └── ... │ ├── utils/ -│ ├── config.mjs +│ ├── config.yaml │ └── navigation.js ├── package.json ├── astro.config.mjs @@ -145,65 +145,79 @@ All commands are run from the root of the project, from a terminal: ### Configuration -Basic configuration file: `./src/config.mjs` +Basic configuration file: `./src/config.yaml` -```javascript -const CONFIG = { - name: 'Example', +```yaml +site: + name: AstroWind + site: 'https://astrowind.vercel.app' + base: '/' # Change this if you need to deploy to Github Pages, for example + trailingSlash: false # Generate permalinks with or without "/" at the end - origin: 'https://example.com', - basePathname: '/', // Change this if you need to deploy to Github Pages, for example - trailingSlash: false, // Generate permalinks with or without "/" at the end + googleSiteVerificationId: orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M - title: 'Example - This is the homepage title of Example', // Default seo title - description: 'This is the homepage description of Example', // Default seo description - defaultImage: 'image.jpg', // Default seo image +# Default SEO metadata +metadata: + title: + default: AstroWind + template: '%s — AstroWind' + description: "\U0001F680 Suitable for Startups, Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs." + robots: + index: true + follow: true + openGraph: + siteName: AstroWind + images: + - url: '~/assets/images/default.jpg' + width: 1200 + height: 628 + type: website + twitter: + handle: '@onwidget' + site: '@onwidget' + cardType: summary_large_image - defaultTheme: 'system', // Values: "system" | "light" | "dark" | "light:only" | "dark:only" +i18n: + language: en + textDirection: ltr - language: 'en', // Default language - textDirection: 'ltr', // Default html text direction +apps: + blog: + isEnabled: true + postsPerPage: 6 - dateFormatter: new Intl.DateTimeFormat('en', { - // Date format - year: 'numeric', - month: 'short', - day: 'numeric', - timeZone: 'UTC', - }), + post: + isEnabled: true + permalink: '/%slug%' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category% + robots: + index: true - googleAnalyticsId: false, // Or "G-XXXXXXXXXX", - googleSiteVerificationId: false, // Or some value, + list: + isEnabled: true + pathname: 'blog' # Blog main path, you can change this to "articles" (/articles) + robots: + index: true - blog: { - disabled: false, - postsPerPage: 4, + category: + isEnabled: true + pathname: 'category' # Category main path /category/some-category, you can change this to "group" (/group/some-category) + robots: + index: true - post: { - permalink: '/%slug%', // variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category% - noindex: false, - disabled: false, - }, + tag: + isEnabled: true + pathname: 'tag' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category) + robots: + index: false - list: { - pathname: 'blog', // Blog main path, you can change this to "articles" (/articles) - noindex: false, - disabled: false, - }, +analytics: + vendors: + googleAnalytics: + isEnabled: false + id: null # or "G-XXXXXXXXXX" - category: { - pathname: 'category', // Category main path /category/some-category - noindex: true, - disabled: false, - }, - - tag: { - pathname: 'tag', // Tag main path /tag/some-tag - noindex: true, - disabled: false, - }, - }, -}; +ui: + theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only" ```
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index 0b56fa0..3ef3521 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -6,6 +6,15 @@ margin-top: 0; } +@layer utilities { + .bg-page { + background-color: var(--aw-color-bg-page); + } + .bg-dark { + background-color: var(--aw-color-bg-page-dark); + } +} + @layer components { .text-page { color: var(--aw-color-text-page); @@ -19,10 +28,6 @@ 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; } diff --git a/src/components/CustomStyles.astro b/src/components/CustomStyles.astro index 9d2a12d..11254ef 100644 --- a/src/components/CustomStyles.astro +++ b/src/components/CustomStyles.astro @@ -28,8 +28,27 @@ import '@fontsource-variable/inter'; --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-heading: rgb(0 0 0); + --aw-color-text-default: rgb(16 16 16); --aw-color-text-muted: rgb(16 16 16 / 66%); --aw-color-bg-page: rgb(255 255 255); + + --aw-color-bg-page-dark: rgb(3 6 32); + } + + .dark { + --aw-font-sans: 'Inter Variable'; + --aw-font-serif: var(--aw-font-sans); + --aw-font-heading: 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-heading: rgb(0 0 0); + --aw-color-text-default: rgb(229 236 246); + --aw-color-text-muted: rgb(229 236 246 / 66%); + --aw-color-bg-page: var(--aw-color-bg-page-dark); } \ No newline at end of file diff --git a/src/components/Logo.astro b/src/components/Logo.astro index 3311680..58befe6 100644 --- a/src/components/Logo.astro +++ b/src/components/Logo.astro @@ -1,7 +1,7 @@ --- -import { SITE } from '~/config.mjs'; +import { SITE_CONFIG } from '~/utils/config'; --- - 🚀 {SITE?.name} + 🚀 {SITE_CONFIG?.name} diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro index 470fcad..f3d0dcb 100644 --- a/src/components/blog/GridItem.astro +++ b/src/components/blog/GridItem.astro @@ -1,7 +1,8 @@ --- import { Picture } from '@astrojs/image/components'; +import type { ImageMetadata } from 'astro'; -import { BLOG } from '~/config.mjs'; +import { APP_BLOG_CONFIG } from '~/utils/config'; import type { Post } from '~/types'; import { findImage } from '~/utils/images'; @@ -12,7 +13,7 @@ export interface Props { } const { post } = Astro.props; -const image = await findImage(post.image); +const image = (await findImage(post.image)) as ImageMetadata | undefined; ---
@@ -38,7 +39,7 @@ const image = await findImage(post.image);

{ - BLOG?.post?.disabled ? ( + !APP_BLOG_CONFIG?.post?.isEnabled ? ( post.title ) : ( -

{post.excerpt || post.description}

+

{post.excerpt}

diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro deleted file mode 100644 index 8c63662..0000000 --- a/src/components/blog/HighlightedPosts.astro +++ /dev/null @@ -1,53 +0,0 @@ ---- -import Grid from '~/components/blog/Grid.astro'; - -import { getBlogPermalink } from '~/utils/permalinks'; -import { findPostsByIds } from '~/utils/blog'; - -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'), - postIds = [], -} = Astro.props; - -const posts = await findPostsByIds(postIds); ---- - -
-
-
- { - title && ( -

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

- - {information &&

} -

- - -
diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro deleted file mode 100644 index 03ed2ad..0000000 --- a/src/components/blog/LatestPosts.astro +++ /dev/null @@ -1,53 +0,0 @@ ---- -import Grid from '~/components/blog/Grid.astro'; - -import { getBlogPermalink } from '~/utils/permalinks'; -import { findLatestPosts } from '~/utils/blog'; - -export interface Props { - title?: string; - allPostsText?: string; - allPostsLink?: string | URL; - information?: string; - count?: number; -} - -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 }); ---- - -
-
-
- { - title && ( -

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

- - {information &&

} -

- - -
\ No newline at end of file diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro index d2365e3..11d1d90 100644 --- a/src/components/blog/ListItem.astro +++ b/src/components/blog/ListItem.astro @@ -1,9 +1,10 @@ --- -import { Icon } from 'astro-icon/components'; import { Picture } from '@astrojs/image/components'; +import type { ImageMetadata } from 'astro'; +import { Icon } from 'astro-icon/components'; import PostTags from '~/components/blog/Tags.astro'; -import { BLOG } from '~/config.mjs'; +import { APP_BLOG_CONFIG } from '~/utils/config'; import type { Post } from '~/types'; import { getPermalink } from '~/utils/permalinks'; @@ -15,9 +16,9 @@ export interface Props { } const { post } = Astro.props; -const image = await findImage(post.image); +const image = (await findImage(post.image)) as ImageMetadata | undefined; -const link = !BLOG?.post?.disabled ? getPermalink(post.permalink, 'post') : ''; +const link = APP_BLOG_CONFIG?.post?.isEnabled ? getPermalink(post.permalink, 'post') : ''; ---
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro index 6694c97..7a4a3a6 100644 --- a/src/components/blog/SinglePost.astro +++ b/src/components/blog/SinglePost.astro @@ -16,6 +16,7 @@ export interface Props { } const { post, url } = Astro.props; +const Content = post?.Content || null; ---
@@ -57,7 +58,7 @@ const { post, url } = Astro.props; class="max-w-full lg:max-w-6xl mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700" widths={[400, 900]} sizes="(max-width: 900px) 400px, 900px" - alt={post.description || ''} + alt={post?.excerpt || ''} loading="eager" aspectRatio={16 / 9} width={900} @@ -77,11 +78,8 @@ const { post, url } = Astro.props; 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 ? ( - <> - {/* @ts-ignore */} - - + Content ? ( + ) : ( ) diff --git a/src/components/blog/Tags.astro b/src/components/blog/Tags.astro index 710ef84..9902572 100644 --- a/src/components/blog/Tags.astro +++ b/src/components/blog/Tags.astro @@ -1,7 +1,7 @@ --- import { getPermalink } from '~/utils/permalinks'; -import { BLOG } from '~/config.mjs'; +import { APP_BLOG_CONFIG } from '~/utils/config'; import type { Post } from '~/types'; export interface Props { @@ -23,7 +23,7 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals