Nuxt.js + Github Gist: Embedding a Gist within pages

Moenupa WANG — Thu, 13 May 2021 13:46:28 +0000

Demonstration

Short Version

If you are quite experienced with nuxt.js, here is the logic:

This approach get rid of https://gist.github.com/xxxxx/xxxxx.js embedding method, and instead fetch the json file provided by Github API, i.e. https://api.github.com/gist/ to present the data.

The url format is https://api.github.com/gist/<gist-id> in which <gist-id> is the xxxxxx bit of gist url https://gist.github.com/username/xxxxxx

This also would work for Vue.js with minor modifications.

If you are interested, you can skip the implementation part and quick view the limitations and parallel approaches.

Long Version

The motivation, some parallel approaches, implementation and limitations.

Motivation

The reason I have come up with this approach is, the Github-provided js script for embedding calls document.write(), which is not suitable for Vue.js frameworks, without the aid of other modules and plugins.

You may experience a warning below, once you embed it directly like <script src="embedded-gist-js-url"></script> as in raw html:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Parallel Approaches

Using postscribe with nuxt.js as a plugin like top answer from Stack Overflow (second solution mentioned)
Using vue-embed-gist
if you have other parallel approaches or ideas do let me now

Sadly none of the above works @_@, at least for me. Therefore I choose this kind of dumb yet the only working approach.

Implementation

Store the list of to-be-displayed gist ids in data.
Use async fetch() {} provided by nuxt.js to fetch the jsons from github API
Display json files properly, with the most basic v-for and v-if
Some styling

For source code you can click this link or examine the demonstration at the very start of the post.

Limitations

Hit limit (for more info visit documentation), unlike the unlimited hit js provided by Github.
Heavier coding, this approach involves a lot of coding of vue.js, adding 10-20 lines of code, while parallel approaches may only take 2-3 lines.

There may be other unknown limitations, hope you can point them out for me.

Conclusion

Thank you for reading this post.

Again, if you are interested in the same topic, or have some ideas about this approach, or get stumbled by the same trouble, feel free to leave a comment.

Loading Animation with pure CSS

Moenupa WANG — Sun, 28 Mar 2021 13:34:35 +0000

This article introduces a method to create a simple loading animation with PURE CSS, as demonstrated below (powered by codepen.io):

HTML

This implementation needs only one line of HTML code, like what's below:

<div class="loading">Loading</div>

CSS

Then we move on to the major part, the CSS code.

Because we have only one related html element, we use a :before or :after selector to implement the spinning circle. Setting its content, width, height, etc. to let it show up.

.loading, .loading:before {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 16rem;
}
.loading:before {
  content: "";
  border-radius: 50%;
  border: 1rem solid;
  border-color: black transparent;
}

Then we will have two none-spinning quarter-circles, which is due to the border-color: black transparent; setting top/bottom's color to black, and left/right's color to transparent.

Note that position: fixed aligns the top-left corner to the 50%/50% position. so to align the center point to the center view point, we do the following modification to the css

.loading,
.loading:before {
  margin: -5rem;
}

.loading {
  padding: 4.7rem 1rem;
  font-size: 2rem;
  text-align: center;
}

Then we shall define the spinning animation, using CSS @keyframes to implement.

.loading:before {
  animation: loading 1.5s linear infinite;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

You can also define the animation with keywords like 0% {...} 100% {...}.

Finally, a bit beautifying work and variable-replacement for future modification.

DEV Community: Moenupa WANG