Add basic nav and content, split index into component templates
This commit is contained in:
parent
3640bdb85c
commit
371e1b23e6
|
@ -1,2 +1,3 @@
|
|||
/target
|
||||
/screenshots
|
||||
notes
|
||||
|
|
10
src/main.rs
10
src/main.rs
|
@ -9,6 +9,9 @@ extern crate rocket_contrib;
|
|||
extern crate serde_derive;
|
||||
extern crate tera;
|
||||
|
||||
use std::path::{Path, PathBuf};
|
||||
|
||||
use rocket::response::NamedFile;
|
||||
use rocket_contrib::templates::Template;
|
||||
|
||||
#[derive(Debug, Serialize)]
|
||||
|
@ -26,6 +29,11 @@ fn index() -> Template {
|
|||
Template::render("index", &context)
|
||||
}
|
||||
|
||||
#[get("/<file..>")]
|
||||
fn files(file: PathBuf) -> Option<NamedFile> {
|
||||
NamedFile::open(Path::new("static/").join(file)).ok()
|
||||
}
|
||||
|
||||
#[catch(404)]
|
||||
fn not_found() -> Template {
|
||||
debug!("404 Page Not Found");
|
||||
|
@ -38,7 +46,7 @@ fn not_found() -> Template {
|
|||
|
||||
fn main() {
|
||||
rocket::ignite()
|
||||
.mount("/", routes![index])
|
||||
.mount("/", routes![index, files])
|
||||
.register(catchers![not_found])
|
||||
.attach(Template::fairing())
|
||||
.launch();
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 12 KiB |
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
|
||||
<title>mycelial technology | glyph</title>
|
||||
<meta name="author" content="glyph">
|
||||
<meta name="description" content="The personal website of glyph.">
|
||||
<meta name="keywords" content="mycology, fermentation, coding">
|
||||
<style>
|
||||
a {
|
||||
color: #111;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 900px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #fefefe;
|
||||
color: #111;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
list-style-type: none;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
border: solid 1px #111;
|
||||
color: #111;
|
||||
display: inline-block;
|
||||
margin-top: 0.2rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.nav-item:hover a {
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% block nav %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
|
@ -1,68 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>mycelial technology | glyph</title>
|
||||
<meta name="author" content="glyph">
|
||||
<meta name="description" content="The personal website of glyph.">
|
||||
<meta name="keywords" content="mycology, fermentation, coding">
|
||||
<style>
|
||||
a {
|
||||
color: #faf884;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #111;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>mycelial technology</h1>
|
||||
<hr>
|
||||
<nav>
|
||||
<ol class="navbar">
|
||||
<li class="nav-item">background</li>
|
||||
<li class="nav-item">computers</li>
|
||||
<li class="nav-item">drawing</li>
|
||||
<li class="nav-item">fermentation</li>
|
||||
<li class="nav-item">language</li>
|
||||
<li class="nav-item">lists</li>
|
||||
<li class="nav-item">movement</li>
|
||||
<li class="nav-item">mycology</li>
|
||||
<li class="nav-item">travel</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% extends "nav" %}
|
||||
{% block content %}
|
||||
<img src="glyph.svg" style="align-self: center; width: 175px;" />
|
||||
<p>Welcome to the personal website of glyph.</p>
|
||||
<h2>Contact Information</h2>
|
||||
<hr>
|
||||
|
@ -71,5 +9,4 @@
|
|||
<li style="list-style-type: none; padding: 0.5rem;">Merveilles: <a href="https://merveilles.town/@glyph" title="@glyph@merveilles.town">@glyph</a></li>
|
||||
<li style="list-style-type: none; padding: 0.5rem; word-wrap: break-word;">Scuttlebutt: @HEqy940T6uB+T+d9Jaa58aNfRzLx9eRWqkZljBmnkmk=.ed25519</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
{%- endblock %}
|
||||
|
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>mycelial technology | glyph</title>
|
||||
<meta name="author" content="glyph">
|
||||
<meta name="description" content="The personal website of glyph.">
|
||||
<meta name="keywords" content="mycology, fermentation, coding">
|
||||
<style>
|
||||
a {
|
||||
color: #faf884;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 900px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #111;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>mycelial technology</h1>
|
||||
<hr>
|
||||
<nav>
|
||||
<ol class="navbar">
|
||||
<li class="nav-item">background</li>
|
||||
<li class="nav-item">computers</li>
|
||||
<li class="nav-item">drawing</li>
|
||||
<li class="nav-item">fermentation</li>
|
||||
<li class="nav-item">language</li>
|
||||
<li class="nav-item">lists</li>
|
||||
<li class="nav-item">movement</li>
|
||||
<li class="nav-item">mycology</li>
|
||||
<li class="nav-item">travel</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<p>Welcome to the personal website of glyph.</p>
|
||||
<h2>Contact Information</h2>
|
||||
<hr>
|
||||
<ul style="padding: 0;">
|
||||
<li style="list-style-type: none; padding: 0.5rem;">Email: <a href="mailto:gnomad@cryptolab.net">gnomad@cryptolab.net</a></li>
|
||||
<li style="list-style-type: none; padding: 0.5rem;">Merveilles: <a href="https://merveilles.town/@glyph" title="@glyph@merveilles.town">@glyph</a></li>
|
||||
<li style="list-style-type: none; padding: 0.5rem; word-wrap: break-word;">Scuttlebutt: @HEqy940T6uB+T+d9Jaa58aNfRzLx9eRWqkZljBmnkmk=.ed25519</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,22 @@
|
|||
{% extends "base" %}
|
||||
{% block nav -%}
|
||||
<h1>mycelial technology</h1>
|
||||
<hr>
|
||||
<nav>
|
||||
<ol class="nav-bar">
|
||||
<li class="nav-item"><a href="">background</a></li>
|
||||
<li class="nav-item"><a href="">computers</a></li>
|
||||
<li class="nav-item"><a href="">drawing</a></li>
|
||||
<li class="nav-item"><a href="">fermentation</a></li>
|
||||
<li class="nav-item"><a href="">language</a></li>
|
||||
<li class="nav-item"><a href="">lists</a></li>
|
||||
<li class="nav-item"><a href="">movement</a></li>
|
||||
<li class="nav-item"><a href="">mycology</a></li>
|
||||
<li class="nav-item"><a href="">travel</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
{%- block content %}{%- endblock %}
|
||||
<footer style="display: flex;">
|
||||
<p>© 2020 glyph</p>
|
||||
</footer>
|
||||
{%- endblock %}
|
Loading…
Reference in New Issue