Plugins: create clickable anchor links #369

harding · 2020-03-11T17:56:29Z

On Twitter, @Christewart suggested adding hover links to our content similar to those GitHub automatically generates for its readme-style documentation. I think that's a good idea, but in addition to the subheads people expect to have anchors, we also automatically generate anchors for most of our bullet lists. Thinking about how to add links for those without making things too unsightly, I had the idea to replace the bullet point (•) with a clickable link icon (🔗). For example:

jnewbery · 2020-03-11T20:14:39Z

Concept ACK. I do the right click->inspect element->copy id tag dance frequently, so even if it's only for selfish reasons, I like this.

I clicked around a bit and most of the pages look good. I checked https://deploy-preview-369--bitcoinops.netlify.com/en/newsletters/2019/12/28/#contents and some of those contents entries don't have a generated link. It also seems weird to have links generated for the table of contents.

bitschmidty · 2020-03-12T16:01:14Z

Was just playing with an alternative where the icon appears at the end of the element when you hover the text. Hover helps with keeping the clutter down. But might not be as intuitive.

Any feedback on that usability approach? Not great for mobile (maybe even better disabled for mobile)

harding · 2020-03-12T17:05:09Z

@bitschmidty how does it link to the particular element? Most things I've seen of that nature link to the element by its xpath, which works for perfectly static content but which will break in a way if anything on the page changes.

As you mention, I don't like hover things because they don't work on mobile (and, when possible, I prefer to keep the site looking basically the same on mobile as desktop, besides basic reflowing and resizing).

Finally, I'm guessing your solution may use JS. As someone who browses as much as possible with NoScript, I prefer to minimize the use of JS for basic site features.

That all said, I really appreciate you experimenting with other approaches! (FYI, although it suffers from the problems described above, a really nifty feature is linkable highlighting as implement on SNI; e.g.: https://satoshi.nakamotoinstitute.org/emails/cryptography/1/#selection-95.4-99.10 )

jonatack · 2020-03-16T18:26:21Z

_plugins/auto-anchor.rb

        ## Use Liquid/Jekyll slugify filter to choose our id
-        id_prefix = '- {:#{{ "' + title + '" | slugify: "latin" }}} '
+        slug = '#{{ "' + title + '" | slugify: "latin" }}'
+        id_prefix = '- {:' + slug + ' .foo} <a href="' + slug +'" class="bar">🔗</a>'


I'm not sure how Jekyll plugins work yet, but if this is dynamically run and performance matters, it should be faster to use string interpolation, e.g. "#{title} #{slug}" (which is the usual practice), rather than concatenation with the + operator.

Jekyll is a static site render (although it has a live preview mode for development), so none of the code is run dynamically. That said, I agree that this is getting hairy. Using string concatenation made sense to me for the first version of this plugin when I just wanted to avoid having to escape quotes, but we keep doing more stuff, so now I agree it's time to bite the bullet and format it properly.

@jnewbery pointed me to this in order to work on something similar for the review club.

Here it is, if helpful (don't hesitate to review/improve my regex): https://github.com/bitcoin-core-review-club/bitcoin-core-review-club.github.io/pull/147/files

harding · 2020-04-09T15:10:04Z

This is now ready for full review. I've addressed @jnewbery's comment about the year-in-review newsletter and @jonatack's code formatting issue. I've also resolved the test failure---it looks Jekyll was silently not creating anchor links for cases where the entire anchor (id tag) was numbers (which is not allowed in HTML) or was empty (which often happens with the Japanese translations). Since this PR links to those non-existent elements, that produced an broken link which our tests created. I've fixed all of those and the tests should catch any similar problems in the future. We already have documentation about adding text in HTML comments into to effect links in https://github.com/bitcoinops/bitcoinops.github.io/blob/master/CONTRIBUTING.md

jnewbery

This is great. Thanks, @harding. A few comments inline.

jnewbery · 2020-04-10T14:58:03Z

_posts/ja/newsletters/2019-10-16-newsletter-ja.md

      [ニュースレター＃59][32 byte pubkey]に記載)

-    - P2SHでラップされたtaprootアドレスのサポートはなし (      [#65][p2sh-wrapped taproot]で説明)
+    - P2SHでラップされたtaprootアドレスのサポートはなし (      [<!--n1-->#65][p2sh-wrapped taproot]で説明)


These sub-bullets should all be changed to non-anchor bullets, as should the equivalents in the english-language newsletter. See https://deploy-preview-369--bitcoinops.netlify.com/en/newsletters/2019/10/16/#taproot-update.

jnewbery · 2020-04-10T15:11:40Z

_posts/ja/newsletters/2019-10-16-newsletter-ja.md

 は、バックアップが改善され、ゴシップデータの同期がより帯域幅効率的になります（特にモバイルデバイス上のノードなどの非ルーティングノード用）。またその他の多くの新機能とバグ修正が含まれています。

- **リリース候補（RC）のレビュー:** 2つの主要なBitcoinインフラストラクチャプロジェクトが、ソフトウェアの次のバージョンのリリース候補（RC）を発表しました。一般公開前に問題を発見して修正できるよう、開発者と経験豊富なユーザーはこれらのRCのテストを支援するようお願いします。
+- **<!--n1-->リリース候補（RC）のレビュー:** 2つの主要なBitcoinインフラストラクチャプロジェクトが、ソフトウェアの次のバージョンのリリース候補（RC）を発表しました。一般公開前に問題を発見して修正できるよう、開発者と経験豊富なユーザーはこれらのRCのテストを支援するようお願いします。


I'm not sure this is needed, since there are no other anchors on this page called with id #rc. The link currently works on the live site: https://bitcoinops.org/ja/newsletters/2019/10/16/#rc

How did you find where to add these comments?

How did you find where to add these comments?

The failing HTMLProofer test identified the broken file but not the line number; I opened the files and guess where the links were broken. Looks like I guessed wrong here. I'll back out this particular change.

jnewbery · 2020-04-10T15:12:01Z

_posts/ja/newsletters/2019-10-16-newsletter-ja.md

    Wuilleのメールと更新されたBIPは、これらの各決定の理論的根拠と、それらに関する以前の議論へのリンクを提供しています。

- **デフォルトのLN feeの引き上げ提案:** Rusty Russellは、ノードが使用するデフォルトのチャネル内feeを、1,000ミリサトシ（msat）+100万分の1（ppm）から5,000 msat+500 ppmに増やすことを提案しました。彼は、現在のデフォルトではユーザーが料金を引き下げる余地があまりなく、現在高い料金を請求しているノードが主流である要因として多くのユーザーが現在料金に敏感ではないことを指摘しています。このメールには、さまざまな金額をUSD単位で10,000ドル/ BTCで送金するための新旧のコストを見積もるチャートが記載されています。
+- **<!--n2-->デフォルトのLN feeの引き上げ提案:** Rusty Russellは、ノードが使用するデフォルトのチャネル内feeを、1,000ミリサトシ（msat）+100万分の1（ppm）から5,000 msat+500 ppmに増やすことを提案しました。彼は、現在のデフォルトではユーザーが料金を引き下げる余地があまりなく、現在高い料金を請求しているノードが主流である要因として多くのユーザーが現在料金に敏感ではないことを指摘しています。このメールには、さまざまな金額をUSD単位で10,000ドル/ BTCで送金するための新旧のコストを見積もるチャートが記載されています。


This is also not needed since the existing anchor id #ln-fee works.

jnewbery · 2020-04-10T15:12:39Z

_posts/ja/newsletters/2019-10-16-newsletter-ja.md

    C-LightningのメンテナーであるZmnSCPxjとEclairのメンテナーであるPierre-Marie Padiouは、提案への支持を示しました。LNDのメンテナーであるOlaoluwa Osuntokunは、提案の背後にある要因にはいくつかの欠陥があると考え、代わりに「将来のルーティングノードオペレーターにベストプラクティスへの教育や分析ツール提供などを行い、市場参加者に任せて、安定した経済的合理的な料金にすること」を主張しました。この記事の執筆時点では、このトピックに関する議論は継続中です。

- **会議概要：暗号経済システムサミット:**MITキャンパスで先週末に開催されたこの会議では、暗号通貨の有用性と安全性の確保に関するさまざまなトピックを取り上げました。  [DCIのYouTubeチャンネル][css vids]にてビデオは視聴可能となっており、いくつかの講演の[トランスクリプト][css ts]はBryan Bishopなどによって提供されました。 [講演の内容][css ts]のうちの次の3つのトピックは、このニュースレターの読者にとって特に技術的な関心があると思われます。
+- **<!--n3-->会議概要：暗号経済システムサミット:**MITキャンパスで先週末に開催されたこの会議では、暗号通貨の有用性と安全性の確保に関するさまざまなトピックを取り上げました。  [DCIのYouTubeチャンネル][css vids]にてビデオは視聴可能となっており、いくつかの講演の[トランスクリプト][css ts]はBryan Bishopなどによって提供されました。 [講演の内容][css ts]のうちの次の3つのトピックは、このニュースレターの読者にとって特に技術的な関心があると思われます。


This is required. Should we try to make the anchor ids a bit more meaningful (eg change this to #mit) or does that not seem worthwhile?

Oh, sure, meaningful is better than meaningless, but for a lot of these I'll need to cross-check the English (or use Google Translate) to determine what the context is---and that didn't seem worth it for anchors nobody previously noticed were missing.

jnewbery · 2020-04-10T15:24:37Z

_plugins/auto-anchor.rb

        ## Use Liquid/Jekyll slugify filter to choose our id
-        id_prefix = '- {:#{{ "' + title + '" | slugify: "latin" }}} '
+        slug = "\#{{ \"#{title}\" | slugify: 'latin' }}"
+        id_prefix = "- {:#{slug} .anchor-list} <a href=\"#{slug}\" class=\"anchor-list-link\">🔗</a>"


Now that I've looked at the preview for a bit of time, I don't really like covering the newsletters with the chain glyph. I also don't think it's immediately intuitive that it's a link to that section of the document. For example, the links in the 'notable commits' section (eg https://deploy-preview-369--bitcoinops.netlify.com/en/newsletters/2019/10/16/#bitcoin-core-15437) could easily be interpreted as a link to the PR itself.

I'm leaning more towards just having these links as bullets, perhaps styled in blue as a subtle hint that they're clickable. I think that's much more pleasant to look at and doesn't display a minor feature in front of everyone the whole time:

Suggested change

id_prefix = "- {:#{slug} .anchor-list} <a href=\"#{slug}\" class=\"anchor-list-link\">🔗</a>"

id_prefix = "- {:#{slug} .anchor-list} <a href=\"#{slug}\" class=\"anchor-list-link\">●</a>"

This is obviously just an aesthetic preference on my part. Let me know what you think.

I like that idea. I'll give it a try and see how it looks.

harding · 2020-04-10T18:49:11Z

Forced pushed changes: removed unnecessary changes identified by @jnewbery and changed the anchor link to a blue bullet per his suggestion. I think that looks a lot nicer. To help keep everything looking consistent, I changed all of our other bullets to also use the filled circle (disc) icon (we previously used hollow circles for sub items).

jnewbery

A couple of suggestions inline. I've also pushed a commit that makes the japanese anchors more meaningful.

jnewbery · 2020-04-10T21:06:52Z

assets/css/main.scss

+  margin-left: -13px;
+}
+
+li {


This accidentally catches ordered list items as well (see the nested list in https://deploy-preview-369--bitcoinops.netlify.com/en/newsletters/2020/01/15/#discussion-of-soft-fork-activation-mechanisms for example). I think you want to specify this as ul.li

jnewbery · 2020-04-10T21:13:52Z

_posts/ja/newsletters/2020-02-05-newsletter-ja.md

    - nLockTimeフィールドの値を直近または今後のブロックの高さに設定してアンチ・フィー・スナイピングを実装する提案。これによりブロックチェーンの再編成を阻害するのに役立ち、トランザクションが既にアンチ・フィー・スナイピングを実装している他のウォレットとのファンディング・トランザクションの作成にも役立ちます（LNDのスイープモード含む。[Newsletter #18][news18 lnd afs]参照）

-    - より広義には、他の共同トランザクション作成システム（[コインジョイン][topic coinjoin]・ソフトウェアなど）を使用して、トランザクションのフリー・パラメーター（nVersion、nSequence、nLockTime、インプット順序、アウトプット順序など）に共通の値のセットを実装する提案。これにより、LNファンディング・トランザクションが作成されていることを示す明確なインジケーターが生成されなくなります（特に[taproot][topic taproot]が採用された場合、相互ルートLNのクローズトランザクションはシングルシグ支出のように見えるため）。
+    - より広義には、他の共同トランザクション作成システム（[<!--n1-->コインジョイン][topic coinjoin]・ソフトウェアなど）を使用して、トランザクションのフリー・パラメーター（nVersion、nSequence、nLockTime、インプット順序、アウトプット順序など）に共通の値のセットを実装する提案。これにより、LNファンディング・トランザクションが作成されていることを示す明確なインジケーターが生成されなくなります（特に[taproot][topic taproot]が採用された場合、相互ルートLNのクローズトランザクションはシングルシグ支出のように見えるため）。


Not required. This sub-list (and the equivalent in the english version at https://deploy-preview-369--bitcoinops.netlify.com/en/newsletters/2020/02/05/#interactive-construction-of-ln-funding-transactions) should be converted to non-anchor lists.

harding · 2020-04-13T11:00:12Z

Forced pushed with no changes over @jnewbery's previous commit (I just merged that code into the relevant previous commits and added a Co-Authored-By tag). I think that resolves all pending concerns. (Thanks, John!)

Co-Authored-By: John Newbery <[email protected]>

jnewbery · 2020-04-13T16:40:04Z

force-pushed some more very minor changes. Thanks for persevering with this, @harding !

* German translation for Newsletter #369 * fix broken link * Update _posts/de/newsletters/2025-08-29-newsletter.md Co-authored-by: garfiel-d <[email protected]> * Update _posts/de/newsletters/2025-08-29-newsletter.md Co-authored-by: garfiel-d <[email protected]> --------- Co-authored-by: garfiel-d <[email protected]>

harding force-pushed the 2020-03-clickable-anchors branch from d853893 to 2f0e7f6 Compare March 11, 2020 18:01

jnewbery added the website General website changes and maintenance label Mar 12, 2020

jonatack reviewed Mar 16, 2020

View reviewed changes

harding force-pushed the 2020-03-clickable-anchors branch from 2f0e7f6 to 8f3801f Compare April 9, 2020 15:00

harding changed the title ~~PoC DO NOT MERGE: add clickable anchor links~~ Plugins: create clickable anchor links Apr 9, 2020

jnewbery reviewed Apr 10, 2020

View reviewed changes

harding force-pushed the 2020-03-clickable-anchors branch from 8f3801f to 57b6e87 Compare April 10, 2020 18:44

jnewbery reviewed Apr 10, 2020

View reviewed changes

harding force-pushed the 2020-03-clickable-anchors branch from 455a2df to ee402d9 Compare April 13, 2020 10:57

harding mentioned this pull request Apr 13, 2020

Add helper function for creating Review Club <details> lists #387

Merged

2 tasks

harding and others added 3 commits April 13, 2020 12:39

Newsletters: create missing anchors

1aab1bc

Co-Authored-By: John Newbery <[email protected]>

News78: drop anchors for ToC list

f06b215

Plugins: create clickable anchor links

154bfe7

jnewbery force-pushed the 2020-03-clickable-anchors branch from ee402d9 to 154bfe7 Compare April 13, 2020 16:39

jnewbery merged commit c062104 into bitcoinops:master Apr 13, 2020

bitschmidty mentioned this pull request Apr 22, 2020

Email Build: Strip anchors from bullets #393

Closed

harding mentioned this pull request Apr 22, 2020

Preview: allow setting base URI to https://bitcoinops.org #389

Merged

harding mentioned this pull request Apr 30, 2020

Fix self-linking bullets in RSS feed #399

Open

Walpurga03 added a commit to Walpurga03/bitcoinops.github.io that referenced this pull request Sep 1, 2025

German translation for Newsletter bitcoinops#369

7862254

	id_prefix = "- {:#{slug} .anchor-list} <a href=\"#{slug}\" class=\"anchor-list-link\">🔗</a>"
	id_prefix = "- {:#{slug} .anchor-list} <a href=\"#{slug}\" class=\"anchor-list-link\">●</a>"

Plugins: create clickable anchor links #369

Plugins: create clickable anchor links #369

Uh oh!

Conversation

harding commented Mar 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jnewbery commented Mar 11, 2020

Uh oh!

bitschmidty commented Mar 12, 2020

Uh oh!

harding commented Mar 12, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harding commented Apr 9, 2020

Uh oh!

jnewbery left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jnewbery Apr 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harding commented Apr 10, 2020

Uh oh!

jnewbery left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harding commented Apr 13, 2020

Uh oh!

jnewbery commented Apr 13, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

harding commented Mar 11, 2020 •

edited

Loading

jnewbery Apr 10, 2020 •

edited

Loading