update foundation page + video

robotframework · Mar 17, 2024 · f2515d9 · f2515d9
1 parent 5f704b3
commit f2515d9
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 39 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,35 +10,14 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
     <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // MIT License
-      // https://github.com/rafgraph/spa-github-pages
-      // This script checks to see if a redirect is present in the query string,
-      // converts it back into the correct url and adds it to the
-      // browser's history using window.history.replaceState(...),
-      // which won't cause the browser to attempt to load the new url.
-      // When the single page app is loaded further down in this file,
-      // the correct url will be waiting in the browser's history for
-      // the single page app to route accordingly.
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) { 
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-              l.pathname.slice(0, -1) + decoded + l.hash
-          );
-        }
-      }(window.location))
-    </script>
+    <script defer src="/scripts/gh-pages-spa.js"></script>
+    <script defer src="/scripts/stars-tag.js"></script>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script defer src="/stars-tag.js"></script>
   </body>
 </html>
diff --git a/public/robot-icon.svg b/public/robot-icon.svg
diff --git a/public/scripts/gh-pages-spa.js b/public/scripts/gh-pages-spa.js
@@ -0,0 +1,20 @@
+// Single Page Apps for GitHub Pages
+// MIT License
+// https://github.com/rafgraph/spa-github-pages
+// This script checks to see if a redirect is present in the query string,
+// converts it back into the correct url and adds it to the
+// browser's history using window.history.replaceState(...),
+// which won't cause the browser to attempt to load the new url.
+// When the single page app is loaded further down in this file,
+// the correct url will be waiting in the browser's history for
+// the single page app to route accordingly.
+(function(l) {
+  if (l.search[1] === '/' ) {
+    var decoded = l.search.slice(1).split('&').map(function(s) {
+      return s.replace(/~and~/g, '&')
+    }).join('?');
+    window.history.replaceState(null, null,
+        l.pathname.slice(0, -1) + decoded + l.hash
+    );
+  }
+}(window.location))
diff --git a/public/stars-tag.js → public/scripts/stars-tag.js b/public/stars-tag.js → public/scripts/stars-tag.js
diff --git a/public/video/foundation.webm b/public/video/foundation.webm
diff --git a/public/video/foundation_compat.mp4 b/public/video/foundation_compat.mp4
diff --git a/public/video/foundation_mobile.webm b/public/video/foundation_mobile.webm
diff --git a/public/video/foundation_mobile_compat.mp4 b/public/video/foundation_mobile_compat.mp4
diff --git a/public/video/foundation_poster.webp b/public/video/foundation_poster.webp
diff --git a/src/assets/css/text.css b/src/assets/css/text.css
@@ -118,7 +118,6 @@ p {
 
 p.lead {
     font-size: var(--type-large);
-    margin: var(--size-2xlarge) 0;
     font-family: var(--font-title);
     line-height: var(--line-height-lead);
 }

diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
@@ -38,7 +38,7 @@
     --type-body: 1rem; /* p and h3 */
     --type-large: 1.15rem; /* h2 */
     --type-xlarge: 1.6rem; /* h2 */
-    --type-2xlarge: 4rem; /* h1 */
+    --type-2xlarge: 3rem; /* h1 */
 
     /* font weights */
     --weight-light: 300;

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row bg-theme center p-medium">
     <div>
-      <h1 class="title">
+      <h1 class="title" style="font-size: 4rem;">
         ROBOT<br>
         FRAME<br>
         WORK<div style="font-size: 2.5rem; transform: translateY(-.5rem); display: inline-block;">🇺🇦</div>

diff --git a/src/content/english/main.js b/src/content/english/main.js
@@ -61,19 +61,19 @@ export default () => ({
   introduction: {
     title: 'Introduction',
     body:
-      `Robot Framework is a generic open source automation framework.
-      It can be used for <a href="/test-automation/">test automation</a> and robotic process automation (RPA).<br><br>
+      `<p>Robot Framework is a generic open source automation framework.
+      It can be used for <a href="/test-automation/">test automation</a> and robotic process automation (RPA).</p>
 
-      Robot Framework is supported by <a href="/foundation/">Robot Framework Foundation</a>.
-      Many industry-leading companies use the tool in their software development.<br><br>
+      <p>Robot Framework is supported by <a href="/foundation/">Robot Framework Foundation</a>.
+      Many industry-leading companies use the tool in their software development.</p>
 
-      Robot Framework is open and extensible. Robot Framework can be integrated with virtually any
+      <p>Robot Framework is open and extensible. Robot Framework can be integrated with virtually any
       other tool to create powerful and flexible automation solutions.
-      Robot Framework is free to use without licensing costs.<br><br>
+      Robot Framework is free to use without licensing costs.</p>
 
-      Robot Framework has an easy syntax, utilizing human-readable keywords. Its capabilities can be extended
+      <p>Robot Framework has an easy syntax, utilizing human-readable keywords. Its capabilities can be extended
       by libraries implemented with Python, Java or many other programming languages.
-      Robot Framework has a rich ecosystem around it, consisting of libraries and tools that are developed as separate projects.`,
+      Robot Framework has a rich ecosystem around it, consisting of libraries and tools that are developed as separate projects.</p>`,
     usedByTitle: 'Robot Framework is used by...',
     companies: [
       {

diff --git a/src/views/Foundation.vue b/src/views/Foundation.vue
@@ -2,11 +2,19 @@
   <div>
     <navbar-sub-page title="Foundation" />
     <div class="container mb-3xlarge">
+      <h1 class="type-center mt-large mb-large color-white">Robot Framework Foundation</h1>
       <div
-        class="col-sm-12 col-lg-9 col-lg-offset-3"
+        class="col-sm-12 col-lg-8 col-lg-offset-2 mb-large type-center px-small"
         v-html="$t('foundation.lead')">
       </div>
-      <VideoComponent videoId="jlhgitypC5Q" class="col-sm-12 col-lg-9 col-lg-offset-3"/>
+      <div class="col-sm-12 col-lg-8 col-lg-offset-2 px-small">
+        <video controls preload="metadata" style="width: 100%;" class="card border-theme border-light" poster="/video/foundation_poster.webp" onclick="this.play()">
+          <source src="/video/foundation.webm" type="video/webm" media="(min-width: 1200px)" />
+          <source src="/video/foundation_compat.mp4" type="video/mp4" media="(min-width: 1200px)" />
+          <source src="/video/foundation_mobile.webm" type="video/webm" />
+          <source src="/video/foundation_mobile_compat.mp4" type="video/mp4" />
+        </video>
+      </div>
       <page-section
         title-id="benefits-and-cost"
         :title="$t('foundation.benefitsAndCost.title')"
@@ -29,12 +37,11 @@
 </template>
 
 <script>
-import { NavbarSubPage, PageFooter, PageSection, SponsorsDetailed, VideoComponent } from 'Components'
+import { NavbarSubPage, PageFooter, PageSection, SponsorsDetailed } from 'Components'
 
 export default {
   name: 'Foundation',
   components: {
-    VideoComponent,
     NavbarSubPage,
     PageSection,
     SponsorsDetailed,