feat: hubspot integration and visual improvements

* fix: make filter work correctly,video player and styling better * feat: add hubspot form for email subscription * feat: add gilroy font * refactor: changes related to filename, html tags --------- Co-authored-by: RohanSaeed <[email protected]>
edly-io · Apr 17, 2024 · 31105e7 · 31105e7
1 parent cdeacde
commit 31105e7
Show file tree

Hide file tree

Showing 89 changed files with 543 additions and 151 deletions.
diff --git a/Makefile b/Makefile
@@ -17,7 +17,7 @@ wait-for-change:
 
 serve: build ## Launch a development server
 	@echo "-----> http://localhost:8042/academy"
-	@python3 -m http.server --bind localhost 8042 -d _build
+	@python -m http.server --bind localhost 8042 -d _build
 
 docker-build: ## Build the Docker image
 	docker build --tag ${DOCKER_TAG} .

diff --git a/layout/base.html b/layout/base.html
@@ -1,95 +1,146 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Edly Academy</title>
+    <link rel="stylesheet" href="{{ URL_ROOT }}/static/font/fonts.css" />
     <link rel="icon" href="{{ URL_ROOT }}/static/images/favicon.png" />
     <link rel="stylesheet" href="{{ URL_ROOT }}/static/css/academy.css" />
     {% block css %}{% endblock%}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
-</head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <div class="navbar">
-            <a href="#" class="mobile-menu-link">
-                <img src="{{ URL_ROOT }}/static/images/bars-solid.svg" alt="menu" />
-            </a>
-            <div class="edly-logo-item">
-                <a class="edly-logo-link" href="{{ URL_ROOT }}">
-                    <img class="edly-logo" src="{{ URL_ROOT }}/static/images/edly_logo.png" alt="edly academy" />
-                </a>
-                <div class="vertical-rule"></div>
-            </div>
-            <ul class="navbar-list">
-                <li><a href="https://edly.io/why-edly/">About</a></li>
-                <li><a href="https://github.com/edly-io/academy">Contribute</a></li>
-            </ul>
-            <a href="https://github.com/edly-io/academy" class="github-link" target="_blank">
-                <img class="github-image" src="{{ URL_ROOT }}/static/images/github_logo.png" alt="github" />
-                <p class="github-text">Edit on GitHub</p>
-            </a>
+      <div class="navbar">
+        <a href="#" class="mobile-menu-link">
+          <img src="{{ URL_ROOT }}/static/images/bars-solid.svg" alt="menu" />
+        </a>
+        <div class="edly-logo-item">
+          <a class="edly-logo-link" href="{{ URL_ROOT }}">
+            <img
+              class="edly-logo"
+              src="{{ URL_ROOT }}/static/images/edly_logo.png"
+              alt="edly academy"
+            />
+          </a>
+          <div class="vertical-rule"></div>
+        </div>
+        <ul class="navbar-list">
+          <li><a href="https://edly.io/why-edly/">About</a></li>
+          <li><a href="https://github.com/edly-io/academy">Contribute</a></li>
+        </ul>
+        <a
+          href="https://github.com/edly-io/academy"
+          class="github-link"
+          target="_blank"
+        >
+          <img
+            class="github-image"
+            src="{{ URL_ROOT }}/static/images/github_logo.png"
+            alt="github"
+          />
+          <p class="github-text">Edit on GitHub</p>
+        </a>
+      </div>
+      <div class="mobile-menu">
+        <div class="mobile-top">
+          <a href="#" class="close-button">
+            <img
+              class="close-image"
+              src="{{ URL_ROOT }}/static/images/xmark-solid.svg"
+              alt="cross"
+            />
+          </a>
+          <a class="mobile-edly-logo-link" href="{{ URL_ROOT }}">
+            <img
+              class="mobile-edly-logo"
+              src="{{ URL_ROOT }}/static/images/edly_logo.png"
+              alt="edly academy"
+            />
+          </a>
+        </div>
+        <div class="mobile-main">
+          <a href="https://edly.io/why-edly/">About </a>
+          <a href="https://github.com/edly-io/academy">Contribute </a>
         </div>
-        <div class="mobile-menu">
-            <div class="mobile-top">
-                <a href="#" class="close-button">
-                    <img class="close-image" src="{{ URL_ROOT }}/static/images/xmark-solid.svg" alt="cross" />
-                </a>
-                <a class="mobile-edly-logo-link" href="{{ URL_ROOT }}">
-                    <img class="mobile-edly-logo" src="{{ URL_ROOT }}/static/images/edly_logo.png" alt="edly academy" />
-                </a>
-            </div>
-            <div class="mobile-main">
-                <a href="https://edly.io/why-edly/">About </a>
-                <a href="https://github.com/edly-io/academy">Contribute </a>
-            </div>
-            <div class="mobile-bottom">
-                <a href="https://github.com/edly-io/academy" class="mobile-github-link" target="_blank">
-                    <img class="mobile-github-image" src="{{ URL_ROOT }}/static/images/github_logo.png" alt="github" />
-                    <p class="mobile-github-text">Edit on GitHub</p>
-                </a>
-            </div>
+        <div class="mobile-bottom">
+          <a
+            href="https://github.com/edly-io/academy"
+            class="mobile-github-link"
+            target="_blank"
+          >
+            <img
+              class="mobile-github-image"
+              src="{{ URL_ROOT }}/static/images/github_logo.png"
+              alt="github"
+            />
+            <p class="mobile-github-text">Edit on GitHub</p>
+          </a>
         </div>
+      </div>
 
-        {% block content %}{% endblock %}
+      {% block content %}{% endblock %}
 
-        <div class="footer">
-            <div class="footer-content">
-                <p class="email-label">
-                    Get the latest resources, tips, and best practices directly in your
-                    inbox
-                </p>
-                <form class="email" action="" method="post">
-                    <input class="email-input" placeholder="Enter your email address" />
-                    <button class="email-button" type="submit">Subscribe</button>
-                </form>
-                <div class="footer-nav">
-                    <p>Edly 2024 All rights reserved</p>
-                    <p><a href="/privacy-policy/"> Privacy Policy </a></p>
-                    <p><a href="/terms-and-conditions/">Terms & Conditions</a></p>
-                </div>
-                <p class="footer-bottom-text">edX and Open edX are registered trademarks of edX Inc</p>
-            </div>
+      <div class="footer">
+        <div class="footer-content">
+          <p class="email-label">
+            Get the latest resources, tips, and best practices directly in your
+            inbox
+          </p>
+
+          <div class="footer-nav">
+            <p>Edly 2024 All rights reserved</p>
+            <p><a href="/privacy-policy/"> Privacy Policy </a></p>
+            <p><a href="/terms-and-conditions/">Terms & Conditions</a></p>
+          </div>
+          <p class="footer-bottom-text">
+            edX and Open edX are registered trademarks of edX Inc
+          </p>
         </div>
+      </div>
     </div>
     {% block js %}{% endblock%}
+
+    <script
+      charset="utf-8"
+      type="text/javascript"
+      src="//js.hsforms.net/forms/embed/v2.js"
+    ></script>
     <script>
-        //mobile menu display toggles
-        const mobileMenu = document.querySelector(".mobile-menu");
-        const closeButton = document.querySelector(".close-button");
-        closeButton.addEventListener("click", (event) => {
-            mobileMenu.style.visibility = "hidden";
-        });
-        const menuButton = document.querySelector(".mobile-menu-link");
-        menuButton.addEventListener("click", (event) => {
-            mobileMenu.style.visibility = "visible";
-        });
+      hbspt.forms.create({
+        region: "na1",
+        portalId: "14529077",
+        formId: "8471b02a-3592-4672-a0cf-9c0bfeca7712",
+      });
     </script>
-    {% block footer %}{% endblock %}
-</body>
+    <script>
+      //mobile menu display toggles
+      const mobileMenu = document.querySelector(".mobile-menu");
+      const closeButton = document.querySelector(".close-button");
+      closeButton.addEventListener("click", (event) => {
+        mobileMenu.style.visibility = "hidden";
+      });
+      const menuButton = document.querySelector(".mobile-menu-link");
+      menuButton.addEventListener("click", (event) => {
+        mobileMenu.style.visibility = "visible";
+      });
+
+      // email subscription form placement in the footer
+      const hubspotForm = document.querySelector(".hbspt-form");
+      const footerContent = document.querySelector(".footer-content");
+      const footerNav = document.querySelector(".footer-nav");
+      footerContent.insertBefore(hubspotForm, footerNav);
 
+      //set width of email subscription
+      hubspotForm.style.width = "80%";
+    </script>
+    {% block footer %}{% endblock %}
+  </body>
 </html>
diff --git a/layout/index.html b/layout/index.html
@@ -12,30 +12,30 @@ <h1 class="resources-heading">All Resources</h1>
                     <p>Resource type</p>
                     <img class="arrow" src="{{ URL_ROOT }}/static/images/chevron-down-solid.svg" />
                 </div>
-                <div class="resource-type-filter invisible" id="resource-type-filter">
+                <ul class="resource-type-filter invisible" id="resource-type-filter">
                     {% for resource_type in RESOURCE_TYPES %}
-                    <div class="resource-type-option">
+                    <li class="resource-type-option">
                         <input class='resource-type-input' type='radio' name="type" value="{{ resource_type }}" {% if
                             resource_type=="all" %}checked{% endif %}>
-                        <label>{{ resource_type }}</label>
-                    </div>
+                        <label class="resource-label">{{ resource_type }}</label>
+                        </li>
                     {% endfor %}
-                </div>
+                </ul>
             </div>
             <div class="filter-type">
                 <div id="categories-button" class="categories-label">
                     <p>Topics</p>
                     <img class="arrow" src="{{ URL_ROOT }}/static/images/chevron-down-solid.svg" />
                 </div>
-                <div class="categories-filter invisible" id="categories-filter">
+                <ul class="categories-filter invisible" id="categories-filter">
                     {% for category in CATEGORIES %}
-                    <div class="category-option">
+                    <li class="category-option">
                         <input class='category-input' type='radio' name="category" value="{{ category }}" {% if
                             category=="all" %}checked{% endif %}>
-                        <label>{{ category }}</label>
-                    </div>
+                        <label class="category-label">{{ category }}</label>
+                    </li>
                     {% endfor %}
-                </div>
+                </ul>
             </div>
         </div>
     </div>

diff --git a/layout/resource.html b/layout/resource.html
@@ -1,22 +1,28 @@
-{% extends "base.html" %}
-{% block css %}
+{% extends "base.html" %} {% block css %}
 <link rel="stylesheet" href="{{ URL_ROOT }}/static/css/resource.css" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.min.css">
-<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/highlightjs-copy.min.css" />
-{% endblock%}
-
-{% block content %}
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
+/>
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.min.css"
+/>
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/[email protected]/dist/highlightjs-copy.min.css"
+/>
+{% endblock%} {% block content %}
 <div class="main">
-    <div class="page-route">
-        <a href="{{ URL_ROOT }}">Home</a> /
-        <a href="" class="title-ref">{{ resource.title }}</a>
-    </div>
-    <!-- <div class="intro">
+  <div class="page-route">
+    <a href="{{ URL_ROOT }}">Home</a> /
+    <a href="" class="title-ref">{{ resource.title }}</a>
+  </div>
+  <!-- <div class="intro">
         <h1 class="heading">{{ resource.title }}</h1>
         <p class="description">{{ resource.description }}</p>
     </div> -->
-    <!-- {% if "target_audience" is in resource %}
+  <!-- {% if "target_audience" is in resource %}
     <div class="target-audience">
         <h2>Who is this for?</h2>
         <ul class="audience-list">
@@ -36,27 +42,42 @@ <h2>What you'll learn</h2>
         </ul>
     </div>
     {% endif %} -->
-    <div class="content">
-        {{ resource_html|safe }}
-        <!-- {% if resource.video %}
-        <h2 class="content-heading">{{ resource.video.title }} </h2>
-        <iframe class="video-content" width="560" height="315" src="{{ resource.video.link }}"" title=" {{
-            resource.title }} - video" frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen></iframe>
-        <p class="content-description">{{ resource.video.description }}</p>
-        {% endif %} -->
+  <div class="content">
+    {{ resource_html|safe }}
+    <!-- {% if resource.video %}
+    <h2 class="content-heading">{{ resource.video.title }}</h2>
+    <div class="video-content">
+      <div class="play-container" id="play-container">
+        <img
+          src="{{ URL_ROOT }}/static/images/play-solid.svg"
+          alt=""
+          id="play-button"
+          class="play-button"
+        />
+      </div>
+      <img alt="thumbnail" id="thumbnail" class="thumbnail" />
+      <iframe
+        src="{{ resource.video.link }}"
+        title=" {{
+              resource.title }} - video"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+        id="iframe"
+        class="iframe"
+      ></iframe>
     </div>
+    <p class="content-description">{{ resource.video.description }}</p>
+    {% endif %} -->
+  </div>
 </div>
-{% endblock %}
-
-{% block js %}
+{% endblock %} {% block js %}
 <!-- Code highlighting -->
 {# https://github.com/arronhunt/highlightjs-copy #}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/highlightjs-copy.min.js"></script>
 <script>
-    hljs.addPlugin(new CopyButtonPlugin());
-    hljs.highlightAll();
+  hljs.addPlugin(new CopyButtonPlugin());
+  hljs.highlightAll();
 </script>
 {% endblock%}