initial commit, add Publish, add minimal theme, add content

2024-03-24 20:24:51 +01:00
commit cd2f440141
1240 changed files with 194709 additions and 0 deletions
@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+  <link href="https://gmpg.org/xfn/11" rel="profile" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+  <!-- Enable responsiveness on mobile devices-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+
+  <title>
+    
+    Install Mailtrain on Uberspace 7 &middot; felixfoertsch.de
+    
+  </title>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="/assets/css/main.css" />
+
+  <!-- Icons -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicon.png" />
+<link rel="shortcut icon" href="/favicon.png" />
+
+  <!-- RSS -->
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
+
+</head>
+
+
+<body class="post">
+
+	<nav class="navbar navbar-dark bg-dark navbar-expand-md ">
+	<div class="container-fluid">
+		
+		<a class="nav-link navbar-brand " href="/"><img src="/favicon.png" width="30" height="30" alt=""> </a>
+		
+
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-toggle" aria-controls="navigation-toggle" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>		
+		
+		<div class="collapse navbar-collapse" id="navigation-toggle">
+			<div class="navbar-nav">
+				
+
+
+
+				
+
+				
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+      <a class="nav-link" href="/about">About</a>
+    
+  
+
+  
+    
+  
+
+  
+
+  
+    
+      <a class="nav-link" href="/repositories">Repositories</a>
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+
+  
+
+  
+    
+  
+
+
+				
+
+<li class="nav-item dropdown">
+	<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Categories</a>
+	<ul class="dropdown-menu">
+		
+		
+		
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/Design">Design</a></li>
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/Programming">Programming</a></li>
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/Tips">Tips</a></li>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/summaries">Summaries</a></li>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/tutorials">Tutorials</a></li>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	</ul>
+</li>
+
+				
+				<a class="nav-link" title="Tags" aria-label="Tags" href="/tags">Tags</a>
+				
+				<a class="nav-link" title="Subscribe" aria-label="Subscribe" href="/feed.xml">RSS</a>
+				
+				<span></span>
+				
+			</div>
+		</div>
+	</div>
+</nav>
+	
+	<main class="container py-3">
+			<header class="row py-3">
+		<div class="col">
+			<h1 class="display-1">Install Mailtrain on Uberspace 7</h1>
+		</div>
+	</header>
+		<div class="row">
+	<div class="col">
+		<div class="card-subtitle mb-2 text-muted">
+	
+		<span class="">2020-07-19</span> &bull; 
+		<span class=""><svg height="12" class="octicon octicon-sync" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg> Updated: 2020-07-21</span>
+	
+
+	<span class="post-categories">
+		
+		&bull;
+
+		
+		
+		
+
+		
+		<a href="/category/tutorials">Tutorials</a>
+		
+		
+	</span>
+</div>
+
+
+		<div>
+			<p>This tutorial explains how to install <a href="https://mailtrain.org">Mailtrain</a> on a <a href="uberspace.de">Uberspace 7</a>. <a href="https://mailtrain.org/">Mailtrain</a> is a self-hosted open-source (released under the <a href="https://github.com/Mailtrain-org/mailtrain/blob/master/LICENSE">GPL
+v3.0</a>.) newsletter app built on top of <a href="https://nodemailer.com/">Nodemailer</a>. I am following the <a href="https://github.com/Mailtrain-org/mailtrain#quick-start---manual-install-any-os-that-supports-nodejs">manual installation guide</a> from the official Mailtrain repo and add some additional Uberspace infos. I contributed <a href="https://lab.uberspace.de/guide_mailtrain.html">this guide</a> to the <a href="https://lab.uberspace.de/">Uberlab</a> and earned my first <a href="https://github.com/Uberspace/lab/blob/master/CONTRIBUTING.md#reward">Ubercup</a>.</p>
+
+<!-- more -->
+
+<h2 id="installation">Installation</h2>
+
+<p>This guide uses Node.js version 12, which is the <a href="https://manual.uberspace.de/lang-nodejs.html#standard-version">default</a> on Uberspace 7 at at the moment.</p>
+
+<p>Clone the <a href="https://github.com/Mailtrain-org/mailtrain">GitHub</a>
+repository:</p>
+
+<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">[isabell@stardust ~]$</span><span class="w"> </span>git clone git://github.com/Mailtrain-org/mailtrain.git
+<span class="gp">[isabell@stardust ~]$</span><span class="w">
+</span></code></pre></div></div>
+
+<p>Install the required dependencies:</p>
+
+<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">[isabell@stardust ~]$</span><span class="w"> </span><span class="nb">cd </span>mailtrain
+<span class="gp">[isabell@stardust mailtrain]$</span><span class="w"> </span>npm <span class="nb">install</span> <span class="nt">--production</span>
+<span class="gp">[isabell@stardust mailtrain]$</span><span class="w">
+</span></code></pre></div></div>
+
+<h2 id="configuration">Configuration</h2>
+
+<h3 id="database-setup">Database Setup</h3>
+
+<p>Create a new database:</p>
+
+<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">[isabell@stardust mailtrain]$</span><span class="w"> </span>mysql <span class="nt">-e</span> <span class="s2">"CREATE DATABASE </span><span class="k">${</span><span class="nv">USER</span><span class="k">}</span><span class="s2">_mailtrain;"</span>
+<span class="gp">[isabell@stardust mailtrain]$</span><span class="w">
+</span></code></pre></div></div>
+
+<h3 id="mailtrain-config">Mailtrain Config</h3>
+
+<p>Copy the example config file:</p>
+
+<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">[isabell@stardust mailtrain]$</span><span class="w"> </span><span class="nb">cp </span>config/default.toml config/production.toml
+<span class="gp">[isabell@stardust mailtrain]$</span><span class="w">
+</span></code></pre></div></div>
+
+<p>Update <code class="language-plaintext highlighter-rouge">production.toml</code> with your MySQL settings; look for the
+<code class="language-plaintext highlighter-rouge">[mysql]</code> block:</p>
+
+<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">...
+</span><span class="go">
+[mysql]
+host="localhost"
+user="isabell"
+password="MySuperSecretPassword"
+database="isabell_mailtrain"
+
+</span><span class="c">...
+</span></code></pre></div></div>
+
+<h3 id="web-backend-config">Web Backend Config</h3>
+
+<p><a href="https://mailtrain.org/">Mailtrain</a> is running on port 3000. Configure the server to respond to port 3000 using web backends:</p>
+
+<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">[isabell@stardust ~]$</span><span class="w"> </span>uberspace web backend <span class="nb">set</span> / <span class="nt">--http</span> <span class="nt">--port</span> 3000
+<span class="gp">[isabell@stardust ~]$</span><span class="w">
+</span></code></pre></div></div>
+
+<h3 id="supervisord-daemon-setup">Supervisord Daemon Setup</h3>
+
+<p>Create <code class="language-plaintext highlighter-rouge">~/etc/services.d/mailtrain.ini</code> with the following content:</p>
+
+<div class="language-ini highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">[program:mailtrain]</span>
+<span class="py">directory</span><span class="p">=</span><span class="s">%(ENV_HOME)s/mailtrain/</span>
+<span class="py">command</span><span class="p">=</span><span class="s">env NODE_ENV=production /bin/node index.js</span>
+<span class="py">autostart</span><span class="p">=</span><span class="s">yes</span>
+<span class="py">autorestart</span><span class="p">=</span><span class="s">yes</span>
+</code></pre></div></div>
+
+<p>If it’s not in state RUNNING, check your configuration.</p>
+
+<h3 id="login-and-change-admin-credentials">Login and Change Admin Credentials</h3>
+
+<div class="alert alert-danger" role="alert">
+	Change the default admin credentials to prevent unauthorized access of your data!
+</div>
+
+<p>Your <a href="https://mailtrain.org/">Mailtrain</a> installation should now be
+reachable on <code class="language-plaintext highlighter-rouge">https://isabell.uber.space</code>. Log in with the username
+<code class="language-plaintext highlighter-rouge">admin</code> and the password <code class="language-plaintext highlighter-rouge">test</code>.</p>
+
+<p>Go to <code class="language-plaintext highlighter-rouge">https://isabell.uber.space/users/account</code> and change your email
+address as well as your password.</p>
+
+<div class="alert alert-info" role="alert">
+	It is not possible to change the username in the GUI. If you want to change the default username `admin` to something else or add additional users, you have to do it directly in the database.
+</div>
+
+<h2 id="finishing-installation">Finishing installation</h2>
+
+<p>Go to <code class="language-plaintext highlighter-rouge">https://isabell.uber.space/settings</code>. In the <strong>General Settings</strong> section change the <strong>Service Address (URL)</strong>
+to <code class="language-plaintext highlighter-rouge">https://isabell.uber.space/</code>.</p>
+
+<p>In the <strong>Mailer Settings</strong> section change the</p>
+
+<blockquote>
+  <ul>
+    <li><em>Hostname</em>,</li>
+    <li><em>Port</em>,</li>
+    <li><em>Encryption</em>,</li>
+    <li><em>username</em>,</li>
+    <li><em>password</em>, and</li>
+    <li>test your settings by pressing the Button <strong>Check Mailer Config</strong>.</li>
+  </ul>
+</blockquote>
+
+<div class="alert alert-warning" role="alert">
+	Uberspace does not allow mass mailings from their servers according to their House Rules. However, you can use Mailtrain as the admin interface for your mailing needs. Use the SMTP services from AWS SES, Sendgrid, Mailgun, etc. for the actual mailing.
+</div>
+
+<h2 id="best-practices">Best Practices</h2>
+
+<ul>
+  <li>Test the configuration by creating a new list and subscribing yourself
+to it.</li>
+  <li>Craft your campaign with love and dedication.</li>
+  <li>Don’t spam users that don’t want your newsletter.</li>
+</ul>
+
+<hr />
+
+<p>Tested on Uberspace v7.7.0 with NodeJS v12 and MariaDB 10.3.23.</p>
+
+		</div>
+
+		<div class="py-3">
+
+
+
+
+
+<a href="/tags#english"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> English</span></a>
+
+<a href="/tags#self-hosted-software"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> Self-Hosted Software</span></a>
+
+</div>
+		<section>
+  <h2>Related Posts</h2>
+  <ul>
+    
+      <li>
+        <a href="/2020/08/05/Apple-Colors.html"> Apple Colors in SCSS</a>
+        
+	<span class="badge bg-secondary">2020-08-05</span>
+
+      </li>
+    
+      <li>
+        <a href="/2020/08/04/Ideas.html"> Ideas</a>
+        
+	<span class="badge bg-secondary">2020-08-04</span>
+
+      </li>
+    
+      <li>
+        <a href="/2020/08/02/Strategies-from-the-Happiness-Lab.html"> Strategies from the Happiness Lab</a>
+        
+	<span class="badge bg-secondary">2020-08-02</span>
+
+      </li>
+    
+  </ul>
+</section>
+
+	</div>
+</div>
+
+	</main>
+
+	<footer class="container-fluid py-3">
+	
+	<script src="/assets/js/bootstrap.min.js" crossorigin="anonymous"></script>
+	</footer>
+</body>
+</html>
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+  <link href="https://gmpg.org/xfn/11" rel="profile" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+  <!-- Enable responsiveness on mobile devices-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+
+  <title>
+    
+    The Collection &middot; felixfoertsch.de
+    
+  </title>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="/assets/css/main.css" />
+
+  <!-- Icons -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicon.png" />
+<link rel="shortcut icon" href="/favicon.png" />
+
+  <!-- RSS -->
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
+
+</head>
+
+
+<body class="post">
+
+	<nav class="navbar navbar-dark bg-dark navbar-expand-md ">
+	<div class="container-fluid">
+		
+		<a class="nav-link navbar-brand " href="/"><img src="/favicon.png" width="30" height="30" alt=""> </a>
+		
+
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-toggle" aria-controls="navigation-toggle" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>		
+		
+		<div class="collapse navbar-collapse" id="navigation-toggle">
+			<div class="navbar-nav">
+				
+
+
+
+				
+
+				
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+      <a class="nav-link" href="/about">About</a>
+    
+  
+
+  
+    
+  
+
+  
+
+  
+    
+      <a class="nav-link" href="/repositories">Repositories</a>
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+    
+  
+
+  
+
+  
+
+  
+    
+  
+
+
+				
+
+<li class="nav-item dropdown">
+	<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Categories</a>
+	<ul class="dropdown-menu">
+		
+		
+		
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/Design">Design</a></li>
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/Programming">Programming</a></li>
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/Tips">Tips</a></li>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/summaries">Summaries</a></li>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		<li><a class="dropdown-item " href="/category/tutorials">Tutorials</a></li>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	</ul>
+</li>
+
+				
+				<a class="nav-link" title="Tags" aria-label="Tags" href="/tags">Tags</a>
+				
+				<a class="nav-link" title="Subscribe" aria-label="Subscribe" href="/feed.xml">RSS</a>
+				
+				<span></span>
+				
+			</div>
+		</div>
+	</div>
+</nav>
+	
+	<main class="container py-3">
+			<header class="row py-3">
+		<div class="col">
+			<h1 class="display-1">The Collection</h1>
+		</div>
+	</header>
+		<div class="row">
+	<div class="col">
+		<div class="card-subtitle mb-2 text-muted">
+	
+		<span class="">2020-07-20</span> &bull; 
+		<span class=""><svg height="12" class="octicon octicon-sync" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg> Updated: 2020-08-28</span>
+	
+
+	<span class="post-categories">
+		
+		&bull;
+
+		
+		
+		
+
+		
+		<a href="/category/Tips">Tips</a>
+		
+		
+	</span>
+</div>
+
+
+		<div>
+			<p>During my time on the Internet, I encountered many things. This post is a collection of the cool things. I will probably update it once in a while. Since I am living in Germany, some of the tips may not be useful for everyone. In order of coolness.</p>
+
+<p><!-- more --></p>
+
+<h2 id="web-services">Web Services</h2>
+
+<p><a href="https://uberspace.de">Uberspace</a> is a hosting provider. They offer a shared hosting experience that is a little bit more limited than a root server. However, their support is amazing and it’s a super good place to host for tinkerers and small projects. Highly recommended. Check out my <a href="/category/tutorials.html">Tutorials</a> or the <a href="https://lab.uberspace.de">Uberlab for U7</a> for things you can do on your Uberspace!</p>
+
+<p>Things I am using on Uberspace:</p>
+
+<ul>
+  <li><a href="http://invoiceplane.com">InvoicePlane</a>: Simple invoicing software. Offers sending offers and invoices via email, too!</li>
+  <li><a href="https://matomo.org">Matomao</a>: Analytics software to avoid Google.</li>
+  <li><a href="http://redmine.org">Redmine</a>: Amazing project management solution.</li>
+  <li><a href="http://syncthing.net">Syncthing</a>: File synchronisation alternative.</li>
+</ul>
+
+<p><a href="https://tecspace.de">Tecspace</a> is a hosting provider and domain registrar. I buy and manage my domains through their service. It is extremely cheap, costing only 2,50 EUR per year, if you have 10 or more domains. I love their admin interface. It is simple, behaves like a website should behave (no JavaScript shenanigans) and is very powerful.</p>
+
+<p><a href="https://pinboard.in">Pinboard</a> is a bookmarking service. It’s minimalistic, easy to use and offers an archiving service so you will never lose these good articles on the internet again.</p>
+
+<h2 id="software">Software</h2>
+
+<h3 id="pictures-design-illustrating">Pictures, Design, Illustrating</h3>
+
+<p><a href="https://affinity.serif.com/">Affinity</a> produces <a href="https://affinity.serif.com/en-gb/designer/">Affinity Designer</a> and <a href="https://affinity.serif.com/en-gb/photo/">Affinity Photo</a>. They are competitors to the popular Adobe Photoshop and Illustrator. These two programs are <em>exceptional</em>. You can do basically everything you can do with their Adobe counterparts, but they only cost 55 EUR each. No subscriptions, no recurring fees. The interface is polished and if you are an Adobe user you will be right at home. Quit Adobe today. Don’t let them milk you.</p>
+
+<p><a href="https://www.apollooneapp.com/">Appollo One</a> is a really fast image viewer.</p>
+
+<h3 id="random-apps">Random Apps</h3>
+
+<p><a href="https://sensei.app/">Sensei</a> is a system monitoring app with a nice Mac compliant interface.</p>
+
+<p><a href="http://mactracker.ca/">Mactracker</a> is an app that lists all apple hardware and their specifications. No need to google for these things anymore.</p>
+
+		</div>
+
+		<div class="py-3">
+
+
+
+
+
+<a href="/tags#english"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> English</span></a>
+
+<a href="/tags#collection"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> Collection</span></a>
+
+</div>
+		<section>
+  <h2>Related Posts</h2>
+  <ul>
+    
+      <li>
+        <a href="/2020/08/05/Apple-Colors.html"> Apple Colors in SCSS</a>
+        
+	<span class="badge bg-secondary">2020-08-05</span>
+
+      </li>
+    
+      <li>
+        <a href="/2020/08/04/Ideas.html"> Ideas</a>
+        
+	<span class="badge bg-secondary">2020-08-04</span>
+
+      </li>
+    
+      <li>
+        <a href="/2020/08/02/Strategies-from-the-Happiness-Lab.html"> Strategies from the Happiness Lab</a>
+        
+	<span class="badge bg-secondary">2020-08-02</span>
+
+      </li>
+    
+  </ul>
+</section>
+
+	</div>
+</div>
+
+	</main>
+
+	<footer class="container-fluid py-3">
+	
+	<script src="/assets/js/bootstrap.min.js" crossorigin="anonymous"></script>
+	</footer>
+</body>
+</html>