Mandaris

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.

"Tightrope (feat. Big Boi)" by Janelle Monáe

Listen on Apple Music

What’s a hidden gem you wish more people knew about?

Tightrope by Janelle Monáe is a wonderful track on a great album.

I really enjoy this track because it has a lot of energy and range. Janelle has a great voice and you just get this feeling that you kind of have to dance no matter how low things can get. I feel that this is a great companion to "Under Pressure" by David Bowie and Queen.

View Mandaris Moore's Crucial Tracks profile

"Un-Break My Heart" by Toni Braxton

Listen on Apple Music

What song reminds you of your first heartbreak?

I actually don't have one specific to my first heartbreak but there is not that brings up that feeling and it's Un-Break My Heart by Toni Braxton. I think she's very talented and I don't hear a lot of talent with her voice in popular music.

But then again, I don't listen to a lot of popular music that isn't given to my by my family.

View Mandaris Moore's Crucial Tracks profile

"Under Pressure" by Queen & David Bowie

Listen on Apple Music

Woke up and felt the whole world was on top of me.

View Mandaris Moore's Crucial Tracks profile

Looking back on this, I'm wondering if it's possible to make murder boring. This movie has all the parts for something great but looking back on it, I don't really know how to feel about the work overall.

De Niro plays two characters that looks two similar. It's almost as if Superman and Clark Kent were in the same room. I guess the director wanted to showcase that they were a lot alike but doing things in completely different ways.

Life if short, money is tight, watch something else, and call it a night.

I went back and saw this film after watching Companion to get a feel for the two different movies. The movie really feels a little bit out of time. It has jokes that are still funny and poke fun at some many things that should be made fun of.

There are messages and jokes and just a lot of little things that I really enjoyed.🎬

This movie concept has been done before. What it comes down to is the execution and I feel the cast does a wonderful job of really bringing it <q>to life</q>.

My favorite part of this movie is actually the side characters and not the relationship between the protagonist and her boyfriend.

🎬

It's a lot of little jokes that you've seen in other places and stitches together here for your entertainment. I chuckled at a couple of the jokes but I don't think I can recommend this movie to most unless you want to watch a movie with dirty jokes and bowling.

Don't think. Just watch.🎬

I have configured my blog index to only show posts with titles. At first, I was a little hesitant, but I think it makes for a better experience when I'm reading it. I also found that I do not hesitate as much make microposts.

I got the code from Loura who has written about it on her blog.

Here are the steps I used to make my Micro.blog hosted blog list only the titled posts on my homepage and still paginate correctly. Note: This does require editing your blog theme.

She’s got an amazing site and you should check it out.

I’m currently boycotting McDonalds anyway. I’ve been playing with look up all the companies that backed Trump and correlating how healthy the food is. Maybe there is a connection between them.

China has cancelled 12,000 metric tons of US pork imports, marking the largest cancellation since the pandemic's onset, amidst escalating trade tensions. This move deals a blow to American pork producers, who face high tariffs, hindering their competitiveness in the crucial Chinese market. The National Pork Producers Council highlights the impossible competition due to these tariffs.