diff options
| author | lonkaars <loek@pipeframe.xyz> | 2024-04-28 15:04:22 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2024-04-28 15:04:22 +0200 |
| commit | a041f469ff41f53601c97454b41cfc4ef3f3ed45 (patch) | |
| tree | 9554747d8a659b86f04c42ab3556fbb4dae3e37a | |
| parent | 5d088aa25f69afdb9ba208def8c23b4f45bbe0b8 (diff) | |
cleanup + begin fix search page
| -rw-r--r-- | Gemfile | 1 | ||||
| -rw-r--r-- | _config.yml | 5 | ||||
| -rw-r--r-- | _includes/title.html | 4 | ||||
| -rw-r--r-- | _layouts/default.html (renamed from _layouts/post.html) | 4 | ||||
| -rw-r--r-- | _layouts/index.html | 48 | ||||
| -rw-r--r-- | _sass/layout.css | 1 | ||||
| -rw-r--r-- | _sass/search.css | 8 | ||||
| -rw-r--r-- | atom.xml | 12 | ||||
| -rw-r--r-- | index.md | 30 | ||||
| -rw-r--r-- | search.html | 16 |
10 files changed, 66 insertions, 63 deletions
@@ -4,4 +4,5 @@ source 'https://rubygems.org' gem 'jekyll', '~> 4.3' gem 'json', '~> 2.7' gem 'nokogiri', '~> 1.16' +gem 'jekyll-liquify', '~> 0.0.3' diff --git a/_config.yml b/_config.yml index d14546c..62b2631 100644 --- a/_config.yml +++ b/_config.yml @@ -9,9 +9,12 @@ defaults: - scope: type: posts values: - layout: post + layout: default lang: en + toc: true markdown: kramdown sass: style: compressed sourcemap: development +gems: + - jekyll-liquify diff --git a/_includes/title.html b/_includes/title.html index 40efd39..08643ad 100644 --- a/_includes/title.html +++ b/_includes/title.html @@ -1 +1,5 @@ +{% if page.id == "index" %} +<title>{{ site.title }}</title> +{% else %} <title>{{ page.title }} - {{ site.title }}</title> +{% endif %} diff --git a/_layouts/post.html b/_layouts/default.html index 4597623..a923692 100644 --- a/_layouts/post.html +++ b/_layouts/default.html @@ -14,8 +14,8 @@ </div> <div class='navAreaWrapper'> <div class='sticky'> - {% include navbar.html page="post" %} - {% toc %} + {% include navbar.html page=page.id %} + {% if page.toc %}{% toc %}{% endif %} </div> </div> <!-- <MobileNavbar /> --> diff --git a/_layouts/index.html b/_layouts/index.html deleted file mode 100644 index 9f0f6d0..0000000 --- a/_layouts/index.html +++ /dev/null @@ -1,48 +0,0 @@ -<!DOCTYPE html> -<html lang='{{ page.lang }}'> -<head> - {% include head.html %} - <title>{{ site.title }}</title> - {% include opengraph.html %} -</head> -<body> - <div class='centeredPage'> - <div class='titleWrapper'> - <h1>{{ page.title }}</h1> - {% if page.subtitle %}<p class='subtile'>{{ page.subtitle }}</p>{% endif %} - {% if page.tags %}{% include tags.html tags=page.tags %}{% endif %} - </div> - <div class='navAreaWrapper'> - <div class='sticky'> - {% include navbar.html page="index" %} - <!-- <Chapters chapters={props.meta.chapters} /> --> - </div> - </div> - <!-- <MobileNavbar /> --> - <div class='contentWrapper'> - {{ content }} - {% if site.rss != nil %} - <p>An rss/atom feed of this blog is also available:</p> - <pre>{{ site.rss.url }}</pre> - {% endif %} - <hr/> - <h2>Recent posts</h2> - <div class="recentPosts"> - {% for post in site.posts limit:4 %} - <div class="postCard"> - <a href="{{ post.url }}"> - <img src="{{ post.cover }}" alt="post cover" class="cover"> - <h2 class="title">{{ post.title }}</h2> - <strong class="subtitle">{{ post.subtitle }}</strong> - </a> - {% include tags.html tags=post.tags %} - </div> - {% endfor %} - </div> - <div> - <a href="/search" class="button">Go to all posts</a> - </div> - </div> - </div> -</body> -</html> diff --git a/_sass/layout.css b/_sass/layout.css index 706f5c9..b92ef79 100644 --- a/_sass/layout.css +++ b/_sass/layout.css @@ -16,6 +16,7 @@ display: grid; grid-auto-rows: auto; + grid-auto-columns: auto 1fr; gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins)); } diff --git a/_sass/search.css b/_sass/search.css index e424b6b..d46c80f 100644 --- a/_sass/search.css +++ b/_sass/search.css @@ -3,6 +3,8 @@ border-radius: 8px; padding: 12px; margin-bottom: 24px; + + display: flex; } .searchBar .input { @@ -12,10 +14,7 @@ color: var(--bg); margin-left: 12px; - width: calc(100% - 48px - 12px); - padding: 14px 0; - - vertical-align: top; + flex-grow: 1; } .searchBar .input::placeholder { @@ -27,7 +26,6 @@ .searchBar .button { margin: 0; - display: inline-block !important; line-height: 0; min-width: unset; background-color: var(--bg); @@ -1,15 +1,15 @@ --- --- -{% for post in site.pages %} - {% if post.layout == "index" %} - {% assign index_post = post %} +<?xml version="1.0" encoding="utf-8"?> +{% for page in site.pages %} + {% if page.id == "index" %} + {% assign index_post = page %} {% endif %} {% endfor %} -<?xml version="1.0" encoding="utf-8"?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <channel> - <title>{{ index_post.title }}</title> - <description>{{ index_post.content | markdownify | xml_escape }}</description> + <title>{{ site.title }}</title> + <description>{{ index_post.title }}</description> <language>en-us</language> <link>{{ site.rss.url }}</link> <atom:link href="{{ site.rss.url }}" rel="self" type="application/rss+xml" /> @@ -1,6 +1,8 @@ --- title: Loek's excruciatingly interesting blog -layout: index +layout: default +id: index +toc: false --- Welcome to my blog page! This is where I post updates on things that I do such @@ -15,3 +17,29 @@ The page you're looking at right now is also open-source! The code for this page can be found on [GitHub](https://github.com/lonkaars/blog), and should also be available on [my private git server](https://git.pipeframe.xyz). +{% if site.rss != nil %} +An rss/atom feed of this blog is also available: +``` +{{ site.rss.url }} +``` +{% endif %} + +--- + +## Recent posts + +<div class="recentPosts"> +{% for post in site.posts limit:4 %} + <div class="postCard"> + <a href="{{ post.url }}"> + <img src="{{ post.cover }}" alt="post cover" class="cover"> + <h2 class="title">{{ post.title }}</h2> + <strong class="subtitle">{{ post.subtitle }}</strong> + </a> + {% include tags.html tags=post.tags %} + </div> +{% endfor %} +</div> + +[Go to all posts](/search){:.button} + diff --git a/search.html b/search.html new file mode 100644 index 0000000..9001636 --- /dev/null +++ b/search.html @@ -0,0 +1,16 @@ +--- +title: Search for posts +layout: default +id: search +toc: false +--- + +<div class="searchBar"> + <input class="input" id="searchInput" placeholder="Search for posts..." spellcheck="false" autocomplete="off"> + <button class="button"> + <div class="icon">{% include icon/search-round.svg %}</div> + </button> +</div> + +<div class="searchResults"></div> + |