Skip to content

Commit

Permalink
Adds basic static template that seems to work... Kinda
Browse files Browse the repository at this point in the history
Requires us to avoid loading the material css because it seems impossible to get it to load correctly.
We then need to have a specific body class so we know its a basic template so we can add some custom css
to hide some of the material elements from the header
  • Loading branch information
limptwiglet committed Jan 12, 2024
1 parent 68de28f commit 8f6bde3
Show file tree
Hide file tree
Showing 8 changed files with 178 additions and 68 deletions.
3 changes: 3 additions & 0 deletions _docs_theme/assets/stylesheets/static.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
background: red;
}
143 changes: 80 additions & 63 deletions _docs_theme/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,79 +25,88 @@

<a href="{{ config.site_url }}.." class="masthead__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="254" height="30" viewBox="0 0 254 30" fill="none">
<path d="M174.761 30C183.971 30 190.65 23.3195 190.65 14.8963C190.691 6.59751 183.971 0 174.761 0C165.552 0 158.831 6.51452 158.831 14.8963C158.831 23.195 165.552 30 174.761 30ZM168.373 14.8963C168.373 11.0373 171.235 8.13278 174.761 8.13278C178.246 8.13278 181.108 10.9959 181.108 14.8963C181.15 18.8382 178.287 21.8672 174.761 21.8672C171.235 21.8672 168.373 18.8382 168.373 14.8963Z" fill="#FF9505"/>
<path d="M207.83 29.917C215.422 29.917 219.57 25.7261 220.815 23.195L214.675 19.0041C214.011 20.2075 212.518 22.2407 208.287 22.2407C204.595 22.2407 201.442 19.4606 201.442 15.0622C201.442 10.5809 204.719 7.67635 208.37 7.71784C211.813 7.75933 213.555 9.46058 214.468 10.8299L220.815 6.22406C218.907 3.15353 214.509 0.124482 207.83 0.124482C199.202 0.124482 191.9 6.0166 191.9 15.0622C191.9 24.1909 199.077 29.917 207.83 29.917Z" fill="#FF9505"/>
<path d="M223.095 0.456431V29.5021H232.636V21.7427L235.374 19.0041L242.634 29.5021H254L242.094 12.2822L253.834 0.456431H241.845L232.636 9.70954V0.456431H223.095Z" fill="#FF9505"/>
<path d="M153.826 0.404052L145.169 0.404051L140.258 15.9091L135.384 0.40405L126.727 0.40405L117.561 29.5021H126.182L131.056 14.0801L135.93 29.5021H144.587L149.497 14.0801L154.371 29.5021H162.992L153.826 0.404052Z" fill="#FF9505"/>
<path d="M174.761 30C183.971 30 190.65 23.3195 190.65 14.8963C190.691 6.59751 183.971 0 174.761 0C165.552 0 158.831 6.51452 158.831 14.8963C158.831 23.195 165.552 30 174.761 30ZM168.373 14.8963C168.373 11.0373 171.235 8.13278 174.761 8.13278C178.246 8.13278 181.108 10.9959 181.108 14.8963C181.15 18.8382 178.287 21.8672 174.761 21.8672C171.235 21.8672 168.373 18.8382 168.373 14.8963Z"
fill="#FF9505"/>
<path d="M207.83 29.917C215.422 29.917 219.57 25.7261 220.815 23.195L214.675 19.0041C214.011 20.2075 212.518 22.2407 208.287 22.2407C204.595 22.2407 201.442 19.4606 201.442 15.0622C201.442 10.5809 204.719 7.67635 208.37 7.71784C211.813 7.75933 213.555 9.46058 214.468 10.8299L220.815 6.22406C218.907 3.15353 214.509 0.124482 207.83 0.124482C199.202 0.124482 191.9 6.0166 191.9 15.0622C191.9 24.1909 199.077 29.917 207.83 29.917Z"
fill="#FF9505"/>
<path d="M223.095 0.456431V29.5021H232.636V21.7427L235.374 19.0041L242.634 29.5021H254L242.094 12.2822L253.834 0.456431H241.845L232.636 9.70954V0.456431H223.095Z"
fill="#FF9505"/>
<path d="M153.826 0.404052L145.169 0.404051L140.258 15.9091L135.384 0.40405L126.727 0.40405L117.561 29.5021H126.182L131.056 14.0801L135.93 29.5021H144.587L149.497 14.0801L154.371 29.5021H162.992L153.826 0.404052Z"
fill="#FF9505"/>
<path d="M56.904 0.456553H47.3627V29.5022H56.904V0.456553Z" fill="#0FB2EF"/>
<path d="M60.8596 29.5022H70.401V21.7429H72.4752L77.6608 29.5022H88.4467L82.2655 20.2491C85.5428 18.4234 87.3681 15.0624 87.3681 11.1205C87.3266 5.18684 83.1782 0.456553 76.0429 0.456553H60.8596V29.5022ZM75.4206 8.04991C77.3289 8.04991 78.283 9.58518 78.283 11.1205C78.283 12.6142 77.3289 14.1495 75.4206 14.1495H70.401V8.04991H75.4206Z" fill="#0FB2EF"/>
<path d="M90.5191 0.456553V29.5022H114.539V22.0333H100.061V18.5893H112.506V11.3694H100.061V7.92543H114.539V0.456553H90.5191Z" fill="#0FB2EF"/>
<path d="M9.1661 29.5022H17.823L22.7334 13.9971L27.6074 29.5022H36.2643L45.4304 0.404175H36.8099L31.9358 15.8261L27.0618 0.404175H18.4049L13.4945 15.8261L8.62049 0.404175H0L9.1661 29.5022Z" fill="#0FB2EF"/>
<path d="M60.8596 29.5022H70.401V21.7429H72.4752L77.6608 29.5022H88.4467L82.2655 20.2491C85.5428 18.4234 87.3681 15.0624 87.3681 11.1205C87.3266 5.18684 83.1782 0.456553 76.0429 0.456553H60.8596V29.5022ZM75.4206 8.04991C77.3289 8.04991 78.283 9.58518 78.283 11.1205C78.283 12.6142 77.3289 14.1495 75.4206 14.1495H70.401V8.04991H75.4206Z"
fill="#0FB2EF"/>
<path d="M90.5191 0.456553V29.5022H114.539V22.0333H100.061V18.5893H112.506V11.3694H100.061V7.92543H114.539V0.456553H90.5191Z"
fill="#0FB2EF"/>
<path d="M9.1661 29.5022H17.823L22.7334 13.9971L27.6074 29.5022H36.2643L45.4304 0.404175H36.8099L31.9358 15.8261L27.0618 0.404175H18.4049L13.4945 15.8261L8.62049 0.404175H0L9.1661 29.5022Z"
fill="#0FB2EF"/>
</svg>
</a>

<nav id="site-nav">
<ul class="visible-links">
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}"> Docs </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}docs"> WireMock </a>
<a href="{{ config.site_url }}docs/mock-api-templates"> Mock API Templates </a>
<a href="https://docs.wiremock.io/getting-started/?utm_source=wiremock.org&utm_medium=masthead_doc-links&utm_campaign=2022_baseline"> WireMock Cloud </a> <!-- General link --> <a href="https://wiremock.org/external-resources"> External Resources </a> <!-- Show the preview link -->
<a href="{{ config.site_2x_url }}docs/"> WireMock 2.x (Archive) </a>
</div>
</div>
</span>
<span class="navlink">
<a href="{{ config.site_url }}"> Docs </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}docs"> WireMock </a>
<a href="{{ config.site_url }}docs/mock-api-templates"> Mock API Templates </a>
<a href="https://docs.wiremock.io/getting-started/?utm_source=wiremock.org&utm_medium=masthead_doc-links&utm_campaign=2022_baseline"> WireMock Cloud </a>
<!-- General link -->
<a href="https://wiremock.org/external-resources"> External Resources </a>
<!-- Show the preview link -->
<a href="{{ config.site_2x_url }}docs/"> WireMock 2.x (Archive) </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}resources/community-support"> Need Help? </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="{{ config.site_url }}community/slack"> Q&A on Slack </a>
<a href="https://stackoverflow.com/questions/tagged/wiremock"> StackOverflow </a>
<a href="{{ config.site_url }}resources/community-support"> Community Support </a>
<a href="{{ config.site_url }}resources/commercial-support"> Commercial Options </a>
</div>
</div>
</span>
<span class="navlink">
<a href="{{ config.site_url }}resources/community-support"> Need Help? </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="{{ config.site_url }}community/slack"> Q&A on Slack </a>
<a href="https://stackoverflow.com/questions/tagged/wiremock"> StackOverflow </a>
<a href="{{ config.site_url }}resources/community-support"> Community Support </a>
<a href="{{ config.site_url }}resources/commercial-support"> Commercial Options </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}/participate"> Participate </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}community/slack"> Community Slack </a>
<a href="{{ config.site_url }}community/contributing/README.md"> Contributor Guide </a>
<a href="https://github.com/wiremock/"> Our GitHub org</a>
<a href="https://github.com/wiremock/wiremock.org"> This Website repo </a> <!-- General link -->
<a href="{{ config.site_url }}dotgithub/CODE_OF_CONDUCT"> Code of Conduct </a>
</div>
</div>
</span>
<span class="navlink">
<a href="{{ config.site_url }}/participate"> Participate </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<!-- General link --> <a href="{{ config.site_url }}community/slack"> Community Slack </a>
<a href="{{ config.site_url }}community/contributing/README.md"> Contributor Guide </a>
<a href="https://github.com/wiremock/"> Our GitHub org</a>
<a href="https://github.com/wiremock/wiremock.org"> This Website repo </a> <!-- General link -->
<a href="{{ config.site_url }}dotgithub/CODE_OF_CONDUCT"> Code of Conduct </a>
</div>
</div>
</span>
</li>
<li class="masthead__menu-item">
<span class="navlink">
<a href="{{ config.site_url }}resources/"> Resources </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="https://library.wiremock.org/"> Mock API Templates Library </a>
<a href="https://github.com/wiremock/ecosystem"> WireMock Ecosystem </a>
<a href="https://twitter.com/wiremockorg"> Twitter </a>
<a href="https://fosstodon.org/@wiremock"> Mastodon </a>
<a href="https://community.wiremock.io/"> Slack Archive </a>
<a href="{{ config.site_url }}resources/external"> External Resources </a>
</div>
</div>
</span>
<span class="navlink">
<a href="{{ config.site_url }}resources/"> Resources </a>
<div class="divSubNav">
<div class="divSubNav__inner">
<a href="https://library.wiremock.org/"> Mock API Templates Library </a>
<a href="https://github.com/wiremock/ecosystem"> WireMock Ecosystem </a>
<a href="https://twitter.com/wiremockorg"> Twitter </a>
<a href="https://fosstodon.org/@wiremock"> Mastodon </a>
<a href="https://community.wiremock.io/"> Slack Archive </a>
<a href="{{ config.site_url }}resources/external"> External Resources </a>
</div>
</div>
</span>
</li>
</ul>
</nav>

<!-- Button to open search modal -->
{% if "material/search" in config.plugins %}
{% if ("material/search" in config.plugins) and (noSearch is not defined) %}
<label class="md-header__button md-icon" for="__search">
{% set icon = config.theme.icon.search or "material/magnify" %}
{% include ".icons/" ~ icon ~ ".svg" %}
Expand All @@ -107,16 +116,24 @@
{% include "partials/search.html" %}
{% endif %}

<div class="masthead__cta"> <a href="https://wiremock.io/product?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline" title="WireMock Cloud" class="btn t-6"> Go to WM Cloud </a> <span class="masthead__cta-note">Free forever. No credit card needed</span></div>
<div class="masthead__cta">
<a
href="https://wiremock.io/product?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline"
title="WireMock Cloud" class="btn t-6">Go to WM Cloud</a>
<span class="masthead__cta-note">Free forever. No credit card needed</span>
</div>
<div id="overlay-menu" class="overlay-menu"></div>
<div class="mobile-menu-wrapper">
<img id="closeMenuIcon" class="closeMenuIcon" src="{{ config.site_url }}/images/closeMenuIcon.svg" />
<img id="closeMenuIcon" class="closeMenuIcon" src="{{ config.site_url }}/images/closeMenuIcon.svg"/>
<ul>
<li> <a href="https://wiremock.io?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline" title="WireMock Cloud" class="btn t-5"> Go to WM Cloud </a></li>
<li> <a href="{{ config.site_url }}"> Docs </a></li>
<li> <a href="{{ config.site_url }}resources/community-support"> Need Help? </a></li>
<li> <a href="{{ config.site_url }}participate"> Participate </a></li>
<li> <a href="{{ config.site_url }}resources/external"> Resources </a></li>
<li>
<a href="https://wiremock.io?utm_source=wiremock.org&utm_medium=masthead&utm_campaign=homepage_2022_baseline"
title="WireMock Cloud" class="btn t-5"> Go to WM Cloud </a>
</li>
<li><a href="{{ config.site_url }}"> Docs </a></li>
<li><a href="{{ config.site_url }}resources/community-support"> Need Help? </a></li>
<li><a href="{{ config.site_url }}participate"> Participate </a></li>
<li><a href="{{ config.site_url }}resources/external"> Resources </a></li>
</ul>
</div>
</nav>
Expand Down
15 changes: 12 additions & 3 deletions _docs_theme/static.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
<!doctype html>
{% import "partials/language.html" as lang with context %}
<!doctype html lang="{{ lang.t('language') }}" class="no-js">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{% for path in config.theme.css %}
<link rel="stylesheet" href="{{ path | url }}" />
{% endfor %}
{% for path in config.extra_css %}
<link rel="stylesheet" href="{{ path | url }}" />
{% endfor %}
<link href="https://fonts.googleapis.com/css?family=DM+Sans:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback" rel="stylesheet">
</head>
<body>
<body class="static">

{% partial "partials/header.html" %}
{% set noSearch = true %}
{% include "partials/header.html" %}

{% block content %}
{{ page.content }}
Expand Down
57 changes: 56 additions & 1 deletion _site/index.md
Original file line number Diff line number Diff line change
@@ -1 +1,56 @@
# WAT
---
template: static.html
---

<div class="home-header-wrapper">
<div class="container home-hero">
<h1 class="home-hero__title">Mock the APIs You Depend On</h1>

<div class="home-hero__boxes">
<div class="home-hero__box">
<h2 class="home-hero__heading">
<img
src="/images/svg/source.svg"
alt="source"
class="home-hero__icon"
/>
Open Source
</h2>
<p>
The core WireMock engine.<br />
Embed in your test code, run as a standalone process, or deploy via
Docker.
</p>

<div>
<a href="#opensource" class="btn t-6">Learn more</a>
</div>
</div>
<div class="home-hero__box home-hero__box--alt">
<h2 class="home-hero__heading">
<img
src="/images/svg/cloud.svg"
alt="cloud"
class="home-hero__icon"
/>
Cloud
</h2>

<div>
<p>
Web UI with team collaboration, OpenAPI + Swagger support, and chaos
testing.
</p>
<p>Start on the generous free-forever tier:</p>
</div>
<div>
<a
href="https://www.wiremock.io/product?utm_source=wiremock.org&utm_medium=referral&utm_campaign=exp_hero"
class="btn t-6 btn--inverse"
>Get Started</a
>
</div>
</div>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions extra_sass/_homepage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1245,6 +1245,7 @@ html {
&__heading {
margin: 0 0 $p-m;
font-size: $type-size-3;
color: unset;

@media (min-width: 920px) {
font-size: $type-size-2;
Expand Down
8 changes: 7 additions & 1 deletion extra_sass/_masthead.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
line-height: 24px;
align-items: center;
font-family: "DM Sans";

.md-search {
padding: 0;
}
}

.masthead__nav {
Expand Down Expand Up @@ -60,9 +64,11 @@
.masthead__cta {
text-align: center;
display: none;

@include breakpoint($medium-wide) {
display: block;
margin-left: $p-xl;

}

.btn {
Expand Down
18 changes: 18 additions & 0 deletions extra_sass/_static.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// As its not easy to override the main material themes contents we need to do some nasty modification to styles
// This file contains the overrides we need to make a minimal static page in the style of the original site

.static {
font-family: "DMSans", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
color: #0f0f0f;
font-size: 18px;
line-height: 1.5;

a {
text-decoration: none;
}

.md-nav__button {
display: none;
}
}

1 change: 1 addition & 0 deletions extra_sass/style.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
@import "_docs_root";
@import "_buttons";
@import "_homepage";
@import "_static";

0 comments on commit 8f6bde3

Please sign in to comment.