From 4213322fbc9d5a5c4da1931b103cb13f3942a206 Mon Sep 17 00:00:00 2001 From: xHyroM Date: Sat, 3 Jun 2023 21:53:59 +0200 Subject: [PATCH] refactor: make blog system like doc, separate buttonss --- .prettierrc.cjs | 2 +- astro.config.ts | 1 + .../blog/posts => blog}/astro-is-awesome.md | 1 - .../how-i-lost-my-notebook-for-2-months.md | 4 +- .../blog/posts => blog}/new-year-2023.md | 1 - src/components/widgets/Button.astro | 93 +++++++++++++++++++ src/config.ts | 2 +- src/layouts/blog/PostLayout.astro | 25 ++--- src/pages/blog/[...page].astro | 59 ++++++++++++ src/pages/blog/index.astro | 34 ------- src/pages/blog/posts/[id].astro | 28 ++++++ src/pages/projects.astro | 34 ++++--- tailwind.config.cjs | 9 ++ tsconfig.json | 1 + vercel.json | 4 + 15 files changed, 222 insertions(+), 76 deletions(-) rename {src/pages/blog/posts => blog}/astro-is-awesome.md (95%) rename {src/pages/blog/posts => blog}/how-i-lost-my-notebook-for-2-months.md (92%) rename {src/pages/blog/posts => blog}/new-year-2023.md (95%) create mode 100644 src/components/widgets/Button.astro create mode 100644 src/pages/blog/[...page].astro delete mode 100644 src/pages/blog/index.astro create mode 100644 src/pages/blog/posts/[id].astro diff --git a/.prettierrc.cjs b/.prettierrc.cjs index 7772ceb..f11c71a 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -1,7 +1,7 @@ module.exports = { plugins: [ require.resolve("prettier-plugin-astro"), - require.resolve("prettier-plugin-tailwindcss"), + //require.resolve("prettier-plugin-tailwindcss"), ], overrides: [ { diff --git a/astro.config.ts b/astro.config.ts index f86c114..f973049 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -49,6 +49,7 @@ export default defineConfig({ alias: { "~": resolve(__dirname, "./src"), "@docs": resolve(__dirname, "./docs"), + "@blog": resolve(__dirname, "./blog"), "@pages": resolve(__dirname, "./src/pages"), "@assets": resolve(__dirname, "./src/assets"), "@scripts": resolve(__dirname, "./src/scripts"), diff --git a/src/pages/blog/posts/astro-is-awesome.md b/blog/astro-is-awesome.md similarity index 95% rename from src/pages/blog/posts/astro-is-awesome.md rename to blog/astro-is-awesome.md index be86aa4..a146721 100644 --- a/src/pages/blog/posts/astro-is-awesome.md +++ b/blog/astro-is-awesome.md @@ -1,7 +1,6 @@ --- title: Astro is awesome date: January 07 2023 -layout: ../../../layouts/blog/PostLayout.astro --- Last year 😄 I discovered the Astro static html framework and after a few hours I fell in love with it. Astro is simple and easy to use, but at the same time it has all the features I need to create professional websites. diff --git a/src/pages/blog/posts/how-i-lost-my-notebook-for-2-months.md b/blog/how-i-lost-my-notebook-for-2-months.md similarity index 92% rename from src/pages/blog/posts/how-i-lost-my-notebook-for-2-months.md rename to blog/how-i-lost-my-notebook-for-2-months.md index 9e2f1c0..afce370 100644 --- a/src/pages/blog/posts/how-i-lost-my-notebook-for-2-months.md +++ b/blog/how-i-lost-my-notebook-for-2-months.md @@ -1,7 +1,7 @@ --- -title: "How I lost my laptop for 2 months: a story of warranty and unpleasant surprises" +title: How I lost my laptop for 2 months +description: A story of warranty and unpleasant surprises. date: February 24 2023 -layout: ../../../layouts/blog/PostLayout.astro --- Hey, guys, diff --git a/src/pages/blog/posts/new-year-2023.md b/blog/new-year-2023.md similarity index 95% rename from src/pages/blog/posts/new-year-2023.md rename to blog/new-year-2023.md index 11b11a7..3e84209 100644 --- a/src/pages/blog/posts/new-year-2023.md +++ b/blog/new-year-2023.md @@ -1,7 +1,6 @@ --- title: Happy New Year 2023 date: January 01 2023 -layout: ../../../layouts/blog/PostLayout.astro --- Hey! Hey! Hey! diff --git a/src/components/widgets/Button.astro b/src/components/widgets/Button.astro new file mode 100644 index 0000000..3155fb6 --- /dev/null +++ b/src/components/widgets/Button.astro @@ -0,0 +1,93 @@ +--- +export interface Props { + label: string; + link?: string; + icon?: string; + iconClass?: string; + iconPosition?: "left" | "right"; + type: "primary" | "secondary"; + disabled?: boolean; +} + +const { + label, + link, + icon, + iconClass: iconClassOriginal, + iconPosition, + type, + disabled, +} = { + iconPosition: "right", + disabled: false, + iconClass: "", + ...Astro.props, +}; + +const classPrimary = (disabled: boolean) => + `bottom-0 inline-flex w-fit rounded-md bg-neutral-800 ${ + disabled && "cursor-not-allowed bg-opacity-80" + } px-6 py-2 text-neutral-300 transition-colors ${ + disabled ? "" : "hover:bg-neutral-700" + } duration-100 [&_img]:transition-all ${ + iconPosition === "left" + ? "[&_img]:hover:translate-x-[-2px]" + : "[&_img]:hover:translate-x-[2px]" + }`; + +const classSecondary = (disabled: boolean) => + `bottom-0 inline-flex w-fit translate-y-[6px] px-6 py-2 ${ + disabled && "cursor-not-allowed" + } text-neutral-300 transition-all duration-100 hover:-translate-y-[-4px] hover:text-neutral-200`; + +const iconClass = + iconPosition === "left" + ? `mr-2 h-6 w-5 ${iconClassOriginal}` + : `ml-2 mt-[1px] h-[23px] w-5 ${iconClassOriginal}`; +--- + +{ + type === "primary" ? ( + link ? ( + + {iconPosition === "left" && icon && ( + + )} + {label} + {iconPosition === "right" && icon && ( + + )} + + ) : ( + + ) + ) : link ? ( + + {iconPosition === "left" && icon && ( + + )} + {label} + {iconPosition === "right" && icon && ( + + )} + + ) : ( + + ) +} diff --git a/src/config.ts b/src/config.ts index 54ea48d..b17ee6f 100644 --- a/src/config.ts +++ b/src/config.ts @@ -210,7 +210,7 @@ export const projects = [ link: "https://github.com/xHyroM/spawnergenz", desc: "Spawner Genz is a plugin that modifies the functionality of spawners so that they don't spawn entities, but instead store drops in a virtual storag in which you can then sell or move everything to your inventory.", }, -] satisfies { +] as { name: string; link: string; desc: string; diff --git a/src/layouts/blog/PostLayout.astro b/src/layouts/blog/PostLayout.astro index e35ec56..af14c72 100644 --- a/src/layouts/blog/PostLayout.astro +++ b/src/layouts/blog/PostLayout.astro @@ -3,31 +3,20 @@ import Container from "@components/atoms/Container.astro"; import Navbar from "@components/widgets/Navbar.astro"; import Layout from "@layouts/Layout.astro"; -export interface Props { - content: { - title: string; - date: string; - }; -} - -const { - content: { title, date }, -} = Astro.props; +const { item } = Astro.props; const url = Astro.url.pathname; --- - +

- {title} + {item.frontmatter.title}

- -
-
- -
-
+ +
+ +
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro new file mode 100644 index 0000000..948da14 --- /dev/null +++ b/src/pages/blog/[...page].astro @@ -0,0 +1,59 @@ +--- +import Layout from "@layouts/Layout.astro"; +import Navbar from "@components/widgets/Navbar.astro"; +import Container from "@components/atoms/Container.astro"; +import Button from "~/components/widgets/Button.astro"; + +export async function getStaticPaths({ paginate }) { + // Load your data with fetch(), Astro.glob(), etc. + const posts = (await Astro.glob('@blog/*.md')).sort( + (a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf() +).map((post) => ({ + ...post, + url: `/blog/posts/${post.file.split("/blog/")[1].split("/")[0].replace(".md", "")}`, +})); + + return paginate(posts, { pageSize: 3 }); +} + +const { page } = Astro.props; +const posts = page.data as { + url: string; + frontmatter: { + title: string; + date: string; + description: string; + }; +}[]; +--- + + + +

+ Blog +

+ + +
+ {posts.map(post => { + return ( + {post.frontmatter.title} +

+ {new Date(post.frontmatter.date).toLocaleDateString('en-us', { + year: 'numeric', + month: 'short', + day: 'numeric', + })} +

+

{post.frontmatter.description}

+
+ ) + })} + +
+
+
+ + diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro deleted file mode 100644 index 7d647c4..0000000 --- a/src/pages/blog/index.astro +++ /dev/null @@ -1,34 +0,0 @@ ---- -import Layout from "@layouts/Layout.astro"; -import Navbar from "@components/widgets/Navbar.astro"; -import Container from "@components/atoms/Container.astro"; - -const posts = (await Astro.glob('./posts/*.md')).sort( - (a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf() -); ---- - - - -

- Blog -

- - -
- {posts.map(post => { - return ( - {post.frontmatter.title} -

- {new Date(post.frontmatter.date).toLocaleDateString('en-us', { - year: 'numeric', - month: 'short', - day: 'numeric', - })} -

-
- ) - })} -
- - diff --git a/src/pages/blog/posts/[id].astro b/src/pages/blog/posts/[id].astro new file mode 100644 index 0000000..8b17e7c --- /dev/null +++ b/src/pages/blog/posts/[id].astro @@ -0,0 +1,28 @@ +--- +import PostLayout from "@layouts/blog/PostLayout.astro"; + +export async function getStaticPaths() { + const docs = await Astro.glob("@blog/**/*.md"); + + return docs.map((doc) => { + const path = doc.file.split("/blog/")[1]; + const postId = path.split("/")[0]; + + return { + params: { + id: postId.replace(".md", ""), + }, + props: { + ...doc, + url: `/blog/${postId.replace(".md", "")}`, + }, + }; + }); +} + +const item = Astro.props; +--- + + +
+ diff --git a/src/pages/projects.astro b/src/pages/projects.astro index d3c8e13..eac1606 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -3,6 +3,7 @@ import Layout from "@layouts/Layout.astro"; import Navbar from "@components/widgets/Navbar.astro"; import Container from "@components/atoms/Container.astro"; import { projects } from "~/config"; +import Button from "~/components/widgets/Button.astro"; for (const project of projects) { try { @@ -87,24 +88,21 @@ projects.sort((a, b) => a.name.localeCompare(b.name));

{project.desc}

- - GitHub{" "} - - - - - Docs{" "} - +
)) diff --git a/tailwind.config.cjs b/tailwind.config.cjs index e467fe9..147d799 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,3 +1,12 @@ +function withOpacity(variableName) { + return ({ opacityValue }) => { + if (opacityValue !== undefined) { + return `rgba(var(${variableName}), ${opacityValue})`; + } + return `rgb(var(${variableName}))`; + }; +} + /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], diff --git a/tsconfig.json b/tsconfig.json index d72ca87..220f675 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "paths": { "~/*": ["src/*"], "@docs/*": ["docs/*"], + "@blog/*": ["blog/*"], "@pages/*": ["src/pages/*"], "@assets/*": ["src/assets"], "@scripts/*": ["src/scripts"], diff --git a/vercel.json b/vercel.json index 83ea4f0..2ac0224 100644 --- a/vercel.json +++ b/vercel.json @@ -18,6 +18,10 @@ { "source": "/docs/", "destination": "/docs/discord-experiments-api/introduction" + }, + { + "source": "/blog/:name", + "destination": "/blog/posts/:name" } ] }