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

Update blog files and details

Browse Source
This commit is contained in:
prototypa
2022-08-19 03:43:12 -04:00
parent ff7d3f5555
commit 4f9e31ef39
15 changed files with 202 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,3 +7,11 @@
@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;
}
}
.menu-opened .line1 {
transform: rotate(-45deg) translate(-12px, 8px);
}
.menu-opened .line2 {
transform: rotate(45deg) translate(4px, -16px);
}

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

@ -3,23 +3,40 @@ const {} = Astro.props;
---
<script is:inline>
function toggleDarkMode() {
document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
}
window.toggleDarkMode = toggleDarkMode;
if (
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");
} else {
document.documentElement.classList.remove("dark");
}
function toggleMenu() {
document.getElementById("menu").classList.toggle("hidden");
function attachEvent(selector, event, fn) {
const elem = document.querySelector(selector);
if (elem) {
elem.addEventListener(
event,
function () {
fn(elem);
},
false
);
}
}
window.toggleMenu = toggleMenu;
window.onload = function () {
attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
elem.classList.toggle("menu-opened");
document.getElementById("menu").classList.toggle("hidden");
});
attachEvent("[data-aw-toggle-color-scheme]", "click", function (elem) {
document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark")
? "dark"
: "light";
});
};
</script>

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

@ -6,7 +6,7 @@ const {
alt,
sizes,
widths,
aspectRatio,
aspectRatio = 1,
formats = ["avif", "webp"],
loading = "lazy",
decoding = "async",
@ -14,22 +14,32 @@ const {
...attrs
} = Astro.props;
const { image, sources = [] } =
!src ? { image: {}}
: (typeof src === "string"
? { image: { src } }
:
await getPicture({
src,
widths,
formats,
aspectRatio,
}))
// const { image, sources = [] } =
// !src ? { image: {}}
// : (typeof src === "string"
// ? { image: { src } }
// :
let picture = null;
try {
picture = await getPicture({
src,
widths,
formats,
aspectRatio,
})
}
catch (e) {
console.log(e);
}
const { image = {}, sources = [] } = picture || {}
---
{ (src || !image) &&
{ (src && image?.src) &&
<picture {...attrs}>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
{sources.map((attrs) =>
<source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} class={className} />
</picture>
}

4
src/components/icons/IconMenu.astro
View File

@ -15,6 +15,6 @@ const { class: className = "w-5 h-5" } = Astro.props;
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="4" y1="8" x2="20" y2="8"></line>
<line x1="4" y1="16" x2="20" y2="16"></line>
<line class="line1 transition" x1="4" y1="8" x2="20" y2="8"></line>
<line class="line2 transition" x1="4" y1="16" x2="20" y2="16"></line>
</svg>

9
src/components/widgets/BasicFAQs.astro
View File

@ -50,7 +50,7 @@ const {} = Astro.props;
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
Is the Space Pope reptilian!?
What's something that you completely don't understand?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
A flower in my garden, a mystery in my panties. Heart attack never
@ -63,7 +63,7 @@ const {} = Astro.props;
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
How much money you got on you?
What's an example of when you changed your mind?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
Michael Knight a young loner on a crusade to champion the cause of
@ -75,7 +75,7 @@ const {} = Astro.props;
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
Galaxies Orion's sword globular star cluster?
What is something that you would really like to try again?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
A business big enough that it could be listed on the NASDAQ goes
@ -89,7 +89,8 @@ const {} = Astro.props;
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
When has justice ever been as simple as a rule book?
If you could only ask one question to each person you meet, what would
that question be?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
This is not about revenge. This is about justice. A lot of things

37
src/components/widgets/BlogList.astro Normal file
View File

@ -0,0 +1,37 @@
---
import BlogListItem from "~/components/widgets/BlogListItem.astro";
import Pagination from "~/components/widgets/Pagination.astro";
const { page } = Astro.props;
---
<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
<header>
<h1
class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
style="
"
>
News and step-by-step guides about
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
>AstroWind
</span>
</h1>
</header>
<ul>
{
page.data.map((post) => (
<li class="mb-10 md:mb-16">
<BlogListItem post={post} />
</li>
))
}
</ul>
{
(page.url.prev || page.url.next) && (
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
)
}
</section>

15
src/components/widgets/BlogPostCard.astro → src/components/widgets/BlogListItem.astro
View File

@ -1,15 +1,10 @@
---
import Picture from "~/components/core/Picture.astro";
import { findImage } from "~/utils/findImage";
const { post } = Astro.props;
const images = import.meta.glob("../../assets/images/*");
const imageSrc =
typeof images[post.image] === "function"
? (await images[post.image]())["default"]
: typeof post.image === "string"
? post.image
: null;
const image = await findImage(post.image);
---
<article
@ -20,18 +15,18 @@ const imageSrc =
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
src={imageSrc}
src={image}
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
alt={post.description}
aspectRatio="1"
aspectRatio={1}
/>
</div>
</a>
<div>
<header>
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2">
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
<a
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={`/blog/${post.slug}`}

42
src/components/widgets/BlogPost.astro Normal file
View File

@ -0,0 +1,42 @@
---
import Picture from "~/components/core/Picture.astro";
const { post } = Astro.props;
---
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
<article>
<header>
<p class="max-w-3xl mx-auto text-center">
<time datetime={post.pubDate}>
{
new Date(post.pubDate).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</time> ~ {Math.ceil(post.readingTime)} min
</p>
<h1
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
>
{post.title}
</h1>
<Picture
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"
widths={[400, 768, 900]}
sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
alt={post.description}
aspectRatio="16:9"
/>
</header>
<div
class="container mx-auto px-4 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:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
>
<Fragment set:html={post.body} />
</div>
</article>
</section>

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

@ -4,7 +4,7 @@ const {} = Astro.props;
---
<header
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 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"
@ -21,14 +21,14 @@ const {} = Astro.props;
type="button"
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"
aria-label="Toggle between Dark and Light mode"
onclick="window.toggleDarkMode()"
data-aw-toggle-color-scheme
>
<IconSun class="w-6 h-6" />
</button>
<button
class="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"
class="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"
aria-label="Toggle Menu"
onclick="toggleMenu()"
data-aw-toggle-menu
>
<IconMenu class="w-6 h-6" />
</button>
@ -98,9 +98,6 @@ const {} = Astro.props;
>
<IconGithub />
</a>
<!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center ml-3 btn-sm" href="/login/">Get started
</a> -->
</div>
</div>
</nav>

41
src/components/widgets/BlogFeaturesPosts.astro → src/components/widgets/HighlightedPosts.astro
View File

@ -30,16 +30,18 @@ const {} = Astro.props;
alt="Post 2 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a
href="/blog/get-started-with-astrowind"
href="/blog/get-started-website-with-astro-tailwind-css"
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>Get started with AstroWind
>Get started with AstroWind to create a website using Astro and
Tailwind CSS
</a>
</h3>
<p class="text-gray-700 dark:text-gray-400">
I'll be sure to note that in my log. Smooth as an android's bottom, eh,
Data? When has justice ever been as simple as a rule book?
Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
sit fugiat
</p>
</div>
@ -52,16 +54,17 @@ const {} = Astro.props;
alt="Post 1 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a
href="/blog/how-to-customize-the-template"
href="/blog/how-to-customize-astrowind-to-your-branding"
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>How to customize the template
>How to customize AstroWind template to suit your branding
</a>
</h3>
<p class="text-gray-700 dark:text-gray-400">
O for awesome, this chocka full cuzzie is as rip-off as a cracker.
Meanwhile, in behind the bicycle shed, Hercules Morse.
Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
sit fugiat
</p>
</div>
@ -74,16 +77,17 @@ const {} = Astro.props;
alt="Post 3 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a
href="/blog/helpful-tools-and-resources-to-design"
href="/blog/useful-resources-to-create-websites"
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
>Helpful tools and resources to design
>Useful tools and resources to create a professional website
</a>
</h3>
<p class="text-gray-700 dark:text-gray-400">
Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit
leo. Carpe diem vulputate est nec commodo rutrum.
Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum
ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus
ridiculus elementum. Phasellus sollicitudin dignissim parturient.
</p>
</div>
@ -96,7 +100,7 @@ const {} = Astro.props;
alt="Post 2 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
<a
href="/blog/astrowind-template-in-depth"
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
@ -104,8 +108,9 @@ const {} = Astro.props;
</a>
</h3>
<p class="text-gray-700 dark:text-gray-400">
I'll be sure to note that in my log. Smooth as an android's bottom, eh,
Data? When has justice ever been as simple as a rule book?
Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis
vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non
potenti. Torquent hac sociosqu eleifend potenti.
</p>
</div>
</div>

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

@ -10,7 +10,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4">
<div>
<div
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -50,7 +50,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4">
<div>
<div
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -89,7 +89,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4">
<div>
<div
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -128,7 +128,7 @@ const {} = Astro.props;
<div class="flex flex-col items-center mr-4">
<div>
<div
class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2"
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"

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

@ -2,12 +2,12 @@
import Layout from "~/layouts/PageLayout.astro";
import { SITE } from "~/config.mjs";
import { getAllPosts } from "~/utils/getAllPosts";
import BlogPostCard from "~/components/widgets/BlogPostCard.astro";
import Pagination from "~/components/widgets/Pagination.astro";
import { getPosts } from "~/utils/getPosts";
import BlogList from "~/components/widgets/BlogList.astro";
export async function getStaticPaths({ paginate }) {
const posts = await getAllPosts();
const posts = await getPosts();
return paginate(posts, {
pageSize: SITE.postsPerPage,
@ -26,36 +26,7 @@ const canonical = new URL(page.url.current, Astro.site);
---
<Layout meta={{ title, description, canonical }}>
<main class="mt-20">
<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
<header>
<h1
class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
style="
"
>
News and step-by-step guides about
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
>AstroWind
</span>
</h1>
</header>
<ul>
{
page.data.map((post) => (
<li class="mb-10 md:mb-16">
<BlogPostCard post={post} />
</li>
))
}
</ul>
{
(page.url.prev || page.url.next) && (
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
)
}
</section>
<main>
<BlogList page={page} />
</main>
</Layout>

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

@ -1,12 +1,13 @@
---
import Layout from "~/layouts/PageLayout.astro";
import Picture from "~/components/core/Picture.astro";
import { SITE } from "~/config.mjs";
import { getAllPosts } from "~/utils/getAllPosts";
import { getPosts } from "~/utils/getPosts";
import { findImage } from "~/utils/findImage";
import Layout from "~/layouts/PageLayout.astro";
import BlogPost from "~/components/widgets/BlogPost.astro";
export async function getStaticPaths() {
const posts = await getAllPosts();
const posts = await getPosts();
return posts.map((post) => ({
params: { slug: post.slug },
@ -20,14 +21,7 @@ const title = `${post.title} — ${SITE.name}`;
const description = post.description;
const canonical = new URL(`blog/${post.slug}`, Astro.site);
const images = import.meta.glob("../../assets/images/*");
const imageSrc =
typeof images[post.image] === "function"
? (await images[post.image]())["default"]
: typeof post.image === "string"
? post.image
: null;
const image = await findImage(post.image);
---
<Layout
@ -35,45 +29,10 @@ const imageSrc =
title,
description,
canonical,
image: imageSrc,
image,
}}
>
<main class="mt-20">
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
<article>
<header>
<p class="max-w-3xl mx-auto text-center">
<time datetime={post.pubDate}>
{
new Date(post.pubDate).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})
}
</time> ~ {Math.ceil(post.readingTime)} min
</p>
<h1
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
>
{post.title}
</h1>
<Picture
src={imageSrc}
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, 768, 900]}
sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
alt={post.description}
aspectRatio="16:9"
/>
</header>
<div
class="container mx-auto px-4 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:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
>
<Fragment set:html={post.body} />
</div>
</article>
</section>
<main>
<BlogPost post={{ ...post, image }} />
</main>
</Layout>

6
src/pages/index.astro
View File

@ -10,7 +10,7 @@ import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
import BasicFAQs from "~/components/widgets/BasicFAQs.astro";
import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
import StepsLeft from "~/components/widgets/StepsLeft.astro";
import BlogFeaturesPosts from "~/components/widgets/BlogFeaturesPosts.astro";
import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
import Stats from "~/components/widgets/Stats.astro";
const title = `${SITE.name} — Your website with Astro + Tailwind CSS`;
@ -20,13 +20,13 @@ const canonical = new URL("", Astro.site);
---
<Layout meta={{ title, description, canonical }}>
<main class="mt-20">
<main>
<Hero />
<BasicFeatures />
<StepsLeft />
<TwoColsFeatures />
<StepsFeatures />
<BlogFeaturesPosts />
<HighlightedPosts />
<BasicFAQs />
<Stats />
<BasicCTA />

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

@ -1,9 +1,9 @@
import rss from "@astrojs/rss";
import { SITE } from "~/config";
import { getAllPosts } from "~/utils/getAllPosts";
import { getPosts } from "~/utils/getPosts";
const posts = await getAllPosts();
const posts = await getPosts();
export const get = () =>
rss({