Merge pull request #81 from brklntmhwk/80-add-unpic-image-related-lib

feat(ui): 🆕 refactor image and card components

.frontmatter/database/mediaDb.json

@@ -1 +1 @@
-{"assets":{"images":{}},"src":{"assets":{"images":{}},"components":{"card":{}},"content":{"page":{"en":{}}}}}
+{"assets":{"images":{}},"src":{"assets":{"images":{}},"components":{"card":{}},"content":{"page":{"en":{}}},"lib":{"unified":{"plugins":{}}}}}

astro.config.ts

@@ -21,23 +21,22 @@ import remarkMath from 'remark-math';
 import { iconNameTypes } from './src/lib/astro-integrations/icon-name-type';
 import { pagefind } from './src/lib/astro-integrations/pagefind';
 import { SITE_URL } from './src/lib/consts';
-import rehypeImageFigure from './src/plugins/rehype-image-figure';
-import rehypePagefindIgnore from './src/plugins/rehype-pagefind-ignore';
-import remarkAstroImageAssets from './src/plugins/remark-astro-image-assets';
-import remarkCallout from './src/plugins/remark-callout';
+import rehypePagefindIgnore from './src/lib/unified/plugins/rehype-pagefind-ignore';
+import remarkAstroImageAssets from './src/lib/unified/plugins/remark-astro-image-assets';
+import remarkCallout from './src/lib/unified/plugins/remark-callout';
 import remarkEmbed, {
   type RemarkEmbedOptions,
-} from './src/plugins/remark-embed';
-import remarkFootnote from './src/plugins/remark-footnote';
-import remarkLineBreaks from './src/plugins/remark-line-breaks';
-import remarkLinkCard from './src/plugins/remark-link-card';
+} from './src/lib/unified/plugins/remark-embed';
+import remarkFootnote from './src/lib/unified/plugins/remark-footnote';
+import remarkLineBreaks from './src/lib/unified/plugins/remark-line-breaks';
+import remarkLinkCard from './src/lib/unified/plugins/remark-link-card';
 import {
   canvaTransformer,
   googleSlidesTransformer,
   oEmbedTransformer,
   youTubeTransformer,
-} from './src/plugins/transformers';
-import remarkCard from './src/plugins/remark-card';
+} from './src/lib/unified/transformers';
+import remarkCard from './src/lib/unified/plugins/remark-card';
 
 // https://astro.build/config
 export default defineConfig({
@@ -50,7 +49,7 @@ export default defineConfig({
     },
   }),
   image: {
-    service: passthroughImageService(),
+    service: passthroughImageService()
   },
   integrations: [
     mdx(),
@@ -131,7 +130,6 @@ export default defineConfig({
     rehypePlugins: [
       rehypeKatex,
       rehypeSlug,
-      rehypeImageFigure,
       [
         rehypeAutolinkHeadings,
         {

biome.json

@@ -24,6 +24,7 @@
     "indentStyle": "space"
   },
   "javascript": {
+    "globals": ["Astro"],
     "formatter": {
       "enabled": true,
       "semicolons": "always",

frontmatter.json

@@ -152,6 +152,11 @@
             "step": 1
           }
         },
+        {
+          "title": "Hero Image",
+          "name": "image",
+          "type": "image"
+        },
         {
           "title": "type",
           "name": "type",

package.json

@@ -39,6 +39,7 @@
     "@solid-primitives/event-listener": "^2.3.3",
     "@solid-primitives/keyboard": "^1.2.8",
     "@unocss/reset": "^0.60.0",
+    "@unpic/placeholder": "^0.1.2",
     "astro": "^4.12.2",
     "astro-purgecss": "4.1.0",
     "drizzle-orm": "^0.31.1",
@@ -47,24 +48,30 @@
     "solid-js": "^1.8.17",
     "solid-motionone": "^1.0.0",
     "solid-toast": "^0.5.0",
+    "unpic": "^3.18.0",
     "valibot": "^0.31.1",
     "wretch": "^2.9.0"
   },
   "devDependencies": {
+    "@astrojs/ts-plugin": "^1.10.3",
     "@biomejs/biome": "1.8.3",
     "@cloudflare/workers-types": "^4.20240603.0",
+    "@mdx-js/typescript-plugin": "^0.0.6",
     "@nanostores/solid": "^0.4.2",
     "@pagefind/default-ui": "^1.0.4",
     "@types/better-sqlite3": "^7.6.10",
+    "@types/bun": "^1.1.11",
     "@types/hast": "^3.0.4",
     "@types/katex": "0.16.7",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.0.0",
     "@types/unist": "^3.0.2",
+    "@unpic/pixels": "^1.2.2",
     "@vanilla-extract/css": "^1.15.2",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/vite-plugin": "^4.0.10",
     "better-sqlite3": "^11.1.2",
+    "blurhash": "^2.0.5",
     "browserslist": "^4.23.0",
     "danger": "^12.3.3",
     "drizzle-kit": "^0.23.0",

src/components/Footer/Footer.astro → src/components/common/Footer/Footer.astro

@@ -1,6 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/components/ui/Icon';
 import { ACCOUNT_ID, GITHUB_BASE_URL, UNSPLASH_BASE_URL } from '@/lib/consts';
 import { getLocaleFromUrl, useTranslatedPath } from '@/utils/i18n/utils';
 

src/components/LocalePicker/LocalePicker.tsx → src/components/common/LocalePicker/LocalePicker.tsx

@@ -1,5 +1,5 @@
-import { locale } from '@/components/LocaleStore/locale-store';
-import { url } from '@/components/UrlStore/url-store';
+import { locale } from '@/components/functional/LocaleStore/locale-store';
+import { url } from '@/components/functional/UrlStore/url-store';
 import { defaultLang, languages } from '@/utils/i18n/data';
 import { getTargetLocaleSlug } from '@/utils/i18n/utils';
 import { useStore } from '@nanostores/solid';

src/components/Navigation/Navigation.astro → src/components/common/Navigation/Navigation.astro

@@ -1,10 +1,10 @@
 ---
 import '@/styles/pixelmplus.css';
 import { getEntry } from 'astro:content';
-import { Icon } from '@/components/Icon';
-import { LocalePicker } from '@/components/LocalePicker/LocalePicker';
-import { Modal } from '@/components/Modal/Modal';
-import { Search } from '@/components/Search/Search';
+import { LocalePicker } from '@/components/common/LocalePicker/LocalePicker';
+import { Search } from '@/components/common/Search/Search';
+import { Icon } from '@/components/ui/Icon';
+import { Modal } from '@/components/ui/Modal/Modal';
 import { transparentButton } from '@/styles/styles.css';
 import { getLocaleFromUrl, useTranslatedPath } from '@/utils/i18n/utils';
 import NavLink from './NavLink.astro';

src/components/elements/Callout/CalloutTitle.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/components/ui/Icon';
 import { generateUniqueId } from '@/utils/generate-unique-id';
 import { toBoolean } from '@/utils/to-boolean';
 import type { Props as CalloutProps } from './Callout.astro';

src/components/elements/Callout/types.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '@/components/Icon/types';
+import type { IconName } from '@/components/ui/Icon/types';
 import type { callouts } from './callouts';
 
 type Callout = {

src/components/Card/Card.astro → src/components/elements/Card/Card.astro

@@ -46,11 +46,20 @@ if (isElementCard(Astro.props)) {
       padding: 0.25rem;
       display: flex;
       justify-content: center;
+      & :global(figure) {
+        margin: 0 auto;
+      }
+      & :global(figcaption) {
+        display: none;
+      }
       & :global(img) {
         object-fit: contain;
         width: 100%;
         height: 100%;
       }
+      & :global(a) {
+        display: flex;
+      }
       @media (min-width: 640px) {
         max-height: 8.75rem;
         min-height: 6.75rem;

src/components/elements/Figure/Figure.astro

@@ -1,27 +1,20 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 import AstroCode from './Code.astro';
-import AstroImage from './Image.astro';
 
 type Props = HTMLAttributes<'figure'> & {
-  'data-image-figure'?: '';
   'data-rehype-pretty-code-figure'?: '';
 };
 
 const props = Astro.props;
 const isCodeFigure = Object.hasOwn(props, 'data-rehype-pretty-code-figure');
-const isImageFigure = Object.hasOwn(props, 'data-image-figure');
 ---
 
 {
   isCodeFigure ? (
     <AstroCode {...props}>
       <slot />
     </AstroCode>
-  ) : isImageFigure ? (
-    <AstroImage {...props}>
-      <slot />
-    </AstroImage>
   ) : (
     <figure {...props}>
       <slot />

src/components/elements/Figure/Image.astro

@@ -1,48 +1,57 @@
 ---
+import { Picture } from 'astro:assets';
 import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<'figure'> & {
-  'data-image-alt'?: string;
-  'data-image-aspect-ratio'?: string;
-  'data-image-blur-url'?: string;
+type Props = Omit<HTMLAttributes<'picture'>, 'alt' | 'src'> & {
+  alt: string;
+  placeholder: string;
+  src: string | ImageMetadata;
 };
 
-const {
-  'data-image-alt': alt,
-  'data-image-aspect-ratio': aspectRatio,
-  'data-image-blur-url': blurUrl,
-  ...props
-} = Astro.props;
+const { alt, placeholder, src, ...props } = Astro.props;
 ---
 
-<figure class="image-figure" {...props}>
-  <div class="image-wrapper">
-    <slot />
-  </div>
-  <figcaption>{alt}</figcaption>
-</figure>
-<style define:vars={{ aspectRatio, blurUrl }}>
-  .image-figure {
+{
+  typeof src === 'string' ? (
+    <img {alt} {src} {...props} />
+  ) : (
+    <figure>
+      <Picture
+        {alt}
+        {src}
+        class="image"
+        formats={['avif']}
+        widths={[240, 540, 720, src.width]}
+        pictureAttributes={{
+          style: {
+            aspectRatio: `${src.width} / ${src.height}`,
+            margin: "0 auto",
+            maxHeight: "100%"
+          }
+        }}
+        {...props}
+      />
+      <figcaption>{alt}</figcaption>
+    </figure>
+  )
+}
+<style define:vars={{ blurUrl: `url(${placeholder})` }}>
+  figure {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     place-items: center;
     margin: 1.75rem 0;
-    .image-wrapper {
-      margin: 0 auto;
-      max-height: 100%;
-      aspect-ratio: var(--aspectRatio);
-      & :global(img) {
-        object-fit: contain;
-        color: transparent;
-        background-image: var(--blurUrl);
-        background-size: cover;
-        background-position: 50%;
-        background-repeat: no-repeat;
-      }
-    }
-    figcaption {
-      font-size: 0.95rem;
-    }
+  }
+  figcaption {
+    font-size: 0.95rem;
+  }
+  .image {
+    object-fit: contain;
+    color: transparent;
+    background-image: var(--blurUrl);
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
   }
 </style>

src/components/elements/Figure/index.ts

@@ -1 +1,2 @@
 export { default as Figure } from './Figure.astro';
+export { default as Image } from './Image.astro';

src/components/elements/Link/LinkCard.astro

@@ -1,6 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/components/ui/Icon';
 import { getLocaleFromUrl } from '@/utils/i18n/utils';
 import type { HTMLAttributes } from 'astro/types';
 import { unfurl } from 'unfurl.js';

src/components/BlogList/BlogList.astro → src/components/models/BlogList/BlogList.astro

@@ -1,8 +1,8 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import { FormattedDate } from '@/components/FormattedDate';
-import { Icon } from '@/components/Icon';
-import { Taxonomy } from '@/components/Taxonomy';
+import { FormattedDate } from '@/components/models/FormattedDate';
+import { Taxonomy } from '@/components/models/Taxonomy';
+import { Icon } from '@/components/ui/Icon';
 import { getBlogCategory, getBlogTags } from '@/lib/collections/data';
 import { getLocaleFromUrl, useTranslatedPath } from '@/utils/i18n/utils';
 

src/components/Pager/Pager.astro → src/components/models/Pager/Pager.astro

@@ -1,9 +1,9 @@
 ---
 import { type CollectionEntry, getEntry } from 'astro:content';
+import { Icon } from '@/components/ui/Icon';
 import { DEFAULT_PAGINATION_WIDTH } from '@/lib/consts';
 import { getLocaleFromUrl } from '@/utils/i18n/utils';
 import type { Page } from 'astro';
-import { Icon } from '../Icon';
 
 type Props = {
   page?: Page<CollectionEntry<'blog' | 'news'>>;

src/components/Toc/TocDrawer.astro → src/components/models/Toc/TocDrawer.astro

@@ -1,6 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/components/ui/Icon';
 import { getLocaleFromUrl } from '@/utils/i18n/utils';
 
 const locale = getLocaleFromUrl(Astro.url);

src/components/Balloon/Balloon.astro → src/components/ui/Balloon/Balloon.astro

@@ -1,7 +1,7 @@
 ---
 import { getEntry } from 'astro:content';
 import profileImage from '@/assets/images/profile.png';
-import { ProfileIcon } from '@/components/ProfileIcon';
+import { ProfileIcon } from '@/components/ui/ProfileIcon';
 import { getLocaleFromUrl } from '@/utils/i18n/utils';
 import type { ImageMetadata } from 'astro';
 

src/components/BuyMeACoffee/BuyMeACoffee.astro → src/components/ui/BuyMeACoffee/BuyMeACoffee.astro

@@ -1,7 +1,7 @@
 ---
 import { getEntry } from 'astro:content';
-import { Icon } from '@/components/Icon';
-import { Modal } from '@/components/Modal/Modal';
+import { Icon } from '@/components/ui/Icon';
+import { Modal } from '@/components/ui/Modal/Modal';
 import { ACCOUNT_ID } from '@/lib/consts';
 import { getLocaleFromUrl } from '@/utils/i18n/utils';
 import {

src/components/ContactForm/Checkbox/Checkbox.tsx → src/components/ui/ContactForm/Checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
 import { Checkbox as KCheckbox, Root as KRoot } from '@kobalte/core/checkbox';
 import { type Component, type JSX, splitProps } from 'solid-js';
-import { CheckIcon } from '../Checkbox/CheckIcon';
 import {
   contactFormError,
   contactLabel,
   fieldGroup,
 } from '../contact-form.css';
+import { CheckIcon } from './CheckIcon';
 import { checkboxArea, checkboxControl } from './checkbox.css';
 
 type Props = {

src/components/ContactForm/ContactForm.tsx → src/components/ui/ContactForm/ContactForm.tsx

@@ -1,4 +1,4 @@
-import { locale } from '@/components/LocaleStore/locale-store';
+import { locale } from '@/components/functional/LocaleStore/locale-store';
 import type { I18nData } from '@/lib/collections/types';
 import { FORM_TEXTAREA_MINLENGTH } from '@/lib/consts';
 import { useTranslatedPath } from '@/utils/i18n/utils';

src/components/Likes/Likes.tsx → src/components/ui/Likes/Likes.tsx

@@ -1,4 +1,4 @@
-import { locale } from '@/components/LocaleStore/locale-store';
+import { locale } from '@/components/functional/LocaleStore/locale-store';
 import type { I18nData } from '@/lib/collections/types';
 import type { Language } from '@/utils/i18n/data';
 import { useTranslatedPath } from '@/utils/i18n/utils';

src/components/Modal/modal.css.ts → src/components/ui/Modal/modal.css.ts

@@ -1,4 +1,4 @@
-import { contactForm } from '@/components/ContactForm/contact-form.css';
+import { contactForm } from '@/components/ui/ContactForm/contact-form.css';
 import { createVar, style } from '@vanilla-extract/css';
 
 const fgColor = createVar();

src/components/PhotoGallery/PhotoGallery.astro → src/components/ui/PhotoGallery/PhotoGallery.astro

@@ -1,6 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
-import { CardGrid } from '@/components/Card';
+import { CardGrid } from '@/components/elements/Card';
 import { ACCOUNT_ID, UNSPLASH_BASE_URL } from '@/lib/consts';
 import { getPhotographer } from '@/lib/unsplash/contents';
 import type { UnsplashPhotoData } from '@/lib/unsplash/types';