Fix CI

.github/workflows/CI.yml

@@ -32,7 +32,7 @@ jobs:
       - name: build
         run: yarn build
         env:
-          BASE_PATH: /blog/
+          BASE_PATH: /blog
 
       - name: upload artifact
         uses: actions/[email protected]

src/BlogIndex.tsx

@@ -1,10 +1,9 @@
-import { JSX, Component } from "solid-js";
 import { css } from "@linaria/core";
-import cn from "classnames";
 import { Title } from "@solidjs/meta";
-import { For, NoHydration } from "solid-js/web";
-import Text from "~/atoms/Text.md";
-import Counter from "~/components/Counter";
+import cn from "classnames";
+import { Component, JSX } from "solid-js";
+import { For } from "solid-js/web";
+import { config } from "~/config";
 import { getArticles } from "~/ssg/getArticles";
 
 const list = getArticles();
@@ -16,12 +15,12 @@ interface Props {
 const BlogIndex: Component<Props> = (props) => {
   return (
     <main class={cn(_BlogIndex)}>
-      <Title>Hello World</Title>
+      <Title>Blog of a programming rabbit</Title>
       <ul class="mb-8 text-colors-secondary-800">
         <For each={list}>
           {(item) => (
             <li>
-              <a href={item.url}>{item.title}</a>
+              <a href={`${config.base}${item.url}`}>{item.title}</a>
             </li>
           )}
         </For>

src/GallerySite.tsx

@@ -2,6 +2,7 @@ import { Dialog } from "@kobalte/core";
 import { css } from "@linaria/core";
 import cn from "classnames";
 import { JSX } from "solid-js";
+import { config } from "~/config";
 import { getGalleryPictures } from "~/ssg/getGalleryPictures";
 import { breakpoint, breakpointUntil } from "~/style/commonStyle";
 
@@ -31,7 +32,7 @@ const Card: Component<any> = (props: any) => {
             class={cn(
               "absolute top-0 left-0 h-full w-full object-cover overflow-hidden",
             )}
-            src={picture.thumbnail}
+            src={`${config.base}${picture.thumbnail}`}
             alt="Gallery picture"
           />
         </Dialog.Trigger>
@@ -47,7 +48,7 @@ const Card: Component<any> = (props: any) => {
                   class={cn(
                     "overflow-hidden max-w-[90vw] max-h-[90vh] object-contain",
                   )}
-                  src={picture.picture}
+                  src={`${config.base}${picture.picture}`}
                   alt="Gallery picture"
                 />
               </Dialog.CloseButton>

src/Header.tsx

@@ -1,9 +1,10 @@
-import { JSX, Component } from "solid-js";
 import { css } from "@linaria/core";
 import cn from "classnames";
-import LogoSVG from "../assets/logo.svg?component-solid";
+import { Component, JSX } from "solid-js";
+import { config } from "~/config";
 import { color, heading1Text } from "~/style/commonStyle";
 import { heading1TextHeight } from "~/style/textStylesTS";
+import LogoSVG from "../assets/logo.svg?component-solid";
 
 interface Props {
   children?: JSX.Element;
@@ -16,13 +17,16 @@ const Header: Component<Props> = (props) => {
     >
       <LogoSVG class={cn(Logo, "w-12")} viewBox="0 0 60 94.564" />
 
-      <a class="text-h1 text-colors-text-900a underline" href="/">
+      <a
+        class="text-h1 text-colors-text-900a underline"
+        href={`${config.base}/`}
+      >
         Blog
       </a>
-      <a class={foo} href="/gallery">
+      <a class={foo} href={`${config.base}/gallery`}>
         Gallery
       </a>
-      <a class="text-h1 text-colors-text-300a" href="/about">
+      <a class="text-h1 text-colors-text-300a" href={`${config.base}/about`}>
         About
       </a>
     </nav>

src/app.tsx

@@ -1,15 +1,14 @@
-import { css } from "@linaria/core";
 import { MetaProvider, Title } from "@solidjs/meta";
 import { RouteDefinition, Router } from "@solidjs/router";
 import { Suspense, lazy } from "solid-js";
 import { config } from "~/config";
 
+import Header from "~/Header";
 import "~/style/global.style";
 import "./app.css";
-import Header from "~/Header";
 
+const BlogIndex = lazy(() => import("~/BlogIndex"));
 const GallerySite = lazy(() => import("~/GallerySite"));
-const Foo = lazy(() => import("~/routes/index"));
 
 const articlesImportMap = import.meta.glob("./articles/*.mdx");
 const getArticleComponent = (name: string) =>
@@ -31,13 +30,16 @@ export default function App() {
     >
       {
         [
-          { path: "/", component: () => <Foo /> },
+          { path: "/", component: () => <BlogIndex /> },
           { path: "/gallery", component: () => <GallerySite /> },
           {
             path: "/articles/:name",
             component: (p) => {
               // router bug: 'name' not in 'p', update when this is fixed
-              const name = p.location.pathname.replace("/articles/", "");
+              const name = p.location.pathname.replace(
+                `${config.base}/articles/`,
+                "",
+              );
               const Article = lazy(getArticleComponent(name) as any);
               return (
                 <Article
@@ -61,7 +63,3 @@ export default function App() {
     </Router>
   );
 }
-
-const f = css`
-  background: red;
-`;