@marimo-team/frontend 0.19.8-dev21 → 0.19.8-dev23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/assets/gallery-page-DuDrhEq0.js +1 -0
  2. package/dist/assets/index-3CaNzO41.css +2 -0
  3. package/dist/assets/{index-U7La6ZBB.js → index-B1ViTbhO.js} +2 -2
  4. package/dist/index.html +2 -2
  5. package/package.json +1 -1
  6. package/src/components/pages/gallery-page.tsx +37 -6
  7. package/dist/assets/gallery-page-Yq7Go5FK.js +0 -1
  8. package/dist/assets/index-BTVKRPtt.css +0 -2
package/dist/index.html CHANGED
@@ -66,7 +66,7 @@
66
66
  <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
67
67
  <!-- /TODO -->
68
68
  <title>{{ title }}</title>
69
- <script type="module" crossorigin src="./assets/index-U7La6ZBB.js"></script>
69
+ <script type="module" crossorigin src="./assets/index-B1ViTbhO.js"></script>
70
70
  <link rel="modulepreload" crossorigin href="./assets/preload-helper-DItdS47A.js">
71
71
  <link rel="modulepreload" crossorigin href="./assets/clsx-D8GwTfvk.js">
72
72
  <link rel="modulepreload" crossorigin href="./assets/cn-BKtXLv3a.js">
@@ -257,7 +257,7 @@
257
257
  <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
258
258
  <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
259
259
  <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
260
- <link rel="stylesheet" crossorigin href="./assets/index-BTVKRPtt.css">
260
+ <link rel="stylesheet" crossorigin href="./assets/index-3CaNzO41.css">
261
261
  </head>
262
262
  <body>
263
263
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marimo-team/frontend",
3
- "version": "0.19.8-dev21",
3
+ "version": "0.19.8-dev23",
4
4
  "main": "dist/main.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",
package/src/components/pages/gallery-page.tsx CHANGED
@@ -33,6 +33,15 @@ const tabTarget = (path: string): string => {
33
33
  return `${getSessionId()}-${encodeURIComponent(path)}`;
34
34
  };
35
35
 
36
+ const isHttpsUrl = (value: string): boolean => {
37
+ try {
38
+ const url = new URL(value);
39
+ return url.protocol === "https:";
40
+ } catch {
41
+ return false;
42
+ }
43
+ };
44
+
36
45
  const SEARCH_THRESHOLD = 10;
37
46
 
38
47
  const GalleryPage: React.FC = () => {
@@ -43,10 +52,10 @@ const GalleryPage: React.FC = () => {
43
52
  [],
44
53
  );
45
54
  const workspace = response.data;
46
- const files = workspace?.files ?? [];
47
- const root = workspace?.root ?? "";
48
55
 
49
56
  const formattedFiles = useMemo(() => {
57
+ const files = workspace?.files ?? [];
58
+ const root = workspace?.root ?? "";
50
59
  return files
51
60
  .filter((file) => !file.isDirectory)
52
61
  .map((file) => {
@@ -54,17 +63,28 @@ const GalleryPage: React.FC = () => {
54
63
  root && Paths.isAbsolute(file.path) && file.path.startsWith(root)
55
64
  ? Paths.rest(file.path, root)
56
65
  : file.path;
57
- const title = titleCase(Paths.basename(relativePath));
66
+ const title =
67
+ file.opengraph?.title ?? titleCase(Paths.basename(relativePath));
58
68
  const subtitle = titleCase(Paths.dirname(relativePath));
69
+ const description = file.opengraph?.description ?? "";
70
+ const opengraphImage = file.opengraph?.image;
71
+ const thumbnailUrl =
72
+ opengraphImage && isHttpsUrl(opengraphImage)
73
+ ? opengraphImage
74
+ : asURL(
75
+ `/og/thumbnail?file=${encodeURIComponent(relativePath)}`,
76
+ ).toString();
59
77
  return {
60
78
  ...file,
61
79
  relativePath,
62
80
  title,
63
81
  subtitle,
82
+ description,
83
+ thumbnailUrl,
64
84
  };
65
85
  })
66
86
  .sort((a, b) => a.relativePath.localeCompare(b.relativePath));
67
- }, [files, root]);
87
+ }, [workspace?.files, workspace?.root]);
68
88
 
69
89
  const filteredFiles = useMemo(() => {
70
90
  if (!searchQuery) {
@@ -130,8 +150,14 @@ const GalleryPage: React.FC = () => {
130
150
  target={tabTarget(file.path)}
131
151
  className="no-underline"
132
152
  >
133
- <Card className="h-full hover:bg-accent/20 transition-colors">
134
- <CardContent className="p-6">
153
+ <Card className="h-full overflow-hidden hover:bg-accent/20 transition-colors">
154
+ <img
155
+ src={file.thumbnailUrl}
156
+ alt={file.title}
157
+ loading="lazy"
158
+ className="w-full aspect-1200/630 object-cover border-b border-border/60"
159
+ />
160
+ <CardContent className="p-6 pt-4">
135
161
  <div className="flex flex-col gap-1">
136
162
  {file.subtitle && (
137
163
  <div className="text-sm font-semibold text-muted-foreground">
@@ -141,6 +167,11 @@ const GalleryPage: React.FC = () => {
141
167
  <div className="text-lg font-medium">
142
168
  {file.title}
143
169
  </div>
170
+ {file.description && (
171
+ <div className="text-sm text-muted-foreground line-clamp-3 mt-1">
172
+ {file.description}
173
+ </div>
174
+ )}
144
175
  </div>
145
176
  </CardContent>
146
177
  </Card>
package/dist/assets/gallery-page-Yq7Go5FK.js DELETED
@@ -1 +0,0 @@
1
- import{s as x}from"./chunk-LvLJmgfZ.js";import"./useEvent-BhXAndur.js";import{t as v}from"./react-Bj1aDYRI.js";import"./react-dom-CSu739Rf.js";import"./compiler-runtime-B3qBwwSJ.js";import{t as b}from"./ErrorBoundary-B9Ifj8Jf.js";import{t as w}from"./jsx-runtime-ZmTK25f3.js";import{r as C}from"./requests-B4FYHTZl.js";import{t as u}from"./spinner-DA8-7wQv.js";import{lt as k,r as S}from"./input-DHHmNa19.js";import{n,t as P}from"./paths-Dfii2bN8.js";import{c as M,t as $}from"./session-fBtIbMpB.js";import"./Combination-izwufzWe.js";import{r as y}from"./errors-CPlNr33a.js";import{t as p}from"./error-banner-Dlrzo_Ay.js";import{n as z}from"./useAsyncData-BMGLSTg8.js";import{n as L,t as U}from"./card-DdlNjkEA.js";var c=x(v(),1),r=x(w(),1),A=s=>s.charAt(0).toUpperCase()+s.slice(1).toLowerCase(),g=s=>{let o=P.guessDeliminator(s).deliminator;return s.replace(/\.[^./]+$/,"").split(o).filter(Boolean).map(d=>d.split(/[_-]/).map(A).join(" ")).join(" > ")},D=s=>`${$()}-${encodeURIComponent(s)}`,I=10,R=()=>{let{getWorkspaceFiles:s}=C(),[o,d]=(0,c.useState)(""),l=z(()=>s({includeMarkdown:!1}),[]),a=l.data,h=(a==null?void 0:a.files)??[],i=(a==null?void 0:a.root)??"",m=(0,c.useMemo)(()=>h.filter(e=>!e.isDirectory).map(e=>{let t=i&&n.isAbsolute(e.path)&&e.path.startsWith(i)?n.rest(e.path,i):e.path,j=g(n.basename(t)),N=g(n.dirname(t));return{...e,relativePath:t,title:j,subtitle:N}}).sort((e,t)=>e.relativePath.localeCompare(t.relativePath)),[h,i]),f=(0,c.useMemo)(()=>{if(!o)return m;let e=o.toLowerCase();return m.filter(t=>t.title.toLowerCase().includes(e))},[m,o]);return l.isPending?(0,r.jsx)(u,{centered:!0,size:"xlarge",className:"mt-6"}):l.error?(0,r.jsx)(p,{kind:"danger",className:"rounded p-4",children:y(l.error)}):a?(0,r.jsx)(c.Suspense,{children:(0,r.jsxs)("div",{className:"flex flex-col gap-6 max-w-6xl container pt-5 pb-20 z-10",children:[(0,r.jsx)("img",{src:"logo.png",alt:"marimo logo",className:"w-48 mb-2"}),(0,r.jsx)(b,{children:(0,r.jsxs)("div",{className:"flex flex-col gap-2",children:[a.hasMore&&(0,r.jsxs)(p,{kind:"warn",className:"rounded p-4",children:["Showing first ",a.fileCount," files. Your workspace has more files."]}),m.length>I&&(0,r.jsx)(S,{id:"search",value:o,icon:(0,r.jsx)(k,{className:"h-4 w-4"}),onChange:e=>d(e.target.value),placeholder:"Search",rootClassName:"mb-3",className:"mb-0 border-border"}),f.length===0?(0,r.jsx)(p,{kind:"warn",className:"rounded p-4",children:"No marimo apps found."}):(0,r.jsx)("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",children:f.map(e=>(0,r.jsx)("a",{href:M(`?file=${encodeURIComponent(e.relativePath)}`).toString(),target:D(e.path),className:"no-underline",children:(0,r.jsx)(U,{className:"h-full hover:bg-accent/20 transition-colors",children:(0,r.jsx)(L,{className:"p-6",children:(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[e.subtitle&&(0,r.jsx)("div",{className:"text-sm font-semibold text-muted-foreground",children:e.subtitle}),(0,r.jsx)("div",{className:"text-lg font-medium",children:e.title})]})})})},e.path))})]})})]})}):(0,r.jsx)(u,{centered:!0,size:"xlarge",className:"mt-6"})};export{R as default};