add mastodon timeline

README.md

@@ -19,3 +19,7 @@ You probably want to run ruby from a version manager like `chruby`, see [here](h
 `bundle install`
 Then
 Use `./run.sh` to do local development of this site
+
+## Past and future inspirations 
+[Blog Microfeatures](https://danilafe.com/blog/blog_microfeatures/)
+[Nice code blocks](https://staniks.github.io/articles/serious-engine-networking-analysis#overview)

_data/navigation.yml

@@ -1,5 +1,5 @@
 - name: Blog
-  link: /
+  link: /blog/
 - name: CV
   link: /cv/
 - name: Thesis

_includes/post_summary.html

@@ -1,25 +1,22 @@
----
-title: Blog
-layout: default
-excerpt: |
-  I'm Tom Hodson. Welcome to my little home on the web! There's a blog, a cv and some projects to look at.
-permalink: /
-redirect_from:
-  - /blog/
-mathjax: false
-img:
-    src: /assets/images/avatar.jpeg
-    alt: A picture of me.
----
-{% for post in site.posts %}
-<article class="h-entry blogroll">
+{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
+{% capture posttime %}{{post.date | date: '%s'}}{% endcapture %}
+
+
+{% if post.path contains '_drafts' or posttime > nowunix %}
+{% assign is_draft = true %}
+{% else %}
+{% assign is_draft = false %}
+{% endif %}
+
+
+<article class="h-entry blogroll {% if is_draft %}draft{%endif%}">
 
 <a class="u-uid u-url" href="{{ post.url }}">
 <figure>
 <img class="u-photo" 
-    src = "{{ post.thumbnail | default: post.image }}"
+    src = "{{ post.thumbnail | default: post.image}}"
     class = "{{ post.image_class }}"
-    alt="{{post.alt}}">
+    alt="{{post.alt | smartify}}">
 </figure>
 </a>
 
@@ -32,5 +29,3 @@ img:
 {% unless forloop.last %}
   <hr class="blogroll">
 {% endunless %}
-
-{% endfor %}

_includes/project_summary.html

@@ -0,0 +1,11 @@
+<article class="h-entry project">
+    <a class="u-uid u-url photo" href="{{ post.url }}">
+    <img class="u-photo {{post.img.class}}" src = "{{post.img.src}}" alt="{{post.img.alt}}">
+    </a>
+
+    <section>
+    <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
+    <!-- <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> -->
+    <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
+    </section>
+</article>

_projects/_readme.md

@@ -0,0 +1,17 @@
+# Notes on how to author the files for this bit
+
+- Create models in fusion 360 (until I get kicked out)
+- create an A3 iso schematic view and export at pdf
+    - A3 landscape
+    - style: visible edges
+
+- use inkscape to isolate the image and save as 500x500px svg "thumbnail.svg"
+- generate a png too 
+
+## Now that fusion has disabled pdf export
+- export to step
+- import to onshape
+- create a drawing
+- use the projection view to get desired iso viewpoint
+- for some reason for onshape I need to remove a bunch of clips from each svg path to make it render properly
+- as above

_projects/usbc_power_station.md

@@ -5,11 +5,11 @@ excerpt: One charging station to rule them all!
 permalink: /projects/usbc_charging_station
 
 img:
-    src: 
+    src: /assets/projects/usbc_power_supply/thumbnail.svg
     alt: 
     class: invertable
 
-social_image: 
+social_image: /assets/projects/usbc_power_supply/thumbnail.png
 model: 
 
 head: |

_sass/base.scss

@@ -10,6 +10,7 @@
 @import "blogroll"; // the summaries of the blogposts
 @import "comments";  //the mastodon comments
 @import "model_viewer"; //Styles for the 3D model viewer
+@import "mastodon_timeline";
 
 // The syntax highlighting css
 // generated with rougify style bw > code_style_bw.scss
@@ -54,6 +55,7 @@ main {
     max-width: 560px;
     margin-left: 240px;
     padding-left: 30px;
+    padding-right: 30px;
     padding-top: 10vh;
     min-height: 100vh;
 
@@ -92,10 +94,10 @@ main :is(p,h1,h2,h3,h4,h5,h6) {
     }
 
 a {
-    text-decoration: none;
+    text-decoration: underline;
     text-underline-offset: 0.25em;
     text-decoration-thickness: 0.5px;
-    color: var(--theme-highlight-color);
+    color: var(--theme-text-color);
 }
 
 header a, nav a {

_sass/blogroll.scss

@@ -15,6 +15,10 @@ hr.blogroll {
     margin-bottom: 1em;
 }
 
+article.draft {
+    opacity: 0.5;
+}
+
 article.blogroll {
     padding-bottom: 0px;
     display: flex;

_sass/mastodon_timeline.scss

@@ -0,0 +1,26 @@
+#mt-container {
+    background-color: transparent;
+    padding: 0;
+
+    .mt-body {
+        padding: 0;
+    }
+    .mt-post {
+        padding-left: 0;
+        padding-right: 0;
+    };
+    .mt-post-avatar, .mt-post-header-user-name {
+        display: none;
+    }
+    .mt-post:hover {
+        cursor: unset;
+        background-color: transparent;
+    }
+    .mt-btn-dark {
+        background-color: var(--theme-bg-color);
+    }
+
+    a {
+        color: var(--theme-highlight-color);
+    }
+}

_sass/projects.scss

@@ -18,7 +18,6 @@ article.project {
         width: unset;
         aspect-ratio: 1 / 1;
         margin-right: 1em;
-        border-radius: 2em;
     }
     figure {
         padding: 0;

blog.md

@@ -0,0 +1,13 @@
+---
+title: Blog
+layout: default
+excerpt: |
+  I'm Tom Hodson. Welcome to my little home on the web! There's a blog, a cv and some projects to look at.
+mathjax: false
+img:
+    src: /assets/images/avatar.jpeg
+    alt: A picture of me.
+---
+{% for post in site.posts %}
+{% include post_summary.html %}
+{% endfor %}

highlights.md

@@ -0,0 +1,55 @@
+---
+title: Blog
+layout: default
+excerpt: |
+  I'm Tom Hodson. Welcome to my little home on the web! There's a blog, a cv and some projects to look at.
+permalink: /highlights
+mathjax: false
+img:
+    src: /assets/images/avatar.jpeg
+    alt: A picture of me.
+permalink: /
+head: |
+    <link rel="stylesheet" href="/node_modules/@idotj/mastodon-embed-timeline/dist/mastodon-timeline.min.css">
+    <script src="/node_modules/@idotj/mastodon-embed-timeline/dist/mastodon-timeline.umd.js"></script>
+
+
+---
+## Posts
+<br>
+{% for post in site.posts limit:5 %}
+{% include post_summary.html %}
+{% endfor %}
+<a href = "/blog/" style="margin:auto;">More Posts</a>
+
+## Projects
+<br>
+{% for post in site.projects limit:5 %}
+{% include project_summary.html %}
+{% endfor %}
+
+<a href = "/projects/" style="margin:auto;">More Projects</a>
+
+## Toots
+<div id="mt-container" class="mt-container">
+  <div class="mt-body" role="feed">
+    <div class="mt-loading-spinner"></div>
+  </div>
+</div>
+
+<script type="module">
+const myTimeline = new MastodonTimeline.Init({
+  instanceUrl: "https://tech.lgbt",
+  timelineType: "profile",
+  userId: "109290417826726461",
+  profileName: "@TomHodson",
+  maxNbPostFetch: "50",
+  maxNbPostShow: "30",
+  hideReblog: true,
+  hideReplies: true,
+  hideCounterBar: true,
+  disableCarousel: true,
+  btnReload: "",
+});
+
+</script>

package.json

@@ -1,8 +1,12 @@
 {
   "dependencies": {
+    "@idotj/mastodon-embed-timeline": "^4.4.2",
     "es-module-shims": "^1.8.1",
     "lil-gui": "^0.19.1",
     "mathjax": "^3.2.2",
     "three": "^0.158.0"
+  },
+  "devDependencies": {
+    "@divriots/jampack": "^0.23.3"
   }
 }

projects.md

@@ -12,15 +12,5 @@ img:
 social_image: /assets/projects/lego_adapters/thumbnail.png
 ---
 {% for post in site.projects %}
-<article class="h-entry project">
-    <a class="u-uid u-url photo" href="{{ post.url }}">
-    <img class="u-photo {{post.img.class}}" src = "{{post.img.src}}" alt="{{post.img.alt}}">
-    </a>
-
-    <section>
-    <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
-    <!-- <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> -->
-    <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
-    </section>
-</article>
+{% include project_summary.html %}
 {% endfor %}