Refine demo page

AlecRust · Jul 31, 2023 · 1a55ff2 · 1a55ff2
1 parent ed6169a
commit 1a55ff2
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 29 deletions.
diff --git a/src/demo/images/github.svg b/src/demo/images/github.svg
diff --git a/src/demo/favicon.svg → src/demo/images/logo.svg b/src/demo/favicon.svg → src/demo/images/logo.svg
diff --git a/src/demo/images/wordpress.svg b/src/demo/images/wordpress.svg
diff --git a/src/demo/index.ejs b/src/demo/index.ejs
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Protected Video</title>
+    <link rel="icon" href="images/logo.svg" type="image/svg+xml" />
+    <meta
+      name="description"
+      content="Open source WordPress plugin that provides a 'block' and Shortcode to
+      embed YouTube/Vimeo videos, in a way that prevents users easily
+      accessing the underlying video."
+    />
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="heading mb-3">
+        <img src="images/logo.svg" width="30" alt="Protected Video logo" />
+        Protected Video
+      </h1>
+
+      <div class="intro mb-3">
+        <p class="mb-2">
+          Open source WordPress plugin that provides a 'block' and Shortcode to
+          embed YouTube/Vimeo videos, in a way that prevents users easily
+          accessing the underlying video.
+        </p>
+        <p>Below demonstrates the player loading a YouTube video.</p>
+      </div>
+
+      <div class="player mb-3">
+        <div
+          class="wp-block-protected-video-protected-video"
+          data-id1="eW91dHViZQ=="
+          data-id2="Y19oT19mam1Nbms="
+        ></div>
+      </div>
+
+      <ul class="external-links mb-3">
+        <li>
+          <a
+            href="https://github.com/AlecRust/protected-video"
+            class="external-link"
+          >
+            <img src="images/github.svg" width="16" alt="GitHub" />
+            View on GitHub
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://wordpress.org/plugins/protected-video/"
+            class="external-link"
+          >
+            <img src="images/wordpress.svg" width="16" alt="WordPress" />
+            View in WordPress Plugins Directory
+          </a>
+        </li>
+      </ul>
+
+      <div class="mb-3">
+        <a
+          href="https://downloads.wordpress.org/plugin/protected-video.<%= version %>.zip"
+          class="button mb-1"
+          >Download plugin ZIP</a
+        >
+        <p>
+          <small>
+            Latest version <%= version %> (<a
+              href="https://github.com/AlecRust/protected-video/blob/master/CHANGELOG.md"
+              >changelog</a
+            >)
+          </small>
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/demo/index.html b/src/demo/index.html
diff --git a/src/demo/style.scss b/src/demo/style.scss
@@ -5,6 +5,16 @@
 @import "normalize.css";
 @import "../style.scss";
 
+:root {
+  --color-dark-grey: #455a64;
+  --color-light-grey: #8b989e;
+  --color-pale-blue: #b3e1fb;
+  --color-pale-turquoise: #d7eeec;
+  --color-pale-yellow: #f7f1df;
+  --color-pale-pink: #f2d8dd;
+  --plyr-color-main: var(--color-dark-grey);
+}
+
 html {
   height: 100%;
 }
@@ -17,9 +27,50 @@ body {
   height: 100%;
   justify-content: center;
   text-align: center;
+  line-height: 1.6;
+  font-size: 1em;
+  color: var(--color-dark-grey);
+  background-size: cover;
+  background-image: linear-gradient(
+    160deg,
+    var(--color-pale-blue),
+    var(--color-pale-turquoise),
+    var(--color-pale-yellow),
+    var(--color-pale-pink)
+  );
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+img {
+  vertical-align: middle;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.demo-container {
+small {
+  color: var(--color-dark-grey);
+}
+
+.container {
   width: 300px;
 
   @media (min-width: 640px) {
@@ -30,3 +81,77 @@ body {
     width: 700px;
   }
 }
+
+.heading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.intro {
+  font-size: 0.9em;
+
+  @media (min-width: 640px) {
+    font-size: 0.95em;
+    padding: 0 30px;
+  }
+}
+
+.player {
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+
+  & .plyr {
+    margin-bottom: 0;
+  }
+}
+
+.button {
+  display: inline-block;
+  font-size: 1em;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 30px;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: scale(1.02);
+    text-decoration: none;
+    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.external-links {
+  @media (min-width: 640px) {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+}
+
+.external-link {
+  font-size: 0.9em;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  justify-content: center;
+}
+
+.mb-1 {
+  margin-bottom: 10px;
+}
+
+.mb-2 {
+  margin-bottom: 20px;
+}
+
+.mb-3 {
+  margin-bottom: 30px;
+}
diff --git a/src/demo/webpack.config.js b/src/demo/webpack.config.js
@@ -1,4 +1,9 @@
 const path = require('path')
+const fs = require('fs')
+const blockJson = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '..', 'block.json'), 'utf8')
+)
+const pluginVersion = blockJson.version
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
@@ -52,9 +57,11 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'index.html'),
+      template: path.resolve(__dirname, 'index.ejs'),
+      templateParameters: {
+        version: pluginVersion,
+      },
       meta: {
-        description: 'Protected Video WordPress plugin demo page.',
         'og:image':
           'https://ps.w.org/protected-video/assets/banner-772x250.png',
         viewport: 'width=device-width, initial-scale=1',
@@ -66,8 +73,8 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         {
-          from: path.resolve(__dirname, 'favicon.svg'),
-          to: '.',
+          from: path.resolve(__dirname, 'images'),
+          to: 'images',
         },
       ],
     }),