filled out fedibooks project page, added screenshots

_config.yml

@@ -4,3 +4,9 @@ collections:
   projects:
     output: true
     permalink: "/:collection/:name"
+
+defaults:
+  - scope:
+      path: "_projects"
+    values:
+      layout: "project"

_layouts/project.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+<h1>{{ page.name }}</h1>
+<div class='subheading-links'>
+	{% if page.source %}<a href='{{ project.source }}'>Source code</a>{% endif %}
+	{% if page.website %}<a href='{{ project.website }}'>Website</a>{% endif %}
+</div>
+{{ content | rstrip | default: "There's nothing here yet." }}
+{% if page.screenshots -%}
+	<h2>Screenshots</h2>
+	<div id='screenshots'>
+	{%- for screenshot in page.screenshots -%}
+		{%- assign link = '/assets/img/' | append: screenshot -%}
+		<a href='{{ link }}'><img src='{{ link }}'></a>
+	{%- endfor -%}
+	</div>
+{% endif %}

_projects/fedibooks.md

@@ -1,4 +1,14 @@
 ---
-name: Fedibooks
+name: FediBooks
 description: A web UI for creating "ebooks bots"; bots that learn from your posts and use Markov chains to generate similar posts
+source: https://github.com/Lynnesbian/FediBooks
+website: https://fedibooks.com
+screenshots: [fedibooks-home.png, fedibooks-bots.png, fedibooks-chat.png]
 ---
+FediBooks is a website powered by Flask (Python) designed to make creating and managing Fediverse ebooks bots easy.
+
+## Features
+- Free to use, host, modify, and more
+- Supports Mastodon and Pleroma instances
+- No installation or local setup required
+- An easy to understand step-by-step process for creating and managing bots

_projects/mstdn-ebooks.md

@@ -0,0 +1,5 @@
+---
+name: mstdn-ebooks
+description: A Python script that you can run on your own machine. It downloads your posts and used Markov chains to generate fake ones like a typical "ebooks" bot.
+source: https://github.com/Lynnesbian/mstdn-ebooks
+---

_projects/ocrbot.md

@@ -0,0 +1,5 @@
+---
+name: OCRbot
+description: A Fediverse bot that, when invoked, replies with the text content of an image using optical character recognition (OCR).
+source: https://github.com/Lynnesbian/OCRbot
+---

_projects/recipe-site.md

@@ -0,0 +1,5 @@
+---
+name: Recipe Site
+description: A simple static website designed to make keeping track of your recipes easier.
+source: https://git.bune.city/Lynnesbian/recipe-site
+---

assets/style.css

@@ -50,7 +50,7 @@ a {
 	text-decoration: none;
 }
 
-#projects {
+#projects, #screenshots {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -61,6 +61,7 @@ a {
 	background: linear-gradient(to bottom, #0dd, mediumpurple) no-repeat;
 	background-size: 2px;
 	padding: 10px;
+	padding-bottom: 20px;
 	margin: 10px;
 	position: relative;
 }
@@ -75,10 +76,33 @@ a {
 	background: linear-gradient(to bottom right, #00000003, #0000000c);
 
 }
+.project .footer {
+	position: absolute;
+	bottom: 0;
+	margin: 10px 0;
+	font-style: italic;
+}
+.project .footer a:not(:last-child)::after {
+	content: " - ";
+}
 .project h2 {
 	margin-top: 0;
 }
 
+.subheading-links {
+	font-style: italic;
+	text-align: center;
+}
+#screenshots a {
+	display: block;
+	flex: 1 1 600px;
+	max-width: 80%;
+	margin: 10px;
+}
+#screenshots a img {
+	width: 100%;
+}
+
 footer {
 	text-align: center;
 	color: grey;
@@ -89,13 +113,13 @@ footer p {
 	font-size: unset;
 	margin: 5px;
 }
-footer a:not(:last-child)::after {
+footer a:not(:last-child)::after, .subheading-links a:not(:last-child)::after {
 	content: " - "
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-	body {
+	#main {
-		font-size: 250%;
+		width: 95%;
 	}
 	p, footer, ul {
 		line-height: 1.6em;
@@ -103,4 +127,7 @@ footer a:not(:last-child)::after {
 	h1 {
 		margin-top: 0;
 	}
+	#screenshots a {
+		max-width: 100%;
+	}
 }

projects.html

@@ -15,7 +15,11 @@ layout: default
 			<p>
 				{{ project.description }}
 			</p>
-			<a href='{{ project.url }}'>Read more</a>
+			<div class='footer'>
+				<a href='{{ project.url }}'>Read more</a>
+				{% if project.source %}<a href='{{ project.source }}'>Source code</a>{% endif %}
+				{% if project.website %}<a href='{{ project.website }}'>Website</a>{% endif %}
+			</div>
 		</div>
 	{% endfor %}
 	</div>