scripts are now working

Signed-off-by: Matt Butcher <[email protected]>
fermyon · Aug 31, 2021 · 26798b2 · 26798b2
1 parent daf157a
commit 26798b2
Show file tree

Hide file tree

Showing 13 changed files with 288 additions and 12 deletions.
diff --git a/config/site.toml b/config/site.toml
@@ -1,4 +1,4 @@
 title = "Bartholomew"
 # logo = "URL to logo"
 base_url = "http://localhost:3000"
-about = "This site is generated with Bartholomew, the Wagi micro-CMS"
+about = "This site is generated with Bartholomew, the Wagi micro-CMS. And this message is in site.toml."
diff --git a/content/author/butcher.md b/content/author/butcher.md
@@ -0,0 +1,5 @@
+title = "Matt Butcher"
+
+---
+
+Hello.
diff --git a/content/blog.md b/content/blog.md
@@ -0,0 +1,5 @@
+title = "The Bartholomew Blog"
+description = "All you need to know to get started with Bartholomew"
+template = "blog"
+---
+A blog about Bartholomew, the simple CMS for [Wagi](https://github.com/deislabs/wagi).
diff --git a/content/blog/2021-09-01-first-post.md b/content/blog/2021-09-01-first-post.md
@@ -0,0 +1,12 @@
+title = "First Post!"
+description = "An example of blogging on the Bartholomew platform"
+---
+
+This is an example of a blog post.
+
+Bartholomew is a simple content management system that uses Markdown files with TOML
+headers. Templates are written in the Handlebars language, which is a simple
+template language that supports custom helpers.
+
+To get you started with Bartholomew, we created a couple of blog posts like this
+one. You should delete this when you start your own blog.
diff --git a/content/blog/2021-09-15-what-is-markdown.md b/content/blog/2021-09-15-what-is-markdown.md
@@ -0,0 +1,42 @@
+title = "What Is Markdown?"
+description = "Introducing an easy-to-write document format"
+---
+Markdown is one of the most prevalent document formats for writing content. If you use
+Slack, you probably have written some Markdown. Every Slack message is a mini
+Markdown document. GitHub, HackMD, and many other similar tools use Markdown as their
+primary format for composing text. Why? Because it is very easy.
+
+For starters, paragraphs are just plain-text paragraphs. No tags or markup need. To make
+a header, you just use hash marks: `#` for a title, `##` for a sub-header, and so on.
+Bullet lists are just plain text hyphen or asterisk lists.
+
+For example:
+
+```
+- This
+- Is
+- A
+- List
+```
+
+The above produces:
+
+- This
+- Is
+- A
+- List
+
+Make text italic by wrapping it in underscores: `_hello_` becomes _hello_. And use
+asterisks for bold. `*goodbye*` becomes *goodbye*.
+
+There are other Markdown goodies, but one you should know is how to make a link.
+Links are built by putting text in square brackets, and the URL in parentheses.
+
+```
+Say [Hello](http://example.com)
+```
+
+Say [Hello](http://example.com).
+
+If you want to reference an image, just add `!` in front of the square bracket. In that
+situation, the text in the square brackets becomes the image description.
diff --git a/content/blog/2021-09-31-goals-of-bartholomew.md b/content/blog/2021-09-31-goals-of-bartholomew.md
@@ -0,0 +1,25 @@
+title = "The Goals of Bartholomew"
+description = "We have plans. Big plans. Actually, they're small plans."
+---
+
+Bartholomew is intended to be three things:
+
+1. A simple-to-use CMS-like system that feels like Jekyll or other static site generators
+2. A flexible system that is cheap to run, but easy to extend. (Cloud is expensive!)
+3. An exhibition of the value of WebAssembly on the server-side
+
+Static site generators are great for many things. But they are also limiting. To keep
+a site feeling fresh, you have to keep building and publishing the site because all
+elements are rendered at build time. If you want to write dynamic elements of any sort,
+you have to resort to JavaScript.
+
+But at the same time, these static site generators are super easy to use. Content is
+just written in plain text, and is rendered into HTML. Menus and navigation are
+built up automatically. And dealing with images and other files is as easy as dropping
+a file in a directory. We love that experience. So we tried to combine the best of the
+static site generator with a server-side technology.
+
+Bartholomew works like PHP (the language Wordpress and Drupal are written in). Each
+time the server receives a request, it starts up a new Bartholomew instance, which only
+runs long enough to serve the request. In this model, you don't need to keep a
+Bartholomew server running all the time.
diff --git a/content/index.md b/content/index.md
@@ -1,9 +1,35 @@
-title = "Welcome to Bartholomew, the Micro-CMS for Wagi"
----
-# Welcome to Bartholomew
+title = "Welcome to Bartholomew"
+description = "The Micro-CMS for Wagi"
 
+[extra]
+date = "Aug. 30, 2021"
+author = "Matt Butcher"
+author_page = "/author/butcher"
+---
 It might be hard to spell, but fortunately you won't have to spell it that often.
 
+Bartholomew is a Micro-CMS for hosting Markdown content on a WebAssembly server.
+It can run on any [Wagi-compliant runtime](https://github.com/deislabs/wagi), including
+Wagi, Hippo, and Wagi.Net.
+
+## Content is in Markdown
+
+Write your content in Markdown, the simple text-based markup language.
+Just drop your content somewhere in the `content/` folder, and you're ready to go.
+
+## Templates are Handlebars
+
+Handlebars is a popular template format similar to Mustache. All of the templates
+are fully customizable. You can take a look in the `templates/` directory to start
+customizing the look and feel of this site.
+
+## Configuration Files
+
+Configuration files are in `config`, and are simple TOML files. Probably the only one
+you need is `config/site.toml`.
+
+## Getting Started
+
 To get started, edit this page. While Bartholomew doesn't make a lot of assumptions about
 your site, it _does_ assume that requests to the root (`/`) should be directed to
 `index.md`.
diff --git a/modules.toml b/modules.toml
@@ -1,3 +1,8 @@
+[[module]]
+module = "/Users/technosophos/Code/Grain/fileserver/fileserver.gr.wasm"
+route = "/static/..."
+volumes = {"/" = "static/"}
+
 [[module]]
 module = "target/wasm32-wasi/release/bartholomew.wasm"
 route = "/..."

diff --git a/scripts/echo.rhai b/scripts/echo.rhai
@@ -0,0 +1,3 @@
+let msg = params[0];
+
+"hello " + msg;
diff --git a/scripts/lib.rhai b/scripts/lib.rhai
diff --git a/src/template.rs b/src/template.rs
@@ -80,8 +80,18 @@ impl<'a> Renderer<'a> {
     }
 
     pub fn load_script_dir(&mut self) -> anyhow::Result<()> {
-        self.handlebars
-            .register_script_helper_file("lib", self.script_dir.join("lib.rhai"))?;
+        // TODO: rewrite all_files so we don't need to clone here.
+        let scripts = crate::content::all_files(self.script_dir.clone())?;
+        for script in scripts {
+            // Relative file name without extension. Note that we skip any file
+            // that doesn't have this.
+            if let Some(fn_name) = script.file_stem() {
+                eprintln!("registering {}", fn_name.to_str().unwrap_or("unknown"));
+                self.handlebars
+                    .register_script_helper_file(&fn_name.to_string_lossy(), &script)?;
+            }
+        }
+
         Ok(())
     }
 

diff --git a/static/rust-code.png b/static/rust-code.png
diff --git a/templates/main.hbs b/templates/main.hbs
@@ -18,14 +18,160 @@
             margin-top: 1em;
             margin-left: 5em;
         }
+
+        .learn-more-card-group {
+            margin-top: 2em;
+        }
     </style>
 </head>
 
 <body>
-    {{! Since this is HTML, we use the triple-curly }}
-    {{{page.body}}}
+    <div class="container" id="main-container">
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">{{ site.info.title }}</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="/index">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/blog">Blog</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                Categories
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="#">Some Category</a></li>
+                                <li><a class="dropdown-item" href="#">Another Category</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="/helpers_example">Example of Helpers</a></li>
+                                <li><a class="dropdown-item" href="/markdown">Markdown Example</a></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About</a>
+                        </li>
+                    </ul>
+                    <form class="d-flex">
+                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                        <button class="btn btn-outline-success" type="submit">Search</button>
+                    </form>
+                </div>
+            </div>
+        </nav>
+        <main>
+            <div class="row">
+
+                <div class="col-md-8">
+                    <article class="blog-post">
+                        {{#with page.frontmatter}}
+                        <h1 class="blog-post-title border-bottom">{{title}}</h2>
+                            <p class="blog-post-meta">{{extra.date}} {{#if extra.author}} by <a
+                                    href="{{extra.author_page}}">{{extra.author}}</a>{{/if}}
+                            </p>
+                            {{/with}}
+                            {{! Since this is HTML, we use the triple-curly }}
+                            {{{page.body}}}
+                            {{ echo "world" }}
+                    </article>
+
+
+                    <h2 class="border-top learn-more-card-group">Learn More</h2>
+                    <div class="card-group">
+                        <div class="card">
+                            <img src="/static/rust-code.png" class="card-img-top"
+                                alt="Screenshot of Rust code, used purely for aesthetic purposes.">
+                            <div class="card-body">
+                                <h5 class="card-title">Card title</h5>
+                                <p class="card-text">This is a wider card with supporting text below as a natural
+                                    lead-in to
+                                    additional
+                                    content. This content is a little bit longer.</p>
+                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <img src="/static/rust-code.png" class="card-img-top"
+                                alt="Screenshot of Rust code, used purely for aesthetic purposes.">
+                            <div class="card-body">
+                                <h5 class="card-title">Card title</h5>
+                                <p class="card-text">This card has supporting text below as a natural lead-in to
+                                    additional
+                                    content.
+                                </p>
+                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <img src="/static/rust-code.png" class="card-img-top"
+                                alt="Screenshot of Rust code, used purely for aesthetic purposes.">
+                            <div class="card-body">
+                                <h5 class="card-title">Card title</h5>
+                                <p class="card-text">This is a wider card with supporting text below as a natural
+                                    lead-in to
+                                    additional
+                                    content. This card has even longer content than the first to show that equal height
+                                    action.
+                                </p>
+                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                            </div>
+                        </div>
+                    </div>
+                </div><!-- end col -->
+
+                <div class="col-md-4">
+                    <div class="position-sticky" style="top: 2rem;">
+                        <div class="p-4 mb-3 bg-light rounded">
+                            <h4 class="fst-italic">About</h4>
+                            <p class="mb-0">{{site.info.about}}</p>
+                        </div>
+
+                        <div class="p-4">
+                            <h4 class="fst-italic">Archives</h4>
+                            <ol class="list-unstyled mb-0">
+                                <li><a href="#">March 2021</a></li>
+                                <li><a href="#">February 2021</a></li>
+                                <li><a href="#">January 2021</a></li>
+                                <li><a href="#">December 2020</a></li>
+                                <li><a href="#">November 2020</a></li>
+                                <li><a href="#">October 2020</a></li>
+                                <li><a href="#">September 2020</a></li>
+                                <li><a href="#">August 2020</a></li>
+                                <li><a href="#">July 2020</a></li>
+                                <li><a href="#">June 2020</a></li>
+                                <li><a href="#">May 2020</a></li>
+                                <li><a href="#">April 2020</a></li>
+                            </ol>
+                        </div>
+
+                        <div class="p-4">
+                            <h4 class="fst-italic">Elsewhere</h4>
+                            <ol class="list-unstyled">
+                                <li><a href="#">GitHub</a></li>
+                                <li><a href="#">Twitter</a></li>
+                                <li><a href="#">Facebook</a></li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </main>
+
+
 
-    {{> footer }}
+        {{> footer }}
+    </div><!-- End main container -->
 </body>
 
 </html>