Company Name As A Variable?

[chrisativonne]

I'd like to add my company name as a variable? to each page, so that any references can easily be updated later.

What is the process to do this? e.g. Company name is ABC Widgets, and the company name is mentioned in various paragraphs throughout the website. I'd rather have {{company_name}} in the body reference one company_name.njk file?

Is this possible?

[pdehaan]

You could put it in a global data file, although that probably requires the use of a prefix. For example, if you had _data/site.json like this:

{
  "company_name": "ABC Widgets"
}

You could reference it in your templates like {{ site.company_name }}.

And you should be able to create a global data file named "eleventyComputed.js" which might do the trick too. See https://www.11ty.dev/docs/data-computed/#advanced-details

Or Eleventy v1 (currently in beta channel) will allow you to set global data programmatically in your config file: https://www.11ty.dev/docs/data-global-custom/

[pdehaan]

That could work, but I think arrays will be difficult to work with since you can't always be sure which index the properties you want are in... What about flattening it to a simple object:

{
    "company_name": "Ivonne Sanchez Beauty",
    "company_address": "138 Sparks Street, Ottawa ON K1P 5B6",
    "company_street_address": "138 Sparks Street",
    "company_postal_code": "K1P 5B6",
    "company_coordinates": "45.4221145,-75.698814",
    "company_coordinates_lat": "45.4221145",
    "company_coordinates_long": "-75.698814",
    "company_telephone": "(613) 695-6662",
    "company_telephone_fixed": "+16136956662",
    "company_telephone_url": "tel:16136956662",
    "company_website_url": "https://ivonnesanchez.com",
    "company_website": "ivonnesanchez.com",
    "company_email_address": "mailto:[email protected]",
    "company_google_maps_cid_url": "https://www.google.com/maps?cid=735841526328035629",
    "company_instagram_url": "https://www.instagram.com/ivonnesanchezbeauty",
    "company_facebook_url": "https://www.facebook.com/IvonneSanchezBeauty",
    "company_facebook_messenger_url": "https://m.me/IvonneSanchezBeauty",
    "company_twitter_url": "https://twitter.com/ivonnesanchez__",
    "company_twitter_userid": "@ivonnesanchez__",
    "company_pinterest_url": "https://www.pinterest.ca/ivonnesanchezbeauty",
    "company_yelp_url": "https://www.yelp.ca/biz/ivonne-sanchez-beauty-ottawa",
    "company_youtube_url": "https://www.youtube.com/channel/UC_5KTlxSdAKzW0lOwn4ugRw",
    "company_scheduling_url": "https://app.ivonnesanchez.com",
    "company_consultation_url": "https://app.ivonnesanchez.com/book/new-virtual-consult",
    "company_facebook_messenger_url": "https://m.me/IvonneSanchezBeauty",
    "company_rating_value": "4.8",
    "company_opening_hours_weekday": "9:00",
    "company_closing_hours_weekday": "18:00",
    "company_opening_hours_weekend": "9:00",
    "company_closing_hours_weekend": "18:00"
}

I put that in a file named ./src/_data/site.json, so now I can access the properties like this:

---
title: My Site
---

<h1>{{ site.company_name }}</h1>

<footer>
  <a href="{{ site.company_telephone_url }}">{{ site.company_telephone }}</a>
</footer>

And get this glorious output:

<h1>Ivonne Sanchez Beauty</h1>

<footer>
  <a href="tel:16136956662">(613) 695-6662</a>
</footer>

I bet we could optimize it a bit more, but that might get you started on a general idea.

[pdehaan]

Added bonus of a flattened object, VS Code flags that you specified the company_facebook_messenger_url property twice. 🤷

[pdehaan]

Sorry, that was probably not the greatest response of all time, but here was my initial thoughts on a possible refactor. I find typing that site.company_* prefix a bit tedious. So what if we renamed the file from "_data/site.json" to "_data/company.json" and then removed all company_ prefixes:

{
  "name": "Ivonne Sanchez Beauty",
  "address": "138 Sparks Street, Ottawa ON K1P 5B6",
  "street_address": "138 Sparks Street",
  "postal_code": "K1P 5B6",
  "coordinates": "45.4221145,-75.698814",
  "coordinates_lat": "45.4221145",
  "coordinates_long": "-75.698814",
  "telephone": "(613) 695-6662",
  "telephone_fixed": "+16136956662",
  "telephone_url": "tel:16136956662",
  "website_url": "https://ivonnesanchez.com",
  "website": "ivonnesanchez.com",
  "email_address": "mailto:[email protected]",
  "google_maps_cid_url": "https://www.google.com/maps?cid=735841526328035629",
  "instagram_url": "https://www.instagram.com/ivonnesanchezbeauty",
  "facebook_url": "https://www.facebook.com/IvonneSanchezBeauty",
  "facebook_messenger_url": "https://m.me/IvonneSanchezBeauty",
  "twitter_url": "https://twitter.com/ivonnesanchez__",
  "twitter_userid": "@ivonnesanchez__",
  "pinterest_url": "https://www.pinterest.ca/ivonnesanchezbeauty",
  "yelp_url": "https://www.yelp.ca/biz/ivonne-sanchez-beauty-ottawa",
  "youtube_url": "https://www.youtube.com/channel/UC_5KTlxSdAKzW0lOwn4ugRw",
  "scheduling_url": "https://app.ivonnesanchez.com",
  "consultation_url": "https://app.ivonnesanchez.com/book/new-virtual-consult",
  "rating_value": "4.8",
  "opening_hours_weekday": "9:00",
  "closing_hours_weekday": "18:00",
  "opening_hours_weekend": "9:00",
  "closing_hours_weekend": "18:00"
}

And now we can use this instead:

<h1>{{ company.name }}</h1>

<footer>
  <a href="{{ company.telephone_url }}">{{ company.telephone }}</a>
</footer>

A bit cleaner.

---

Next would be trying to dedupe the data as much as possible. You specify the address (or partially duplicate) it twice (as street_address and postal_code). Similarly w/ coordinates (vs coordinates_lat and coordinates_long). Again w/ telephone, some twitter stuff...
By nesting the data a bit more, you might be able to do something like:

{
  "name": "Ivonne Sanchez Beauty",
  "address": {
    "street": "138 Sparks Street",
    "city": "Ottawa",
    "province": "ON",
    "postal_code": "K1P 5B6"
  },
  "coordinates": {
    "lat": "45.4221145",
    "long": "-75.698814"
  },
  "telephone": "(613) 695-6662",
  "website_url": "https://ivonnesanchez.com",
  "email_address": "[email protected]",
  "google_maps_cid_url": "https://www.google.com/maps?cid=735841526328035629",
  "instagram_url": "https://www.instagram.com/ivonnesanchezbeauty",
  "facebook_url": "https://www.facebook.com/IvonneSanchezBeauty",
  "facebook_messenger_url": "https://m.me/IvonneSanchezBeauty",
  "twitter_userid": "@ivonnesanchez__",
  "pinterest_url": "https://www.pinterest.ca/ivonnesanchezbeauty",
  "yelp_url": "https://www.yelp.ca/biz/ivonne-sanchez-beauty-ottawa",
  "youtube_url": "https://www.youtube.com/channel/UC_5KTlxSdAKzW0lOwn4ugRw",
  "scheduling_url": "https://app.ivonnesanchez.com",
  "consultation_url": "https://app.ivonnesanchez.com/book/new-virtual-consult",
  "rating_value": "4.8",
  "opening_hours": {
    "weekday": "9:00",
    "weekend": "9:00"
  },
  "closing_hours": {
    "weekday": "18:00",
    "weekend": "18:00"
  }
}

And then tweak your templates to this:

---
title: My Site
---

<h1>{{ company.name }}</h1>

<div>
<p><strong>{{ company.address.street }}</strong></p>
<p>{{ company.address.city }} {{ company.address.province }}, {{ company.address.postal_code }}</p>
</div>

<footer>
  <a href="{{ company.telephone_url }}">{{ company.telephone }}</a>
  <p>Hours:</p>
  <p>Mon-Fri: {{ company.opening_hours.weekday }} &mdash; {{ company.closing_hours.weekday }}</p>
  <p>Sat-Sun: {{ company.opening_hours.weekend }} &mdash; {{ company.closing_hours.weekend }}</p>
</footer>

Next I'd write a few custom filters to convert a "(999) 555-8888" style number into "+9995558888" and "tel:9995558888" depending on your usage. Now the data only exists in one place and easy to update, but requires a bit more work on the display side.

Same w/ twitter_userid. Instead of duplicating the username (and having risks of typos or updating in multiple places) you could just have a custom filter that strips the leading "@" and prefixes the username w/ "https://twitter.com/".

Not saying that the deeper nesting and deduping is any better of a solution, but might make maintenance and reusability between projects a bit easier. But try it out and try writing a few simple custom filters to reformat the global data based on usage.

[pdehaan]

Here's a few custom filters to get you started:

  // Get the hostname from the specified URL (and remove any leading "www." prefix).
  eleventyConfig.addFilter("hostname", function hostname_filter(href = "") {
    return new URL(href).hostname.replace(/^www\./, "");
  });
  // Remove any non-digits from telephone number and prefix w/ "+1" country code.
  eleventyConfig.addFilter("tel_fixed", function (number = "") {
    return `+1${number.replace(/[^0-9]/g, "")}`;
  });
  // Remove any non-digits from telephone number and prefix w/ "tel:1" protocol+country code.
  eleventyConfig.addFilter("tel_href", function (number = "") {
    return `tel:1${number.replace(/[^0-9]/g, "")}`;
  });

Here's a possibility for the Twitter username to URL. But maybe this is far too over-optimized:

// .eleventy.js
eleventyConfig.addFilter("twitter_url", function (username = "") {
  return new URL(username.replace(/^@/, ""), "https://twitter.com").href;
});

{# index.njk #}
<p>twitter_url: {{ company.social.twitter }} => {{ company.social.twitter | twitter_url }}</p>

<!-- index.html output -->
<p>twitter_url: @ivonnesanchez__ => https://twitter.com/ivonnesanchez__</p>

// _data/company.json (snippet)
{
  "name": "Ivonne Sanchez Beauty",
  ...
  "social": {
    "facebook": "IvonneSanchezBeauty",
    "instagram": "ivonnesanchezbeauty",
    "pinterest": "ivonnesanchezbeauty",
    "twitter": "@ivonnesanchez__",
    "yelp": "ivonne-sanchez-beauty-ottawa",
    "youtube": "UC_5KTlxSdAKzW0lOwn4ugRw"
  }
}

[chrisativonne]

These are some great optimizations. I have a working .json file now. Thanks for this input. I'm going to spend the day reviewing and digging into some of these changes. Much appreciated!