Custom Copyright Component

[handshaper (Robin Mair)]

Over the weekend, I decided to write my own custom copyright component as a fun exercise.

I wanted it to be highly customizable, so I added a lot of properties to control almost every aspect of the component. It is built on a Flex, so the layout can easily be configured.

Below are some examples of the various flex directions.

There is a drop zone for the SVG or image, which can be used if needed.

Here are all the available properties.

I currently don’t have the background color settings available, but I’m thinking of adding those as well. In the examples, the color backgrounds are being handled by the flex that contains the copyright.

Everything is configurable except the actual “©” symbol. Leaving text fields blank will exclude them from the display.

The start date is currently set with a slider that has a range from 1900 to 2100. I would have preferred a number field, but I ran into a bug where you could enter any number you liked into the field, and it worked, but when using the up and down arrows to increment the number, you could only increment to 1000, which was not going to work for a date. I need to see if this is a bug or intentional. @ben @dan

Elements is a lot of fun!

[dan]

@handshaper

Everything is configurable except the actual “©” symbol. Leaving text fields blank will exclude them from the display.

The component looks great, nice work! Are you using the Alpine snippet to get the current year?

<div x-data="{ year: new Date().getFullYear() }">
  <span x-text="year"></span>
</div>

@handshaper

but when using the up and down arrows to increment the number, you could only increment to 1000, which was not going to work for a date. I need to see if this is a bug or intentional

That’s just a bit of an oversight I think, I’d put the control as a standard text field for now…

[handshaper (Robin Mair)]

@dan

The component looks great, nice work! Are you using the Alpine snippet to get the current year?

<div x-data="{ year: new Date().getFullYear() }">
  <span x-text="year"></span>
</div>

I do this in the hooks.js file and then pass in the assembled string.

// Figure out what the appropriate date string should be
   const y = new Date().getFullYear();
   const s = parseInt(rw.props.startYear, 10);

	// Build up a string that contains the concatenation of the start year
	// and the current year, if needed
	let yearText = String(y);
	if (Number.isFinite(s)) {
		yearText = (s < y) ? `${s}–${y}` : String(s); // future or equal -> single year
	}

[grainger2001 (Andrew)]

Will there be, or is there somewhere already, where other users can download custom components that other people have made?

[dan]

@grainger2001

Will there be, or is there somewhere already where other users can download custom components that other people have made?

Yes, there will be a place, and it’ll be built right into Elements! We’re working on it now and hope to have a basic version available soon-ish. Stay tuned!

[grainger2001 (Andrew)]

Awesome! Thank you for the quick reply!

[ben]

Just a heads-up: if you’re calculating the year in your hooks.js file, it won’t dynamically update on your published site.

That’s because hooks.js runs at build time (when you publish your project) so the value it outputs gets hardcoded into the final HTML. This means the year will only update the next time you republish your site.

If you need the year to update automatically, you’ll want to use either PHP or client-side JavaScript to generate the year in the browser!

[handshaper (Robin Mair)]

Thanks for that @ben , I was aware of this limitation with the way I’m doing it. But the reality is that for many other reasons, I always tend to republish my sites at the start of a new year.

How would one handle this using JavaScript?

[Doobox (Doobox Software)]

<span>&copy; <script>document.write(new Date().getFullYear())</script></span>

[handshaper (Robin Mair)]

With the help of ChatGPT, I completely rewrote the logic for the date and placed it in a script, making it more dynamic. It also sets a timer to trigger the current year update at the end of the year, just to be safe.

Now there is nothing to do with the year in the hooks.js file.

It even allows the user to preview the copyright notice in the editor when they enter text, even though the JS code won’t run until preview. At least that way, you get to see what you have entered in the properties.

[Pegasus]

You can easily create this via the Elements CMS. Just place a text component into a CMS item.

In the CMS item, activate Settings → Use Item for Metadata. Then you’ll have access to Twig syntax.

For example, put the following syntax into your text component: {{ "now"|date("Y") }} and the current year will be displayed and automatically updated.

[handshaper (Robin Mair)]

Yes, this is what I was doing before I wrote this component. I decided I wanted something that was not tied to the CMS. Plus, it was just fun to create a custom component.