From 609d3e5a5b2e136cd6e14cb09547ca6c2d744e13 Mon Sep 17 00:00:00 2001 From: urlysses Date: Mon, 27 Feb 2017 22:59:02 -0500 Subject: [PATCH] Start writing the homepage/docs. --- 1991.css | 70 ++++++++++++++++++++--- index.html | 164 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 225 insertions(+), 9 deletions(-) diff --git a/1991.css b/1991.css index a2edf7d..3a3f085 100644 --- a/1991.css +++ b/1991.css @@ -2,7 +2,7 @@ html { background: #2637dd; font-family: "Roboto Mono", monospace; font-weight: 500; - color: #d4d4d4; + color: #fff; -webkit-font-smoothing: antialiased; } header { @@ -82,29 +82,36 @@ header p { border-left: none; } -main { - margin-top: 8%; -} article { display: block; - width: 75%; - margin-left: 12.5%; + width: 60%; + margin-left: 20%; } section { text-align: justify; + font-size: 1em; + line-height: 2em; } main h1 { + margin-top: 8%; + margin-bottom: 0; font-family: "Rubik Mono One"; - background: #d4d4d4; + background: #fff; color: #2637dd; padding: 0.1em 0.3em; - font-size: 1.5em; + font-size: 1.2em; + text-transform: uppercase; + display: inline-block; +} + +h2 { + margin-top: 5%; } strong { font-weight: inherit; color: #2637dd; - background: #d4d4d4; + background: #fff; padding-left: 0.3em; padding-right: 0.3em; } @@ -118,6 +125,22 @@ a:hover { text-decoration: line-through; } +code { + padding: 2px 5px; + border: solid 1px; + font-family: inherit; +} +pre { + display: block; + border: solid 2px; + padding: 10px; + margin: 10px 0px; + white-space: pre-wrap; + font-family: inherit; + line-height: 1.5em; + overflow: hidden; +} + ::selection { background: #fff; color: #2637dd; @@ -129,3 +152,32 @@ a:hover { text-shadow: none; } +footer { + margin-top: 8%; + margin-bottom: 5%; + text-align: center; +} + +footer .l1991 { + width: 150px; + height: 25px; + min-width: auto; +} +footer .l1991 .l, +footer .l1991 .l:before, +footer .l1991 .l:after { + border-width: 4px; +} +footer .l1991 .l9:before { + -webkit-border-radius: 7px; + -webkit-border-bottom-right-radius: 0; + -moz-border-radius: 7px; + -moz-border-radius-bottomright: 0; + border-radius: 7px; + border-bottom-right-radius: 0; +} +footer .l1991 .l9:after { + -webkit-border-bottom-right-radius: 8px; + -moz-border-radius-bottomright: 8px; + border-bottom-right-radius: 8px; +} diff --git a/index.html b/index.html index 38bfa78..9c00ee1 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ 1991 + +
@@ -20,8 +22,170 @@
+

World Wild Web

+

+ The year is 1991. The World Wide Web has just seen public release. 1991 looks to ease your interactions with the new web using cutting edge programming techniques in Forth (well, Gforth). +

+
+
+

Logging In

+

+ Getting started in 1991 is easy. +

+

+ All you need to do is include 1991.fs into your Forth source file. Next, you can define your public routes using the /1991 word. Once your routes are all layed out, start the server using 1991:. +

+
+\ app.fs
+\ Load 1991.
+include 1991.fs
+
+\ Define our route handlers.
+: handle-/ ( -- addr u )
+    \ Any string returned by the handler
+    \ will be output to the browser.
+    s" Hello, 1991." ;
+
+\ Set up our routes.
+/1991 / handle-/
+
+\ Start the server on port 8080.
+8080 1991:
+
+

Logging In II: Logging In, Deeper

+

Route Wildcards (Fuzzy Routing / URL Mapping)

+

+ If you want to specify that some part of a route is a wildcard (accepts any value), then you can wrap some named value in <chevrons>. 1991 will accept any URL that matches your wildcard pattern, setting the internal value of whatever you place between the chevrons to whatever is actually requested. +

+

+ In the example below, <uid> specifies that we're willing to accept any (non-empty) value in its place which we'd like to access using the name uid. +

+
+\ wildcards.fs
+\ Load 1991.
+include 1991.fs
+
+\ Define our route handler.
+: handle-wildcard-route ( -- addr u )
+    s" contents of the route request: " get-query-string s+ ;
+
+\ Set up our route.
+/1991 /users/<uid> handle-wildcard-route
+
+\ We can set up multiple wildcards too (must be slash-separated).
+/1991 /users/<uid>/posts/<pid> handle-wildcard-route
+
+\ Start server on port 8080.
+8080 1991:
+
+

+ All wildcards are treated similar to query string arguments. As such, wildcards can be retrieved using get-query-string. +

+

+ In the example above, visiting http://localhost:8080/users/urlysses will result in the following query string: uid=urlysses. +

File Serving

+

+ Use a public/ directory to act as a basic fileserver. + Whenever a requested URL doesn't resolve through the registered routes, 1991 will attempt to find the requested route within your specified public directory. +

+
+\ public.fs
+\ Load 1991.
+include 1991.fs
+
+\ Specify the location of our public directory.
+\ Anything in the public/ directory within the
+\ same dir as this source file will resolve.
+\ You can change "public" to anything you want
+\ as long as it matches your directory name.
+sourcedir s" public" s+ set-public-path
+
+\ We can set mimetypes using the `filetype:` word.
+\ In the case below, we want .mp4 files to be served
+\ with the content-type video/mp4.
+s" video/mp4" filetype: mp4
+
+\ Start the server on port 8080.
+8080 1991:
+
+

+ In the above example, If we have a file public/my-video.mp4, then it will be available through http://localhost:8080/my-video.mp4. +

+ +

Views

+

+ 1991 offers basic templating through views. +

+

+ In order to get started, you should specify the views/ path. Notice the trailing slash, which differs from how we define public. +

+

+ Once you've specified your views/ directory, you can write views/ files to it. This can be any kind of file, honestly. The benefit offered by views/ is the ability to use basic templating. You can write any valid Forth code within opening (<$ ) and closing ( $>) tags. Additionally, you can use the import word to import other views into your view. +

+
+\ views.fs
+\ Load 1991.
+include 1991.fs
+
+\ Specify the location of our views directory.
+sourcedir s" views/" s+ set-view-path
+
+\ Define some words we'll use within
+\ our view.
+: page-title ( -- addr u )
+    s" Dynamic page title" ;
+: ten-lines ( -- )
+    10 0 do
+        s" line " <# #s #> s+
+        s" <br>" s+
+        $type
+    loop ;
+
+\ Use render-view to output the contents
+\ of a file in the views/ directory.
+: handle-/index
+    s" index.html" render-view ;
+
+\ Start the server on port 8080.
+8080 1991:
+
+
+\ views/index.html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title><$ page-title $type $></title>
+    </head>
+    <body>
+        <$ ten-lines $>
+        <$ s" imported-view.html" import $>
+    </body>
+</html>
+
+
+\ views/imported-view.html
+It's possible to import view files from within other view files. This is from <code>views/imported-view.html</code>
+
+
+
+

Wait, what?

+

Why is 1991: post-fix when /1991 is pre-fix?

+

+ Forth is a (mostly) post-fix notation language. So, for example, you'd write two plus two as 2 2 +. This is the language's natural and immediate notation. Along those lines, 1991: is an immediate word——running it results in immediate action. As such, we use Forth's post-fix notation to set the port and start the server immediately. Alternately, /1991 doesn't exactly have immediate effect per se. All it does is tell 1991 that any request to /path should be handled by path-handler. As such, we opt to write non-immediate code using pre-fix notation. +

+

You're using Gforth, which came out in 1992. Also, it's 2017.

+

Okay. But Fredric Jameson establishes that in postmodernism we have experienced a weakening sense of historisity such that what is, what was, and what will be all exist as presents in time. 1970, 1991, 1992, and 2017 all happen simultaneously. Hence developers working on new projects while still coding in decades-old text editors. They write the future in the past and are made present in so doing.

+