chore: setup https for local development

docker-compose.reverse-proxy.yml

@@ -4,7 +4,8 @@ services:
     image: nginxproxy/nginx-proxy:1.5.1
     ports:
       - "80:80"
-      # - 127.0.0.1:443:443
+      - "443:443"
+      # - "127.0.0.1:443:443"
     volumes:
       - ./resources/reverse-proxy/default.conf:/etc/nginx/conf.d/custom-settings.conf:ro
       - ./_data/html:/usr/share/nginx/html:rw
@@ -78,9 +79,11 @@ services:
       DEBUG: true
       # REBUILD: true
       VIRTUAL_HOST: localai.liexp.dev,localai.lies.exposed
-      VIRTUAL_PORT: 8080
-      LOCALAI_CORS: "true"
+      VIRTUAL_PORT: 443
+      VIRTUAL_PROTO: https
+      LOCALAI_CORS: 1
       LOCALAI_CORS_ALLOW_ORIGINS: "http://admin.liexp.dev,https://alpha.lies.exposed"
+      CERT: liexp.dev
     volumes:
       - ./models:/build/models:cached
     devices:

docker-compose.yml

@@ -35,7 +35,7 @@ services:
       MINIO_ROOT_USER: space-access-key-id
       MINIO_ROOT_PASSWORD: space-access-key-secret-id
       VIRTUAL_HOST: fra1.space.liexp.dev
-      VIRTUAL_PORT: 9000
+      VIRTUAL_PORT: 443
     volumes:
       - space-data:/data
     restart: on-failure
@@ -60,7 +60,8 @@ services:
       DEBUG: "@liexp*"
       DB_HOST: db.liexp.dev
       DB_PORT: 5432
-      SERVER_PORT: 80
+      SERVER_PORT: 443
+      CERT: liexp.dev
     depends_on:
       - db.liexp.dev
       - fra1.space.liexp.dev
@@ -73,7 +74,7 @@ services:
     stdin_open: true
     working_dir: /usr/src/app/services/api
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://api.liexp.dev/v1/healthcheck"]
+      test: ["CMD", "curl", "-f", "http://localhost:443/v1/healthcheck"]
       interval: 10s
       timeout: 20s
       retries: 10
@@ -91,6 +92,8 @@ services:
       dockerfile: web.Dockerfile
     env_file:
       - ./services/web/.env
+    environment:
+      CERT: liexp.dev
     ports:
       # hmr port
       - "127.0.0.1:24678:24678"
@@ -123,6 +126,8 @@ services:
       dockerfile: adminWeb.Dockerfile
     env_file:
       - ./services/admin-web/.env
+    environment:
+      CERT: liexp.dev
     volumes:
       - admin-node-modules:/usr/src/app/node_modules
       - ./tsconfig.json:/usr/src/app/tsconfig.json

package.json

@@ -57,7 +57,7 @@
     "typescript-eslint": "^7.18.0",
     "vitest": "^2.0.5"
   },
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.7.0+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf",
   "engines": {
     "node": ">= 20",
     "npm": "please use pnpm >= 9",

packages/@liexp/backend/package.json

@@ -74,5 +74,5 @@
     "wink-nlp": "^2.3.0",
     "wink-nlp-utils": "^2.1.0"
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@9.7.0"
 }

packages/@liexp/core/package.json

@@ -59,5 +59,5 @@
     "uuid": "^9.0.1",
     "vite": "^5.2.13"
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@9.7.0"
 }

packages/@liexp/shared/package.json

@@ -77,5 +77,5 @@
     "react-dom": "^18",
     "sharp": "*"
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@9.7.0"
 }

packages/@liexp/test/package.json

@@ -34,5 +34,5 @@
   "peerDependencies": {
     "debug": "*"
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@9.7.0"
 }

packages/@liexp/ui/package.json

@@ -27,9 +27,9 @@
     "src/**/*.(ts|tsx|js|jsx)": "eslint --fix"
   },
   "dependencies": {
-    "@blocknote/core": "^0.15.3",
-    "@blocknote/mantine": "^0.15.3",
-    "@blocknote/react": "^0.15.3",
+    "@blocknote/core": "^0.15.4",
+    "@blocknote/mantine": "^0.15.4",
+    "@blocknote/react": "^0.15.4",
     "@emotion/cache": "^11.13.1",
     "@emotion/css": "^11.13.0",
     "@emotion/react": "^11.13.0",
@@ -148,5 +148,5 @@
     "typescript": "^5.4.5",
     "vitest-mock-extended": "^2.0.0"
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@9.7.0"
 }

packages/@liexp/ui/src/components/Cards/Events/EventCard.tsx

@@ -99,7 +99,7 @@ const EventCard: React.FC<EventCardProps> = ({
                     overflow: "hidden",
                   }}
                 >
-                  <BNEditor content={event.excerpt as any} readOnly />
+                  <BNEditor content={event.excerpt} readOnly />
                 </Box>
               ) : null}
 

packages/@liexp/ui/src/components/Cards/Events/EventCardGrid.tsx

@@ -7,7 +7,7 @@ import { styled } from "../../../theme/index.js";
 import { Grid } from "../../mui/index.js";
 import EventCard, { type EventCardProps } from "./EventCard.js";
 
-interface EventCardGridProps {
+export interface EventCardGridProps {
   events: Events.SearchEvent.SearchEvent[];
   onItemClick: (e: Events.SearchEvent.SearchEvent) => void;
   showItemRelations?: boolean;

packages/@liexp/ui/src/components/Cards/Events/EventSlimCard.tsx

@@ -0,0 +1,109 @@
+// import { getRelationIds } from "@liexp/shared/lib/helpers/event/getEventRelationIds.js";
+import { getTitle } from "@liexp/shared/lib/helpers/event/index.js";
+import { type Events } from "@liexp/shared/lib/io/http/index.js";
+import { formatDate } from "@liexp/shared/lib/utils/date.utils.js";
+import { Stack } from "@mui/system";
+// import { useQuery } from "@tanstack/react-query";
+import { parseISO } from "date-fns";
+import * as React from "react";
+import { BNEditor } from "../../Common/BlockNote/index.js";
+import { EventIcon } from "../../Common/Icons/index.js";
+// import QueriesRenderer from "../../QueriesRenderer.js";
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  type CardProps,
+} from "../../mui/index.js";
+
+export interface EventSlimCardProps extends CardProps {
+  event: Events.Event;
+  defaultImage: string;
+  showMedia?: boolean;
+  layout?: "vertical" | "horizontal";
+  onEventClick?: (e: Events.Event) => void;
+}
+
+const EventSlimCard: React.FC<EventSlimCardProps> = ({
+  event,
+  showMedia = true,
+  onEventClick,
+  defaultImage,
+  layout = "vertical",
+  ...props
+}) => {
+  // const { media } = getRelationIds(event);
+  const title = getTitle(event, {
+    actors: [],
+    groups: [],
+    media: [],
+    keywords: [],
+    groupsMembers: [],
+    areas: [],
+    links: [],
+  });
+
+  const date =
+    typeof event.date === "string" ? parseISO(event.date as any) : event.date;
+
+  const handleClick = onEventClick
+    ? () => {
+        onEventClick(event);
+      }
+    : undefined;
+
+  const isVertical = layout === "vertical";
+  return (
+    <Card onClick={handleClick} {...props}>
+      <CardActionArea>
+        <Stack
+          direction={isVertical ? "column" : "row"}
+          alignItems={"flex-start"}
+          width={"100%"}
+        >
+          {showMedia ? (
+            <Stack
+              display="flex"
+              width={isVertical ? "100%" : "150px"}
+              direction={"row"}
+            >
+              <CardMedia
+                component="img"
+                image={defaultImage}
+                style={{
+                  height: props.style?.maxHeight ?? 150,
+                  width: isVertical ? "100%" : 150,
+                }}
+              />
+            </Stack>
+          ) : null}
+          <Stack direction={"column"}>
+            <CardHeader
+              avatar={<EventIcon size="2x" type={event.type} />}
+              title={title}
+              subheader={formatDate(date)}
+            />
+
+            <CardContent>
+              {event.excerpt ? (
+                <Box
+                  style={{
+                    maxHeight: 100,
+                    overflow: "hidden",
+                  }}
+                >
+                  <BNEditor content={event.excerpt} readOnly />
+                </Box>
+              ) : null}
+            </CardContent>
+          </Stack>
+        </Stack>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default EventSlimCard;

packages/@liexp/ui/src/components/Common/BlockNote/Editor.tsx

@@ -22,16 +22,18 @@ import { toInitialContent } from "./utils/utils.js";
 
 const getCustomSlashMenuItems = (
   editor: BNESchemaEditor,
-): DefaultReactSuggestionItem[] => [
-  ...getDefaultReactSlashMenuItems(editor),
-  insertMedia(editor),
-  relationItem(editor),
-  groupItem(editor),
-  actorItem(editor),
-  areaItem(editor),
-  keywordItem(editor),
-  insertEvent(editor),
-];
+): DefaultReactSuggestionItem[] => {
+  return [
+    ...getDefaultReactSlashMenuItems(editor),
+    insertMedia(editor),
+    relationItem(editor),
+    groupItem(editor),
+    actorItem(editor),
+    areaItem(editor),
+    keywordItem(editor),
+    insertEvent(editor),
+  ];
+};
 
 export interface BNEditorProps {
   readOnly: boolean;
@@ -65,6 +67,11 @@ export const BNEditor: React.FC<BNEditorProps> = ({
     ...initialContent,
   }) as BNESchemaEditor;
 
+  const slashMenuItems = React.useMemo(
+    () => getCustomSlashMenuItems(editor),
+    [editor],
+  );
+
   return (
     <div style={{ height: "100%", width: "100%" }}>
       <BlockNoteEditorContext.Provider value={editor}>
@@ -82,7 +89,7 @@ export const BNEditor: React.FC<BNEditorProps> = ({
             // Replaces the default Slash Menu items with our custom ones.
             getItems={async (query) => {
               return pipe(
-                getCustomSlashMenuItems(editor),
+                slashMenuItems,
                 (suggestions) => filterSuggestionItems(suggestions, query),
                 (items) => Promise.resolve(items),
               );

packages/@liexp/ui/src/components/Common/BlockNote/plugins/EditMenu/EditMenu.tsx

@@ -44,7 +44,7 @@ export const EditMenu: React.FC<
                 onClick();
               }}
               style={{
-                marginRight: 16,
+                marginRight: 8,
               }}
             >
               <Icons.DragIndicator fontSize={"small"} />

packages/@liexp/ui/src/components/Common/BlockNote/plugins/block/EventBlock.plugin.tsx

@@ -1,6 +1,7 @@
 import { insertOrUpdateBlock } from "@blocknote/core";
 import { createReactBlockSpec } from "@blocknote/react";
 import { type Events } from "@liexp/shared/lib/io/http/index.js";
+import { uuid } from "@liexp/shared/lib/utils/uuid.js";
 import * as React from "react";
 import EventsBox from "../../../../../containers/EventsBox.js";
 import { AutocompleteEventInput } from "../../../../Input/AutocompleteEventInput.js";
@@ -9,15 +10,18 @@ import { EventIcon } from "../../../Icons/index.js";
 import { type BNESchemaEditor } from "../../EditorSchema.js";
 import { EditMenu } from "../EditMenu/EditMenu.js";
 
+const DEFAULT_ID = "missing-id";
+
 // Slash menu item to insert an Event block
 export const insertEvent = (editor: BNESchemaEditor) => ({
   title: "Event",
   subtext: "Insert an event block",
   onItemClick: () => {
     insertOrUpdateBlock(editor, {
       type: "event",
+      id: uuid(),
       props: {
-        id: "",
+        id: DEFAULT_ID,
       },
     });
   },
@@ -33,7 +37,7 @@ export const EventBlockPluginControl: React.FC<{
 }> = ({ data, onChange, onRemove: remove, ...props }) => {
   return (
     <Stack
-      style={{ height: 350 }}
+      style={{ height: 200 }}
       direction={"row"}
       alignItems={"center"}
       justifyItems={"flex-start"}
@@ -80,7 +84,7 @@ export const eventBlock = createReactBlockSpec(
     type: "event",
     propSchema: {
       id: {
-        default: "",
+        default: DEFAULT_ID,
       },
     },
     content: "inline",
@@ -109,24 +113,17 @@ export const eventBlock = createReactBlockSpec(
               id: newId,
             },
           });
-        } else {
-          insertOrUpdateBlock(editor, {
-            type: "event",
-            props: {
-              id: newId,
-            },
-          });
         }
       };
 
       return (
         <EditMenu
           editor={editor as any}
           onClick={() => {
-            onChange("");
+            onChange(DEFAULT_ID);
           }}
         >
-          {id === "" ? (
+          {id === DEFAULT_ID ? (
             <EventBlockPluginControl
               onRemove={onRemove}
               data={{ events: [] }}