Heading modifications and minor appreace changes

Meetup related changes can now be donw off heading.json
prettier.rc setting to 100 lines but index.html left as is to avoid commit pollution
Graphic and Stream icons sizes updated

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .sass-cache
 .jekyll-cache
+.vscode
 _site
 Gemfile.lock

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "bracketSpacing": false
-}
+  "bracketSpacing": false,
+  "printWidth": 100
+}

_data/content.json

@@ -71,7 +71,7 @@
             "author": "Vadim @streamich Dalecky",
             "url": "https://jsonjoy.com/blog/list-crdt-benchmarks",
             "icon": "https://appsets.jsonjoy.com/branding/logos/64x64-fitted.png"
-          },
+          }
         ]
       },
       {

_data/heading.json

@@ -0,0 +1,15 @@
+{
+  "lofi_discord": "https://discord.gg/lfwdev",
+  "meetup": {
+    "date": "Tuesday September 26, 2023 @ 11AM EST",
+    "graphic": "/assets/images/meetup9.png",
+    "discord_link": "https://discord.gg/d7sgWYWkgp?event=1171500361979269251",
+    "youtube_link": "https://youtube.com/live/66WQQFGB6h8?feature=share",
+    "calendar_ics": "/assets/LoFi_Meetup.ics",
+    "calendar_icon": "/assets/images/Oct31.png",
+    "gcal_link": "https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=MnZsazRqcmplOGI1bDZ1dGppZTUxNGEyYzkgZjgwNGE4ZjU3MGNiZThiOWNmZDk1MTg3MzJmMjcyM2E1MzcxMWEyMTc1OTYyZTkwZDU4NTgxN2MzYWNlMjllM0Bn&tmsrc=f804a8f570cbe8b9cfd9518732f2723a53711a2175962e90d585817c3ace29e3%40group.calendar.google.com",
+    "youtube_icon": "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
+    "gcal_icon": "https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_Calendar_icon_%282020%29.svg"
+  },
+  "lofi_playlist": "https://www.youtube.com/playlist?list=PLTbD2QA-VMnXFsLbuPGz1H-Najv9MD2-H"
+}

_includes/heading.html

@@ -0,0 +1,27 @@
+<aside>
+  {% assign info = site.data.heading %} {% assign meetup = site.data.heading.meetup %}
+  <div class="heading">
+    Join our
+    <a class="noUnderline" href="{{info.lofi_discord}}" target="_blank">
+      <img class="discord" src="/assets/images/discord.svg" />
+    </a>
+    community and attend the
+    <a href="{{meetup.discord_link}}" target="_blank">next meetup</a>
+  </div>
+  <a href="{{meetup.discord_link}}" target="_blank">
+    <img class="feature" src="{{meetup.graphic}}" />
+  </a>
+  {{meetup.date}}
+  <br />
+  <a class="icons" href="{{meetup.calendar_ics}}" download>
+    <img class="icons" src="{{info.meetup.calendar_icon}}" />
+  </a>
+  <a class="icons" target="_blank" href="{{meetup.youtube_link}}">
+    <img class="icons" src="{{meetup.youtube_icon}}" />
+  </a>
+  <a class="icons" target="_blank" href="{{meetup.gcal_link}}">
+    <img class="icons" src="{{meetup.gcal_icon}}" />
+  </a>
+  <br />
+  <a href="{{info.lofi_playlist}}" target="_blank">Catch up on the previous talks</a>
+</aside>

assets/css/main.scss

@@ -8,7 +8,7 @@ $font-weight: 400;
 
 @font-face {
   font-family: Archivo;
-  src: url(/assets/fonts/archivo.woff2) format("woff2");
+  src: url(/assets/fonts/archivo.woff2) format('woff2');
 }
 
 body {
@@ -38,7 +38,7 @@ footer {
   position: relative;
   padding: 1rem 0 2rem;
   &::before {
-    content: "";
+    content: '';
     background: $accent;
     position: absolute;
     width: 100%;
@@ -85,20 +85,46 @@ aside {
   a {
     text-decoration: underline;
   }
+  a.noUnderline {
+    text-decoration: none;
+  }
+  a.icons {
+    text-decoration: none;
+    padding: 0 1rem;
+  }
   div.heading {
     margin: -1rem 0 1rem;
   }
+  img.icons {
+    display: inline;
+    height: 1.6rem;
+    vertical-align: middle;
+    padding: 0.4rem 0;
+  }
+  img.icons:hover {
+    transform: scale(1.05);
+  }
   img.discord {
     display: inline;
     height: 1.4rem;
     vertical-align: middle;
   }
+  img.discord:hover {
+    transform: scale(1.05);
+  }
   img.feature {
+    @media (min-width: 768px) {
+      max-width: 36rem;
+    }
     max-width: 22rem;
     display: block;
     margin: 0 auto 1rem;
     border: 1px solid white;
-    box-shadow: 0 0 2rem $accent;
+    box-shadow: 0 0 1.6rem rgba(58, 25, 25, 0.4);
+  }
+  img.feature:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 1.6rem $accent;
   }
 }
 

index.html

@@ -9,34 +9,8 @@
   users own their data?
   <b>Welcome to the world of local-first web&nbsp;development.</b>
 </summary>
-<aside>
-  <div class="heading">
-    Join our
-    <a href="https://discord.gg/lfwdev" target="_blank"><img class="discord"
-      src="/assets/images/discord.svg" /></a>
-    community and attend
-    <a href="https://discord.gg/UTQ5WQzASF?event=1156944839540232334"
-    target="_blank">the next meetup</a>
-    </a>
-  </div>
-  <a href="https://discord.gg/UTQ5WQzASF?event=1156944839540232334"
-    target="_blank"><img class="feature" src="/assets/images/meetup9.png" />
-  </a>
-  Tuesday September 26, 2023 @ 11AM EST
-  <br/>
-  <a href="/assets/LoFi_Meetup.ics" download><img class="discord" src="/assets/images/Oct31.png" /></a>
-  <a target="_blank"
-    href="https://youtube.com/live/66WQQFGB6h8?feature=share ">
-    <img class="discord"
-      src="https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg"></a>
-  <a target="_blank"
-    href="https://calendar.google.com/calendar/event?action=TEMPLATE&amp;tmeid=MnZsazRqcmplOGI1bDZ1dGppZTUxNGEyYzkgZjgwNGE4ZjU3MGNiZThiOWNmZDk1MTg3MzJmMjcyM2E1MzcxMWEyMTc1OTYyZTkwZDU4NTgxN2MzYWNlMjllM0Bn&amp;tmsrc=f804a8f570cbe8b9cfd9518732f2723a53711a2175962e90d585817c3ace29e3%40group.calendar.google.com">
-    <img class="discord"
-      src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_Calendar_icon_%282020%29.svg"></a>
-  <br/>
-  <a href="https://www.youtube.com/playlist?list=PLTbD2QA-VMnXFsLbuPGz1H-Najv9MD2-H"
-    target="_blank">Catch up on the previous talks</a>
-</aside>
+{% include heading.html %}
+
 <main>
   {%for group in site.data.content%}
   <h2><em>{{group.index}}.</em> {{group.title}}</h2>