From 64388ab322072034342612fee1204f2ba2a51fd6 Mon Sep 17 00:00:00 2001 From: Verity <954902+verityj@users.noreply.github.com> Date: Tue, 27 Jun 2023 16:35:10 -0400 Subject: [PATCH] Link to the very top of page on a GitHub page --- _posts/2023-06-27-links.md | 117 +++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 _posts/2023-06-27-links.md diff --git a/_posts/2023-06-27-links.md b/_posts/2023-06-27-links.md new file mode 100644 index 0000000..d577b6c --- /dev/null +++ b/_posts/2023-06-27-links.md @@ -0,0 +1,117 @@ +--- +layout: post +parent: Markdown +title: Link to the very top of page on a GitHub page +date: 2023-06-27 +last_modified_date: 2023-06-27 +nav_order: 4 +--- + +There is no default way to point to the very top of a blog post or a page in Markdown. But we can combine two ideas to accomplish this. + +The convenience of markdown is that once we start writing an article and title subsections, they become automatically linkable from anywhere else. So if I want to say (see section above), I type: + +``` +see [section above](#name-of-section-above) +``` + +There are certain rules about what we type inside those parentheses that is a link ID: + +- start with a `#` - only one! Regardless of which level section you are pointing to. For example, if that section above is `######` I would still type only one hashtag when linking to it. +- type every word of the title in lowercase letters. +- spaces in the actual title become dashes in the link ID. + +As GitHub pages are built, these links are automagically assigned into html links. So we can keep referring back and forth to any section of the blog page. + +## But how to link to the very top? + +Typically, I assign a **title** to a post or page in the [front matter] of the document (that is all the information we put at the very top in between lines of three dashes `---`). That particular heading does not get assigned a linkable ID, so we cannot just type: + +``` +[Back to top](#title-of-page) +``` + +... and expect to jump right back to the top. For that, I had to manually assign an ID to something at the top of every page. + +I edited the basic layout that contains the header of the website which is applied globally. To a top section there, I added + +``` +id="top-of-page" +``` + +For example, `` or whatever you choose. + +Now, I can type `[Back to top](#top-of-page)` and that link will always jump to the very start of the page. Which is sometimes preferable than having a link to some top section like the Table of contents, if there is some introductory text above it and you want an option to let readers just go to top and see everything on your page again. + +## Resource + +- [front matter] documentation + +[front matter]: https://jekyllrb.com/docs/front-matter/ + + + + + +There are multiple repositories available, and websites that are set up to help us code the emoji symbols into GitHub pages. But are they needed? + +❓ +{: .text-center } + +## Official instructions + +Let's start with the proper way. First of all, [Jekyll markdown support] is clear that emoji codes are not automatically supported. + +To enable support, there is [jemoji] plugin. All you have to do is add it to your `_config.yml` plugin list: +``` +plugins: + - jemoji +``` + +It is also officially listed as a [jemoji ruby gem]. + +And then you can type out any emoji code and it will become the symbol in the rendered page. Beautiful. + +## Some sites with nice emoji code lists: + +1. [RXaviers gist] list with images next to each code +1. [Emoojees] +1. [getemoji] + +... you get the idea. + +## But why not use the default Emoji menu and do the same? + +But what if we skipped all the above and just typed up our markdown files in Xcode or GitHub website or other rich text editor (admittedly, I did not check the different software extensively). + +If I want an emoji added, I hit an emoji shortcut (Mac default: `command (⌘)` - `control` - `spacebar`. Or you can assign the `globe / fn` key to open the emoji menu. That's how I just inserted the command symbol above and it works. If it is not among my recent symbols, I can start typing a search. + +So, do we really need to go through all the work in coding each emoji manually? + +## Screenshots, to clarify + +Emoji menu in action: + + + +Accessing from the Input menu (if enabled): + + + + +Setting up to access with the Globe / fn key: + + +## Resources + +- Check out the [Apple help page on emojis and symbols]. +- [Jekyll markdown support] +- [Apple help page on emojis and symbols] + +[Jekyll markdown support]: https://www.markdownguide.org/tools/jekyll/ +[jemoji]: https://github.com/jekyll/jemoji +[RXaviers gist]: https://gist.github.com/rxaviers/7360908 +[jemoji ruby gem]: https://rubygems.org/gems/jemoji +[getemoji]: https://getemoji.com +[Emoojees]: https://emoojees.com +[Apple help page on emojis and symbols]: https://support.apple.com/guide/mac-help/use-emoji-and-symbols-on-mac-mchlp1560/mac