Mandaris

"Larger Than Life" by Backstreet Boys

Listen on Apple Music

What's a song that feels larger than life to you?

Sorry, not sorry. This is the track that comes to mind when I saw the prompt. I still smile thinking about how people would argue whether Backstreet Boys or N*sync were better.

View Mandaris Moore's Crucial Tracks profile

"Life Is a Highway" by Rascal Flatts

Listen on Apple Music

Describe the perfect song for a road trip and why it works.

I didn't think much of this song when I heard it in the movie, but it's really grown on me over the years. I think it's because my daughter would keep on saying "Kachow".

View Mandaris Moore's Crucial Tracks profile

You came in and just stole everyone’s heart.

And stuffed up everyone’s nose.

Keep doing what you’re doing!

"Nobody Knows" by The Tony Rich Project

Listen on Apple Music

What song would you use to describe your current relationship?

I've been married for years and sometimes relationships can ebb and flow as we try to make things work in this world. At the moment, we've got a lot of things going on as our children start moving on to their next stage in life. This doesn't leave us a lot of time to be a couple.

We're not on the rocks but sometimes I just miss being with my wife and having her smile.

View Mandaris Moore's Crucial Tracks profile

"Kokomo" by The Beach Boys

Listen on Apple Music

Describe music that reminds you of a specific place you've traveled.

I’ve never been to Kokomo. For me, the song actually reminds me of Santa Cruz, Ca. My wife and I would sometimes listen to this song as we would drive down there. It was her happy place and that would make me feel good to know that she was happy.

View Mandaris Moore's Crucial Tracks profile

"The Dynamo of Volition" by Jason Mraz

Listen on Apple Music

What song do you associate with your biggest accomplishment?

This isn’t the biggest accomplishment, but I was able to beat a ticket one time and “The Dynamo of Volition” by Jason Mraz. It probably won’t happen again.

View Mandaris Moore's Crucial Tracks profile

"Human Nature" by Michael Jackson

Listen on Apple Music

What song makes you feel understood when no one else does?

I feel that Human Nature by Michael Jackson is the best fit for the prompt. It might just be because I'm a big Michael Jackson fan.

View Mandaris Moore's Crucial Tracks profile

"I Try" by Macy Gray

Listen on Apple Music

What's a song you initially disliked but now love?

I would say "I Try" by Macy Gray is the perfect song for this.

The first time that I heard this song, I was surprised that it was even on the radio. It was the early 2000s when I heard it -although it was released the year before- and I was of the opinion that singers had to be "perfect" or from the olden days of the 80s where they didn't know any better. I grew to appreciate the song and the singer and have been listening to here off and on over the years.

View Mandaris Moore's Crucial Tracks profile

"Corner of the Earth" by Jamiroquai

Listen on Apple Music

What song feels like a secret between you and the artist?

"Corner of the Earth" is that track for me. It's something that I subconsciously seek out when I feel my world is spinning out of control. It helps feel centered and get back "on track".

View Mandaris Moore's Crucial Tracks profile

I like sharing memes and articles with my friends. I also like saving links to things that I read so that I can follow up with them later. I wanted to make it easier for me to share links to my page and document how I integrated it into the theme that I’ve been working on.

Resources and History

I’ve used plenty of great examples that I’m going to list below. I would not have been able to make this possible without learning from these write-ups. I hope that you check them out for any details that I may have missed or chosen to implement differently.

Simplify sharing with built-in APIs and progressive enhancement - Piccalilli

This article written by Andy Bell is where I’ll be getting most this text from. I’ll do my best not to make this a copy of what he has and encourage you to follow the people at piccalil.li because they have some great content.

How to let the user share the website they are on - web.dev

This article by Thomas Steiner is also pretty good and shows how you can have OS-based share icons. I’ve planned to go back and add icons on the buttons sometime in the future.

An advanced guide to the Web Share API and navigator.share() - LogRocket Blog

A great read by David Omotayo. This one has little videos that show you what is going on as you move through the process of adding this functionality.

How to Use the Web Share API - CSS-Tricks

Ayooluwa Isaiah has a nice article on CSS-Tricks.

Web Share API - Web APIs - MDN

And it’s always good to check out what MDN has to say about this. This has a very basic example and a browser compatibility chart.

I’ll be adding the sharing and clipboard functionality by having an optional section that Matt Langford showed me how to create a while ago.

The Buttons

My first steps were to make sure that the buttons would fit in with the rest of the theme. Instead of having a picture, I thought it would be better to add the buttons below so you can see what they currently look like.

Simple Button Disabled Button

I added the following CSS to remove the default styling that is given to <button> elements in CSS, and then added the element to the definition of what I call a lozenge.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

input, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

...

button,
.lozenge {
  background-color: var(--accent-alt);
  color: var(--nordDark1);
  text-decoration: none;
  text-align: center;
  display: inline-block;
  filter: drop-shadow(0.1rem 0.1rem 0.1rem);
  padding: 0px 12px;
  border-radius: 1em;
  line-height: normal;
  cursor: pointer;
}

...

button:not([disabled]):hover,
.lozenge:hover,
.lozenge:focus-visible {
  color: var(--nordLight3);
  background-color: var(--accent-opposite);
  filter: drop-shadow(0.1rem 0.1rem 0.1rem);
}

Safari seems to have some issues when hovering over the button. I suspect that it has something to do with the combination of filter and borders. I’ve decided that I’ll come back to it at a later date.

Next, I added a partial called share-actions.html to the theme in the plugin-container aside found in single.html. This means that I have to address a feature that I put in the template to hide this element if it didn’t have a set of different elements. I have written about it in a post called Labarum: Can I has Cheeseburger and Debugging.

1
2
3
4
5
6
7
8
9

.optional {
  display: none;
}

.optional:has(a, p, img, button) {
  display: block;
  text-align: center;
  grid-area: informational;
}

I added button to the list of items in order to get this working.

I then added two buttons to the partial that I created as a proof of concept that it’s working at this point.

The JavaScript

This is the first time that I’ve worked with webcomponents and probably would not have used them if the example that I was copying being inspired by didn’t have step-by-step instructions.

I changed the contents of share-actions.html partial to match up with the tutorial except for a little bit of wording and using the Hugo variables to populate the values as seen below.

<share-actions>
  <p>Copy this link to share.</p>
  <p><a href="{{ .Permalink }}">{{ .Permalink }}</a></p>
</share-actions>

I then create the file static\js\share-actions.js to put the logic that we going to use and then paste the javascript from the tutorial. Furthermore, I then added the following line above to link to the javascript.

<script async type="text/javascript" 
    src="{{ "js/share-actions.js" | relURL }}">
</script>

The script is small, but I don’t want it to slow down the rendering of the page so I use the async keyword. I use Hugo’s way of referencing the script and have placed it in the page instead of the head in the hopes that it’s only loaded when needed.

After this, the page renders to buttons properly and the functionality is complete.

Unfortunately, the buttons do not fit into the rest of the theme. I want the buttons to flow with the links that are created via Micro.blog plugins. This means removing the <ul> and <li> tags around the buttons. This causes other problems, as the code is written to have a <div> become visible to alert the user that something has happened.

I spent a lot of time trying to understand position: fixed and going back and forth over when and where things should show up when I remembered that I had spent a lot of time working on trying to make popovers¹ work with the theme and that might be a better solution.

So, I changed the inserted HTML to the following.

<button class="button" data-method="share">
     Share
</button>
<div role="alert" popover></div>

This allows me to go over the notes that I put together for my experiment with popovers last year.

I then changed the code from adding and removing the text to toggling the popover to show and hiding.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

renderAlert(text, context, clearTime = 3000) {
    const alert = context
      ? context.nextElementSibling
      : this.querySelector('[role="alert"]');

    if (alert) {
      alert.innerText = text;
      alert.showPopover();

      setTimeout(() => {
        alert.hidePopover();
      }, clearTime);
    }
  }

Line 4

This line is directly from the tutorial. I highlighted it here because I was looking at a popover tutorial that had javascript examples, and I was thinking about using document.querySelector('[popover]') in order to get the reference to open and close. This would allow me to define the popups outside of the javascript and have Hugo place information about the document. I decided to revisit this idea at a later time.

Line 8

Shows the popover. It’s a light-dismiss popup so the user can click anywhere and the button should go away.

Line 11

Closes the popover after time set by clearTime. I wanted to make sure not to use .togglePopover() as this might reopen the popover if it was dismissed by the user.

Styling the Popup (again)

I took what I had done from the previous work on popups and read over Animating dialog and popover elements with CSS @starting-style and How to Create Native Popovers in HTML Without JavaScriptof the tutorials that had come out since that time.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

[popover] {
  margin: auto;
  padding: .5rem;
  border-radius: var(--border-radius);
  background: var(--accent-alt);

  transition: all 0.25s allow-discrete;
  opacity: 0;
  translate: 0 2em;
}

[popover]::backdrop {
  backdrop-filter: blur(3px);
}

[popover]:popover-open {
    top: 2rem;
    opacity: 1;
    translate: 0 0;
}

@starting-style {
  [popover] {
    &:popover-open {
      top: 2rem;
      opacity: 1;
      translate: 0 2em;
    }
  }
}

Line 7-9

This defines the animation of the popover and uses the new keyword of allow-discrete.

Line 13

This blurs the background as the popup shows up. I might also darken it slightly at a later date.

Line 22

My understanding is that this defines the first frame or what the initial state of these objects within it is supposed to be.

I don’t have much for this section as it was mostly trial and error as I tried to get it working in a way that I like.

In conclusion

I hope that you take this example and make something more with this. I’ve got about two dozen tabs open in order to get all the examples I needed in order to understand and then write this post.

It haunts me.

If this helps you in any way at all, I’d love it if you’d drop me a line.