Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rohansaeed/hubspot integration #6

Merged
merged 4 commits into from
Apr 17, 2024
Merged

Rohansaeed/hubspot integration #6

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f208602
fix: make filter work correctly,video player and styling better
Apr 2, 2024
54dea17
feat: add hubspot form for email subscription
Apr 15, 2024
b17313b
feat: add gilroy font
Apr 15, 2024
cd8c164
refactor: changes related to filename, html tags
Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} .
Expand Down
195 changes: 123 additions & 72 deletions layout/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/stylesheet.css" />
regisb marked this conversation as resolved.
Show resolved Hide resolved
<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>
regisb marked this conversation as resolved.
Show resolved Hide resolved
<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>
12 changes: 6 additions & 6 deletions layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ <h1 class="resources-heading">All Resources</h1>
</div>
<div 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">
regisb marked this conversation as resolved.
Show resolved Hide resolved
<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>
</div>
Expand All @@ -29,11 +29,11 @@ <h1 class="resources-heading">All Resources</h1>
</div>
<div 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>
</div>
Expand Down
94 changes: 65 additions & 29 deletions layout/resource.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -36,27 +42,57 @@ <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();
//play button functionality
regisb marked this conversation as resolved.
Show resolved Hide resolved
const thumbnail = document.getElementById("thumbnail");
const iframe = document.getElementById("iframe");
const playButton = document.getElementById("play-container");
const videoId = iframe.src.split("/")[4].split("?")[0];
thumbnail.setAttribute(
"src",
`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`
);
playButton.addEventListener("click", (event) => {
playButton.style.visibility = "hidden";
thumbnail.style.display = "none";
iframe.style.display = "block";
iframe.src += "?autoplay=1";
});
</script>
{% endblock%}
Loading