♻️ refactor: Linting code

.eslintrc.cjs

@@ -0,0 +1,24 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+	extends: ['plugin:astro/recommended'],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		sourceType: 'module',
+		ecmaVersion: 'latest'
+	},
+	overrides: [
+		{
+			files: ['*.astro'],
+			parser: 'astro-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+				extraFileExtensions: ['.astro']
+			},
+			rules: {
+				// override/add rules settings here, such as:
+				'astro/no-set-html-directive': 'error'
+			}
+		}
+	]
+}

.prettierignore

@@ -0,0 +1,6 @@
+test/fixtures/**/*.md
+test/fixtures/**/*.astro
+**/dist
+pnpm-lock.yaml
+.github
+.changeset

package.json

@@ -1,32 +1,40 @@
 {
-  "name": "blog-template",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "postbuild": "pagefind --source dist"
-  },
-  "dependencies": {
-    "@astrojs/rss": "2.4.3",
-    "astro": "2.10.1"
-  },
-  "devDependencies": {
-    "@astrojs/mdx": "0.19.7",
-    "@astrojs/sitemap": "2.0.1",
-    "@astrojs/tailwind": "4.0.0",
-    "@pagefind/default-ui": "^0.12.0",
-    "@tailwindcss/typography": "0.5.9",
-    "clsx": "2.0.0",
-    "mdast-util-to-string": "^4.0.0",
-    "motion": "^10.16.2",
-    "pagefind": "^0.12.0",
-    "reading-time": "^1.5.0",
-    "slugify": "^1.6.6",
-    "tailwind-merge": "1.14.0",
-    "tailwindcss": "3.3.3",
-    "typescript": "^5.1.6"
-  }
+	"name": "blog-template",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"postbuild": "pagefind --source dist",
+		"lint": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
+	},
+	"dependencies": {
+		"@astrojs/rss": "2.4.3",
+		"astro": "2.10.1"
+	},
+	"devDependencies": {
+		"@astrojs/mdx": "0.19.7",
+		"@astrojs/sitemap": "2.0.1",
+		"@astrojs/tailwind": "4.0.0",
+		"@pagefind/default-ui": "^0.12.0",
+		"@tailwindcss/typography": "0.5.9",
+		"@typescript-eslint/parser": "^6.2.1",
+		"clsx": "2.0.0",
+		"eslint": "^8.46.0",
+		"eslint-plugin-astro": "^0.28.0",
+		"eslint-plugin-jsx-a11y": "^6.7.1",
+		"mdast-util-to-string": "^4.0.0",
+		"motion": "^10.16.2",
+		"pagefind": "^0.12.0",
+		"prettier": "^3.0.1",
+		"prettier-config-standard": "^5.0.0",
+		"prettier-plugin-astro": "^0.11.0",
+		"reading-time": "^1.5.0",
+		"slugify": "^1.6.6",
+		"tailwind-merge": "1.14.0",
+		"tailwindcss": "3.3.3",
+		"typescript": "^5.1.6"
+	}
 }

prettier.config.cjs

@@ -0,0 +1,22 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+	// i am just using the standard config, change if you need something else
+	...require('prettier-config-standard'),
+	pluginSearchDirs: [__dirname],
+	printWidth: 100,
+	semi: false,
+	singleQuote: true,
+	jsxSingleQuote: true,
+	tabWidth: 2,
+	useTabs: true,
+
+	plugins: [require.resolve('prettier-plugin-astro')],
+	overrides: [
+		{
+			files: '*.astro',
+			options: {
+				parser: 'astro'
+			}
+		}
+	]
+}

src/components/BaseHead.astro

@@ -1,25 +1,17 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
 import { siteConfig } from '@/site-config'
 import '../styles/global.css'
 
 export interface Props {
-  title: string
-  description?: string
-  ogImage?: string | undefined
-  articleDate?: string | undefined
+	title: string
+	description?: string
+	ogImage?: string | undefined
+	articleDate?: string | undefined
 }
 
-const {
-  title,
-  description = siteConfig.description,
-  ogImage,
-  articleDate,
-} = Astro.props
+const { title, description = siteConfig.description, ogImage, articleDate } = Astro.props
 const canonicalURL = new URL(Astro.url.pathname, Astro.site)
-const socialImageURL = new URL(ogImage ? ogImage : '/banner.png', Astro.url)
-  .href
+const socialImageURL = new URL(ogImage ? ogImage : '/banner.png', Astro.url).href
 
 const titleSeparator = '•'
 
@@ -48,12 +40,12 @@ const siteTitle = `${title} ${titleSeparator} ${siteConfig.title}`
 <meta property='og:description' content={description} />
 <meta property='og:image' content={socialImageURL} />
 {
-  articleDate && (
-    <>
-      <meta property='article:author' content={siteConfig.author} />
-      <meta property='article:published_time' content={articleDate} />
-    </>
-  )
+	articleDate && (
+		<>
+			<meta property='article:author' content={siteConfig.author} />
+			<meta property='article:published_time' content={articleDate} />
+		</>
+	)
 }
 
 <!-- Twitter -->
@@ -64,9 +56,4 @@ const siteTitle = `${title} ${titleSeparator} ${siteConfig.title}`
 <meta property='twitter:image' content={socialImageURL} />
 
 <!-- RSS auto-discovery -->
-<link
-  rel='alternate'
-  type='application/rss+xml'
-  title={siteConfig.title}
-  href='/rss.xml'
-/>
+<link rel='alternate' type='application/rss+xml' title={siteConfig.title} href='/rss.xml' />

src/components/Category.astro

@@ -6,19 +6,15 @@ const currentPath = Astro.url.pathname
 const unsluglifyNameCategory = sluglify(name.toLowerCase())
 
 const isActive =
-  activeCategory?.toLocaleLowerCase() === unsluglifyNameCategory ||
-  (currentPath === '/' && name === 'View All')
+	activeCategory?.toLocaleLowerCase() === unsluglifyNameCategory ||
+	(currentPath === '/' && name === 'View All')
 ---
 
 <a
-  href={name === 'View All'
-    ? '/'
-    : sluglify(`/category/${unsluglifyNameCategory}`)}
-  class={cn(
-    `text-gray-500  tracking-wide pb-2.5 first-letter:uppercase font-medium hover:text-gray-800 hover:border-black hover:border-opacity-30 hover:border-b-2 hover:z-10 transition-colors dark:hover:text-gray-300 dark:hover:border-white dark:hover:border-opacity-30`,
-    isActive &&
-      `border-black border-b-2 text-black z-10  dark:border-white dark:text-white`
-  )}
->
-  {name}
+	href={name === 'View All' ? '/' : sluglify(`/category/${unsluglifyNameCategory}`)}
+	class={cn(
+		`text-gray-500  tracking-wide pb-2.5 first-letter:uppercase font-medium hover:text-gray-800 hover:border-black hover:border-opacity-30 hover:border-b-2 hover:z-10 transition-colors dark:hover:text-gray-300 dark:hover:border-white dark:hover:border-opacity-30`,
+		isActive && `border-black border-b-2 text-black z-10  dark:border-white dark:text-white`
+	)}>
+	{name}
 </a>

src/components/Footer.astro

@@ -3,5 +3,5 @@ const today = new Date()
 ---
 
 <footer class='flex justify-center items-center w-full px-16 h-28 border-t-2'>
-  &copy; {today.getFullYear()} Your Name. All rights reserved.
+	&copy; {today.getFullYear()} Your Name. All rights reserved.
 </footer>

src/components/FormattedDate.astro

@@ -1,17 +1,17 @@
 ---
 export interface Props {
-  date: Date
+	date: Date
 }
 
 const { date } = Astro.props
 ---
 
 <time class='text-sm font-bold text-opacity-60' datetime={date.toISOString()}>
-  {
-    date.toLocaleDateString('en-us', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
-  }
+	{
+		date.toLocaleDateString('en-us', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		})
+	}
 </time>

src/components/Header.astro

@@ -6,50 +6,42 @@ import SunIcon from '@/components/icons/SunIcon'
 import MoonIcon from '@/components/icons/MoonIcon'
 import PageFindSearch from '@/components/Search'
 
+// ADD YOUR SOCIAL NETWORKS HERE
 const SOCIALNETWORKS = [
-  {
-    name: 'Github',
-    url: 'https://github.com/danielcgilibert/blog-template',
-    icon: GithbuIcon,
-  },
-  {
-    name: 'Twitter',
-    url: 'https://github.com/danielcgilibert/blog-template',
-    icon: TwitterIcon,
-  },
+	{
+		name: 'Github',
+		url: 'https://github.com/danielcgilibert/blog-template',
+		icon: GithbuIcon
+	},
+	{
+		name: 'Twitter',
+		url: 'https://github.com/danielcgilibert/blog-template',
+		icon: TwitterIcon
+	}
 ]
 ---
 
 <header class='flex justify-between items-center h-12 font-semibold'>
-  <a class='text-lg' href='/'>Home</a>
-  <nav class='nav-menu flex justify-center items-center md:flex gap-4'>
-    {
-      SOCIALNETWORKS.map((network) => (
-        <HeaderLink
-          class=''
-          href={network.url}
-          target='_blank'
-          aria-label={network.name}>
-          <span>{<network.icon />} </span>
-        </HeaderLink>
-      ))
-    }
-    <PageFindSearch />
-    <div
-      class='md:ml-3 pl-2.5 border-l-2 flex justify-center items-center gap-2'
-    >
-      <span class='theme relative'>
-        <span
-          class='sun-logo w-fit h-fit transition-transform duration-500 opacity-0'
-        >
-          <SunIcon />
-        </span>
-        <span
-          class='moon-logo w-fit h-fit absolute inset-0 opacity-0 transition-transform duration-500'
-        >
-          <MoonIcon />
-        </span>
-      </span>
-    </div>
-  </nav>
+	<a class='text-lg' href='/'>Home</a>
+	<nav class='nav-menu flex justify-center items-center md:flex gap-4'>
+		{
+			SOCIALNETWORKS.map((network) => (
+				<HeaderLink class='' href={network.url} target='_blank' aria-label={network.name}>
+					<span>{<network.icon />} </span>
+				</HeaderLink>
+			))
+		}
+		<PageFindSearch />
+		<div class='md:ml-3 pl-2.5 border-l-2 flex justify-center items-center gap-2'>
+			<span class='theme relative'>
+				<span class='sun-logo w-fit h-fit transition-transform duration-500 opacity-0'>
+					<SunIcon />
+				</span>
+				<span
+					class='moon-logo w-fit h-fit absolute inset-0 opacity-0 transition-transform duration-500'>
+					<MoonIcon />
+				</span>
+			</span>
+		</div>
+	</nav>
 </header>

src/components/HeaderLink.astro

@@ -10,10 +10,9 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '')
 ---
 
 <a
-  href={href}
-  class={cn(isActive ? 'text-opacity-100' : 'text-opacity-60', className)}
-  rel='noreferrer'
-  {...props}
->
-  <slot />
+	href={href}
+	class={cn(isActive ? 'text-opacity-100' : 'text-opacity-60', className)}
+	rel='noreferrer'
+	{...props}>
+	<slot />
 </a>

src/components/ListCategories.astro

@@ -9,12 +9,12 @@ const { activeCategory } = Astro.props
 ---
 
 <div class='relative flex flex-wrap min-w-full gap-5'>
-  <Category />
-  {
-    categories.map((category: string) => (
-      <Category name={category} activeCategory={activeCategory} />
-    ))
-  }
+	<Category />
+	{
+		categories.map((category: string) => (
+			<Category name={category} activeCategory={activeCategory} />
+		))
+	}
 
-  <div class='absolute w-full bottom-0 border-b-2 dark:border-gray-600'></div>
+	<div class='absolute w-full bottom-0 border-b-2 dark:border-gray-600'></div>
 </div>