/back-arrow-script

An embeddable back arrow script tag

Primary LanguageTypeScript

An embeddable back arrow script tag.

(on https://purarue.xyz/feed/)

Made this for a couple of my websites which are hosted as subprojects on my website

To build, yarn && yarn check && yarn build, outputs to back-arrow-bundle.js

Add that as a script tag to the bottom of your <body>

<script src="/path/to/back-arrow-bundle.js"></script>

That adds the back arrow to the top left of the page

I host a version at https://purarue.xyz/p/back-arrow-bundle.js

To configure, uses meta tags, like:

<head>
  ...
  <!-- on hover, where to link to, and the color -->
  <meta property="ba:title" content="back home" />
  <meta property="ba:url" content="https://mywebsite.com/home" />
  <meta property="ba:color" content="#fd6c6c" />
</head>

To customize positioning further, can overwrite the default CSS using !important, like:

.back-arrow {
  margin-top: 0.5rem !important;
  margin-left: 0.5rem !important;
  top: 60px !important;
  z-index: 9999 !important;
}