Projects 2021 (#20)

* add shot, allow posts to miss live link

* use http for UCD, hopefully helps with flaky tests on ssl

* add youtube timestamp reddit bot

* add post excerpts

* restyle footer, add page number to pagination

update homepage, add excerpts to projects

* update tests to handle new footer

_data/links.yml

@@ -1,5 +1,6 @@
 # work
-ucd: https://www.cs.ucd.ie
+# issue with ucd ssl cert, use http for now, should redirect
+ucd: http://www.cs.ucd.ie
 nli: https://www.nli.ie
 dri: https://www.dri.ie
 ow:  https://labs.oliverwyman.com
@@ -10,4 +11,5 @@ linkedin: https://www.linkedin.com/in/conor-s-403358106
 stackoverflow: https://stackoverflow.com/users/6305204/con?tab=profile
 
 # credit
-theme: https://twitter.com/michigangraham
+themeGithub: https://github.com/pages-themes/midnight
+themeTwitter: https://twitter.com/michigangraham

_includes/footer.html

@@ -1,5 +1,36 @@
-<div id="footer">
-  <a href="{{ site.data.links.theme }}">
-    <p class="text-tuncate">Theme by mattgraham</p>
-  </a>
-</div>
+
+
+<footer>
+  <div class="container">
+    {% if paginator.total_pages > 1 %}
+    <div class="pagination flex-item">
+      {% if paginator.previous_page %}
+        <a href="{{ paginator.previous_page_path | relative_url }}">&laquo; Prev</a>
+      {% else %}
+        <span>&laquo; Prev</span>
+      {% endif %}
+
+      {% for page in (1..paginator.total_pages) %}
+        {% if page == paginator.page %}
+          <em>{{ page }}</em>
+        {% elsif page == 1 %}
+          <a href="{{ '/projects' | relative_url }}">{{ page }}</a>
+        {% else %}
+          <a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
+        {% endif %}
+      {% endfor %}
+
+      {% if paginator.next_page %}
+        <a href="{{ paginator.next_page_path | relative_url }}">Next &raquo;</a>
+      {% else %}
+        <span>Next &raquo;</span>
+      {% endif %}
+    </div>
+    {% endif %}
+    <div class="fixed" id="credit-footer">
+      <p class="text-tuncate">
+        <a href="{{ site.data.links.themeGithub }}">Theme</a> by <a href="{{ site.data.links.themeTwitter }}">mattgraham</a>
+      </p>
+    </div>
+  </div>
+</footer>

_includes/header.html

@@ -1,4 +1,4 @@
-<div id="header">
+<header id="header">
   <div class="container">
       <div class="col">
         <a href="{{ site.data.links.github }}">
@@ -30,4 +30,4 @@
   <div class="container-sm">
     {% include projects_menu.html %}
   </div>
-</div>
+</header>

_layouts/default.html

@@ -28,14 +28,10 @@
           <h1><a href="/">{{ site.title | default: site.github.repository_name }}</a></h1>
           <hr>
         </div>
-
         {{ content }}
-
-        <div class="push"></div>
-        {% include footer.html %}
       </section>
     </div>
-
+    {% include footer.html %}
 
     {% if site.google_analytics %}
       <script type="text/javascript">

_layouts/post.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<h1>{{ page.title }} 
+<h1>{{ page.title }}
   <span class="back-to-projects">
     <a href="{{'/projects' | relative_url }}">&larr; Back to projects</a>
   </span>
@@ -12,8 +12,10 @@ <h1>{{ page.title }}
 {{content}}
 
 <ul>
-  <li id='live-site-link'><a href="{{ page.live }}">View Site</a></li>  
-  <li id='source-code-link'><a href="{{ page.src }}">View Source Code</a></li>  
+  {% if page.live %}
+  <li id='live-site-link'><a href="{{ page.live }}">View Site</a></li>
+  {% endif %}
+  <li id='source-code-link'><a href="{{ page.src }}">View Source Code</a></li>
 </ul>
 
 <div id="images">

_posts/2020-12-03-shot.md

@@ -0,0 +1,20 @@
+---
+layout: post
+categories: personal
+
+project_title: "shot"
+src: https://github.com/ConorSheehan1/shot
+---
+
+I recently published [shot](https://github.com/ConorSheehan1/shot), which stands for: **S**creenshot **H**elper for **O**SX **T**erminal.  
+It a python CLI that I use day to day to copy / move / rename screenshots and videos.
+I also created a [much smaller bash implementation](https://gist.github.com/ConorSheehan1/2a72b13fa530388dcaec93307f4f7b09) first.
+
+I learned a lot about python packaging from building [osxdocker](/personal/2020/09/21/osxdocker.html), and decided not to publish this package to pypi since it's Mac/OSX specific. Instead I created [a homebrew tap](https://github.com/ConorSheehan1/homebrew-ConorSheehan1) to make it easy to install on mac, like this:  
+* `brew install conorsheehan1/conorsheehan1/shot`
+
+It can still be installed via pip, just not from pypi. It can be pip installed from github like this:  
+* `pip install https://github.com/ConorSheehan1/shot/releases/latest/download/shot.tar.gz`
+
+All installation options are listed at [https://github.com/ConorSheehan1/shot#install](https://github.com/ConorSheehan1/shot#install)  
+I've found it fairly useful and I hope someone else will too.

_posts/2021-09-16-youtube-timestamp-reddit-bot.md

@@ -0,0 +1,46 @@
+---
+layout: post
+categories: personal
+
+project_title: "YouTubeTimestampRedditBot"
+src: https://github.com/ConorSheehan1/YouTubeTimestampRedditBot
+live: https://www.reddit.com/user/YouTubeTimestampBot
+---
+
+I recently created [YouTubeTimestampRedditBot](https://github.com/ConorSheehan1/YouTubeTimestampRedditBot). It's a bot that checks reddit for posts which:
+1. link to YouTube
+1. reference a timestamp in the title
+1. don't embed the timestamp in the link
+
+It comments on those posts with an updated link that has the timestamp embedded, hopefully saving people precious milliseconds navigating to the time in the video.
+
+## Bot ranking
+While building this bot I learned that there are multiple bot ranking pages for reddit.
+1. [https://botrank.pastimes.eu](https://botrank.pastimes.eu/)
+1. [https://botranks.com](https://botranks.com/?bot=YouTubeTimestampBot)
+
+I prefer [botranks.com](https://botranks.com/?bot=YouTubeTimestampBot) because it's [open source on github](https://github.com/Brandawg93/Botranks) and has [my bot](https://botranks.com/?bot=YouTubeTimestampBot) listed!
+
+About a month into running my bot I found that there's already a similar bot called [reddit-timestamp-bot](https://github.com/ankitgyawali/reddit-timestamp-bot). 
+It checks for timestamps in comments rather than titles, and has a very different implementation, so I'm going to keep mine running for now.
+
+## Hosting (heroku)
+I learned a lot about heroku while trying to host this bot, such as the fact that the free tier gives you [550 dyno hours per month](https://devcenter.heroku.com/articles/free-dyno-hours#free-dyno-hour-pool). Given a month with 31 days has 744 hours, this leaves me short about 194 hours or ~8 days per month.
+I also learned heroku doesn't accept revolute, so I can't get the extra 450 dyno hours by adding a payment method. And that I can't set up addons like heroku cron without adding a payment method, so I just have to deal with the ~8 days downtime per month.
+
+## Reddit
+I got surprisingly positive responses on reddit.
+>  Wow I am shocked. Someone made an actual fucking useful bot that isnt posting some stupid bullshit in shakespeare or yoda speak or giving me a pointless fact barely related to my comment.
+\- [u/The_lolrus_](https://old.reddit.com/r/TheDickShow/comments/qglluu/1700_video_glitch_just_moments_before_1st_smurf/hiao375/)
+
+> Wow! You are an intelligent bot! 🤖 
+\- [u/feeedi](https://old.reddit.com/r/donorconception/comments/q9tzkp/to_understand_what_epigenetics_is_watch_this/hgyk21r/)
+
+> Good bot, its sadly not possible to make timestamps on phone
+\- [u/RayliOtter](https://old.reddit.com/r/ADCMains/comments/q3eer6/at_525_they_talk_about_lethal_tempo_update_what/hfr660a/)
+
+The last comment about not being able to make timestamps on a phone easily is one of the main reasons I made the bot.
+I remember there used to be an option to include the current time when sharing a YouTube video on any device, but that feature disappeared a while ago.
+
+Of course there were a few bugs in the bot early on. And there's probably still more. But generally I'm happy with the bot for now and I plan to maintain it.
+I hope it saves you precious milliseconds.

_scss/_footer.scss

@@ -0,0 +1,32 @@
+
+footer {
+  @include headerFooter;
+  position: fixed;
+  bottom: 0;
+  height: 50px;
+
+  .container {
+    display: flex;
+  }
+  .fixed {
+    width: 200px;
+  }
+  .flex-item {
+    flex-grow: 1;
+  }
+
+  .pagination {
+    text-align: center;
+    list-style: none;
+    a, span {
+      padding: 0.5em;
+    }
+  }
+
+  #credit-footer {
+    margin-left: auto;
+    order: 2;
+  }
+}
+
+

_scss/_header.scss

@@ -1,15 +1,12 @@
 #header {
-  width:100%;
   height: $header_height;
   margin: 0 auto;
   padding-top: 10px;
   z-index: 100;
   position:fixed;
   top: 0;
 
-  background: url(../images/nav-bg.gif) #353535; 
-  border-top: 4px solid #434343; 
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+  @include headerFooter;
 
   // center svgs and text in header
   .header-icon {

_scss/_mixins.scss

@@ -25,3 +25,10 @@
   margin: 0 auto;
   max-width: $wide_screen;
 }
+
+@mixin headerFooter {
+  width:100%;
+  background: url(../images/nav-bg.gif) $brand_header_footer_background;
+  border-top: 4px solid #434343;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+}

_scss/_vars.scss

@@ -1,5 +1,7 @@
-// colors 
+// colors
 $brand_primary: #ffcc00;
+$brand_background: #373737;
+$brand_header_footer_background: #353535;
 
 // head height vars
 $header_height: 90px;

assets/css/style.scss

@@ -8,6 +8,7 @@
 @import 'mixins';
 @import 'mobile';
 @import 'header';
+@import 'footer';
 
 section #title {
   margin: 0;
@@ -28,13 +29,6 @@ section #title {
   /* But also accounting for potential margin-bottom of last child */
   margin-bottom: -50px;
 }
-.push {
-  height: 50px;
-}
-#footer {
-  height: 50px;
-  float:right,
-}
 
 // overrides for jstree style
 .jstree-default {
@@ -57,18 +51,13 @@ section #title {
   padding-left: 30px;
 }
 
-ul.pager { 
-  text-align: center; 
-  list-style: none; 
-  li {
-    display: inline;
-    border: 1px solid black; 
-    padding: 10px; 
-    margin: 5px;
-  }
-}
-
 .post-heading {
   margin: 0;
   margin-top: 20px;
 }
+
+.excerpt {
+  font-size: 15px;
+  opacity: 70%;
+  margin-top: 0.5em;
+}

index.md

@@ -16,13 +16,14 @@ layout: default
 # What I can do
 
 * Full Stack Web Development
-* Data Science
 * DevOps
+* Data Science
 
 
 # What I'm interested in
 
 * Python
 * Ruby
+* JavaScript
 * Data Science
 * Web Development

projects/index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-pagination: 
+pagination:
   enabled: true
 ---
 
@@ -11,26 +11,13 @@ <h1 class="page-heading">Projects</h1>
       <li>
         <h2 class='post-heading'>
           <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+          <div class="excerpt">{{ post.excerpt }}</div>
         </h2>
         <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
         <div class='category-badge'>Categories: <span class="badge"> {{ post.categories }} </span></div>
       </li>
     {% endfor %}
   </ul>
-
-  <!-- next prev nav -->
-  {% if paginator.total_pages > 1 %}
-  <ul class="pager">
-      {% if paginator.previous_page %}
-      <li class="previous">
-          <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Newer Projects</a>
-      </li>
-      {% endif %}
-      {% if paginator.next_page %}
-      <li class="next">
-          <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Older Projects &rarr;</a>
-      </li>
-      {% endif %}
-  </ul>
-  {% endif %}
 </div>
+
+

spec/features/pages/project_page.rb

@@ -18,8 +18,4 @@
   it 'should have a source code link' do
     expect(page).to have_css('#source-code-link')
   end
-  # this may change: support projetcts without live site links?
-  it 'should have a live site link' do
-    expect(page).to have_css('#live-site-link')
-  end
 end

spec/spec_helper.rb

@@ -16,7 +16,8 @@
 
   config.before :all do
     @home_page_regex = %r{http://127\.0\.0\.1:(\d+)/}
-    @theme_link = 'https://twitter.com/michigangraham'
+    @theme_github_link = 'https://github.com/pages-themes/midnight'
+    @theme_twitter_link = 'https://twitter.com/michigangraham'
   end
 
   config.mock_with :rspec do |mocks|

spec/support/shared_examples.rb

@@ -17,12 +17,10 @@
   end
 
   it 'should have a footer with the theme link' do
-    # footer link is in div, in anchor, in paragraph
-    # select paragraph by text, then get link as parent
-    theme_link_xpath = "//div[@id='footer']//a" \
-      "/p[text()='Theme by mattgraham']/parent::*"
-    footer_link = page.find(:xpath, theme_link_xpath)
-    expect(footer_link[:href]).to eq @theme_link
+    theme_link_xpath = "//div[@id='credit-footer']//a"
+    footer_links = page.find_all(:xpath, theme_link_xpath)
+    expect(footer_links[0][:href]).to eq @theme_github_link
+    expect(footer_links[1][:href]).to eq @theme_twitter_link
   end
 
   it 'should have a projects search option' do