Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Automatically add nice header linking behavior #280

Merged
merged 4 commits into from Mar 4, 2019
Merged

Automatically add nice header linking behavior #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8b579e2
Make link headers look and work more like GitHub's
nex3 Jan 9, 2019
9cc437d
Automatically generate links for all headers
nex3 Jan 9, 2019
59d6b6a
Flash headers when they're selected
nex3 Jan 9, 2019
093eb4d
update readme
jina Mar 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -3,5 +3,7 @@
The Sass website is open source. See a typo? Have a UX improvement? Check out
the [Contributing guide][contrib]! Also, check out the [Style Guide][sg].

Thanks!

[contrib]: https://github.com/sass/sass-site/blob/master/CONTRIBUTING.md
[sg]: http://sass-lang.com/styleguide
12 changes: 12 additions & 0 deletions config.rb
View file
Open in desktop
Expand Up @@ -61,3 +61,15 @@
body
end
end

after_render do |content, path, locs|
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lint/UnusedBlockArgument: Unused block argument - locs. If it's necessary, use _ or _locs as an argument name to indicate that it won't be used.

# Only modify the original page's rendering.
next if path.include?("source/layouts/")

content.gsub(%r{^<(h[0-6])(.*?)</\1>}m) do |header_text|
header = Nokogiri::HTML::DocumentFragment.parse(header_text).children.first
id = header.attr(:id)
header.children.before("<a class='anchor' href='##{id}'></a>") if id
header.to_html
end
end
52 changes: 34 additions & 18 deletions source/assets/css/components/_link-header.scss
View file
Open in desktop
@@ -1,26 +1,42 @@
.sl-c-link-header {

a {
h1, h2, h3, h4, h5, h6 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Each selector in a comma sequence should be on its own single line

a.anchor {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.

display: block;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered background, border, display, float, margin, vertical-align, width

float: left;
vertical-align: middle;
margin: {
left: -1.5rem;
top: -3px;
}
width: 1.5rem;
background: none;
border: 0;
display: flex;
justify-content: space-between;
align-items: center;

&:after {
margin: {
right: .5rem;
left: 1rem;
};
font-size: 1rem;
content: "\1F517";
&::after {
visibility: hidden;
font: {
size: 1rem;
weight: normal;
}
content: "\1F517";
}
}

&:hover a.anchor::after {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.

visibility: visible;
}

&:target {
animation-name: highlight-header;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered animation-duration, animation-name

animation-duration: 5s;
}
}

&:hover,
&:focus {
background: none;
@keyframes highlight-header {
from {
background-color: $sl-color--dawn-pink;
}

&:after { visibility: visible; }
}
to {
background-color: unset;
}
}
15 changes: 6 additions & 9 deletions source/styleguide/components.html.haml
View file
Open in desktop
Expand Up @@ -37,17 +37,14 @@ title: Components
.sl-c-introduction
%p= lorem.paragraph

%h2.sl-c-link-header
= link_to '#' do
%span Link Header 2
%h2#link-header-2
Link Header 2

%h3.sl-c-link-header
= link_to '#' do
%span Link Header 3
%h3#link-header-3
Link Header 3

%h4.sl-c-link-header
= link_to '#' do
%span Link Header 4
%h4#link-header-4
Link Header 4

.sl-c-list-navigation-wrapper
:markdown
Expand Down