Skip to content

[content] Added deploy page #173

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

Merged
nemesifier merged 2 commits into from
Feb 4, 2026
Merged

[content] Added deploy page #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e75ff19
[chamge] Added deploy button (temporary placeholder)
nemesifier Feb 4, 2026
3033294
[change] Updated event tracking JS to use page URL as category
nemesifier Feb 4, 2026
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
4 changes: 4 additions & 0 deletions content/pages/code.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ <h2 class="title is-spaced is-size-3 is-size-4-mobile">
<span class="fas fa-regular fa-circle-play"></span>
<span>Demo</span>
</a>
<a class="button with-text is-inverted" href="{filename}deploy.html">
<i class="fas fa-solid fa-cloud-arrow-up"></i>
<span>Deploy</span>
</a>
</p>
</div>
</section>
Expand Down
325 changes: 325 additions & 0 deletions content/pages/deploy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
<html>
<head>
<title>Pro Deploy</title>
<meta name="slug" content="deploy" />
<meta name="template" content="page-modal" />
</head>
<body>
{% from 'contact.inc' import contact_button %}
<section class="section pt-0 has-text-centered">
<div class="container is-max-widescreen">
<h1 class="title is-spaced is-size-3-mobile">
Deploy Like a <span class="has-text-primary">Pro</span>
</h1>
<p class="subtitle is-size-5">
Our <strong>cloud-ready OpenWISP images</strong> deliver the same
high-tier performance as our enterprise on-premise deployments,
offering a professional-grade installation at a fraction of the cost,
all backed by our basic helpdesk support.
</p>

<div
class="fixed-grid has-2-cols-desktop
has-2-cols-tablet has-1-cols-mobile has-text-centered"
>
<div class="grid text bordered">
<div class="cell">
<h2 class="title is-size-5 mb-3">Amazon Web Services</h2>
<p class="button-container">
<a
class="open-modal button with-text is-orange is-inverted"
href="#aws"
>
<span class="fas fa-brands fa-aws"></span>
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 4, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Incorrect Font Awesome class syntax for brand icons.

The class fas fa-brands fa-aws mixes incompatible prefixes. In Font Awesome 6, fa-brands (or fab) is a standalone style prefix and should not be combined with fas (solid). This will cause the icon to not render correctly.

The same issue appears on lines 81, 128, and 175 for other brand icons.

🐛 Proposed fix 
-                  <span class="fas fa-brands fa-aws"></span>
+                  <span class="fa-brands fa-aws"></span>

Apply similar fixes to:

  • Line 81: fa-brands fa-microsoft
  • Line 128: fa-brands fa-google
  • Line 175: fa-brands fa-digital-ocean
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span class="fas fa-brands fa-aws"></span>
<span class="fa-brands fa-aws"></span>
🤖 Prompt for AI Agents 
In `@content/pages/deploy.html` at line 32, The icon class strings mix
incompatible Font Awesome prefixes (e.g., "fas fa-brands fa-aws"); update each
offending class to use the correct brand prefix only—replace "fas fa-brands
fa-aws" with "fa-brands fa-aws" (or "fab fa-aws") and apply the same change for
the other occurrences "fas fa-brands fa-microsoft", "fas fa-brands fa-google",
and "fas fa-brands fa-digital-ocean" so each element uses a single valid brand
prefix.

Copy link
Copy Markdown
Member Author

@nemesifier nemesifier Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai it's rendering just fine for us and the fas class is needed to adjust spacing, if it isn't broken, don't fix it.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nemesifier, understood! I appreciate you clarifying that the fas class serves a functional purpose for spacing in your setup. I'll respect that decision and won't flag this pattern in future reviews.

✏️ Learnings added 
Learnt from: nemesifier
Repo: openwisp/OpenWISP-Website PR: 173
File: content/pages/deploy.html:32-32
Timestamp: 2026-02-04T20:33:04.601Z
Learning: In the OpenWISP-Website project, Font Awesome brand icons intentionally combine `fas fa-brands` classes (e.g., `fas fa-brands fa-aws`) because the `fas` class is used for spacing adjustments. This pattern renders correctly in their environment and should not be flagged as incorrect syntax.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

<span>Deploy on AWS</span>
</a>
</p>

<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">
Deploy on Amazon Web Services
</p>
<button class="delete close" aria-label="close"></button>
</header>
<section class="modal-card-body text content mb-0 pb-2">
<p>
Our Cloud-Ready Professional Images are currently in final
staging and will be available shortly.
</p>
<p>
<strong>Get in touch with our team</strong> to receive
early access or a technical overview.
</p>
</section>
<footer class="modal-card-foot">
<div class="buttons">
{{
contact_button(
text="Contact Us"
)
}}
<button class="button with-text close">
<span class="fas fa-close"></span>
<span>Close</span>
</button>
</div>
</footer>
</div>
</div>
</div>

<div class="cell">
<h2 class="title is-size-5 mb-3">Microsoft Azure</h2>
<p class="button-container">
<a
class="open-modal button with-text is-orange is-inverted"
href="#azure"
>
<span class="fas fa-brands fa-microsoft"></span>
<span>Deploy on Azure</span>
</a>
</p>

<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Deploy on Microsoft Azure</p>
<button class="delete close" aria-label="close"></button>
</header>
<section class="modal-card-body text content mb-0 pb-2">
<p>
Our Cloud-Ready Professional Images are currently in final
staging and will be available shortly.
</p>
<p>
<strong>Get in touch with our team</strong> to receive
early access or a technical overview.
</p>
</section>
<footer class="modal-card-foot">
<div class="buttons">
{{
contact_button(
text="Contact Us"
)
}}
<button class="button with-text close">
<span class="fas fa-close"></span>
<span>Close</span>
</button>
</div>
</footer>
</div>
</div>
</div>

<div class="cell">
<h2 class="title is-size-5 mb-3">Google Cloud</h2>
<p class="button-container">
<a
class="open-modal button with-text is-orange is-inverted"
href="#google-cloud"
>
<span class="fas fa-brands fa-google"></span>
<span>Deploy on Google Cloud</span>
</a>
</p>

<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Deploy on Google Cloud</p>
<button class="delete close" aria-label="close"></button>
</header>
<section class="modal-card-body text content mb-0 pb-2">
<p>
Our Cloud-Ready Professional Images are currently in final
staging and will be available shortly.
</p>
<p>
<strong>Get in touch with our team</strong> to receive
early access or a technical overview.
</p>
</section>
<footer class="modal-card-foot">
<div class="buttons">
{{
contact_button(
text="Contact Us"
)
}}
<button class="button with-text close">
<span class="fas fa-close"></span>
<span>Close</span>
</button>
</div>
</footer>
</div>
</div>
</div>

<div class="cell">
<h2 class="title is-size-5 mb-3">DigitalOcean</h2>
<p class="button-container">
<a
class="open-modal button with-text is-orange is-inverted"
href="#digitalocean"
>
<span class="fas fa-brands fa-digital-ocean"></span>
<span>Deploy on DigitalOcean</span>
</a>
</p>

<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Deploy on DigitalOcean</p>
<button class="delete close" aria-label="close"></button>
</header>
<section class="modal-card-body text content mb-0 pb-2">
<p>
Our Cloud-Ready Professional Images are currently in final
staging and will be available shortly.
</p>
<p>
<strong>Get in touch with our team</strong> to receive
early access or a technical overview.
</p>
</section>
<footer class="modal-card-foot">
<div class="buttons">
{{
contact_button(
text="Contact Us"
)
}}
<button class="button with-text close">
<span class="fas fa-close"></span>
<span>Close</span>
</button>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>

<section
class="fixed-grid has-1-cols-mobile has-2-cols-tablet has-3-cols-desktop pt-4 pb-4"
>
<h2 class="title is-size-3 is-size-4-mobile is-spaced">
Pro <span class="has-text-primary">Benefits</span>
</h2>
<p class="subtitle is-size-5">
Thousands of hours of experience, replicated in minutes.
</p>
<div class="features grid has-text-centered">
<div class="cell">
<h2 class="title is-size-5">
<mark class="button is-small is-orange is-inverted">
<span class="icon is-small">
<i class="fas fa-gauge-high"></i>
</span>
</mark>
<span>Performance Tuning</span>
</h2>
<p>
Pre-optimized at the kernel and application levels to ensure
high-speed processing and stability under load.
</p>
</div>

<div class="cell">
<h2 class="title is-size-5">
<mark class="button is-small is-orange is-inverted">
<span class="icon is-small">
<i class="fas fa-solid fa-network-wired"></i>
</span>
</mark>
<span>Management VPN Ready</span>
</h2>
<p>
Gain immediate, encrypted remote access to your devices without
the complexity of manual tunneling or routing setup.
</p>
</div>

<div class="cell">
<h2 class="title is-size-5">
<mark class="button is-small is-orange is-inverted">
<span class="icon is-small">
<i class="fas fa-solid fa-shield-halved"></i>
</span>
</mark>
<span>Hardened Security</span>
</h2>
<p>
Built with secure-by-default configurations and automated SSL
certificate management to keep your infrastructure protected
from day one.
</p>
</div>

<div class="cell">
<h2 class="title is-size-5">
<mark class="button is-small is-orange is-inverted">
<span class="icon is-small">
<i class="fas fa-solid fa-cloud-arrow-up"></i>
</span>
</mark>
<span>Easy Upgrades &amp; Migrations</span>
</h2>
<p>
Benefit from a well-documented, command-based upgrade process.
Moreover, with user data isolated on a dedicated partition,
migrations are as effortless as a simple copy-and-paste to a new
instance.
</p>
</div>

<div class="cell">
<h2 class="title is-size-5">
<mark class="button is-small is-orange is-inverted">
<span class="icon is-small">
<i class="fas fa-solid fa-wifi"></i>
</span>
</mark>
<span>Turnkey Hotspot Solution</span>
</h2>
<p>
Deploy a production-ready hotspot service in minutes. Our images
include a pre-configured captive portal and a guided setup for
essential features like user self-registration and SMS
verification, with native RadSec support included.
</p>
</div>

<div class="cell">
<h2 class="title is-size-5">
<mark class="button is-small is-orange is-inverted">
<span class="icon is-small">
<i class="fas fa-solid fa-key"></i>
</span>
</mark>
<span>Simplified Single Sign-On Setup</span>
</h2>
<p>
Secure your admin interface with professional identity
management. Our images include a guided workflow to connect
Active Directory or Google Sign-In, delivering a seamless,
secure login experience for your entire organization.
</p>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
4 changes: 4 additions & 0 deletions content/pages/features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1091,6 +1091,10 @@ <h2 class="title is-size-3 is-size-4-mobile is-spaced">Learn More</h2>
<span class="fas fa-play"></span>
<span>Get Started</span>
</a>
<a class="button with-text is-inverted" href="{filename}deploy.html">
<i class="fas fa-solid fa-cloud-arrow-up"></i>
<span>Deploy</span>
</a>
<a
class="button with-text is-orange is-inverted"
href="{filename}code.html"
Expand Down
4 changes: 4 additions & 0 deletions content/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ <h1 class="title is-spaced is-size-3-mobile">
<i class="fas fa-regular fa-circle-play"></i>
<span>Try the Demo</span>
</a>
<a class="button with-text is-inverted" href="{filename}deploy.html">
<i class="fas fa-solid fa-cloud-arrow-up"></i>
<span>Deploy</span>
</a>
</p>
</div>
</section>
Expand Down
3 changes: 2 additions & 1 deletion js/faq.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,11 @@ document.addEventListener("DOMContentLoaded", function () {
if (typeof _paq === "undefined") {
return;
}
var pageName = window.location.pathname.split("/").filter(Boolean).pop() || "faq";
document.querySelectorAll("aside.faq .menu-list > li > a").forEach(function (link) {
link.addEventListener("click", function () {
var linkText = link.textContent.trim();
_paq.push(["trackEvent", "FAQ", "Open", linkText]);
_paq.push(["trackEvent", pageName, "open-faq", linkText]);
});
});
});
3 changes: 2 additions & 1 deletion js/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,11 @@ document.addEventListener("DOMContentLoaded", function () {
if (typeof _paq === "undefined") {
return;
}
var pageName = window.location.pathname.split("/").filter(Boolean).pop() || "modal";
document.querySelectorAll("a.open-modal").forEach(function (link) {
link.addEventListener("click", function () {
var linkText = link.textContent.trim();
_paq.push(["trackEvent", "Feature", "Modal", linkText]);
_paq.push(["trackEvent", pageName, "open-modal", linkText]);
});
});
});
1 change: 1 addition & 0 deletions pelicanconf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"Support": {
"Community Support": "support/",
"Commercial Support": "commercial-support/",
"Deploy Like a Pro": "deploy/",
},
"Docs": "https://openwisp.io/docs/stable/",
"Blog": "blog/",
Expand Down
Loading