DEV Community: Grant Smith

Eleventy: Loop through a collection from within a layout?

Grant Smith — Wed, 20 May 2020 10:44:24 +0000

I have a home page which is made up of sections. Each section is currently pulled into my index.html using partials {% include sections/_section_01.html -%} for example. One of my sections has a bunch of cards which is well suited to be a collection.

How do I loop through a collection from within a section?

I may be going about this all wrong, but here is what I am doing currently.

index.html is using layout: 'layouts/base.liquid'

layouts/base.liquid looks as such…

{% include partials/_head.html %}
{% include partials/_header.html %}

  {% block content %}
    {{ content | safe }}
  {% endblock content %}
  {% block productContent %}{% endblock productContent %}

{% include partials/_footer.html %}

products.liquid is my layout for the cards and looks like this…

{% block productContent %}
<section aria-label="Product overview">
  <div class="container">
    <div class="columns">
      {% for product in collections.products %}
      <div class="col">
        <h2>{{ product.data.title }}</h2>
        {{ product.data.description }}
      </div>
      <div class="col">
        <figure class="image 5by4">
          <img src="assets/img/{{ product.data.img }}" alt="{{ product.data.imgAlt }}" width="648" height="521">
        </figure>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock productContent %}

I've tried including a section on my home page which looks at the correct layout. As per the following…

Index.html
---
layout: 'layouts/base.liquid'
---
    <main role="main">
      {% include sections/_section_01.html -%}
      {% include sections/_section_02.html -%}
      {% include sections/_section_03.html -%}

      {% include sections/_section_04.md -%}

      {% include sections/_section_05.html -%}
      {% include sections/_section_06.html -%}
      {% include sections/_section_07.html -%}
    </main>

_section_04.md
---
layout: "layouts/products.liquid"
---

I know the above isn't correct as it isn't working, is it just not possible or is there a way to loop through a collection from with a layout?

Longitude latitude generator

Grant Smith — Fri, 03 Apr 2020 21:13:24 +0000

Dev friends. Anyone aware of a reliable batch longitude latitude generator from addresses?

Improving my counter

Grant Smith — Sat, 29 Feb 2020 09:46:00 +0000

I've created a count-up clock that I'd like some help refining if you wouldn't mind. Currently, I have two issues that are bugging (pun intended!) me.

The counter doesn't count up the hours, when it reaches two hours, it goes back to 01:01:01
The numbers jump around

Here is my code so far…

// Counter

if (!!document.getElementById("counter")) {
  var minutesLabel = document.getElementById("minutes");
  var secondsLabel = document.getElementById("seconds");
  var totalSeconds = Number(secondsLabel.textContent);
  var totalMinutes = Number(minutesLabel.textContent);

  setInterval(setTime, 1000);

  function setTime() {
   ++totalSeconds;
   secondsLabel.innerHTML = pad(totalSeconds % 60);
   minutesLabel.innerHTML = pad(parseInt(totalMinutes + totalSeconds / 60));
  }

  function pad(val) {
   var valString = val + "";
   if (valString.length < 2) {
    return "0" + valString;
   } else {
    return valString;
   }
  }
 }

// End Counter

#counter {
  background-color: #ee1a25; // TODO: Change this to a pattern
  color: $white;
  text-align: center;

  .counter_wrapper {
    flex-direction: column;

    @include desktop {
      flex-direction: row;
    }
  }

  .counter_container {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;

    .counter_number {
      font-weight: regular;
      font-size: 60px;
      font-family: $family-primary;

      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
      @include widescreen {
        font-size: 133px;
      }
    }

    .divider {
      display: inline-block;
      margin: 0 16px;
      width: 8px;
      height: 30px;

      @include widescreen {
        margin: 0 34px;
        width: 16px;
        height: 60px;
      }
    }
  }
}

I'd apprecitate any help and advice offered please

Vue/Nuxt Component Card

Grant Smith — Tue, 11 Feb 2020 21:23:16 +0000

Hi,

I've been trying to learn Vue + Nuxt for static site generation. Whilst I can write the following in a way that will render out the correct HTML. I want to get my head around some of the more advanced features.

Aim:
Write a repeating card component that allows me to easily change elements within the component.

Here is where I am at…

Component:

<template>
  <div class="column is-4 has-text-centered">
    <div class="icon_block">
      <img src=":image.src" alt=":image.alt" width=":image.width" height=":image.height" />
    </div>
    <h4>{{ title }}</h4>
    <a href=":link.url" title=":link.title">{{ link.anchor }}</a>
  </div>
</template>

<script>
export default {
  name: "ContactCard",
  data: {
    contacts: [
        {
          id: '',
          image: {
            src: '',
            alt: '',
            width: ,
            height: ,
          },
          title: '',
          link: {
            url: '',
            title: '',
            anchor: ''
          }
    ]
  }
};
</script>

Template:

<template>
  <div class="footer_top">
    <div class="container">
      <div class="columns">
        <ContactCard
          v-for="contact in contacts" :key="id"
          :src="image.src"
          :alt="image.alt"
          :width="image.width"
          :height="image.height"
          :title="title"
          :url="link.url"
          :linkTitle="link.title"
          :anchor="link.anchor"
        >
        </ContactCard>
      </div>
    </div>
  </div>
</template>

<script>
import ContactCard from "~/components/ContactCard.vue";

export default {
  components: {
    ContactCard
  },
  data() function {
    return {
      contacts: [
        {
          id: '1',
          image: {
            src: '~assets/svg/address.svg',
            alt: 'Image Alt',
            width: 17,
            height: 30,
          },
          title: 'Address',
          link: {
            url: 'https://pagetolinkto',
            title: 'Title of link',
            anchor: 'Anchor Text'
          }
        },
      ]
    },
};
</script>

Needless to say, this isn't working and hence I was hoping someone might be able point me in the right direction.

Using external scripts with NuxtJS

Grant Smith — Sun, 03 Nov 2019 09:43:39 +0000

I'm very new to Nuxt and I can't work out how to import other Javascript libraries.

For example, I am using Bulma in my project and find the BulmaJS library very useful as it saves me a lot of time. I appear not to be importing BulmaJs correctly into my project, but cannot figure out what I am missing?

After research, I have reached the following conclusions which may or may not be correct.

After installing npm install --save-dev @vizuaalog/bulmajs I have added the following code.

/plugins/navbar.js

import Navbar from '@vizuaalog/bulmajs/src/plugins/Navbar';
export default Navbar;

/nuxtconfig.js

plugins: [
 '@/plugins/navbar.js'
],

This results in a SyntaxError Unexpected identifier error?

I have found most other aspects of Nuxt very logical, but seem to be missing the point when it comes to using Javascript within projects. Another example was using Browser Update, I added this as a static file and used in my footer component, again a bunch of warnings.

What am I not understanding?

SASS VS Code extension - Missing

Grant Smith — Mon, 14 Oct 2019 15:30:56 +0000

Good afternoon,

A little while ago I changed computers and although I had a backup, it obviously didn't contain all my VS Code extensions?

I've tracked most of them down, however, there are some sass extensions I really miss…

When I created a variable, $black for example. Whilst writing my sass, upon typing $ I would get a list of recently used variables or suggestions. This was really handy.

The second and probably the same extension would give a colour background of the variable if the code was referencing a colour. Such as the aforementioned variable would have a black background.

Little things I know, but I would love to find the extension that provided these features.

Thanks in advance on this trivial, but annoying issue 😀

Should desktop sites have a max-width?

Grant Smith — Wed, 02 Oct 2019 20:31:32 +0000

I'm looking for opinions on the above. Personally, I when view sites on my 27" monitor that are full width, they tend to look less than ideal. Whereas, my laptop seems to really suit the format. However, having a load of white/grey on either side may be received negatively?

So for my first post, I thought I would see if the community has opinions on the subject?