mirror of
https://github.com/higherkindness/mu-haskell.git
synced 2024-08-17 02:10:22 +03:00
Docs initial website 🖨 (#53)
This commit is contained in:
Juan Valencia
Alejandro Serrano
parent
5c54d197d7
commit
ab7b60cd35
13
.gitignore
vendored
13
.gitignore
vendored
@ -3,3 +3,16 @@ stack*.yaml.lock
|
||||
*~
|
||||
dist
|
||||
*.pyc
|
||||
|
||||
## User files
|
||||
.DS_Store
|
||||
|
||||
## Jekyll
|
||||
_site
|
||||
.sass-cache
|
||||
.jekyll-metadata
|
||||
.jekyll-cache
|
||||
|
||||
## Ruby environment normalization:
|
||||
.bundle/
|
||||
/docs/vendor/
|
||||
|
||||
3
docs/Gemfile
Executable file
3
docs/Gemfile
Executable file
@ -0,0 +1,3 @@
|
||||
source "https://rubygems.org"
|
||||
|
||||
gem "jekyll", ">= 4.0.0"
|
||||
65
docs/Gemfile.lock
Executable file
65
docs/Gemfile.lock
Executable file
@ -0,0 +1,65 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
addressable (2.7.0)
|
||||
public_suffix (>= 2.0.2, < 5.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.1.5)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
eventmachine (1.2.7)
|
||||
ffi (1.11.3)
|
||||
forwardable-extended (2.6.0)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (1.7.0)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.0.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (>= 0.9.5, < 2)
|
||||
jekyll-sass-converter (~> 2.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 2.1)
|
||||
kramdown-parser-gfm (~> 1.0)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 3.0)
|
||||
safe_yaml (~> 1.0)
|
||||
terminal-table (~> 1.8)
|
||||
jekyll-sass-converter (2.0.1)
|
||||
sassc (> 2.0.1, < 3.0)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (2.1.0)
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.2.1)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
mercenary (0.3.6)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (4.0.1)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.10.0)
|
||||
ffi (~> 1.0)
|
||||
rouge (3.14.0)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.2.1)
|
||||
ffi (~> 1.9)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
unicode-display_width (1.6.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (>= 4.0.0)
|
||||
|
||||
BUNDLED WITH
|
||||
2.0.1
|
||||
@ -1,14 +1,29 @@
|
||||
# Docs for Mu-Haskell
|
||||
|
||||
Mu-Haskell is a set of packages that help you build both servers and clients for (micro)services. The main goal of Mu-Haskell is to make you focus on your domain logic, instead of worrying about format and protocol issues.
|
||||
The documentation is built through a Jekyll site as base.
|
||||
|
||||
* [Introduction](intro.md)
|
||||
* [Schemas](schema.md)
|
||||
* [Registry](registry.md)
|
||||
* [Services and servers](rpc.md)
|
||||
* [gRPC servers and clients](grpc.md)
|
||||
* [Streams](stream.md)
|
||||
* [Databases](db.md), including resource pools
|
||||
* Integration with other libraries
|
||||
* [Using transformers](transformer.md): look here for logging
|
||||
* [WAI Middleware](middleware.md): look here for metrics
|
||||
## Prerequisites
|
||||
|
||||
* You need to have [ruby >= 2.4.0](https://rvm.io/) installed on your system.
|
||||
* [Bundler >= 2](https://bundler.io/v2.0/guides/bundler_2_upgrade.html) is also needed.
|
||||
|
||||
|
||||
## Building the docs
|
||||
|
||||
To preview the site locally, execute the following command from the project root dir. This will install website dependencies under `docs/vendor/bundle`:
|
||||
|
||||
```bash
|
||||
bundle install --gemfile docs/Gemfile --path vendor/bundle
|
||||
```
|
||||
|
||||
Then, through this command, you will run the locally installed Jekyll instance to serve the site:
|
||||
|
||||
|
||||
```bash
|
||||
BUNDLE_GEMFILE=./docs/Gemfile bundle exec jekyll serve -s docs -b /mu-haskell
|
||||
```
|
||||
|
||||
|
||||
Finally, to have a look at the site, visit:
|
||||
|
||||
http://localhost:4000/mu-haskell
|
||||
|
||||
21
docs/_config.yml
Executable file
21
docs/_config.yml
Executable file
@ -0,0 +1,21 @@
|
||||
title: Mu-Haskell
|
||||
#-------------------------
|
||||
name: Mu-Haskell
|
||||
#-------------------------
|
||||
description: Lorem ipusm
|
||||
#-------------------------
|
||||
author: 47 Degrees
|
||||
keywords: functional-programming, monads, monad-transformers, functional-data-structure, swift, bow, fp-types, adt, free-monads, tagless-final, mtl, for-comprehension, category-theory
|
||||
#-------------------------
|
||||
url: https://www.47deg.com
|
||||
#-------------------------
|
||||
markdown: kramdown
|
||||
sass:
|
||||
sass_dir: _sass
|
||||
style: compressed
|
||||
sourcemap: never
|
||||
#-------------------------
|
||||
permalink: pretty
|
||||
#-------------------------
|
||||
exclude: ['config.ru', 'Gemfile', 'Gemfile.lock', 'vendor', 'Procfile', 'Rakefile']
|
||||
#-------------------------
|
||||
9
docs/_data/menu.yml
Executable file
9
docs/_data/menu.yml
Executable file
@ -0,0 +1,9 @@
|
||||
nav:
|
||||
- title: Documentation
|
||||
url: /
|
||||
|
||||
- title: Github
|
||||
url: https://github.com/higherkindness/mu-haskell
|
||||
|
||||
- title: License
|
||||
url: https://github.com/higherkindness/mu-haskell/blob/master/LICENSE
|
||||
32
docs/_data/sidebar.yml
Executable file
32
docs/_data/sidebar.yml
Executable file
@ -0,0 +1,32 @@
|
||||
options:
|
||||
- title: Start
|
||||
url: /
|
||||
|
||||
- title: Introduction
|
||||
url: intro/
|
||||
|
||||
- title: Schemas
|
||||
url: schema/
|
||||
nested_options:
|
||||
- title: Registry
|
||||
url: registry/
|
||||
|
||||
- title: Services and servers
|
||||
url: rpc/
|
||||
nested_options:
|
||||
- title: gRPC
|
||||
url: grpc/
|
||||
|
||||
- title: Streams
|
||||
url: stream/
|
||||
|
||||
- title: Databases
|
||||
url: db/
|
||||
|
||||
- title: Integrations
|
||||
nested_options:
|
||||
- title: Transformers
|
||||
url: transformer/
|
||||
|
||||
- title: Middleware
|
||||
url: middleware/
|
||||
14
docs/_includes/_doc.html
Normal file
14
docs/_includes/_doc.html
Normal file
@ -0,0 +1,14 @@
|
||||
<main id="site-doc">
|
||||
<div class="doc-header">
|
||||
<button
|
||||
id="menu-toggle"
|
||||
type="button"
|
||||
class="button doc-toggle"
|
||||
title="Toggle">
|
||||
<img src="{{ site.baseurl }}/img/sidebar-icon-open.svg" alt="Toggle">
|
||||
</button>
|
||||
</div>
|
||||
<div class="doc-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</main>
|
||||
22
docs/_includes/_footer.html
Executable file
22
docs/_includes/_footer.html
Executable file
@ -0,0 +1,22 @@
|
||||
<div id="site-footer">
|
||||
<div class="wrapper">
|
||||
<div class="footer-flex">
|
||||
<div class="footer-dev">
|
||||
<p>mu-haskell is designed and developed by
|
||||
<a href="https://github.com/higherkindness/mu-haskell/" target="_blank" rel="noopener noreferrer">{{ site.name }}</a>
|
||||
with support from <a href="https://www.47deg.com/" target="_blank" rel="noopener noreferrer">47 Degrees</a></p>
|
||||
</div>
|
||||
<ul class="footer-menu">
|
||||
{% for item in site.data.menu.nav %}
|
||||
<li class="footer-menu-item">
|
||||
<a href="{{ item.url | relative_url }}"
|
||||
title="{{ item.title }}"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
29
docs/_includes/_head-docs.html
Normal file
29
docs/_includes/_head-docs.html
Normal file
@ -0,0 +1,29 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{site.name}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{site.description}}">
|
||||
<meta name="keywords" content="{{site.keywords}}">
|
||||
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:title" content="{{site.name}}" />
|
||||
<meta property="og:site_name" content="{{site.name}}" />
|
||||
<meta property="og:url" content="https://higherkindness.io/mu-haskell" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:description" content="{{site.description}}" />
|
||||
<meta property="og:keywords" content="{{site.keywords}}" />
|
||||
|
||||
<meta name="twitter:text:description" content="{{site.description}}" />
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@47deg">
|
||||
<meta name="twitter:creator" content="@47deg">
|
||||
<meta name="twitter:image" content="" />
|
||||
|
||||
<script defer src="{{ '/js/docs.js' | relative_url }}"></script>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="{{ '/img/favicon.png' | relative_url }}">
|
||||
|
||||
<!-- mu-haskell docs css -->
|
||||
<link rel="stylesheet" type="text/css" href="{{ '/css/docs.css' | relative_url }}">
|
||||
</head>
|
||||
13
docs/_includes/_header.html
Executable file
13
docs/_includes/_header.html
Executable file
@ -0,0 +1,13 @@
|
||||
<div id="site-header">
|
||||
<div class="wrapper">
|
||||
<div class="header-flex">
|
||||
<div class="header-text">
|
||||
<h1>IDL protocol management <span>IDL protocol management and distribution at the speed of light</span></h1>
|
||||
<a class="header-button" href="{{ 'docs/' | relative_url }}" title="Docs">Learn more</a>
|
||||
</div>
|
||||
<div class="header-image">
|
||||
<img src="{{ 'img/header-image.svg' | relative_url }}" alt="mu-haskell logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
13
docs/_includes/_main.html
Executable file
13
docs/_includes/_main.html
Executable file
@ -0,0 +1,13 @@
|
||||
<div id="site-main">
|
||||
<div class="wrapper">
|
||||
<div class="main-flex">
|
||||
{% for item in site.data.features.content %}
|
||||
<div class="main-item">
|
||||
<img src="{{ item.icon }}" alt="{{ item.title }}">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
docs/_includes/_nav.html
Executable file
32
docs/_includes/_nav.html
Executable file
@ -0,0 +1,32 @@
|
||||
<nav id="site-nav">
|
||||
<div class="wrapper">
|
||||
<div class="nav-flex">
|
||||
<a class="nav-brand" title="mu-haskell" href="{{ site.baseurl }}/">
|
||||
<img src="{{ 'img/nav-brand.svg' | relative_url }}" title="{{ site.name }}">
|
||||
<span>{{ site.name }}</span>
|
||||
</a>
|
||||
<div class="nav-menu">
|
||||
<button
|
||||
class="button nav-icon-close"
|
||||
title="Close"
|
||||
onClick="toggleClass('.nav-menu', 'open');">
|
||||
<img src="{{ 'img/nav-icon-close.svg' | relative_url }}" alt="Close">
|
||||
</button>
|
||||
<ul>
|
||||
{% for item in site.data.menu.nav%}
|
||||
<li class="nav-menu-item">
|
||||
<a href="{{ item.url | relative_url }}" title="{{ item.title }}">{{ item.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="button nav-icon-open"
|
||||
title="Open"
|
||||
onClick="toggleClass('.nav-menu', 'open');">
|
||||
<img src="{{ '/img/nav-icon-open.svg' | relative_url }}" alt="Open">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
100
docs/_includes/_sidebar.html
Executable file
100
docs/_includes/_sidebar.html
Executable file
@ -0,0 +1,100 @@
|
||||
<div id="site-sidebar">
|
||||
<div class="sidebar-brand">
|
||||
<a href="{{ '/' | relative_url }}" class="brand" title="{{ site.name }}">
|
||||
<img
|
||||
src="{{ '/img/nav-brand-white.svg' | relative_url }}"
|
||||
alt="{{ site.name }}"
|
||||
class="brand-wrapper"
|
||||
/>
|
||||
<span>{{ site.name }}</span>
|
||||
</a>
|
||||
<button
|
||||
id="main-toggle"
|
||||
type="button"
|
||||
title="Close"
|
||||
class="button sidebar-toggle"
|
||||
>
|
||||
<span class="close"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
{% if site.data.sidebar.options %}
|
||||
{% for item in site.data.sidebar.options %}
|
||||
|
||||
{% assign item_url = item.url | relative_url %}
|
||||
{% assign item_url_slash = item_url | append: '/' %}
|
||||
{% assign page_url = page.url | relative_url %}
|
||||
{% assign page_url_index = page_url | append: 'index.html' %}
|
||||
|
||||
{% comment %}
|
||||
<!-- Needed logic to show the submenu open when the active entry is an inner element -->
|
||||
{% endcomment %}
|
||||
{% assign open_submenu = '' %}
|
||||
{% assign active_item = '' %}
|
||||
|
||||
{% if item_url == page_url or item_url_slash == page_url or item_url == page_url_index %}
|
||||
{% assign active_item = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
{% if item.nested_options %}
|
||||
{% if item_url == page_url or item_url_slash == page_url %}
|
||||
{% assign open_submenu = 'open' %}
|
||||
{% else %}
|
||||
{% for sub in item.nested_options %}
|
||||
{% assign sub_url = sub.url | relative_url %}
|
||||
{% assign sub_url_slash = sub_url | append: '/' %}
|
||||
{% if sub_url == page_url or sub_url_slash == page_url %}
|
||||
{% assign open_submenu = 'open' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="sidebar-menu-item {{ active_item }} {{ open_submenu }}">
|
||||
{% if item.nested_options %} {% if item.url %}
|
||||
<a
|
||||
href="{{ item.url | relative_url }}"
|
||||
title="{{ item.title }}"
|
||||
class="drop-nested"
|
||||
>
|
||||
{{item.title}}
|
||||
</a>
|
||||
<div class="caret"></div>
|
||||
{% else %}
|
||||
<button
|
||||
type="button"
|
||||
title="Open {{ item.title }}"
|
||||
class="button drop-nested"
|
||||
>
|
||||
{{ item.title }}
|
||||
</button>
|
||||
<div class="caret"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sub-menu">
|
||||
{% for sub in item.nested_options %}
|
||||
{% assign sub_url = sub.url | relative_url %}
|
||||
{% assign sub_url_slash = sub_url | append: '/' %}
|
||||
<a
|
||||
class="{% if sub_url == page_url or sub_url_slash == page_url or sub_url == page_url_index %}active{% endif %}"
|
||||
href="{{ sub.url | relative_url }}"
|
||||
title="{{ sub.title }}"
|
||||
>
|
||||
{{ sub.title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
href="{{ item.url | relative_url }}"
|
||||
class="{{ active_item }}"
|
||||
title="{{ item.title }}"
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
8
docs/_layouts/docs.html
Executable file
8
docs/_layouts/docs.html
Executable file
@ -0,0 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include _head-docs.html %}
|
||||
<body>
|
||||
{% include _sidebar.html %}
|
||||
{% include _doc.html %}
|
||||
</body>
|
||||
</html>
|
||||
64
docs/_sass/base/_base.scss
Executable file
64
docs/_sass/base/_base.scss
Executable file
@ -0,0 +1,64 @@
|
||||
// Base
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
// Body, html
|
||||
// -----------------------------------------------
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Typography
|
||||
// -----------------------------------------------
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $base-font-color;
|
||||
background: $white;
|
||||
font-family: $base-font-family;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $header-font-color;
|
||||
font-family: $header-font-family;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
transition: color $base-duration $base-timing;
|
||||
|
||||
&:visited {
|
||||
color: $link-color;
|
||||
}
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
10
docs/_sass/base/_helpers.scss
Normal file
10
docs/_sass/base/_helpers.scss
Normal file
@ -0,0 +1,10 @@
|
||||
// Helpers
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
.wrapper {
|
||||
padding: 0 ($base-point-grid * 3);
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
max-width: $bp-xlarge;
|
||||
height: 100%;
|
||||
}
|
||||
141
docs/_sass/base/_reset.scss
Executable file
141
docs/_sass/base/_reset.scss
Executable file
@ -0,0 +1,141 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
applet,
|
||||
article,
|
||||
aside,
|
||||
audio,
|
||||
b,
|
||||
big,
|
||||
blockquote,
|
||||
body,
|
||||
canvas,
|
||||
caption,
|
||||
center,
|
||||
cite,
|
||||
code,
|
||||
dd,
|
||||
del,
|
||||
details,
|
||||
dfn,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
em,
|
||||
embed,
|
||||
fieldset,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
header,
|
||||
hgroup,
|
||||
html,
|
||||
i,
|
||||
iframe,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
label,
|
||||
legend,
|
||||
li,
|
||||
mark,
|
||||
menu,
|
||||
nav,
|
||||
object,
|
||||
ol,
|
||||
output,
|
||||
p,
|
||||
pre,
|
||||
q,
|
||||
ruby,
|
||||
s,
|
||||
samp,
|
||||
section,
|
||||
small,
|
||||
span,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
summary,
|
||||
sup,
|
||||
table,
|
||||
tbody,
|
||||
td,
|
||||
tfoot,
|
||||
th,
|
||||
thead,
|
||||
time,
|
||||
tr,
|
||||
tt,
|
||||
u,
|
||||
ul,
|
||||
var,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
47
docs/_sass/components/_button.scss
Normal file
47
docs/_sass/components/_button.scss
Normal file
@ -0,0 +1,47 @@
|
||||
// Buttons
|
||||
// ----------------------------------------------
|
||||
// ----------------------------------------------
|
||||
.button {
|
||||
display: block;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.close {
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: $white;
|
||||
content: " ";
|
||||
height: 100%;
|
||||
left: 98%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
23
docs/_sass/components/_code.scss
Executable file
23
docs/_sass/components/_code.scss
Executable file
@ -0,0 +1,23 @@
|
||||
// Code
|
||||
// ----------------------------------------------
|
||||
// ----------------------------------------------
|
||||
p code,
|
||||
ul code {
|
||||
padding: 2px $base-point-grid;
|
||||
background: rgba($gray-primary, 0.1);
|
||||
font-family: $code-font-family;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
.highlight pre {
|
||||
background: rgba($brand-primary, 0.06);
|
||||
padding: ($base-point-grid * 3);
|
||||
overflow: auto;
|
||||
margin-bottom: ($base-point-grid * 2);
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
font-family: $code-font-family;
|
||||
}
|
||||
97
docs/_sass/components/_doc.scss
Executable file
97
docs/_sass/components/_doc.scss
Executable file
@ -0,0 +1,97 @@
|
||||
// Doc content
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
#site-doc {
|
||||
position: absolute;
|
||||
left: 290px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: left $base-duration $base-timing;
|
||||
|
||||
&.expanded {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: ($base-point-grid * 11);
|
||||
padding: 0 ($base-point-grid * 3)0 0;
|
||||
background: $white;
|
||||
|
||||
.doc-toggle {
|
||||
transition: transform $base-duration $base-timing;
|
||||
|
||||
&:hover {
|
||||
transform: scaleX(1.5);
|
||||
}
|
||||
|
||||
> * {
|
||||
padding: ($base-point-grid * 2);
|
||||
margin: ($base-point-grid * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
padding: ($base-point-grid * 3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: {
|
||||
top: ($base-point-grid * 3);
|
||||
bottom: ($base-point-grid * 2);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: ($base-point-grid * 2) 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
margin-bottom: ($base-point-grid * 2);
|
||||
li {
|
||||
list-style: disc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// -----------------------------------------------
|
||||
@include bp(medium) {
|
||||
#site-doc {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
85
docs/_sass/components/_footer.scss
Executable file
85
docs/_sass/components/_footer.scss
Executable file
@ -0,0 +1,85 @@
|
||||
// Footer
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
#site-footer {
|
||||
flex: 0 0 0;
|
||||
height: 200px;
|
||||
padding: ($base-point-grid * 10) 0;
|
||||
background: $brand-primary;
|
||||
color: rgba($white, 0.5);
|
||||
|
||||
a {
|
||||
color: rgba($white, 0.8);
|
||||
|
||||
&:visited {
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.6);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.footer-dev {
|
||||
width: $column-4;
|
||||
}
|
||||
|
||||
.footer-menu {
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-right: ($base-point-grid * 4)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// -----------------------------------------------
|
||||
|
||||
@include bp(medium) {
|
||||
#site-footer {
|
||||
.footer-flex {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.footer-dev,
|
||||
.footer-menu {
|
||||
width: $column-8;
|
||||
}
|
||||
|
||||
.footer-dev {
|
||||
padding-bottom: ($base-point-grid * 2);
|
||||
margin-bottom: ($base-point-grid * 2);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba($white, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.footer-menu {
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-right: ($base-point-grid * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
109
docs/_sass/components/_header.scss
Executable file
109
docs/_sass/components/_header.scss
Executable file
@ -0,0 +1,109 @@
|
||||
// Header
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
|
||||
#site-header {
|
||||
flex: 1 0 auto;
|
||||
margin-top: ($base-point-grid * 18);
|
||||
background: rgba($brand-primary, 0.06);
|
||||
|
||||
.header-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
color: $white;
|
||||
height: 100%;
|
||||
|
||||
.header-text {
|
||||
width: $column-5;
|
||||
|
||||
h1 {
|
||||
color: $base-font-color;
|
||||
font-size: 4.188rem;
|
||||
line-height: 1.3;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: ($base-point-grid * 3) 0;
|
||||
font-size: 1.286rem;
|
||||
font-weight: $font-regular;
|
||||
|
||||
strong {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-button {
|
||||
padding: ($base-point-grid * 1.5) ($base-point-grid * 6);
|
||||
display: inline-block;
|
||||
font-weight: $font-semibold;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
border: none;
|
||||
background: $brand-primary;
|
||||
border-radius: 300px;
|
||||
transition: color $base-duration $base-timing, background-color $base-duration $base-timing;
|
||||
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
background: darken($brand-primary, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $white;
|
||||
background: darken($brand-primary, 0.2);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-image {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// -----------------------------------------------
|
||||
|
||||
@include bp(large) {
|
||||
#site-header {
|
||||
.header-flex {
|
||||
.header-text {
|
||||
h1 {
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
}
|
||||
.header-image {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include bp(medium) {
|
||||
#site-header {
|
||||
.header-flex {
|
||||
padding: ($base-point-grid * 20) 0;
|
||||
.header-text {
|
||||
text-align: center;
|
||||
width: $column-12;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.header-image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
51
docs/_sass/components/_main.scss
Executable file
51
docs/_sass/components/_main.scss
Executable file
@ -0,0 +1,51 @@
|
||||
// Features
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
|
||||
#site-main {
|
||||
flex: 1 0 auto;
|
||||
padding: ($base-point-grid * 10) 0;
|
||||
|
||||
.main-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.main-item {
|
||||
width: $column-4;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $gutter-margin;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: $base-point-grid;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: $base-point-grid;
|
||||
font-size: 1.429rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// -----------------------------------------------
|
||||
@include bp(medium) {
|
||||
#site-main {
|
||||
.main-flex {
|
||||
flex-direction: column;
|
||||
.main-item {
|
||||
width: $column-12;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: ($base-point-grid * 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
141
docs/_sass/components/_nav.scss
Executable file
141
docs/_sass/components/_nav.scss
Executable file
@ -0,0 +1,141 @@
|
||||
// Nav
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
#site-nav {
|
||||
flex: 0 0 auto;
|
||||
position: fixed;
|
||||
padding: ($base-point-grid * 5) 0;
|
||||
width: 100%;
|
||||
transition: background-color $base-duration $base-timing, padding $base-duration $base-timing;
|
||||
height: ($base-point-grid * 18);
|
||||
|
||||
&.nav-scroll {
|
||||
padding: ($base-point-grid * 2) 0;
|
||||
background: rgba(244, 245, 255, 0.9);
|
||||
|
||||
}
|
||||
|
||||
.nav-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: $base-font-family;
|
||||
font-size: 1.5rem;
|
||||
color: $base-font-color;
|
||||
|
||||
&:visited,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $base-font-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
||||
.nav-menu-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: ($base-point-grid * 5);
|
||||
}
|
||||
|
||||
a {
|
||||
padding-bottom: 4px;
|
||||
font-family: $base-font-family;
|
||||
color: $gray-primary;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon-open {
|
||||
padding: 16px;
|
||||
margin: -16px;
|
||||
display: none;
|
||||
transition: transform $base-duration $base-timing;
|
||||
|
||||
&:hover {
|
||||
transform: scaleX(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon-close {
|
||||
display: none;
|
||||
padding: 6px;
|
||||
position: absolute;
|
||||
background: rgba($brand-primary, 0.96);
|
||||
right: 100%;
|
||||
top: 32px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
transition: transform .3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// -----------------------------------------------
|
||||
@include bp(medium) {
|
||||
#site-nav {
|
||||
.nav-flex {
|
||||
.nav-menu {
|
||||
position: fixed;
|
||||
padding: ($base-point-grid * 4) ($base-point-grid * 6);
|
||||
background: rgba($brand-primary, 0.96);
|
||||
height: 100%;
|
||||
right: -100%;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
z-index: 2;
|
||||
transition: right $base-duration $base-timing;
|
||||
|
||||
&.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
flex-direction: column;
|
||||
|
||||
.nav-menu-item {
|
||||
padding: $base-point-grid 0;
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
&:hover {
|
||||
border-bottom-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-icon-open,
|
||||
.nav-icon-close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
115
docs/_sass/components/_sidebar-menu.scss
Normal file
115
docs/_sass/components/_sidebar-menu.scss
Normal file
@ -0,0 +1,115 @@
|
||||
// Sidebar menu
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
|
||||
.sidebar-menu {
|
||||
margin-top: ($base-point-grid * 2);
|
||||
padding: 0;
|
||||
|
||||
.sidebar-menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.sub-menu {
|
||||
background: $sidebar-active-color;
|
||||
max-height: 0;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: $base-point-grid * 2 $base-point-grid * 4;
|
||||
font-size: 0.875rem;
|
||||
height: auto;
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
box-shadow: 3px 0 $white inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a, button {
|
||||
box-sizing: border-box;
|
||||
font-family: $base-font-family;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $base-point-grid * 2;
|
||||
line-height: $base-point-grid * 2;
|
||||
width: 100%;
|
||||
color: $white;
|
||||
@include links($white, $white, rgba($white, 0.8), $white);
|
||||
transition: background $base-duration $base-timing;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
right: ($base-point-grid * 3);
|
||||
top: $base-point-grid * 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.caret::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-left: 6px solid rgba($white, 0.8);
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
transition: border 0.3s ease, top 0.2s ease, left 0.2s ease;
|
||||
}
|
||||
|
||||
.caret::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
border-left: 4px solid $brand-primary;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
transition: border 0.3s ease, top 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> a, button {
|
||||
box-shadow: 3px 0 $white inset;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
> a, button {
|
||||
background: $sidebar-head-active-color;
|
||||
}
|
||||
|
||||
.caret::before {
|
||||
top: 4px;
|
||||
left: -6px;
|
||||
border-top: 6px solid rgba($white, 0.8);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
}
|
||||
|
||||
.caret::after {
|
||||
left: -4px;
|
||||
top: 4px;
|
||||
border-top: 4px solid $brand-primary;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
max-height: 1600px; // This will suffice for +20 entries in a submenu tops
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
89
docs/_sass/components/_sidebar.scss
Executable file
89
docs/_sass/components/_sidebar.scss
Executable file
@ -0,0 +1,89 @@
|
||||
// Sidebar
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
|
||||
#site-sidebar {
|
||||
position: fixed;
|
||||
background-image: linear-gradient(to bottom, $brand-primary 60%, darken($brand-primary, 6%) 100%);
|
||||
width: 290px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
transition: left $base-duration $base-timing;
|
||||
|
||||
&:hover {
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: $base-point-grid + 4 $base-point-grid * 2;
|
||||
font-family: $header-font-family;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $sidebar-active-color;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
color: $white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
&:visited,
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-wrapper {
|
||||
width: auto;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.5rem;
|
||||
z-index: 30;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
// -----------------------------------------------
|
||||
@include bp(medium) {
|
||||
|
||||
#site-sidebar {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
|
||||
&.toggled {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
position: absolute;
|
||||
right: 16px;;
|
||||
padding: 24px 32px;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
docs/_sass/components/_table.scss
Normal file
29
docs/_sass/components/_table.scss
Normal file
@ -0,0 +1,29 @@
|
||||
table {
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
overflow-x: auto;
|
||||
|
||||
th {
|
||||
border-bottom: 3px solid rgba($brand-primary, 0.3);
|
||||
border-radius: 0;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid rgba($brand-primary, 0.3);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $base-point-grid $base-point-grid * 4;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: $base-point-grid * 2;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: $base-point-grid * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
53
docs/_sass/utils/_mixins.scss
Executable file
53
docs/_sass/utils/_mixins.scss
Executable file
@ -0,0 +1,53 @@
|
||||
// Mixins
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
|
||||
// Hover
|
||||
//------------------------------------------------
|
||||
@mixin links($link, $visited, $hover, $active) {
|
||||
& {
|
||||
color: $link;
|
||||
|
||||
&:visited {
|
||||
color: $visited;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breakpoint
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
@mixin bp($point) {
|
||||
@if $point==xlarge {
|
||||
@media (max-width: $bp-xlarge) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $point==large {
|
||||
@media (max-width: $bp-large) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $point==medium {
|
||||
@media (max-width: $bp-medium) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $point==small {
|
||||
@media (max-width: $bp-small) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
docs/_sass/utils/_variables.scss
Executable file
74
docs/_sass/utils/_variables.scss
Executable file
@ -0,0 +1,74 @@
|
||||
// Variables
|
||||
// -----------------------------------------------
|
||||
// -----------------------------------------------
|
||||
|
||||
// -----------------------------------------------
|
||||
// Typography
|
||||
// -----------------------------------------------
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
|
||||
// @import url('https://fonts.googleapis.com/css?family=Hind:400,500,600&display=swap');
|
||||
|
||||
// Colors
|
||||
// -----------------------------------------------
|
||||
$brand-primary: #66296a;
|
||||
$brand-secondary: #001f39;
|
||||
$gray-primary: #001f39;
|
||||
$white: rgb(255, 255, 255);
|
||||
$link-color: darken($brand-primary, 10%);
|
||||
$link-hover: darken($brand-primary, 15%);
|
||||
$sidebar-active-color: lighten($brand-primary, 2%);
|
||||
$sidebar-head-active-color: lighten($brand-primary, 4%);
|
||||
|
||||
// Typography
|
||||
// -----------------------------------------------
|
||||
$base-font-family: 'Montserrat', sans-serif;
|
||||
// $header-font-family: 'Hind', sans-serif;
|
||||
$header-font-family: $base-font-family;
|
||||
$code-font-family: 'Fira Mono', monospace;
|
||||
//-
|
||||
$base-font-color: $gray-primary;
|
||||
$header-font-color: $base-font-color;
|
||||
//-
|
||||
$font-regular: 400;
|
||||
$font-semibold: 600;
|
||||
$font-bold: 700;
|
||||
//-
|
||||
$base-font-size: 15px;
|
||||
$base-line-height: 1.6;
|
||||
|
||||
// Sizes
|
||||
// -----------------------------------------------
|
||||
$base-point-grid: 8px;
|
||||
// Animation
|
||||
// -----------------------------------------------
|
||||
$base-duration: 250ms;
|
||||
$base-timing: ease-in-out;
|
||||
|
||||
// Breakpoint
|
||||
// -----------------------------------------------
|
||||
$bp-small: 480px;
|
||||
$bp-medium: 768px;
|
||||
$bp-large: 992px;
|
||||
$bp-xlarge: 1140px;
|
||||
|
||||
// Grid
|
||||
// -----------------------------------------------
|
||||
$column-1: (1/12*100%);
|
||||
$column-2: (2/12*100%);
|
||||
$column-3: (3/12*100%);
|
||||
$column-4: (4/12*100%);
|
||||
$column-5: (5/12*100%);
|
||||
$column-6: (6/12*100%);
|
||||
$column-7: (7/12*100%);
|
||||
$column-8: (8/12*100%);
|
||||
$column-9: (9/12*100%);
|
||||
$column-10: (10/12*100%);
|
||||
$column-11: (11/12*100%);
|
||||
$column-12: (12/12*100%);
|
||||
$gutter-margin: ($base-point-grid * 4);
|
||||
|
||||
|
||||
// Border
|
||||
// -----------------------------------------------
|
||||
$border-color: rgba($gray-primary, 0.1);
|
||||
167
docs/_sass/vendors/highlight/dracula.scss
vendored
Normal file
167
docs/_sass/vendors/highlight/dracula.scss
vendored
Normal file
@ -0,0 +1,167 @@
|
||||
/* Dracula Theme v1.2.5
|
||||
*
|
||||
* https://github.com/zenorocha/dracula-theme
|
||||
*
|
||||
* Copyright 2016, All rights reserved
|
||||
*
|
||||
* Code licensed under the MIT license
|
||||
* http://zenorocha.mit-license.org
|
||||
*
|
||||
* @author Rob G <wowmotty@gmail.com>
|
||||
* @author Chris Bracco <chris@cbracco.me>
|
||||
* @author Zeno Rocha <hi@zenorocha.com>
|
||||
* @author Piruin Panichphol <piruin.p@gmail.com>
|
||||
*/
|
||||
|
||||
/*
|
||||
* Variables
|
||||
*/
|
||||
|
||||
$dt-gray-dark: #282a36; // Background
|
||||
$dt-gray: #44475a; // Current Line & Selection
|
||||
$dt-gray-light: #f8f8f2; // Foreground
|
||||
$dt-blue: #6272a4; // Comment
|
||||
$dt-cyan: #8be9fd;
|
||||
$dt-green: #50fa7b;
|
||||
$dt-orange: #ffb86c;
|
||||
$dt-pink: #ff79c6;
|
||||
$dt-purple: #bd93f9;
|
||||
$dt-red: #ff5555;
|
||||
$dt-yellow: #f1fa8c;
|
||||
|
||||
/*
|
||||
* Styles
|
||||
*/
|
||||
|
||||
.highlight {
|
||||
background: $dt-gray-dark;
|
||||
color: $dt-gray-light;
|
||||
|
||||
.hll,
|
||||
.s,
|
||||
.sa,
|
||||
.sb,
|
||||
.sc,
|
||||
.dl,
|
||||
.sd,
|
||||
.s2,
|
||||
.se,
|
||||
.sh,
|
||||
.si,
|
||||
.sx,
|
||||
.sr,
|
||||
.s1,
|
||||
.ss {
|
||||
color: $dt-yellow;
|
||||
}
|
||||
|
||||
.go {
|
||||
color: $dt-gray;
|
||||
}
|
||||
|
||||
.err,
|
||||
.g,
|
||||
.l,
|
||||
.n,
|
||||
.x,
|
||||
.p,
|
||||
.ge,
|
||||
.gr,
|
||||
.gh,
|
||||
.gi,
|
||||
.gp,
|
||||
.gs,
|
||||
.gu,
|
||||
.gt,
|
||||
.ld,
|
||||
.no,
|
||||
.nd,
|
||||
.ni,
|
||||
.ne,
|
||||
.nn,
|
||||
.nx,
|
||||
.py,
|
||||
.w,
|
||||
.bp {
|
||||
color: $dt-gray-light;
|
||||
}
|
||||
|
||||
.gh,
|
||||
.gi,
|
||||
.gu {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ge {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bp {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.c,
|
||||
.ch,
|
||||
.cm,
|
||||
.cpf,
|
||||
.c1,
|
||||
.cs {
|
||||
color: $dt-blue;
|
||||
}
|
||||
|
||||
.kd,
|
||||
.kt,
|
||||
.nb,
|
||||
.nl,
|
||||
.nv,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi,
|
||||
.vm {
|
||||
color: $dt-cyan;
|
||||
}
|
||||
|
||||
.kd,
|
||||
.nb,
|
||||
.nl,
|
||||
.nv,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi,
|
||||
.vm {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.na,
|
||||
.nc,
|
||||
.nf,
|
||||
.fm {
|
||||
color: $dt-green;
|
||||
}
|
||||
|
||||
.k,
|
||||
.o,
|
||||
.cp,
|
||||
.kc,
|
||||
.kn,
|
||||
.kp,
|
||||
.kr,
|
||||
.nt,
|
||||
.ow {
|
||||
color: $dt-pink;
|
||||
}
|
||||
|
||||
.m,
|
||||
.mb,
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo,
|
||||
.il {
|
||||
color: $dt-purple;
|
||||
}
|
||||
|
||||
.gd {
|
||||
color: $dt-red;
|
||||
}
|
||||
}
|
||||
23
docs/css/docs.scss
Normal file
23
docs/css/docs.scss
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
---
|
||||
|
||||
// Utils
|
||||
@import "utils/variables";
|
||||
@import "utils/mixins";
|
||||
|
||||
// Base
|
||||
@import "base/reset";
|
||||
@import "base/base";
|
||||
@import "base/helpers";
|
||||
|
||||
// Components
|
||||
@import "components/button";
|
||||
@import "components/footer";
|
||||
@import "components/sidebar";
|
||||
@import "components/sidebar-menu";
|
||||
@import "components/doc";
|
||||
@import "components/code";
|
||||
@import "components/table";
|
||||
|
||||
// Vendor
|
||||
@import "vendors/highlight/dracula";
|
||||
20
docs/docs/README.md
Normal file
20
docs/docs/README.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: /
|
||||
---
|
||||
|
||||
# Docs for Mu-Haskell
|
||||
|
||||
Mu-Haskell is a set of packages that help you build both servers and clients for (micro)services. The main goal of Mu-Haskell is to make you focus on your domain logic, instead of worrying about format and protocol issues.
|
||||
|
||||
* [Introduction]({% link docs/intro.md %})
|
||||
* [Schemas]({% link docs/schema.md %})
|
||||
* [Registry]({% link docs/registry.md %})
|
||||
* [Services and servers]({% link docs/rpc.md %})
|
||||
* [gRPC servers and clients]({% link docs/grpc.md %})
|
||||
* [Streams]({% link docs/stream.md %})
|
||||
* [Databases]({% link docs/db.md %}), including resource pools
|
||||
* Integration with other libraries
|
||||
* [Using transformers]({% link docs/transformer.md %}): look here for logging
|
||||
* [WAI Middleware]({% link docs/middleware.md %}): look here for metrics
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: db/
|
||||
---
|
||||
|
||||
# Databases
|
||||
|
||||
In this section of the docs, to have a clearer understanding of how one would use `mu-haskell` to talk to a database, we are going to have a walk through the example of [`with-persistent`](https://github.com/higherkindness/mu-haskell/tree/master/examples/with-persistent).
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: grpc/
|
||||
---
|
||||
|
||||
# gRPC servers and clients
|
||||
|
||||
Mu-Haskell defines a generic notion of service and server that implements it. This generic server can then be used by `mu-grpc-server`, to provide a concrete implementation using a specific wire format. Or you can use `mu-grpc-client` to build a client.
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: intro/
|
||||
---
|
||||
|
||||
# Introduction to Mu-Haskell
|
||||
|
||||
Many companies have embraced microservices architectures as the best way to scale up their internal software systems, separate work across different company divisions and development teams. Microservices architectures also allow teams to turn an idea or bug report into a working feature of fix in production more quickly, in accordance to the agile principles.
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: middleware/
|
||||
---
|
||||
|
||||
# Integration with WAI middleware
|
||||
|
||||
Although you usually run a `mu-rpc` server directly using a function like `runGRpcApp`, this is just a convenience function to make it simpler to run the server. Under the hood, the library generates a so-called WAI application, which is then fed to an actual server.
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: registry/
|
||||
---
|
||||
|
||||
# Registry
|
||||
|
||||
Schemas evolve over time. It is a good practice to keep an inventory of all the schemas you can work with, in the form of a *registry*. Using `mu-schema` you can declare one such registry as simply a mapping from versions to schemas:
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: rpc/
|
||||
---
|
||||
|
||||
# Services and servers
|
||||
|
||||
There are several formats in the wild used to declare service APIs, including [Avro IDL](https://avro.apache.org/docs/current/idl.html), [gRPC](https://grpc.io/), and [OpenAPI](https://swagger.io/specification/). `mu-rpc` abstract the commonalities into a single type-level format for declaring these services, building on the format-independent schema facilities of `mu-schema`. In addition, this package provides a generic notion of *server* of a service. One such server defines one behavior for each method in the service, but does not bother with (de)serialization mechanisms.
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: schema/
|
||||
---
|
||||
|
||||
# Schemas
|
||||
|
||||
Using `mu-schema` you can describe a schema for your data using type-level techniques. You can then automatically generate:
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: stream/
|
||||
---
|
||||
|
||||
# Streams
|
||||
|
||||
In the docs about [service definition](rpc.md) we had one single `SayHello` method which takes one value and produces one value. However, we can also declare methods which perform streaming, such as:
|
||||
@ -1,3 +1,9 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Mu-Haskell
|
||||
permalink: transformer/
|
||||
---
|
||||
|
||||
# Integration using transformers
|
||||
|
||||
You might be wondering: how can I integrate my favorite logging library with `mu-grpc-server`? Our [explanation of services](rpc.md) introduced `MonadServer` as the simplest set of capabilities required for a server:
|
||||
BIN
docs/img/favicon.png
Normal file
BIN
docs/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
99
docs/img/header-image.svg
Normal file
99
docs/img/header-image.svg
Normal file
@ -0,0 +1,99 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="418px" height="418px" viewBox="0 0 418 418" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>header-image</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="header-image" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="header.image" transform="translate(40.000000, 58.000000)">
|
||||
<path d="M68,38 L162.976834,92.2724764 C164.846284,93.3407335 166,95.3287941 166,97.4819352 L166,202.518065 C166,204.671206 164.846284,206.659267 162.976834,207.727524 L68,262 L68,262" id="path" stroke="#3D5AFE" stroke-width="3" stroke-dasharray="8,6" transform="translate(117.000000, 150.000000) rotate(-180.000000) translate(-117.000000, -150.000000) "></path>
|
||||
<g id="browser" transform="translate(170.000000, 213.000000)">
|
||||
<g id="content" transform="translate(0.000000, 14.600000)">
|
||||
<path d="M1.5,1.9 L1.5,69.4 C1.5,70.2284271 2.17157288,70.9 3,70.9 L131,70.9 C131.828427,70.9 132.5,70.2284271 132.5,69.4 L132.5,1.9 L1.5,1.9 Z" id="path" stroke="#3D5AFE" stroke-width="3" fill="#FFFFFF"></path>
|
||||
<g id="code" transform="translate(14.000000, 14.400000)">
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="0" width="7" height="3"></rect>
|
||||
<rect id="path-copy-14" fill="#3D5AFE" x="0" y="42" width="9" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="7" width="5" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="14" width="13" height="3"></rect>
|
||||
<rect id="path-copy-9" fill="#3D5AFE" x="0" y="35" width="14" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="21" width="21" height="3"></rect>
|
||||
<rect id="path" fill="#8BF0FE" x="0" y="28" width="12" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="15" y="28" width="12" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="30" y="28" width="24" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="24" y="21" width="13" height="3"></rect>
|
||||
<rect id="path-copy-17" fill="#8BF0FE" x="40" y="21" width="21" height="3"></rect>
|
||||
<rect id="path" fill="#8BF0FE" x="16" y="14" width="9" height="3"></rect>
|
||||
<rect id="path-copy-10" fill="#3D5AFE" x="17" y="35" width="16" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="28" y="14" width="16" height="3"></rect>
|
||||
<rect id="path-copy-11" fill="#3D5AFE" x="36" y="35" width="8" height="3"></rect>
|
||||
<rect id="path-copy-13" fill="#8BF0FE" x="47" y="35" width="18" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="47" y="14" width="7" height="3"></rect>
|
||||
<rect id="path-copy-12" fill="#3D5AFE" x="68" y="35" width="5" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="8" y="7" width="15" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="26" y="7" width="22" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="51" y="7" width="5" height="3"></rect>
|
||||
<rect id="path" fill="#8BF0FE" x="10" y="0" width="14" height="3"></rect>
|
||||
<rect id="path-copy-15" fill="#8BF0FE" x="12" y="42" width="9" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="27" y="0" width="10" height="3"></rect>
|
||||
<rect id="path-copy-16" fill="#3D5AFE" x="24" y="42" width="12" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="40" y="0" width="10" height="3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1.5,16.5 L132.5,16.5 L132.5,3 C132.5,2.17157288 131.828427,1.5 131,1.5 L3,1.5 C2.17157288,1.5 1.5,2.17157288 1.5,3 L1.5,16.5 Z" id="path" stroke="#3D5AFE" stroke-width="3" fill="#B9C4FE"></path>
|
||||
<ellipse id="bullet" fill="#3D5AFE" cx="9" cy="9.0015444" rx="2" ry="2.0015444"></ellipse>
|
||||
<ellipse id="bullet" fill="#3D5AFE" cx="16" cy="9.0015444" rx="2" ry="2.0015444"></ellipse>
|
||||
<ellipse id="bullet" fill="#3D5AFE" cx="23" cy="9.0015444" rx="2" ry="2.0015444"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
<g id="browser" transform="translate(163.000000, 0.000000)">
|
||||
<g id="content" transform="translate(0.000000, 14.600000)">
|
||||
<path d="M1.5,1.9 L1.5,69.4 C1.5,70.2284271 2.17157288,70.9 3,70.9 L131,70.9 C131.828427,70.9 132.5,70.2284271 132.5,69.4 L132.5,1.9 L1.5,1.9 Z" id="path" stroke="#3D5AFE" stroke-width="3" fill="#FFFFFF"></path>
|
||||
<g id="code" transform="translate(14.000000, 14.400000)">
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="0" width="7" height="3"></rect>
|
||||
<rect id="path-copy-14" fill="#3D5AFE" x="0" y="42" width="11" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="7" width="15" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="14" width="24" height="3"></rect>
|
||||
<rect id="path-copy-9" fill="#3D5AFE" x="0" y="35" width="14" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="21" width="29" height="3"></rect>
|
||||
<rect id="path" fill="#8BF0FE" x="0" y="28" width="12" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="15" y="28" width="12" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="30" y="28" width="24" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="32" y="21" width="12" height="3"></rect>
|
||||
<rect id="path" fill="#8BF0FE" x="27" y="14" width="19" height="3"></rect>
|
||||
<rect id="path-copy-10" fill="#8BF0FE" x="17" y="35" width="16" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="49" y="14" width="16" height="3"></rect>
|
||||
<rect id="path-copy-11" fill="#3D5AFE" x="36" y="35" width="8" height="3"></rect>
|
||||
<rect id="path-copy-13" fill="#3D5AFE" x="47" y="35" width="18" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="68" y="14" width="7" height="3"></rect>
|
||||
<rect id="path-copy-12" fill="#3D5AFE" x="68" y="35" width="5" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="18" y="7" width="15" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="36" y="7" width="22" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="61" y="7" width="5" height="3"></rect>
|
||||
<rect id="path" fill="#8BF0FE" x="10" y="0" width="14" height="3"></rect>
|
||||
<rect id="path-copy-15" fill="#8BF0FE" x="14" y="42" width="9" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="27" y="0" width="10" height="3"></rect>
|
||||
<rect id="path-copy-16" fill="#3D5AFE" x="26" y="42" width="23" height="3"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="40" y="0" width="10" height="3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1.5,16.5 L132.5,16.5 L132.5,3 C132.5,2.17157288 131.828427,1.5 131,1.5 L3,1.5 C2.17157288,1.5 1.5,2.17157288 1.5,3 L1.5,16.5 Z" id="path" stroke="#3D5AFE" stroke-width="3" fill="#B9C4FE"></path>
|
||||
<ellipse id="bullet" fill="#3D5AFE" cx="9" cy="9.0015444" rx="2" ry="2.0015444"></ellipse>
|
||||
<ellipse id="bullet" fill="#3D5AFE" cx="16" cy="9.0015444" rx="2" ry="2.0015444"></ellipse>
|
||||
<ellipse id="bullet" fill="#3D5AFE" cx="23" cy="9.0015444" rx="2" ry="2.0015444"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon" transform="translate(282.000000, 206.000000)" stroke="#3D5AFE" stroke-width="3">
|
||||
<circle id="path" fill="#8BF0FE" cx="16" cy="16" r="14.5"></circle>
|
||||
<polyline id="path" points="10 16.8825244 14.5645924 21 23 11"></polyline>
|
||||
</g>
|
||||
<g id="computer" transform="translate(0.000000, 102.000000)">
|
||||
<path d="M7.5,80.5 L136.5,80.5 L136.5,3 C136.5,2.17157288 135.828427,1.5 135,1.5 L9,1.5 C8.17157288,1.5 7.5,2.17157288 7.5,3 L7.5,80.5 Z" id="path" stroke="#3D5AFE" stroke-width="3" fill="#FFFFFF"></path>
|
||||
<rect id="path" stroke="#3D5AFE" stroke-width="3" fill="#B9C4FE" x="1.5" y="80.5" width="141" height="12"></rect>
|
||||
<path d="M39,80.5 C38.7238576,80.5 38.5,80.7238576 38.5,81 L38.5,85 C38.5,85.8284271 39.1715729,86.5 40,86.5 L104,86.5 C104.828427,86.5 105.5,85.8284271 105.5,85 L105.5,82 C105.5,81.1715729 104.828427,80.5 104,80.5 L39,80.5 Z" id="path" stroke="#3D5AFE" stroke-width="3" fill="#FFFFFF"></path>
|
||||
<rect id="path" stroke="#3D5AFE" stroke-width="3" fill="#FFFFFF" x="15.5" y="9.5" width="113" height="63"></rect>
|
||||
<path d="M87,37.6723647 L83.0909091,37.3076923 C82.9090909,36.7606838 82.6363636,36.1225071 82.3636364,35.5754986 L84.9090909,32.4757835 C85.1818182,32.1111111 85.1818182,31.5641026 84.8181818,31.2905983 L81.4545455,28.008547 C81.0909091,27.6438746 80.6363636,27.6438746 80.2727273,27.9173789 L77.1818182,30.4700855 C76.6363636,30.1965812 76.0909091,29.9230769 75.4545455,29.7407407 L75.0909091,25.8205128 C75.0909091,25.3646724 74.6363636,25 74.1818182,25 L69.5454545,25 C69.0909091,25 68.7272727,25.3646724 68.6363636,25.8205128 L68.2727273,29.7407407 C67.7272727,29.9230769 67.0909091,30.1965812 66.5454545,30.4700855 L63.4545455,27.9173789 C63.0909091,27.6438746 62.5454545,27.6438746 62.2727273,28.008547 L58.9090909,31.3817664 C58.6363636,31.6552707 58.6363636,32.2022792 58.9090909,32.5669516 L61.4545455,35.6666667 C61.1818182,36.2136752 60.9090909,36.7606838 60.7272727,37.3988604 L56.8181818,37.6723647 C56.3636364,37.6723647 56,38.1282051 56,38.5840456 L56,43.3247863 C56,43.7806268 56.3636364,44.1452991 56.8181818,44.2364672 L60.7272727,44.6011396 C60.9090909,45.1481481 61.1818182,45.7863248 61.4545455,46.3333333 L58.9090909,49.4330484 C58.6363636,49.7977208 58.6363636,50.3447293 59,50.6182336 L62.3636364,53.991453 C62.7272727,54.3561254 63.1818182,54.3561254 63.5454545,54.0826211 L66.6363636,51.5299145 C67.1818182,51.8034188 67.7272727,52.0769231 68.3636364,52.2592593 L68.7272727,56.1794872 C68.7272727,56.6353276 69.1818182,57 69.6363636,57 L74.3636364,57 C74.8181818,57 75.1818182,56.6353276 75.2727273,56.1794872 L75.6363636,52.2592593 C76.1818182,52.0769231 76.8181818,51.8034188 77.3636364,51.5299145 L80.4545455,54.0826211 C80.8181818,54.3561254 81.3636364,54.3561254 81.6363636,53.991453 L85,50.6182336 C85.3636364,50.2535613 85.3636364,49.7977208 85.0909091,49.4330484 L82.5454545,46.3333333 C82.8181818,45.7863248 83.0909091,45.2393162 83.2727273,44.6011396 L87.1818182,44.2364672 C87.6363636,44.2364672 88,43.7806268 88,43.3247863 L88,38.5840456 C87.8181818,38.1282051 87.4545455,37.7635328 87,37.6723647 Z M71.9090909,46.6068376 C68.8181818,46.6068376 66.2727273,44.0541311 66.2727273,40.954416 C66.2727273,37.8547009 68.8181818,35.3019943 71.9090909,35.3019943 C75,35.3019943 77.5454545,37.8547009 77.5454545,40.954416 C77.5454545,44.0541311 75,46.6068376 71.9090909,46.6068376 Z" id="icon" fill="#3D5AFE" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
75
docs/img/main-feature-primary.svg
Normal file
75
docs/img/main-feature-primary.svg
Normal file
@ -0,0 +1,75 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="152px" height="152px" viewBox="0 0 152 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>feature-primary</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="feature-primary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="image">
|
||||
<rect id="bound" opacity="0.0847981771" x="0" y="0" width="152" height="152"></rect>
|
||||
<path d="M36,64 L36,88" id="line" stroke="#3D5AFE" stroke-width="2" stroke-dasharray="4,3"></path>
|
||||
<path d="M116,64 L116,88" id="line" stroke="#3D5AFE" stroke-width="2" stroke-dasharray="4,3"></path>
|
||||
<path d="M64,45 L88,45" id="line" stroke="#3D5AFE" stroke-width="2" stroke-dasharray="4,3"></path>
|
||||
<path d="M64,107 L88,107" id="line" stroke="#3D5AFE" stroke-width="2" stroke-dasharray="4,3"></path>
|
||||
<g id="browser" transform="translate(88.000000, 88.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)" stroke="#3D5AFE" stroke-width="2">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" fill="#FFFFFF"></path>
|
||||
<g id="check" transform="translate(20.000000, 8.000000)">
|
||||
<circle id="path" fill-opacity="0.6" fill="#3DE6FE" cx="8" cy="8" r="8"></circle>
|
||||
<polyline id="path" points="4.5 8.44995117 7.11181641 10.8647461 11.9384766 5"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g id="browser" transform="translate(8.000000, 88.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)" stroke="#3D5AFE" stroke-width="2">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" fill="#FFFFFF"></path>
|
||||
<g id="check" transform="translate(20.000000, 8.000000)">
|
||||
<circle id="path" fill-opacity="0.6" fill="#3DE6FE" cx="8" cy="8" r="8"></circle>
|
||||
<polyline id="path" points="4.5 8.44995117 7.11181641 10.8647461 11.9384766 5"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g id="browser" transform="translate(88.000000, 23.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)" stroke="#3D5AFE" stroke-width="2">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" fill="#FFFFFF"></path>
|
||||
<g id="check" transform="translate(20.000000, 8.000000)">
|
||||
<circle id="path" fill-opacity="0.6" fill="#3DE6FE" cx="8" cy="8" r="8"></circle>
|
||||
<polyline id="path" points="4.5 8.44995117 7.11181641 10.8647461 11.9384766 5"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g id="browser" transform="translate(8.000000, 23.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)" stroke="#3D5AFE" stroke-width="2">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" fill="#FFFFFF"></path>
|
||||
<g id="check" transform="translate(20.000000, 8.000000)">
|
||||
<circle id="path" fill-opacity="0.6" fill="#3DE6FE" cx="8" cy="8" r="8"></circle>
|
||||
<polyline id="path" points="4.5 8.44995117 7.11181641 10.8647461 11.9384766 5"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
110
docs/img/main-feature-secondary.svg
Normal file
110
docs/img/main-feature-secondary.svg
Normal file
@ -0,0 +1,110 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="152px" height="152px" viewBox="0 0 152 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>main-feature-secondary</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="main-feature-secondary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="image">
|
||||
<rect id="bound" opacity="0.0847981771" x="0" y="0" width="152" height="152"></rect>
|
||||
<path d="M60,20 L107.488417,47.1362382 C108.423142,47.6703667 109,48.6643971 109,49.7409676 L109,102.259032 C109,103.335603 108.423142,104.329633 107.488417,104.863762 L60,132 L60,132" id="path" stroke="#3D5AFE" stroke-width="2" stroke-dasharray="4,3"></path>
|
||||
<g id="browser" transform="translate(18.000000, 101.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF"></path>
|
||||
<g id="code-copy" transform="translate(6.000000, 6.000000)">
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="0" width="3" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="23" y="0" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="16" y="0" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="4" y="0" width="11" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="16" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="12" y="16" width="2" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="6" y="16" width="5" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="15" y="16" width="9" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="0" y="4" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="6" y="4" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="12" y="4" width="15" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="12" width="12" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="13" y="12" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="8" width="10" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="28" y="8" width="3" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="20" y="8" width="7" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="11" y="8" width="8" height="2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g id="browser" transform="translate(80.000000, 55.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF"></path>
|
||||
<g id="code-copy" transform="translate(5.000000, 6.000000)">
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="0" width="3" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="4" y="0" width="3" height="2"></rect>
|
||||
<rect id="path-copy" fill-opacity="0.6" fill="#3DE6FE" x="17" y="0" width="8" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="13" y="0" width="3" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="8" y="0" width="4" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="22" y="16" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="12" y="16" width="2" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="5" y="16" width="6" height="2"></rect>
|
||||
<rect id="path-copy-8" fill="#3D5AFE" x="15" y="16" width="6" height="2"></rect>
|
||||
<rect id="path-copy-7" fill="#3D5AFE" x="0" y="16" width="4" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="4" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="6" y="4" width="7" height="2"></rect>
|
||||
<rect id="path-copy-2" fill="#3D5AFE" x="18" y="4" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="25" y="4" width="2" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="14" y="4" width="3" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="12" width="12" height="2"></rect>
|
||||
<rect id="path-copy-6" fill="#3D5AFE" x="24" y="12" width="5" height="2"></rect>
|
||||
<rect id="path-copy-5" fill-opacity="0.6" fill="#3DE6FE" x="19" y="12" width="4" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="13" y="12" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="8" width="3" height="2"></rect>
|
||||
<rect id="path-copy-3" fill="#3D5AFE" x="17" y="8" width="5" height="2"></rect>
|
||||
<rect id="path-copy-4" fill="#3D5AFE" x="27" y="8" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="23" y="8" width="3" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="12" y="8" width="4" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="4" y="8" width="7" height="2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g id="browser" transform="translate(18.000000, 10.000000)">
|
||||
<g id="content" transform="translate(0.000000, 9.000000)">
|
||||
<path d="M1,1 L1,31 L55,31 L55,1 L1,1 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF"></path>
|
||||
<g id="code" transform="translate(6.000000, 6.000000)">
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="0" width="3" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="4" y="0" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="16" y="0" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="11" y="0" width="4" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="0" y="16" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="12" y="16" width="10" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="6" y="16" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="4" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="7" y="4" width="6" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="25" y="4" width="2" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="14" y="4" width="10" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="12" width="12" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="13" y="12" width="5" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="0" y="8" width="10" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="28" y="8" width="3" height="2"></rect>
|
||||
<rect id="path" fill="#3D5AFE" x="20" y="8" width="7" height="2"></rect>
|
||||
<rect id="path" fill-opacity="0.6" fill="#3DE6FE" x="11" y="8" width="8" height="2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<g id="bar">
|
||||
<path d="M1,10 L55,10 L55,1 L1,1 L1,10 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#B9C4FE"></path>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="5.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="10.5" cy="5.5" r="1.5"></circle>
|
||||
<circle id="bullet" fill="#3D5AFE" cx="15.5" cy="5.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
55
docs/img/main-feature-tertiary.svg
Normal file
55
docs/img/main-feature-tertiary.svg
Normal file
@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="152px" height="152px" viewBox="0 0 152 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>main-feature-tertiary</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="main-feature-tertiary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="image">
|
||||
<g id="arrow" transform="translate(43.000000, 42.000000)" stroke="#3D5AFE" stroke-width="2">
|
||||
<path d="M71,34 L71,62 C71,63.6568542 69.6568542,65 68,65 L41.5,65 L41.5,65" id="path" stroke-dasharray="4,3"></path>
|
||||
<path d="M29.1015625,3 L29.1015625,31 C29.1015625,32.6568542 27.7584167,34 26.1015625,34 L0,34 L0,34" id="path" stroke-dasharray="4,3" transform="translate(14.550781, 18.500000) rotate(-180.000000) translate(-14.550781, -18.500000) "></path>
|
||||
<polyline id="path" transform="translate(39.000000, 65.000000) rotate(-45.000000) translate(-39.000000, -65.000000) " points="37 67 37 63 37 63 41 63"></polyline>
|
||||
<polyline id="path" transform="translate(33.000000, 3.000000) rotate(-225.000000) translate(-33.000000, -3.000000) " points="31 5 31 1 31 1 35 1"></polyline>
|
||||
</g>
|
||||
<g id="server" transform="translate(87.000000, 21.000000)">
|
||||
<g id="path" transform="translate(0.000000, 34.000000)">
|
||||
<rect stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF" x="1" y="1" width="52" height="13" rx="3"></rect>
|
||||
<rect fill-opacity="0.6" fill="#3DE6FE" x="35" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="39" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="43" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="47" y="5" width="2" height="5" rx="1"></rect>
|
||||
<circle fill="#3D5AFE" cx="7.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#3D5AFE" cx="12.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#3D5AFE" cx="17.5" cy="7.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="path" transform="translate(0.000000, 17.000000)">
|
||||
<rect stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF" x="1" y="1" width="52" height="13" rx="3"></rect>
|
||||
<rect fill="#3D5AFE" x="35" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="39" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="43" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill-opacity="0.6" fill="#3DE6FE" x="47" y="5" width="2" height="5" rx="1"></rect>
|
||||
<circle fill="#3D5AFE" cx="7.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#3D5AFE" cx="12.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#3D5AFE" cx="17.5" cy="7.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="path">
|
||||
<rect stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF" x="1" y="1" width="52" height="13" rx="3"></rect>
|
||||
<rect fill="#3D5AFE" x="35" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill-opacity="0.6" fill="#3DE6FE" x="39" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="43" y="5" width="2" height="5" rx="1"></rect>
|
||||
<rect fill="#3D5AFE" x="47" y="5" width="2" height="5" rx="1"></rect>
|
||||
<circle fill="#3D5AFE" cx="7.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#3D5AFE" cx="12.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#3D5AFE" cx="17.5" cy="7.5" r="1.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g id="computer" transform="translate(11.000000, 82.000000)">
|
||||
<rect id="path" stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF" x="4" y="1" width="54" height="34"></rect>
|
||||
<path d="M8,31 L54,31 L54,5 L8,5 L8,31 Z" id="path" stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF"></path>
|
||||
<path d="M38.5,16.3361823 L36.5454545,16.1538462 C36.4545455,15.8803419 36.3181818,15.5612536 36.1818182,15.2877493 L37.4545455,13.7378917 C37.5909091,13.5555556 37.5909091,13.2820513 37.4090909,13.1452991 L35.7272727,11.5042735 C35.5454545,11.3219373 35.3181818,11.3219373 35.1363636,11.4586895 L33.5909091,12.7350427 C33.3181818,12.5982906 33.0454545,12.4615385 32.7272727,12.3703704 L32.5454545,10.4102564 C32.5454545,10.1823362 32.3181818,10 32.0909091,10 L29.7727273,10 C29.5454545,10 29.3636364,10.1823362 29.3181818,10.4102564 L29.1363636,12.3703704 C28.8636364,12.4615385 28.5454545,12.5982906 28.2727273,12.7350427 L26.7272727,11.4586895 C26.5454545,11.3219373 26.2727273,11.3219373 26.1363636,11.5042735 L24.4545455,13.1908832 C24.3181818,13.3276353 24.3181818,13.6011396 24.4545455,13.7834758 L25.7272727,15.3333333 C25.5909091,15.6068376 25.4545455,15.8803419 25.3636364,16.1994302 L23.4090909,16.3361823 C23.1818182,16.3361823 23,16.5641026 23,16.7920228 L23,19.1623932 C23,19.3903134 23.1818182,19.5726496 23.4090909,19.6182336 L25.3636364,19.8005698 C25.4545455,20.0740741 25.5909091,20.3931624 25.7272727,20.6666667 L24.4545455,22.2165242 C24.3181818,22.3988604 24.3181818,22.6723647 24.5,22.8091168 L26.1818182,24.4957265 C26.3636364,24.6780627 26.5909091,24.6780627 26.7727273,24.5413105 L28.3181818,23.2649573 C28.5909091,23.4017094 28.8636364,23.5384615 29.1818182,23.6296296 L29.3636364,25.5897436 C29.3636364,25.8176638 29.5909091,26 29.8181818,26 L32.1818182,26 C32.4090909,26 32.5909091,25.8176638 32.6363636,25.5897436 L32.8181818,23.6296296 C33.0909091,23.5384615 33.4090909,23.4017094 33.6818182,23.2649573 L35.2272727,24.5413105 C35.4090909,24.6780627 35.6818182,24.6780627 35.8181818,24.4957265 L37.5,22.8091168 C37.6818182,22.6267806 37.6818182,22.3988604 37.5454545,22.2165242 L36.2727273,20.6666667 C36.4090909,20.3931624 36.5454545,20.1196581 36.6363636,19.8005698 L38.5909091,19.6182336 C38.8181818,19.6182336 39,19.3903134 39,19.1623932 L39,16.7920228 C38.9090909,16.5641026 38.7272727,16.3817664 38.5,16.3361823 Z M30.9545455,20.8034188 C29.4090909,20.8034188 28.1363636,19.5270655 28.1363636,17.977208 C28.1363636,16.4273504 29.4090909,15.1509972 30.9545455,15.1509972 C32.5,15.1509972 33.7727273,16.4273504 33.7727273,17.977208 C33.7727273,19.5270655 32.5,20.8034188 30.9545455,20.8034188 Z" id="Shape" fill="#3D5AFE" fill-rule="nonzero"></path>
|
||||
<rect id="path" stroke="#3D5AFE" stroke-width="2" fill-opacity="0.3" fill="#3D5AFE" x="1" y="35" width="60" height="8"></rect>
|
||||
<rect id="path" stroke="#3D5AFE" stroke-width="2" fill="#FFFFFF" x="15" y="35" width="31" height="4"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.8 KiB |
9
docs/img/nav-brand-white.svg
Normal file
9
docs/img/nav-brand-white.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="72px" height="72px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>nav-brand</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="nav-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M58.366,57.1855 C57.816,57.1855 57.366,56.7375 57.366,56.1855 C57.366,55.6335 57.816,55.1855 58.366,55.1855 C58.916,55.1855 59.366,55.6335 59.366,56.1855 C59.366,56.7375 58.916,57.1855 58.366,57.1855 L58.366,57.1855 Z M13.7,51.9395 C12.65,51.3315 12,50.2095 12,48.9955 L12,22.0755 C12,20.8595 12.65,19.7375 13.7,19.1315 L30.614,9.3655 L32.674,10.5555 L15.16,20.6675 C14.48,21.0615 14.062,21.7875 14.062,22.5735 L14.062,48.4975 C14.062,49.2835 14.482,50.0115 15.16,50.4035 L32.676,60.5175 L30.616,61.7055 L13.7,51.9395 Z M36.714,12.8855 L18.698,23.2875 C18.326,23.5015 18.098,23.8975 18.098,24.3255 L18.098,46.7455 C18.098,47.1735 18.326,47.5695 18.698,47.7835 L36.714,58.1855 L34.676,59.3615 L16.86,49.0755 C16.366,48.7895 16.062,48.2615 16.062,47.6895 L16.062,23.3815 C16.062,22.8095 16.366,22.2815 16.86,21.9955 L34.674,11.7095 L36.714,12.8855 Z M58.366,13.8855 C58.916,13.8855 59.366,14.3335 59.366,14.8855 C59.366,15.4375 58.916,15.8855 58.366,15.8855 C57.816,15.8855 57.366,15.4375 57.366,14.8855 C57.366,14.3335 57.816,13.8855 58.366,13.8855 L58.366,13.8855 Z M50.268,18.5575 C50.82,18.5575 51.268,19.0055 51.268,19.5575 C51.268,20.1075 50.82,20.5575 50.268,20.5575 C49.718,20.5575 49.268,20.1075 49.268,19.5575 C49.268,19.0055 49.718,18.5575 50.268,18.5575 L50.268,18.5575 Z M50.268,50.5355 C50.82,50.5355 51.268,50.9835 51.268,51.5355 C51.268,52.0875 50.82,52.5355 50.268,52.5355 C49.718,52.5355 49.268,52.0875 49.268,51.5355 C49.268,50.9835 49.718,50.5355 50.268,50.5355 L50.268,50.5355 Z M58.366,53.1855 C56.712,53.1855 55.366,54.5315 55.366,56.1855 C55.366,56.3735 55.388,56.5555 55.42,56.7335 L40.412,65.3995 C39.362,66.0075 38.066,66.0075 37.012,65.3995 L32.616,62.8595 L48.318,53.7955 C48.842,54.2515 49.52,54.5355 50.268,54.5355 C51.922,54.5355 53.268,53.1895 53.268,51.5355 C53.268,49.8815 51.922,48.5355 50.268,48.5355 C48.614,48.5355 47.268,49.8815 47.268,51.5355 C47.268,51.7155 47.29,51.8895 47.322,52.0615 L38.714,57.0315 L20.398,46.4555 C20.212,46.3495 20.098,46.1515 20.098,45.9355 L20.098,25.1355 C20.098,24.9195 20.212,24.7215 20.398,24.6155 L38.712,14.0395 L47.324,19.0115 C47.29,19.1875 47.268,19.3695 47.268,19.5575 C47.268,21.2115 48.614,22.5575 50.268,22.5575 C51.922,22.5575 53.268,21.2115 53.268,19.5575 C53.268,17.9015 51.922,16.5575 50.268,16.5575 C49.526,16.5575 48.856,16.8375 48.332,17.2835 L32.614,8.2095 L37.012,5.6715 C38.066,5.0635 39.362,5.0635 40.412,5.6715 L55.42,14.3375 C55.388,14.5155 55.366,14.6975 55.366,14.8855 C55.366,16.5395 56.712,17.8855 58.366,17.8855 C60.02,17.8855 61.366,16.5395 61.366,14.8855 C61.366,13.2315 60.02,11.8855 58.366,11.8855 C57.626,11.8855 56.956,12.1655 56.432,12.6095 L40.714,3.5355 C39.476,2.8215 37.95,2.8215 36.714,3.5355 L12,17.8035 C10.762,18.5175 10,19.8395 10,21.2675 L10,49.8035 C10,51.2315 10.762,52.5535 12,53.2675 L36.714,67.5355 C37.95,68.2495 39.476,68.2495 40.714,67.5355 L56.432,58.4595 C56.956,58.9055 57.626,59.1855 58.366,59.1855 C60.02,59.1855 61.366,57.8395 61.366,56.1855 C61.366,54.5315 60.02,53.1855 58.366,53.1855 L58.366,53.1855 Z" id="path" fill="#FFF"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
9
docs/img/nav-brand.svg
Normal file
9
docs/img/nav-brand.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="72px" height="72px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>nav-brand</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="nav-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M58.366,57.1855 C57.816,57.1855 57.366,56.7375 57.366,56.1855 C57.366,55.6335 57.816,55.1855 58.366,55.1855 C58.916,55.1855 59.366,55.6335 59.366,56.1855 C59.366,56.7375 58.916,57.1855 58.366,57.1855 L58.366,57.1855 Z M13.7,51.9395 C12.65,51.3315 12,50.2095 12,48.9955 L12,22.0755 C12,20.8595 12.65,19.7375 13.7,19.1315 L30.614,9.3655 L32.674,10.5555 L15.16,20.6675 C14.48,21.0615 14.062,21.7875 14.062,22.5735 L14.062,48.4975 C14.062,49.2835 14.482,50.0115 15.16,50.4035 L32.676,60.5175 L30.616,61.7055 L13.7,51.9395 Z M36.714,12.8855 L18.698,23.2875 C18.326,23.5015 18.098,23.8975 18.098,24.3255 L18.098,46.7455 C18.098,47.1735 18.326,47.5695 18.698,47.7835 L36.714,58.1855 L34.676,59.3615 L16.86,49.0755 C16.366,48.7895 16.062,48.2615 16.062,47.6895 L16.062,23.3815 C16.062,22.8095 16.366,22.2815 16.86,21.9955 L34.674,11.7095 L36.714,12.8855 Z M58.366,13.8855 C58.916,13.8855 59.366,14.3335 59.366,14.8855 C59.366,15.4375 58.916,15.8855 58.366,15.8855 C57.816,15.8855 57.366,15.4375 57.366,14.8855 C57.366,14.3335 57.816,13.8855 58.366,13.8855 L58.366,13.8855 Z M50.268,18.5575 C50.82,18.5575 51.268,19.0055 51.268,19.5575 C51.268,20.1075 50.82,20.5575 50.268,20.5575 C49.718,20.5575 49.268,20.1075 49.268,19.5575 C49.268,19.0055 49.718,18.5575 50.268,18.5575 L50.268,18.5575 Z M50.268,50.5355 C50.82,50.5355 51.268,50.9835 51.268,51.5355 C51.268,52.0875 50.82,52.5355 50.268,52.5355 C49.718,52.5355 49.268,52.0875 49.268,51.5355 C49.268,50.9835 49.718,50.5355 50.268,50.5355 L50.268,50.5355 Z M58.366,53.1855 C56.712,53.1855 55.366,54.5315 55.366,56.1855 C55.366,56.3735 55.388,56.5555 55.42,56.7335 L40.412,65.3995 C39.362,66.0075 38.066,66.0075 37.012,65.3995 L32.616,62.8595 L48.318,53.7955 C48.842,54.2515 49.52,54.5355 50.268,54.5355 C51.922,54.5355 53.268,53.1895 53.268,51.5355 C53.268,49.8815 51.922,48.5355 50.268,48.5355 C48.614,48.5355 47.268,49.8815 47.268,51.5355 C47.268,51.7155 47.29,51.8895 47.322,52.0615 L38.714,57.0315 L20.398,46.4555 C20.212,46.3495 20.098,46.1515 20.098,45.9355 L20.098,25.1355 C20.098,24.9195 20.212,24.7215 20.398,24.6155 L38.712,14.0395 L47.324,19.0115 C47.29,19.1875 47.268,19.3695 47.268,19.5575 C47.268,21.2115 48.614,22.5575 50.268,22.5575 C51.922,22.5575 53.268,21.2115 53.268,19.5575 C53.268,17.9015 51.922,16.5575 50.268,16.5575 C49.526,16.5575 48.856,16.8375 48.332,17.2835 L32.614,8.2095 L37.012,5.6715 C38.066,5.0635 39.362,5.0635 40.412,5.6715 L55.42,14.3375 C55.388,14.5155 55.366,14.6975 55.366,14.8855 C55.366,16.5395 56.712,17.8855 58.366,17.8855 C60.02,17.8855 61.366,16.5395 61.366,14.8855 C61.366,13.2315 60.02,11.8855 58.366,11.8855 C57.626,11.8855 56.956,12.1655 56.432,12.6095 L40.714,3.5355 C39.476,2.8215 37.95,2.8215 36.714,3.5355 L12,17.8035 C10.762,18.5175 10,19.8395 10,21.2675 L10,49.8035 C10,51.2315 10.762,52.5535 12,53.2675 L36.714,67.5355 C37.95,68.2495 39.476,68.2495 40.714,67.5355 L56.432,58.4595 C56.956,58.9055 57.626,59.1855 58.366,59.1855 C60.02,59.1855 61.366,57.8395 61.366,56.1855 C61.366,54.5315 60.02,53.1855 58.366,53.1855 L58.366,53.1855 Z" id="path" fill="#3D5AFE"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
12
docs/img/nav-icon-close.svg
Normal file
12
docs/img/nav-icon-close.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
|
||||
<title>nav-icon-close</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="nav-icon-close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group" transform="translate(12.000000, 12.000000) rotate(-315.000000) translate(-12.000000, -12.000000) " fill="#FFFFFF">
|
||||
<rect id="path" x="0" y="11" width="24" height="2"></rect>
|
||||
<rect id="path-copy" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="0" y="11" width="24" height="2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 825 B |
13
docs/img/nav-icon-open.svg
Normal file
13
docs/img/nav-icon-open.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
|
||||
<title>nav-icon-open</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="nav-icon-open" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0.000000, 4.000000)" fill="#1F1C49" fill-rule="nonzero" id="path">
|
||||
<rect x="0" y="0" width="24" height="2"></rect>
|
||||
<rect x="0" y="7" width="24" height="2"></rect>
|
||||
<rect x="0" y="14" width="24" height="2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 718 B |
11
docs/img/sidebar-icon-open.svg
Normal file
11
docs/img/sidebar-icon-open.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
|
||||
<title>sidebar-icon-open</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="sidebar-icon-open" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="path" fill="#3F3F3F" x="0" y="4" width="24" height="2"></rect>
|
||||
<rect id="path" fill="#3F3F3F" x="0" y="11" width="24" height="2"></rect>
|
||||
<rect id="path" fill="#3F3F3F" x="0" y="18" width="24" height="2"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 681 B |
162
docs/js/docs.js
Normal file
162
docs/js/docs.js
Normal file
@ -0,0 +1,162 @@
|
||||
/**
|
||||
* Toggle an specific class to the received DOM element.
|
||||
* @param {string} elemSelector The query selector specifying the target element.
|
||||
* @param {string} [activeClass='active'] The class to be applied/removed.
|
||||
*/
|
||||
function toggleClass(elemSelector, activeClass = 'active') {
|
||||
const elem = document.querySelector(elemSelector);
|
||||
if (elem) {
|
||||
elem.classList.toggle(activeClass);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle specific classes to an array of corresponding DOM elements.
|
||||
* @param {Array<string>} elemSelectors The query selectors specifying the target elements.
|
||||
* @param {Array<string>} activeClasses The classes to be applied/removed.
|
||||
*/
|
||||
function toggleClasses(elemSelectors, activeClasses) {
|
||||
elemSelectors.map((elemSelector, idx) => {
|
||||
toggleClass(elemSelector, activeClasses[idx]);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove active class from siblings DOM elements and apply it to event target.
|
||||
* @param {Element} element The element receiving the class, and whose siblings will lose it.
|
||||
* @param {string} [activeClass='active'] The class to be applied.
|
||||
*/
|
||||
function activate(element, activeClass = 'active') {
|
||||
[...element.parentNode.children].map((elem) => elem.classList.remove(activeClass));
|
||||
element.classList.add(activeClass);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove active class from siblings parent DOM elements and apply it to element target parent.
|
||||
* @param {Element} element The element receiving the class, and whose siblings will lose it.
|
||||
* @param {string} [activeClass='active'] The class to be applied.
|
||||
*/
|
||||
function activateParent(element, activeClass = 'active') {
|
||||
const elemParent = element.parentNode;
|
||||
activate(elemParent, activeClass);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove active class from siblings parent DOM elements and apply it to element target parent.
|
||||
* @param {Element} element The element receiving the class, and whose siblings will lose it.
|
||||
* @param {string} [activeClass='active'] The class to be applied.
|
||||
*/
|
||||
function toggleParent(element, activeClass = "active") {
|
||||
const elemParent = element.parentNode;
|
||||
if (elemParent) {
|
||||
elemParent.classList.toggle(activeClass);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This will make the specified elements click event to show/hide the menu sidebar.
|
||||
*/
|
||||
function activateToggle() {
|
||||
const menuToggles = document.querySelectorAll("#menu-toggle, #main-toggle");
|
||||
if (menuToggles) {
|
||||
[...menuToggles].map(elem => {
|
||||
elem.onclick = e => {
|
||||
e.preventDefault();
|
||||
toggleClass("#site-sidebar", "toggled");
|
||||
toggleClass("#site-doc", "expanded");
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This will make the specified elements click event to behave as a menu
|
||||
* parent entry, or a link, or sometimes both, depending on the context.
|
||||
*/
|
||||
function activateMenuNesting() {
|
||||
const menuParents = document.querySelectorAll(".drop-nested");
|
||||
if (menuParents) {
|
||||
[...menuParents].map(elem => {
|
||||
elem.onclick = e => {
|
||||
e.preventDefault();
|
||||
toggleParent(elem, "open");
|
||||
const elementType = e.currentTarget.tagName.toLowerCase();
|
||||
if (elementType === "a") {
|
||||
const linkElement = e.currentTarget;
|
||||
const linkElementParent = linkElement.parentNode;
|
||||
const destination = linkElement.href;
|
||||
if (
|
||||
destination !== window.location.href &&
|
||||
!linkElementParent.classList.contains("active")
|
||||
) {
|
||||
window.location.href = destination;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Aux function to retrieve repository stars and watchers count info from
|
||||
* GitHub API and set it on its proper nodes.
|
||||
*/
|
||||
async function loadGitHubStats() {
|
||||
const content = document.querySelector("#content");
|
||||
const ghOwner = content.dataset.githubOwner;
|
||||
const ghRepo = content.dataset.githubRepo;
|
||||
|
||||
if (ghOwner && ghRepo) {
|
||||
const ghAPI = `https://api.github.com/repos/${ghOwner}/${ghRepo}`;
|
||||
const ghDataResponse = await fetch(ghAPI);
|
||||
const ghData = await ghDataResponse.json();
|
||||
const watchersElement = document.querySelector("#eyes");
|
||||
const starsElement = document.querySelector("#stars");
|
||||
watchersElement.textContent = ghData.subscribers_count;
|
||||
starsElement.textContent = ghData.stargazers_count;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to create an anchor with an specific id
|
||||
* @param {string} id The corresponding id from which the href will be created.
|
||||
* @returns {Element} The new created anchor.
|
||||
*/
|
||||
function anchorForId(id) {
|
||||
const anchor = document.createElement("a");
|
||||
anchor.className = "header-link";
|
||||
anchor.href = `#${id}`;
|
||||
anchor.innerHTML = '<i class="fa fa-link"></i>';
|
||||
return anchor;
|
||||
}
|
||||
|
||||
/**
|
||||
* Aux function to retrieve repository stars and watchers count info from
|
||||
* @param {string} level The specific level to select header from.
|
||||
* @param {Element} containingElement The element receiving the anchor.
|
||||
*/
|
||||
function linkifyAnchors(level, containingElement) {
|
||||
const headers = containingElement.getElementsByTagName(`h${level}`);
|
||||
[...headers].map(header => {
|
||||
if (typeof header.id !== "undefined" && header.id !== "") {
|
||||
header.append(anchorForId(header.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Function
|
||||
*/
|
||||
function linkifyAllLevels() {
|
||||
const content = document.querySelector("#content");
|
||||
[...Array(7).keys()].map(level => {
|
||||
linkifyAnchors(level, content);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
activateToggle();
|
||||
activateMenuNesting();
|
||||
// loadGitHubStats();
|
||||
// linkifyAllLevels();
|
||||
});
|
||||
31
docs/js/main.js
Executable file
31
docs/js/main.js
Executable file
@ -0,0 +1,31 @@
|
||||
// This initialization requires that this script is loaded with `defer`
|
||||
const navElement = document.querySelector("#site-nav");
|
||||
|
||||
/**
|
||||
* Toggle an specific class to the received DOM element.
|
||||
* @param {string} elemSelector The query selector specifying the target element.
|
||||
* @param {string} [activeClass='active'] The class to be applied/removed.
|
||||
*/
|
||||
function toggleClass(elemSelector, activeClass = "active") {
|
||||
const elem = document.querySelector(elemSelector);
|
||||
if (elem) {
|
||||
elem.classList.toggle(activeClass);
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation element modification through scrolling
|
||||
function scrollFunction() {
|
||||
if (document.documentElement.scrollTop > 0) {
|
||||
navElement.classList.add("nav-scroll");
|
||||
} else {
|
||||
navElement.classList.remove("nav-scroll");
|
||||
}
|
||||
}
|
||||
|
||||
// Init call
|
||||
function loadEvent() {
|
||||
document.addEventListener("scroll", scrollFunction);
|
||||
}
|
||||
|
||||
// Attach the functions to each event they are interested in
|
||||
window.addEventListener("load", loadEvent);
|
||||
Loading…
Reference in New Issue
Block a user