Use Prettier
This commit is contained in:
prototypa
@ -25,7 +25,10 @@ module.exports = {
|
|||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
extends: ['plugin:@typescript-eslint/recommended'],
|
extends: ['plugin:@typescript-eslint/recommended'],
|
||||||
rules: {
|
rules: {
|
||||||
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
|
'@typescript-eslint/no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{ argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
|
||||||
|
],
|
||||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
5
.prettierignore
Normal file
5
.prettierignore
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
dist
|
||||||
|
node_modules
|
||||||
|
.github
|
||||||
|
.changeset
|
||||||
|
*.md
|
||||||
16
.prettierrc
Normal file
16
.prettierrc
Normal 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
7
.vscode/extensions.json
vendored
@ -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": []
|
"unwantedRecommendations": []
|
||||||
}
|
}
|
||||||
|
|||||||
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -5,5 +5,9 @@
|
|||||||
"astro", // Enable .astro
|
"astro", // Enable .astro
|
||||||
"typescript", // Enable .ts
|
"typescript", // Enable .ts
|
||||||
"typescriptreact" // Enable .tsx
|
"typescriptreact" // Enable .tsx
|
||||||
]
|
],
|
||||||
|
"prettier.documentSelectors": ["**/*.astro"],
|
||||||
|
"[astro]": {
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,45 +1,45 @@
|
|||||||
import path from "path";
|
import path from 'path';
|
||||||
import { fileURLToPath } from "url";
|
import { fileURLToPath } from 'url';
|
||||||
|
|
||||||
import { defineConfig } from "astro/config";
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
import tailwind from "@astrojs/tailwind";
|
import tailwind from '@astrojs/tailwind';
|
||||||
import sitemap from "@astrojs/sitemap";
|
import sitemap from '@astrojs/sitemap';
|
||||||
import image from "@astrojs/image";
|
import image from '@astrojs/image';
|
||||||
import partytown from "@astrojs/partytown";
|
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));
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
|
// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
|
||||||
site: SITE.origin,
|
site: SITE.origin,
|
||||||
base: SITE.basePathname,
|
base: SITE.basePathname,
|
||||||
|
|
||||||
output: "static",
|
output: 'static',
|
||||||
|
|
||||||
integrations: [
|
integrations: [
|
||||||
tailwind({
|
tailwind({
|
||||||
config: {
|
config: {
|
||||||
applyBaseStyles: false,
|
applyBaseStyles: false,
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
sitemap(),
|
sitemap(),
|
||||||
image(),
|
image(),
|
||||||
|
|
||||||
/* Disable this integration if you don't use Google Analytics (or other external script). */
|
/* Disable this integration if you don't use Google Analytics (or other external script). */
|
||||||
partytown({
|
partytown({
|
||||||
config: { forward: ["dataLayer.push"] },
|
config: { forward: ['dataLayer.push'] },
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
|
||||||
vite: {
|
vite: {
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"~": path.resolve(__dirname, "./src"),
|
'~': path.resolve(__dirname, './src'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -7,9 +7,10 @@
|
|||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"format": "prettier -w .",
|
||||||
"lint:eslint": "eslint . --ext .js,.ts,.astro",
|
"lint:eslint": "eslint . --ext .js,.ts,.astro",
|
||||||
"subfont": "subfont -ir --no-fallbacks --silent --root dist",
|
"subfont": "subfont -ir --no-fallbacks --silent --root dist"
|
||||||
"preview": "astro preview"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/image": "^0.7.0",
|
"@astrojs/image": "^0.7.0",
|
||||||
@ -27,6 +28,8 @@
|
|||||||
"eslint-plugin-astro": "^0.19.0",
|
"eslint-plugin-astro": "^0.19.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||||
"limax": "^v2.1.0",
|
"limax": "^v2.1.0",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"prettier-plugin-astro": "^0.5.4",
|
||||||
"reading-time": "^1.5.0",
|
"reading-time": "^1.5.0",
|
||||||
"subfont": "^6.9.0"
|
"subfont": "^6.9.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -3,26 +3,26 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.btn {
|
.btn {
|
||||||
@apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
|
@apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[astro-icon] > * {
|
[astro-icon] > * {
|
||||||
stroke-width: 1.5;
|
stroke-width: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
[astro-icon].icon-bold > * {
|
[astro-icon].icon-bold > * {
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-aw-toggle-menu] path {
|
[data-aw-toggle-menu] path {
|
||||||
@apply transition;
|
@apply transition;
|
||||||
}
|
}
|
||||||
[data-aw-toggle-menu].expanded g > path:first-child {
|
[data-aw-toggle-menu].expanded g > path:first-child {
|
||||||
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
|
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-aw-toggle-menu].expanded g > path:last-child {
|
[data-aw-toggle-menu].expanded g > path:last-child {
|
||||||
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
|
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
|
||||||
}
|
}
|
||||||
@ -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="shortcut icon" href={`${SITE.basePathname}favicon.ico`} />
|
||||||
<link rel="icon" type="image/svg+xml" href={`${SITE.basePathname}favicon.svg`}>
|
<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="mask-icon" href={`${SITE.basePathname}favicon.svg`} color="#8D46E7" />
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
import "@fontsource/inter/variable.css"
|
import '@fontsource/inter/variable.css';
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Or Google Fonts -->
|
<!-- Or Google Fonts -->
|
||||||
|
|||||||
@ -2,5 +2,5 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
|
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
🚀 AstroWind
|
🚀 AstroWind</span
|
||||||
</span>
|
>
|
||||||
|
|||||||
@ -1,34 +1,34 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
|
const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
{
|
{
|
||||||
(prevUrl || nextUrl) && (
|
(prevUrl || nextUrl) && (
|
||||||
<div class="container flex">
|
<div class="container flex">
|
||||||
<div class="flex flex-row mx-auto container justify-between">
|
<div class="flex flex-row mx-auto container justify-between">
|
||||||
<a
|
<a
|
||||||
href={prevUrl}
|
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
|
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">
|
<div class="flex flex-row align-middle">
|
||||||
<Icon name="tabler:arrow-left" class="w-6 h-6" />
|
<Icon name="tabler:arrow-left" class="w-6 h-6" />
|
||||||
<p class="ml-2">{prevText}</p>
|
<p class="ml-2">{prevText}</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href={nextUrl}
|
href={nextUrl}
|
||||||
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
|
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">
|
<div class="flex flex-row align-middle">
|
||||||
<span class="mr-2">{nextText}</span>
|
<span class="mr-2">{nextText}</span>
|
||||||
<Icon name="tabler:arrow-right" class="w-6 h-6" />
|
<Icon name="tabler:arrow-right" class="w-6 h-6" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
---
|
---
|
||||||
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;
|
||||||
---
|
---
|
||||||
|
|
||||||
{
|
{
|
||||||
tags && Array.isArray(tags) && (
|
tags && Array.isArray(tags) && (
|
||||||
<ul class={className}>
|
<ul class={className}>
|
||||||
{tags.map((tag) => (
|
{tags.map((tag) => (
|
||||||
<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2">
|
<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>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,58 +1,58 @@
|
|||||||
---
|
---
|
||||||
import Picture from "~/components/core/Picture.astro";
|
import Picture from '~/components/core/Picture.astro';
|
||||||
|
|
||||||
import { findPostsByIds } from "~/utils/posts";
|
import { findPostsByIds } from '~/utils/posts';
|
||||||
import { findImage } from "~/utils/images";
|
import { findImage } from '~/utils/images';
|
||||||
import { getPermalink } from "~/utils/permalinks";
|
import { getPermalink } from '~/utils/permalinks';
|
||||||
|
|
||||||
const ids = [
|
const ids = [
|
||||||
"get-started-website-with-astro-tailwind-css",
|
'get-started-website-with-astro-tailwind-css',
|
||||||
"how-to-customize-astrowind-to-your-brand",
|
'how-to-customize-astrowind-to-your-brand',
|
||||||
"useful-resources-to-create-websites",
|
'useful-resources-to-create-websites',
|
||||||
"astrowind-template-in-depth",
|
'astrowind-template-in-depth',
|
||||||
];
|
];
|
||||||
|
|
||||||
const items = await Promise.all(
|
const items = await Promise.all(
|
||||||
(await findPostsByIds(ids)).map(async (item) => ({ ...item, image: await findImage(item.image) }))
|
(await findPostsByIds(ids)).map(async (item) => ({ ...item, image: await findImage(item.image) }))
|
||||||
);
|
);
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
<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">
|
<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">
|
<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">Find out more content<br class="hidden md:block" /> in our Blog</span>
|
<span class="inline-block mb-1 sm:mb-4">Find out more content<br class="hidden md:block" /> in our Blog</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
|
<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
|
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
|
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.
|
very soon. Astro is a very interesting technology. Thanks.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
|
<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
|
||||||
{
|
{
|
||||||
items.map((post) => (
|
items.map((post) => (
|
||||||
<article class="mb-6 transition">
|
<article class="mb-6 transition">
|
||||||
<Picture
|
<Picture
|
||||||
src={post.image}
|
src={post.image}
|
||||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||||
widths={[400, 900]}
|
widths={[400, 900]}
|
||||||
sizes="(max-width: 900px) 400px, 900px"
|
sizes="(max-width: 900px) 400px, 900px"
|
||||||
alt={post.title}
|
alt={post.title}
|
||||||
aspectRatio="16:9"
|
aspectRatio="16:9"
|
||||||
/>
|
/>
|
||||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
|
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
|
||||||
<a
|
<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"
|
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||||
>
|
>
|
||||||
{post.title}
|
{post.title}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
|
<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
|
||||||
</article>
|
</article>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
---
|
---
|
||||||
import Item from "~/components/blog/ListItem.astro";
|
import Item from '~/components/blog/ListItem.astro';
|
||||||
|
|
||||||
const { posts } = Astro.props;
|
const { posts } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{
|
{
|
||||||
posts.map((post) => (
|
posts.map((post) => (
|
||||||
<li class="mb-10 md:mb-16">
|
<li class="mb-10 md:mb-16">
|
||||||
<Item post={post} />
|
<Item post={post} />
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
---
|
---
|
||||||
import Picture from "~/components/core/Picture.astro";
|
import Picture from '~/components/core/Picture.astro';
|
||||||
import PostTags from "~/components/atoms/Tags.astro";
|
import PostTags from '~/components/atoms/Tags.astro';
|
||||||
|
|
||||||
import { getPermalink } from "~/utils/permalinks";
|
import { getPermalink } from '~/utils/permalinks';
|
||||||
import { findImage } from "~/utils/images";
|
import { findImage } from '~/utils/images';
|
||||||
import { getFormattedDate } from "~/utils/utils";
|
import { getFormattedDate } from '~/utils/utils';
|
||||||
|
|
||||||
const { post } = Astro.props;
|
const { post } = Astro.props;
|
||||||
|
|
||||||
@ -12,43 +12,44 @@ 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">
|
<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
|
<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"
|
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"
|
||||||
>
|
>
|
||||||
<Picture
|
<Picture
|
||||||
src={image}
|
src={image}
|
||||||
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||||
widths={[400, 900]}
|
widths={[400, 900]}
|
||||||
sizes="(max-width: 900px) 400px, 900px"
|
sizes="(max-width: 900px) 400px, 900px"
|
||||||
alt={post.title}
|
alt={post.title}
|
||||||
aspectRatio="16:9"
|
aspectRatio="16:9"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<header>
|
<header>
|
||||||
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
|
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
|
||||||
<a
|
<a
|
||||||
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
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}
|
{post.title}
|
||||||
</a>
|
</a>
|
||||||
</h2>
|
</h2>
|
||||||
</header>
|
</header>
|
||||||
<p class="text-md sm:text-lg flex-grow">
|
<p class="text-md sm:text-lg flex-grow">
|
||||||
{post.excerpt || post.description}
|
{post.excerpt || post.description}
|
||||||
</p>
|
</p>
|
||||||
<footer class="mt-4">
|
<footer class="mt-4">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-gray-500 dark:text-slate-400">
|
<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> ~
|
||||||
</span>
|
{Math.ceil(post.readingTime)} min read
|
||||||
</div>
|
</span>
|
||||||
<div class="mt-4">
|
</div>
|
||||||
<PostTags tags={post.tags} />
|
<div class="mt-4">
|
||||||
</div>
|
<PostTags tags={post.tags} />
|
||||||
</footer>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
@ -1,43 +1,43 @@
|
|||||||
---
|
---
|
||||||
import Picture from "~/components/core/Picture.astro";
|
import Picture from '~/components/core/Picture.astro';
|
||||||
import PostTags from "~/components/atoms/Tags.astro";
|
import PostTags from '~/components/atoms/Tags.astro';
|
||||||
|
|
||||||
import { getFormattedDate } from "~/utils/utils";
|
import { getFormattedDate } from '~/utils/utils';
|
||||||
|
|
||||||
const { post } = Astro.props;
|
const { post } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
|
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<p class="max-w-3xl mx-auto text-center">
|
<p class="max-w-3xl mx-auto text-center">
|
||||||
<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
|
||||||
</p>
|
</p>
|
||||||
<h1
|
<h1
|
||||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
|
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
|
||||||
>
|
>
|
||||||
{post.title}
|
{post.title}
|
||||||
</h1>
|
</h1>
|
||||||
{
|
{
|
||||||
post.image && (
|
post.image && (
|
||||||
<Picture
|
<Picture
|
||||||
src={post.image}
|
src={post.image}
|
||||||
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
|
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
|
||||||
widths={[400, 900]}
|
widths={[400, 900]}
|
||||||
sizes="(max-width: 900px) 400px, 900px"
|
sizes="(max-width: 900px) 400px, 900px"
|
||||||
alt={post.description}
|
alt={post.description}
|
||||||
aspectRatio="16:9"
|
aspectRatio="16:9"
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</header>
|
</header>
|
||||||
<div
|
<div
|
||||||
class="container 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-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
|
class="container 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-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
|
||||||
>
|
>
|
||||||
<Fragment set:html={post.body} />
|
<Fragment set:html={post.body} />
|
||||||
</div>
|
</div>
|
||||||
<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
|
<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
|
||||||
<PostTags tags={post.tags} />
|
<PostTags tags={post.tags} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,47 +2,47 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
// Set "light" theme as default
|
// Set "light" theme as default
|
||||||
// if (!localStorage.theme) {
|
// if (!localStorage.theme) {
|
||||||
// localStorage.theme = "light";
|
// localStorage.theme = "light";
|
||||||
// }
|
// }
|
||||||
|
|
||||||
if (
|
if (
|
||||||
localStorage.theme === "dark" ||
|
localStorage.theme === 'dark' ||
|
||||||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
|
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||||
) {
|
) {
|
||||||
document.documentElement.classList.add("dark");
|
document.documentElement.classList.add('dark');
|
||||||
} else {
|
} else {
|
||||||
document.documentElement.classList.remove("dark");
|
document.documentElement.classList.remove('dark');
|
||||||
}
|
}
|
||||||
|
|
||||||
function attachEvent(selector, event, fn) {
|
function attachEvent(selector, event, fn) {
|
||||||
const matches = document.querySelectorAll(selector);
|
const matches = document.querySelectorAll(selector);
|
||||||
if (matches && matches.length) {
|
if (matches && matches.length) {
|
||||||
matches.forEach((elem) => {
|
matches.forEach((elem) => {
|
||||||
elem.addEventListener(event, () => fn(elem), false);
|
elem.addEventListener(event, () => fn(elem), false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
|
attachEvent('[data-aw-toggle-menu]', 'click', function (elem) {
|
||||||
elem.classList.toggle("expanded");
|
elem.classList.toggle('expanded');
|
||||||
document.body.classList.toggle("overflow-hidden");
|
document.body.classList.toggle('overflow-hidden');
|
||||||
document.getElementById("menu")?.classList.toggle("hidden");
|
document.getElementById('menu')?.classList.toggle('hidden');
|
||||||
});
|
});
|
||||||
|
|
||||||
attachEvent("[data-aw-toggle-color-scheme]", "click", function () {
|
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
|
||||||
document.documentElement.classList.toggle("dark");
|
document.documentElement.classList.toggle('dark');
|
||||||
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
|
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
window.onpageshow = function () {
|
window.onpageshow = function () {
|
||||||
const elem = document.querySelector("[data-aw-toggle-menu]");
|
const elem = document.querySelector('[data-aw-toggle-menu]');
|
||||||
if (elem) {
|
if (elem) {
|
||||||
elem.classList.remove("expanded");
|
elem.classList.remove('expanded');
|
||||||
}
|
}
|
||||||
document.body.classList.remove("overflow-hidden");
|
document.body.classList.remove('overflow-hidden');
|
||||||
document.getElementById("menu")?.classList.add("hidden");
|
document.getElementById('menu')?.classList.add('hidden');
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,16 @@
|
|||||||
---
|
---
|
||||||
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>
|
<script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} {...attrs}></script>
|
||||||
|
|
||||||
<script is:inline define:vars={{ id }} {...attrs}>
|
<script is:inline define:vars={{ id }} {...attrs}>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
function gtag() {
|
function gtag() {
|
||||||
window.dataLayer.push(arguments);
|
window.dataLayer.push(arguments);
|
||||||
}
|
}
|
||||||
gtag("js", new Date());
|
gtag('js', new Date());
|
||||||
gtag("config", id);
|
gtag('config', id);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,35 +1,35 @@
|
|||||||
---
|
---
|
||||||
import { getImage } from "@astrojs/image";
|
import { getImage } from '@astrojs/image';
|
||||||
import { getRelativeUrlByFilePath } from "~/utils/directories";
|
import { getRelativeUrlByFilePath } from '~/utils/directories';
|
||||||
|
|
||||||
import GoogleAnalytics from "~/components/core/GoogleAnalytics.astro";
|
import GoogleAnalytics from '~/components/core/GoogleAnalytics.astro';
|
||||||
import defaultImageSrc from "~/assets/images/default.png";
|
import defaultImageSrc from '~/assets/images/default.png';
|
||||||
|
|
||||||
import { SITE } from "~/config.mjs";
|
import { SITE } from '~/config.mjs';
|
||||||
import Fonts from "../atoms/Fonts.astro";
|
import Fonts from '../atoms/Fonts.astro';
|
||||||
import ExtraMetaTags from "../atoms/ExtraMetaTags.astro";
|
import ExtraMetaTags from '../atoms/ExtraMetaTags.astro';
|
||||||
|
|
||||||
const { src: defaultImage } = await getImage({
|
const { src: defaultImage } = await getImage({
|
||||||
src: defaultImageSrc,
|
src: defaultImageSrc,
|
||||||
width: 1200,
|
width: 1200,
|
||||||
height: 628,
|
height: 628,
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
title = SITE.name,
|
title = SITE.name,
|
||||||
description = "",
|
description = '',
|
||||||
image: _image = defaultImage,
|
image: _image = defaultImage,
|
||||||
canonical,
|
canonical,
|
||||||
noindex = false,
|
noindex = false,
|
||||||
nofollow = false,
|
nofollow = false,
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
|
|
||||||
const image =
|
const image =
|
||||||
typeof _image === "string"
|
typeof _image === 'string'
|
||||||
? new URL(_image, Astro.site)
|
? new URL(_image, Astro.site)
|
||||||
: _image && typeof _image["src"] !== "undefined"
|
: _image && typeof _image['src'] !== 'undefined'
|
||||||
? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
|
? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
|
||||||
: null;
|
: null;
|
||||||
---
|
---
|
||||||
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@ -39,7 +39,7 @@ const image =
|
|||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
{canonical && <link rel="canonical" href={canonical} />}
|
{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 -->
|
<!-- Google / Search Engine Tags -->
|
||||||
<meta itemprop="name" content={title} />
|
<meta itemprop="name" content={title} />
|
||||||
|
|||||||
@ -1,39 +1,43 @@
|
|||||||
---
|
---
|
||||||
import { getPicture } from "@astrojs/image";
|
import { getPicture } from '@astrojs/image';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
src,
|
src,
|
||||||
alt,
|
alt,
|
||||||
sizes,
|
sizes,
|
||||||
widths,
|
widths,
|
||||||
aspectRatio = 1,
|
aspectRatio = 1,
|
||||||
formats = ["avif", "webp"],
|
formats = ['avif', 'webp'],
|
||||||
loading = "lazy",
|
loading = 'lazy',
|
||||||
decoding = "async",
|
decoding = 'async',
|
||||||
class: className = "",
|
class: className = '',
|
||||||
...attrs
|
...attrs
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
|
|
||||||
let picture = null;
|
let picture = null;
|
||||||
try {
|
try {
|
||||||
picture = src && await getPicture({
|
picture =
|
||||||
src,
|
src &&
|
||||||
widths,
|
(await getPicture({
|
||||||
formats,
|
src,
|
||||||
aspectRatio,
|
widths,
|
||||||
})
|
formats,
|
||||||
}
|
aspectRatio,
|
||||||
catch (e) {
|
}));
|
||||||
// continue regardless of error
|
} catch (e) {
|
||||||
|
// continue regardless of error
|
||||||
}
|
}
|
||||||
|
|
||||||
const { image = {}, sources = [] } = picture || {}
|
const { image = {}, sources = [] } = picture || {};
|
||||||
---
|
---
|
||||||
|
|
||||||
{ (src && image?.src) &&
|
{
|
||||||
<picture {...attrs}>
|
src && image?.src && (
|
||||||
{sources.map((attrs) =>
|
<picture {...attrs}>
|
||||||
<source {...attrs} {sizes} />)}
|
{sources.map((attrs) => (
|
||||||
<img {...image} {loading} {decoding} {alt} class={className} />
|
<source {...attrs} sizes={sizes} />
|
||||||
</picture>
|
))}
|
||||||
|
<img {...image} {loading} {decoding} {alt} class={className} />
|
||||||
|
</picture>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
@ -1,15 +1,15 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
label = "Toggle Menu",
|
label = 'Toggle Menu',
|
||||||
class:
|
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",
|
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",
|
iconClass = 'w-6 h-6',
|
||||||
iconName = "tabler:menu",
|
iconName = 'tabler:menu',
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
|
<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
|
||||||
<Icon name={iconName} class={iconClass} optimize={false} />
|
<Icon name={iconName} class={iconClass} optimize={false} />
|
||||||
</button>
|
</button>
|
||||||
@ -1,15 +1,15 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
label = "Toggle between Dark and Light mode",
|
label = 'Toggle between Dark and Light mode',
|
||||||
class:
|
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-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",
|
iconClass = 'w-6 h-6',
|
||||||
iconName = "tabler:sun",
|
iconName = 'tabler:sun',
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
|
<button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
|
||||||
<Icon name={iconName} class={iconClass} />
|
<Icon name={iconName} class={iconClass} />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -1,30 +1,30 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="relative">
|
<section class="relative">
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<div class="py-12 md:py-20">
|
<div class="py-12 md:py-20">
|
||||||
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
|
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
|
||||||
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
<span>Astro</span> + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
<span>Astro</span> + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl text-gray-600 dark:text-slate-400">
|
<p class="text-xl text-gray-600 dark:text-slate-400">
|
||||||
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
|
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
|
||||||
waste more time! :P
|
waste more time! :P
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<a
|
||||||
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
|
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
|
||||||
href="https://github.com/onwidget/astrowind"
|
href="https://github.com/onwidget/astrowind"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>
|
>
|
||||||
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,24 +1,24 @@
|
|||||||
---
|
---
|
||||||
import { getHomePermalink } from "~/utils/permalinks";
|
import { getHomePermalink } from '~/utils/permalinks';
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="flex items-center h-full p-16">
|
<section class="flex items-center h-full p-16">
|
||||||
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
|
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
|
||||||
<div class="max-w-md text-center">
|
<div class="max-w-md text-center">
|
||||||
<h2 class="mb-8 font-bold text-9xl">
|
<h2 class="mb-8 font-bold text-9xl">
|
||||||
<span class="sr-only">Error</span>
|
<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="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
|
<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-gray-600 dark:text-slate-400">
|
||||||
But dont worry, you can find plenty of other things on our homepage.
|
But dont worry, you can find plenty of other things on our homepage.
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href={getHomePermalink()}
|
href={getHomePermalink()}
|
||||||
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
|
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
|
>Back to homepage</a
|
||||||
</a>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,71 +1,71 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const items = [
|
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.
|
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.`,
|
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.
|
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.`,
|
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.`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "What's something that you completely don't understand?",
|
question: "What's something that you completely don't understand?",
|
||||||
answer: `A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.`,
|
answer: `A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.`,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
question: "What's an example of when you changed your mind?",
|
question: "What's an example of when you changed your mind?",
|
||||||
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.`,
|
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!
|
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.`,
|
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.`,
|
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.`,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||||
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
||||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||||
<h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
|
<h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
|
||||||
Frequently Asked Questions
|
Frequently Asked Questions
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-screen-xl sm:mx-auto">
|
<div class="max-w-screen-xl sm:mx-auto">
|
||||||
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
||||||
{
|
{
|
||||||
items.map((subitems) => (
|
items.map((subitems) => (
|
||||||
<div class="space-y-8">
|
<div class="space-y-8">
|
||||||
{subitems.map(({ question, answer }) => (
|
{subitems.map(({ question, answer }) => (
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<p class="mb-4 text-xl font-bold">
|
||||||
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
|
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
|
||||||
{question}
|
{question}
|
||||||
</p>
|
</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} />
|
<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,73 +1,73 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
title: "Headers",
|
title: 'Headers',
|
||||||
description:
|
description:
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
icon: "flat-color-icons:home",
|
icon: 'flat-color-icons:home',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Footers",
|
title: 'Footers',
|
||||||
description:
|
description:
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
icon: "flat-color-icons:faq",
|
icon: 'flat-color-icons:faq',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Features",
|
title: 'Features',
|
||||||
description:
|
description:
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
icon: "flat-color-icons:video-projector",
|
icon: 'flat-color-icons:video-projector',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Call-to-Action",
|
title: 'Call-to-Action',
|
||||||
description:
|
description:
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
icon: "flat-color-icons:video-projector",
|
icon: 'flat-color-icons:video-projector',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Pricing",
|
title: 'Pricing',
|
||||||
description:
|
description:
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
icon: "flat-color-icons:calculator",
|
icon: 'flat-color-icons:calculator',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Testimonial",
|
title: 'Testimonial',
|
||||||
description:
|
description:
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
icon: "flat-color-icons:voice-presentation",
|
icon: 'flat-color-icons:voice-presentation',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="relative">
|
<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-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
||||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||||
<div class="mb-8 text-center">
|
<div class="mb-8 text-center">
|
||||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
||||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
Most used widgets
|
Most used widgets
|
||||||
</h2>
|
</h2>
|
||||||
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
|
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
|
||||||
Provides frequently used components for building websites using Tailwind CSS
|
Provides frequently used components for building websites using Tailwind CSS
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
||||||
{
|
{
|
||||||
items.map(({ title, description, icon }) => (
|
items.map(({ title, description, icon }) => (
|
||||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800">
|
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800">
|
||||||
<div class="flex items-center mb-4">
|
<div class="flex items-center mb-4">
|
||||||
<Icon name={icon} class="w-12 h-12" />
|
<Icon name={icon} class="w-12 h-12" />
|
||||||
|
|
||||||
<div class="ml-4 text-xl font-bold">{title}</div>
|
<div class="ml-4 text-xl font-bold">{title}</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,88 +1,88 @@
|
|||||||
---
|
---
|
||||||
const items = [
|
const items = [
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
title: "Integration with Tailwind CSS",
|
title: 'Integration with Tailwind CSS',
|
||||||
description:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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.',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="scroll-mt-16" id="features">
|
<section class="scroll-mt-16" id="features">
|
||||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-primary-50 dark:bg-slate-800">
|
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-primary-50 dark:bg-slate-800">
|
||||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
|
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
|
||||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
What's interesting about <span
|
What's interesting about <span
|
||||||
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
|
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
|
||||||
>AstroWind
|
>AstroWind</span
|
||||||
</span>
|
>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
<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
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa
|
||||||
quae.
|
quae.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||||
{
|
{
|
||||||
items.map((subitems) => (
|
items.map((subitems) => (
|
||||||
<div class="space-y-8 sm:px-8">
|
<div class="space-y-8 sm:px-8">
|
||||||
{subitems.map(({ title, description }) => (
|
{subitems.map(({ title, description }) => (
|
||||||
<div class="flex flex-row max-w-md">
|
<div class="flex flex-row max-w-md">
|
||||||
<div class="mb-4 mr-4">
|
<div class="mb-4 mr-4">
|
||||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500">
|
||||||
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g fill="none" fill-rule="evenodd">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<rect class="fill-current text-primary-600" width="64" height="64" rx="32" />
|
<rect class="fill-current text-primary-600" width="64" height="64" rx="32" />
|
||||||
<g stroke-linecap="square" stroke-width="2">
|
<g stroke-linecap="square" stroke-width="2">
|
||||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z" />
|
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z" />
|
||||||
<path
|
<path
|
||||||
class="stroke-current text-primary-300"
|
class="stroke-current text-primary-300"
|
||||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="mb-3 text-xl font-bold">{title}</h3>
|
<h3 class="mb-3 text-xl font-bold">{title}</h3>
|
||||||
<p>{description}</p>
|
<p>{description}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,90 +1,90 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
---
|
---
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 overflow-hidden">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 overflow-hidden">
|
||||||
<div class="py-12 md:py-20">
|
<div class="py-12 md:py-20">
|
||||||
<div class="py-4 sm:py-6 lg:py-8">
|
<div class="py-4 sm:py-6 lg:py-8">
|
||||||
<div class="flex flex-wrap md:-mx-8">
|
<div class="flex flex-wrap md:-mx-8">
|
||||||
<div class="w-full lg:w-1/2 px-0 sm:px-8">
|
<div class="w-full lg:w-1/2 px-0 sm:px-8">
|
||||||
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
|
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
|
||||||
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
|
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
|
||||||
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
|
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p class="mb-8 text-xl text-gray-600 dark:text-slate-400">
|
<p class="mb-8 text-xl text-gray-600 dark:text-slate-400">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
|
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
|
||||||
Fusce sit amet dui tellus.
|
Fusce sit amet dui tellus.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<a
|
<a
|
||||||
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
|
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
|
||||||
href="https://github.com/onwidget/astrowind"
|
href="https://github.com/onwidget/astrowind"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>
|
>
|
||||||
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full lg:w-1/2 px-0 sm:px-8">
|
<div class="w-full lg:w-1/2 px-0 sm:px-8">
|
||||||
<ul class="space-y-12">
|
<ul class="space-y-12">
|
||||||
<li class="flex md:-mx-4">
|
<li class="flex md:-mx-4">
|
||||||
<div class="pr-4 sm:pl-4">
|
<div class="pr-4 sm:pl-4">
|
||||||
<span
|
<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"
|
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
|
1</span
|
||||||
</span>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
|
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
|
||||||
lobortis, mi risus tempus nulla.
|
lobortis, mi risus tempus nulla.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex md:-mx-4">
|
<li class="flex md:-mx-4">
|
||||||
<div class="pr-4 sm:pl-4">
|
<div class="pr-4 sm:pl-4">
|
||||||
<span
|
<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"
|
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
|
2</span
|
||||||
</span>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
|
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
|
||||||
lobortis, mi risus tempus nulla.
|
lobortis, mi risus tempus nulla.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex md:-mx-4">
|
<li class="flex md:-mx-4">
|
||||||
<div class="pr-4 sm:pl-4">
|
<div class="pr-4 sm:pl-4">
|
||||||
<span
|
<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"
|
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
|
3</span
|
||||||
</span>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
|
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
|
||||||
<p class="text-gray-500 dark:text-gray-400">
|
<p class="text-gray-500 dark:text-gray-400">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
|
||||||
lobortis, mi risus tempus nulla.
|
lobortis, mi risus tempus nulla.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,225 +1,223 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
import { getHomePermalink } from "~/utils/permalinks";
|
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="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="col-span-12 lg:col-span-4">
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>AstroWind</a>
|
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>AstroWind</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-gray-600">
|
<div class="text-sm text-gray-600">
|
||||||
<a
|
<a
|
||||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||||
href="#"
|
href="#">Terms</a
|
||||||
>Terms
|
> ·
|
||||||
</a> ·
|
<a
|
||||||
<a
|
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||||
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
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Product</div>
|
||||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
<ul class="text-sm">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Product</div>
|
<li class="mb-2">
|
||||||
<ul class="text-sm">
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Features</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Features
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Security</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Security
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Team</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Team
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Enterprise</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Enterprise
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Customer stories</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Customer stories
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Pricing</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Pricing
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Resources</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Resources
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Platform</div>
|
||||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
<ul class="text-sm">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Platform</div>
|
<li class="mb-2">
|
||||||
<ul class="text-sm">
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Developer API</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Developer API
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Partners</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Partners
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Atom</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Atom
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Electron</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Electron
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>GitHub Desktop</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>GitHub Desktop
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Support</div>
|
||||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
<ul class="text-sm">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Support</div>
|
<li class="mb-2">
|
||||||
<ul class="text-sm">
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Docs</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Docs
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Community Forum</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Community Forum
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Professional Services</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Professional Services
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Skills</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Skills
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Status</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Status
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||||
</div>
|
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
|
||||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
<ul class="text-sm">
|
||||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
|
<li class="mb-2">
|
||||||
<ul class="text-sm">
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>About</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>About
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Blog</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Blog
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Careers</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Careers
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Press</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Press
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Inclusion</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Inclusion
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Social Impact</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Social Impact
|
</li>
|
||||||
</a>
|
<li class="mb-2">
|
||||||
</li>
|
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
||||||
<li class="mb-2">
|
>Shop</a
|
||||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
|
>
|
||||||
>Shop
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
|
||||||
</div>
|
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
|
||||||
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
|
<li>
|
||||||
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
|
<a
|
||||||
<li>
|
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"
|
||||||
<a
|
aria-label="Twitter"
|
||||||
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"
|
href="#"
|
||||||
aria-label="Twitter"
|
>
|
||||||
href="#"
|
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
|
</li>
|
||||||
</a>
|
<li>
|
||||||
</li>
|
<a
|
||||||
<li>
|
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"
|
||||||
<a
|
aria-label="Instagram"
|
||||||
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"
|
href="#"
|
||||||
aria-label="Instagram"
|
>
|
||||||
href="#"
|
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
|
</li>
|
||||||
</a>
|
<li>
|
||||||
</li>
|
<a
|
||||||
<li>
|
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"
|
||||||
<a
|
aria-label="Facebook"
|
||||||
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"
|
href="#"
|
||||||
aria-label="Facebook"
|
>
|
||||||
href="#"
|
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
|
</li>
|
||||||
</a>
|
<li>
|
||||||
</li>
|
<a
|
||||||
<li>
|
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"
|
||||||
<a
|
aria-label="RSS"
|
||||||
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"
|
href="/rss.xml"
|
||||||
aria-label="RSS"
|
>
|
||||||
href="/rss.xml"
|
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
</li>
|
||||||
</a>
|
<li>
|
||||||
</li>
|
<a
|
||||||
<li>
|
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"
|
||||||
<a
|
aria-label="Github"
|
||||||
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"
|
href="https://github.com/onwidget/astrowind"
|
||||||
aria-label="Github"
|
>
|
||||||
href="https://github.com/onwidget/astrowind"
|
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
||||||
</ul>
|
<span
|
||||||
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"
|
||||||
<span
|
>
|
||||||
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"
|
</span>
|
||||||
>
|
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a> ·
|
||||||
</span>
|
All rights reserved.
|
||||||
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a> ·
|
</div>
|
||||||
All rights reserved.
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@ -1,81 +1,79 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
import Logo from "~/components/atoms/Logo.astro";
|
import Logo from '~/components/atoms/Logo.astro';
|
||||||
import ToggleTheme from "~/components/core/ToggleTheme.astro";
|
import ToggleTheme from '~/components/core/ToggleTheme.astro';
|
||||||
import ToggleMenu from "~/components/core/ToggleMenu.astro";
|
import ToggleMenu from '~/components/core/ToggleMenu.astro';
|
||||||
|
|
||||||
import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
|
import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permalinks';
|
||||||
---
|
---
|
||||||
|
|
||||||
<header
|
<header
|
||||||
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0"
|
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0"
|
||||||
>
|
>
|
||||||
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<a class="flex items-center" href={getHomePermalink()}>
|
<a class="flex items-center" href={getHomePermalink()}>
|
||||||
<Logo />
|
<Logo />
|
||||||
</a>
|
</a>
|
||||||
<div class="flex items-center md:hidden">
|
<div class="flex items-center md:hidden">
|
||||||
<ToggleTheme />
|
<ToggleTheme />
|
||||||
<ToggleMenu />
|
<ToggleMenu />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav
|
<nav
|
||||||
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto"
|
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto"
|
||||||
aria-label="Main navigation"
|
aria-label="Main navigation"
|
||||||
id="menu"
|
id="menu"
|
||||||
>
|
>
|
||||||
<ul
|
<ul
|
||||||
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base"
|
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base"
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<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"
|
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="#"
|
href="#">Pages</a
|
||||||
>Pages
|
>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a
|
||||||
<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"
|
||||||
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
|
||||||
>Resources
|
</a>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a
|
||||||
<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"
|
||||||
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
|
</li>
|
||||||
</a>
|
<li class="md:hidden">
|
||||||
</li>
|
<a
|
||||||
<li class="md:hidden">
|
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||||
<a
|
href="https://github.com/onwidget/astrowind"
|
||||||
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
>Github
|
||||||
href="https://github.com/onwidget/astrowind"
|
</a>
|
||||||
>Github
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
|
||||||
</ul>
|
<div class="hidden items-center md:flex">
|
||||||
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
|
<ToggleTheme iconClass="w-5 h-5" />
|
||||||
<div class="hidden items-center md:flex">
|
<a
|
||||||
<ToggleTheme iconClass="w-5 h-5" />
|
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"
|
||||||
<a
|
aria-label="RSS Feed"
|
||||||
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"
|
href="/rss.xml"
|
||||||
aria-label="RSS Feed"
|
>
|
||||||
href="/rss.xml"
|
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
<a
|
||||||
</a>
|
href="https://github.com/onwidget/astrowind"
|
||||||
<a
|
class="inline-block 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"
|
||||||
href="https://github.com/onwidget/astrowind"
|
aria-label="Astrowind Github"
|
||||||
class="inline-block 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"
|
>
|
||||||
aria-label="Astrowind Github"
|
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
||||||
>
|
</a>
|
||||||
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -1,59 +1,60 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
import Picture from "~/components/core/Picture.astro";
|
import Picture from '~/components/core/Picture.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<div class="py-12 md:py-20">
|
<div class="py-12 md:py-20">
|
||||||
<div class="text-center pb-10 md:pb-16">
|
<div class="text-center pb-10 md:pb-16">
|
||||||
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
Your website with
|
Your website with
|
||||||
<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">Astro</span> +
|
||||||
<span
|
<span
|
||||||
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
|
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
|
||||||
>Tailwind CSS
|
>Tailwind CSS</span
|
||||||
</span>
|
>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="max-w-3xl mx-auto">
|
<div class="max-w-3xl mx-auto">
|
||||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
<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
|
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,
|
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
|
||||||
sitemap generation and more.</span>
|
class="hidden sm:inline"
|
||||||
</p>
|
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
|
||||||
<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">
|
</p>
|
||||||
<a
|
<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||||
class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
|
<div class="flex w-full sm:w-auto">
|
||||||
href="https://github.com/onwidget/astrowind"
|
<a
|
||||||
target="_blank"
|
class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
|
||||||
rel="noopener"
|
href="https://github.com/onwidget/astrowind"
|
||||||
>
|
target="_blank"
|
||||||
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
rel="noopener"
|
||||||
</a>
|
>
|
||||||
</div>
|
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
||||||
<div class="flex w-full sm:w-auto">
|
</a>
|
||||||
<a
|
</div>
|
||||||
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
|
<div class="flex w-full sm:w-auto">
|
||||||
href="#features"
|
<a
|
||||||
>Learn more
|
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
|
||||||
</a>
|
href="#features">Learn more</a
|
||||||
</div>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<div class="relative mb-8 m-auto max-w-3xl">
|
<div>
|
||||||
<Picture
|
<div class="relative mb-8 m-auto max-w-3xl">
|
||||||
src={import("~/assets/images/hero.jpg")}
|
<Picture
|
||||||
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
|
src={import('~/assets/images/hero.jpg')}
|
||||||
widths={[400, 768]}
|
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
|
||||||
sizes=" (max-width: 767px) 400px, 768px"
|
widths={[400, 768]}
|
||||||
alt="Hero Image"
|
sizes=" (max-width: 767px) 400px, 768px"
|
||||||
aspectRatio="16:9"
|
alt="Hero Image"
|
||||||
/>
|
aspectRatio="16:9"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,24 +2,24 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
|
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
|
||||||
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">132K</div>
|
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">132K</div>
|
||||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||||
Downloads
|
Downloads
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">24.8K</div>
|
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">24.8K</div>
|
||||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Stars</p>
|
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Stars</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center md:border-r dark:md:border-slate-500 font-heading">
|
<div class="text-center md:border-r dark:md:border-slate-500 font-heading">
|
||||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500">10.3K</div>
|
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500">10.3K</div>
|
||||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Forks</p>
|
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Forks</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">48.4K</div>
|
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">48.4K</div>
|
||||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Users</p>
|
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Users</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,89 +1,89 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon";
|
import { Icon } from 'astro-icon';
|
||||||
import Picture from "~/components/core/Picture.astro";
|
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">
|
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
||||||
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
|
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
|
||||||
<div class="md:pb-6 md:pr-16">
|
<div class="md:pb-6 md:pr-16">
|
||||||
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
|
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
|
||||||
Sed ac magna sit amet risus tristique interdum. hac.
|
Sed ac magna sit amet risus tristique interdum. hac.
|
||||||
</h2>
|
</h2>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
||||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1 pb-8">
|
<div class="pt-1 pb-8">
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
|
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
|
||||||
sit amet dui tellus.
|
sit amet dui tellus.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
||||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1 pb-8">
|
<div class="pt-1 pb-8">
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
||||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1 pb-8">
|
<div class="pt-1 pb-8">
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||||
<Icon name="tabler:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
<Icon name="tabler:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1">
|
<div class="pt-1">
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
|
||||||
<p class="text-gray-700"></p>
|
<p class="text-gray-700"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<Picture
|
<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"
|
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]}
|
widths={[400, 768]}
|
||||||
sizes="(max-width: 768px) 100vw, 432px"
|
sizes="(max-width: 768px) 100vw, 432px"
|
||||||
alt="Astronaut"
|
alt="Astronaut"
|
||||||
aspectRatio="432:768"
|
aspectRatio="432:768"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,30 +1,30 @@
|
|||||||
export const SITE = {
|
export const SITE = {
|
||||||
name: "AstroWind",
|
name: 'AstroWind',
|
||||||
|
|
||||||
origin: "https://astrowind.vercel.app",
|
origin: 'https://astrowind.vercel.app',
|
||||||
basePathname: "/",
|
basePathname: '/',
|
||||||
|
|
||||||
title: "AstroWind — Your website with Astro + 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.",
|
description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
|
||||||
|
|
||||||
googleAnalyticsId: false, // or "G-XXXXXXXXXX",
|
googleAnalyticsId: false, // or "G-XXXXXXXXXX",
|
||||||
googleSiteVerificationId: "orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M",
|
googleSiteVerificationId: 'orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const BLOG = {
|
export const BLOG = {
|
||||||
disabled: false,
|
disabled: false,
|
||||||
slug: "blog",
|
slug: 'blog',
|
||||||
|
|
||||||
postsWithoutBlogSlug: true,
|
postsWithoutBlogSlug: true,
|
||||||
postsPerPage: 6,
|
postsPerPage: 6,
|
||||||
|
|
||||||
category: {
|
category: {
|
||||||
disabled: false,
|
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: {
|
tag: {
|
||||||
disabled: false,
|
disabled: false,
|
||||||
slug: "tag",
|
slug: 'tag',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,26 +1,25 @@
|
|||||||
---
|
---
|
||||||
import "~/assets/styles/base.css";
|
import '~/assets/styles/base.css';
|
||||||
|
|
||||||
import MetaTags from "~/components/core/MetaTags.astro";
|
import MetaTags from '~/components/core/MetaTags.astro';
|
||||||
import BasicScripts from "~/components/core/BasicScripts.astro";
|
import BasicScripts from '~/components/core/BasicScripts.astro';
|
||||||
|
|
||||||
const { meta = {} } = Astro.props;
|
const { meta = {} } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="motion-safe:scroll-smooth 2xl:text-[20px]">
|
<html lang="en" class="motion-safe:scroll-smooth 2xl:text-[20px]">
|
||||||
<head>
|
<head>
|
||||||
<MetaTags {...meta} />
|
<MetaTags {...meta} />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
|
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
|
||||||
<slot />
|
<slot />
|
||||||
<BasicScripts />
|
<BasicScripts />
|
||||||
</body>
|
<style is:global>
|
||||||
|
img {
|
||||||
|
content-visibility: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style is:global>
|
|
||||||
img {
|
|
||||||
content-visibility: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,18 +1,18 @@
|
|||||||
---
|
---
|
||||||
import Layout from "~/layouts/PageLayout.astro";
|
import Layout from '~/layouts/PageLayout.astro';
|
||||||
|
|
||||||
const { meta } = Astro.props;
|
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">
|
<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
|
||||||
<header>
|
<header>
|
||||||
<h1
|
<h1
|
||||||
class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading"
|
class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading"
|
||||||
>
|
>
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
</h1>
|
</h1>
|
||||||
</header>
|
</header>
|
||||||
<slot />
|
<slot />
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
---
|
---
|
||||||
import Layout from "~/layouts/BaseLayout.astro";
|
import Layout from '~/layouts/BaseLayout.astro';
|
||||||
import Header from "~/components/widgets/Header.astro";
|
import Header from '~/components/widgets/Header.astro';
|
||||||
import Footer from "~/components/widgets/Footer.astro";
|
import Footer from '~/components/widgets/Footer.astro';
|
||||||
|
|
||||||
const { meta } = Astro.props;
|
const { meta } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={meta}>
|
<Layout {meta}>
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
---
|
---
|
||||||
import Layout from "~/layouts/BaseLayout.astro";
|
import Layout from '~/layouts/BaseLayout.astro';
|
||||||
import { SITE } from "~/config.mjs";
|
import { SITE } from '~/config.mjs';
|
||||||
import Error404 from "~/components/widgets/Error404.astro";
|
import Error404 from '~/components/widgets/Error404.astro';
|
||||||
|
|
||||||
const title = `Error 404 — ${SITE.name}`;
|
const title = `Error 404 — ${SITE.name}`;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={{ title }}>
|
<Layout meta={{ title }}>
|
||||||
<Error404 />
|
<Error404 />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,39 +1,39 @@
|
|||||||
---
|
---
|
||||||
import { SITE, BLOG } from "~/config.mjs";
|
import { SITE, BLOG } from '~/config.mjs';
|
||||||
|
|
||||||
import Layout from "~/layouts/BlogLayout.astro";
|
import Layout from '~/layouts/BlogLayout.astro';
|
||||||
import BlogList from "~/components/blog/List.astro";
|
import BlogList from '~/components/blog/List.astro';
|
||||||
import Pagination from "~/components/atoms/Pagination.astro";
|
import Pagination from '~/components/atoms/Pagination.astro';
|
||||||
|
|
||||||
import { fetchPosts } from "~/utils/posts";
|
import { fetchPosts } from '~/utils/posts';
|
||||||
import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks";
|
import { getCanonical, getPermalink, BLOG_BASE } from '~/utils/permalinks';
|
||||||
|
|
||||||
export async function getStaticPaths({ paginate }) {
|
export async function getStaticPaths({ paginate }) {
|
||||||
if (BLOG?.disabled) return [];
|
if (BLOG?.disabled) return [];
|
||||||
|
|
||||||
const posts = await fetchPosts();
|
const posts = await fetchPosts();
|
||||||
|
|
||||||
return paginate(posts, {
|
return paginate(posts, {
|
||||||
params: { blog: BLOG_BASE || undefined },
|
params: { blog: BLOG_BASE || undefined },
|
||||||
pageSize: BLOG.postsPerPage,
|
pageSize: BLOG.postsPerPage,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const { page } = Astro.props;
|
const { page } = Astro.props;
|
||||||
const currentPage = page.currentPage ?? 1;
|
const currentPage = page.currentPage ?? 1;
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
|
title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
|
||||||
description: SITE.description,
|
description: SITE.description,
|
||||||
canonical: getCanonical(getPermalink(page.url.current)),
|
canonical: getCanonical(getPermalink(page.url.current)),
|
||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={meta}>
|
<Layout {meta}>
|
||||||
<Fragment slot="title">
|
<Fragment slot="title">
|
||||||
News and step-by-step guides about
|
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>
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">AstroWind</span>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<BlogList posts={page.data} />
|
<BlogList posts={page.data} />
|
||||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,34 +1,37 @@
|
|||||||
---
|
---
|
||||||
import { SITE, BLOG } from "~/config.mjs";
|
import { SITE, BLOG } from '~/config.mjs';
|
||||||
|
|
||||||
import Layout from "~/layouts/PageLayout.astro";
|
import Layout from '~/layouts/PageLayout.astro';
|
||||||
import SinglePost from "~/components/blog/SinglePost.astro";
|
import SinglePost from '~/components/blog/SinglePost.astro';
|
||||||
|
|
||||||
import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from "~/utils/permalinks";
|
import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from '~/utils/permalinks';
|
||||||
import { fetchPosts } from "~/utils/posts";
|
import { fetchPosts } from '~/utils/posts';
|
||||||
import { findImage } from "~/utils/images";
|
import { findImage } from '~/utils/images';
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
if (BLOG?.disabled) return [];
|
if (BLOG?.disabled) return [];
|
||||||
|
|
||||||
const posts = await fetchPosts();
|
const posts = await fetchPosts();
|
||||||
|
|
||||||
return posts.map((post) => ({
|
return posts.map((post) => ({
|
||||||
params: { slug: cleanSlug(post.slug), blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG_BASE || undefined },
|
params: {
|
||||||
props: { post },
|
slug: cleanSlug(post.slug),
|
||||||
}));
|
blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG_BASE || undefined,
|
||||||
|
},
|
||||||
|
props: { post },
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post } = Astro.props;
|
const { post } = Astro.props;
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: `${post.title} — ${SITE.name}`,
|
title: `${post.title} — ${SITE.name}`,
|
||||||
description: post.description,
|
description: post.description,
|
||||||
canonical: post.canonical || getCanonical(getPermalink(post.slug, "post")),
|
canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
|
||||||
image: await findImage(post.image),
|
image: await findImage(post.image),
|
||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={meta}>
|
<Layout {meta}>
|
||||||
<SinglePost post={{ ...post, image: meta.image }} />
|
<SinglePost post={{ ...post, image: meta.image }} />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
---
|
---
|
||||||
import { SITE, BLOG } from "~/config.mjs";
|
import { SITE, BLOG } from '~/config.mjs';
|
||||||
|
|
||||||
import Layout from "~/layouts/BlogLayout.astro";
|
import Layout from '~/layouts/BlogLayout.astro';
|
||||||
import BlogList from "~/components/blog/List.astro";
|
import BlogList from '~/components/blog/List.astro';
|
||||||
import Pagination from "~/components/atoms/Pagination.astro";
|
import Pagination from '~/components/atoms/Pagination.astro';
|
||||||
|
|
||||||
import { fetchPosts } from "~/utils/posts";
|
import { fetchPosts } from '~/utils/posts';
|
||||||
import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from "~/utils/permalinks";
|
import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from '~/utils/permalinks';
|
||||||
|
|
||||||
export async function getStaticPaths({ paginate }) {
|
export async function getStaticPaths({ paginate }) {
|
||||||
if (BLOG?.disabled || BLOG?.category?.disabled) return [];
|
if (BLOG?.disabled || BLOG?.category?.disabled) return [];
|
||||||
|
|
||||||
const posts = await fetchPosts();
|
const posts = await fetchPosts();
|
||||||
|
|
||||||
const categories = new Set();
|
const categories = new Set();
|
||||||
posts.map((post) => {
|
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) =>
|
return Array.from(categories).map((category) =>
|
||||||
paginate(
|
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 },
|
params: { category: cleanSlug(category), categories: CATEGORY_BASE || undefined },
|
||||||
pageSize: BLOG.postsPerPage,
|
pageSize: BLOG.postsPerPage,
|
||||||
props: { category },
|
props: { category },
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { page, category } = Astro.props;
|
const { page, category } = Astro.props;
|
||||||
@ -35,16 +35,16 @@ const { page, category } = Astro.props;
|
|||||||
const currentPage = page.currentPage ?? 1;
|
const currentPage = page.currentPage ?? 1;
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
|
title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
|
||||||
description: SITE.description,
|
description: SITE.description,
|
||||||
canonical: getCanonical(getPermalink(page.url.current)),
|
canonical: getCanonical(getPermalink(page.url.current)),
|
||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={{ ...meta, noindex: true }}>
|
<Layout meta={{ ...meta, noindex: true }}>
|
||||||
<Fragment slot="title">
|
<Fragment slot="title">
|
||||||
Category: {category}
|
Category: {category}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<BlogList posts={page.data} />
|
<BlogList posts={page.data} />
|
||||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
---
|
---
|
||||||
import { SITE, BLOG } from "~/config.mjs";
|
import { SITE, BLOG } from '~/config.mjs';
|
||||||
|
|
||||||
import Layout from "~/layouts/BlogLayout.astro";
|
import Layout from '~/layouts/BlogLayout.astro';
|
||||||
import BlogList from "~/components/blog/List.astro";
|
import BlogList from '~/components/blog/List.astro';
|
||||||
import Pagination from "~/components/atoms/Pagination.astro";
|
import Pagination from '~/components/atoms/Pagination.astro';
|
||||||
|
|
||||||
import { fetchPosts } from "~/utils/posts";
|
import { fetchPosts } from '~/utils/posts';
|
||||||
import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from "~/utils/permalinks";
|
import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from '~/utils/permalinks';
|
||||||
|
|
||||||
export async function getStaticPaths({ paginate }) {
|
export async function getStaticPaths({ paginate }) {
|
||||||
if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
|
if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
|
||||||
|
|
||||||
const posts = await fetchPosts();
|
const posts = await fetchPosts();
|
||||||
|
|
||||||
const tags = new Set();
|
const tags = new Set();
|
||||||
posts.map((post) => {
|
posts.map((post) => {
|
||||||
Array.isArray(post.tags) && post.tags.map((tag) => tags.add(tag.toLowerCase()));
|
Array.isArray(post.tags) && post.tags.map((tag) => tags.add(tag.toLowerCase()));
|
||||||
});
|
});
|
||||||
|
|
||||||
return Array.from(tags).map((tag) =>
|
return Array.from(tags).map((tag) =>
|
||||||
paginate(
|
paginate(
|
||||||
posts.filter((post) => Array.isArray(post.tags) && post.tags.includes(tag)),
|
posts.filter((post) => Array.isArray(post.tags) && post.tags.includes(tag)),
|
||||||
{
|
{
|
||||||
params: { tag: cleanSlug(tag), tags: TAG_BASE || undefined },
|
params: { tag: cleanSlug(tag), tags: TAG_BASE || undefined },
|
||||||
pageSize: BLOG.postsPerPage,
|
pageSize: BLOG.postsPerPage,
|
||||||
props: { tag },
|
props: { tag },
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { page, tag } = Astro.props;
|
const { page, tag } = Astro.props;
|
||||||
@ -35,16 +35,16 @@ const { page, tag } = Astro.props;
|
|||||||
const currentPage = page.currentPage ?? 1;
|
const currentPage = page.currentPage ?? 1;
|
||||||
|
|
||||||
const meta = {
|
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,
|
description: SITE.description,
|
||||||
canonical: getCanonical(getPermalink(page.url.current)),
|
canonical: getCanonical(getPermalink(page.url.current)),
|
||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={{ ...meta, noindex: true }}>
|
<Layout meta={{ ...meta, noindex: true }}>
|
||||||
<Fragment slot="title">
|
<Fragment slot="title">
|
||||||
Tag: {tag}
|
Tag: {tag}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<BlogList posts={page.data} />
|
<BlogList posts={page.data} />
|
||||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
---
|
---
|
||||||
import { SITE } from "~/config.mjs";
|
import { SITE } from '~/config.mjs';
|
||||||
import { getCanonical, getHomePermalink } from "~/utils/permalinks";
|
import { getCanonical, getHomePermalink } from '~/utils/permalinks';
|
||||||
import Layout from "~/layouts/PageLayout.astro";
|
import Layout from '~/layouts/PageLayout.astro';
|
||||||
|
|
||||||
import Hero from "~/components/widgets/Hero.astro";
|
import Hero from '~/components/widgets/Hero.astro';
|
||||||
import Features from "~/components/widgets/Features.astro";
|
import Features from '~/components/widgets/Features.astro';
|
||||||
import Features2 from "~/components/widgets/Features2.astro";
|
import Features2 from '~/components/widgets/Features2.astro';
|
||||||
import Steps from "~/components/widgets/Steps.astro";
|
import Steps from '~/components/widgets/Steps.astro';
|
||||||
import Features3 from "~/components/widgets/Features3.astro";
|
import Features3 from '~/components/widgets/Features3.astro';
|
||||||
import HighlightedPosts from "~/components/blog/HighlightedPosts.astro";
|
import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
|
||||||
import FAQs from "~/components/widgets/FAQs.astro";
|
import FAQs from '~/components/widgets/FAQs.astro';
|
||||||
import Stats from "~/components/widgets/Stats.astro";
|
import Stats from '~/components/widgets/Stats.astro';
|
||||||
import CallToAction from "~/components/widgets/CallToAction.astro";
|
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: SITE.title,
|
title: SITE.title,
|
||||||
description: SITE.description,
|
description: SITE.description,
|
||||||
canonical: getCanonical(getHomePermalink()),
|
canonical: getCanonical(getHomePermalink()),
|
||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout meta={meta}>
|
<Layout {meta}>
|
||||||
<Hero />
|
<Hero />
|
||||||
<Features />
|
<Features />
|
||||||
<Steps />
|
<Steps />
|
||||||
<Features2 />
|
<Features2 />
|
||||||
<Features3 />
|
<Features3 />
|
||||||
<HighlightedPosts />
|
<HighlightedPosts />
|
||||||
<FAQs />
|
<FAQs />
|
||||||
<Stats />
|
<Stats />
|
||||||
<CallToAction />
|
<CallToAction />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -1,29 +1,29 @@
|
|||||||
import rss from "@astrojs/rss";
|
import rss from '@astrojs/rss';
|
||||||
|
|
||||||
import { SITE, BLOG } from "~/config.mjs";
|
import { SITE, BLOG } from '~/config.mjs';
|
||||||
import { fetchPosts } from "~/utils/posts";
|
import { fetchPosts } from '~/utils/posts';
|
||||||
import { getPermalink } from "~/utils/permalinks";
|
import { getPermalink } from '~/utils/permalinks';
|
||||||
|
|
||||||
export const get = async () => {
|
export const get = async () => {
|
||||||
if (BLOG.disabled) {
|
if (BLOG.disabled) {
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 404,
|
status: 404,
|
||||||
statusText: 'Not found'
|
statusText: 'Not found',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const posts = await fetchPosts();
|
const posts = await fetchPosts();
|
||||||
|
|
||||||
return rss({
|
return rss({
|
||||||
title: `${SITE.name}’s Blog`,
|
title: `${SITE.name}’s Blog`,
|
||||||
description: SITE.description,
|
description: SITE.description,
|
||||||
site: import.meta.env.SITE,
|
site: import.meta.env.SITE,
|
||||||
|
|
||||||
items: posts.map((post) => ({
|
items: posts.map((post) => ({
|
||||||
link: getPermalink(post.slug, "post"),
|
link: getPermalink(post.slug, 'post'),
|
||||||
title: post.title,
|
title: post.title,
|
||||||
description: post.description,
|
description: post.description,
|
||||||
pubDate: post.pubDate,
|
pubDate: post.pubDate,
|
||||||
})),
|
})),
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
import path from "path";
|
import path from 'path';
|
||||||
import { fileURLToPath } from "url";
|
import { fileURLToPath } from 'url';
|
||||||
|
|
||||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
/** */
|
/** */
|
||||||
export const getProjectRootDir = () => {
|
export const getProjectRootDir = () => {
|
||||||
const mode = import.meta.env.MODE;
|
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) => {
|
export const getRelativeUrlByFilePath = (filepath) => {
|
||||||
if (filepath) {
|
if (filepath) {
|
||||||
return filepath.replace(__srcFolder, "");
|
return filepath.replace(__srcFolder, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,37 +1,37 @@
|
|||||||
const load = async function () {
|
const load = async function () {
|
||||||
let images = [];
|
let images = [];
|
||||||
try {
|
try {
|
||||||
images = import.meta.glob("~/assets/images/**");
|
images = import.meta.glob('~/assets/images/**');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// continue regardless of error
|
// continue regardless of error
|
||||||
}
|
}
|
||||||
return images;
|
return images;
|
||||||
};
|
};
|
||||||
|
|
||||||
let _images;
|
let _images;
|
||||||
|
|
||||||
/** */
|
/** */
|
||||||
export const fetchLocalImages = async () => {
|
export const fetchLocalImages = async () => {
|
||||||
_images = _images || load();
|
_images = _images || load();
|
||||||
return await _images;
|
return await _images;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** */
|
/** */
|
||||||
export const findImage = async (imagePath) => {
|
export const findImage = async (imagePath) => {
|
||||||
if (typeof imagePath !== "string") {
|
if (typeof imagePath !== 'string') {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
|
if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
|
||||||
return imagePath;
|
return imagePath;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!imagePath.startsWith("~/assets")) {
|
if (!imagePath.startsWith('~/assets')) {
|
||||||
return null;
|
return null;
|
||||||
} // For now only consume images using ~/assets alias (or absolute)
|
} // For now only consume images using ~/assets alias (or absolute)
|
||||||
|
|
||||||
const images = await fetchLocalImages();
|
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;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
import slugify from "limax";
|
import slugify from 'limax';
|
||||||
|
|
||||||
import { SITE, BLOG } from "~/config.mjs";
|
import { SITE, BLOG } from '~/config.mjs';
|
||||||
|
|
||||||
const trim = (str, ch) => {
|
const trim = (str, ch) => {
|
||||||
let start = 0,
|
let start = 0,
|
||||||
end = str.length;
|
end = str.length;
|
||||||
while (start < end && str[start] === ch) ++start;
|
while (start < end && str[start] === ch) ++start;
|
||||||
while (end > start && str[end - 1] === ch) --end;
|
while (end > start && str[end - 1] === ch) --end;
|
||||||
return start > 0 || end < str.length ? str.substring(start, end) : str;
|
return start > 0 || end < str.length ? str.substring(start, end) : str;
|
||||||
};
|
};
|
||||||
|
|
||||||
const trimSlash = (s) => trim(trim(s, "/"));
|
const trimSlash = (s) => trim(trim(s, '/'));
|
||||||
const createPath = (...params) => "/" + params.filter((el) => !!el).join("/");
|
const createPath = (...params) => '/' + params.filter((el) => !!el).join('/');
|
||||||
|
|
||||||
const basePathname = trimSlash(SITE.basePathname);
|
const basePathname = trimSlash(SITE.basePathname);
|
||||||
|
|
||||||
@ -22,26 +22,26 @@ export const CATEGORY_BASE = cleanSlug(BLOG?.category?.slug);
|
|||||||
export const TAG_BASE = cleanSlug(BLOG?.tag?.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);
|
const _slug = cleanSlug(slug);
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "category":
|
case 'category':
|
||||||
return createPath(basePathname, CATEGORY_BASE, _slug);
|
return createPath(basePathname, CATEGORY_BASE, _slug);
|
||||||
|
|
||||||
case "tag":
|
case 'tag':
|
||||||
return createPath(basePathname, TAG_BASE, _slug);
|
return createPath(basePathname, TAG_BASE, _slug);
|
||||||
|
|
||||||
case "post":
|
case 'post':
|
||||||
return createPath(basePathname, BLOG.postsWithoutBlogSlug ? "" : BLOG_BASE, _slug);
|
return createPath(basePathname, BLOG.postsWithoutBlogSlug ? '' : BLOG_BASE, _slug);
|
||||||
|
|
||||||
case "page":
|
case 'page':
|
||||||
default:
|
default:
|
||||||
return createPath(basePathname, _slug);
|
return createPath(basePathname, _slug);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/** */
|
/** */
|
||||||
@ -49,6 +49,6 @@ export const getBlogPermalink = () => getPermalink(BLOG_BASE);
|
|||||||
|
|
||||||
/** */
|
/** */
|
||||||
export const getHomePermalink = () => {
|
export const getHomePermalink = () => {
|
||||||
const permalink = getPermalink();
|
const permalink = getPermalink();
|
||||||
return permalink !== "/" ? permalink + "/" : permalink;
|
return permalink !== '/' ? permalink + '/' : permalink;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,66 +1,66 @@
|
|||||||
import getReadingTime from "reading-time";
|
import getReadingTime from 'reading-time';
|
||||||
|
|
||||||
const getNormalizedPost = async (post) => {
|
const getNormalizedPost = async (post) => {
|
||||||
const { frontmatter, compiledContent, rawContent, file } = post;
|
const { frontmatter, compiledContent, rawContent, file } = post;
|
||||||
const ID = file.split("/").pop().split(".").shift();
|
const ID = file.split('/').pop().split('.').shift();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: ID,
|
id: ID,
|
||||||
|
|
||||||
pubDate: frontmatter.pubDate,
|
pubDate: frontmatter.pubDate,
|
||||||
draft: frontmatter.draft,
|
draft: frontmatter.draft,
|
||||||
|
|
||||||
canonical: frontmatter.canonical,
|
canonical: frontmatter.canonical,
|
||||||
slug: frontmatter.slug || ID,
|
slug: frontmatter.slug || ID,
|
||||||
|
|
||||||
title: frontmatter.title,
|
title: frontmatter.title,
|
||||||
description: frontmatter.description,
|
description: frontmatter.description,
|
||||||
body: compiledContent(),
|
body: compiledContent(),
|
||||||
image: frontmatter.image,
|
image: frontmatter.image,
|
||||||
|
|
||||||
excerpt: frontmatter.excerpt,
|
excerpt: frontmatter.excerpt,
|
||||||
authors: frontmatter.authors,
|
authors: frontmatter.authors,
|
||||||
category: frontmatter.category,
|
category: frontmatter.category,
|
||||||
tags: frontmatter.tags,
|
tags: frontmatter.tags,
|
||||||
readingTime: Math.ceil(getReadingTime(rawContent()).minutes),
|
readingTime: Math.ceil(getReadingTime(rawContent()).minutes),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const load = async function () {
|
const load = async function () {
|
||||||
const posts = import.meta.glob("~/data/posts/**/*.md", {
|
const posts = import.meta.glob('~/data/posts/**/*.md', {
|
||||||
eager: true,
|
eager: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const normalizedPosts = Object.keys(posts).map(async (key) => {
|
const normalizedPosts = Object.keys(posts).map(async (key) => {
|
||||||
const post = await posts[key];
|
const post = await posts[key];
|
||||||
return await getNormalizedPost(post);
|
return await getNormalizedPost(post);
|
||||||
});
|
});
|
||||||
|
|
||||||
const results = (await Promise.all(normalizedPosts))
|
const results = (await Promise.all(normalizedPosts))
|
||||||
.sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
|
.sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
|
||||||
.filter((post) => !post.draft);
|
.filter((post) => !post.draft);
|
||||||
return results;
|
return results;
|
||||||
};
|
};
|
||||||
|
|
||||||
let _posts;
|
let _posts;
|
||||||
|
|
||||||
/** */
|
/** */
|
||||||
export const fetchPosts = async () => {
|
export const fetchPosts = async () => {
|
||||||
_posts = _posts || load();
|
_posts = _posts || load();
|
||||||
|
|
||||||
return await _posts;
|
return await _posts;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** */
|
/** */
|
||||||
export const findPostsByIds = async (ids) => {
|
export const findPostsByIds = async (ids) => {
|
||||||
if (!Array.isArray(ids)) return [];
|
if (!Array.isArray(ids)) return [];
|
||||||
|
|
||||||
const posts = await fetchPosts();
|
const posts = await fetchPosts();
|
||||||
|
|
||||||
return ids.reduce(function (r, id) {
|
return ids.reduce(function (r, id) {
|
||||||
posts.some(function (post) {
|
posts.some(function (post) {
|
||||||
return id === post.id && r.push(post);
|
return id === post.id && r.push(post);
|
||||||
});
|
});
|
||||||
return r;
|
return r;
|
||||||
}, []);
|
}, []);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
/** */
|
/** */
|
||||||
export const getFormattedDate = (date) =>
|
export const getFormattedDate = (date) =>
|
||||||
date
|
date
|
||||||
? new Date(date).toLocaleDateString("en-us", {
|
? new Date(date).toLocaleDateString('en-us', {
|
||||||
year: "numeric",
|
year: 'numeric',
|
||||||
month: "short",
|
month: 'short',
|
||||||
day: "numeric",
|
day: 'numeric',
|
||||||
})
|
})
|
||||||
: "";
|
: '';
|
||||||
|
|||||||
@ -1,21 +1,21 @@
|
|||||||
const defaultTheme = require("tailwindcss/defaultTheme");
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||||
const colors = require("tailwindcss/colors")
|
const colors = require('tailwindcss/colors');
|
||||||
|
|
||||||
module.exports = {
|
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: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: colors.blue,
|
primary: colors.blue,
|
||||||
secondary: colors.pink,
|
secondary: colors.pink,
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans],
|
sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [require("@tailwindcss/typography")],
|
plugins: [require('@tailwindcss/typography')],
|
||||||
darkMode: "class",
|
darkMode: 'class',
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
Reference in New Issue
Block a user