Update banners, hide them for now

Author: shiro

app.config.ts

@@ -33,15 +33,12 @@ export default defineConfig({
     babel: {
       plugins: [babelPluginLabels, babelPluginLazyPlus],
     },
-    // the `solid` field is incorrectly typed
-    ...({} as any),
   },
 
   extensions: ["mdx", "md"],
 
   vite(options) {
     return {
-      // css: { postcss: "./postcss.config.js" },
       css: { transformer: "lightningcss" },
       server: {
         port: 3000,

package.json

@@ -7,7 +7,7 @@
     "prod": "pnpm build && pnpm serve",
     "build": "vinxi build",
     "start": "vinxi start",
-    "serve": "cd .output && npx http-server public -p 3091",
+    "serve": "cd .output && npx http-server public -p 3000",
     "version": "vinxi version"
   },
   "dependencies": {
@@ -30,9 +30,9 @@
     "cssnano": "6.1.2",
     "lodash": "npm:lodash-es@4.17.21",
     "postcss-preset-env": "10.5.0",
-    "@style-this/core": "link:../../../.local/share/pnpm/global/5/node_modules/@style-this/core",
-    "@style-this/solid": "link:../../../.local/share/pnpm/global/5/node_modules/@style-this/solid",
-    "@style-this/vite": "link:../../../.local/share/pnpm/global/5/node_modules/@style-this/vite",
+    "@style-this/core": "0.1.4",
+    "@style-this/solid": "1.0.1",
+    "@style-this/vite": "1.0.5",
     "postcss-pxtorem": "6.1.0",
     "rehype-raw": "7.0.0",
     "sass": "1.94.2",

src/BlogIndex.tsx

@@ -3,21 +3,21 @@ import { Component } from "solid-js";
 import { For } from "solid-js/web";
 import { config } from "~/config";
 import { getArticles } from "~/ssg/getArticles";
-import DefaultBanner from "~/articles/9999-01-01-test/banner.jpg?lazy";
-import { LazyImageComponent } from "~/LazyImage";
+// import DefaultBanner from "~/articles/9999-01-01-test/banner.jpg?lazy";
+// import { LazyImageComponent } from "~/LazyImage";
 
-const banners = Object.fromEntries(
-  Object.entries(
-    import.meta.glob("~/articles/*/banner.jpg", {
-      query: "?lazy",
-      import: "default",
-      eager: true,
-    })
-  ).map(([k, v]) => [
-    k.substring("/src/articles/".length, k.lastIndexOf("/")),
-    v,
-  ])
-);
+// const banners = Object.fromEntries(
+//   Object.entries(
+//     import.meta.glob("~/articles/*/banner.*", {
+//       query: "?lazy",
+//       import: "default",
+//       eager: true,
+//     })
+//   ).map(([k, v]) => [
+//     k.substring("/src/articles/".length, k.lastIndexOf("/")),
+//     v,
+//   ])
+// );
 
 const articles = getArticles();
 
@@ -30,8 +30,8 @@ const BlogIndex: Component = () => {
       <ul class="flex flex-col gap-4">
         <For each={articles}>
           {(item, idx) => {
-            const Banner = (banners[item.slug] ??
-              DefaultBanner) as LazyImageComponent;
+            // const Banner = (banners[item.slug] ??
+            // DefaultBanner) as LazyImageComponent;
             return (
               <>
                 <li class="hover:bg-colors-primary-100 flex flex-col">
@@ -44,7 +44,7 @@ const BlogIndex: Component = () => {
                     <span class="textbody text-colors-text-300a mt-1 !no-underline">
                       {item.date} by Matic Utsumi Gačar
                     </span>
-                    <Banner class="mt-4 mb-4 h-60" />
+                    {/* <Banner class="mt-4 mb-4 h-60 object-cover!" /> */}
                     <span
                       class="text-colors-text-600a"
                       innerHTML={item.description?.replaceAll("\n\n", "<br/>")}

src/LazyImage.tsx

@@ -47,7 +47,7 @@ const LazyImage: (meta: LazyImageMeta) => Component<Props> =
 
     return (
       <div
-        class={cn(outer, $class)}
+        class={cn(_LazyImage_outer, $class)}
         style={{
           ...style,
           "--width": `${meta.width}`,
@@ -69,13 +69,13 @@ const LazyImage: (meta: LazyImageMeta) => Component<Props> =
     );
   };
 
-const outer = css`
+const _LazyImage_outer = css`
   width: 100%;
   container-type: inline-size;
   overflow: hidden;
   object-fit: contain;
   ${breakpoint("xs")} {
-    object-fit: cover !important;
+    object-fit: cover;
   }
 `;
 
@@ -88,11 +88,11 @@ const _LazyImage = css`
   --y_sf_px: calc((1 / var(--height)) * var(--h_limit) * 100);
   --sf_px: min(var(--x_sf_px), var(--y_sf_px));
   width: calc((var(--width) * var(--sf_px) / 100));
-  /* width: 80vw; */
-  height: calc((var(--height) * var(--sf_px) / 100));
+  /* width: inherit; */
+  height: min(100%, calc((var(--height) * var(--sf_px) / 100)));
   /* height: calc(var(--x_sf_px)); */
   /* height: 100cqw; */
-  /* background: red; */
+  object-fit: inherit;
 
   /* container-type: inline-size; */
 

src/about/AboutSite.tsx

@@ -99,6 +99,7 @@ const AboutSite: Component<Props> = (props) => {
 };
 
 const _AboutSite = css`
+  /* background: blue; */
   justify-items: start;
   grid-template:
     "picture name     name  emtpy" auto

src/app.tsx

@@ -1,6 +1,6 @@
 import "~/style/global.style";
 // the vite graph is generated before the babel plugin adds the imports, so we add it here
-import "~/LazyImage";
+// import "~/LazyImage";
 
 import { Meta, MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";