diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-edit.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-edit.png
new file mode 100644
index 0000000..dea6c99
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-edit.png differ
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-mdn-pwa.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-mdn-pwa.png
new file mode 100644
index 0000000..f1e2f4f
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-mdn-pwa.png differ
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-reddit.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-reddit.png
new file mode 100644
index 0000000..22654c1
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-reddit.png differ
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-search.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-search.png
new file mode 100644
index 0000000..4dc4cd3
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-search.png differ
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-translate.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-translate.png
new file mode 100644
index 0000000..2e9990e
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/bookmark-translate.png differ
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/header.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/header.png
new file mode 100644
index 0000000..30b32e7
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/header.png differ
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/index.md b/content/blog/2021-09-07_firefox-tricks-quantumbar/index.md
new file mode 100644
index 0000000..81bae51
--- /dev/null
+++ b/content/blog/2021-09-07_firefox-tricks-quantumbar/index.md
@@ -0,0 +1,204 @@
++++
+title = "Firefox tricks: efficient QuantumBar usage"
+description = "Tricks to efficiently use the Firefox address bar. Using scope characters, bookmark keywords, and duckduckgo bangs, without add-ons."
+
+[taxonomies]
+categories = ["blog"]
+tags = ["firefox"]
+
+[extra]
+toc = true
+zenn_applause = true
+comments = [
+ {url = "https://www.reddit.com/r/firefox/comments/pjozlo/firefox_tricks_efficient_quantumbar_usage/", name = "Reddit"},
+ {url = "https://mastodon.social/@timvisee/106891027024448347", name = "Mastodon"},
+ {url = "https://twitter.com/likecaffeinated/status/1435260278950801408", name = "Twitter"},
+]
++++
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/header.png", url="/blog/firefox-tricks-quantumbar/header.png") }}
+
+The Firefox [QuantumBar][firefox-address-bar] (formerly AwesomeBar, or just
+address bar) is surprisingly capable. There's a lot you can do with it to
+quickly navigate through your browser. It's one of the things which makes
+Firefox so comfy to me.
+
+I like to be as quick as possible without leaving the keyboard. For this, I use
+_scope characters_, _bookmark keywords_, and _DuckDuckGo bangs_. In this article
+I'll go through these features and hope to show you something new, no add-ons
+required.
+
+
+
+## Restrict characters, scopes
+
+By default, when you type search terms in the address bar, the suggestion list
+shows various suggestions types, including search results, bookmarks, and open
+tabs. I usually find these to be spot-on already.
+
+When looking for a specific type of result through, like an open tab, you can
+speed up the process by adding special characters with a whitespace in the
+address bar before (or after) your search terms. Firefox is vague about its
+naming, so I call these scope characters.
+
+Available scope characters:
+
+- `%`: limit to open tabs
+- `^`: limit to browser history
+- `*`: limit to bookmarks
+- `+`: limit to tagged bookmarks
+- `#`: limit to pages where search terms are part of title or tag
+- `$`: limit to pages where search terms are part of the address
+- `?`: limit to search suggestions
+
+Imagine you want to jump to an open Google tab, simply type:
+
+```
+% google
+```
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/tab-google.png", url="/blog/firefox-tricks-quantumbar/tab-google.png") }}
+
+Or you want to find an _MDN_ bookmark on _Progressive web apps_ you added to
+your huge bookmarks collection ages ago. [Proton][proton] even shows a fancy
+hint now:
+
+```
+* mdn pwa
+```
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/bookmark-mdn-pwa.png", url="/blog/firefox-tricks-quantumbar/bookmark-mdn-pwa.png") }}
+
+Simple! By the way, use Ctrl+L or
+F6 to quickly focus the address bar.
+
+Firefox documentation lists this feature [here][search-chars]. It has changed a
+bit during Firefox's lifetime as you can see [here][search-chars-old].
+
+## Bookmark keywords, smart triggers
+
+Almost every browser supports bookmarks. However, Firefox allows you to
+configure a bookmark keyword to make them easily accessible and interactive.
+
+The keyword acts as a trigger in the address bar. You basically extend the scope
+characters above with your bookmarks to your liking.
+
+You may add a new bookmark through the bookmark manager (Ctrl+Shift+O) or editing an
+existing one, then the _Keyword_ field shows up. This is where you specify your
+keyword term to trigger it with. You may put `%s` in the bookmark URL, which
+will be replaced with what you type after the trigger keyword, making them
+interactive.
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/bookmark-edit.png", url="/blog/firefox-tricks-quantumbar/bookmark-edit.png") }}
+
+The simplest example would be to quickly jump to your favorite site. Set a
+bookmark with the `d` keyword. Type `d` in your address bar and hit enter to
+instantly jump to your bookmarked webpage. Though this isn't so interesting.
+
+Here are some better examples I use a lot:
+
+#### Bookmark: specific search engine
+
+Quickly search with a specific search engine:
+
+```
+d what is the answer to life
+wiki bikeshedding
+```
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/bookmark-search.png", url="/blog/firefox-tricks-quantumbar/bookmark-search.png") }}
+
+
+Tap to see bookmark config
+
+> Keyword: `d`
+> Url: `https://duckduckgo.com/?q=%s`
+>
+> Keyword: `wiki`
+> Url: `https://en.wikipedia.org/wiki/Special:Search/%s`
+
+
+
+#### Bookmark: jump to subreddit
+
+Quickly jump to your favorite subreddit:
+
+```
+r/ linuxmasterrace
+```
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/bookmark-reddit.png", url="/blog/firefox-tricks-quantumbar/bookmark-reddit.png") }}
+
+
+Tap to see bookmark config
+
+> Keyword: `r/`
+> Url: `https://reddit.com/r/%s`
+
+
+
+#### Bookmark: translate
+
+Quickly translate something between English and Dutch:
+
+```
+ennl bikeshedding
+nlen fietsenstalling
+```
+
+{{ fit_image(path="blog/2021-09-07_firefox-tricks-quantumbar/bookmark-translate.png", url="/blog/firefox-tricks-quantumbar/bookmark-translate.png") }}
+
+
+Tap to see bookmark config
+
+> Keyword: `ennl`
+> Url: `https://translate.google.com/#view=home&op=translate&sl=en&tl=nl&text=%s`
+>
+> Keyword: `nlen`
+> Url: `https://translate.google.com/#view=home&op=translate&sl=nl&tl=en&text=%s`
+
+
+
+## DuckDuckGo bangs
+
+For the final trick, we use the default search engine to extend address bar
+functionality.
+
+[DuckDuckGo][duckduckgo] provides an insane amount of [`!bangs`][bangs]. These
+function similar to bookmark keywords, but are preconfigured. DuckDuckGo has
+more than 13K bangs [available][bangs] for popular sites, most you can come up
+with _just work_. Simply prefix your search terms with the appropriate bang and
+hit Enter. Super powerful!
+
+The only caveat is that it requires you to
+[change][firefox-change-search-engine] your default search engine to DuckDuckGo
+to use it easily.
+
+Here are some example queries:
+
+- [`!g Amsterdam`](https://ddg.gg/?q=!g+Amsterdam): Search `Amsterdam` via Google, if DuckDuckGo couldn't find it
+- [`!maps Amsterdam`](https://ddg.gg/?q=!maps+Amsterdam): Show `Amsterdam` on Google Maps
+- [`!so Rust string character count`](https://ddg.gg/?q=!so+Rust+string+character+count): Find a solution on StackOverflow
+- [`!rust String`](https://ddg.gg/?q=!rust+String): Search `String` in Rust documentation
+- [`!timer 3m`](https://ddg.gg/?q=!timer+3m): Set a 3-minute timer
+- [`!wa solve x^2+4x+6=0`](https://ddg.gg/?q=!wa+solve+x^2+%2B+4x+%2B+6+%3D+0): Solve equation with WolframAlpha
+- [`!bangs`](https://ddg.gg/?q=!bangs): _there's so many more..._
+
+Lastly, not clearly listed, DuckDuckGo has an _I'm Feeling Ducky_ feature using
+just the `!` bang. It will redirect you to the first search result instantly:
+
+- [`! Coldplay magic`](https://ddg.gg/?q=!+Coldplay+magic)
+- [`! jamming cat`](https://ddg.gg/?q=!+jamming+cat)
+- [`! timvisee`](https://ddg.gg/?q=!+timvisee)
+
+I hope you've learned something new and useful to be just that little bit more
+efficient using the Firefox QuantumBar.
+
+[firefox-address-bar]: https://firefox-source-docs.mozilla.org/browser/urlbar/index.html#address-bar
+[firefox-change-search-engine]: https://support.mozilla.org/en-US/kb/change-your-default-search-settings-firefox
+[search-chars-old]: http://kb.mozillazine.org/Location_Bar_search#Location_Bar_search_.28internal_-_Auto_Complete.29
+[search-chars]: https://support.mozilla.org/en-US/kb/address-bar-autocomplete-firefox#w_changing-results-on-the-fly
+[proton]: https://wiki.mozilla.org/Firefox/Proton
+[duckduckgo]: https://duckduckgo.com/
+[bangs]: https://duckduckgo.com/bangs
diff --git a/content/blog/2021-09-07_firefox-tricks-quantumbar/tab-google.png b/content/blog/2021-09-07_firefox-tricks-quantumbar/tab-google.png
new file mode 100644
index 0000000..146ac28
Binary files /dev/null and b/content/blog/2021-09-07_firefox-tricks-quantumbar/tab-google.png differ
diff --git a/themes/zenn/sass/_components.scss b/themes/zenn/sass/_components.scss
index 0c39834..b20a4cd 100644
--- a/themes/zenn/sass/_components.scss
+++ b/themes/zenn/sass/_components.scss
@@ -116,6 +116,21 @@ content {
cursor: pointer;
}
+ kbd.bind > kbd,
+ kbd:not(.bind) {
+ background-color: $color-kbd-bg;
+ border-radius: 3px;
+ border: 1px solid $color-kbd-border;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 lighten($color-kbd-bg, 5%) inset;
+ color: $color-kbd-color;
+ display: inline-block;
+ font-size: .75em;
+ font-weight: 700;
+ line-height: 1;
+ padding: 2px 4px;
+ white-space: nowrap;
+ }
+
#toc-container {
margin-top: 1em;
padding: 1em;
diff --git a/themes/zenn/sass/_config_dark.scss b/themes/zenn/sass/_config_dark.scss
index ea0ad77..eedec6a 100644
--- a/themes/zenn/sass/_config_dark.scss
+++ b/themes/zenn/sass/_config_dark.scss
@@ -12,6 +12,9 @@ $color-header: #CF2B07;
$color-link: #6699cc;
$color-link-hover: lighten($color-link, 15%);
$color-code-bg: $color-main-bg-alt;
+$color-kbd-bg: #333;
+$color-kbd-border: #646464;
+$color-kbd-color: #eee;
// Top logo and landing page
$logo-color: $color-text;
diff --git a/themes/zenn/sass/_config_light.scss b/themes/zenn/sass/_config_light.scss
index b0c9274..60a1f88 100644
--- a/themes/zenn/sass/_config_light.scss
+++ b/themes/zenn/sass/_config_light.scss
@@ -12,6 +12,9 @@ $color-header: #1d4761; // 1d4761
$color-link: #77660b; // 336ef5
$color-link-hover: darken($color-link, 10%);
$color-code-bg: #1b1b18;
+$color-kbd-bg: #eee;
+$color-kbd-border: #b4b4b4;
+$color-kbd-color: #333;
// Top logo and landing page
$logo-color: $color-header;
diff --git a/themes/zenn/templates/rss.xml b/themes/zenn/templates/rss.xml
index 9398d74..74cc3af 100644
--- a/themes/zenn/templates/rss.xml
+++ b/themes/zenn/templates/rss.xml
@@ -14,7 +14,7 @@
{{ page.date | date(format="%a, %d %b %Y %H:%M:%S %z") }}
{{ page.permalink | safe }}
{{ page.permalink | safe }}
- {% if page.summary %}{{ page.summary }}{% else %}{{ page.content }}{% endif %}
+ {{ page.content }}
{% endfor %}