diff --git a/.prettierrc.mjs b/.prettierrc.mjs new file mode 100644 index 0000000..6f307c4 --- /dev/null +++ b/.prettierrc.mjs @@ -0,0 +1,16 @@ +// .prettierrc.mjs +/** @type {import("prettier").Config} */ +export default { + trailingComma: "all", + singleQuote: false, + + plugins: ["prettier-plugin-astro"], + overrides: [ + { + files: "*.astro", + options: { + parser: "astro", + }, + }, + ], +}; diff --git a/astro.config.mjs b/astro.config.mjs index b6ed592..cc90b0d 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,11 +1,11 @@ -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; -import sitemap from '@astrojs/sitemap'; +import { defineConfig } from "astro/config"; +import mdx from "@astrojs/mdx"; +import sitemap from "@astrojs/sitemap"; import tailwind from "@astrojs/tailwind"; // https://astro.build/config export default defineConfig({ - site: 'https://example.com', - integrations: [mdx(), sitemap(), tailwind()] -}); \ No newline at end of file + site: "https://example.com", + integrations: [mdx(), sitemap(), tailwind()], +}); diff --git a/bun.lockb b/bun.lockb index da66377..8edd3fc 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 57e5c59..140718f 100644 --- a/package.json +++ b/package.json @@ -7,18 +7,23 @@ "start": "astro dev", "build": "astro check && astro build", "preview": "astro preview", + "format": "prettier --write .", "astro": "astro" }, - "dependencies": { "tailwind-merge": "^2.3.0" }, + "dependencies": { + "tailwind-merge": "^2.3.0" + }, "devDependencies": { - "tailwindcss": "^3.4.4", - "typescript": "^5.5.3", - "@catppuccin/tailwindcss": "^0.1.6", "@astrojs/check": "^0.7.0", "@astrojs/mdx": "^3.1.2", "@astrojs/rss": "^4.0.7", "@astrojs/sitemap": "^3.1.6", "@astrojs/tailwind": "^5.1.0", - "astro": "^4.11.5" + "@catppuccin/tailwindcss": "^0.1.6", + "astro": "^4.11.5", + "prettier": "^3.3.2", + "prettier-plugin-astro": "^0.14.0", + "tailwindcss": "^3.4.4", + "typescript": "^5.5.3" } -} \ No newline at end of file +} diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 3441240..8bd31bc 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -1,17 +1,17 @@ --- // Import the global.css file here so that it is included on // all pages through the use of the component. -import '../styles/global.css'; +import "../styles/global.css"; interface Props { - title: string; - description: string; - image?: string; + title: string; + description: string; + image?: string; } const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; +const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props; --- @@ -21,8 +21,20 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; - - + + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 2b7feab..1c1e5af 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -6,9 +6,9 @@ const today = new Date(); --- diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro index 1bcce73..8f59590 100644 --- a/src/components/FormattedDate.astro +++ b/src/components/FormattedDate.astro @@ -1,17 +1,17 @@ --- interface Props { - date: Date; + date: Date; } const { date } = Astro.props; --- diff --git a/src/components/Header.astro b/src/components/Header.astro index b616269..592a31d 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,21 +1,23 @@ --- -import HeaderLink from './HeaderLink.astro'; -import { SITE_TITLE } from '../consts'; -import Twitter from './socialIcons/Twitter.astro'; -import GitHub from './socialIcons/GitHub.astro'; +import HeaderLink from "./HeaderLink.astro"; +import { SITE_TITLE } from "../consts"; +import Twitter from "./socialIcons/Twitter.astro"; +import GitHub from "./socialIcons/GitHub.astro"; ---
- +
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index ee43b36..cd2e436 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -1,15 +1,15 @@ --- -import type { HTMLAttributes } from 'astro/types'; +import type { HTMLAttributes } from "astro/types"; -type Props = HTMLAttributes<'a'>; +type Props = HTMLAttributes<"a">; const { href, class: className, ...props } = Astro.props; const { pathname } = Astro.url; const subpath = pathname.match(/[^\/]+/g); -const isActive = href === pathname || href === '/' + subpath?.[0]; +const isActive = href === pathname || href === "/" + subpath?.[0]; --- - - \ No newline at end of file + + diff --git a/src/components/socialIcons/GitHub.astro b/src/components/socialIcons/GitHub.astro index 158024e..1d66e5e 100644 --- a/src/components/socialIcons/GitHub.astro +++ b/src/components/socialIcons/GitHub.astro @@ -1,9 +1,9 @@ - Go to Skyfall's GitHub profile - - \ No newline at end of file + Go to Skyfall's GitHub profile + + diff --git a/src/components/socialIcons/Twitter.astro b/src/components/socialIcons/Twitter.astro index 717429a..c0432db 100644 --- a/src/components/socialIcons/Twitter.astro +++ b/src/components/socialIcons/Twitter.astro @@ -1,9 +1,9 @@ - Follow me on Twitter - - \ No newline at end of file + Follow me on Twitter + + diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro index 3e5d81a..5827b31 100644 --- a/src/components/ui/Button.astro +++ b/src/components/ui/Button.astro @@ -1,8 +1,14 @@ --- -import {twMerge} from "tailwind-merge"; +import { twMerge } from "tailwind-merge"; const { class: className, ...rest } = Astro.props; --- - \ No newline at end of file + diff --git a/src/content/blog/first-post.md b/src/content/blog/first-post.md index 3066715..7848b7f 100644 --- a/src/content/blog/first-post.md +++ b/src/content/blog/first-post.md @@ -1,8 +1,8 @@ --- -title: 'First post' -description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 08 2022' -heroImage: '/blog-placeholder-3.jpg' +title: "First post" +description: "Lorem ipsum dolor sit amet" +pubDate: "Jul 08 2022" +heroImage: "/blog-placeholder-3.jpg" --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. diff --git a/src/content/blog/markdown-style-guide.md b/src/content/blog/markdown-style-guide.md index cf02c41..7645494 100644 --- a/src/content/blog/markdown-style-guide.md +++ b/src/content/blog/markdown-style-guide.md @@ -1,8 +1,8 @@ --- -title: 'Markdown Style Guide' -description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.' -pubDate: 'Jul 01 2022' -heroImage: '/blog-placeholder-1.jpg' +title: "Markdown Style Guide" +description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro." +pubDate: "Jul 01 2022" +heroImage: "/blog-placeholder-1.jpg" --- Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. diff --git a/src/content/blog/second-post.md b/src/content/blog/second-post.md index f47e093..a907080 100644 --- a/src/content/blog/second-post.md +++ b/src/content/blog/second-post.md @@ -1,8 +1,8 @@ --- -title: 'Second post' -description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 15 2022' -heroImage: '/blog-placeholder-4.jpg' +title: "Second post" +description: "Lorem ipsum dolor sit amet" +pubDate: "Jul 15 2022" +heroImage: "/blog-placeholder-4.jpg" --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. diff --git a/src/content/blog/third-post.md b/src/content/blog/third-post.md index af82f0e..21326aa 100644 --- a/src/content/blog/third-post.md +++ b/src/content/blog/third-post.md @@ -1,8 +1,8 @@ --- -title: 'Third post' -description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 22 2022' -heroImage: '/blog-placeholder-2.jpg' +title: "Third post" +description: "Lorem ipsum dolor sit amet" +pubDate: "Jul 22 2022" +heroImage: "/blog-placeholder-2.jpg" --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. diff --git a/src/content/blog/using-mdx.mdx b/src/content/blog/using-mdx.mdx index d976693..122fcfb 100644 --- a/src/content/blog/using-mdx.mdx +++ b/src/content/blog/using-mdx.mdx @@ -1,8 +1,8 @@ --- -title: 'Using MDX' -description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 02 2022' -heroImage: '/blog-placeholder-5.jpg' +title: "Using MDX" +description: "Lorem ipsum dolor sit amet" +pubDate: "Jul 02 2022" +heroImage: "/blog-placeholder-5.jpg" --- This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file. @@ -18,10 +18,10 @@ If you have existing content authored in MDX, this integration will hopefully ma Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the clickable button below. -import HeaderLink from '../../components/HeaderLink.astro'; +import HeaderLink from "../../components/HeaderLink.astro"; - Embedded component in MDX + Embedded component in MDX ## More Links diff --git a/src/content/config.ts b/src/content/config.ts index 667a31c..8460ae4 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,16 +1,16 @@ -import { defineCollection, z } from 'astro:content'; +import { defineCollection, z } from "astro:content"; const blog = defineCollection({ - type: 'content', - // Type-check frontmatter using a schema - schema: z.object({ - title: z.string(), - description: z.string(), - // Transform string to Date object - pubDate: z.coerce.date(), - updatedDate: z.coerce.date().optional(), - heroImage: z.string().optional(), - }), + type: "content", + // Type-check frontmatter using a schema + schema: z.object({ + title: z.string(), + description: z.string(), + // Transform string to Date object + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + heroImage: z.string().optional(), + }), }); export const collections = { blog }; diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index e635b8a..4d140d8 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -1,66 +1,76 @@ --- -import type { CollectionEntry } from 'astro:content'; -import BaseHead from '../components/BaseHead.astro'; -import Header from '../components/Header.astro'; -import Footer from '../components/Footer.astro'; -import FormattedDate from '../components/FormattedDate.astro'; +import type { CollectionEntry } from "astro:content"; +import BaseHead from "../components/BaseHead.astro"; +import Header from "../components/Header.astro"; +import Footer from "../components/Footer.astro"; +import FormattedDate from "../components/FormattedDate.astro"; -type Props = CollectionEntry<'blog'>['data']; +type Props = CollectionEntry<"blog">["data"]; const { title, description, pubDate, updatedDate, heroImage } = Astro.props; --- - - - - + + + + - -
-
-
-
- {heroImage && } -
-
-
-
- - { - updatedDate && ( -
- Last updated on -
- ) - } -
-

{title}

-
-
- -
-
-
-