aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/src/index.html
diff options
context:
space:
mode:
authorEgor Tensin <egor@tensin.name>2026-06-06 22:18:37 +0200
committerEgor Tensin <egor@tensin.name>2026-06-06 22:25:32 +0200
commit07a784f0d654fcd552069e85b314ea7c29cb5dd6 (patch)
tree9c12dec00b68aaa33dbf8429f34f9812493c965a /src/index.html
parentbump dependencies (diff)
downloadwireguard-config-07a784f0d654fcd552069e85b314ea7c29cb5dd6.tar.gz
wireguard-config-07a784f0d654fcd552069e85b314ea7c29cb5dd6.zip
move Jekyll source files to src/
Diffstat (limited to 'src/index.html')
-rw-r--r--src/index.html187
1 files changed, 187 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..8ad2cfd
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,187 @@
+---
+title: Main page
+layout: plain
+navbar:
+ link: Project
+links:
+ - {rel: stylesheet, href: assets/css/pre_overlay.css}
+scripts:
+ # ipaddr.js is buggy: https://github.com/whitequark/ipaddr.js/issues/160.
+ # TODO: revert back to using ipaddr.js if it's fixed?
+ #- {src: 'https://cdn.jsdelivr.net/npm/ipaddr.js@2.0.1/ipaddr.min.js'}
+
+ # This is the "browserified" replacement, ip-address. This bundling procedure
+ # fucking sucks, but it's the best I've got for now.
+ - {src: assets/js/bundle.js}
+
+ - {src: 'https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js'}
+ - {src: assets/js/main.js}
+
+params:
+ - id: server
+ desc: Server
+ items:
+ - id: server_public
+ name: Public key
+ placeholder: "Server's public key"
+ help: |
+ Query using <code>wg show wg0 public-key</code>
+ example: iNqGDQ2tltbSN4s3Fpb/7PRc2OSwR3/bPjOrf8V/SmA=
+ - id: server_endpoint
+ name: Endpoint
+ placeholder: "Server's endpoint in the HOST:PORT format"
+ help: |
+ Server's <em>public</em> IP address or a hostname.
+ Query the port using <code>wg show wg0 listen-port</code>
+ example: 123.123.123.123:123
+ - id: preshared
+ name: Preshared key
+ placeholder: Preshared key (shared between server and client)
+ help: |
+ Generate using <code>wg genpsk</code>
+ example: Moshdr8RNfYUWG/0MVOlglzlze3beATD6YumDwCZf5E=
+ - id: client
+ desc: Client
+ items:
+ - id: client_public
+ name: Public key
+ placeholder: "Client's public key"
+ help: |
+ Generate both keys using <code>wg genkey | tee private.key | wg pubkey > public.key</code>
+ example: hvfo/MgizTRbrktfx3k2Q0Ib0mx0P2N6LRZEYWqkpXc=
+ - id: client_private
+ name: Private key
+ placeholder: "Client's private key"
+ help: |
+ Unless generated in one go with the public key, generate one using <code>wg genkey</code>
+ example: qKgmDq8HWaU432qJhEa2Q6pE52P55xBHNOgzB0roP3A=
+ - id: client_ipv4
+ name: IPv4
+ placeholder: Address and netmask, like 192.168.123.123/24
+ help: |
+ IPv4 address to assign to the client and its netmask in the CIDR format.
+ example: 192.168.123.123/24
+ - id: client_ipv6
+ name: IPv6
+ placeholder: Address and netmask, like fd::192.168.123.123/48
+ help: |
+ IPv6 address to assign to the client and its netmask in the CIDR format.
+ example: fd01:2345:6789::192.168.123.123/48
+ - id: keepalive
+ name: Keepalive
+ default: 25
+ placeholder: Seconds between keepalive packets, typically 25
+ help: |
+ Time to wait between sending keepalive packets, seconds.
+ example: 25
+ advanced: true
+ - id: tunnel_everything
+ name: Tunnel all traffic
+ type: checkbox
+ default: false
+ advanced: true
+ - id: dns_ipv4
+ name: DNS (IPv4)
+ default: 1.1.1.1,1.0.0.1
+ placeholder: IPv4 addresses of DNS servers
+ help: |
+ Comma-separated list of IPv4 addresses to use as DNS servers.
+ example: 1.1.1.1,1.0.0.1
+ advanced: true
+ - id: dns_ipv6
+ name: DNS (IPv6)
+ default: 2606:4700:4700::1111,2606:4700:4700::1001
+ placeholder: IPv6 addresses of DNS servers
+ help: |
+ Comma-separated list of IPv6 addresses to use as DNS servers.
+ example: 2606:4700:4700::1111,2606:4700:4700::1001
+ advanced: true
+---
+<h1>{{ site.settings.project.name }}</h1>
+
+<div class="row">
+ <div class="col-md-8">
+ <p class="text-muted">This page assumes that you have a WireGuard server
+configured on interface <code>wg0</code>.
+You can then generate the new client's keys, feed them to this page and it will
+show configuration files that can be used by the client.</p>
+{% assign example_url = '?' %}
+{% assign first = true %}
+{% for grp in page.params %}
+ {% for param in grp.items %}
+ {% unless first %}
+ {% capture example_url %}{{ example_url }}&{% endcapture %}
+ {% endunless %}
+ {% assign first = false %}
+ {% capture example_url %}{{ example_url }}{{ param.id }}={{ param.example | url_encode }}{% endcapture %}
+ {% endfor %}
+{% endfor %}
+{% assign example_url = example_url | escape_uri | baseurl %}
+ <p>Take a look at an <a href="{{ example_url }}">example configuration</a> to learn more.</p>
+ </div>
+</div>
+
+<form action="javascript:void(0);" onsubmit="form_on_submit(); return false;">
+ <div class="row">
+{% for grp in page.params %}
+ <div class="col-md-6">
+ <div class="form-horizontal">
+ <div class="form-group">
+ <div class="col-sm-offset-3 col-sm-9">
+ <h2 class="text-center h3" style="margin-bottom: 0;">{{ grp.desc }}</h2>
+ </div>
+ </div>
+ {% for param in grp.items %}
+ {% assign type = param.type | default: "text" %}
+ {% if type == "text" %}
+ <div class="form-group" id="param_{{ param.id }}_container"{% if param.advanced %} style="display: none;"{% endif %}>
+ <label for="param_{{ param.id }}" class="col-sm-3 control-label">{{ param.name }}</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" id="param_{{ param.id }}" placeholder="{{ param.placeholder }}" aria-describedby="param_{{ param.id }}_help"{% if param.default != null %} value="{{ param.default }}"{% endif %}>
+ <span id="param_{{ param.id }}_help" class="help-block" style="margin-bottom: 0;">
+ <span id="param_{{ param.id }}_error" class="text-danger small" style="display: block; white-space: pre-line; margin-bottom: 5px;"></span>
+ <span>{{ param.help }}</span>
+ </span>
+ </div>
+ </div>
+ {% endif %}
+ {% if type == "checkbox" %}
+ <div class="form-group" id="param_{{ param.id }}_container"{% if param.advanced %} style="display: none;"{% endif %}>
+ <div class="col-sm-offset-3 col-sm-9">
+ <div class="checkbox">
+ <label><input type="checkbox" id="param_{{ param.id }}" value="{{ param.default }}"{% if param.default %} checked{% endif %}>{{ param.name }}</label>
+ </div>
+ <span id="param_{{ param.id }}_help" class="help-block" style="margin-bottom: 0;">
+ <span id="param_{{ param.id }}_error" class="text-danger small" style="display: block; white-space: pre-line; margin-bottom: 5px;"></span>
+ </span>
+ </div>
+ </div>
+ {% endif %}
+ {% endfor %}
+ </div>
+ </div>
+{% endfor %}
+ <div class="col-md-offset-6 col-md-6">
+ <div class="form-horizontal">
+ <div class="form-group">
+ <div class="col-sm-offset-3 col-sm-9">
+ <div class="checkbox">
+ <label class="text-muted"><input type="checkbox" id="advanced_params" onClick="advanced_params_on_click(this);">Show advanced parameters</label>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-offset-3 col-sm-9 text-center">
+ <button type="submit" class="btn btn-primary">Generate</button>
+ <a href="{{ example_url }}"><button type="button" class="btn btn-info" title="Fill in the form with examples values">Example</button></a>
+ <span class="help-block" style="margin-bottom: 0;">
+ <span id="params_error" class="text-danger small" style="white-space: pre-line;"></span>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</form>
+
+<div id="guides"></div>