jake/hugo-mod-twemoji
1
Fork 0
mirror of https://github.com/jakejarvis/hugo-mod-twemoji.git synced 2025-04-28 02:10:33 -04:00
Code Issues Releases Activity

mount twemoji.min.js as an asset instead of static file, and get as resource in partial

Browse Source
This commit is contained in:
Jake Jarvis 2020-04-13 15:48:19 -04:00
parent ede8c23576
commit cf01973921
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
5 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.github/workflows/ci.yml vendored
View File

@ -48,12 +48,9 @@ jobs:
- name: Build site
run: |
./hugo --source docs/ --verbose
- name: Does twemoji.min.js exist?
run: |
test -f ./docs/public/twemoji/js/twemoji.min.js
- name: Are 🌈s imaginary??? (png)
run: |
test -f ./docs/public/twemoji/png/1f308.png
- name: Is 💓 even real?!?!??! (svg)
- name: Does true 💓 even exist?!?!??! (svg)
run: |
test -f ./docs/public/twemoji/svg/1f493.svg

9
README.md
View File

@ -39,20 +39,23 @@ For a quick start, an optional [partial template](https://gohugo.io/templates/pa
### ⚙️ Manual
If you don't use the partial, you'll want to call the script somewhere in your template or theme's `<head>`, for example:
If you don't use the partial, you'll want to call the `js/twemoji.min.js` asset as [a resource](https://gohugo.io/hugo-pipes/introduction/) somewhere in your template or theme's `<head>`, for example:
```html
<script src="{{ "twemoji/js/twemoji.min.js" | absURL }}"></script>
{{ $twemoji := resources.Get "js/twemoji.min.js" }}
<script src="{{ $twemoji.Permalink }}"></script>
```
...and then in order to actually swap out the emojis, you need to call the script's `twemoji.parse` method. This is where you can choose between SVGs (recommended) or 72x72 PNGs and tell the script where we've placed the graphics. The [official readme](https://github.com/twitter/twemoji#api) has a _lot_ of information about the API, but a good starting point is this one-liner:
```html
<script>
twemoji.parse(document.body, {{ dict "base" ("/twemoji/" | absURL) "folder" "svg" "ext" ".svg" | jsonify | safeJS }})
twemoji.parse(document.body, {{ dict "base" ("twemoji/" | absURL) "folder" "svg" "ext" ".svg" | jsonify | safeJS }})
</script>
```
Simply change `svg` and `.svg` to `png` and `.png` respectively to use the provided 72x72 PNG icons instead.
After building the site this small script will turn into something like:
```html

0
static/twemoji/js/twemoji.min.js → assets/js/twemoji.min.js vendored
View File

6
config.toml
View File

@ -2,12 +2,12 @@
[module.hugoVersion]
min = "0.64.1"
extended = false
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "layouts"
target = "layouts"
[[module.mounts]]
source = "static"
target = "static"
[[module.imports]]
path = "github.com/twitter/twemoji"
[[module.imports.mounts]]

5
layouts/partials/twemoji.html
View File

@ -1,2 +1,3 @@
<script src="{{ "twemoji/js/twemoji.min.js" | absURL }}"></script>
<script>twemoji.parse(document.body,{{ dict "base" ("/twemoji/" | absURL) "folder" "svg" "ext" ".svg" | jsonify | safeJS }})</script>
{{ $twemoji := resources.Get "js/twemoji.min.js" }}
<script src="{{ $twemoji.Permalink }}"></script>
<script>twemoji.parse(document.body,{{ dict "base" ("twemoji/" | absURL) "folder" "svg" "ext" ".svg" | jsonify | safeJS }})</script>