Merge branch 'main' into main

Gemfile

@@ -1,3 +1,5 @@
 source 'https://rubygems.org'
 
 gem 'jekyll'
+
+gem "webrick", "~> 1.7"

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.7.0)
+    addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
     concurrent-ruby (1.1.9)
@@ -9,7 +9,7 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.15.1)
+    ffi (1.15.4)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
     i18n (1.8.10)
@@ -38,7 +38,7 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.5.1)
+    listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
@@ -56,12 +56,14 @@ GEM
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     unicode-display_width (1.7.0)
+    webrick (1.7.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   jekyll
+  webrick (~> 1.7)
 
 BUNDLED WITH
-   2.1.4
+   2.2.26

_includes/nav.html

@@ -3,5 +3,6 @@
 		<li><a href="{{ site.baseurl }}/"><strong>{{ site.name }}</strong></a></li>
 		<li><a href="{{ site.baseurl }}/phonebook/">phonebook</a></li>
 		<li><a href="{{ site.baseurl }}/the-original/">the original</a></li>
+		<li><a href="{{ site.baseurl }}/tutorial/">tutorial</a></li>
 	</ul>
 </nav>

_sass/index.scss

@@ -18,3 +18,8 @@
 		padding: 0;
 	}
 }
+
+img {
+	max-width: 80%;
+	display: block;
+}

index.html

@@ -8,5 +8,6 @@ layout: base
 	<ul class="inline-list">
 		<li><a href="/phonebook/">phonebook</a></li>
 		<li><a href="/the-original/">the original</a></li>
+		<li><a href="/tutorial/">tutorial</a></li>
 	</ul>
 </main>

tutorial/index.html

@@ -0,0 +1,51 @@
+---
+layout: page
+title: tutorial
+---
+
+<h2>What is this?</h2>
+tel.tilde.org.nz also known as tildetel is a small PSTN (Public switched telephone network) for the <a href="https://tildeverse.org/">tildeverse</a>. The users can make calls, leave voice mails and participate in a multi-user conference rooms. The numbers are broken down by "area codes", each tilde has its own area code! A phonebook can be found <a href="https://tel.tilde.org.nz/phonebook/">here</a> (:
+
+<h2>How do I get a number?</h2>
+To get a <code>tel.tilde.org.nz</code> number, please message <code>darcy</code> in <code>#tildetel</code> on <a href="https://tilde.chat">the tilde.chat IRC</a>.
+
+<h4>SIP</h4>
+SIP (Session Initiation Protocol) is a protocol used in VoIP, allowing users to make voice and video calls.
+
+<h2>How do I use this?</h2>
+<p>First you are going to need a SIP account (which you get when you get a number) and your credentials that look like this:</p>
+<ul>
+    <li><b>SIP address:</b> 2013125@tel.tilde.org.nz</li>
+    <li><b>Password:</b>reallysecurepassword</li>
+</ul>
+
+<p>Once you get a SIP account you need a SIP client to use it, there are many out there but we suggest these ones:</p>
+<ul>
+    <li><a href="https://www.linphone.org/">Linphone</a></li>
+    <li><a href="https://www.microsip.org/">Microsip</a> (windows only but works with wine on linux)</li>
+</ul>
+
+<p>Now that you have a SIP account and a SIP client we are ready to get started. This step by step guide uses the Linphone client</p>
+<ol>
+    <li>
+        When you open Linphone for the first time you'll get something like this:
+        <img src="../img/1.png" alt="1" srcset="">
+    </li>
+
+    <li>
+        Click on <b>Use a SIP account</b> and fill the fields with your credentials:
+        <img src="../img/2.png" alt="2">
+    </li>
+
+    <li>
+        Click on the top left corner and select tel.tilde.org.nz:
+        <img src="../img/3.png" alt="3">
+    </li>
+
+    <li>
+        Done! You are now connected and succesfully set up your client, to make a call just search their number on the top search bar:
+        <img src="../img/4.png" alt="4">
+    </li>
+</ol>
+
+Thanks for reading this tutorial, I hope you found it useful, if you have any questions join <code>#tildetel</code> on <a href="tilde.chat/">tilde.chat</a> and let us know.