git.iko.soy/urbit.org
on 7fa97bd help sign in
urbit.org/docs/using/web/static.umd
137 lines 3.9 kB history raw
1:- :~ navhome/'/docs/'
2 sort/'3'
3 title/'A static site'
4 ==
5;>
7# A static site
9Hosting a static tree of content is easy. Let's put together a really
10simple site for an imaginary Urbit meetup group.
12We assume you have at least followed the beginning of [our first
13example](./blog) and created a desk called `site` and mounted it to
14unix.
16Note: below we use Urbit's implementation of markdown, UMD. This version of markdown allows you to use snippets of Hoon code but not HTML. In particular, we use Sail, a subset of Hoon. This Sail is rendered as HTML when the file is served to a client. To learn about UMD and Sail, head over to the Tutorial section of the docs.
18In `site/web/meet.umd` put:
20```
21:- :~ navhome/'/meet'
22 navdpad/'false'
23 navpath/'/meet'
24 mavmode/'navbar'
25 ==
26;>
28# Neo-Tokyo Urbit meetup
30;img@"https://ofheroesandcliches.files.wordpress.com/2014/06/neo-tokyo.png"(width "100%");
32Hi there! We meet once a week at The Chat to work on Urbit projects
33together.
35You can find out more about the group on the [about](about) page and
36follow our projects in [projects](projects).
37```
39This is our landing page. Here we're using a few new bits of frontmatter:
40`navdpad`, `navmode` and `navpath`. `navdpad` just turns off the nav
41arrows. `navmode` can be set to 'navbar' to switch to a horizontal top
42nav instead of a left bar. `navpath` sets the path to load the nav
43items from.
45Let's create `about.umd` and `projects.umd`. From Unix use the
46technique from before to create a new directory: `mkdir
47your-urbit/site/web/meet/; touch your-urbit/site/web/meet/about.umd`.
48Then put the following in `site/web/about.umd`:
50```
51:- :~ navhome/'/meet'
52 navdpad/'false'
53 navpath/'/meet'
54 mavmode/'navbar'
55 title/'About'
56 ==
57;>
59# About
61## Mission statement
63The existing framework cannot subdue the new human force that is increasing day by day alongside the irresistible development of technology and the dissatisfaction of its possible uses in our senseless social life.
65## Members
67Membership is open to anyone. Just send a message to `~talsur-todres`.
69- Shōtarō Kaneda
70- Motoko Kusanagi
71- Ishikawa
72- Faye Valentine
73- Spike Spiegel
74```
76And `site/web/projects.umd`:
78```
79:- :~ navhome/'/meet'
80 navdpad/'false'
81 navpath/'/meet'
82 mavmode/'navbar'
83 title/'Projects'
84 ==
85;>
87# Projects
89## Active
91;list;
93## Discussion
95;div(class "mini-module")
96 ;script(src "/~/at/lib/js/urb.js");
97 ;script(src "https://cdn.rawgit.com/seatgeek/react-infinite/0.8.0/dist/react-infinite.js");
98 ;script(src "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment-with-locales.js");
99 ;script(src "https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.1/moment-timezone.js");
100 ;script(src "/talk/main.js");
101 ;link(href "/talk/main.css", rel "stylesheet");
102 ;talk(readonly "", chrono="reverse", station="comments");
103==
104```
106This page introduces a new thing: the `:talk` module. Inside of the
107`mini-module` div we load the scripts needed by the `;talk`
108component. The `;talk` component is a static component for
109displaying a feed from a talk channel inline. Here we're going to
110display the discussion from our active projects inline.
112We'll need a few active projects though. From unix: `mkdir
113your-urbit/site/web/meet/projects; touch
114your-urbit/site/web/meet/projects/bike.umd`.
116In `site/web/meet/projects/bike.umd`:
118```
119:- :~ navhome/'/meet'
120 navdpad/'false'
121 navpath/'/meet'
122 mavmode/'navbar'
123 title/'Kaneda's Bike'
124 comments/'true'
125 ==
126;>
128# Urbit on a Motorcycle
130Discussion on getting urbit to power Kaneda's motorcycle.
131```
133Here we just use the `comments` frontmatter to enable comments on the page.
134Adding other imaginary projects is left to the reader.
136Building a static site takes only a few minutes and a few markdown
137files. Have fun!