refactor: extract to components

.astro/settings.json

@@ -0,0 +1,11 @@
+{
+  "_variables": {
+    "lastUpdateCheck": 1722427204423
+  },
+  "checkUpdates": {
+    "enabled": false
+  },
+  "devToolbar": {
+    "enabled": true
+  }
+}

.gitignore

@@ -1,4 +1,5 @@
 .idea
+.yarn
 dist
 node_modules
 

.husky/pre-commit

@@ -1,2 +1,4 @@
 yarn run format
-yarn run lint
+yarn run check:astro
+yarn run check:eslint
+yarn run check:stylelint

astro.config.mjs

@@ -1,9 +1,15 @@
 import { defineConfig } from 'astro/config'
 import tailwind from '@astrojs/tailwind'
+import betterImage from 'astro-better-image-service'
+import compress from '@playform/compress'
 
 /** @type {import('astro').AstroUserConfig} */
 export default defineConfig({
   site: 'https://maisonquiroga.art',
   compressHTML: true,
-  integrations: [tailwind()]
+  integrations: [
+    tailwind(),
+    betterImage(),
+    compress({ Image: false, SVG: false })
+  ]
 })

eslint.config.cjs

@@ -23,6 +23,7 @@ module.exports = [
       parserOptions: {
         parser: '@typescript-eslint/parser',
         project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
         extraFileExtensions: ['.astro']
       }
     }

package.json

@@ -5,32 +5,44 @@
   "scripts": {
     "astro": "astro",
     "start": "astro dev",
-    "build": "astro build",
     "format": "prettier . --write",
-    "lint": "eslint . --fix",
+    "check:astro": "astro check",
+    "check:eslint": "eslint . --fix",
+    "check:stylelint": "stylelint '**/*.{css,astro}' --fix",
+    "build": "astro check && astro build",
     "preview": "astro preview",
     "prepare": "husky"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^5.0.2",
+    "@archoleat/stylelint-config-extended-scss": "^1.6.9",
+    "@astrojs/check": "^0.8.3",
+    "@astrojs/tailwind": "^5.1.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@playform/compress": "^0.1.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "astro": "^3.4.2",
+    "astro": "^4.12.3",
+    "astro-better-image-service": "^2.0.12",
     "astro-eslint-parser": "^1.0.2",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.19",
     "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-functional": "^6.6.3",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "husky": "^9.1.4",
     "neostandard": "^0.11.1",
-    "postcss": "^8.4.31",
+    "postcss-html": "^1.7.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^3.3.5",
-    "typescript": "<=5.2.0"
+    "stylelint": "^16.8.1",
+    "stylelint-config-astro": "^1.0.4",
+    "stylelint-config-cloudfour-suit": "^10.0.0",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-sass-guidelines": "^12.0.0",
+    "stylelint-config-tailwindcss": "^0.0.7",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.5.4"
   },
   "engines": {
     "node": ">= 20.0.0",

src/styles/_font.css → src/assets/styles/_font.css

@@ -1,33 +1,33 @@
 @font-face {
-  font-family: 'AkzidenzGrotesk';
+  font-family: AkzidenzGrotesk;
   font-style: normal;
   font-weight: 300;
   src: url('/fonts/AkzidenzGrotesk-300.otf') format('opentype');
 }
 
 @font-face {
-  font-family: 'AkzidenzGrotesk';
+  font-family: AkzidenzGrotesk;
   font-style: normal;
   font-weight: 400;
   src: url('/fonts/AkzidenzGrotesk-400.otf') format('opentype');
 }
 
 @font-face {
-  font-family: 'AkzidenzGrotesk';
+  font-family: AkzidenzGrotesk;
   font-style: normal;
   font-weight: 500;
   src: url('/fonts/AkzidenzGrotesk-500.otf') format('opentype');
 }
 
 @font-face {
-  font-family: 'AkzidenzGrotesk';
+  font-family: AkzidenzGrotesk;
   font-style: normal;
   font-weight: 700;
   src: url('/fonts/AkzidenzGrotesk-700.otf') format('opentype');
 }
 
 @font-face {
-  font-family: 'AkzidenzGrotesk';
+  font-family: AkzidenzGrotesk;
   font-style: normal;
   font-weight: 900;
   src: url('/fonts/AkzidenzGrotesk-900.otf') format('opentype');

src/assets/styles/_text.css

@@ -0,0 +1,16 @@
+p {
+  @apply text-sm !important;
+  @apply font-light !important;
+  @apply text-gray-700 !important;
+}
+
+a {
+  @apply underline !important;
+  @apply lowercase !important;
+  @apply font-normal !important;
+  @apply text-secondary !important;
+}
+
+a:hover {
+  @apply text-primary !important;
+}

src/styles/global.css → src/assets/styles/global.css

@@ -1,8 +1,6 @@
 @import '_base.css';
 @import '_font.css';
-@import '_blocks.css';
 @import '_text.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/components/Bio.astro

@@ -1,4 +1,17 @@
 ---
+import { Image } from 'astro:assets'
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from '../../tailwind.config'
+
+const { theme } = resolveConfig(tailwindConfig)
+const { screens } = theme
+const widths = [320, 256, 160, 128]
+const sizes = `
+  ${widths[0]}px,
+  (min-width: ${screens.sm}) ${widths[1]}px,
+  (min-width: ${screens.md}) ${widths[2]}px,
+  (min-width: ${screens.lg}) ${widths[3]}px
+`
 const {
   title,
   text,
@@ -12,71 +25,36 @@ const {
     <p class='Bio-article-p'>{text}</p>
   </article>
 
-  <article class='Bio-article-sm'>
-    <h1 class='Bio-article-h1'>{title}</h1>
-    <p class='Bio-article-p'>{text}</p>
-  </article>
-
-  <article class='Bio-article-md'>
-    <h1 class='Bio-article-h1'>{title}</h1>
-    <p class='Bio-article-p'>{text}</p>
-  </article>
-
   <figure class='Bio-figure'>
-    <img class='Bio-figure-img' src={src} alt={alt} />
-    <figcaption class='Bio-figure-figcaption'>{caption}</figcaption>
-  </figure>
-
-  <figure class='Bio-figure-sm'>
-    <img class='Bio-figure-img' src={src} alt={alt} />
-    <figcaption class='Bio-figure-figcaption'>{caption}</figcaption>
-  </figure>
-
-  <figure class='Bio-figure-md'>
-    <img class='Bio-figure-img' src={src} alt={alt} />
+    <Image
+      class='Bio-figure-img'
+      src={src}
+      alt={alt}
+      sizes={sizes}
+      widths={widths}
+      loading='eager'
+    />
     <figcaption class='Bio-figure-figcaption'>{caption}</figcaption>
   </figure>
 </section>
 
 <style>
   .Bio-article {
-    @apply block sm:hidden;
-  }
-
-  .Bio-article-sm {
-    @apply hidden sm:inline-block md:hidden;
+    @apply block sm:inline-block;
+    @apply w-full sm:w-1/2 md:w-2/3 lg:w-3/4;
+    @apply sm:pr-8;
     @apply align-top;
-    @apply w-1/2;
-  }
-
-  .Bio-article-md {
-    @apply hidden md:inline-block;
-    @apply align-top;
-    @apply w-2/3;
   }
 
   .Bio-article-h1 {
     @apply sr-only;
   }
 
   .Bio-figure {
-    @apply block sm:hidden;
-    @apply pt-8;
-    margin: 0 auto;
-    max-width: 322px;
-  }
-
-  .Bio-figure-sm {
-    @apply hidden sm:inline-block md:hidden;
-    @apply w-1/2;
-    @apply pl-8 pt-1;
-    max-width: 282px;
-  }
-
-  .Bio-figure-md {
-    @apply hidden md:inline-block;
-    @apply w-1/3;
-    @apply pl-8 pt-1;
-    max-width: 143px;
+    @apply block sm:inline-block;
+    @apply w-full sm:w-1/2 md:w-1/3 lg:w-1/4;
+    @apply mb-0 ml-auto mr-auto mt-0 sm:m-0;
+    @apply pt-8 sm:pt-0.5;
+    @apply max-w-80 sm:max-w-64 md:max-w-40 lg:max-w-32;
   }
 </style>

src/components/Curriculum.astro

@@ -0,0 +1,44 @@
+---
+const { title, items } = Astro.props
+---
+
+<section class='Curriculum'>
+  <h1 class='Curriculum-h1'>[{title}]</h1>
+
+  {
+    items.map(({ year, text }) => (
+      <div class='Curriculum-col'>
+        <p class='Curriculum-col-row-left'>{year}</p>
+        <p class='Curriculum-col-row-right'>{text}</p>
+      </div>
+    ))
+  }
+</section>
+
+<style>
+  .Curriculum-h1 {
+    @apply text-sm;
+    @apply font-bold;
+    @apply lowercase;
+    @apply text-gray-900;
+  }
+
+  .Curriculum-col {
+    @apply grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10;
+  }
+
+  .Curriculum-col-row-left {
+    @apply col-start-1;
+    @apply font-normal;
+  }
+
+  .Curriculum-col-row-right {
+    @apply col-span-5 col-start-2 sm:col-span-7 md:col-span-6;
+    @apply font-light;
+  }
+
+  .Curriculum-col-row-left,
+  .Curriculum-col-row-right {
+    @apply mt-2;
+  }
+</style>

src/components/Footer.astro

@@ -4,7 +4,7 @@ const { items } = Astro.props
 
 <footer class='Footer'>
   <p class='Footer-p'>
-    <span class='Footer-p-span'>; </span>
+    <span class='Footer-p-span'>;</span>
     {
       items.map(({ text, href }) => (
         <a class='Footer-p-a' href={href}>
@@ -13,7 +13,7 @@ const { items } = Astro.props
       ))
     }
 
-    <span class='Footer-p-span'> .</span>
+    <span class='Footer-p-span'>.</span>
   </p>
 </footer>
 

src/components/Head.astro

@@ -1,5 +1,5 @@
 ---
-import '../styles/global.css'
+import '../assets/styles/global.css'
 
 const { title, author, description } = Astro.props
 ---

src/components/Header.astro

@@ -38,6 +38,36 @@ const h2 = {
 </header>
 
 <style>
+  .Header-h1,
+  .Header-h1-sm,
+  .Header-h1-md,
+  .Header-h1-lg {
+    @apply text-5xl;
+    @apply text-primary;
+  }
+
+  .Header-h2,
+  .Header-h2-sm,
+  .Header-h2-md,
+  .Header-h2-lg {
+    @apply text-4xl;
+    @apply lowercase;
+    @apply text-secondary;
+  }
+
+  .Header-h1,
+  .Header-h1-sm,
+  .Header-h1-md,
+  .Header-h1-lg,
+  .Header-h2,
+  .Header-h2-sm,
+  .Header-h2-md,
+  .Header-h2-lg {
+    @apply ml-16;
+    @apply pl-8;
+    @apply font-bold;
+  }
+
   .Header-h1,
   .Header-h2 {
     @apply block sm:hidden;