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

Use Prettier

Browse Source
This commit is contained in:
prototypa
2022-09-11 03:51:55 -04:00
parent 51362812c8
commit d909adb658
52 changed files with 1487 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -25,7 +25,10 @@ module.exports = {
parser: '@typescript-eslint/parser',
extends: ['plugin:@typescript-eslint/recommended'],
rules: {
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
'@typescript-eslint/no-unused-vars': [
'error',
{ argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
],
'@typescript-eslint/no-non-null-assertion': 'off',
},
},

5
.prettierignore Normal file
View File

@ -0,0 +1,5 @@
dist
node_modules
.github
.changeset
*.md

16
.prettierrc Normal file
View File

@ -0,0 +1,16 @@
{
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": true,
"overrides": [
{
"files": [".*", "*.json", "*.md", "*.toml", "*.yml"],
"options": {
"useTabs": false
}
}
]
}

7
.vscode/extensions.json vendored
View File

@ -1,4 +1,9 @@
{
"recommendations": ["astro-build.astro-vscode", "bradlc.vscode-tailwindcss", "dbaeumer.vscode-eslint"],
"recommendations": [
"astro-build.astro-vscode",
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
],
"unwantedRecommendations": []
}

6
.vscode/settings.json vendored
View File

@ -5,5 +5,9 @@
"astro", // Enable .astro
"typescript", // Enable .ts
"typescriptreact" // Enable .tsx
]
],
"prettier.documentSelectors": ["**/*.astro"],
"[astro]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

22
astro.config.mjs
View File

@ -1,14 +1,14 @@
import path from "path";
import { fileURLToPath } from "url";
import path from 'path';
import { fileURLToPath } from 'url';
import { defineConfig } from "astro/config";
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import image from "@astrojs/image";
import partytown from "@astrojs/partytown";
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';
import image from '@astrojs/image';
import partytown from '@astrojs/partytown';
import { SITE } from "./src/config.mjs";
import { SITE } from './src/config.mjs';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
@ -18,7 +18,7 @@ export default defineConfig({
site: SITE.origin,
base: SITE.basePathname,
output: "static",
output: 'static',
integrations: [
tailwind({
@ -31,14 +31,14 @@ export default defineConfig({
/* Disable this integration if you don't use Google Analytics (or other external script). */
partytown({
config: { forward: ["dataLayer.push"] },
config: { forward: ['dataLayer.push'] },
}),
],
vite: {
resolve: {
alias: {
"~": path.resolve(__dirname, "./src"),
'~': path.resolve(__dirname, './src'),
},
},
},

7
package.json
View File

@ -7,9 +7,10 @@
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"format": "prettier -w .",
"lint:eslint": "eslint . --ext .js,.ts,.astro",
"subfont": "subfont -ir --no-fallbacks --silent --root dist",
"preview": "astro preview"
"subfont": "subfont -ir --no-fallbacks --silent --root dist"
},
"devDependencies": {
"@astrojs/image": "^0.7.0",
@ -27,6 +28,8 @@
"eslint-plugin-astro": "^0.19.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"limax": "^v2.1.0",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.5.4",
"reading-time": "^1.5.0",
"subfont": "^6.9.0"
},

6
src/components/atoms/ExtraMetaTags.astro
View File

@ -1,7 +1,7 @@
---
import { SITE } from "~/config.mjs"
import { SITE } from '~/config.mjs';
---
<link rel="shortcut icon" href={`${SITE.basePathname}favicon.ico`} />
<link rel="icon" type="image/svg+xml" href={`${SITE.basePathname}favicon.svg`}>
<link rel="mask-icon" href={`${SITE.basePathname}favicon.svg`} color="#8D46E7">
<link rel="icon" type="image/svg+xml" href={`${SITE.basePathname}favicon.svg`} />
<link rel="mask-icon" href={`${SITE.basePathname}favicon.svg`} color="#8D46E7" />

2
src/components/atoms/Fonts.astro
View File

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

4
src/components/atoms/Logo.astro
View File

@ -2,5 +2,5 @@
---
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
🚀 AstroWind
</span>
🚀 AstroWind</span
>

8
src/components/atoms/Pagination.astro
View File

@ -1,6 +1,6 @@
---
import { Icon } from "astro-icon";
const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
import { Icon } from 'astro-icon';
const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
---
{
@ -10,7 +10,7 @@ const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } =
<a
href={prevUrl}
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
${!prevUrl ? "invisible" : ""}`}
${!prevUrl ? 'invisible' : ''}`}
>
<div class="flex flex-row align-middle">
<Icon name="tabler:arrow-left" class="w-6 h-6" />
@ -20,7 +20,7 @@ const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } =
<a
href={nextUrl}
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
!nextUrl ? "invisible" : ""
!nextUrl ? 'invisible' : ''
}`}
>
<div class="flex flex-row align-middle">

6
src/components/atoms/Tags.astro
View File

@ -1,7 +1,7 @@
---
import { getPermalink } from "~/utils/permalinks";
import { getPermalink } from '~/utils/permalinks';
const { tags, class: className = "text-sm" } = Astro.props;
const { tags, class: className = 'text-sm' } = Astro.props;
---
{
@ -9,7 +9,7 @@ const { tags, class: className = "text-sm" } = Astro.props;
<ul class={className}>
{tags.map((tag) => (
<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2">
<a href={getPermalink(tag, "tag")}>{tag}</a>
<a href={getPermalink(tag, 'tag')}>{tag}</a>
</li>
))}
</ul>

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

@ -1,15 +1,15 @@
---
import Picture from "~/components/core/Picture.astro";
import Picture from '~/components/core/Picture.astro';
import { findPostsByIds } from "~/utils/posts";
import { findImage } from "~/utils/images";
import { getPermalink } from "~/utils/permalinks";
import { findPostsByIds } from '~/utils/posts';
import { findImage } from '~/utils/images';
import { getPermalink } from '~/utils/permalinks';
const ids = [
"get-started-website-with-astro-tailwind-css",
"how-to-customize-astrowind-to-your-brand",
"useful-resources-to-create-websites",
"astrowind-template-in-depth",
'get-started-website-with-astro-tailwind-css',
'how-to-customize-astrowind-to-your-brand',
'useful-resources-to-create-websites',
'astrowind-template-in-depth',
];
const items = await Promise.all(
@ -44,7 +44,7 @@ const items = await Promise.all(
/>
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
<a
href={getPermalink(post.slug, "type")}
href={getPermalink(post.slug, 'type')}
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>
{post.title}

2
src/components/blog/List.astro
View File

@ -1,5 +1,5 @@
---
import Item from "~/components/blog/ListItem.astro";
import Item from '~/components/blog/ListItem.astro';
const { posts } = Astro.props;
---

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

@ -1,10 +1,10 @@
---
import Picture from "~/components/core/Picture.astro";
import PostTags from "~/components/atoms/Tags.astro";
import Picture from '~/components/core/Picture.astro';
import PostTags from '~/components/atoms/Tags.astro';
import { getPermalink } from "~/utils/permalinks";
import { findImage } from "~/utils/images";
import { getFormattedDate } from "~/utils/utils";
import { getPermalink } from '~/utils/permalinks';
import { findImage } from '~/utils/images';
import { getFormattedDate } from '~/utils/utils';
const { post } = Astro.props;
@ -12,7 +12,7 @@ const image = await findImage(post.image);
---
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
<a class="relative block group" href="#0">
<a class="relative block group" href={getPermalink(post.slug, 'post')}>
<div
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
>
@ -31,7 +31,7 @@ const image = await findImage(post.image);
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
<a
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={getPermalink(post.slug, "post")}
href={getPermalink(post.slug, 'post')}
>
{post.title}
</a>
@ -43,7 +43,8 @@ const image = await findImage(post.image);
<footer class="mt-4">
<div>
<span class="text-gray-500 dark:text-slate-400">
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~
{Math.ceil(post.readingTime)} min read
</span>
</div>
<div class="mt-4">

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

@ -1,8 +1,8 @@
---
import Picture from "~/components/core/Picture.astro";
import PostTags from "~/components/atoms/Tags.astro";
import Picture from '~/components/core/Picture.astro';
import PostTags from '~/components/atoms/Tags.astro';
import { getFormattedDate } from "~/utils/utils";
import { getFormattedDate } from '~/utils/utils';
const { post } = Astro.props;
---

30
src/components/core/BasicScripts.astro
View File

@ -8,12 +8,12 @@
// }
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add("dark");
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove("dark");
document.documentElement.classList.remove('dark');
}
function attachEvent(selector, event, fn) {
@ -26,23 +26,23 @@
}
window.onload = function () {
attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
elem.classList.toggle("expanded");
document.body.classList.toggle("overflow-hidden");
document.getElementById("menu")?.classList.toggle("hidden");
attachEvent('[data-aw-toggle-menu]', 'click', function (elem) {
elem.classList.toggle('expanded');
document.body.classList.toggle('overflow-hidden');
document.getElementById('menu')?.classList.toggle('hidden');
});
attachEvent("[data-aw-toggle-color-scheme]", "click", function () {
document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
});
};
window.onpageshow = function () {
const elem = document.querySelector("[data-aw-toggle-menu]");
const elem = document.querySelector('[data-aw-toggle-menu]');
if (elem) {
elem.classList.remove("expanded");
elem.classList.remove('expanded');
}
document.body.classList.remove("overflow-hidden");
document.getElementById("menu")?.classList.add("hidden");
document.body.classList.remove('overflow-hidden');
document.getElementById('menu')?.classList.add('hidden');
};
</script>

8
src/components/core/GoogleAnalytics.astro
View File

@ -1,7 +1,7 @@
---
const { id = "G-XXXXXXXXXX", partytown = false } = Astro.props;
const { id = 'G-XXXXXXXXXX', partytown = false } = Astro.props;
const attrs = partytown ? { type: "text/partytown" } : {};
const attrs = partytown ? { type: 'text/partytown' } : {};
---
<script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} {...attrs}></script>
@ -11,6 +11,6 @@ const attrs = partytown ? { type: "text/partytown" } : {};
function gtag() {
window.dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", id);
gtag('js', new Date());
gtag('config', id);
</script>

22
src/components/core/MetaTags.astro
View File

@ -1,13 +1,13 @@
---
import { getImage } from "@astrojs/image";
import { getRelativeUrlByFilePath } from "~/utils/directories";
import { getImage } from '@astrojs/image';
import { getRelativeUrlByFilePath } from '~/utils/directories';
import GoogleAnalytics from "~/components/core/GoogleAnalytics.astro";
import defaultImageSrc from "~/assets/images/default.png";
import GoogleAnalytics from '~/components/core/GoogleAnalytics.astro';
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 { SITE } from '~/config.mjs';
import Fonts from '../atoms/Fonts.astro';
import ExtraMetaTags from '../atoms/ExtraMetaTags.astro';
const { src: defaultImage } = await getImage({
src: defaultImageSrc,
@ -17,7 +17,7 @@ const { src: defaultImage } = await getImage({
const {
title = SITE.name,
description = "",
description = '',
image: _image = defaultImage,
canonical,
noindex = false,
@ -25,9 +25,9 @@ const {
} = Astro.props;
const image =
typeof _image === "string"
typeof _image === 'string'
? new URL(_image, Astro.site)
: _image && typeof _image["src"] !== "undefined"
: _image && typeof _image['src'] !== 'undefined'
? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
: null;
---
@ -39,7 +39,7 @@ const image =
<meta name="description" content={description} />
{canonical && <link rel="canonical" href={canonical} />}
<meta name="robots" content={`${noindex ? "noindex" : "index"}, ${nofollow ? "nofollow" : "follow"}`} />
<meta name="robots" content={`${noindex ? 'noindex' : 'index'}, ${nofollow ? 'nofollow' : 'follow'}`} />
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content={title} />

30
src/components/core/Picture.astro
View File

@ -1,5 +1,5 @@
---
import { getPicture } from "@astrojs/image";
import { getPicture } from '@astrojs/image';
const {
src,
@ -7,33 +7,37 @@ const {
sizes,
widths,
aspectRatio = 1,
formats = ["avif", "webp"],
loading = "lazy",
decoding = "async",
class: className = "",
formats = ['avif', 'webp'],
loading = 'lazy',
decoding = 'async',
class: className = '',
...attrs
} = Astro.props;
let picture = null;
try {
picture = src && await getPicture({
picture =
src &&
(await getPicture({
src,
widths,
formats,
aspectRatio,
})
}
catch (e) {
}));
} catch (e) {
// continue regardless of error
}
const { image = {}, sources = [] } = picture || {}
const { image = {}, sources = [] } = picture || {};
---
{ (src && image?.src) &&
{
src && image?.src && (
<picture {...attrs}>
{sources.map((attrs) =>
<source {...attrs} {sizes} />)}
{sources.map((attrs) => (
<source {...attrs} sizes={sizes} />
))}
<img {...image} {loading} {decoding} {alt} class={className} />
</picture>
)
}

10
src/components/core/ToggleMenu.astro
View File

@ -1,12 +1,12 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
const {
label = "Toggle Menu",
label = 'Toggle Menu',
class:
className = "ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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 transition",
iconClass = "w-6 h-6",
iconName = "tabler:menu",
className = 'ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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 transition',
iconClass = 'w-6 h-6',
iconName = 'tabler:menu',
} = Astro.props;
---

10
src/components/core/ToggleTheme.astro
View File

@ -1,12 +1,12 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
const {
label = "Toggle between Dark and Light mode",
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",
iconClass = "w-6 h-6",
iconName = "tabler:sun",
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',
iconClass = 'w-6 h-6',
iconName = 'tabler:sun',
} = Astro.props;
---

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

@ -1,5 +1,5 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
---
<section class="relative">

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

@ -1,5 +1,5 @@
---
import { getHomePermalink } from "~/utils/permalinks";
import { getHomePermalink } from '~/utils/permalinks';
---
<section class="flex items-center h-full p-16">
@ -17,8 +17,8 @@ import { getHomePermalink } from "~/utils/permalinks";
rel="noopener noreferrer"
href={getHomePermalink()}
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
>Back to homepage
</a>
>Back to homepage</a
>
</div>
</div>
</section>

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

@ -1,16 +1,16 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
const items = [
[
{
question: "What do I need to start?",
question: 'What do I need to start?',
answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
Many say exploration is part of our destiny, but it’s actually our duty to future generations.`,
},
{
question: "How to install the Astro + Tailwind CSS template?",
question: 'How to install the Astro + Tailwind CSS template?',
answer: `Well, the way they make shows is, they make one show. That show's called a pilot.
Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.`,
@ -26,13 +26,13 @@ const items = [
answer: `Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.`,
},
{
question: "What is something that you would really like to try again?",
question: 'What is something that you would really like to try again?',
answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.`,
},
{
question: "If you could only ask one question to each person you meet, what would that question be?",
question: 'If you could only ask one question to each person you meet, what would that question be?',
answer: `This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.`,
},
],
@ -58,7 +58,7 @@ const items = [
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
{question}
</p>
{answer.split("\n\n").map((paragraph) => (
{answer.split('\n\n').map((paragraph) => (
<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
))}
</div>

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

@ -1,42 +1,42 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
const items = [
{
title: "Headers",
title: 'Headers',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
icon: "flat-color-icons:home",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:home',
},
{
title: "Footers",
title: 'Footers',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
icon: "flat-color-icons:faq",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:faq',
},
{
title: "Features",
title: 'Features',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
icon: "flat-color-icons:video-projector",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:video-projector',
},
{
title: "Call-to-Action",
title: 'Call-to-Action',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
icon: "flat-color-icons:video-projector",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:video-projector',
},
{
title: "Pricing",
title: 'Pricing',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
icon: "flat-color-icons:calculator",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:calculator',
},
{
title: "Testimonial",
title: 'Testimonial',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
icon: "flat-color-icons:voice-presentation",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:voice-presentation',
},
];
---

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

@ -2,36 +2,36 @@
const items = [
[
{
title: "Integration with Tailwind CSS",
title: 'Integration with Tailwind CSS',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: "Ready-to-use Components",
title: 'Ready-to-use Components',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: "Best Practices",
title: 'Best Practices',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
],
[
{
title: "Excellent Page Speed",
title: 'Excellent Page Speed',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: "Frequently updated",
title: 'Frequently updated',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: "Open to new ideas and contributions",
title: 'Open to new ideas and contributions',
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
],
];
@ -44,8 +44,8 @@ const items = [
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
What's interesting about <span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
>AstroWind
</span>
>AstroWind</span
>
</h2>
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa

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

@ -1,5 +1,5 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
---
<section>
@ -38,8 +38,8 @@ import { Icon } from "astro-icon";
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
1
</span>
1</span
>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
@ -54,8 +54,8 @@ import { Icon } from "astro-icon";
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
2
</span>
2</span
>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
@ -70,8 +70,8 @@ import { Icon } from "astro-icon";
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
3
</span>
3</span
>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>

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

@ -1,11 +1,11 @@
---
import { Icon } from "astro-icon";
import { getHomePermalink } from "~/utils/permalinks";
import { Icon } from 'astro-icon';
import { getHomePermalink } from '~/utils/permalinks';
---
<footer>
<footer class="border-t border-gray-200 dark:border-slate-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
<div class="col-span-12 lg:col-span-4">
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>AstroWind</a>
@ -13,14 +13,12 @@ import { getHomePermalink } from "~/utils/permalinks";
<div class="text-sm text-gray-600">
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#"
>Terms
</a> ·
href="#">Terms</a
> ·
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#"
>Privacy Policy
</a>
href="#">Privacy Policy</a
>
</div>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
@ -28,38 +26,38 @@ import { getHomePermalink } from "~/utils/permalinks";
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Features
</a>
>Features</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Security
</a>
>Security</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Team
</a>
>Team</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Enterprise
</a>
>Enterprise</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Customer stories
</a>
>Customer stories</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Pricing
</a>
>Pricing</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Resources
</a>
>Resources</a
>
</li>
</ul>
</div>
@ -68,28 +66,28 @@ import { getHomePermalink } from "~/utils/permalinks";
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Developer API
</a>
>Developer API</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Partners
</a>
>Partners</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Atom
</a>
>Atom</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Electron
</a>
>Electron</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>GitHub Desktop
</a>
>GitHub Desktop</a
>
</li>
</ul>
</div>
@ -98,28 +96,28 @@ import { getHomePermalink } from "~/utils/permalinks";
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Docs
</a>
>Docs</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Community Forum
</a>
>Community Forum</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Professional Services
</a>
>Professional Services</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Skills
</a>
>Skills</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Status
</a>
>Status</a
>
</li>
</ul>
</div>
@ -128,38 +126,38 @@ import { getHomePermalink } from "~/utils/permalinks";
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>About
</a>
>About</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Blog
</a>
>Blog</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Careers
</a>
>Careers</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Press
</a>
>Press</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Inclusion
</a>
>Inclusion</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Social Impact
</a>
>Social Impact</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Shop
</a>
>Shop</a
>
</li>
</ul>
</div>

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

@ -1,10 +1,10 @@
---
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 { 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 { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permalinks';
---
<header
@ -31,23 +31,21 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permal
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="#"
>Pages
</a>
href="#">Pages</a
>
</li>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={getPermalink("useful-resources-to-create-websites", "post")}
href={getPermalink('useful-resources-to-create-websites', 'post')}
>Resources
</a>
</li>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={getBlogPermalink()}
>Blog
</a>
href={getBlogPermalink()}>Blog</a
>
</li>
<li class="md:hidden">
<a

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

@ -1,6 +1,6 @@
---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
import { Icon } from 'astro-icon';
import Picture from '~/components/core/Picture.astro';
---
<section>
@ -12,14 +12,16 @@ import Picture from "~/components/core/Picture.astro";
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
>Tailwind CSS
</span>
>Tailwind CSS</span
>
</h1>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">... </span><span class="hidden sm:inline">Dark Mode, Great Page Speed, image optimization,
sitemap generation and more.</span>
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
class="hidden sm:inline"
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
>
</p>
<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="flex w-full sm:w-auto">
@ -35,9 +37,8 @@ import Picture from "~/components/core/Picture.astro";
<div class="flex w-full sm:w-auto">
<a
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
href="#features"
>Learn more
</a>
href="#features">Learn more</a
>
</div>
</div>
</div>
@ -45,7 +46,7 @@ import Picture from "~/components/core/Picture.astro";
<div>
<div class="relative mb-8 m-auto max-w-3xl">
<Picture
src={import("~/assets/images/hero.jpg")}
src={import('~/assets/images/hero.jpg')}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px"

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

@ -1,6 +1,6 @@
---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
import { Icon } from 'astro-icon';
import Picture from '~/components/core/Picture.astro';
---
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
@ -78,7 +78,7 @@ import Picture from "~/components/core/Picture.astro";
<div class="relative">
<Picture
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
src={import("~/assets/images/astronaut.jpg")}
src={import('~/assets/images/astronaut.jpg')}
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut"

18
src/config.mjs
View File

@ -1,30 +1,30 @@
export const SITE = {
name: "AstroWind",
name: 'AstroWind',
origin: "https://astrowind.vercel.app",
basePathname: "/",
origin: 'https://astrowind.vercel.app',
basePathname: '/',
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.",
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.',
googleAnalyticsId: false, // or "G-XXXXXXXXXX",
googleSiteVerificationId: "orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M",
googleSiteVerificationId: 'orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M',
};
export const BLOG = {
disabled: false,
slug: "blog",
slug: 'blog',
postsWithoutBlogSlug: true,
postsPerPage: 6,
category: {
disabled: false,
slug: "category", // set empty to change from /category/some-slug to /some-slug
slug: 'category', // set empty to change from /category/some-slug to /some-slug
},
tag: {
disabled: false,
slug: "tag",
slug: 'tag',
},
};

11
src/layouts/BaseLayout.astro
View File

@ -1,8 +1,8 @@
---
import "~/assets/styles/base.css";
import '~/assets/styles/base.css';
import MetaTags from "~/components/core/MetaTags.astro";
import BasicScripts from "~/components/core/BasicScripts.astro";
import MetaTags from '~/components/core/MetaTags.astro';
import BasicScripts from '~/components/core/BasicScripts.astro';
const { meta = {} } = Astro.props;
---
@ -16,11 +16,10 @@ const { meta = {} } = Astro.props;
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
<slot />
<BasicScripts />
</body>
</html>
<style is:global>
img {
content-visibility: auto;
}
</style>
</body>
</html>

4
src/layouts/BlogLayout.astro
View File

@ -1,10 +1,10 @@
---
import Layout from "~/layouts/PageLayout.astro";
import Layout from '~/layouts/PageLayout.astro';
const { meta } = Astro.props;
---
<Layout meta={meta}>
<Layout {meta}>
<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
<header>
<h1

8
src/layouts/PageLayout.astro
View File

@ -1,12 +1,12 @@
---
import Layout from "~/layouts/BaseLayout.astro";
import Header from "~/components/widgets/Header.astro";
import Footer from "~/components/widgets/Footer.astro";
import Layout from '~/layouts/BaseLayout.astro';
import Header from '~/components/widgets/Header.astro';
import Footer from '~/components/widgets/Footer.astro';
const { meta } = Astro.props;
---
<Layout meta={meta}>
<Layout {meta}>
<Header />
<main>
<slot />

6
src/pages/404.astro
View File

@ -1,7 +1,7 @@
---
import Layout from "~/layouts/BaseLayout.astro";
import { SITE } from "~/config.mjs";
import Error404 from "~/components/widgets/Error404.astro";
import Layout from '~/layouts/BaseLayout.astro';
import { SITE } from '~/config.mjs';
import Error404 from '~/components/widgets/Error404.astro';
const title = `Error 404 — ${SITE.name}`;
---

16
src/pages/[...blog]/[...page].astro
View File

@ -1,12 +1,12 @@
---
import { SITE, BLOG } from "~/config.mjs";
import { SITE, BLOG } from '~/config.mjs';
import Layout from "~/layouts/BlogLayout.astro";
import BlogList from "~/components/blog/List.astro";
import Pagination from "~/components/atoms/Pagination.astro";
import Layout from '~/layouts/BlogLayout.astro';
import BlogList from '~/components/blog/List.astro';
import Pagination from '~/components/atoms/Pagination.astro';
import { fetchPosts } from "~/utils/posts";
import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks";
import { fetchPosts } from '~/utils/posts';
import { getCanonical, getPermalink, BLOG_BASE } from '~/utils/permalinks';
export async function getStaticPaths({ paginate }) {
if (BLOG?.disabled) return [];
@ -23,13 +23,13 @@ const { page } = Astro.props;
const currentPage = page.currentPage ?? 1;
const meta = {
title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
description: SITE.description,
canonical: getCanonical(getPermalink(page.url.current)),
};
---
<Layout meta={meta}>
<Layout {meta}>
<Fragment slot="title">
News and step-by-step guides about
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">AstroWind</span>

21
src/pages/[...blog]/[slug].astro
View File

@ -1,12 +1,12 @@
---
import { SITE, BLOG } from "~/config.mjs";
import { SITE, BLOG } from '~/config.mjs';
import Layout from "~/layouts/PageLayout.astro";
import SinglePost from "~/components/blog/SinglePost.astro";
import Layout from '~/layouts/PageLayout.astro';
import SinglePost from '~/components/blog/SinglePost.astro';
import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from "~/utils/permalinks";
import { fetchPosts } from "~/utils/posts";
import { findImage } from "~/utils/images";
import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from '~/utils/permalinks';
import { fetchPosts } from '~/utils/posts';
import { findImage } from '~/utils/images';
export async function getStaticPaths() {
if (BLOG?.disabled) return [];
@ -14,7 +14,10 @@ export async function getStaticPaths() {
const posts = await fetchPosts();
return posts.map((post) => ({
params: { slug: cleanSlug(post.slug), blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG_BASE || undefined },
params: {
slug: cleanSlug(post.slug),
blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG_BASE || undefined,
},
props: { post },
}));
}
@ -24,11 +27,11 @@ const { post } = Astro.props;
const meta = {
title: `${post.title} — ${SITE.name}`,
description: post.description,
canonical: post.canonical || getCanonical(getPermalink(post.slug, "post")),
canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
image: await findImage(post.image),
};
---
<Layout meta={meta}>
<Layout {meta}>
<SinglePost post={{ ...post, image: meta.image }} />
</Layout>

18
src/pages/[...categories]/[category]/[...page].astro
View File

@ -1,12 +1,12 @@
---
import { SITE, BLOG } from "~/config.mjs";
import { SITE, BLOG } from '~/config.mjs';
import Layout from "~/layouts/BlogLayout.astro";
import BlogList from "~/components/blog/List.astro";
import Pagination from "~/components/atoms/Pagination.astro";
import Layout from '~/layouts/BlogLayout.astro';
import BlogList from '~/components/blog/List.astro';
import Pagination from '~/components/atoms/Pagination.astro';
import { fetchPosts } from "~/utils/posts";
import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from "~/utils/permalinks";
import { fetchPosts } from '~/utils/posts';
import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from '~/utils/permalinks';
export async function getStaticPaths({ paginate }) {
if (BLOG?.disabled || BLOG?.category?.disabled) return [];
@ -15,12 +15,12 @@ export async function getStaticPaths({ paginate }) {
const categories = new Set();
posts.map((post) => {
typeof post.category === "string" && categories.add(post.category.toLowerCase());
typeof post.category === 'string' && categories.add(post.category.toLowerCase());
});
return Array.from(categories).map((category) =>
paginate(
posts.filter((post) => typeof post.category === "string" && category === post.category.toLowerCase()),
posts.filter((post) => typeof post.category === 'string' && category === post.category.toLowerCase()),
{
params: { category: cleanSlug(category), categories: CATEGORY_BASE || undefined },
pageSize: BLOG.postsPerPage,
@ -35,7 +35,7 @@ const { page, category } = Astro.props;
const currentPage = page.currentPage ?? 1;
const meta = {
title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
description: SITE.description,
canonical: getCanonical(getPermalink(page.url.current)),
};

14
src/pages/[...tags]/[tag]/[...page].astro
View File

@ -1,12 +1,12 @@
---
import { SITE, BLOG } from "~/config.mjs";
import { SITE, BLOG } from '~/config.mjs';
import Layout from "~/layouts/BlogLayout.astro";
import BlogList from "~/components/blog/List.astro";
import Pagination from "~/components/atoms/Pagination.astro";
import Layout from '~/layouts/BlogLayout.astro';
import BlogList from '~/components/blog/List.astro';
import Pagination from '~/components/atoms/Pagination.astro';
import { fetchPosts } from "~/utils/posts";
import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from "~/utils/permalinks";
import { fetchPosts } from '~/utils/posts';
import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from '~/utils/permalinks';
export async function getStaticPaths({ paginate }) {
if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
@ -35,7 +35,7 @@ const { page, tag } = Astro.props;
const currentPage = page.currentPage ?? 1;
const meta = {
title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
description: SITE.description,
canonical: getCanonical(getPermalink(page.url.current)),
};

26
src/pages/index.astro
View File

@ -1,17 +1,17 @@
---
import { SITE } from "~/config.mjs";
import { getCanonical, getHomePermalink } from "~/utils/permalinks";
import Layout from "~/layouts/PageLayout.astro";
import { SITE } from '~/config.mjs';
import { getCanonical, getHomePermalink } from '~/utils/permalinks';
import Layout from '~/layouts/PageLayout.astro';
import Hero from "~/components/widgets/Hero.astro";
import Features from "~/components/widgets/Features.astro";
import Features2 from "~/components/widgets/Features2.astro";
import Steps from "~/components/widgets/Steps.astro";
import Features3 from "~/components/widgets/Features3.astro";
import HighlightedPosts from "~/components/blog/HighlightedPosts.astro";
import FAQs from "~/components/widgets/FAQs.astro";
import Stats from "~/components/widgets/Stats.astro";
import CallToAction from "~/components/widgets/CallToAction.astro";
import Hero from '~/components/widgets/Hero.astro';
import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Steps from '~/components/widgets/Steps.astro';
import Features3 from '~/components/widgets/Features3.astro';
import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
const meta = {
title: SITE.title,
@ -20,7 +20,7 @@ const meta = {
};
---
<Layout meta={meta}>
<Layout {meta}>
<Hero />
<Features />
<Steps />

14
src/pages/rss.xml.js
View File

@ -1,14 +1,14 @@
import rss from "@astrojs/rss";
import rss from '@astrojs/rss';
import { SITE, BLOG } from "~/config.mjs";
import { fetchPosts } from "~/utils/posts";
import { getPermalink } from "~/utils/permalinks";
import { SITE, BLOG } from '~/config.mjs';
import { fetchPosts } from '~/utils/posts';
import { getPermalink } from '~/utils/permalinks';
export const get = async () => {
if (BLOG.disabled) {
return new Response(null, {
status: 404,
statusText: 'Not found'
statusText: 'Not found',
});
}
@ -20,10 +20,10 @@ export const get = async () => {
site: import.meta.env.SITE,
items: posts.map((post) => ({
link: getPermalink(post.slug, "post"),
link: getPermalink(post.slug, 'post'),
title: post.title,
description: post.description,
pubDate: post.pubDate,
})),
});
}
};

10
src/utils/directories.js
View File

@ -1,5 +1,5 @@
import path from "path";
import { fileURLToPath } from "url";
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
@ -7,15 +7,15 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
export const getProjectRootDir = () => {
const mode = import.meta.env.MODE;
return mode === "production" ? path.join(__dirname, "../") : path.join(__dirname, "../../");
return mode === 'production' ? path.join(__dirname, '../') : path.join(__dirname, '../../');
};
const __srcFolder = path.join(getProjectRootDir(), "/src");
const __srcFolder = path.join(getProjectRootDir(), '/src');
/** */
export const getRelativeUrlByFilePath = (filepath) => {
if (filepath) {
return filepath.replace(__srcFolder, "");
return filepath.replace(__srcFolder, '');
}
return null;

12
src/utils/images.js
View File

@ -1,7 +1,7 @@
const load = async function () {
let images = [];
try {
images = import.meta.glob("~/assets/images/**");
images = import.meta.glob('~/assets/images/**');
} catch (e) {
// continue regardless of error
}
@ -18,20 +18,20 @@ export const fetchLocalImages = async () => {
/** */
export const findImage = async (imagePath) => {
if (typeof imagePath !== "string") {
if (typeof imagePath !== 'string') {
return null;
}
if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
return imagePath;
}
if (!imagePath.startsWith("~/assets")) {
if (!imagePath.startsWith('~/assets')) {
return null;
} // For now only consume images using ~/assets alias (or absolute)
const images = await fetchLocalImages();
const key = imagePath.replace("~/", "/src/");
const key = imagePath.replace('~/', '/src/');
return typeof images[key] === "function" ? (await images[key]())["default"] : null;
return typeof images[key] === 'function' ? (await images[key]())['default'] : null;
};

24
src/utils/permalinks.js
View File

@ -1,6 +1,6 @@
import slugify from "limax";
import slugify from 'limax';
import { SITE, BLOG } from "~/config.mjs";
import { SITE, BLOG } from '~/config.mjs';
const trim = (str, ch) => {
let start = 0,
@ -10,8 +10,8 @@ const trim = (str, ch) => {
return start > 0 || end < str.length ? str.substring(start, end) : str;
};
const trimSlash = (s) => trim(trim(s, "/"));
const createPath = (...params) => "/" + params.filter((el) => !!el).join("/");
const trimSlash = (s) => trim(trim(s, '/'));
const createPath = (...params) => '/' + params.filter((el) => !!el).join('/');
const basePathname = trimSlash(SITE.basePathname);
@ -22,23 +22,23 @@ export const CATEGORY_BASE = cleanSlug(BLOG?.category?.slug);
export const TAG_BASE = cleanSlug(BLOG?.tag?.slug);
/** */
export const getCanonical = (path = "") => new URL(path, SITE.origin);
export const getCanonical = (path = '') => new URL(path, SITE.origin);
/** */
export const getPermalink = (slug = "", type = "page") => {
export const getPermalink = (slug = '', type = 'page') => {
const _slug = cleanSlug(slug);
switch (type) {
case "category":
case 'category':
return createPath(basePathname, CATEGORY_BASE, _slug);
case "tag":
case 'tag':
return createPath(basePathname, TAG_BASE, _slug);
case "post":
return createPath(basePathname, BLOG.postsWithoutBlogSlug ? "" : BLOG_BASE, _slug);
case 'post':
return createPath(basePathname, BLOG.postsWithoutBlogSlug ? '' : BLOG_BASE, _slug);
case "page":
case 'page':
default:
return createPath(basePathname, _slug);
}
@ -50,5 +50,5 @@ export const getBlogPermalink = () => getPermalink(BLOG_BASE);
/** */
export const getHomePermalink = () => {
const permalink = getPermalink();
return permalink !== "/" ? permalink + "/" : permalink;
return permalink !== '/' ? permalink + '/' : permalink;
};

6
src/utils/posts.js
View File

@ -1,8 +1,8 @@
import getReadingTime from "reading-time";
import getReadingTime from 'reading-time';
const getNormalizedPost = async (post) => {
const { frontmatter, compiledContent, rawContent, file } = post;
const ID = file.split("/").pop().split(".").shift();
const ID = file.split('/').pop().split('.').shift();
return {
id: ID,
@ -27,7 +27,7 @@ const getNormalizedPost = async (post) => {
};
const load = async function () {
const posts = import.meta.glob("~/data/posts/**/*.md", {
const posts = import.meta.glob('~/data/posts/**/*.md', {
eager: true,
});

10
src/utils/utils.js
View File

@ -1,9 +1,9 @@
/** */
export const getFormattedDate = (date) =>
date
? new Date(date).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
? new Date(date).toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})
: "";
: '';

10
tailwind.config.cjs
View File

@ -1,8 +1,8 @@
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors")
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: {
@ -14,8 +14,8 @@ module.exports = {
},
},
},
plugins: [require("@tailwindcss/typography")],
darkMode: "class",
plugins: [require('@tailwindcss/typography')],
darkMode: 'class',
};
/*