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