Hugging Face's logo

Spaces:
OpenEvals
/
evaluation-guidebook
Running

App Files Community
2
tfrere HF Staff commited on
Commit
280ef28
·
1 Parent(s): f66b44f

update

Browse files
Files changed (2) hide show
  1. app/src/pages/dataviz.astro +73 -60
  2. nginx.conf +19 -1
app/src/pages/dataviz.astro CHANGED
@@ -62,22 +62,7 @@ const allEmbeds = loadEmbedsFromMDX();
62
  <body class="dataviz-page">
63
  <ThemeToggle />
64
 
65
- <div class="loading-spinner">
66
- <svg class="spinner" viewBox="0 0 50 50">
67
- <circle
68
- class="path"
69
- cx="25"
70
- cy="25"
71
- r="20"
72
- fill="none"
73
- stroke-width="4"></circle>
74
- </svg>
75
- </div>
76
-
77
- <main
78
- class="dataviz-content"
79
- style="max-width: 1400px; margin: 0 auto; padding: 20px 20px; opacity: 0; visibility: hidden;"
80
- >
81
  <header class="dataviz-header">
82
  <a href="/" class="back-arrow" aria-label="Back to article">
83
  <svg
@@ -103,34 +88,51 @@ const allEmbeds = loadEmbedsFromMDX();
103
  </div>
104
  </header>
105
 
106
- {
107
- allEmbeds.length > 0 ? (
108
- <section class="dataviz-grid">
109
- {allEmbeds
110
- .filter((embed) => !embed.skipGallery)
111
- .map((embed) => (
112
- <div
113
- class={`dataviz-card${embed.wide ? " dataviz-card--wide" : ""}`}
114
- >
115
- <HtmlEmbed
116
- src={embed.src}
117
- title={embed.title}
118
- desc={embed.desc}
119
- frameless={false}
120
- data={embed.data}
121
- config={embed.config}
122
- />
123
- </div>
124
- ))}
125
- </section>
126
- ) : (
127
- <div style="text-align: center; padding: 60px 20px;">
128
- <p style="font-size: 1.2rem; color: var(--muted-color);">
129
- No embeds found in the content.
130
- </p>
131
- </div>
132
- )
133
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  </main>
135
 
136
  <script>
@@ -145,7 +147,7 @@ const allEmbeds = loadEmbedsFromMDX();
145
  contentShown = true;
146
 
147
  const spinner = document.querySelector(".loading-spinner");
148
- const content = document.querySelector(".dataviz-content");
149
 
150
  if (spinner) {
151
  spinner.style.opacity = "0";
@@ -154,10 +156,10 @@ const allEmbeds = loadEmbedsFromMDX();
154
  }, 300);
155
  }
156
 
157
- if (content) {
158
- content.style.visibility = "visible";
159
- content.style.opacity = "1";
160
- content.style.transition = "opacity 0.3s ease";
161
  }
162
 
163
  console.log("✨ Content displayed");
@@ -331,29 +333,35 @@ const allEmbeds = loadEmbedsFromMDX();
331
  </script>
332
 
333
  <style is:global>
 
 
 
 
 
 
334
  /* Loading spinner */
335
  .loading-spinner {
336
- position: fixed;
337
- top: 0;
338
- left: 0;
339
- width: 100%;
340
- height: 100vh;
341
  display: flex;
342
  align-items: center;
343
  justify-content: center;
344
- background: var(--page-bg);
345
- z-index: 9999;
346
  transition: opacity 0.3s ease;
 
 
347
  }
348
 
349
  .spinner {
350
- width: 50px;
351
- height: 50px;
 
352
  animation: rotate 2s linear infinite;
353
  }
354
 
355
  .spinner .path {
356
- stroke: var(--primary-color);
357
  stroke-linecap: round;
358
  animation: dash 1.5s ease-in-out infinite;
359
  }
@@ -385,6 +393,11 @@ const allEmbeds = loadEmbedsFromMDX();
385
  right: var(--spacing-3);
386
  }
387
 
 
 
 
 
 
388
  .dataviz-header {
389
  display: flex;
390
  align-items: flex-start;
@@ -392,7 +405,7 @@ const allEmbeds = loadEmbedsFromMDX();
392
  margin-bottom: 0;
393
  padding-top: 0px;
394
  padding-bottom: 16px;
395
- padding-left: 16px;
396
  max-width: 100%;
397
  }
398
 
 
62
  <body class="dataviz-page">
63
  <ThemeToggle />
64
 
65
+ <main class="dataviz-content">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <header class="dataviz-header">
67
  <a href="/" class="back-arrow" aria-label="Back to article">
68
  <svg
 
88
  </div>
89
  </header>
90
 
91
+ <div class="dataviz-grid-wrapper">
92
+ <div class="loading-spinner">
93
+ <svg class="spinner" viewBox="0 0 50 50">
94
+ <circle
95
+ class="path"
96
+ cx="25"
97
+ cy="25"
98
+ r="20"
99
+ fill="none"
100
+ stroke-width="4"></circle>
101
+ </svg>
102
+ </div>
103
+
104
+ {
105
+ allEmbeds.length > 0 ? (
106
+ <section
107
+ class="dataviz-grid"
108
+ style="opacity: 0; visibility: hidden;"
109
+ >
110
+ {allEmbeds
111
+ .filter((embed) => !embed.skipGallery)
112
+ .map((embed) => (
113
+ <div
114
+ class={`dataviz-card${embed.wide ? " dataviz-card--wide" : ""}`}
115
+ >
116
+ <HtmlEmbed
117
+ src={embed.src}
118
+ title={embed.title}
119
+ desc={embed.desc}
120
+ frameless={false}
121
+ data={embed.data}
122
+ config={embed.config}
123
+ />
124
+ </div>
125
+ ))}
126
+ </section>
127
+ ) : (
128
+ <div style="text-align: center; padding: 60px 20px;">
129
+ <p style="font-size: 1.2rem; color: var(--muted-color);">
130
+ No embeds found in the content.
131
+ </p>
132
+ </div>
133
+ )
134
+ }
135
+ </div>
136
  </main>
137
 
138
  <script>
 
147
  contentShown = true;
148
 
149
  const spinner = document.querySelector(".loading-spinner");
150
+ const grid = document.querySelector(".dataviz-grid");
151
 
152
  if (spinner) {
153
  spinner.style.opacity = "0";
 
156
  }, 300);
157
  }
158
 
159
+ if (grid) {
160
+ grid.style.visibility = "visible";
161
+ grid.style.opacity = "1";
162
+ grid.style.transition = "opacity 0.3s ease";
163
  }
164
 
165
  console.log("✨ Content displayed");
 
333
  </script>
334
 
335
  <style is:global>
336
+ /* Grid wrapper for spinner positioning */
337
+ .dataviz-grid-wrapper {
338
+ position: relative;
339
+ min-height: 150px;
340
+ }
341
+
342
  /* Loading spinner */
343
  .loading-spinner {
344
+ position: absolute;
345
+ top: 50%;
346
+ left: 50%;
347
+ transform: translate(-50%, -50%);
 
348
  display: flex;
349
  align-items: center;
350
  justify-content: center;
 
 
351
  transition: opacity 0.3s ease;
352
+ pointer-events: none;
353
+ z-index: 10;
354
  }
355
 
356
  .spinner {
357
+ width: 28px;
358
+ height: 28px;
359
+ opacity: 0.3;
360
  animation: rotate 2s linear infinite;
361
  }
362
 
363
  .spinner .path {
364
+ stroke: var(--muted-color);
365
  stroke-linecap: round;
366
  animation: dash 1.5s ease-in-out infinite;
367
  }
 
393
  right: var(--spacing-3);
394
  }
395
 
396
+ .dataviz-content {
397
+ width: 100%;
398
+ padding: 20px;
399
+ }
400
+
401
  .dataviz-header {
402
  display: flex;
403
  align-items: flex-start;
 
405
  margin-bottom: 0;
406
  padding-top: 0px;
407
  padding-bottom: 16px;
408
+ padding-left: 0;
409
  max-width: 100%;
410
  }
411
 
nginx.conf CHANGED
@@ -51,8 +51,26 @@ http {
51
  add_header Cache-Control "public, max-age=2592000, immutable";
52
  }
53
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  location / {
55
- try_files $uri $uri/ /index.html;
56
  }
57
  }
58
  }
 
51
  add_header Cache-Control "public, max-age=2592000, immutable";
52
  }
53
 
54
+ # Specific routes for pages
55
+ location = /dataviz {
56
+ try_files /dataviz/index.html =404;
57
+ }
58
+
59
+ location /dataviz/ {
60
+ try_files $uri $uri/index.html =404;
61
+ }
62
+
63
+ location = /trackio {
64
+ try_files /trackio/index.html =404;
65
+ }
66
+
67
+ location /trackio/ {
68
+ try_files $uri $uri/index.html =404;
69
+ }
70
+
71
+ # Default fallback
72
  location / {
73
+ try_files $uri $uri/ $uri/index.html /index.html;
74
  }
75
  }
76
  }