DOC-312 New header menu for docs v4 (#43)

2019-05-21 07:54:45 +10:00
parent 7da368fd2d
commit 6e15dfeeef
8 changed files with 556 additions and 139 deletions
@@ -0,0 +1,56 @@
+(function () {
+
+    if (typeof window.fetch === "undefined" ||
+        typeof window.$ === "undefined" ||
+        typeof window.localStorage === "undefined"
+    ) {
+        return;
+    }
+
+    var ENDPOINT = isStagingEnvironment()
+        ? "https://apps.staging.tiny.cloud/tiny/user/me/"
+        : "https://apps.tiny.cloud/tiny/user/me/";
+
+    var LS_KEY_VALUE = "tiny:docs:isAuthKey";
+    var LS_KEY_EXPIRE = "tiny:docs:isAuthKeyExpiry";
+    var EXPIRE_TIMEOUT = 15 * 60 * 1000;
+
+    var $getTinyBtn = $(".header-get-tiny-button, .header-get-tiny-button-mobile");
+    var $myAccountBtn = $(".header-my-account-button, .header-my-account-button-mobile");
+
+    function getIsAuthData() {
+
+        var isAuthFromStorage = localStorage.getItem(LS_KEY_VALUE) === "true";
+        var isAuthExpireFromStorage = parseInt(localStorage.getItem(LS_KEY_EXPIRE), 10);
+
+        if (isAuthFromStorage && isAuthExpireFromStorage > Date.now()) {
+            return renderMyAccountButton();
+        }
+
+        fetch(ENDPOINT, {
+            credentials: "include",
+            method: "GET",
+            mode: "cors"
+        }).then(function (response) {
+            return response.json()
+        }).then(function (response) {
+            localStorage.setItem(LS_KEY_VALUE, response.isAuthenticated);
+            localStorage.setItem(LS_KEY_EXPIRE, Date.now() + EXPIRE_TIMEOUT);
+            if (response.isAuthenticated) {
+                renderMyAccountButton();
+            }
+        });
+    }
+
+    function isStagingEnvironment() {
+        return window.location.hostname.indexOf("staging") ||
+            window.location.hostname.indexOf("localhost");
+    }
+
+    function renderMyAccountButton() {
+        $getTinyBtn.hide();
+        $myAccountBtn.css({ display: "block"});
+    }
+
+    $(document).ready(getIsAuthData);
+})();
@@ -1,67 +0,0 @@
-<div class="tiny-news-docs">
-    <div class="hide-on-mobile">
-      TinyMCE 5 is now live!&nbsp;
-      <a type="inverse"
-         href="https://go.tiny.cloud/blog/tinymce-5-power-meets-beauty/"
-         data-marketing="tiny-news-new-release-link">
-         Read the announcement
-      </a>
-    </div>
-  
-    <div class="hide-on-desktop">
-      <a type="inverse"
-         href="https://go.tiny.cloud/blog/tinymce-5-power-meets-beauty/"
-         data-marketing="tiny-news-new-release-link">
-        TinyMCE 5: Power meets beauty
-      </a>
-    </div>
-</div>
-
-<style type="text/css">
-
-    .tiny-news-docs {
-        height: 2.5rem;
-        text-align: center;
-        color: white;
-        background-color: #1976D2;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        z-index: 99999;
-    }
-
-    .tiny-news-docs a {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-        transition: border-bottom .25s;
-    }
-
-    .tiny-news-docs a:hover {
-        border-bottom: 1px solid white;
-    }
-
-    .tiny-news-docs .hide-on-mobile {
-        display: none;
-        overflow: hidden;
-        position: absolute;
-    }
-
-    @media screen and (min-width: 50em) {
-        .tiny-news-docs .hide-on-mobile {
-            display: inherit;
-            overflow: inherit;
-            position: inherit;
-        }
-    }
-
-    @media screen and (min-width: 50em) {
-        .tiny-news-docs .hide-on-desktop {
-            display: none;
-            overflow: hidden;
-            position: absolute;
-        }
-    }
-
-
-</style>
@@ -1,71 +1,133 @@
-<div class="new-header">
-    {% include notification.html %}
-    {% include_remote {{ site.origin }}/_docs/menu.html css="body > *" %}
+{% include template/notification.html %}
+{% include template/menu.html css="body > *" %}

-    <div class="top-bar">
-        <div>
-            <div class="versions">
-                <div class="dropdown">
-                    TinyMCE v4
-                    <div class="dropdown-arrow"></div>
-                    <div class="dropdown-options">
-                        <a class="link-gelato" href="/docs/">TinyMCE v5</a>
-                        <a class="link-gelato" href="/docs-4x/">TinyMCE v4</a>
-                        <a class="link-gelato" href="/docs-3x/">TinyMCE v3</a>
-                    </div>
+<style>
+    .modern-main {
+        width: 1140px;
+        margin: 0 auto;
+        display: flex;
+    }
+
+    .modern-navigation {
+        padding: 0;
+        position: relative;
+        width: 250px;
+        top: 0;
+        overflow-y: auto;
+        z-index: 1;
+    }
+
+    .modern-main-container {
+        width: auto;
+        flex-grow: 1;
+        padding-top: 16px;
+    }
+
+    main .modern-heading {
+        margin-left: 0;
+    }
+
+    main .modern-content {
+        margin-left: 0;
+    }
+
+    .modern-versions {
+        margin-bottom: 30px;
+    }
+
+    .modern-versions .dropdown {
+        width: 225px;
+        height: 42px;
+    }
+
+    .modern-versions .dropdown .dropdown-arrow {
+        width: 42px;
+        height: 42px;
+        border: none;
+        background-color: transparent;
+    }
+
+    @media screen and (max-width: 1126px) {
+        .modern-main {
+            flex-direction: column;
+            width: auto;
+        }
+
+        .modern-versions {
+            display: none;
+        }
+
+        .modern-navigation {
+            width: 100%;
+        }
+    }
+
+</style>
+
+<div class="modern-main {{ page.type }} {{ page.class }}">
+    <aside class="side-nav modern-navigation">
+        <div class="modern-versions">
+            <div class="dropdown">
+                TinyMCE v4
+                <div class="dropdown-arrow"></div>
+                <div class="dropdown-options">
+                    <a class="link-gelato" href="/docs/">TinyMCE v5</a>
+                    <a class="link-gelato" href="/docs-4x/">TinyMCE v4</a>
+                    <a class="link-gelato" href="/docs-3x/">TinyMCE v3</a>
                </div>
            </div>
-            <div class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
-                {% include breadcrumbs.html %}
-            </div>
-            <div class="search">
-                <input type="text" name="seach" value="" id="searchInput" placeholder="Search in documentation" tabindex="1">
-            </div>
        </div>
-    </div>

-</div>
-
-<div class="main {{ page.type }} {{ page.class }}">
-    <aside class="side-nav">
        <div id="side-nav-controller">Expand Menu</div>
+
        {% assign nav = site.data.nav | array_concat:site.data.nav_api %}
        {% include nav.html links=nav preceding_address="/" %}
+
    </aside>

-    <div class="heading">
-        <h1 class="light">{{ page.title }}</h1>
-        <h2 class="light">{{ page.description }}</h2>
-        {% if page.url contains '/api/' %}
-        <!-- Disabled since there is no git link -->
-        {% else %}
-        <a class="contribute link-garlic" href="https://github.com/tinymce/tinymce-docs/tree/master/{{ page.path }}">Contribute to this page<i></i></a>
-        {% endif %}
-        {% if page.controls %}
-        {% assign controls = page.controls | split:',' %}
-        <div class="badges">
-            {% for control in controls %}<span class="badge-naan lg">+ {{ control }}</span> {% endfor %}
+    <main class="modern-main-container">
+        <div class="heading modern-heading">
+            <h1 class="light">{{ page.title }}</h1>
+            <h2 class="light">{{ page.description }}</h2>
+            {% if page.url contains '/api/' %}
+            <!-- Disabled since there is no git link -->
+            {% else %}
+            <a class="contribute link-garlic"
+               href="https://github.com/tinymce/tinymce-docs-4x/tree/master/{{ page.path }}">Contribute to this page<i></i></a>
+            {% endif %}
+            {% if page.controls %}
+            {% assign controls = page.controls | split:',' %}
+            <div class="badges">
+                {% for control in controls %}<span class="badge-naan lg">+ {{ control }}</span> {% endfor %}
+            </div>
+            {% endif %}
        </div>
-        {% endif %}
-    </div>

-    <div class="content">
-        {{ content }}
-        {% include feedback.html %}
-        <p class="let-us-know">
-            Can't find what you're looking for?
-            <a href="#" data-modal="let-us-know">
-                Let us know.
-            </a>
-        </p>
-        {% include license.html %}
-    </div>
+        <div class="content modern-content">
+            {{ content }}
+            {% include feedback.html %}
+            <p class="let-us-know">
+                Can't find what you're looking for?
+                <a href="#" data-modal="let-us-know">
+                    Let us know.
+                </a>
+            </p>
+            {% include license.html %}
+        </div>
+
+        <div style="clear: both"></div>
+    </main>
+
 </div>

 {% include_remote {{ site.origin }}/_docs/footer.html css="body > *" %}
 <script src="{{ site.shared_baseurl }}/scripts/common.min.js"></script>
 <script src="{{ site.shared_baseurl }}/scripts/docs.min.js"></script>

+<script>
+    {% include js/my-account-button.js %}
+</script>
+
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
 <script type="text/javascript">
    docsearch({
@@ -16,40 +16,33 @@
    <link href="{{ site.shared_baseurl }}/css/common.min.css" rel="stylesheet">
    <link href="{{ site.shared_baseurl }}/css/docs.min.css" rel="stylesheet">
    <link href="//fast.fonts.net/cssapi/5d4ae438-4aca-4c75-8249-d9486d12b12e.css" rel="stylesheet">
+
    {% include_remote {{ site.origin }}/_docs/head.html css="head > *" %}

+    {% assign tinymce_script_tag_included = false %}

    <style type="text/css">
-        .new-header {
-            position: fixed;
-            z-index: 1000;
-            width: 100%;
+        .codepen {
+            margin-top: 2em;
+            margin-bottom: 2em;
        }

-        .menu.menu--docs {
-            position: relative !important;
-            background-color: #fff;
-            border-bottom: 1px solid #dfdfdf;
+        .codepen_tab_selected, .codepen_tab_deselected {
+            padding-left: 2em;
+            padding-right: 2em;
        }

-        .top-bar {
-            position: relative !important;
-            top: 0 !important;
+        .codepen_tab_selected {
+            border-bottom: 2px solid #2276d2;
        }

-        aside {
-            padding-top: 70px;
+        .codepen_tab_deselected:hover {
+            border-bottom: 2px solid #abcdef;
        }

-        .main {
-            padding-top: 34px;
-        }
-
-        @media screen and (min-width: 50em) {
-
-            .main {
-                padding-top: 194px;
-            }
+        .codepen_tabs {
+            margin-bottom: 1em;
        }
    </style>
+
 </head>
@@ -0,0 +1,237 @@
+<style>
+    .modern-header {
+        position: sticky;
+        top: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        z-index: 3;
+        background-color: white;
+    }
+
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        header.modern-header {
+            position: relative;
+        }
+    }
+
+    .nav-container {
+        align-items: center;
+        justify-content: space-between;
+        margin: 0 auto;
+        max-width: 100%;
+        padding: 0 2rem;
+        display: flex;
+        flex-direction: row;
+        font-size: inherit;
+    }
+
+    .nav-container__menu-container {
+        position: relative;
+        width: 100%;
+        justify-content: space-between;
+        flex-direction: row;
+        z-index: 20;
+        background: white;
+        display: flex;
+        align-items: center;
+    }
+
+    .nav-container__homepage-link-container {
+        box-sizing: border-box;
+        position: relative;
+        z-index: 9999;
+        height: auto;
+        margin: 0 7rem 0 0;
+        padding: 1rem 0;
+        background: none;
+        display: flex;
+        align-items: flex-end;
+        width: 25%;
+    }
+
+    .nav-container__homepage-link-container > span {
+        color: #3ED0A6;
+        display: inline-block;
+        margin-bottom: 5px;
+        font-size: 18px;
+        margin-left: 5px;
+    }
+
+    .nav-container__docs-link:hover {
+        color: #28ad86;
+    }
+
+    .nav-container__right-container {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 25%;
+    }
+
+    header .header-get-tiny-button {
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+        outline: currentcolor none medium;
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgb(25, 118, 210);
+        border-radius: 0.1875rem;
+        padding: 0.5rem 3rem;
+        line-height: 1.4;
+        font-size: 1rem;
+        font-weight: 700;
+        text-align: center;
+        text-rendering: auto;
+        text-decoration: none;
+        cursor: pointer;
+        color: rgb(255, 255, 255);
+        background-color: rgb(25, 118, 210);
+        transition: color 0.1s ease 0s, background-color 0.1s ease 0s, border-color 0.1s ease 0s;
+    }
+
+    .header-my-account-button {
+        display: none;
+        font-weight: 900;
+        color: rgb(74, 74, 74);
+        font-size: 16px;
+        padding-top: 6px;
+    }
+
+    .menu-mobile .menu-nav > .header-my-account-button-mobile {
+        display: none;
+    }
+
+    .header-my-account-button:hover {
+        color: rgb(25, 118, 210) !important;
+    }
+
+
+    .header-my-account-button:hover g {
+        stroke: rgb(25, 118, 210) !important;
+    }
+
+    .header-my-account-button__icon {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 9px;
+    }
+
+    .header-my-account-button__icon svg {
+        width: 24px;
+        height: 26px;
+    }
+
+    .header-my-account-button__icon g {
+        stroke: rgba(74, 74, 74, 0.75);
+    }
+
+
+    .modern-menu-mobile {
+        position: absolute;
+        background: transparent;
+        z-index: 21;
+    }
+
+    .modern-menu-mobile .menu-bar {
+        border: none;
+    }
+
+    .modern-menu-mobile .menu-nav {
+        box-shadow: 0 9px 10px -5px rgba(0, 0, 0, 0.34);
+    }
+
+    .modern-menu-mobile .menu-nav.open {
+        top: 68px;
+    }
+
+    .modern-menu-mobile__btn-open {
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQwIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjMgKDEyMDcyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5idG4tbWVudTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJhc3NldHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDIzLjAwMDAwMCwgLTY2NTYuMDAwMDAwKSIgaWQ9ImJ0bi1tZW51IiBmaWxsPSIjNTk1OTU5Ij4KICAgICAgICAgICAgPGcgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAyMy4wMDAwMDAsIDY2NTYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iUmVjdGFuZ2xlLTIyNCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMTQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjI4IiB3aWR0aD0iNDAiIGhlaWdodD0iNCIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+        width: 24px;
+        height: 24px;
+        display: block;
+        background-size: 24px 24px;
+        right: 20px;
+        position: absolute;
+        top: 20px;
+        opacity: 0.6;
+    }
+
+    .modern-menu-mobile__btn-open.active {
+        opacity: 1;
+    }
+
+    @media screen and (max-width: 1126px) {
+        .nav-container__right-container {
+            display: none;
+        }
+
+        .menu-mobile {
+            display: block;
+        }
+    }
+
+</style>
+
+<header class="modern-header">
+    <div class="nav-container">
+        <div class="nav-container__menu-container">
+            <div class="nav-container__homepage-link-container">
+                <a data-marketing="link" type="primary" href="/docs-4x">
+                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTg2cHgiIGhlaWdodD0iMTk4cHgiIHZpZXdCb3g9IjAgMCA1ODYgMTk4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MC4yICg1NTA0NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iR3JvdXAiIGZpbGw9IiMxOTc1RDEiPgogICAgICAgICAgICA8cGF0aCBkPSJNODcuOCw2MS4xOSBMMTMxLjcsNjEuMTkgTDEzMS43LDcxIEw4Ny44LDcxIEw4Ny44LDYxLjE5IFogTTg3LjgsMTE5LjgxIEwxMzEuNywxMTkuODEgTDEzMS43LDEyOS41OCBMODcuOCwxMjkuNTggTDg3LjgsMTE5LjgxIFogTTczLjE3LDEwMC4yNyBMMTQ2LjMzLDEwMC4yNyBMMTQ2LjMzLDExMCBMNzMuMTcsMTEwIEw3My4xNywxMDAuMjcgWiBNNzMuMTcsODAuNzMgTDE0Ni4zMyw4MC43MyBMMTQ2LjMzLDkwLjUgTDczLjE3LDkwLjUgTDczLjE3LDgwLjczIFogTTI5LjI3LDkzIEwxMDkuNzgsMTcxLjE1IEwxOTAuMjMsOTIuOTkgTDEwOS43OCwxNC43OSBMMjkuMjcsOTMgWiBNMTA5LjQyLDAuMTMgTDE5Ny41NSw4NSBMMjEwLjMyLDczLjA5IEwyMTkuNSw4MS40IEwxMDkuNzUsMTg4LjIgTDIwLjQ1LDEwMS41MSBMOC42MywxMTIuOTIgTDAsMTA0LjU1IEwxMDkuNDIsMC4xMyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTUyMi40NiwxNTQuNDYgTDQ3Ni44LDQ2LjkyIEw0OTIuNjcsNDYuOTIgTDUzMCwxMzUuNTUgTDU2OS44Niw0Ni45MiBMNTg1LjcyLDQ2LjkyIEw1MTcuNzQsMTk3LjE1IEw1MDIuMDksMTk3LjE1IEw1MjIuNDYsMTU0LjQ2IFogTTM2NS43Miw0Ni45MiBMMzgwLjcyLDQ2LjkyIEwzODAuNzIsNjEuMTUgTDM4MS4xNSw2MS4xNSBDMzgyLjU2NzI5Nyw1OS4xOTQzMzMxIDM4NC4xNDI1NzUsNTcuMzU4MTgwMyAzODUuODYsNTUuNjYgQzM4OC4wOTA4MDEsNTMuNDU2MDMwMSAzOTAuNjE4NTY0LDUxLjU3NDUxMjkgMzkzLjM3LDUwLjA3IEMzOTYuNjU4ODA1LDQ4LjI1NDM1MTIgNDAwLjE0NDg5MSw0Ni44MjE2NjcgNDAzLjc2LDQ1LjggQzQwOC4xMjIwOSw0NC41OTExMTU4IDQxMi42MzM5MTMsNDQuMDA4NjE5MyA0MTcuMTYsNDQuMDcgQzQyMy45MjAwODQsNDQuMDExMTE3NyA0MzAuNjQ2ODA3LDQ1LjAyMzY3MDIgNDM3LjA5LDQ3LjA3IEM0NDMuNTI2NjI4LDQ5LjMwNTg4OTYgNDQ5LjM4MjU0LDUyLjk1MTMxNCA0NTQuMjMsNTcuNzQgQzQ1OC44ODk1MTEsNjIuMTQzMzE1IDQ2Mi41MTMzNTcsNjcuNTI2MTQ0IDQ2NC44NCw3My41IEM0NjcuNTA2NjY3LDc5LjkyNjY2NjcgNDY4Ljg0LDg3Ljc1MzMzMzMgNDY4Ljg0LDk2Ljk4IEw0NjguODQsMTU4LjE3IEw0NTMuODQsMTU4LjE3IEw0NTMuODQsOTYuOTMgQzQ1My44NCw4OS41OTY2NjY3IDQ1Mi44MDMzMzMsODMuNDMgNDUwLjczLDc4LjQzIEM0NDguOTg0NTY2LDczLjg4NzA4OTIgNDQ2LjI1MjEzNSw2OS43ODg0NDM0IDQ0Mi43Myw2Ni40MyBDNDM4Ljk0NDk3Miw2Mi44NDQxNDU3IDQzNC4zNDY5NjQsNjAuMjI5NDU3NCA0MjkuMzMsNTguODEgQzQyMS40NjUxMDQsNTYuMjM2OTE2NyA0MTIuOTg0ODk2LDU2LjIzNjkxNjcgNDA1LjEyLDU4LjgxIEMzOTUuMzk1Nzg3LDYxLjUzNzQxODcgMzg3LjUyOTgxOSw2OC42OTUzNzU2IDM4My45LDc4LjEyIEMzODEuNjk4MDEsODMuNzg2MjQ1NiAzODAuNjQwOTc1LDg5LjgzMjc1NjMgMzgwLjc5LDk1LjkxIEwzODAuNzksMTU4LjEyIEwzNjUuNzksMTU4LjEyIEwzNjUuNzIsNDYuOTIgWiBNMzIyLjg1LDQ2LjkyIEwzMzcuODUsNDYuOTIgTDMzNy44NSwxNTguMTIgTDMyMi44NSwxNTguMTIgTDMyMi44NSw0Ni45MiBaIE0zMjIuODUsNy42OSBMMzM3Ljg1LDcuNjkgTDMzNy44NSwzMy4zIEwzMjIuODUsMzMuMyBMMzIyLjg1LDcuNjkgWiBNMjYzLjkyLDU5LjY5IEwyMzkuMjcsNTkuNjkgTDIzOS4yNyw0Ni45MiBMMjYzLjkyLDQ2LjkyIEwyNjMuOTIsNy42OSBMMjc4LjkyLDcuNjkgTDI3OC45Miw0Ni45MiBMMzA3LDQ2LjkyIEwzMDcsNTkuNzMgTDI3OC45Miw1OS43MyBMMjc4LjkyLDE1OC4xMiBMMjYzLjkyLDE1OC4xMiBMMjYzLjkyLDU5LjY5IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"
+                         alt="Tiny logo" height="32px">
+                </a>
+                <span>
+                    <a href="/docs-4x" class="nav-container__docs-link">Docs</a>
+                </span>
+            </div>
+
+            {% include template/search.html %}
+
+            <div class="nav-container__right-container">
+
+                <a href="https://apps.tiny.cloud/?add-to-cart=197933"
+                   class="header-get-tiny-button"
+                   data-marketing="docs-header-get-started">Create Account</a>
+
+                <a href="https://apps.tiny.cloud/my-account/"
+                   class="header-my-account-button"
+                   data-marketing="docs-header-my-account">
+
+                    <i class="header-my-account-button__icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <g transform="translate(.75 .75)" stroke-width="1.5" fill="none" fill-rule="evenodd"
+                               stroke-linecap="round"
+                               stroke-linejoin="round">
+                                <circle cx="11.25" cy="9" r="5.25"></circle>
+                                <path d="M18.163 20.126a9.746 9.746 0 0 0-13.826 0"></path>
+                                <circle cx="11.25" cy="11.25" r="11.25"></circle>
+                            </g>
+                        </svg>
+                    </i>
+                    My Account
+                </a>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="menu-mobile modern-menu-mobile">
+        <a class="modern-menu-mobile__btn-open btn-open" href="#" title="Toggle menus"></a>
+        <nav class="menu-nav">
+            <a class="link-menu header-get-tiny-button-mobile"
+               href="https://apps.tiny.cloud/?add-to-cart=197933"
+               data-marketing="docs-header-get-started">Get Started</a>
+
+            <a href="https://apps.tiny.cloud/my-account/"
+               class="link-menu header-my-account-button-mobile"
+               data-marketing="docs-header-my-account">My Account</a>
+
+            <a class="link-menu" href="{{ site.shared_baseurl }}" data-marketing="docs-header-back-home">
+                Return to Tiny.cloud
+            </a>
+        </nav>
+    </div>
+</header>
@@ -0,0 +1,72 @@
+<div class="tiny-news-docs">
+    <div>
+        TinyMCE 5 webinar: Q1 review, migration tips, roadmap —&nbsp;
+        <a href="https://go.tiny.cloud/blog/tinymce-5-webinar-q1-review-migration-tips-roadmap-preview/"
+           data-marketing="tiny-news-webinar-blog-link">
+            Visit the blog
+        </a>
+    </div>
+
+    <div>
+        <a class="utility-link" href="{{ site.shared_baseurl }}" data-marketing="tiny-docs-news-back-home">
+            Return to Tiny.cloud
+        </a>
+    </div>
+</div>
+
+<style type="text/css">
+
+    .tiny-news-docs {
+        display: flex;
+        align-content: flex-start;
+        justify-content: space-between;
+        border-bottom: 1px solid #D2D2D2;
+        padding: 0.5rem 2rem 0.5rem;
+        text-align: center;
+        color: #4A4A4A;
+        background-color: white;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1000;
+        font-size: 0.75rem;
+        align-items: center;
+    }
+
+    .tiny-news-docs a {
+        color: rgb(25, 118, 210);
+        font-weight: 600;
+        text-decoration: none;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+        transition: border-bottom 0.25s ease 0s;
+    }
+
+        .tiny-news-docs a:hover {
+            border-bottom: 1px solid rgb(255, 255, 255);
+        }
+
+    .tiny-news-docs .utility-link {
+        margin: 0 1rem 0 0;
+        height: 1rem;
+        line-height: 1rem;
+        font-weight: 900;
+        color: #4A4A4A;
+    }
+
+    .tiny-news-docs .utility-link:hover{
+        color: #1976D2;
+    }
+
+    .tiny-news-docs .utility-link:last-child {
+        margin: 0;
+    }
+
+    @media screen and (max-width: 1126px) {
+        .tiny-news-docs {
+            display: none;
+            overflow: hidden;
+            position: absolute;
+        }
+    }
+
+
+</style>
@@ -0,0 +1,58 @@
+<style>
+    .new-search-input {
+        text-align: center;
+        width: 50%;
+    }
+
+    .new-search-input input {
+        background-image: url("{{ site.baseurl }}/images/search.svg");
+        background-repeat: no-repeat;
+        background-position: 670px center;
+        background-size: 20px;
+        background-color: white;
+        display: inline-block;
+        height: 40px;
+        text-align: left;
+        padding: 12px 40px 12px 12px;
+        border-radius: 3px;
+        border: 1px solid #B9B9B9;
+        width: 700px;
+        margin-left: -54px;
+    }
+
+    .modern-header .algolia-autocomplete {
+        width: 100%;
+        direction: rtl !important;
+    }
+
+    .modern-header .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+        max-width: 850px;
+        width: 850px;
+    }
+
+    .modern-header .algolia-docsearch-suggestion--category-header {
+        display: none !important;
+    }
+
+    .modern-header .algolia-docsearch-suggestion--title {
+        font-weight: normal !important;
+    }
+
+    .modern-header .algolia-docsearch-suggestion--subcategory-column-text {
+        color: #000;
+    }
+
+    .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
+        left: 50%;
+        right: auto !important;
+    }
+
+    @media screen and (max-width: 1126px) {
+        .new-search-input {
+            display: none;
+        }
+    }
+</style>
+<div class="new-search-input">
+    <input type="text" name="seach" value="" id="searchInput" placeholder="Search in documentation" tabindex="1">
+</div>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g>
+        <path stroke-width="2"
+              d="m15.124516,15.466769l-4.39164,-4.855368c0.989473,-1.049088 1.533342,-2.420938 1.533342,-3.877395c0,-1.499891 -0.576376,-2.910672 -1.623495,-3.971001c-1.047102,-1.060328 -2.43856,-1.64516 -3.918698,-1.64516c-1.480138,0 -2.872338,0.584074 -3.918713,1.64516c-1.04636,1.061086 -1.623493,2.47111 -1.623493,3.971001c0,1.499892 0.57639,2.910675 1.623493,3.971004c1.047103,1.060328 2.438575,1.64516 3.918713,1.64516c1.27544,0 2.484379,-0.433564 3.46424,-1.231806l4.39164,4.854611c0.073156,0.080867 0.172176,0.121301 0.272684,0.121301c0.089409,0 0.17882,-0.032192 0.249762,-0.098093c0.150753,-0.140026 0.160351,-0.376661 0.022909,-0.52867l-0.000744,-0.000744zm-13.20447,-8.732763c0,-2.683778 2.154807,-4.867337 4.803237,-4.867337c2.648429,0 4.803237,2.183558 4.803237,4.867337c0,2.68378 -2.154808,4.867339 -4.803237,4.867339c-2.648429,0 -4.803237,-2.183558 -4.803237,-4.867339l0,0z"></path>
+    </g>
+</svg>