Add particle effect and installation page

This commit is contained in:
Federico Terzi 2019-09-22 10:41:42 +02:00
parent 23b6f6ee84
commit a2a5ecb854
49 changed files with 537 additions and 0 deletions

10
_data/navigation.yml Normal file
View File

@ -0,0 +1,10 @@
- name: Home
link: /
- name: Installation
link: /install/
- name: Documentation
link: /docs/
- name: Packages
link: https://hub.espanso.org
- name: GitHub
link: https://github.com/federico-terzi/espanso

0
_includes/footer.html Normal file
View File

20
_includes/navigation.html Normal file
View File

@ -0,0 +1,20 @@
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/">
<img src="/assets/images/espanso.svg" class="logo-img">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
{% for item in site.data.navigation %}
<li class="nav-item {% if page.url == item.link %}active{% endif %}">
<a class="nav-link" href="{{ item.link }}">{{ item.name }}</a>
</li>
{% endfor %}
<li class="nav-item">
<a class="nav-link btn" href="/donate/">Donate</a>
</li>
</ul>
</div>
</nav>

76
_layouts/default.html Normal file
View File

@ -0,0 +1,76 @@
<!doctype html>
<html>
<!--
Hi there, thanks for checking out the espanso website!
If you want to see more interesting projects, visit my website: https://federicoterzi.com/
-->
<head>
<meta charset="utf-8">
{% assign pagetitle = "" %}
{% if page.title and page.hideTitle == False %}
{% assign pagetitle = page.title | append: " - " %}
{% endif %}
<title>{{pagetitle}}{{ site.title }} - {{ site.subtitle }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% seo %}
<link rel="apple-touch-icon" sizes="57x57" href="/assets/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
<link rel="manifest" href="/assets/images/manifest.json">
<meta name="msapplication-TileColor" content="#00b894">
<meta name="msapplication-TileImage" content="/assets/images/ms-icon-144x144.png">
<meta name="theme-color" content="#00b894">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">
</head>
<body>
{% include navigation.html %}
{% if page.showParticles %}
<div id="particles-js"></div>
{% endif %}
{% unless page.avoidContainer %}
<div class="container content">
{% endunless %}
{% unless page.hideTitle or layout.hideTitle %}
<h2 class="page-title mt-4 mb-4">{{page.title}}</h2>
{% endunless %}
{{ content }}
{% unless page.avoidContainer %}
</div>
{% endunless %}
{% include footer.html %}
<script src="/assets/js/jquery.slim.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
{% if page.showParticles %}
<script src="/assets/js/particles.min.js"></script>
<script>
particlesJS.load('particles-js', '/assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
{% endif %}
</body>
</html>

32
_sass/_default.scss Normal file
View File

@ -0,0 +1,32 @@
body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3, h4 {
font-weight: 700;
}
#particles-js {
position: absolute;
width: 100%;
height: 700px;
top: 0;
z-index: -100;
}
.content {
img {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
h2, h3, h4 {
margin: 30px 0 20px 0;
}
}
.light-text {
color: $grayColor;
}

24
_sass/_install.scss Normal file
View File

@ -0,0 +1,24 @@
.install {
@media screen and (min-width: $screen-laptop) {
margin-top: 80px;
}
img {
height: 130px;
margin: 40px auto 40px auto;
}
.btn {
font-weight: 700;
font-size: 1.2em;
background-color: $mainColor;
color: white !important;
padding: 10px 25px 10px 25px;
border-radius: 40px;
border: 0;
@media screen and (max-width: $screen-tablet) {
font-size: 1.3em;
}
}
}

77
_sass/_syntax.scss Normal file
View File

@ -0,0 +1,77 @@
.highlight .hll { background-color: #49483e }
.highlight { background: #272822; color: #f8f8f2 }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #f92672 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
.highlight {
pre {
padding: 10px;
}
border-radius: 5px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

3
assets/images/apple.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="162.339" height="200" viewBox="0 0 162.339 200">
<path id="apple" d="M42.482,196.143a44.789,44.789,0,0,1-10.361-9.578,128.464,128.464,0,0,1-8.861-12.11A117.141,117.141,0,0,1,8.435,144.173a113.869,113.869,0,0,1-6.188-36.2c0-13.076,2.832-24.486,8.345-34.063a48.141,48.141,0,0,1,17.49-18.173,46.636,46.636,0,0,1,23.653-7,39.055,39.055,0,0,1,9.411,1.249c2.415.666,5.33,1.749,8.911,3.082,4.581,1.749,7.079,2.832,7.912,3.082a19.509,19.509,0,0,0,6.663,1.416A19.933,19.933,0,0,0,90,56.483c1.208-.416,3.5-1.166,6.746-2.582,3.215-1.166,5.763-2.165,7.787-2.915a69.5,69.5,0,0,1,8.745-2.165,41.277,41.277,0,0,1,9.561-.416A56.718,56.718,0,0,1,139,51.9a43.586,43.586,0,0,1,20.463,16.324,40.989,40.989,0,0,0-6.038,4.581,50.991,50.991,0,0,0-10.244,12.534,42.469,42.469,0,0,0-5.364,20.988,42.983,42.983,0,0,0,7,23.819,44.4,44.4,0,0,0,12.776,12.793,32.738,32.738,0,0,0,7,3.748c-1,3.123-2.1,6.163-3.373,9.161A118.175,118.175,0,0,1,150.8,175.089c-3.6,5.247-6.43,9.161-8.578,11.743a46.432,46.432,0,0,1-9.828,9.136A21.878,21.878,0,0,1,120.3,199.6a26.813,26.813,0,0,1-8.612-1.058c-2.415-.791-4.8-1.682-7.129-2.69a57.8,57.8,0,0,0-7.537-2.832,37.638,37.638,0,0,0-9.694-1.224A38.866,38.866,0,0,0,77.67,193a60.02,60.02,0,0,0-7.554,2.707c-3.5,1.457-5.788,2.415-7.121,2.832A37.234,37.234,0,0,1,54.75,200a22.9,22.9,0,0,1-12.376-3.748ZM99.565,42.4A31.017,31.017,0,0,1,83.133,46.03c-.833-5.38,0-10.91,2.249-16.965A45.862,45.862,0,0,1,93.71,15.074,45.046,45.046,0,0,1,107.286,4.58,38.62,38.62,0,0,1,123.027,0a37.86,37.86,0,0,1-2.082,17.24A49.456,49.456,0,0,1,112.616,31.9,42.013,42.013,0,0,1,99.407,42.391Z" transform="translate(-2.247 0.001)" fill="#2d3436"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1920"
height="520"
viewBox="0 0 1920 520"
version="1.1"
id="svg917"
sodipodi:docname="background_down.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<metadata
id="metadata923">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs921" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1676"
inkscape:window-height="1011"
id="namedview919"
showgrid="false"
inkscape:zoom="0.47140452"
inkscape:cx="1400.4866"
inkscape:cy="466.1607"
inkscape:window-x="1280"
inkscape:window-y="18"
inkscape:window-maximized="0"
inkscape:current-layer="Sfondo"
showguides="false" />
<g
id="Sfondo"
transform="translate(-8,-1086.601)">
<path
id="Path_3"
data-name="Path 3"
d="m -26,1000.3815 c 0,0 293.051,-4.48003 514.1,-4.48003 221.049,0 128.9,-14.625 460.481,-13.59 331.581,1.035 945.419,73.23003 945.419,73.23003 l 0,3.3795 c 0,0 -614.081,32.78 -1044.141,21.205 -265.915,-7.157 -409.746,-21.205 -459.039,-21.205 -167.368,0 -416.82,16.413 -416.82,16.413 z"
transform="translate(34,522)"
inkscape:connector-curvature="0"
style="fill:#00b894"
sodipodi:nodetypes="cssccsscc" />
<path
id="Path_2"
data-name="Path 2"
d="m -14,970.27219 c 0,0 281.051,15.608 502.1,15.608 221.049,0 646.881,-16.623 978.46,-15.608 331.579,1.015 439.44,5.465 439.44,5.465 l 0,69.09381 c 0,0 -261.844,-38.8 -587.107,-40.827 -325.263,-2.027 -745.371,30.017 -912.739,30.017 -167.368,0 -420.154,-15.959 -420.154,-15.959 z"
transform="translate(22,557)"
inkscape:connector-curvature="0"
style="fill:#00755e"
sodipodi:nodetypes="cssccsscc" />
<path
id="Path_1"
data-name="Path 1"
d="m 12,784.02847 c 562.2663,0 1348.4471,4.69024 1920,4.69024 V 1028.813 c 0,0 -19.471,14.987 -426.839,12.944 -407.368,-2.043 -904.7,-50.275 -1195.822,-44.728 C 18.217,1002.576 12,1006.119 12,1006.119 Z"
transform="translate(-4,553)"
inkscape:connector-curvature="0"
style="fill:#00372c"
sodipodi:nodetypes="cccsscc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1920"
height="520"
viewBox="0 0 1920 520"
version="1.1"
id="svg917"
sodipodi:docname="background_up.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<metadata
id="metadata923">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs921" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1676"
inkscape:window-height="1011"
id="namedview919"
showgrid="false"
inkscape:zoom="0.47140452"
inkscape:cx="1400.4866"
inkscape:cy="466.1607"
inkscape:window-x="1280"
inkscape:window-y="18"
inkscape:window-maximized="0"
inkscape:current-layer="Sfondo"
showguides="false" />
<g
id="Sfondo"
transform="translate(-8,-1086.601)">
<path
id="Path_3"
data-name="Path 3"
d="m -26,586.724 c 0,0 293.051,-4.48 514.1,-4.48 221.049,0 128.9,-14.625 460.481,-13.59 331.581,1.035 945.419,73.23 945.419,73.23 l 0,9.74349 c 0,0 -614.081,32.78 -1044.141,21.205 -265.915,-7.157 -409.746,-21.205 -459.039,-21.205 -167.368,0 -416.82,16.413 -416.82,16.413 z"
transform="translate(34,522)"
inkscape:connector-curvature="0"
style="fill:#00b894"
sodipodi:nodetypes="cssccsscc" />
<path
id="Path_2"
data-name="Path 2"
d="m -14,565.1 c 0,0 281.051,15.608 502.1,15.608 221.049,0 646.881,-16.623 978.46,-15.608 331.579,1.015 439.44,5.465 439.44,5.465 v 83.94306 c 0,0 -261.844,-38.8 -587.107,-40.827 -325.263,-2.027 -745.371,-20.89469 -912.739,-20.89469 -167.368,0 -420.154,34.95269 -420.154,34.95269 z"
transform="translate(22,557)"
inkscape:connector-curvature="0"
style="fill:#00755e"
sodipodi:nodetypes="cssccsscc" />
<path
id="Path_1"
data-name="Path 1"
d="m 12,581.9 c 0,0 84.525,-31.431 425.788,-33.3 341.263,-1.869 668.22,41.229 1012.43,48.378 344.21,7.149 481.782,-25.237 481.782,-25.237 l 0,298.77762 c -693.3907,0 -1244.32486,-1.48079 -1920,-1.48079 z"
transform="translate(-4,553)"
inkscape:connector-curvature="0"
style="fill:#00372c"
sodipodi:nodetypes="csscccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

BIN
assets/images/donate.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/images/example.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
assets/images/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

3
assets/images/linux.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

@ -0,0 +1,41 @@
{
"name": "espanso",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
assets/images/titlebar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<path id="windows" d="M0,28.742,81.25,17.5V96.258H0M91.242,16.242,200,0V95H91.242M0,105H81.25v78.758L0,172.492M91.242,105H200v95L92.5,184.992" fill="#2d3436"/>
</svg>

After

Width:  |  Height:  |  Size: 257 B

25
install.html Normal file
View File

@ -0,0 +1,25 @@
---
title: Installation
layout: default
showParticles: True
hideTitle: True
---
<div class="text-center">
<h2 class="text-center mb-2">Installation</h2>
<p class="light-text">Select your operating system:</p>
</div>
<div class="row install">
<div class="col-lg-4 text-center">
<img src="/assets/images/windows.svg"/>
<a class="btn btn-lg" href="/install/win/" role="button">Install on Windows</a>
</div>
<div class="col-lg-4 text-center">
<img src="/assets/images/apple.svg"/>
<a class="btn btn-lg" href="/install/mac/" role="button">Install on macOS</a>
</div>
<div class="col-lg-4 text-center">
<img src="/assets/images/linux.svg"/>
<a class="btn btn-lg" href="/install/linux/" role="button">Install on Linux</a>
</div>
</div>

61
install/mac.md Normal file
View File

@ -0,0 +1,61 @@
---
title: Install on macOS
layout: default
---
The easiest way to install espanso on macOS is by using the [Homebrew](https://brew.sh/)
package manager, but you can also do it manually.
#### Using Homebrew
The first thing to do is to add the official espanso *tap* to Homebrew with
the following command:
```
brew tap federico-terzi/espanso
```
Then you can install espanso with:
```
brew install espanso
```
To make sure that espanso was correctly installed, you can open a terminal and type:
```
espanso --version
```
At this point, you have to [Enable Accessibility](#enabling-accessibility) to use espanso.
#### Enabling Accessibility
Because espanso uses the macOS [Accessibility API](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/)
to work, you need to authorize it using the following procedure:
Open a terminal and type the command:
```
espanso register
```
A dialog should show up, click on "Open System Preferences", as shown here:
![Accessibility Prompt](/assets/images/accessibility-prompt.png)
Then, in the "Privacy" panel click on the Lock icon (1) to enable edits and
then check "espanso" (2), as shown in the picture:
![Accessibility Settings](/assets/images/accessibility-macos-enable.png)
Now open the terminal again and type:
```
espanso register
```
If everything goes well, you should see the espanso icon appear in the status bar:
![macOS status bar icon](/assets/images/espanso-icon-macos-statusbar.png)
If you now type `:espanso` in any text field, you should see "Hi there!" appear!