Add font page

main.rkt

@@ -15,12 +15,13 @@
   (define *website*
     (website
       "" weblet pages:home
-      ("AboutMe" weblet pages:about-me)))
+      ("AboutMe" weblet pages:about-me)
+      ("Fonts" weblet pages:fonts)))
   ; Sitemap
   (sitemap
     ("Home" "/" #f
-      ("About Me" "/AboutMe" #f))
-    )
+      ("About Me" "/AboutMe" #f)
+      ("Fonts I made" "/Fonts" #f)))
   ; Webcontainer
   (define *webcontainer* (make-webcontainer))
   (webcontainer-add-website! *webcontainer* *website*)

src/pages/home.rkt

@@ -1,12 +1,14 @@
 #lang racket/base
 
 (require
-  "templates.rkt")
+  "templates.rkt"
+  racket/string)
 
 (provide
   pages:not-found
   pages:home
-  pages:about-me)
+  pages:about-me
+  pages:fonts)
 
 ; Not found page
 (define pages:not-found
@@ -59,3 +61,73 @@
             (a ((href "http://www.pokemon.com/us/pokedex/misdreavus")) "Misdreavus") ". ")
        )
     ))
+
+; Font page
+(define (sample-text text font-css)
+  `(p ,text (br)
+      (span ((class ,font-css)) ,text)))
+
+(define (character-show char-lst font-css)
+  `(p
+      ,@(map
+          (lambda (c)
+            `(span ((style "display: inline-block; padding-left: 5px;")) ,c (br) (span ((class ,font-css)) ,c)))
+          (string-split char-lst " "))))
+
+(define (font-example name)
+  `(section ((class "font-example"))
+    ,(sample-text "The quick brown dog jumps over the lazy fox." name)
+    ,(sample-text "Voix ambiguë d'un coeur qui, au zéphyr, préfère les jattes de kiwis." name)
+    ,(sample-text "Andre told Beleth they would work with Amdusias and Orobas." name)
+    ,(sample-text "I'm Furfur, and I shall eradicate You." name)
+    ,(character-show "0 1 2 3 4 5 6 7 8 9 () [] {} ! \" ' . , ? & $ %" name)
+    ,(character-show "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z" name)
+    ,(character-show "a b c d e f g h i j k l m n o p q r s t u v w x y z" name)
+    ,(character-show "Æ Þ Ð æ þ ð ß å â á à ä ã" name)
+    ))
+
+(define (font-paragraph name description css-class)
+  `(details
+     (summary (span ((class "font-section-title")) ,name " -  " (span ((class ,css-class)) ,name)))
+     (p ,description (br) (a ((href ,(string-append "/fonts/" name ".otf"))) "Download"))
+     (section
+       (h3 "Sample")
+       (section ((class "font-contents"))
+         ,(font-example css-class))
+       (section
+         (h4 "Playfield")
+         (p ((class "font-playfield"))
+            (textarea ((class ,css-class)) "You can type what you want here."))))
+     (section
+       (h3 "Source file and licence")
+       (p
+         "The font is released under the "
+        (a ((href "http://scripts.sil.org/OFL")) "SIL Open Font license") ". "
+        "So you can also modify the font and share the result. "
+        "Open the " (a ((href ,(string-append "/fonts/" name ".sfd"))) "source file") " "
+        "in " (a ((href "https://fontforge.github.io/")) "fontforge") " and edit whatever you want."))
+   ))
+
+(define pages:fonts
+  (pages:template
+    #:title "Fonts I made"
+    #:author "Feufochmar"
+    #:date "2019-11-08"
+    #:stylesheets '("/css/feuforeve.css" "/css/custom-fonts.css")
+    #:content
+    `(article
+        (p "I'm the author of a few fonts. You can see here what they look like, try them and download them.")
+        ,(font-paragraph
+            "Prattling"
+            "A font inspired by the Prattle scripts appearing in the Floraverse webcomic. "
+            "prattling")
+        ,(font-paragraph
+            "Furfur"
+            "A font inspired by what the character Furfur says in the Floraverse webcomic during the chapter V of Seeds. It heavily uses ligatures. "
+            "furfur")
+        ,(font-paragraph
+            "Gaeian_Serif_A"
+            "A serif font. "
+            "gaeian_serif_a")
+       )
+    ))

static/css/custom-fonts.css

@@ -0,0 +1,66 @@
+@font-face {
+  font-family: Prattling;
+  src: url('/fonts/Prattling.otf');
+}
+
+.prattling {
+  font-family: "Prattling";
+  font-variant-ligatures: discretionary-ligatures;
+  -moz-font-feature-settings: "dlig";
+  -ms-font-feature-settings: "dlig";
+  -webkit-font-feature-settings: "dlig";
+  font-feature-settings: "dlig";
+}
+
+@font-face {
+  font-family: Furfur;
+  src: url('/fonts/Furfur.otf');
+}
+
+.furfur {
+  font-family: "Furfur";
+  font-variant-ligatures: discretionary-ligatures;
+  -moz-font-feature-settings: "dlig";
+  -ms-font-feature-settings: "dlig";
+  -webkit-font-feature-settings: "dlig";
+  font-feature-settings: "dlig";
+}
+
+@font-face {
+  font-family: Gaeian_Serif_A;
+  src: url('/fonts/Gaeian_Serif_A.otf');
+}
+
+.gaeian_serif_a {
+  font-family: "Gaeian_Serif_A";
+  font-variant-ligatures: discretionary-ligatures;
+  -moz-font-feature-settings: "dlig";
+  -ms-font-feature-settings: "dlig";
+  -webkit-font-feature-settings: "dlig";
+  font-feature-settings: "dlig";
+}
+
+.font-example {
+  padding-left: 1ex;
+  padding-right: 1ex;
+  border-style: solid;
+  border-width: thin;
+  border-color: hsla(230, 10%, 20%, 1.0);
+  border-radius: 1ex;
+  font-size: medium;
+  display: inline-block;
+}
+
+.font-playfield {
+  font-size: large;
+}
+
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.font-section-title {
+  font-size: x-large;
+  font-weight: bold;
+}