tom
/
blog_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Polish index and articles pages, link styling, fixes for footer

Browse Source
main
Pantonshire 4 years ago
parent 37a07d8e78
commit 76ae05a6d8
5 changed files with 177 additions and 48 deletions
Show Stats Download Patch File Download Diff File

28
blog_server/src/service/index.rs
Unescape Escape View File

@ -16,9 +16,9 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> Html {
})
.with_body(template::main_page(html! {
section .content_section {
h2 { "About me" }
p {
"Hi! I'm Tom, a computer science student and hobbyist programmer."
"Hi! I'm Tom, a computer science student and hobbyist programmer, and \
definitely not an egg-shaped robot."
}
figure {
img src="/static/images/tombot_450.png"
@ -34,21 +34,33 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> Html {
}
section .content_section {
h2 { "Things I've made" }
p { "Todo" }
h2 { "Some things I've made" }
ul {
li { a href="https://github.com/pantonshire/goldcrest" { "Goldcrest" } ", a proxy for the Twitter v1 API using gRPC. I made it to address the problem of centralised rate-limit tracking to avoid exceeding to Twitter's quotas." }
li { a href="https://github.com/pantonshire/smolbotbot" { "Smolbotbot" } ", an art archival project for the drawings of " a href="https://twitter.com/smolrobots" { "@smolrobots" } "! A Twitter bot continuously checks for new small robots, and the data it collects is made available at " a href="https://smolbotbot.com" { "smolbotbot.com" } "." }
li { a href="https://github.com/pantonshire/enumscribe" { "Enumscribe" } ", a Rust procedural macro library for generating conversion methods between enum types and strings, with support for " a href="https://serde.rs" { "Serde" } "." }
li { a href="https://github.com/pantonshire/tasque" { "Tasque" } ", a very in-progress cron-like job scheduler that I'm having a lot of fun working on." }
}
}
section .content_section {
h2 { "Articles" }
ul {
@for post in posts.read().await.iter_by_created().rev().take(5) {
p { "Some recent ones:" }
ul .articles_list {
@for post in posts.read().await.iter_by_created().rev().take(3) {
li {
a href={"/articles/" (post.id())} { (post.title()) }
h3 { a href={"/articles/" (post.id())} { (post.title()) } }
@if let Some(subtitle) = post.subtitle() {
p .article_list_subtitle { (subtitle) }
}
p .article_list_published_date {
"Published " (post.created().format("%Y/%m/%d"))
}
}
}
}
p {
a href="/articles" { "See all" }
a href="/articles" { "See the rest" }
}
}
}))

11
blog_server/src/service/posts_list.rs
Unescape Escape View File

@ -20,12 +20,15 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> Html {
p {
"A collection of words I have written, against my better judgement."
}
ul {
ul .articles_list {
@for post in posts.read().await.iter_by_created().rev() {
li {
a href={"/articles/" (post.id())} { (post.title()) }
span class="quiet" {
" — " (post.created().format("%Y/%m/%d"))
h3 { a href={"/articles/" (post.id())} { (post.title()) } }
@if let Some(subtitle) = post.subtitle() {
p .article_list_subtitle { (subtitle) }
}
p .article_list_published_date {
"Published " (post.created().format("%Y/%m/%d"))
}
}
}

2
blog_server/src/template.rs
Unescape Escape View File

@ -29,7 +29,7 @@ pub fn main_page(content: Markup) -> Markup {
#page_footer_content {
ul {
li {
"\"What is a footer? A miserable little pile of secrets\""
"\"What is a footer? A miserable little pile of secrets.\""
}
li {
a href="https://github.com/pantonshire/blog_server" {

103
static/styles/main.css
Unescape Escape View File

@ -88,15 +88,58 @@ body {
color: white;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h1,
h2,
h3 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
figure {
width: fit-content;
margin: 0;
}
figcaption {
text-align: center;
font-size: 0.9rem;
}
figcaption a {
color: inherit;
}
a:link {
color: #0960BA;
}
a:visited {
color: #72109B;
}
ul {
list-style-type: circle;
}
li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#page_header {
background-color: #94BFBE;
color: white;
}
#page_nav {
/* display: flex;
flex-direction: row;
justify-content: space-between; */
padding: 1rem 1rem;
margin: 0 auto;
max-width: 60rem;
@ -119,12 +162,10 @@ body {
display: grid;
grid-template-columns: repeat(5, auto);
grid-template-rows: 100%;
/* column-gap: 1.5rem; */
column-gap: 1rem;
margin-top: 0;
margin-bottom: 0;
padding: 0;
/* font-size: 1.5rem; */
font-size: 1.2rem;
overflow-x: auto;
white-space: nowrap;
@ -194,7 +235,7 @@ body {
#content {
margin: 0 auto;
padding: 1rem;
padding: 1rem 1rem 2rem 1rem;
max-width: 60rem;
}
@ -206,41 +247,25 @@ body {
color: #898989;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h1,
h2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
figure {
width: fit-content;
margin: 0;
}
figcaption {
text-align: center;
font-size: 0.9rem;
ul.articles_list {
list-style-type: none;
}
figcaption a {
color: inherit;
.articles_list li {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
ul {
list-style-type: circle;
.article_list_subtitle {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
.article_list_published_date {
color: #898989;
font-size: 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.article_header {
@ -350,6 +375,14 @@ li {
margin-bottom: 0;
}
#page_footer_content ul {
grid-template-columns: repeat(3, auto);
grid-template-rows: 100%;
column-gap: 1rem;
row-gap: 0;
width: fit-content;
}
#content {
padding: 2rem 1rem 4rem 1rem;
}

81
static/test.html
Unescape Escape View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pantonshire</title>
<link href="/static/styles/main.css" rel="stylesheet">
</head>
<body>
<header id="page_header">
<nav id="page_nav">
<div id="title_box"><a href="/">Pantonshire</a></div>
<div id="right_nav_box">
<ul>
<li><a href="/articles">Articles</a></li>
<li><a href="/atom.xml">Atom</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="https://github.com/pantonshire">GitHub</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main id="page_main">
<div id="content">
<section class="content_section">
<p>Hi! I'm Tom, a computer science student and hobbyist programmer, and definitely not an egg-shaped robot.</p>
<figure><img src="/static/images/tombot_450.png"
alt="A drawing by @smolrobots (on Twitter) of me as a robot. It has an egg-shaped body and a smiling face, and is doing a little dance next to a Raspberry Pi."
width="256">
<figcaption class="quiet">Drawn by <a href="https://twitter.com/smolrobots">@smolrobots</a>
</figcaption>
</figure>
</section>
<section class="content_section">
<h2>Some things I've made</h2>
<ul>
<li><a href="https://github.com/pantonshire/goldcrest">Goldcrest</a>, a proxy for the Twitter v1 API using gRPC. I made it to address the problem of centralised rate-limit tracking to avoid exceeding to Twitter's quotas.</li>
<li><a href="https://github.com/pantonshire/smolbotbot">Smolbotbot</a>, an art archival project for the drawings of <a href="https://twitter.com/smolrobots">@smolrobots</a>! A Twitter bot continuously checks for new small robots, and the data it collects is made available at <a href="https://smolbotbot.com">smolbotbot.com</a>.</li>
<li><a href="https://github.com/pantonshire/enumscribe">Enumscribe</a>, a Rust procedural macro library for generating conversion methods between enum types and strings, with support for <a href="https://serde.rs">Serde</a>.</li>
<li><a href="https://github.com/pantonshire/tasque">Tasque</a>, a very in-progress cron-like job scheduler that I'm having a lot of fun working on.</li>
</ul>
</section>
<section class="content_section">
<h2>Articles</h2>
<p>Some recent ones:</p>
<ul class="articles_list">
<li>
<h3><a href="/articles/structs">How the struct gets made</a></h3>
<p class="article_list_subtitle">In which peek behind the curtain to see how compilers represent our data types.</p>
<p class="article_list_published_date">Published 2022/05/25</p>
</li>
<li>
<h3><a href="/articles/baa">Testing II</a></h3>
</li>
<li>
<a href="/articles/foo">Foo Baa</a>
</li>
<li>
<a href="/articles/test">Testing</a>
</li>
</ul>
<p><a href="/articles">See the rest</a></p>
</section>
</div>
</main>
<footer id="page_footer">
<div id="page_footer_content">
<ul>
<li>&quot;What is a footer? A miserable little pile of secrets&quot;</li>
<li><a href="https://github.com/pantonshire/blog_server">Source code for this site</a></li>
<li><a rel="me" href="https://tech.lgbt/@pantonshire">Backlink for Mastodon</a></li>
</ul>
</div>
</footer>
</body>
</html>
Write Preview
Loading…
Cancel
Save