bitbadger.solutions-theme/theme/solution-page.liquid

<h1 class="solution-header">
  {{ page.title }}<br>
  <small><small>
    {%- assign url     = page.metadata | value: "url" -%}
    {%- assign no_link = page.metadata | value: "no_link" -%}
    {%- assign archive = page.metadata | where: "name", "archive_url" | size -%}
    {% if no_link == "true" -%}
      {{ url }}
    {%- else -%}
      <a href="{{ url }}" target="_blank" rel="noopener">{{ url }}</a>
    {%- endif %}
    {% if archive > 0 -%}
      &nbsp;&nbsp;
      <a href="{{ page.metadata | value: "archive_url" }}" target="_blank" rel="noopener"><small>(Archive)</small></a>
    {%- endif %}
  </small></small>
</h1>
<div class="app-info">
  <article class="content">
    <aside>
      {%- capture screen_url %}screenshots/{{ page.permalink | split: "/" | last }}.png{% endcapture -%}
      <img src="{{ screen_url | theme_asset }}" alt="Screen shot of {{ page.title | escape }}">
    </aside>
    {{ page.text }}
    {%- assign curr_tech  = page.metadata | where: "name", "tech" -%}
    {%- assign past_tech  = page.metadata | where: "name", "past_tech" -%}
    {%- assign curr_count = curr_tech | size -%}
    {%- assign past_count = past_tech | size -%}
    {% if curr_count > 0 or past_count > 0 -%}
      {% comment %} TODO / WIP
      {% capture all_links -%}
        ASP.NET MVC|https://dotnet.microsoft.com/apps/aspnet/mvc,
        Azure|https://azure.microsoft.com/,
        BlogEngine.NET|http://www.dotnetblogengine.net/,
        Database Abstraction|https://github.com/danieljsummers/DatabaseAbstraction,
        Digital Ocean|https://www.digitalocean.com/,
        Giraffe|https://github.com/giraffe-fsharp/Giraffe,
        GitHub|https://github.com/,
        GitHub Pages|https://pages.github.com/,
        Hexo|https://hexo.io/,
        Hugo|https://gohugo.io/,
        Jekyll|https://jekyllrb.com/,
        MongoDB|https://www.mongodb.com/,
        MySQL|https://www.mysql.com/,
        myWebLog|https://github.com/bit-badger/myWebLog,
        nginx|http://nginx.org/,
        Orchard|https://orchardproject.net/,
        PHP|https://www.php.net/,
        PostgreSQL|https://www.postgresql.org/,
        Rackspace Cloud|https://www.rackspace.com/cloud,
        RavenDB|https://ravendb.net/,
        RethinkDB|https://rethinkdb.com/,
        SQL Server|https://www.microsoft.com/en-us/sql-server/,
        Vue.js|https://vuejs.org/,
        WordPress|https://wordpress.org
      {%- endcapture %}
      {% endcomment %}
      <section>
        <h3 onclick="toggle('techStack')">
          The Technology Stack<span id="techStackArrow" class="arrow">&#x25BC;</span>
        </h3>
        <div id="techStack" class="collapse-panel hidden">
          {% if curr_count > 0 -%}
            {% if past_count > 0 -%}
              <p><small><strong>Current:</strong></small></p>
            {%- endif %}
            <ul>
              {% for curr in curr_tech -%}
                {%- assign tech = curr.value | split: "|" -%}
                <li>
                  {% comment %} <a v-if="hasLink(tech[0])" :href="techLinks[tech[0]]" target="_blank">{{ tech[0] }}</a> {% endcomment %}
                  {{ tech[0] }} for {{ tech[1] }}
                </li>
              {%- endfor %}
            </ul>
          {%- endif %}
          {% if past_count > 0 -%}
            {% if curr_count > 0 %}
              <p><small><strong>Previously:</strong></small></p>
            {% endif %}
            <ul>
              {% for past in past_tech -%}
                {%- assign tech = past.value | split: "|" -%}
                <li>
                  {% comment %} <a v-if="hasLink(tech[0])" :href="techLinks[tech[0]]" target="_blank">{{ tech[0] }}</a> {% endcomment %}
                  {{ tech[0] }} for {{ tech[1] }}
                </li>
              {%- endfor %}
            </ul>
          {% endif %}
        </div>
      </section>
    {%- endif %}
    <p><br><a href="{{ "solutions" | relative_link }}">&laquo; Back to All Solutions</a></p>
    {% if is_logged_on -%}
      <p><small><a hx-boost="false" href="{{ page | edit_page_link }}">Edit This Page</a></small></p>
    {% endif %}
  </article>
</div>
<script>
  function toggle(id) {
    const section = document.getElementById(id)
    const arrow   = document.getElementById(`${id}Arrow`)
    if (section.className.indexOf("shown") === -1) {
      section.className = `${section.className} shown`
      arrow.innerHTML = "&#x25B2;"
    } else {
      section.className = section.className.replace(" shown", "")
      arrow.innerHTML = "&#x25BC;"
    }
  }
</script>