Merge pull request #2544 from exadel-inc/feat/site-presentation-style…

…s-basis refactor(site): add presentation draft
exadel-inc · Aug 13, 2024 · 8557630 · 8557630
2 parents bb9ceea + 43bc7c1
commit 8557630
Show file tree

Hide file tree

Showing 48 changed files with 1,185 additions and 10 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -12,3 +12,6 @@ node_modules
 # Submodule output
 /site/dist
 /eslint/dist
+
+# Site build configuration
+/site/webpack.config.js
diff --git a/site/package.json b/site/package.json
@@ -10,22 +10,19 @@
   },
   "scripts": {
     "start": "npm run clean && concurrently --kill-others \"npm run watch:lib\" \"npm run watch:ts\" \"npm run watch:less\" \"npm run watch:eleventy\"",
-    "start:test": "npm run clean && npm run build:ts && npm run build:less:site && npm run build:less:lib && npm run build:less:e2e && npm run run:eleventy:e2e",
+    "start:test": "npm run clean && npm run build:ts && npm run build:less && npm run run:eleventy:e2e",
     "test": "",
     "clean": "rimraf \"dist\"",
     "watch:lib": "cd .. && npm run watch",
     "watch:ts": "webpack --watch",
     "watch:less": "chokidar --initial \"../node_modules/@exadel/esl/modules/**/*.less\" \"src/**/*.less\" -c \"npm run build:less\"",
     "watch:eleventy": "eleventy --serve --incremental -- --env=development",
-    "minify:css": "cleancss -o \"dist/bundles/localdev.css\" \"dist/bundles/localdev.css\"",
+    "minify:css": "cleancss --batch --batch-suffix \"\" \"dist/bundles/*.css\" --source-map",
     "run:eleventy": "eleventy --serve -- --env=production",
     "run:eleventy:e2e": "eleventy --serve -- --env=e2e",
     "build": "npm run clean && concurrently \"npm run build:ts\" \"npm run build:less && npm run minify:css\" && npm run build:eleventy",
     "build:ts": "webpack --mode=production",
-    "build:less": "concurrently npm:build:less:*",
-    "build:less:e2e": "lessc \"src/e2e.less\" \"dist/bundles/e2e.css\" --source-map=dist/bundles/e2e.css.map",
-    "build:less:site": "lessc \"src/localdev.less\" \"dist/bundles/localdev.css\" --source-map=dist/bundles/localdev.css.map",
-    "build:less:lib": "lessc \"src/playground/export/lib.less\" \"dist/bundles/lib.css\" --source-map=dist/bundles/lib.css.map",
+    "build:less": "foreach -x \"lessc #{path} dist/bundles/#{name}.css --source-map=dist/bundles/#{name}.css.map\" -g \"src/*.less\"",
     "build:eleventy": "eleventy -- --env=production",
     "build:analyzer": "webpack --mode=production --profile --json ../.report/stats.json && webpack-bundle-analyzer ../.report/stats.json dist/bundles -s gzip -m static -r ../.report/stats.html"
   },

diff --git a/site/src/playground/ui-playground.less b/site/src/playground/ui-playground.less
@@ -54,4 +54,13 @@ html {
   .uip-preview-h-scroll[inactive] {
     display: none;
   }
+
+  // TODO: probably needs to be in UIP
+  .uip-preview[resizable='horizontal'] .uip-preview-container {
+    resize: horizontal;
+  }
+
+  .uip-preview[align='center'] .uip-preview-container {
+    margin-inline: auto;
+  }
 }
diff --git a/site/src/playground/ui-playground.ts b/site/src/playground/ui-playground.ts
@@ -7,7 +7,9 @@ UIPJSRenderingPreprocessors.addRegexReplacer(
   '"/bundles/lib.js"'
 );
 
-// Add template
+// Store default template as empty
+UIPRenderingTemplatesService.add('empty', UIPRenderingTemplatesService.get('default')!);
+// Inject ESL context to default template
 UIPRenderingTemplatesService.add('default', `
   <html>
     <head>

diff --git a/site/src/presentation/carousel.less b/site/src/presentation/carousel.less
@@ -0,0 +1,37 @@
+.presentation-carousel {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+
+  .presentation-content {
+    width: auto;
+    margin: auto;
+  }
+
+  .presentation-carousel,
+  .presentation-carousel-inner {
+    width: 100%;
+    height: 100%;
+  }
+
+  // Fallback
+  &:not(.esl-carousel) .presentation-carousel-inner {
+    flex-direction: column;
+    opacity: 0;
+    animation: fallback-fade-in 0.5s linear forwards;
+    animation-delay: 0.5s;
+  }
+  &:not(.esl-carousel) .presentation-slide {
+    min-height: 50svh;
+    border-bottom: 1px solid #e5e5e5;
+  }
+}
+
+@keyframes fallback-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/site/src/presentation/footer.less b/site/src/presentation/footer.less
@@ -0,0 +1,39 @@
+@import (reference) '../common/variables.less';
+
+.presentation-footer {
+  position: fixed;
+  z-index: 10;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  pointer-events: none;
+
+  display: flex;
+  justify-content: center;
+
+  @media print {
+    display: none;
+  }
+
+  &-container {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    pointer-events: all;
+
+    padding: 0.75rem;
+    opacity: 0.2;
+    transition: opacity 0.5s ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &-item {
+    text-shadow:
+      #000 0 0 10px,
+      @nav-dark-bg 0 0 2px;
+  }
+}
diff --git a/site/src/presentation/layout.less b/site/src/presentation/layout.less
@@ -0,0 +1,74 @@
+@import (reference) '../common/variables.less';
+
+.presentation-layout {
+  --_header-height: 60px;
+
+  color: @landing-fg-color;
+  height: 100dvh;
+
+  @media screen {
+    main {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: calc(100dvh - var(--_header-height));
+
+      &:not(:has(.esl-carousel)) {
+        overflow: auto;
+      }
+    }
+  }
+
+  @media print {
+    height: fit-content;
+
+    pre {
+      overflow: hidden;
+    }
+
+    .print-hidden,
+    .esl-scrollbar {
+      display: none !important;
+    }
+  }
+
+  background: @landing-bg-color url('/assets/common/stars.webp') repeat;
+  background-size: 1000px 500px;
+  animation: p-slow-move-bg 90s infinite linear;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+
+    opacity: 0.25;
+    background: url('/assets/common/fog.webp') repeat;
+    background-size: 100% 100%;
+
+    @media print {
+      display: none;
+    }
+  }
+
+  @keyframes p-slow-move-bg {
+    0% {
+      background-position: 1000px 500px;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+
+  @media @md-xl {
+    .header {
+      background-color: transparent;
+    }
+  }
+}
+
+@media print {
+  @page {
+    margin: 0;
+    size: A4 landscape;
+  }
+}
diff --git a/site/src/presentation/sidebar.less b/site/src/presentation/sidebar.less
@@ -0,0 +1,133 @@
+@import (reference) '../common/variables.less';
+
+.presentation-sidebar {
+  &,
+  &.esl-toggleable {
+    display: flex;
+
+    @media print {
+      display: none;
+    }
+  }
+
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  max-height: 100svh;
+  z-index: 9;
+
+  padding-top: var(--_header-height);
+
+  color: @nav-dark-fg;
+  background: linear-gradient(
+    to right,
+    fadeout(@nav-dark-bg, 20%) 0%,
+    fadeout(@nav-dark-bg, 100%) 100%
+  );
+
+  width: 100%;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.5s linear,
+    visibility 0.5s linear;
+
+  &.open {
+    opacity: 1;
+    visibility: visible;
+
+    transition:
+      opacity 0.5s linear,
+      visibility 0s linear;
+  }
+
+  &-container {
+    width: auto;
+    flex: 1 1 auto;
+    transition: transform 0.5s ease-in-out;
+    padding: 2rem 0 2rem 20px;
+    @media @sm {
+      padding-left: 30px;
+    }
+    @media @md {
+      padding-left: 45px;
+    }
+    @media @lg-xl {
+      padding-left: 60px;
+    }
+    @media @sm-xl {
+      width: 30rem;
+    }
+  }
+
+  &:not(.open) &-container {
+    transform: translateX(-100%);
+  }
+
+  &-menu {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+  &-item {
+    list-style-type: none;
+    margin: 0.5rem 0;
+  }
+  &-item &-link {
+    color: @nav-dark-fg;
+    text-decoration: none;
+    font-size: 1rem;
+    padding: 1rem 0;
+
+    &:hover {
+      color: @nav-dark-hover;
+      text-decoration: none;
+    }
+  }
+
+  &-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: fadeout(@nav-dark-bg, 25%);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: url('/assets/common/fog.webp') repeat;
+      background-size: 2500px 1500px;
+      transition: all linear 1s;
+    }
+  }
+
+  &.open &-overlay {
+    &::before {
+      background-position: 10vw 0;
+    }
+  }
+
+  &-scroll.esl-scrollbar {
+    top: var(--_header-height);
+    @media (hover: hover) {
+      opacity: 0.4;
+      transition: opacity 0.3s linear;
+    }
+
+    .scrollbar-track {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    .scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.4);
+    }
+
+    &[dragging] .scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.6);
+      box-shadow: inset 0 0 4px 0 rgba(255, 255, 255, 0.2);
+    }
+  }
+}
diff --git a/site/src/presentation/slide.less b/site/src/presentation/slide.less
@@ -0,0 +1,38 @@
+.presentation-slide {
+  display: flex;
+  position: relative;
+  max-height: 100%;
+
+  @media print {
+    // TODO: A4 landscape height to enlarge short slides
+    page-break-after: always;
+  }
+
+  .presentation-content {
+    padding-block: 2rem;
+    max-width: calc(1400px + 4rem);
+    max-height: 100%;
+    touch-action: pan-y;
+  }
+
+  .presentation-scrollbar {
+    opacity: 0.6;
+  }
+
+  &.light {
+    background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(255 255 255) 2.5%,
+      rgb(255 255 255) 97.5%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    background-size: 100% 100%;
+    color: #000;
+  }
+
+  &.full-width .presentation-content {
+    width: 100%;
+    max-width: 1600px;
+  }
+}
diff --git a/site/src/localdev.less → site/src/site.less b/site/src/localdev.less → site/src/site.less
diff --git a/site/src/site.presentation.less b/site/src/site.presentation.less
@@ -0,0 +1,5 @@
+@import './presentation/layout.less';
+@import './presentation/carousel.less';
+@import './presentation/slide.less';
+@import './presentation/sidebar.less';
+@import './presentation/footer.less';
diff --git a/site/src/localdev.ts → site/src/site.ts b/site/src/localdev.ts → site/src/site.ts
diff --git a/site/static/assets/common/open-source.svg b/site/static/assets/common/open-source.svg
diff --git a/site/static/assets/common/print.svg b/site/static/assets/common/print.svg