Skip to content

Commit

Permalink
feat(MDX-Anchor): add click-able link for headings (#877)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabertazimi
sabertazimi authored May 28, 2022
1 parent 2a66b71 commit ac813bc
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 24 deletions.
8 changes: 4 additions & 4 deletions components/Article/__snapshots__/Article.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
</a>
</span>
<h1
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-48"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-48"
>
1 Basic Notes
</h1>
Expand Down Expand Up @@ -169,7 +169,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
>
<article>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-24"
>
1 Basic Notes
</h2>
Expand Down Expand Up @@ -465,7 +465,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
</a>
</span>
<h1
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-48"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-48"
>
1 Basic Notes
</h1>
Expand Down Expand Up @@ -594,7 +594,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
>
<article>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-24"
>
1 Basic Notes
</h2>
Expand Down
4 changes: 2 additions & 2 deletions components/Headings/Heading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const Heading = ({
<Typography.Title
{...props}
className={cx(
'mb-6',
`after:ml-1 hover:after:content-['#'] hover:after:text-primary`,
'relative mb-6',
'after:ml-1 after:text-primary hover:after:content-["#"]',
'dark:text-light',
className
)}
Expand Down
12 changes: 6 additions & 6 deletions components/Headings/__snapshots__/Headings.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Headings should render correctly (snapshot) 1`] = `
<div>
<h1
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-48"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-48"
>
Heading
</h1>
Expand All @@ -13,7 +13,7 @@ exports[`Headings should render correctly (snapshot) 1`] = `
exports[`Headings should render correctly (snapshot) 2`] = `
<div>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-24"
>
Heading
</h2>
Expand All @@ -23,7 +23,7 @@ exports[`Headings should render correctly (snapshot) 2`] = `
exports[`Headings should render correctly (snapshot) 3`] = `
<div>
<h3
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-12"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-12"
>
Heading
</h3>
Expand All @@ -33,7 +33,7 @@ exports[`Headings should render correctly (snapshot) 3`] = `
exports[`Headings should render correctly (snapshot) 4`] = `
<div>
<h4
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-6"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-6"
>
Heading
</h4>
Expand All @@ -43,7 +43,7 @@ exports[`Headings should render correctly (snapshot) 4`] = `
exports[`Headings should render correctly (snapshot) 5`] = `
<div>
<h5
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-3"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-3"
>
Heading
</h5>
Expand All @@ -53,7 +53,7 @@ exports[`Headings should render correctly (snapshot) 5`] = `
exports[`Headings should render correctly (snapshot) 6`] = `
<div>
<h5
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-1.5"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light mt-1.5"
>
Heading
</h5>
Expand Down
4 changes: 2 additions & 2 deletions components/PostsGrid/__snapshots__/PostCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`PostCard should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
1 Basic Notes
</h2>
Expand Down Expand Up @@ -120,7 +120,7 @@ exports[`PostCard should render correctly with partial data (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
1 Basic Notes
</h2>
Expand Down
20 changes: 10 additions & 10 deletions components/PostsGrid/__snapshots__/PostsGrid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
1 Basic Notes
</h2>
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
2 Basic Notes
</h2>
Expand Down Expand Up @@ -218,7 +218,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
3 Basic Notes
</h2>
Expand Down Expand Up @@ -318,7 +318,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
4 Basic Notes
</h2>
Expand Down Expand Up @@ -419,7 +419,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
5 Basic Notes
</h2>
Expand Down Expand Up @@ -527,7 +527,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
1 Basic Notes
</h2>
Expand Down Expand Up @@ -623,7 +623,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
2 Basic Notes
</h2>
Expand Down Expand Up @@ -723,7 +723,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
3 Basic Notes
</h2>
Expand Down Expand Up @@ -827,7 +827,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
4 Basic Notes
</h2>
Expand Down Expand Up @@ -928,7 +928,7 @@ exports[`PostsGrid should render correctly (snapshot) 1`] = `
</a>
</span>
<h2
class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light title mt-24"
class="ant-typography relative mb-6 after:ml-1 after:text-primary hover:after:content-[\\"#\\"] dark:text-light title mt-24"
>
5 Basic Notes
</h2>
Expand Down
9 changes: 9 additions & 0 deletions components/Texts/Anchor.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,12 @@
@apply transition-none;
}
}

.anchor[aria-hidden] {
@apply absolute;
@apply w-full h-full md:w-1/4;
}

.anchor[aria-hidden]::before {
@apply hidden;
}

1 comment on commit ac813bc

@vercel
Copy link

@vercel vercel bot commented on ac813bc May 28, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

blog – ./

blog-sabertaz.vercel.app
blog.tazimi.dev
blog-git-main-sabertaz.vercel.app

Please sign in to comment.