From 4859dcee8750a80d402f52986c89f1311f3c8b82 Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 30 Aug 2022 11:36:10 -0400 Subject: [PATCH 1/5] Rename getAllImages --- src/utils/{getAllImages.js => fetchLocalImages.js} | 2 +- src/utils/findImage.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/utils/{getAllImages.js => fetchLocalImages.js} (82%) diff --git a/src/utils/getAllImages.js b/src/utils/fetchLocalImages.js similarity index 82% rename from src/utils/getAllImages.js rename to src/utils/fetchLocalImages.js index f93be65..850f676 100644 --- a/src/utils/getAllImages.js +++ b/src/utils/fetchLocalImages.js @@ -8,7 +8,7 @@ const load = async function () { let _images; -export const getAllImages = async () => { +export const fetchLocalImages = async () => { _images = _images || load(); return await _images; }; diff --git a/src/utils/findImage.js b/src/utils/findImage.js index 73fa47e..fe48151 100644 --- a/src/utils/findImage.js +++ b/src/utils/findImage.js @@ -1,4 +1,4 @@ -import { getAllImages } from "~/utils/getAllImages"; +import { fetchLocalImages } from "~/utils/fetchLocalImages"; export const findImage = async (imagePath) => { if (typeof imagePath !== "string") { @@ -13,7 +13,7 @@ export const findImage = async (imagePath) => { return null; } // For now only consume images using ~/assets alias (or absolute) - const images = await getAllImages(); + const images = await fetchLocalImages(); const key = imagePath.replace("~/", "/src/"); return typeof images[key] === "function" From 49c6c5611b529a103f10da61370ca40fcefa2721 Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 30 Aug 2022 11:37:19 -0400 Subject: [PATCH 2/5] Add Categories and Tags with new configs --- astro.config.mjs | 2 +- src/components/core/MetaTags.astro | 7 +- src/components/widgets/BlogList.astro | 30 +---- src/components/widgets/BlogListItem.astro | 5 +- src/components/widgets/BlogPost.astro | 6 +- src/components/widgets/Error404.astro | 1 + src/components/widgets/Footer.astro | 122 +++++++++++++----- src/components/widgets/Header.astro | 12 +- src/components/widgets/HighlightedPosts.astro | 87 ++++--------- src/components/widgets/Pagination.astro | 27 ++-- src/components/widgets/StepsLeft.astro | 6 +- src/config.mjs | 22 +++- src/data/posts/astrowind-template-in-depth.md | 2 + ...started-website-with-astro-tailwind-css.md | 1 + src/layouts/BlogLayout.astro | 16 +++ src/pages/[...blog]/[...page].astro | 39 ++++++ src/pages/[...blog]/[slug].astro | 33 +++++ .../[category]/[...page].astro | 46 +++++++ src/pages/[...tags]/[tag]/[...page].astro | 46 +++++++ src/pages/blog/[...page].astro | 28 ---- src/pages/blog/[slug].astro | 29 ----- src/pages/index.astro | 14 +- src/pages/rss.xml.js | 3 +- src/utils/fetchPosts.js | 19 ++- src/utils/getNormalizedPost.js | 1 + src/utils/permalinks.js | 47 +++++++ 26 files changed, 434 insertions(+), 217 deletions(-) create mode 100644 src/layouts/BlogLayout.astro create mode 100644 src/pages/[...blog]/[...page].astro create mode 100644 src/pages/[...blog]/[slug].astro create mode 100644 src/pages/[...categories]/[category]/[...page].astro create mode 100644 src/pages/[...tags]/[tag]/[...page].astro delete mode 100644 src/pages/blog/[...page].astro delete mode 100644 src/pages/blog/[slug].astro create mode 100644 src/utils/permalinks.js diff --git a/astro.config.mjs b/astro.config.mjs index 30720d0..773cc81 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -15,7 +15,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); export default defineConfig({ // Astro uses this full URL to generate your sitemap and canonical URLs in your final build site: SITE.domain, - base: "/", + base: SITE.baseUrl, output: "static", diff --git a/src/components/core/MetaTags.astro b/src/components/core/MetaTags.astro index 6c58a57..f11ff44 100644 --- a/src/components/core/MetaTags.astro +++ b/src/components/core/MetaTags.astro @@ -15,6 +15,8 @@ const { description = "", image: _image = defaultImage, canonical, + noindex = false, + nofollow = false } = Astro.props; const image = @@ -34,6 +36,8 @@ const image = {canonical && } + + @@ -62,4 +66,5 @@ const image = -{SITE.googleSiteVerificationId && } \ No newline at end of file +{SITE.googleSiteVerificationId && +} \ No newline at end of file diff --git a/src/components/widgets/BlogList.astro b/src/components/widgets/BlogList.astro index efabee8..2896137 100644 --- a/src/components/widgets/BlogList.astro +++ b/src/components/widgets/BlogList.astro @@ -1,31 +1,15 @@ --- import BlogListItem from "~/components/widgets/BlogListItem.astro"; -import Pagination from "~/components/widgets/Pagination.astro"; const { page } = Astro.props; --- -
-
-

- News and step-by-step guides about - AstroWind - -

-
-
    - { - page.data.map((post) => ( -
  • - -
    • - )) - } -
- +
    { - (page.url.prev || page.url.next) && ( - - ) + page.data.map((post) => ( +
  • + +
    • + )) } -
\ No newline at end of file + \ No newline at end of file diff --git a/src/components/widgets/BlogListItem.astro b/src/components/widgets/BlogListItem.astro index fb1091d..cca1f1c 100644 --- a/src/components/widgets/BlogListItem.astro +++ b/src/components/widgets/BlogListItem.astro @@ -1,5 +1,6 @@ --- import Picture from "~/components/core/Picture.astro"; +import { getPermalink } from "~/utils/permalinks"; import { findImage } from "~/utils/findImage"; import { getFormattedDate } from "~/utils/getFormatedDate"; @@ -20,7 +21,7 @@ const image = await findImage(post.image);

+ href={getPermalink(post.slug, "post")}> {post.title}

@@ -31,7 +32,7 @@ const image = await findImage(post.image);
- + ~ {Math.ceil(post.readingTime)} min read
diff --git a/src/components/widgets/BlogPost.astro b/src/components/widgets/BlogPost.astro index 76b2b2d..24a6659 100644 --- a/src/components/widgets/BlogPost.astro +++ b/src/components/widgets/BlogPost.astro @@ -9,10 +9,10 @@ const { post } = Astro.props;

- ~ {Math.ceil(post.readingTime)} min + ~ {Math.ceil(post.readingTime)} min read

+ 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"> {post.title}

@@ -25,7 +25,7 @@ const { post } = Astro.props; }
+ class="container mx-auto px-8 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">
diff --git a/src/components/widgets/Error404.astro b/src/components/widgets/Error404.astro index c430ddc..2b07d14 100644 --- a/src/components/widgets/Error404.astro +++ b/src/components/widgets/Error404.astro @@ -1,4 +1,5 @@ --- +const { } = Astro.props; ---
diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro index 9068ee1..d388f3c 100644 --- a/src/components/widgets/Footer.astro +++ b/src/components/widgets/Footer.astro @@ -7,7 +7,7 @@ const { } = Astro.props;
\ No newline at end of file diff --git a/src/components/widgets/Pagination.astro b/src/components/widgets/Pagination.astro index d4e0ed4..3ef4a8d 100644 --- a/src/components/widgets/Pagination.astro +++ b/src/components/widgets/Pagination.astro @@ -1,30 +1,25 @@ --- -const { prevUrl, nextUrl } = Astro.props; +import { Icon } from "astro-icon" +const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props; --- +{(prevUrl || nextUrl) && (
-
- - - -

Newer posts

+ +

{prevText}

 -
- Older posts - - - + {nextText} +
-
\ No newline at end of file + +)} \ No newline at end of file diff --git a/src/components/widgets/StepsLeft.astro b/src/components/widgets/StepsLeft.astro index 1de9ebd..e06da22 100644 --- a/src/components/widgets/StepsLeft.astro +++ b/src/components/widgets/StepsLeft.astro @@ -7,7 +7,11 @@ const { } = Astro.props;
-
+
+

+ Sed ac magna sit amet risus tristique interdum. + hac. +

diff --git a/src/config.mjs b/src/config.mjs index 5dcea15..46a0298 100644 --- a/src/config.mjs +++ b/src/config.mjs @@ -1,12 +1,30 @@ export const SITE = { name: "AstroWind", + domain: "https://astrowind.vercel.app", + baseUrl: "/", 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.", - postsPerPage: 6, - googleAnalyticsId: false, // or "G-XXXXXXXXXX", googleSiteVerificationId: "orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M", }; + +export const BLOG = { + disabled: false, + slug: "blog", + + postsWithoutBlogSlug: true, + postsPerPage: 6, + + category: { + disabled: false, + slug: "", + }, + + tag: { + disabled: false, + slug: "tag", + }, +}; diff --git a/src/data/posts/astrowind-template-in-depth.md b/src/data/posts/astrowind-template-in-depth.md index c76ec50..3696689 100644 --- a/src/data/posts/astrowind-template-in-depth.md +++ b/src/data/posts/astrowind-template-in-depth.md @@ -3,6 +3,8 @@ pubDate: "Aug 08 2022" title: "AstroWind template in depth" description: "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." image: "~/assets/images/hero.jpg" +category: "Guide" +tags: [astrowind] --- ## Dictum integer fusce ac ridiculus et odio sollicitudin diam at diff --git a/src/data/posts/get-started-website-with-astro-tailwind-css.md b/src/data/posts/get-started-website-with-astro-tailwind-css.md index 72ffdef..96ca2ce 100644 --- a/src/data/posts/get-started-website-with-astro-tailwind-css.md +++ b/src/data/posts/get-started-website-with-astro-tailwind-css.md @@ -4,6 +4,7 @@ title: "Get started with AstroWind to create a website using Astro and Tailwind description: "Lorem ipsum dolor sit amet" excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat" image: "~/assets/images/steps.jpg" +category: "Guide" --- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro new file mode 100644 index 0000000..34dc1f8 --- /dev/null +++ b/src/layouts/BlogLayout.astro @@ -0,0 +1,16 @@ +--- +import Layout from "~/layouts/PageLayout.astro"; + +const { meta } = Astro.props; +--- + + +
+
+

+ +

+
+ +
+ \ No newline at end of file diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro new file mode 100644 index 0000000..c422a83 --- /dev/null +++ b/src/pages/[...blog]/[...page].astro @@ -0,0 +1,39 @@ +--- +import { SITE, BLOG } from "~/config.mjs"; +import { fetchPosts } from "~/utils/fetchPosts"; +import Layout from "~/layouts/BlogLayout.astro"; +import BlogList from "~/components/widgets/BlogList.astro"; +import Pagination from "~/components/widgets/Pagination.astro"; +import { getCanonical, getPermalink } from "~/utils/permalinks"; + + +export async function getStaticPaths({ paginate }) { + if (BLOG?.disabled) return []; + + const posts = await fetchPosts(); + + return paginate(posts, { + params: { blog: BLOG?.slug || undefined }, + pageSize: BLOG.postsPerPage, + }); +} + +const { page } = Astro.props; +const currentPage = page.currentPage ?? 1; + +const meta = { + title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`, + description: SITE.description, + canonical: getCanonical(getPermalink(page.url.current)) +} +--- + + + + News and step-by-step guides about + AstroWind + + + + + \ No newline at end of file diff --git a/src/pages/[...blog]/[slug].astro b/src/pages/[...blog]/[slug].astro new file mode 100644 index 0000000..13fe0ad --- /dev/null +++ b/src/pages/[...blog]/[slug].astro @@ -0,0 +1,33 @@ +--- +import { SITE, BLOG } from "~/config.mjs"; +import { getCanonical, getPermalink } from "~/utils/permalinks"; +import { fetchPosts } from "~/utils/fetchPosts"; +import { findImage } from "~/utils/findImage"; +import Layout from "~/layouts/PageLayout.astro"; +import BlogPost from "~/components/widgets/BlogPost.astro"; + + +export async function getStaticPaths() { + if (BLOG?.disabled) return []; + + const posts = await fetchPosts(); + + return posts.map((post) => ({ + params: { slug: post.slug, blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG?.slug || undefined }, + props: { post }, + })); +} + +const { post } = Astro.props; + +const meta = { + title: `${post.title} — ${SITE.name}`, + description: post.description, + canonical: post.canonical || getCanonical(getPermalink(post.slug, "post")), + image: await findImage(post.image), +} +--- + + + + \ No newline at end of file diff --git a/src/pages/[...categories]/[category]/[...page].astro b/src/pages/[...categories]/[category]/[...page].astro new file mode 100644 index 0000000..b35c745 --- /dev/null +++ b/src/pages/[...categories]/[category]/[...page].astro @@ -0,0 +1,46 @@ +--- +import { SITE, BLOG } from "~/config.mjs"; +import { fetchPosts } from "~/utils/fetchPosts"; +import Layout from "~/layouts/BlogLayout.astro"; +import BlogList from "~/components/widgets/BlogList.astro"; +import Pagination from "~/components/widgets/Pagination.astro"; +import { getCanonical, getPermalink } from "~/utils/permalinks"; + + +export async function getStaticPaths({ paginate }) { + if (BLOG?.disabled || BLOG?.category?.disabled) return []; + + const posts = await fetchPosts(); + + const categories = new Set() + posts.map(post => { + typeof post.category === "string" && categories.add(post.category.toLowerCase()) + }) + + return Array.from(categories).map((category) => ( + paginate(posts.filter((post) => typeof post.category === "string" && category === post.category.toLowerCase()), { + params: { category, categories: BLOG?.category?.slug || undefined }, + pageSize: BLOG.postsPerPage, + }) + )) +} + +const { page } = Astro.props; +const { category } = Astro.params; + +const currentPage = page.currentPage ?? 1; + +const meta = { + title: `Category ${category} ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`, + description: SITE.description, + canonical: getCanonical(getPermalink(page.url.current)) +} +--- + + + + Category {category} + + + + \ No newline at end of file diff --git a/src/pages/[...tags]/[tag]/[...page].astro b/src/pages/[...tags]/[tag]/[...page].astro new file mode 100644 index 0000000..fcd755c --- /dev/null +++ b/src/pages/[...tags]/[tag]/[...page].astro @@ -0,0 +1,46 @@ +--- +import { SITE, BLOG } from "~/config.mjs"; +import { fetchPosts } from "~/utils/fetchPosts"; +import Layout from "~/layouts/BlogLayout.astro"; +import BlogList from "~/components/widgets/BlogList.astro"; +import Pagination from "~/components/widgets/Pagination.astro"; +import { getCanonical, getPermalink } from "~/utils/permalinks"; + + +export async function getStaticPaths({ paginate }) { + if (BLOG?.disabled || BLOG?.tag?.disabled) return []; + + const posts = await fetchPosts(); + + const tags = new Set() + posts.map(post => { + Array.isArray(post.tags) && post.tags.map(tag => tags.add(tag.toLowerCase())) + }) + + return Array.from(tags).map((tag) => ( + paginate(posts.filter((post) => Array.isArray(post.tags) && post.tags.includes(tag)), { + params: { tag, tags: BLOG?.tag?.slug || undefined }, + pageSize: BLOG.postsPerPage, + }) + )) +} + +const { page } = Astro.props; +const { tag } = Astro.params; + +const currentPage = page.currentPage ?? 1; + +const meta = { + title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`, + description: SITE.description, + canonical: getCanonical(getPermalink(page.url.current)) +} +--- + + + + Tag {tag} + + + + \ No newline at end of file diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro deleted file mode 100644 index d1c4e47..0000000 --- a/src/pages/blog/[...page].astro +++ /dev/null @@ -1,28 +0,0 @@ ---- -import Layout from "~/layouts/PageLayout.astro"; - -import { SITE } from "~/config.mjs"; -import { fetchPosts } from "~/utils/fetchPosts"; - -import BlogList from "~/components/widgets/BlogList.astro"; - -export async function getStaticPaths({ paginate }) { - const posts = await fetchPosts(); - - return paginate(posts, { - pageSize: SITE.postsPerPage, - }); -} - -const { page } = Astro.props; - -const currentPage = page.currentPage ?? 1; - -const title = `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`; -const description = SITE.description; -const canonical = new URL(page.url.current, Astro.site); ---- - - - - \ No newline at end of file diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro deleted file mode 100644 index 61fc6c9..0000000 --- a/src/pages/blog/[slug].astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import { SITE } from "~/config.mjs"; -import { fetchPosts } from "~/utils/fetchPosts"; -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 fetchPosts(); - - return posts.map((post) => ({ - params: { slug: post.slug }, - props: { post }, - })); -} - -const { post } = Astro.props; - -const title = `${post.title} — ${SITE.name}`; -const description = post.description; -const canonical = post.canonical || new URL(`blog/${post.slug}`, Astro.site); - -const image = await findImage(post.image); ---- - - - - \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 2cebbbb..1377576 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- -import Layout from "~/layouts/PageLayout.astro"; - import { SITE } from "~/config.mjs"; +import { getCanonical, getHomePermalink } from "~/utils/permalinks"; +import Layout from "~/layouts/PageLayout.astro"; import Hero from "~/components/widgets/Hero.astro"; import BasicCTA from "~/components/widgets/BasicCTA.astro"; @@ -13,12 +13,14 @@ import StepsLeft from "~/components/widgets/StepsLeft.astro"; import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro"; import Stats from "~/components/widgets/Stats.astro"; -const title = SITE.title; -const description = SITE.description; -const canonical = new URL("", Astro.site); +const meta = { + title: SITE.title, + description: SITE.description, + canonical: getCanonical(getHomePermalink()), +} --- - + diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js index ce67e47..b1a0fe8 100644 --- a/src/pages/rss.xml.js +++ b/src/pages/rss.xml.js @@ -2,6 +2,7 @@ import rss from "@astrojs/rss"; import { SITE } from "~/config.mjs"; import { fetchPosts } from "~/utils/fetchPosts"; +import { getPermalink } from "~/utils/permalinks"; const posts = await fetchPosts(); @@ -12,7 +13,7 @@ export const get = () => site: import.meta.env.SITE, items: posts.map((post) => ({ - link: `blog/${post.slug}`, + link: getPermalink(post.slug, "post"), title: post.title, description: post.description, pubDate: post.pubDate, diff --git a/src/utils/fetchPosts.js b/src/utils/fetchPosts.js index 17a142a..979612d 100644 --- a/src/utils/fetchPosts.js +++ b/src/utils/fetchPosts.js @@ -10,9 +10,9 @@ const load = async function () { return await getNormalizedPost(post); }); - const results = (await Promise.all(normalizedPosts)).sort( - (a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf() - ); + const results = (await Promise.all(normalizedPosts)) + .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf()) + .filter((post) => !post.draft); return results; }; @@ -23,3 +23,16 @@ export const fetchPosts = async () => { return await _posts; }; + +export const findPostsByIds = async (ids) => { + if (!Array.isArray(ids)) return []; + + const posts = await fetchPosts(); + + return ids.reduce(function (r, a) { + posts.some(function (el) { + return a === el.slug && r.push(el); + }); + return r; + }, []); +}; diff --git a/src/utils/getNormalizedPost.js b/src/utils/getNormalizedPost.js index 6e06b82..23f98cb 100644 --- a/src/utils/getNormalizedPost.js +++ b/src/utils/getNormalizedPost.js @@ -5,6 +5,7 @@ export const getNormalizedPost = async (post) => { return { pubDate: frontmatter.pubDate, + draft: frontmatter.draft, canonical: frontmatter.canonical, slug: file.split("/").pop().split(".").shift(), diff --git a/src/utils/permalinks.js b/src/utils/permalinks.js new file mode 100644 index 0000000..3b1e4f0 --- /dev/null +++ b/src/utils/permalinks.js @@ -0,0 +1,47 @@ +import { SITE, BLOG } from "~/config.mjs"; + +const trim = (str, ch) => { + let start = 0, end = str.length; + while(start < end && str[start] === ch) + ++start; + while(end > start && str[end - 1] === ch) + --end; + return (start > 0 || end < str.length) ? str.substring(start, end) : str; +} + +const trimSlash = (s) => trim(s, "/"); +const createPath = (...params) => "/" + params.filter((el) => !!el).join("/") + +const baseUrl = trimSlash(SITE.baseUrl); +const blogBaseUrl = trimSlash(BLOG.slug); +const categoryBaseUrl = trim(BLOG?.category?.slug); +const tagBaseUrl = trim(BLOG?.tag?.slug); + +const cleanSlug = (slug) => trimSlash(slug); + +export const getCanonical = (path = "") => new URL(path, SITE.domain); + +export const getPermalink = (slug = "", type = "page") => { + const _slug = cleanSlug(slug); + + switch (type) { + case "category": + return createPath(baseUrl, categoryBaseUrl, _slug) + + case "tag": + return createPath(baseUrl, tagBaseUrl, _slug) + + case "post": + return createPath(baseUrl, BLOG.postsWithoutBlogSlug ? "" : blogBaseUrl, _slug); + + case "page": + default: + return createPath(baseUrl, _slug); + } +}; + +export const getBlogPermalink = () => getPermalink(blogBaseUrl); +export const getHomePermalink = () => { + const permalink = getPermalink(); + return permalink !== "/" ? permalink + "/" : permalink; +} \ No newline at end of file From efb3c7c88ac610d14827ecd29765925e5a0ef045 Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 30 Aug 2022 11:47:10 -0400 Subject: [PATCH 3/5] Change default configuration --- src/config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config.mjs b/src/config.mjs index 46a0298..7d17344 100644 --- a/src/config.mjs +++ b/src/config.mjs @@ -20,7 +20,7 @@ export const BLOG = { category: { disabled: false, - slug: "", + slug: "category", // set empty to change from /category/some-slug to /some-slug }, tag: { From 2912a796a7bb884612feb47aad4a4d96bd9e031c Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 30 Aug 2022 12:18:28 -0400 Subject: [PATCH 4/5] Update categories and tags --- src/data/posts/astrowind-template-in-depth.md | 4 ++-- src/data/posts/get-started-website-with-astro-tailwind-css.md | 3 ++- src/data/posts/how-to-customize-astrowind-to-your-brand.md | 1 + src/data/posts/markdown-elements-demo-post.md | 1 + src/data/posts/useful-resources-to-create-websites.md | 1 + 5 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/data/posts/astrowind-template-in-depth.md b/src/data/posts/astrowind-template-in-depth.md index 3696689..676cc79 100644 --- a/src/data/posts/astrowind-template-in-depth.md +++ b/src/data/posts/astrowind-template-in-depth.md @@ -3,8 +3,8 @@ pubDate: "Aug 08 2022" title: "AstroWind template in depth" description: "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." image: "~/assets/images/hero.jpg" -category: "Guide" -tags: [astrowind] +category: "Tutorials" +tags: [astro, tailwind css, front-end] --- ## Dictum integer fusce ac ridiculus et odio sollicitudin diam at diff --git a/src/data/posts/get-started-website-with-astro-tailwind-css.md b/src/data/posts/get-started-website-with-astro-tailwind-css.md index 96ca2ce..4e855ca 100644 --- a/src/data/posts/get-started-website-with-astro-tailwind-css.md +++ b/src/data/posts/get-started-website-with-astro-tailwind-css.md @@ -4,7 +4,8 @@ title: "Get started with AstroWind to create a website using Astro and Tailwind description: "Lorem ipsum dolor sit amet" excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat" image: "~/assets/images/steps.jpg" -category: "Guide" +category: "Tutorial" +tags: [astro, tailwind css] --- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/src/data/posts/how-to-customize-astrowind-to-your-brand.md b/src/data/posts/how-to-customize-astrowind-to-your-brand.md index e42721c..12ee481 100644 --- a/src/data/posts/how-to-customize-astrowind-to-your-brand.md +++ b/src/data/posts/how-to-customize-astrowind-to-your-brand.md @@ -3,6 +3,7 @@ pubDate: "Aug 10 2022" title: "How to customize AstroWind template to suit your branding" description: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat" image: "~/assets/images/colors.jpg" +tags: [astro, tailwind css, theme] --- ## Congue justo vulputate nascetur convallis varius orci fringilla nulla pharetr diff --git a/src/data/posts/markdown-elements-demo-post.md b/src/data/posts/markdown-elements-demo-post.md index 185930c..6fbb118 100644 --- a/src/data/posts/markdown-elements-demo-post.md +++ b/src/data/posts/markdown-elements-demo-post.md @@ -4,6 +4,7 @@ title: "Markdown elements demo post" description: "Lorem ipsum dolor sit amet" excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat" image: "~/assets/images/astronaut.jpg" +tags: [markdown, astro, blog] --- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/src/data/posts/useful-resources-to-create-websites.md b/src/data/posts/useful-resources-to-create-websites.md index fda936c..6377644 100644 --- a/src/data/posts/useful-resources-to-create-websites.md +++ b/src/data/posts/useful-resources-to-create-websites.md @@ -3,6 +3,7 @@ pubDate: "Aug 09 2022" title: "Useful tools and resources to create a professional website" description: "Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus ridiculus elementum. Phasellus sollicitudin dignissim parturient." image: "~/assets/images/tools.jpg" +tags: [front-end, tools, resources] --- ## Magna nunc senectus torquent per fusce sapien ligula tempus cra From 2afa6b1d6418d04a713c798854f28c781404fc1f Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 30 Aug 2022 12:19:35 -0400 Subject: [PATCH 5/5] Add some slugify to permalinks --- package.json | 3 ++- src/pages/[...blog]/[...page].astro | 4 ++-- .../[category]/[...page].astro | 13 ++++++------ src/pages/[...tags]/[tag]/[...page].astro | 10 +++++----- src/utils/permalinks.js | 20 +++++++++++-------- 5 files changed, 28 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 3615c92..ac141b9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@onwidget/astrowind", "description": "A template to make your website using Astro + Tailwind CSS.", - "version": "0.1.6", + "version": "0.2.0", "private": true, "scripts": { "dev": "astro dev", @@ -19,6 +19,7 @@ "astro": "^1.0.0", "astro-icon": "^0.7.3", "reading-time": "^1.5.0", + "slugify": "^1.6.5", "subfont": "^6.9.0" } } diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro index c422a83..de1a7a5 100644 --- a/src/pages/[...blog]/[...page].astro +++ b/src/pages/[...blog]/[...page].astro @@ -4,7 +4,7 @@ import { fetchPosts } from "~/utils/fetchPosts"; import Layout from "~/layouts/BlogLayout.astro"; import BlogList from "~/components/widgets/BlogList.astro"; import Pagination from "~/components/widgets/Pagination.astro"; -import { getCanonical, getPermalink } from "~/utils/permalinks"; +import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks"; export async function getStaticPaths({ paginate }) { @@ -13,7 +13,7 @@ export async function getStaticPaths({ paginate }) { const posts = await fetchPosts(); return paginate(posts, { - params: { blog: BLOG?.slug || undefined }, + params: { blog: BLOG_BASE || undefined }, pageSize: BLOG.postsPerPage, }); } diff --git a/src/pages/[...categories]/[category]/[...page].astro b/src/pages/[...categories]/[category]/[...page].astro index b35c745..cc5f695 100644 --- a/src/pages/[...categories]/[category]/[...page].astro +++ b/src/pages/[...categories]/[category]/[...page].astro @@ -1,10 +1,11 @@ --- + import { SITE, BLOG } from "~/config.mjs"; import { fetchPosts } from "~/utils/fetchPosts"; import Layout from "~/layouts/BlogLayout.astro"; import BlogList from "~/components/widgets/BlogList.astro"; import Pagination from "~/components/widgets/Pagination.astro"; -import { getCanonical, getPermalink } from "~/utils/permalinks"; +import { getCanonical, getPermalink, getSlug, CATEGORY_BASE } from "~/utils/permalinks"; export async function getStaticPaths({ paginate }) { @@ -19,19 +20,19 @@ export async function getStaticPaths({ paginate }) { return Array.from(categories).map((category) => ( paginate(posts.filter((post) => typeof post.category === "string" && category === post.category.toLowerCase()), { - params: { category, categories: BLOG?.category?.slug || undefined }, + params: { category: getSlug(category), categories: CATEGORY_BASE || undefined }, pageSize: BLOG.postsPerPage, + props: { category } }) )) } -const { page } = Astro.props; -const { category } = Astro.params; +const { page, category } = Astro.props; const currentPage = page.currentPage ?? 1; const meta = { - title: `Category ${category} ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`, + title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`, description: SITE.description, canonical: getCanonical(getPermalink(page.url.current)) } @@ -39,7 +40,7 @@ const meta = { - Category {category} + Category: {category} diff --git a/src/pages/[...tags]/[tag]/[...page].astro b/src/pages/[...tags]/[tag]/[...page].astro index fcd755c..dc45b49 100644 --- a/src/pages/[...tags]/[tag]/[...page].astro +++ b/src/pages/[...tags]/[tag]/[...page].astro @@ -4,7 +4,7 @@ import { fetchPosts } from "~/utils/fetchPosts"; import Layout from "~/layouts/BlogLayout.astro"; import BlogList from "~/components/widgets/BlogList.astro"; import Pagination from "~/components/widgets/Pagination.astro"; -import { getCanonical, getPermalink } from "~/utils/permalinks"; +import { getCanonical, getPermalink, getSlug, TAG_BASE } from "~/utils/permalinks"; export async function getStaticPaths({ paginate }) { @@ -19,14 +19,14 @@ export async function getStaticPaths({ paginate }) { return Array.from(tags).map((tag) => ( paginate(posts.filter((post) => Array.isArray(post.tags) && post.tags.includes(tag)), { - params: { tag, tags: BLOG?.tag?.slug || undefined }, + params: { tag: getSlug(tag), tags: TAG_BASE || undefined }, pageSize: BLOG.postsPerPage, + props: { tag }, }) )) } -const { page } = Astro.props; -const { tag } = Astro.params; +const { page, tag } = Astro.props; const currentPage = page.currentPage ?? 1; @@ -39,7 +39,7 @@ const meta = { - Tag {tag} + Tag: {tag} diff --git a/src/utils/permalinks.js b/src/utils/permalinks.js index 3b1e4f0..7d96a4f 100644 --- a/src/utils/permalinks.js +++ b/src/utils/permalinks.js @@ -1,3 +1,4 @@ +import slugify from 'slugify' import { SITE, BLOG } from "~/config.mjs"; const trim = (str, ch) => { @@ -13,9 +14,10 @@ const trimSlash = (s) => trim(s, "/"); const createPath = (...params) => "/" + params.filter((el) => !!el).join("/") const baseUrl = trimSlash(SITE.baseUrl); -const blogBaseUrl = trimSlash(BLOG.slug); -const categoryBaseUrl = trim(BLOG?.category?.slug); -const tagBaseUrl = trim(BLOG?.tag?.slug); + +export const BLOG_BASE = slugify(trimSlash(BLOG.slug), { lower: true }); +export const CATEGORY_BASE = slugify(trim(BLOG?.category?.slug), { lower: true }); +export const TAG_BASE = slugify(trim(BLOG?.tag?.slug), { lower: true }); const cleanSlug = (slug) => trimSlash(slug); @@ -26,13 +28,13 @@ export const getPermalink = (slug = "", type = "page") => { switch (type) { case "category": - return createPath(baseUrl, categoryBaseUrl, _slug) + return createPath(baseUrl, CATEGORY_BASE, _slug) case "tag": - return createPath(baseUrl, tagBaseUrl, _slug) + return createPath(baseUrl, TAG_BASE, _slug) case "post": - return createPath(baseUrl, BLOG.postsWithoutBlogSlug ? "" : blogBaseUrl, _slug); + return createPath(baseUrl, BLOG.postsWithoutBlogSlug ? "" : BLOG_BASE, _slug); case "page": default: @@ -40,8 +42,10 @@ export const getPermalink = (slug = "", type = "page") => { } }; -export const getBlogPermalink = () => getPermalink(blogBaseUrl); +export const getBlogPermalink = () => getPermalink(BLOG_BASE); export const getHomePermalink = () => { const permalink = getPermalink(); return permalink !== "/" ? permalink + "/" : permalink; -} \ No newline at end of file +} + +export const getSlug = (text) => slugify(text); \ No newline at end of file