feat(gatsby-remark-autolink-headers): Allow `after` option to make icon appear after header text #19937

guyathomas · 2019-12-04T06:56:41Z

Description

Introduce boolean isIconAfterH prop in gatsby-remark-autolink-headers that will place the icon inline, after the header text. ( Defaults to before the title )
Also refactor to absolutely position icon relative to the header ( and make the header position: relative to make this possible. This removes the need for a float 👍 )

pvdz · 2019-12-04T09:44:15Z

packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js

+    .${className}.before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: translateX(-100%);
      padding-right: 4px;
-      margin-left: -20px;
+    }
+    .${className}.after {
+      display: inline-block;
+      padding-left: 4px;


(I should read better)

@fk can you take a quick look at this?

It looks fine to me but I'm not sure if this will be a problem for anything else in the gatsby css world. Cheers

LGTM, but haven't built locally.

pieh · 2019-12-04T14:36:39Z

packages/gatsby-remark-autolink-headers/CHANGELOG.md

+## [2.1.20](2019-12-02)
+
+Allow `after` option where the link will appear inline after the header text
+


Changelog is autogenerated from commit messages, so please don't pre-emptively add to it (it can be edited afterwards if needed)

pieh · 2019-12-04T14:41:37Z

packages/gatsby-remark-autolink-headers/src/index.js

@@ -21,6 +21,7 @@ module.exports = (
    maintainCase = false,
    removeAccents = false,
    enableCustomId = false,
+    after = true,


this changes default behaviour (we should not do that unless we do major version bump for the plugin)

+1 for not introducing a breaking change

pvdz · 2019-12-04T15:51:57Z

@LekoArts raised a good point internally; this can be achieved with css without the need for an option;

.anchor {
    float: none;
    margin-left: 0px;
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px !important;
}

@guyathomas can you let us know whether you feel this sufficiently solves this issue for you?

guyathomas · 2019-12-04T16:46:27Z

Thanks for taking a look! I agree about not making the breaking changes.

I'll give that CSS a whirl, but I feel it may not achieve exactly the same behaviour ( will be positioned vertically in the middle of the header, fixed on the right hand side - rather than inline (and next to ) the last letter of the header.

I'll report back!

muescha · 2019-12-05T05:21:49Z

packages/gatsby-remark-autolink-headers/README.md

@@ -58,6 +58,7 @@ Note: if you are using `gatsby-remark-prismjs`, make sure that it’s listed aft
 - `maintainCase`: Boolean. Maintains the case for markdown header (optional)
 - `removeAccents`: Boolean. Remove accents from generated headings IDs (optional)
 - `enableCustomId`: Boolean. Enable custom header IDs with `{#id}` (optional)
+- `isIconAfterH`: Boolean. Enable the anchor icon to be inline at the end of the header text


i guess this is an optional option?

Suggested change

- `isIconAfterH`: Boolean. Enable the anchor icon to be inline at the end of the header text

- `isIconAfterH`: Boolean. Enable the anchor icon to be inline at the end of the header text (optional)

Great idea! Made changes here 81ade36

Looks like this is still not addressed? I mean appending (optional) to this option description?

packages/gatsby-remark-autolink-headers/README.md

guyathomas · 2019-12-11T23:05:39Z

Mind if i grab another 👀 on this?
@muescha - made your suggested changes in fbc2d1e
@pvdz - made your suggested changes in 1b1a444180e3cc982a61519d0c8400eae6bf5049
@fk - not sure if you wanted to take another pass on this? I reduced the exposure to non backward compatible changes

The surface area for possible regressions

Headers now all get position: relative in order to be able to absolutely position the icon to the left of the header
The icon is positioned to the left of the header using position absolute rather than floats

The isIconAfterHeader = true state should cause no regressions since it's just additive.

packages/gatsby-remark-autolink-headers/README.md

vladar

Looks good, thanks for this improvement!

gatsbot · 2019-12-24T05:56:45Z

Holy buckets, @guyathomas — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

muescha · 2019-12-24T12:59:40Z

👍

i was thinking a little bit about naming, maybe would be this naming better?

headerIconPosition: "before" #default

headerIconPosition: "after"

guyathomas requested review from a team as code owners December 4, 2019 06:56

pvdz reviewed Dec 4, 2019

View reviewed changes

laurieontech previously approved these changes Dec 4, 2019

View reviewed changes

pieh reviewed Dec 4, 2019

View reviewed changes

pvdz requested a review from fk December 4, 2019 14:40

pieh reviewed Dec 4, 2019

View reviewed changes

guyathomas dismissed laurieontech’s stale review via d8bdd73 December 4, 2019 16:35

guyathomas force-pushed the allow-after-header-link branch from d8bdd73 to 70320fd Compare December 4, 2019 16:42

guyathomas force-pushed the allow-after-header-link branch from 70320fd to 815e547 Compare December 4, 2019 17:47

muescha reviewed Dec 5, 2019

View reviewed changes

packages/gatsby-remark-autolink-headers/README.md Outdated Show resolved Hide resolved

guyathomas force-pushed the allow-after-header-link branch 2 times, most recently from 7782ef7 to 9872992 Compare December 11, 2019 21:04

guyathomas requested review from muescha and pvdz December 11, 2019 23:06

vladar reviewed Dec 23, 2019

View reviewed changes

packages/gatsby-remark-autolink-headers/README.md Outdated Show resolved Hide resolved

guyathomas and others added 7 commits December 23, 2019 11:45

Allow after option for plugin to make icon appear after header text

c9d74c2

Change prop name to be more explicit

0d4607f

Revert default to false and remove CHANGELOG as per PR feedback

a2c3e35

Make new prop name more explicit isIconAfterH > isIconAfterHeader

5079d59

Update snapshots

583f705

Add tests for new prop

c2323ab

Address PR feedback by adding clear 'optional' label to prop description

bd32729

guyathomas force-pushed the allow-after-header-link branch from 3fe151c to bd32729 Compare December 23, 2019 19:45

guyathomas requested review from vladar and pieh December 23, 2019 19:46

vladar approved these changes Dec 24, 2019

View reviewed changes

vladar changed the title ~~Allow after option for plugin to make icon appear after header text~~ feat(gatsby-remark-autolink-headers): Allow after option to make icon appear after header text Dec 24, 2019

vladar added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Dec 24, 2019

gatsbybot merged commit a6774ca into gatsbyjs:master Dec 24, 2019

marcinczenko mentioned this pull request Mar 21, 2020

Update package dependencies to the most recent versions confluenza/confluenza#17

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gatsby-remark-autolink-headers): Allow `after` option to make icon appear after header text #19937

feat(gatsby-remark-autolink-headers): Allow `after` option to make icon appear after header text #19937

guyathomas commented Dec 4, 2019 •

edited

Loading

pvdz Dec 4, 2019 •

edited

Loading

pvdz Dec 4, 2019

fk Dec 4, 2019

pieh Dec 4, 2019

pieh Dec 4, 2019

fk Dec 4, 2019

pvdz commented Dec 4, 2019

guyathomas commented Dec 4, 2019

muescha Dec 5, 2019 •

edited

Loading

guyathomas Dec 10, 2019

vladar Dec 23, 2019

guyathomas commented Dec 11, 2019 •

edited

Loading

vladar left a comment

gatsbot bot commented Dec 24, 2019

muescha commented Dec 24, 2019 •

edited

Loading

		## [2.1.20](2019-12-02)

		Allow `after` option where the link will appear inline after the header text

	- `isIconAfterH`: Boolean. Enable the anchor icon to be inline at the end of the header text
	- `isIconAfterH`: Boolean. Enable the anchor icon to be inline at the end of the header text (optional)

feat(gatsby-remark-autolink-headers): Allow after option to make icon appear after header text #19937

feat(gatsby-remark-autolink-headers): Allow after option to make icon appear after header text #19937

Conversation

guyathomas commented Dec 4, 2019 • edited Loading

Description

pvdz Dec 4, 2019 • edited Loading

Choose a reason for hiding this comment

pvdz Dec 4, 2019

Choose a reason for hiding this comment

fk Dec 4, 2019

Choose a reason for hiding this comment

pieh Dec 4, 2019

Choose a reason for hiding this comment

pieh Dec 4, 2019

Choose a reason for hiding this comment

fk Dec 4, 2019

Choose a reason for hiding this comment

pvdz commented Dec 4, 2019

guyathomas commented Dec 4, 2019

muescha Dec 5, 2019 • edited Loading

Choose a reason for hiding this comment

guyathomas Dec 10, 2019

Choose a reason for hiding this comment

vladar Dec 23, 2019

Choose a reason for hiding this comment

guyathomas commented Dec 11, 2019 • edited Loading

vladar left a comment

Choose a reason for hiding this comment

gatsbot bot commented Dec 24, 2019

muescha commented Dec 24, 2019 • edited Loading

feat(gatsby-remark-autolink-headers): Allow `after` option to make icon appear after header text #19937

feat(gatsby-remark-autolink-headers): Allow `after` option to make icon appear after header text #19937

guyathomas commented Dec 4, 2019 •

edited

Loading

pvdz Dec 4, 2019 •

edited

Loading

muescha Dec 5, 2019 •

edited

Loading

guyathomas commented Dec 11, 2019 •

edited

Loading

muescha commented Dec 24, 2019 •

edited

Loading