jscom_ice 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 425c30a81e6cecf8d4b51d8c5fcee33eeace881a419d41c8560296afd1910329
-  data.tar.gz: 3cb1ca9d82a1a83397e8a47bec4ee611e0da624242dcfce91ba5b10cb798c459
+  metadata.gz: d4e9f9214e09092b7a94a193b13bde713f0fc48d7b8643badfcd535330c91d7c
+  data.tar.gz: a6eba41280d49bf1901052ae3fef27216f1ab6862b3b872221c52be69a2a727b
 SHA512:
-  metadata.gz: 3550e54a530e1f045b8e080d8f956b05b726f03e22bfb227655b07ef3d73bb43baabe39c2d2c19472e649dee62d8c87a459d35d5a9342c1894f06542acf2aa38
-  data.tar.gz: f352266a8c0a768917f89c2b156be610f42eaf258006880b1d419b80ac68ec996edce7539ac97677aa40e0ed7adca7ad9eeee5980b8dc97beaec676cdfe75db8
+  metadata.gz: dd4b36109e0758c3c56562c64935931e8cac11dd9fa97b5655307f735f32702e69f85e607312cd23e69e158d5ce826759dbf1a4755c66bff6f1687d814a60780
+  data.tar.gz: feaf2f875112cc7745daa7ac505e5c31eb69bc06ab3f73d188c6e67cc34e5dfb79f750d0902bf5ef3be38e054418496ee0bc6c6ba163b5371a2081c4aa14fb22

data/README.md

@@ -1,2 +1,18 @@
 # jscom-ice
-Theme for johnsosoka.com
+
+A Jekyll theme for (johnsosoka.com)[https://johnsosoka.com]
+
+**NOTE:** This repository and theme are open source, but not meant for public consumption. If you would like to use this 
+theme, please fork the repository and make any changes you would like.
+
+## Usage
+
+1. Download the gem from github
+2. manually install the gem `$ gem install ./jscom-ice-0.0.1.gem`
+
+## Local Development
+
+1. Make changes to the theme
+2. build the gem `$ gem build jscom_ice_theme.gemspec`
+3. Install the gem `$ gem install ./jscom-ice-0.0.1.gem`
+4. Update the Gemfile to use the local gem

data/_includes/carousel.html

@@ -0,0 +1,15 @@
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+    <div class="carousel-inner">
+        {% for image in include.images %}
+        <div class="carousel-item {% if forloop.first %}active{% endif %}" data-interval="4000">
+            <img class="d-block w-100" src="{{ image }}" alt="Slide {{ forloop.index }}">
+        </div>
+        {% endfor %}
+    </div>
+    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    </a>
+    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    </a>
+</div>

data/_includes/contact-me-form.html

@@ -0,0 +1,64 @@
+<div class="container-fluid mt-5">
+  <form id="contactMeForm">
+      <!-- Alert on Success/Failure -->
+    <div id="notification" class="alert mt-3" role="alert" style="display: none;"></div>
+    <div class="form-group">
+      <input type="text" class="form-control" id="name" name="user_name" placeholder="Name">
+    </div>
+    <div class="form-group">
+      <input type="email" class="form-control" id="mail" name="user_email" placeholder="Email">
+    </div>
+    <div class="form-group">
+      <textarea class="form-control" id="msg" name="user_message" placeholder="Message"></textarea>
+    </div>
+    <button type="button" class="btn btn-primary btn-block" id="contact_submit">Send your message</button>
+  </form>
+</div>
+
+<!-- TODO - this isn't working when using the scripts.html include ... -->
+<script src="/assets/js/jquery-3.7.0.min.js"></script>
+
+<script>
+  function submitContact(payload) {
+    $.ajax({
+      url : "{{ site.contact.api.url }}",
+      type: "POST",
+      dataType: "json",
+      data: payload,
+      success: function(data){
+        console.log(data);
+        $('#notification').addClass('alert-success').text('Message Sent!').show();
+        clearForm();
+      },
+      error: function(){
+        console.log("Error in the request");
+        $('#notification').addClass('alert-danger').text('Something went wrong :(').show();
+      }
+    });
+  }
+
+  function clearForm() {
+    $('#name').val('');
+    $('#mail').val('');
+    $('#msg').val('');
+  }
+
+
+  function buildPayload() {
+    var contactMePayload = {
+      contact_name : $('#name').val(),
+      contact_email : $('#mail').val(),
+      contact_message : $('#msg').val()
+    };
+
+    return JSON.stringify(contactMePayload);
+  }
+
+  $('#contact_submit').click(function() {
+    var payload = buildPayload();
+    console.log(payload);
+    submitContact(payload);
+  });
+</script>
+
+<!-- TODO - this isn't working with my self hosted jquery?? -->

data/_includes/embed-audio.html

@@ -0,0 +1,4 @@
+<audio controls>
+    <source src="{{ include.src }}" type="audio/mpeg">
+    Your browser does not support the audio element.
+</audio>

data/_includes/footer.html

@@ -0,0 +1,11 @@
+<footer class="footer bg-transparent mt-auto py-3 text-light">
+  <div class="container text-center">
+    {% for link in site.data.footer_links %}
+    <a class="mb-1 mx-2 footer_item" href="{{ link.url }}">{{ link.title }}</a>
+    {% endfor %}
+  </div>
+  <small class="copyright-text">
+    John Sosoka<br>
+    &copy; {{site.site_est_year}} - {{ site.time | date: "%Y" }}
+  </small>
+</footer>

data/_includes/header.html

@@ -0,0 +1,165 @@
+<head prefix="og: http://ogp.me/ns#">
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="application-name" content="{{ site.title }}" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
+  <meta name="apple-mobile-web-app-title" content="{{ site.title }}" />
+  <title>
+    {% if page.title %}{{ page.title | escape }} - {{ site.title }}{% else %}{{
+    site.title | escape }}{% endif %}
+  </title>
+  <link
+    rel="alternate"
+    href="{{
+      page.url | remove: 'index.html' | remove: '.html' | absolute_url
+    }}"
+    hreflang="{{ site.lang }}"
+  />
+  <link
+    rel="canonical"
+    href="{{
+      page.url  | remove: 'index.html' | remove: '.html' | absolute_url
+    }}"
+  />
+  {% if paginator.previous_page %}
+  <link
+    rel="prev"
+    href="{{
+      paginator.previous_page_path
+        | remove: 'index.html'
+        | remove: '.html'
+    }}"
+  />
+  {% endif %} {% if paginator.next_page %}
+  <link
+    rel="next"
+    href="{{
+      paginator.next_page_path
+        | remove: 'index.html'
+        | remove: '.html'
+    }}"
+  />
+  {% endif %}
+  <meta
+    name="description"
+    content="{{
+      page.description
+        | default: site.description
+        | strip_html
+        | normalize_whitespace
+        | truncate: 200
+        | escape
+    }}"
+  />
+  <meta name="referrer" content="no-referrer-when-downgrade" />
+  <meta
+    property="og:site_name"
+    content="{% if page.title %}{{ page.title | escape }} | {{
+      site.author.name
+    }}{% else %}{{ site.title | escape }}{% endif %}"
+  />
+  <meta
+    property="og:title"
+    content="{% if page.title %}{{ page.title | escape }} | {{
+      site.author.name
+    }}{% else %}{{ site.title | escape }}{% endif %}"
+  />
+  {% if page.location %}
+  <meta property="og:type" content="article" />
+  <meta
+    property="article:publisher"
+    content="https://web.facebook.com/{{ site.author.facebook }}"
+  />
+  {% else %}
+  <meta property="og:type" content="website" />
+  {% endif %}
+  <meta
+    property="og:url"
+    content="{{
+      page.url | remove: 'index.html' | remove: '.html' | absolute_url
+    }}"
+  />
+  <meta
+    property="og:description"
+    content="{{
+      page.description
+        | default: site.description
+        | strip_html
+        | normalize_whitespace
+        | truncate: 200
+        | escape
+    }}"
+  />
+  {% if page.image %}
+  <meta property="og:image" content="{{ page.image | absolute_url }}" />
+  {% else %}
+  <meta property="og:image" content="{{ site.og_image | absolute_url }}" />
+  {% endif %}
+  <meta property="og:image:width" content="640" />
+  <meta property="og:image:height" content="640" />
+  <meta name="twitter:card" content="summary" />
+  <meta
+    name="twitter:title"
+    content="{% if page.title %}{{ page.title | escape }} | {{
+      site.author.twitter
+    }}{% else %}{{ site.title | escape }}{% endif %}"
+  />
+  <meta
+    name="twitter:url"
+    content="{{
+      page.url  | remove: 'index.html' | remove: '.html' | absolute_url
+    }}"
+  />
+  <meta name="twitter:site" content="@{{ site.author.twitter }}" />
+  <meta name="twitter:creator" content="@{{ site.author.twitter }}" />
+  <meta
+    name="twitter:description"
+    content="{{
+      page.description
+        | default: site.description
+        | strip_html
+        | normalize_whitespace
+        | truncate: 200
+        | escape
+    }}"
+  />
+  {% if page.image %}
+  <meta name="twitter:image" content="{{ page.image | absolute_url }}" />
+  {% else %}
+  <meta name="twitter:image" content="{{ site.image | absolute_url }}" />
+  {% endif %} {% feed_meta %}
+  <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="https://media.johnsosoka.com/old/favicons/apple-touch-icon.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="https://media.johnsosoka.com/assets/favicons/favicon-32x32.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="https://media.johnsosoka.com/assets/favicons/favicon-16x16.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="https://media.johnsosoka.com/old/favicons/safari-pinned-tab.png"
+  />
+  <meta name="apple-mobile-web-app-title" content="johnsosoka.com" />
+  <meta name="application-name" content="johnsosoka.com" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#2c2c2c" />
+  <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="/assets/css/style.css" />
+
+
+</head>

data/_includes/john_landing.html

@@ -0,0 +1,9 @@
+<div class="john-landing">
+  <img
+    class="author-avatar"
+    src="{{ site.author.avatar }}"
+    alt="{{ site.author.username }}"
+  />
+  <h2 class="author-name">{{ site.author.name }}</h2>
+  <p class="author-bio">{{ site.author.bio }}</p>
+</div>

data/_includes/navbar.html

@@ -0,0 +1,47 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
+  <a class="navbar-brand" href="#"></a>
+  <button class="navbar-toggler"
+          type="button" data-toggle="collapse"
+          data-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+    <ul class="navbar-nav">
+      {%- assign url = page.url -%}
+      {%- assign menus = site.data.menus -%}
+      {%- if menus %}
+      {%- for menu in menus -%}
+      {%- if menu.subitems -%}
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          {{ menu.title }}
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          {%- for subitem in menu.subitems -%}
+          <a class="dropdown-item" href="{{ subitem.url }}">{{ subitem.title }}</a>
+          {%- endfor -%}
+        </div>
+      </li>
+      {%- else -%}
+      <li class="nav-item {% if url == menu.url %}active{% endif %}">
+        <a class="nav-link" href="{{ menu.url }}">{{ menu.title }}</a>
+      </li>
+      {%- endif -%}
+      {%- endfor -%}
+      {%- endif -%}
+      <li class="nav-item">
+        <a class="nav-link" href="/feed.xml">
+          <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 512 512" fill="#ED812E">
+            <title>RSS</title>
+            <path d="M108.56,342.78a60.34,60.34,0,1,0,60.56,60.44A60.63,60.63,0,0,0,108.56,342.78Z"/>
+            <path d="M48,186.67v86.55c52,0,101.94,15.39,138.67,52.11s52,86.56,52,138.67h86.66C325.33,312.44,199.67,186.67,48,186.67Z"/>
+            <path d="M48,48v86.56c185.25,0,329.22,144.08,329.22,329.44H464C464,234.66,277.67,48,48,48Z"/>
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </div>
+</nav>

data/_includes/post_navigation.html

@@ -0,0 +1,20 @@
+<div class="post-navigation">
+  <div class="row">
+    <div class="col text-left">
+      {% if page.previous %}
+      <a class="post-nav-item post-nav-prev" href="{{ page.previous | relative_url }}">
+        <div class="nav-arrow">Previous</div>
+        <span class="post-title">{{ page.previous.title }}</span>
+      </a>
+      {% endif %}
+    </div>
+    <div class="col text-right">
+      {% if page.next %}
+      <a class="post-nav-item post-nav-next" href="{{ page.next | relative_url }}">
+        <div class="nav-arrow">Next</div>
+        <span class="post-title">{{ page.next.title }}</span>
+      </a>
+      {% endif %}
+    </div>
+  </div>
+</div>

data/_includes/posts.html

@@ -0,0 +1,33 @@
+<!--
+    This include will display recent posts of a specified category & number..
+
+    Parameters:
+    - category: The category of the posts to display.
+    - post_display_limit: The maximum number of posts to display.
+    - post_collection_title: The title to display above the list of posts.
+
+    Example Usage:
+    {% raw %}
+    {% include posts.html category="blog" post_display_limit=5 post_collection_title="Recent Blog Posts" %}
+    {% endraw %}
+
+    The above example would display the 5 most recent posts from the 'blog' category, with the title 'Recent Blog Posts'
+    above the list.
+
+-->
+
+<div class="posts-wrapper">
+<!--    <h3 class="posts-item-note" aria-label="Recent Posts">{{ include.post_collection_title }}</h3>-->
+    {%- for post in site.categories[include.category] limit: include.post_display_limit -%}
+    <article class="post-item row">
+        <div class="col-md-3">
+            <span class="post-item-date">{{ post.date | date: "%b %d, %Y" }}</span>
+        </div>
+        <div class="col-md-9">
+            <span class="post-item-title">
+                <a href="{{ post.url }}">{{ post.title | escape }}</a>
+            </span>
+        </div>
+    </article>
+    {%- endfor -%}
+</div>

data/_includes/scripts.html

@@ -0,0 +1,16 @@
+<!--
+
+Scripts that are loaded throughout the website
+
+-->
+
+<script src="/assets/js/jquery-3.7.0.min.js" defer="defer"></script>
+
+<script src="/assets/js/bootstrap.min.js" defer="defer"></script>
+
+<script src="/assets/js/popper.min.js"></script>
+
+<script src="/assets/js/bootstrap.js"></script>
+
+<!-- TODO contact form page & move this to more local include? (it's only needed on 1 page)-->
+<!--<script src="/assets/js/contact.js"></script>-->

data/_includes/tags.html

@@ -0,0 +1,22 @@
+<div class="archive-tags">
+    <a class="tag-item" href="#">all</a>
+    {%- for tag in site.tags -%}
+    {% capture name %}{{ tag | first }}{% endcapture %}
+    <a class="tag-item" href="#{{name}}">{{ name }}</a>
+    {%- endfor -%}
+</div>
+
+<!-- TODO Dates / Titles aren't aligned -->
+
+{%- for tag in site.tags -%}
+{%- capture name -%}{{ tag | first }}{%- endcapture -%}
+<h2 id="{{ name }}">{{ name | upcase }}</h2>
+{%- for post in site.tags[name] -%}
+<article class="post-item" id="results-container">
+    <span class="post-item-date">{{ post.date | date: "%b %d, %Y" }}</span>
+    <h3 class="post-item-title">
+        <a href="{{ post.url }}">{{ post.title | escape }}</a>
+    </h3>
+</article>
+{%- endfor -%}
+{%- endfor -%}

data/_includes/yearly_content.html

@@ -0,0 +1,19 @@
+<div class="posts-wrapper">
+    {%- for post in site.posts -%}
+    {%- capture current_year -%}{{ post.date | date: "%Y" }}{%- endcapture -%}
+    {%- unless current_year == previous_year -%}
+    <h1 class="posts-item-note" aria-label="Posts from {{ current_year }}">{{ current_year }}</h1>
+    {%- assign previous_year = current_year -%}
+    {%- endunless -%}
+    <article class="post-item row">
+        <div class="col-md-3">
+            <span class="post-item-date">{{ post.date | date: "%b %d, %Y" }}</span>
+        </div>
+        <div class="col-md-9">
+          <span class="post-item-title">
+              <a href="{{ post.url }}">{{ post.title | escape }}</a>
+          </span>
+        </div>
+    </article>
+    {%- endfor -%}
+</div>

data/_layouts/default.html

@@ -0,0 +1,38 @@
+---
+---
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: en }}" class="wrapper-2">
+<head>
+    <meta charset="UTF-8">
+    <title>{{ page.title }}</title>
+</head>
+{% include header.html %}
+<body>
+<!-- Shared/Common Styles -->
+<div class="container">
+    <header class="header row justify-content-center">
+        <div class="col-lg-8">
+            <!-- Site Navigation -->
+            {% include navbar.html %}
+        </div>
+    </header>
+
+    <main class="body row justify-content-center flex-grow-1">
+        <div class="col-lg-8">
+            <!-- Page Content -->
+            {{ content }}
+        </div>
+    </main>
+
+    <footer class="footer row justify-content-center">
+        <div class="col-lg-8">
+            <!-- Footer content -->
+            {% include footer.html %}
+        </div>
+    </footer>
+</div>
+
+<!-- Shared/Common Scripts -->
+{% include scripts.html %}
+</body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<div class="wrapper home">
+    <main class="page-content d-flex justify-content-center align-items-center" aria-label="Content">
+        <div class="text-left">
+            {% include john_landing.html %}
+            {{ content }}
+        </div>
+    </main>
+</div>
+

data/_layouts/lore.html

@@ -0,0 +1,19 @@
+---
+layout: default
+---
+
+<body class="notransition">
+<div class="wrapper">
+    <header class="header">
+        <h1 class="header-title center" itemprop="headline">{{ page.title | escape }}.</h1>
+    </header>
+    <main class="page-content" aria-label="Content">
+        {{ content }}
+        <script>
+            document.write('<a href="' + document.referrer + '">{{ site.lore_go_back_text }}</a>');
+        </script>
+    </main>
+
+</div>
+</body>
+

data/_layouts/page.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<body class="notransition">
+
+  <div class="wrapper page">
+    <header class="header">
+      <h1 class="header-title center" itemprop="headline">{{ page.title | escape }}.</h1>
+    </header>
+    <main class="flex-grow-1 page-content" aria-label="Content">
+      {{ content }}
+    </main>
+  </div>
+</body>

data/_layouts/post.html

@@ -0,0 +1,48 @@
+---
+layout: default
+---
+
+<body class="notransition">
+
+<div class="wrapper post">
+    <header class="header">
+        {% if page.tags and page.tags != empty %}
+        <div class="tags">
+            {% assign tags = page.tags %}
+            <span itemprop="keywords">
+              {% for tag in tags %}
+              <a class="tag"
+                 href="/tags/#{{tag | downcase | slugify}}">{{tag | upcase }}</a>{% unless forloop.last %},{% endunless %}
+              {% endfor %}
+            </span>
+        </div>
+        {% endif %}
+        <h1 class="header-title text-left display-12" itemprop="headline">{{ page.title | escape }}.</h1>
+    </header>
+
+    <div class="header-subtitle">
+        <div class="row">
+            <div class="col text-right">
+                <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+                    <span itemprop="name">{{ site.author.name }}</span>
+                </span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col text-right">
+                <span itemprop="publishDate" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+                    {{ page.date | date: "%b %d, %Y" }}
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <main class="flex-grow-1 page-content" aria-label="Content">
+        {{ content }}
+    </main>
+
+
+</div>
+{% include post_navigation.html %}
+</body>
+