1
0
mirror of https://github.com/urlysses/1991.git synced 2024-11-22 11:54:16 -05:00
1991/index.html

199 lines
10 KiB
HTML
Raw Normal View History

2017-02-03 21:16:54 -05:00
<!DOCTYPE html>
<html>
<head>
2017-02-03 21:31:54 -05:00
<meta charset="utf-8">
2017-02-06 19:26:24 -05:00
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1, initial-scale=1">
2017-02-03 21:31:54 -05:00
<title>1991</title>
2017-02-03 21:16:54 -05:00
<link href="1991.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:500,500i|Rubik+Mono+One" rel="stylesheet">
2017-02-27 22:59:02 -05:00
<meta name="description" content="A server-side web framework written in Forth.">
<meta name="keywords" content="1991, 1-9-9-1, 1QQ1, 1Q91, gforth, forth, web, framework, http, server, url">
2017-02-03 21:16:54 -05:00
</head>
<body>
<header>
<h1 class="l1991">
<span class="l l1">1</span><!--
--><span class="l l9">9</span><!--
--><span class="l l9">9</span><!--
--><span class="l l1">1</span>
</h1>
<p>A server-side web framework written in Forth</p>
</header>
<main>
<article>
<section>
2017-02-27 22:59:02 -05:00
<h1>World Wild Web</h1>
<p>
The year is 1991. The World Wide Web has just seen public release. <strong>1991</strong> looks to ease your interactions with the new web using cutting edge programming techniques in Forth (well, Gforth).
</p>
</section>
<section>
<h1>Logging In</h1>
<p>
Getting started in <strong>1991</strong> is easy.
</p>
<p>
All you need to do is include <code>1991.fs</code> into your Forth source file. Next, you can define your public routes using the <code>/1991</code> word. Once your routes are all layed out, start the server using <code>1991:</code>.
</p>
<pre>
\ 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:
</pre>
<h2>Logging In II: Logging In, Deeper </h2>
<h3>Route Wildcards (Fuzzy Routing / URL Mapping)</h3>
<p>
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 <code>&lt;chevrons&gt;</code>. <strong>1991</strong> 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.
</p>
<p>
In the example below, <code>&lt;uid&gt;</code> specifies that we're willing to accept any (non-empty) value in its place which we'd like to access using the name <code>uid</code>.
</p>
<pre>
\ 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/&lt;uid> handle-wildcard-route
\ We can set up multiple wildcards too (must be slash-separated).
/1991 /users/&lt;uid>/posts/&lt;pid> handle-wildcard-route
\ Start server on port 8080.
8080 1991:
</pre>
<p>
All wildcards are treated similar to query string arguments. As such, wildcards can be retrieved using <code>get-query-string</code>.
</p>
<p>
In the example above, visiting <code>http://localhost:8080/users/urlysses</code> will result in the following query string: <code>uid=urlysses</code>.
<h3>File Serving</h3>
<p>
Use a <code>public/</code> directory to act as a basic fileserver.
Whenever a requested URL doesn't resolve through the registered routes, <strong>1991</strong> will attempt to find the requested route within your specified public directory.
</p>
<pre>
\ 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:
</pre>
<p>
In the above example, If we have a file <code>public/my-video.mp4</code>, then it will be available through <code>http://localhost:8080/my-video.mp4</code>.
</p>
<h3>Views</h3>
<p>
<strong>1991</strong> offers basic templating through views.
</p>
<p>
In order to get started, you should specify the <code>views/</code> path. Notice the trailing slash, which differs from how we define <code>public</code>.
</p>
<p>
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 (<code><$ </code>) and closing (<code> $></code>) tags. Additionally, you can use the <code>import</code> word to import other views into your view.
</p>
<pre>
\ 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" &lt;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:
</pre>
<pre>
\ views/index.html
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;meta charset="utf-8">
&lt;title><$ page-title $type $>&lt;/title>
&lt;/head>
&lt;body>
<$ ten-lines $>
<$ s" imported-view.html" import $>
&lt;/body>
&lt;/html>
</pre>
<pre>
\ views/imported-view.html
It's possible to import view files from within other view files. This is from &lt;code>views/imported-view.html&lt;/code>
</pre>
</section>
<section>
<h1>Wait, what?</h1>
<h2>Why is <code>1991:</code> post-fix when <code>/1991</code> is pre-fix?</h2>
<p>
Forth is a (mostly) post-fix notation language. So, for example, you'd write two plus two as <code>2 2 +</code>. This is the language's natural and immediate notation. Along those lines, <code>1991:</code> is an immediate word&mdash;&mdash;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, <code>/1991</code> doesn't exactly have immediate effect per se. All it does is tell <strong>1991</strong> that any request to <code>/path</code> should be handled by <code>path-handler</code>. As such, we opt to write non-immediate code using pre-fix notation.
</p>
<h2>You're using Gforth, which came out in 1992. Also, it's 2017.</h2>
<p>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. <a href="https://en.wikipedia.org/wiki/Forth_(programming_language)#History">1970</a>, <a href="https://groups.google.com/forum/#!msg/alt.hypertext/eCTkkOoWTAY/bJGhZyooXzkJ">1991</a>, <a href="https://en.wikipedia.org/wiki/Gforth#History">1992</a>, and <a href=".">2017</a> 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.</p>
2017-02-03 21:16:54 -05:00
</section>
</article>
</main>
2017-02-27 22:59:02 -05:00
<footer>
<h1 class="l1991">
<span class="l l1">1</span><!--
--><span class="l l9">9</span><!--
--><span class="l l9">9</span><!--
--><span class="l l1">1</span>
</h1>
<br>
<nav>
<a class="gh" href="https://www.github.com/urlysses/1991"><svg width="100%" height="100%" viewBox="0 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect x="0" y="0" width="32.579" height="31.775" style="fill:none;"/><><path d="M16.288,0c-8.995,0 -16.288,7.293 -16.288,16.29c0,7.197 4.667,13.302 11.14,15.457c0.815,0.149 1.112,-0.354 1.112,-0.786c0,-0.386 -0.014,-1.411 -0.022,-2.77c-4.531,0.984 -5.487,-2.184 -5.487,-2.184c-0.741,-1.881 -1.809,-2.382 -1.809,-2.382c-1.479,-1.011 0.112,-0.991 0.112,-0.991c1.635,0.116 2.495,1.679 2.495,1.679c1.453,2.489 3.813,1.77 4.741,1.354c0.148,-1.053 0.568,-1.771 1.034,-2.178c-3.617,-0.411 -7.42,-1.809 -7.42,-8.051c0,-1.778 0.635,-3.232 1.677,-4.371c-0.168,-0.412 -0.727,-2.068 0.159,-4.311c0,0 1.368,-0.438 4.48,1.67c1.299,-0.361 2.693,-0.542 4.078,-0.548c1.383,0.006 2.777,0.187 4.078,0.548c3.11,-2.108 4.475,-1.67 4.475,-1.67c0.889,2.243 0.33,3.899 0.162,4.311c1.044,1.139 1.675,2.593 1.675,4.371c0,6.258 -3.809,7.635 -7.438,8.038c0.585,0.503 1.106,1.497 1.106,3.017c0,2.177 -0.02,3.934 -0.02,4.468c0,0.436 0.293,0.943 1.12,0.784c6.468,-2.159 11.131,-8.26 11.131,-15.455c0,-8.997 -7.294,-16.29 -16.291,-16.29"/></g></svg></a>
<a class="url" href="http://www.urlysses.com"></a>
</nav>
2017-02-27 22:59:02 -05:00
</footer>
<a class="fork" href="https://www.github.com/urlysses/1991">GET THE CODE</a>
<script type="text/javascript" src="1991.js"></script>
2017-02-03 21:16:54 -05:00
</body>
</html>