Skip to content

Commit

Permalink
add b homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@limptwiglet
limptwiglet committed Nov 14, 2023
1 parent 8de165f commit 3cd69e6
Show file tree
Hide file tree
Showing 4 changed files with 362 additions and 0 deletions.
10 changes: 10 additions & 0 deletions _sass/_homepage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ html {
gap: $p-3xl;
flex-direction: row;
}

.home-header-hero-text {
flex: 0 1 50%;
}
Expand Down Expand Up @@ -1153,6 +1154,11 @@ html {
}
}

&__image {
margin-bottom: $p-l;
width: 100%;
}

&__boxes {
@media (min-width: 920px) {
padding: $p-xl 0;
Expand Down Expand Up @@ -1184,6 +1190,10 @@ html {
background-color: $light-gray;
border-radius: 10px;

&__box--b {
grid-template-rows: auto min-content 1fr min-content;
}

&--alt {
background: $blue;
border-radius: 10px;
Expand Down
352 changes: 352 additions & 0 deletions b.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
---
layout: default
title: WireMock - flexible, open source API mocking
description: WireMock is a tool for building mock APIs. API mocking enables you build stable, predictable development environments when the APIs you depend on are unreliable or don't exist.
header_signup_link: "https://www.wiremock.io/product?utm_source=wiremock.org&utm_medium=referral&utm_campaign=masthead"
---

<style>
#main {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

#a-wiremock-cloud {
display: none;
}
</style>

<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 home-hero__box--b">
<img
src="{{ '/images/home/oss.png' | absolute_url }}"
alt="WireMock OSS"
class="home-hero__image"
/>
<h2 class="home-hero__heading">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--b home-hero__box--alt">
<img
src="{{ '/images/home/cloud.png' | absolute_url }}"
alt="WireMock cloud"
class="home-hero__image"
/>
<h2 class="home-hero__heading">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>

<div class="home-header-wrapper">
<div class="container">
<div class="home-header-container">
<div class="home-header-hero-text">
<h1>
<a id="opensource"></a> Flexible API Mocking for Testing and
Development
</h1>

<div class="summary-header-stats">
<a
href="https://github.com/wiremock/wiremock/stargazers"
target="_blank"
>
<img
alt="GitHub Repo stars"
src="https://img.shields.io/github/stars/wiremock/wiremock?style=social"
/>
</a>
<a href="https://github.com/wiremock/wiremock" target="_blank">
<img
alt="GitHub forks"
src="https://img.shields.io/github/forks/wiremock/wiremock?style=social"
/>
</a>
<a href="https://github.com/wiremock/" target="_blank">
<img
alt="Downloads"
src="https://img.shields.io/badge/Downloads-5M%2B%20%2F%20month-white?style=social"
/>
</a>
<a href="https://github.com/wiremock/" target="_blank">
<img
alt="Contributors"
src="https://img.shields.io/badge/Contributors-279-white?style=social&logo=github"
/>
</a>

<!-- Automate pulling with fancy style
<a href="https://github.com/wiremock/" target="_blank">
<img alt="Contributors" src="https://cauldron.io/project/7478/export/svg/git_contributors.svg" >
</a>
--></div>

<p>
WireMock is a tool for building mock APIs. Create stable development
environments, isolate yourself from flakey 3rd parties and simulate
APIs that don't exist yet.
</p>

<div class="wiremock-cloud__buttons">
<a href="{{ '/docs/' | absolute_url }}" class="btn t-6"
>Documentation</a
>
<a
href="{{ site.community_slack.join_url | absolute_url }}"
class="btn btn--inverse t-6"
>Slack Community</a
>
</div>
</div>
<div class="home-header-hero-text whats-hot">
<h2>
<img
src="/images/logos/doc-sections/loudspeaker.svg"
width="32px"
/>&nbsp; Join us for Hacktoberfest 2023!
</h2>
<p>Learn WireMock and contribute to open source</p>
<p>
<a href="./events/hacktoberfest">
<img
src="/images/events/hacktoberfest/wiremock_hacktoberfest_header.png"
width="100%"
/>
</a>
</p>
<p>
This October we participate in Hacktoberfest - a global open source
hack fest. We invite you to join us, regardless of your profile and
technology stack.
</p>
<p>
Adopt WireMock in your projects, contribute new features and fixes,
improve docs, create new demos and artwork, etc.
</p>
<p>
<a href="./events/hacktoberfest">Learn More...</a>
</p>
</div>
</div>
</div>
</div>

<div id="wiremock-cloud-learn-more">
<div class="container">
<a id="a-wiremock-cloud" href="#wiremock-cloud-learn-more">z</a>
<div class="wiremock-cloud-wrapper">
<div class="wiremock-cloud-img-wrapper">
<img
class="wiremock-cloud-img"
src="{{ '/images/wiremock-cloud/hero-screenshot.png' | absolute_url }}"
alt="wiremock cloud screenshot"
/>
</div>
<div class="wiremock-cloud-vLine"></div>

<div id="wiremock-cloud" class="wiremock-cloud-details">
<img
src="/assets/svg/cloud-logo.svg"
|
alt="wiremock cloud logo"
class="logo"
/>
<h3 class="heading t-4">Hosted API mocking for everyone</h3>

<ul class="mocklab-callout-bullets">
<li>SaaS, nothing to install</li>
<li>For individuals, teams and enterprises</li>
<li>Intuitive web UI for developers</li>
<li>OpenAPI, Swagger and Postman import</li>
<li><b style="color: red">NEW:</b> Chaos Engineering</li>
<li>Generous free plan</li>
</ul>

<div class="wiremock-cloud__buttons">
<a
href="https://www.wiremock.io/product?utm_source=wiremock.org&utm_medium=referral&utm_campaign=homepage-callout_learn-more"
class="btn t-6"
>Learn more</a
>
<a
href="https://app.wiremock.cloud/signup?utm_source=wiremock.org&utm_medium=referral&homepage-callout_try-it-now"
class="btn btn--inverse t-6"
>Sign Up for Free</a
>
</div>
</div>
</div>
</div>

<div class="key-features-wrapper">
<div class="container">
<h2 class="keyFeaturesTXT">Key Features</h2>
<p class="keyFeaturesInfo">
WireMock frees you from dependency on unstable APIs and allows you to
develop with confidence. It's easy to launch a mock API server and
simulate a host of real-world scenarios and APIs - including REST, SOAP,
OAuth2 and more.
</p>
<div class="container key-features-grid">
<div class="key-features-card">
<div class="key-features__icon">
<img
src="{{ '/images/requestIcon.svg' | absolute_url }}"
alt="Wiremock Features"
/>
</div>
<p>Advanced request matching</p>
</div>
<div class="key-features-card">
<div class="key-features__icon">
<img
src="{{ '/images/responseIcon.svg' | absolute_url }}"
alt="wiremock dynamic response"
/>
</div>
<p>Dynamic response templating</p>
</div>
<div class="key-features-card">
<div class="key-features__icon">
<img
src="{{ '/images/unitTestIcon.svg' | absolute_url }}"
alt="wiremock unit tests"
/>
</div>
<p>
Run in your unit tests, on your laptop or in your test environment.
</p>
</div>
<div class="key-features-card">
<div class="key-features__icon">
<img
src="{{ '/images/faultIcon.svg' | absolute_url }}"
alt="wiremock fault and latency"
/>
</div>
<p>Fault and latency injection</p>
</div>
<div class="key-features-card">
<div class="key-features__icon">
<img
src="{{ '/images/recordIcon.svg' | absolute_url }}"
alt="wiremock record playback"
/>
</div>
<p>Record / Playback</p>
</div>
<div class="key-features-card">
<div class="key-features__icon">
<img
src="{{ '/images/httpIcon.svg' | absolute_url }}"
alt="wiremock java, python, http"
/>
</div>
<p>Java, Python, HTTP and</p>
<p>JSON file APIs</p>
</div>
</div>
<a class="key-features__cta btn t-6" href="docs/">Full Documentation</a>
</div>
</div>
<div class="downloads-wrapper container">
<h2 class="t-2">Downloads</h2>
<p class="keyFeaturesInfo">
WireMock is available as a standalone service, Java library and
integrations for modern languages and technology stacks.
</p>

{% include downloads.html show_standalone="true" %}
</div>

<div class="faq-wrapper">
<div class="container faq">
<h2 class="faq__title">Frequently Asked Questions</h2>

<dl class="faq-list">
<dt>What is WireMock? <i class="faq-list__icon"></i></dt>
<dd>
WireMock is a free API mocking tool that can be run as a standalone
server, or in a hosted version via the
<a href="https://wiremock.io/">WireMock Cloud</a> managed service.
</dd>

<dt>What is API mocking? <i class="faq-list__icon"></i></dt>
<dd>
API mocking involves creating a simple simulation of an API, accepting
the same types of request and returning identically structured
responses as the real thing, enabling fast and reliable development
and testing.
</dd>

<dt>When do you need to mock APIs? <i class="faq-list__icon"></i></dt>
<dd>
API mocking is typically used during development and testing as it
allows you to build your app without worrying about 3rd party APIs or
sandboxes breaking. It can also be used to rapidly prototype APIs that
don’t exist yet.
</dd>

<dt>How do you create an API mock? <i class="faq-list__icon"></i></dt>
<dd>
WireMock supports several approaches for creating mock APIs - in code,
via its REST API, as JSON files and by recording HTTP traffic proxied
to another destination.
</dd>

<dt>What makes WireMock unique? <i class="faq-list__icon"></i></dt>
<dd>
WireMock has a rich
<a href="docs/request-matching/">matching system</a>, allowing any
part of an incoming request to be matched against complex and precise
criteria. Responses of any complexity can be dynamically generated via
the Handlebars based templating system. Finally, WireMock is easy to
integrate into any workflow due to its numerous
<a href="docs/extending-wiremock/">extension points</a> and
comprehensive APIs.
</dd>

<dt>Is WireMock open source? <i class="faq-list__icon"></i></dt>
<dd>
Yes, WireMock is a completely open source API mocking tool (<a
href="https://github.com/wiremock/wiremock"
>GitHub repo</a
>). If you’re looking for a hosted version of WireMock, check out
<a href="https://wiremock.io/">WireMock Cloud</a>.
</dd>

<dt>Is WireMock a free service? <i class="faq-list__icon"></i></dt>
<dd>WireMock is completely free under the Apache 2.0 license.</dd>
</dl>
</div>
</div>
</div>
Binary file added images/home/cloud.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/home/oss.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3cd69e6

Please sign in to comment.