first commit

25 files changed, 667 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..364fdec
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+public/
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..2b405f7
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,18 @@
+base_url = "/"
+
+title = "The NonPersonal Diary"
+description = "VidhuKant's public journal or something. Enjoy."
+author = "Vidhu Kant Sharma"
+default_language = "en"
+
+compile_sass = false
+build_search_index = false
+
+generate_feeds = true
+feed_filenames = ["feed.xml"]
+
+[extra]
+feed_url = "https://nonpersonaldiary.blog/feed"
+feature_image = "https://vidhukant.com/pics/opengraph.png"
+email = "vidhukant@vidhukant.com"
+nickname = "Vidhu Kant"
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..fb811b0
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,9 @@
++++
++++
+
+# This is gonna be legendary
+
+Welcome to The NonPersonal Diary. This is my archive of writings.
+
+[See more on the about page](/about)
+
diff --git a/content/about.md b/content/about.md
new file mode 100644
index 0000000..705d102
--- /dev/null
+++ b/content/about.md
@@ -0,0 +1,56 @@
++++
+title = "About"
+description = "About this blog"
++++
+
+# My not-so-personal diary
+
+Since I was young, I've wanted to write. I've liked reading, and I wanted to write something myself. 
+Never had an idea about what I wanted to write, I just wanted to write. Something that was mine.
+It needn't be a story, doesn't even have to make much sense. I just want my thoughts to take shape 
+into words, into something which the future me, or others can read, something which hopefully
+affects the reader in some way. It's about leaving a mark, not about being good or widely known.
+
+What I find satisfying is writing by hand as everything is quiet, and as long as I'm writing
+something I'm interested in. With my favourite fountain pen - filled with black ink because its
+viscosity is what enhances the pleasure, the feel in my hand, the sound - on my favourite spiral
+notebook, with nice white pages, dumping all my thoughts onto the helpless piece of paper.
+
+## But, what do I want to write about?
+
+Everything around me influences me, more than I'd like to admit. Every now and then I have this
+new experience, something new to talk about. I don't want to stick to a theme, that's not the
+kind of person I am. But, I don't want my writings to get diluted with all the irrelevant 
+thoughts I have. Which takes me to the conclusion that, I have a lot of thoughts, and much
+of them are worth writing about. But, there's nothing keeping them in check. I need a mechanism
+to organize my thoughts, before I can go on and write something meaningful.
+
+### Journaling
+
+I've found that, keeping a journal or a diary is one of the best ways to organize your thoughts.
+Writing your experiences in a diary helps you control your emotions, and makes your thoughts
+clear. And it also makes your writing better, so that's like killing two birds with one stone.
+
+## The meaning behind The NonPersonal Diary
+
+NonPersonal is a term whose meaning I just made up. This blog contains excerpts from my personal
+diary/journal, pointless stories, or other things written by me. In a way, this blog is my
+personal diary, but the public version. So it's not-so-personal, or you can say, NonPersonal.
+
+# About Me
+
+My name is Vidhu Kant Sharma, and I also have another website named [vidhukant.com](https://vidhukant.com)
+but since I don't expect to have much common audience on both of them, I'll introduce myself here.
+
+{{ 
+  img(
+    src="/pics/me.webp", 
+    alt="My photo", 
+    caption="One-of-a-kind, one of one, the only one", 
+    title="Vidhu Kant Sharma", 
+    height="256", 
+    width="256"
+  ) 
+}}
+
+I'm 
diff --git a/content/guestbook/error.md b/content/guestbook/error.md
new file mode 100644
index 0000000..9d87060
--- /dev/null
+++ b/content/guestbook/error.md
@@ -0,0 +1,13 @@
++++
+title = "Guestbook"
+description = "Please sign my guestbook!"
++++
+
+# Oopsie Daisy
+
+Something went wrong :(
+
+No worries, if the issue persists you can just E-mail me and I'll fix the
+issue _and_ add your guestbook entry! (Don't forget to add the necessary details though)
+
+[Return to guestbook history](/guestbook)
diff --git a/content/guestbook/index.md b/content/guestbook/index.md
new file mode 100644
index 0000000..8997bc8
--- /dev/null
+++ b/content/guestbook/index.md
@@ -0,0 +1,20 @@
++++
+title = "Guestbook"
+description = "Please sign my guestbook!"
++++
+
+# Guestbook
+
+This is a record of the people who have visited this website. Thank you all for hanging around!
+Some of these people also have their own websites, so you can check them out. But click on 
+external links at your own risk!
+
+[Sign my guestbook!](#sign-my-guestbook)
+
+# Sign my Guestbook!
+
+Let the fact be recorded that you stumbled upon this little website.
+
+Each entry will go through a manual screening process, forgive me if I take days to update this. 
+
+{{ guestbook_form() }}
diff --git a/content/guestbook/success.md b/content/guestbook/success.md
new file mode 100644
index 0000000..bc95589
--- /dev/null
+++ b/content/guestbook/success.md
@@ -0,0 +1,11 @@
++++
+title = "Guestbook"
+description = "Please sign my guestbook!"
++++
+
+# Thank You!
+
+Thanks for signing my guestbook. Now after a little manual review, it'll be visible
+to the world!
+
+[Return to guestbook history](/guestbook)
diff --git a/content/posts/_index.md b/content/posts/_index.md
new file mode 100644
index 0000000..fc3cdd1
--- /dev/null
+++ b/content/posts/_index.md
@@ -0,0 +1,5 @@
++++
+sort_by = "date"
+template = "posts.html"
+page_template = "post.html"
++++
diff --git a/content/posts/the-most-intellectual-thing-i-have-heard-in-a-while.md b/content/posts/the-most-intellectual-thing-i-have-heard-in-a-while.md
new file mode 100644
index 0000000..e3d8a28
--- /dev/null
+++ b/content/posts/the-most-intellectual-thing-i-have-heard-in-a-while.md
@@ -0,0 +1,18 @@
++++
+title = "The most intellectual thing I've heard in a while"
+description = ""
+date = 2025-05-07
++++
+
+A few days ago, me and some friends were going somewhere, we were 4 guys on two scooters.
+I was with this guy riding pillion with me, let's call him [Redacted].
+
+We overtook the other two friends on the road, and I jokingly called them a couple of
+tortoises. That's when [Redacted] said, "But if they are behind us, that makes us the tortoises."
+
+It took a minute to click in.
+
+This statement blew my mind. It might sound small but I never would've thought of this.
+[Redacted] is truly an intellectual.
+
+P.S. If you don't get the context, check out [The Tortoise and the Hare](https://read.gov/aesop/025.html)
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..e6b02a1
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,213 @@
+:root {
+  --color-0: #f38ba8;
+  --color-1: #eba0ac;
+
+  --bg-0: #1e1e2e;
+  --fg-0: #cdd6f4;
+
+  --bg-1: #313244;
+  --fg-1: #a6adc8;
+
+  --selection-bg: #45475a;
+  --selection-fg: #bac2de;
+
+  --content-width: 600px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-0: #dd7878;
+    --color-1: #dc8a78;
+
+    --bg-0: #eff1f5;
+    --fg-0: #4c4f69;
+
+    --bg-1: #ccd0da;
+    --fg-1: #5c5f77;
+
+    --selection-bg: #bcc0cc;
+    --selection-fg: #5c5f77;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html { 
+  scroll-behavior: smooth; 
+  scrollbar-color: var(--color-0) var(--bg-0); 
+}
+
+body {
+  color: var(--fg-0);
+  background-color: var(--bg-0);
+  font-size: 1.1em;
+  line-height: 1.4;
+  font-family: sans-serif;
+  max-width: var(--content-width);
+  width: 90%;
+  margin: 2em auto;
+  overflow-y: scroll;
+}
+
+::-moz-selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-fg);
+}
+
+::selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-fg);
+}
+
+a { color: var(--color-0); }
+a:hover { color: var(--color-1); }
+
+hr {
+  border: none;
+  border-top: 1px solid var(--color-0);
+  margin: 1.2em auto 1.6em auto;
+}
+
+blockquote {
+  padding: 0.2em 0.6em;
+  margin-left: 1em;
+  border-left: 0.2em solid var(--color-0);
+  display:inline-flex;
+}
+
+blockquote p { margin: 0; }
+
+figure { margin: 2em auto; }
+
+figure figcaption { text-align: center; }
+
+img {
+  display: block;
+  margin: 1em auto;
+  max-width: 100%;
+  height: auto;
+  max-height: var(--content-width);
+}
+
+h1, h2, h3, h4, h5, h6 { color: var(--color-1); }
+
+header h1 { color: var(--color-0); }
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2em;
+  margin: 1.5em auto;
+}
+
+input::placeholder, textarea::placeholder { color: var(--fg-1); }
+
+input, textarea {
+  background-color: var(--bg-0);
+  color: var(--fg-0);
+  border: 1px solid var(--color-0);
+  padding: 0.6em 0.6em;
+  font-size: 1rem;
+  width: 100%;
+}
+
+textarea {
+  resize: none;
+}
+
+input[type=submit] {
+  width: 12em;
+  font-size: 0.8em;
+  padding: 1em;
+  cursor: pointer;
+}
+
+input:hover, textarea:hover {border: 1px solid var(--color-1);}
+
+#top {
+  position: absolute;
+  top: 0;
+}
+
+#site-header { margin-bottom: 2em; }
+
+#site-header h1 { font-size: 1.2em; }
+#site-header h1 a { 
+  background-color: var(--color-0);
+  color: var(--bg-0);
+  padding: 0.2em 0.4em;
+  text-decoration: none;
+}
+#site-header h1 a:hover { background-color: var(--color-1); }
+
+#nav-active-link { color: var(--fg-0); }
+nav ul {
+  width: 100%;
+  list-style-type: none;
+  font-size: 1em;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6em;
+}
+
+main {
+  border: 1px solid var(--color-0);
+  padding: 0.4em 1.2em;
+}
+
+#site-footer { 
+  font-size: 0.85em; 
+  margin-top: 2em;
+  margin-bottom: 5em;
+}
+
+p#top-link { 
+  text-align: center; 
+  padding-top: 1em;
+}
+
+ol#post-index {
+  list-style-type: none;
+  padding: 0;
+}
+
+ol#post-index a {
+  display: grid;
+  grid-template-columns: 6.7em 1fr;
+  width: 100%;
+  text-decoration: none;
+  color: var(--fg-0);
+  margin-bottom: 1em;
+}
+
+ol#post-index time { color: var(--color-1); }
+
+ol#post-index a:visited { color: var(--fg-1); }
+
+.form-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+}
+
+.form-entry:has(input[type=submit]) {
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.guestbook-entry {
+  background-color: var(--bg-1);
+  border-radius: 1em;
+  padding: 0.1em 0.8em;
+  margin: 2em auto;
+}
+
+.guestbook-entry-name {
+  font-size: 1.4em;
+  color: var(--color-1);
+}
+
+.guestbook-entry time {
+  font-size: 0.9em;
+}
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..d633070
--- /dev/null
+++ b/static/favicon.ico
diff --git a/static/pics/me.png b/static/pics/me.png
new file mode 100644
index 0000000..217df35
--- /dev/null
+++ b/static/pics/me.png
diff --git a/static/pics/me.webp b/static/pics/me.webp
new file mode 100644
index 0000000..6822988
--- /dev/null
+++ b/static/pics/me.webp
diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..071d8bd
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block head_extra %}
+<meta name="robots" content="noindex">
+{% endblock head_extra %}
+
+{% block title %}404 Page Not Found - {{ config.title }}{% endblock title %}
+{% block description %}The requested resource was not found (404){% endblock description %}
+
+{% block og_title %}404 Page Not Found - {{ config.title }}{% endblock og_title %}
+{% block og_description %}The requested resource was not found (404){% endblock og_description %}
+
+{% block main %}
+<article>
+  <h1>
+    The requested page was not found.
+  </h1>
+  
+  <p>
+    The URL is either invalid or the page was deleted.
+    <br>
+    Anyways, <a href="/">Return to the homepage.</a>
+  </p>
+<article/>
+{% endblock main %}
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..181d859
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,70 @@
+{% import "macros/header.html" as header %}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="author" content="{{ config.author }}">
+    <meta name="robots" content="index,follow">
+    <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
+    {% block head_extra %}{% endblock head_extra %}
+
+    {% if current_url %}
+    <link rel="canonical" href="{{ current_url | safe }}" />
+    {% endif %}
+    <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ config.extra.feed_url | safe }}">
+
+    <!-- OpenGraph -->
+    {% if current_url %}
+    <meta property="og:url" content="{{ current_url | safe }}" />
+    {% endif %}
+    <meta property="og:site_name" content="{{ config.title }}" />
+    <meta property="og:title" content="{% block og_title %}{{ config.title }}{% endblock og_title %}" />
+    <meta property="og:description" content="{% block og_description %}{{ config.description }}{% endblock og_description %}" />
+    <meta property="og:image" content="{% block og_image %}{{ config.extra.feature_image | safe }}{% endblock og_image %}" />
+    <meta property="og:type" content="{% block og_type %}article{% endblock og_type %}" />
+
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+
+    <title>{% block title %}{{ config.title }}{% endblock title %}</title>
+  </head>
+
+  <body>
+    <div id="top"></div>
+
+    <header id="site-header">
+      {% block header %}
+        {% if page.path %}
+          {% set headerActivePage = page.path %}
+        {% else %}
+          {% set headerActivePage = "/" %}
+        {% endif %}
+        {{ header::site_header(activePage=headerActivePage) }}
+      {% endblock header %}
+    </header>
+
+    <main>
+      {% block main %}
+        <article>
+          {{ page.content | safe }}
+        </article>
+      {% endblock main %}
+    </main>
+
+    <footer id="site-footer">
+      {% block footer %}
+      {% endblock footer %}
+
+      <p id="copyright">
+        Copyright &copy; 2025 Vidhu Kant Sharma
+        <br>
+        The text and image content on this website is licensed under
+        <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">CC BY-NC-ND 4.0</a>
+        unless stated otherwise.
+      </p>
+
+      <p id="top-link"><a href="#top">back to top</a></p>
+    </footer>
+  </body>
+</html>
diff --git a/templates/feed.xml b/templates/feed.xml
new file mode 100644
index 0000000..8f7e3de
--- /dev/null
+++ b/templates/feed.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
+  <channel>
+    <title>{{ config.title }}
+      {%- if term %} - {{ term.name }}
+      {%- elif section.title %} - {{ section.title }}
+      {%- endif -%}
+    </title>
+    <link>
+      {%- if section -%}
+        {{ section.permalink | escape_xml | safe }}
+      {%- else -%}
+        {{ config.base_url | escape_xml | safe }}
+      {%- endif -%}
+    </link>
+    <description>{{ config.description }}</description>
+    <generator>Zola</generator>
+    <language>{{ lang }}</language>
+    <atom:link href="{{ config.extra.feed_url | safe }}" rel="self" type="application/rss+xml"/>
+    <lastBuildDate>{{ last_updated | date(format="%a, %d %b %Y %H:%M:%S %z") }}</lastBuildDate>
+    {%- for page in pages %}
+      <item>
+        <title>{{ page.title }}</title>
+        <pubDate>{{ page.date | date(format="%a, %d %b %Y %H:%M:%S %z") }}</pubDate>
+        <author>{{ config.extra.email }} ({{ config.author }})</author>
+        <link>{{ page.permalink | escape_xml | safe }}</link>
+        <guid>{{ page.permalink | escape_xml | safe }}</guid>
+        <description xml:base="{{ page.permalink | escape_xml | safe }}">
+          {% if page.summary %}
+            {{ page.summary }}
+          {% else %}
+            <![CDATA[{{ page.content | safe}}<p><a href="mailto:{{ config.extra.email }}?subject=Post Reply: {{ page.title }}">Reply to this post via email</a></p>]]>
+          {% endif %}
+        </description>
+      </item>
+    {%- endfor %}
+  </channel>
+</rss>
+
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..2b5296d
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block og_type %}website{% endblock og_type %}
+
+{% block main %}
+<article>
+  {{ section.content | safe }}
+</article>
+{% endblock main %}
diff --git a/templates/macros/date.html b/templates/macros/date.html
new file mode 100644
index 0000000..020b47e
--- /dev/null
+++ b/templates/macros/date.html
@@ -0,0 +1,3 @@
+{% macro format_date(date) %}
+{{ date | date(format="%d %h, %Y") }}
+{% endmacro format_date %}
diff --git a/templates/macros/header.html b/templates/macros/header.html
new file mode 100644
index 0000000..ff6cd44
--- /dev/null
+++ b/templates/macros/header.html
@@ -0,0 +1,26 @@
+{% macro site_header(activePage="") %}
+<h1><a href="/">{{ config.title }}</a></h1>
+<nav>
+  <ul>
+    <li>
+      <a href="/"{% if activePage == "/" %} id="nav-active-link"{% endif %}>Home</a>
+    </li>
+
+    <li>
+      <a href="/posts"{% if activePage == "/posts" %} id="nav-active-link"{% endif %}>Posts</a>
+    </li>
+
+    <li>
+      <a href="/about"{% if activePage == "/about/" %} id="nav-active-link"{% endif %}>About</a>
+    </li>
+
+    <li>
+      <a href="/guestbook"{% if activePage == "/guestbook/" %} id="nav-active-link"{% endif %}>Guestbook</a>
+    </li>
+
+    <li>
+      <a href="https://vidhukant.com" target="_blank">Main Website</a>
+    </li>
+  </ul>
+</nav>
+{% endmacro header %}
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..7f4dd5b
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
+{% block description %}{{ page.description }}{% endblock description %}
+
+{% block og_title %}{{ page.title }} - {{ config.title }}{% endblock og_title %}
+{% block og_description %}{{ page.description }}{% endblock og_description %}
+
+{% block og_type %}website{% endblock og_type %}
diff --git a/templates/post.html b/templates/post.html
new file mode 100644
index 0000000..e055397
--- /dev/null
+++ b/templates/post.html
@@ -0,0 +1,29 @@
+{% import "macros/header.html" as header %}
+{% import "macros/date.html" as date %}
+
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
+{% block description %}{{ page.description }}{% endblock description %}
+
+{% block og_title %}{{ page.title }} - {{ config.title }}{% endblock og_title %}
+{% block og_description %}{{ page.description }}{% endblock og_description %}
+
+{% block header %}
+{{ header::site_header(activePage="/posts") }}
+{% endblock header %}
+
+{% block main %}
+<article>
+  <header>
+    <h1>{{ page.title }}</h1>
+    <p>
+      <time datetime="{{ page.date }}">
+        {{ date::format_date(date=page.date) }}
+      </time>
+    </p>
+    <hr>
+  </header>
+  {{ page.content | safe }}
+</article>
+{% endblock main %}
diff --git a/templates/posts.html b/templates/posts.html
new file mode 100644
index 0000000..c62e299
--- /dev/null
+++ b/templates/posts.html
@@ -0,0 +1,35 @@
+{% import "macros/header.html" as header %}
+{% import "macros/date.html" as date %}
+
+{% extends "base.html" %}
+
+{% block title %}Index - {{ config.title }}{% endblock title %}
+{% block description %}All posts on {{ config.title }}.{% endblock description %}
+
+{% block og_title %}Index - {{ config.title }}{% endblock og_title %}
+{% block og_description %}All posts on {{ config.title }}{% endblock og_description %}
+
+{% block header %}
+{{ header::site_header(activePage="/posts") }}
+{% endblock header %}
+
+{% block main %}
+<article>
+  {{ section.content | safe }}
+
+  <ol id="post-index" reversed>
+    {% for post in section.pages %}
+    <li>
+      <a href="{{ post.path | safe }}">
+        <time datetime="{{ post.date }}">
+          <em>{{ date::format_date(date=post.date) }}</em>
+        </time>
+        <span>
+          {{ post.title }}
+        <span>
+      </a>
+    </li>
+    {% endfor %}
+  </ol>
+</article>
+{% endblock main %}
diff --git a/templates/shortcodes/guestbook_entry.html b/templates/shortcodes/guestbook_entry.html
new file mode 100644
index 0000000..69789ca
--- /dev/null
+++ b/templates/shortcodes/guestbook_entry.html
@@ -0,0 +1,25 @@
+{% import "macros/date.html" as date %}
+
+<div class="guestbook-entry">
+  <p>
+    {% if website %}<a href="{{ website | safe }}" target="_blank">{% endif %}
+    <strong class="guestbook-entry-name">{{ name | safe }}</strong>
+    {% if website %}</a>{% endif %}
+    <br>
+    <time datetime="{{ time }}">
+      {{ date::format_date(date=time) }}
+    </time>
+  </p>
+  <p>
+    {{ message | safe }}
+  </p>
+  {% if reply %}
+    <blockquote>
+      <p>
+        {{ reply | safe }}
+        <br><br>
+        &mdash; {{ config.extra.nickname }}
+      </p>
+    </blockquote>
+  {% endif %}
+</div>
diff --git a/templates/shortcodes/guestbook_form.html b/templates/shortcodes/guestbook_form.html
new file mode 100644
index 0000000..99dcf4c
--- /dev/null
+++ b/templates/shortcodes/guestbook_form.html
@@ -0,0 +1,20 @@
+<form id="guestbook-form" method="POST" action="/guestbook/sign">
+  <div class="form-entry">
+    <label for="guestbook-name">Name:</label>
+    <input type="text" id="guestbook-name" name="name" placeholder="Name" required>
+  </div>
+
+  <div class="form-entry">
+    <label for="guestbook-website">Website:</label>
+    <input type="url" id="guestbook-website" name="website" placeholder="Website (optional)">
+  </div>
+
+  <div class="form-entry">
+    <label for="guestbook-message">Message:</label>
+    <textarea id="guestbook-message" name="message" placeholder="Message" rows="5" required></textarea>
+  </div>
+
+  <div class="form-entry">
+    <input type="submit" value="Sign the guestbook">
+  </div>
+</form>
diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html
new file mode 100644
index 0000000..8ff0820
--- /dev/null
+++ b/templates/shortcodes/img.html
@@ -0,0 +1,13 @@
+<figure>
+  {% if href %}<a href="{{ href }}">{% endif %}
+  <img src="{{ src }}" alt="{{ alt }}"
+    {% if title %}title="{{ title }}"{% endif %}
+    {% if height %}height="{{ height }}"{% endif %}
+    {% if width %}width="{{ width }}"{% endif %}
+    >
+  {% if href %}</a>{% endif %}
+
+  {% if caption %}
+  <figcaption>{{ caption | safe }}</figcaption>
+  {% endif %}
+</figure>