Skip to content

Commit

Permalink
feat: docs revamp
Browse files Browse the repository at this point in the history
Signed-off-by: Animesh <[email protected]>
  • Loading branch information
Sonichigo committed Aug 16, 2023
1 parent 6caf47e commit 42f5346
Show file tree
Hide file tree
Showing 41 changed files with 1,078 additions and 142 deletions.
19 changes: 7 additions & 12 deletions src/components/Intro.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function Languages() {
<li className="">
<Link
className="flex items-center space-x-3 hover:underline"
to={useBaseUrl("/docs/go/installation")}
to={useBaseUrl("/docs/quickstart/samples-gin")}
>
<img
className="h-8 w-8 transition hover:scale-110"
Expand All @@ -47,7 +47,6 @@ function Languages() {
<li className="">
<Link
className="flex items-center space-x-3 hover:underline"
to={useBaseUrl("/docs/java/installation")}
>
<img
className="h-8 w-8 transition hover:scale-110"
Expand All @@ -60,7 +59,6 @@ function Languages() {
<li className="">
<Link
className="flex items-center space-x-3 hover:underline"
to={useBaseUrl("/docs/java/installation")}
>
<img
className="h-8 w-8 transition hover:scale-110"
Expand All @@ -73,7 +71,6 @@ function Languages() {
<li className="">
<Link
className="flex items-center space-x-3 hover:underline"
to={useBaseUrl("/docs/java/installation")}
>
<img
className="h-8 w-8 transition hover:scale-110"
Expand Down Expand Up @@ -107,13 +104,13 @@ function Server() {
fill="currentColor"
/>
</svg>
<h2 className="mb-4 text-xl font-semibold">Dependencies</h2>
<h2 className="mb-4 text-xl font-semibold">Database Support</h2>
</div>
<ul className="grid grid-cols-1 gap-6 md:grid-cols-4 lg:gap-8">
<li className="">
<Link
to={useBaseUrl("/docs/dependencies/mongo")}
className="flex flex-col items-center justify-center space-y-1 p-6 text-center"
className="flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
>
<img
className="h-8 w-8"
Expand All @@ -125,28 +122,26 @@ function Server() {
</li>
<li className="">
<Link
to={useBaseUrl("/docs/dependencies/oracle")}
className="flex flex-col items-center justify-center space-y-1 p-6 text-center"
className="flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
>
<img
className="h-8 w-8"
src="/img/Oracle.svg"
alt="Oracle logo"
/>
<p className="font-semibold">Oracle</p>
<p className="font-semibold">Oracle (WIP)</p>
</Link>
</li>
<li className="">
<Link
to={useBaseUrl("/docs/dependencies/postgresql")}
className="flex flex-col items-center justify-center space-y-1 p-6 text-center"
className="flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
>
<img
className="h-8 w-8"
src="/img/PostgresSQL.svg"
alt="PostgresSQL logo"
/>
<p className="font-semibold">PostgresSQL</p>
<p className="font-semibold">PostgresSQL (WIP)</p>
</Link>
</li>
</ul>
Expand Down
6 changes: 3 additions & 3 deletions src/components/QuickStart.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const QuickStart = () => {
<p className="mt-8 mb-8">
Discover how to set up Keploy with app making testcases in just a few minutes.
</p>
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8">
<Link
className=" scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
to={useBaseUrl("/docs/server/windows/installation")}
Expand All @@ -32,13 +32,13 @@ export const QuickStart = () => {
<img className="h-16 w-16" src="/img/Linux.svg" alt="Linux logo" />
<p className="text-lg">Linux</p>
</Link>
<Link
{/* <Link
className=" scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
to={useBaseUrl("/docs/server/macos/installation")}
>
<img className="h-16 w-16" src="/img/Apple_grey.svg" alt="Mac logo" />
<p className="text-lg">MacOS</p>
</Link>
</Link> */}
</div>
</section>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Resources.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const links = [
type: "article",
title: "QuickStart with Go Sample App",
length: "10 min read",
url: "docs/go/quickstart/echo-sql",
url: "docs/quickstart/gin-mongo",
},
{
type: "article",
Expand All @@ -31,7 +31,7 @@ const links = [
type: "video",
title: "Demo Video of Keploy",
length: "2 min watch",
url: "https://www.youtube.com/watch?v=Ssm4TnTkbLs&feature=emb_imp_woyt",
url: "https://www.youtube.com/watch?v=23yQaY81Zho",
},
];

Expand Down
8 changes: 4 additions & 4 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -204,19 +204,19 @@ div[class^="sidebar_"] .button svg {

/* Navbar */
.navbar__inner {
@apply mx-auto max-w-screen-lg px-10 shadow-none;
@apply mx-0 max-w-screen-lg justify-around px-3 shadow-none;
}

.navbar__items--right {
@apply flex-row-reverse;
}

.navbar__items--right > :last-child {
@apply pr-5;
@apply pl-10;
}

.navbar__brand {
@apply mb-3;
.__brand {
@apply mx-0 justify-evenly;
}

/* Search */
Expand Down
39 changes: 39 additions & 0 deletions static/css/code-block-buttons.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/* "Copy" code block button */
pre {
position: relative;
}

pre .btnIcon {
position: absolute;
top: 4px;
z-index: 2;
cursor: pointer;
border: 1px solid transparent;
padding: 0;
color: #fff;
background-color: transparent;
height: 30px;
transition: all .25s ease-out;
}

pre .btnIcon:hover {
text-decoration: none;
}

.btnIcon__body {
align-items: center;
display: flex;
}

.btnIcon svg {
fill: currentColor;
margin-right: .4em;
}

.btnIcon__label {
font-size: 11px;
}

.btnClipboard {
right: 10px;
}
48 changes: 48 additions & 0 deletions static/js/code-block-buttons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
// Turn off ESLint for this file because it's sent down to users as-is.
/* eslint-disable */
window.addEventListener('load', function() {
function button(label, ariaLabel, icon, className) {
const btn = document.createElement('button');
btn.classList.add('btnIcon', className);
btn.setAttribute('type', 'button');
btn.setAttribute('aria-label', ariaLabel);
btn.innerHTML =
'<div class="btnIcon__body">' +
icon +
'<strong class="btnIcon__label">' +
label +
'</strong>' +
'</div>';
return btn;
}

function addButtons(codeBlockSelector, btn) {
document.querySelectorAll(codeBlockSelector).forEach(function(code) {
code.parentNode.appendChild(btn.cloneNode(true));
});
}

const copyIcon =
'<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';

addButtons(
'.hljs',
button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'),
);

const clipboard = new ClipboardJS('.btnClipboard', {
target: function(trigger) {
return trigger.parentNode.querySelector('code');
},
});

clipboard.on('success', function(event) {
event.clearSelection();
const textEl = event.trigger.querySelector('.btnIcon__label');
textEl.textContent = 'Copied';
setTimeout(function() {
textEl.textContent = 'Copy';
}, 2000);
});
});

4 changes: 3 additions & 1 deletion versioned_docs/version-1.0.0/go/quickstart/gin-mongo.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ keywords:
- golang gin
---

# URL Shortener Sample App
# URL Shortener Sample App

A sample url shortener app to test Keploy integration capabilities using [Gin](https://gin-gonic.com) and [mongoDB](https://www.mongodb.com/).

Expand All @@ -34,7 +34,9 @@ go mod download
```bash
export KEPLOY_MODE=record
```

### Start the MongoDB server

```bash
docker container run -it -p27017:27017 mongo
```
Expand Down
13 changes: 13 additions & 0 deletions versioned_docs/version-2.0.0/concepts/reference/glossary.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
id: glossary
title: Glossary for Users
sidebar_label: Glossary
description: This glossary has an explanation of all the terminologies that beginners find difficult to understand at first glance.
tags:
- explanation
keywords:
- API
---

1. [Acceptance Testing](/docs/concepts/reference/glossary/acceptance-testing)
2. [Agile Unit Testing](/docs/concepts/reference/glossary/agile-unit-testing)
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
id: acceptance-testing
title: Acceptance Testing
sidebar_label: Acceptance Testing
description: This glossary has an explanation of all the terminologies that beginners find difficult to understand at first glance.
tags:
- explanation
keywords:
- API
---

### What is Acceptance Testing?

Acceptance testing (AT) is a formal testing process that is conducted to determine whether a software system meets the requirements of the customer or end user. AT is the last phase of software testing, and it is conducted after all other levels of testing have been completed.

The purpose of AT is to ensure that the software system is acceptable to the customer or end user. This means that the system must meet the customer's or end user's needs and expectations. AT also helps to identify any defects or problems with the software system that may have been missed during earlier phases of testing.

### Acceptance Testing Types:

- **User acceptance testing (UAT)**: This is the most common type of AT. It involves the customer or end user using the software system in a way that simulates how they will use it in the real world.
- **Systematic testing**: This involves using a set of predetermined test cases to test the software system.
- **Acceptance test-driven development (ATDD)**: This is a technique that combines AT with test-driven development (TDD). TDD is a software development process that involves writing unit tests before the code is written. ATDD extends TDD by adding acceptance tests to the mix.

### Benefits of Acceptance Testing:

- It helps to ensure that the software system meets the needs and expectations of the customer or end user.
- It helps to identify any defects or problems with the software system that may have been missed during earlier phases of testing.
- It helps to improve the overall quality of the software system.
- It helps to reduce the risk of defects and problems with the software system.
- It helps to ensure that the software system is ready for release.

Acceptance testing is vital in ensuring software meets stakeholder demands and quality standards.
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
id: agile-unit-testing
title: Agile Unit Testing
sidebar_label: Agile Unit Testing
description: This glossary has an explanation of all the terminologies that beginners find difficult to understand at first glance.
tags:
- explanation
keywords:
- API
---

Agile unit testing is a software testing process that is used in agile development teams. It involves writing small, self-contained tests that verify the behavior of individual units of code. These tests are typically written by the developers themselves, and they are run frequently throughout the development process.

### Why is agile unit testing important?

Agile unit testing is important because it can help to improve the quality of software applications. By finding and fixing defects early, agile unit testing can help to prevent bugs from reaching production, which can save time and money.

### How does agile unit testing work?

Agile unit testing is typically done by developers. Developers write unit tests that verify the behavior of individual units of code. These unit tests are then run automatically as part of the development process.

### What are the benefits of agile unit testing?

1. It helps to ensure the quality of the code by catching bugs early in the development process.
2. It can help to improve the maintainability of the code by making it easier to track changes and to identify regressions.
3. It can help to speed up the development process by reducing the amount of time that is spent debugging.

### Key Principles of agile unit testing:

1. **Test-driven development (TDD)**: TDD is a development methodology that involves writing unit tests before writing the code. This helps to ensure that the code is designed with testing in mind, and it can help to improve the quality of the code.
2. **Continuous integration (CI)**: CI is a process that involves automating the build and testing of software. This helps to ensure that the code is always in a releasable state, and it can help to catch bugs early in the development process.
3. **Continuous delivery (CD)**: CD is a process that involves automating the deployment of software. This helps to ensure that the software is always available to users, and it can help to improve the speed of deployment.

### Conclusion

Agile unit testing is a valuable tool for improving the quality of software applications. By following the best practices for agile unit testing, developers can help to ensure that their applications are free of defects and meet the needs of their users.
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
id: behaviour-driven-development
title: Behaviour Driven Development
sidebar_label: Behaviour Driven Development
description: This glossary has an explanation of all the terminologies that beginners find difficult to understand at first glance.
tags:
- explanation
keywords:
- API
---

Behavior-driven development (BDD) is an Agile software development methodology that encourages collaboration between developers, testers, and business stakeholders. BDD is based on the idea that the best way to ensure that software meets the needs of its users is to write tests that describe the desired behavior of the software in plain language.

### Benefits of BDD

1. **Improved communication**: BDD encourages communication between developers, testers, and business stakeholders. This helps to ensure that everyone is on the same page and that the software meets the needs of its users.
2. **Increased collaboration**: BDD encourages collaboration between developers, testers, and business stakeholders. This helps to ensure that the software is developed in a way that is efficient and effective.
3. **Improved testability**: BDD tests are written in plain language, which makes them easier to understand and maintain. This helps to improve the testability of the software.
4. **Increased confidence**: BDD tests provide a high degree of confidence that the software meets the needs of its users. This helps to reduce the risk of defects and to improve the quality of the software.

Overall, BDD is a software development process that can help to improve communication, collaboration, and testing. This can lead to the development of higher-quality software that meets the needs of the business.

### BDD Automation Tools

Here are some of the popular BDD automation tools:

1. **Cucumber:** Cucumber is a free and open-source BDD tool that uses the Gherkin syntax for writing test cases in plain English. It can be programmed in several languages, including Java, Ruby, and JavaScript.

2. **Behave:** Behave is a behavior-driven testing tool written in Python that supports the Gherkin syntax and can be used in tandem with other testing frameworks like Pytest and Unittest.

3. **JBehave:** JBehave is a Gherkin-based, Java-based BDD tool that supports many testing frameworks, including JUnit and TestNG.

4. **SpecFlow:** SpecFlow is a BDD tool that interfaces with Microsoft Studio and other .NET tools and employs the Gherkin syntax for writing specifications. It can be programmed in C# and Visual Basic, among other languages.

5. **Gauge:** Gauge is an open-source BDD tool that employs a markdown-based syntax to describe tests. It can be programmed in Java, Ruby, and Python, among others.

These tools can help to streamline the testing process and improve communication between developers, testers, and stakeholders. This can help to ensure that the software meets the needs of the business and is of high quality.

### Key Points to remember while using BDD

1. **BDD is not a silver bullet**: BDD is not a magic solution that will solve all of your software development problems. However, it can be a valuable tool for improving communication, collaboration, and testability.
2. **BDD requires buy-in from everyone involved**: BDD is most effective when everyone involved in the software development process is on board. This includes developers, testers, and business stakeholders.
3. **BDD takes time to learn and implement**: BDD is a new approach to software development, and it takes time to learn and implement. However, the benefits of BDD can be significant, so it is worth the investment.
4. **BDD is not a replacement for other testing methods**: BDD is not a replacement for other testing methods, such as unit testing and integration testing. Instead, it should be used in conjunction with these methods to improve the overall quality of the software.
Loading

0 comments on commit 42f5346

Please sign in to comment.