Skip to content

Commit

Permalink
change: use mkdocs-nype theme
Browse files Browse the repository at this point in the history
  • Loading branch information
kamilkrzyskow committed Jul 28, 2024
1 parent dff713f commit 2ff45e2
Show file tree
Hide file tree
Showing 8 changed files with 24 additions and 160 deletions.
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ jobs:
restore-keys: |
mkdocs-material-
- run: pip install -r requirements.txt
- run: python -m mkdocs_nype --minify --inject-minified
- run: mkdocs build --strict
- name: Prepare deploy archive
run: |
Expand Down
68 changes: 1 addition & 67 deletions docs/assets/javascripts/extra.js
Original file line number Diff line number Diff line change
@@ -1,67 +1 @@
document.addEventListener("DOMContentLoaded", () => {
"use strict";

if (!window.location.pathname.startsWith("/contact")) {
return;
}

window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }

if (window.location.pathname.startsWith("/contact-success/")) {
gtag("event", "sign_up_success");
}

const searchParams = new URLSearchParams(location.search);
const freeParam = searchParams.get("free");
const freeValue = freeParam && freeParam === "true";
const freeSubject = "Fiori Role Testing: Get for free request";

const form = document.querySelector("#extFormWrapper > form");

if (form) {
form.addEventListener("submit", (e) => {
e.preventDefault();

if (!form.reportValidity()) {
return;
}

gtag("event", "sign_up", { method: "Contact Form" });

// URL -> base64 -> HEX
const hexData = "6148523063484d364c79396d62334a74637935316269317a6447463061574d75593239744c325a76636d317a4c7a63304f546b314d445930597a63304f44566d4e6a55324e4755354d6a45304e6d5a6d596a6c6c5a574934596a63344e7a42695954553d";

if (!["127.0.0.1", "localhost"].includes(window.location.hostname)) {
form.action = atob(String.fromCharCode(...hexData.match(/.{1,2}/g).map(byte => parseInt(byte, 16))));
}

form.submit();
});

const messageElement = form.querySelector('[name="message"]');
if (messageElement) {
if (freeValue && !messageElement.value.trim()) {
messageElement.value = freeSubject;
}
}
}

const showEmailToggle = document.querySelector("#extShowEmail");

if (showEmailToggle) {
showEmailToggle.addEventListener("click", (e) => {
e.preventDefault();
gtag("event", "show_email");
// HTML <a> with mailto: -> base64 -> HEX
const hexData = "5047456761484a6c5a6a306962574670624852764f6d5a6864554275634755755932302f63335669616d566a6444314761573979615342536232786c4946526c63335270626d6336494334754c69492b5a6d4631514735775a53356a625477765954343d";
const span = document.createElement("span");
span.innerHTML = atob(String.fromCharCode(...hexData.match(/.{1,2}/g).map(byte => parseInt(byte, 16))));
const anchor = span.querySelector("a");
if (anchor && freeValue) {
anchor.href = anchor.href.split("subject=")[0] + `subject=${freeSubject}`;
}
showEmailToggle.replaceWith(span);
});
}
});
// Previous content moved to the mkdocs-nype theme
77 changes: 0 additions & 77 deletions docs/assets/stylesheets/extra.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,81 +12,4 @@
:root > * {
--md-primary-fg-color: #011742;
--md-accent-fg-color: #07bfc7;
}

/* Contact form settings */
#extShowEmail {
cursor: pointer;
outline: 0.1em solid var(--md-accent-fg-color);
border-radius: 0.2em;
}

#extShowEmail:hover code {
color: var(--md-accent-fg-color);
}

#extFormWrapper {
width: 100%;
}

@media screen and (max-width: 45em) {
#extFormWrapper form {
width: 100%;
}
}

@media screen and (min-width: 45em) {
#extFormWrapper form {
width: 50%;
}
}

#extFormWrapper form > .md-input {
display: block;
margin: 0 0 0.5rem 0;
width: 100%;
background: inherit;
}

#extFormWrapper form > .md-input:focus-visible {
outline: .1rem solid var(--md-accent-fg-color);
border: unset;
}

#extFormWrapper form > .md-input:valid {
outline: 1px solid #00dfc8;
border: unset;
}

#extFormWrapper form > textarea {
border-top: unset;
border-right: unset;
border-left: unset;
color: var(--md-typeset-color);
font-family: var(--md-text-font-family);
font-feature-settings: "kern", "liga";
height: 5rem;
padding-top: 0.6em;
}

#extFormWrapper form > textarea:focus-visible {
outline: 0;
}

#extFormWrapper form > button {
margin-top: 1rem;
width: 100%;
}

/* Contact form success settings */
.twemoji.extLargeSVG {
height: 7rem;
width: 100%;
}

.twemoji.extLargeSVG svg {
height: 7rem;
width: 7rem;
margin: 0 auto;
max-height: unset;
}
6 changes: 5 additions & 1 deletion docs/contact-success.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
---
title: Message Sent
nype_config:
js:
contact_form_success: true
container_css: hide-h1 justify
---
**Thanks for getting in touch!**

Your message has been recorded. We will get back to you as soon as possible.

:fontawesome-solid-handshake:{: .extLargeSVG}
:fontawesome-solid-handshake:{: .nype-large-emoji }
10 changes: 6 additions & 4 deletions docs/contact.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
---
title: Contact Us
description: Get in touch.
nype_config:
js:
contact_form: true
---
# Contact Form

Contact us on <span id="extShowEmail">`Show e-mail`</span> or fill out the form below.
Contact us on <span class="nype-code-button nype-show-email">`Show e-mail`</span> or fill out the form below.

<div id="extFormWrapper">
<form method="POST">
<div class="nype-form-wrapper">
<form class="nype-form" method="POST">
<label for="fullname">Full Name:</label>
<input
class="md-input"
Expand Down Expand Up @@ -46,7 +49,6 @@ Contact us on <span id="extShowEmail">`Show e-mail`</span> or fill out the form
></textarea>
<button
class="md-button md-button--primary"
id="extSubmitForm"
type="submit"
>Submit</button>
</form>
Expand Down
15 changes: 8 additions & 7 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ site_url: https://fioriroletesting.com/
copyright: Copyright &copy; 2024 Nype

theme:
name: material
name: nype
custom_dir: overrides
logo: assets/images/logo.png
favicon: assets/images/logo.png
nype_config:
js:
contact_form_action_hex: 6148523063484d364c79396d62334a74637935316269317a6447463061574d75593239744c325a76636d317a4c7a63304f546b314d445930597a63304f44566d4e6a55324e4755354d6a45304e6d5a6d596a6c6c5a574934596a63344e7a42695954553d
contact_form_email_hex: 5047456761484a6c5a6a306962574670624852764f6d5a6864554275634755755932302f63335669616d566a6444314761573979615342536232786c4946526c63335270626d6336494334754c69492b5a6d4631514735775a53356a625477765954343d

# Explicitly confirm there is awareness of files not in nav
not_in_nav: |
Expand Down Expand Up @@ -68,13 +72,10 @@ plugins:
- minify:
enabled: !ENV [CI, false]
minify_html: true
minify_js: true
minify_css: true
minify_js: false
minify_css: false
htmlmin_opts:
remove_comments: true
cache_safe: true
js_files:
- assets/javascripts/extra.js
css_files:
- assets/stylesheets/extra.css
- sap_icons

3 changes: 2 additions & 1 deletion overrides/main.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% extends "base.html" %}
{% extends "nype-base.html" %}

{% block extrahead %}
{{- super() -}}
<link rel="icon" sizes="192x192" href="{{ 'assets/images/logo.png' | url }}">
<link rel="apple-touch-icon" href="{{ 'assets/images/logo.png' | url }}" />
<meta property="robots" content="index, follow" />
Expand Down
4 changes: 1 addition & 3 deletions requirements.txt
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
mkdocs-material==9.5.27
mkdocs-material[imaging]
mkdocs-minify-plugin==0.8.0
git+https://github.com/nypesap/mkdocs-nype.git#egg=mkdocs_nype

0 comments on commit 2ff45e2

Please sign in to comment.