Small adjustments for responsiveness

Dockerfile

@@ -15,9 +15,15 @@ COPY package.json .
 COPY package-lock.json* .
 RUN npm ci
 
-FROM node:22-slim
+FROM node:22-slim AS quartz
 WORKDIR /usr/src/app
 COPY --from=builder /usr/src/app/ /usr/src/app/
 COPY . .
 COPY --from=convert /usr/src/app/ /usr/src/app/content/
-CMD ["npx", "quartz", "build", "--serve"]
+RUN npx quartz build
+
+FROM nginx:latest
+WORKDIR /usr/share/nginx/html
+COPY --from=quartz /usr/src/app/public/ /usr/share/nginx/html/
+WORKDIR /etc/nginx/
+COPY custom/nginx/default.conf /etc/nginx/conf.d/

custom/compose.yaml

@@ -0,0 +1,7 @@
+services:
+
+  web:
+    image: quartz-jpg
+    container_name: quartz-jpg
+    ports:
+    - "8080:80"

custom/docker-compose.yml

@@ -1,12 +0,0 @@
-services:
-  quartz:
-    image: quartz-jpg
-    build:
-      context: .
-      dockerfile: Dockerfile
-    environment:
-      NODE_ENV: production
-    container_name: quartz-jpg-container
-    restart: always
-    ports:
-      - 8080:8080

custom/init-repos.sh

@@ -0,0 +1,3 @@
+git remote add content https://git.marchal.dev/keb/jpg-content.git
+git remote add convert-furigana https://git.marchal.dev/keb/jpg-convert-furigana.git
+git remote add convert-usage https://git.marchal.dev/keb/jpg-convert-usage.git

custom/nginx/default.conf

@@ -0,0 +1,13 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    root   /usr/share/nginx/html;
+    index  index.html
+    error_page 404 /404.html;
+
+    location / {
+        try_files $uri $uri.html $uri/ =404;
+    }
+}

quartz.config.ts

@@ -70,7 +70,7 @@ const config: QuartzConfig = {
       }),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
-      Plugin.Latex({ renderEngine: "katex" }),
+      // Plugin.Latex({ renderEngine: "katex" }),
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [
@@ -106,7 +106,7 @@ const config: QuartzConfig = {
       Plugin.TagPage(),
       Plugin.ContentIndex({
         enableSiteMap: true,
-        enableRSS: true,
+        enableRSS: false,
       }),
       Plugin.Assets(),
       Plugin.Static(),

quartz.layout.ts

@@ -6,15 +6,22 @@ export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
   header: [],
   afterBody: [
+    Component.DesktopOnly(
       Component.Footer({
         links: {
           "Théo Marchal": "https://theo.marchal.dev"
         }
       })
+    )
   ],
-  footer: Component.Flex({
-    components:[]
-  }),
+  footer: 
+    Component.MobileOnly(
+      Component.Footer({
+        links: {
+          "Théo Marchal": "https://theo.marchal.dev"
+        }
+      })
+    ),
 }
 
 // components for pages that display a single page (e.g. a single note)
@@ -29,22 +36,21 @@ export const defaultContentPageLayout: PageLayout = {
 
   left: [
     Component.PageTitle(),
-
-    Component.MobileOnly(Component.Spacer()),
-    Component.MobileOnly(Component.Flex({
-      components: [
-        {
-          Component: Component.Search(),
-          grow: true,
-        },
-        { Component: Component.Darkmode() },
-      ]
-    })),
-
     Component.Explorer( { folderDefaultState: "open" } ),
   ],
 
   right: [
+
+    Component.MobileOnly(Component.Flex({
+      components: [
+        { Component: Component.Darkmode() },
+        {
+          Component: Component.Search(),
+          grow: true,
+        },
+      ]
+    })),
+
     Component.DesktopOnly(Component.Darkmode()),
     Component.DesktopOnly(Component.Search()),
     Component.TableOfContents(),
@@ -63,22 +69,21 @@ export const defaultListPageLayout: PageLayout = {
 
   left: [
     Component.PageTitle(),
-
-    Component.MobileOnly(Component.Spacer()),
-    Component.MobileOnly(Component.Flex({
-      components: [
-        {
-          Component: Component.Search(),
-          grow: true,
-        },
-        { Component: Component.Darkmode() },
-      ]
-    })),
-
     Component.Explorer( { folderDefaultState: "open" } ),
   ],
 
   right: [
+
+    Component.MobileOnly(Component.Flex({
+      components: [
+        { Component: Component.Darkmode() },
+        {
+          Component: Component.Search(),
+          grow: true,
+        },
+      ]
+    })),
+
     Component.DesktopOnly(Component.Darkmode()),
     Component.DesktopOnly(Component.Search()),
     Component.TableOfContents(),

quartz/styles/custom.scss

@@ -157,6 +157,10 @@ table {
                 margin: 1rem auto;
             }
 
+            .page-footer {
+                margin-bottom: 0.5rem;
+            }
+
             footer {
                 margin-bottom: 1rem;
 
@@ -188,6 +192,13 @@ table {
                     margin-left: unset;
                     margin-right: unset;
                 }
+                @media all and ($medDesktop) {
+                    width: 750px;
+                    min-width: unset;
+                    max-width: unset;
+                    margin-left: unset;
+                    margin-right: unset;
+                }
                 @media all and ($maxDesktop) {
                     width: 950px;
                     min-width: unset;
@@ -203,6 +214,10 @@ table {
                     padding-left: 1.5rem;
                     padding-right: 1.5rem;
                 }
+                @media all and ($desktop) {
+                    padding-left: 1.8rem;
+                    padding-right: 1.8rem;
+                }
                 @media all and ($maxDesktop) {
                     padding-left: 3.5rem;
                     padding-right: 3.5rem;
@@ -311,6 +326,7 @@ table {
                 flex-direction: row;
                 flex-wrap: wrap;
                 padding-top: 1rem;
+                height: fit-content;
 
                 @media all and ($desktop)
                 {
@@ -342,7 +358,7 @@ table {
                     height: fit-content;
                     min-width: fit-content;
                     max-width: 14rem;
-                    flex-grow: .3;
+                    flex-grow: 1;
                     width: 10rem;
                 }
 
@@ -362,7 +378,11 @@ table {
     @media all and ($mobile) {
 
         h1 {
-            margin-top: 0;
+            margin-top: 1rem;
+        }
+
+        .center hr {
+            margin-bottom: 1rem;
         }
 
         .darkmode {
@@ -370,9 +390,8 @@ table {
         }
 
         footer {
-            margin-bottom: 0;
+            margin-bottom: 0.5em;
         }
-
     }
 }
 

quartz/styles/variables.scss

@@ -15,6 +15,7 @@ $breakpoints: (
 $mobile: "(max-width: #{map.get($breakpoints, mobile)})";
 $tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})";
 $desktop: "(min-width: #{map.get($breakpoints, desktop)})";
+$medDesktop: "(min-width: 1420px)";
 $maxDesktop: "(min-width: 1630px)";
 
 $pageWidth: #{map.get($breakpoints, mobile)};