Some basic explanations for DNS.

src/App/Page/Zone.purs

@@ -198,7 +198,7 @@ string_to_acceptedtype str = case str of
   "DKIM"  -> Just  DKIM
   _       -> Nothing
 
-data Tab = Zone | TokenExplanation
+data Tab = Zone | TheBasics | TokenExplanation
 derive instance eqTab :: Eq Tab
 --derive instance genericTab :: Generic Tab _
 --instance showTab :: Show Tab where
@@ -290,13 +290,15 @@ render state
       [ fancy_tab
       , case state.current_tab of
           Zone -> render_zone
+          TheBasics        -> Explanations.basics
           TokenExplanation -> Explanations.tokens
       ]
   where
     fancy_tab =
       Bulma.fancy_tabs
-        [ Bulma.tab_entry (is_tab_active Zone)             "Zone"       (ChangeTab Zone)
+        [ Bulma.tab_entry (is_tab_active Zone)             "Zone"          (ChangeTab Zone)
-        , Bulma.tab_entry (is_tab_active TokenExplanation) "Tokens? 🤨" (ChangeTab TokenExplanation)
+        , Bulma.tab_entry (is_tab_active TheBasics)        "The basics 🧠" (ChangeTab TheBasics)
+        , Bulma.tab_entry (is_tab_active TokenExplanation) "Tokens? 🤨"    (ChangeTab TokenExplanation)
         ]
     is_tab_active tab = state.current_tab == tab
 

src/App/Text/Explanations.purs

@@ -4,6 +4,11 @@ import Bulma as Bulma
 
 expl :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
 expl content = Bulma.div_content [ Bulma.explanation content ]
+expl_txt :: forall w i. String -> HH.HTML w i
+expl_txt content = Bulma.explanation [ Bulma.p content ]
+
+col :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+col arr = Bulma.column_ [ Bulma.box arr ]
 
 tokens :: forall w i. HH.HTML w i
 tokens = HH.div_
@@ -49,6 +54,85 @@ tokens = HH.div_
          ]
   ]
 
+basics :: forall w i. HH.HTML w i
+basics = HH.div_
+  [ Bulma.h3 "Basics of DNS"
+  , Bulma.p """
+          The domain name system lets people share a name instead of an address to find a website or service.
+          To configure a zone, the first steps are trivial.
+          """
+
+  , Bulma.hr
+  , Bulma.h3 "I have something to host."
+  , expl [ Bulma.p """
+           Let's assume you have a web server, you host your website somewhere.
+           """
+         ]
+  , Bulma.p """
+    You want an A (IPv4) or AAAA (IPv6) record pointing to your server, named "www" for example.
+    If you have other servers, just add A or AAAA records.
+    """
+  , Bulma.p """
+    In case you want other names than "www" to point to your server, you can use CNAME records (these are aliases).
+    """
+
+  , Bulma.hr
+  , Bulma.h3 "I want an email server."
+  , expl [ Bulma.p """
+           Hosting a mail server is quite complex.
+           Let's see to the main parts regarding the DNS.
+           """
+         ]
+  , Bulma.notification_danger' """
+    The actual configuration of your mail server is complex and depends on your choice of software.
+    This won't be covered here.
+    """
+  , Bulma.p """
+    You need a MX record pointing to your "www" A (or AAAA) record.
+    """
+  , Bulma.p """
+    Having a MX record isn't enough to handle a mail server.
+    You need to use a few spam mitigation mechanisms.
+    """
+  , Bulma.columns_
+      [ col
+        [ expl [ Bulma.p """
+                 Spam mitigation 1: tell what are the right mail servers for your domain with Sender Policy Framework (SPF).
+                 """
+               ]
+        , expl_txt """
+          You need a SPF record to tell other mail servers what are the acceptable mail servers for your domain.
+          """
+        ]
+      , col
+        [ expl [ Bulma.p """
+            Spam mitigation 2: prove the mails come from your mail server with DomainKeys Identified Mail (DKIM).
+            """
+          ]
+        , expl_txt """
+          You'll have to configure your mail server to sign the emails you send.
+          This involves creating a pair of keys (public and private).
+          Your mail server will sign the mails with the private key,
+          and other mail servers will verify the signature with the public key.
+          So, you need to publish the public key in a DKIM record.
+          """
+        ]
+      , col
+        [ expl [ Bulma.p """
+                 Spam mitigation 3: Domain-based Message Authentication Reporting and Conformance (DMARC).
+                 """
+               ]
+        , expl_txt """
+          Last but not least, DMARC.
+          """
+        ]
+      ]
+
+  , Bulma.hr
+  , Bulma.h3 "How to automate the update of my IP address?"
+  , Bulma.p "Check out the \"Tokens? 🤨\" tab."
+  ]
+
 dkim_introduction :: forall w i. Array (HH.HTML w i)
 dkim_introduction =
   [ Bulma.p """

src/Bulma.purs

@@ -532,6 +532,14 @@ notification_success value deleteaction = notification C.is_success value delete
 notification_danger :: forall w i. String -> i -> HH.HTML w i
 notification_danger value deleteaction = notification C.is_danger value deleteaction
 
+notification' :: forall w i. Array HH.ClassName -> String -> HH.HTML w i
+notification' classes value =
+  HH.div [HP.classes (C.notification <> classes)]
+         [ HH.text value ]
+
+notification_danger' :: forall w i. String -> HH.HTML w i
+notification_danger' value = notification' C.is_danger value
+
 btn_validation_ :: forall w i. String -> HH.HTML w i
 btn_validation_ str = HH.button
   -- [ HP.style "padding: 0.5rem 1.25rem;"