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

Markdown generates anchor links in headers #15

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Markdown generates anchor links in headers #15

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e00b41
Markdown generates anchor links in headers
infogulch Apr 29, 2022
d27fba6
Run prettier
infogulch Apr 29, 2022
45620b3
Jump to hash after page loads
infogulch May 2, 2022
0ae1e4d
Clean up css
infogulch May 6, 2022
13784c1
Adjust filter, transition
infogulch May 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@
"katex": "^0.15.3",
"nanoid": "^3.3.2",
"percival-wasm": "file:./crates/percival-wasm/pkg",
"rehype-autolink-headings": "^6.1.1",
"rehype-katex": "^6.0.2",
"rehype-slug": "^5.0.1",
"rehype-stringify": "^9.0.3",
"remark-math": "^5.1.1",
"remark-parse": "^10.0.1",
Expand Down
7 changes: 6 additions & 1 deletion src/components/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { onMount } from "svelte";
import { onMount, tick } from "svelte";
import type { Readable } from "svelte/store";
import { NotebookState } from "@/lib/notebook";
import { createNotebookStore } from "@/lib/stores";
Expand Down Expand Up @@ -32,6 +32,11 @@
}
notebookStore = createNotebookStore(NotebookState.load(unmarshal(text)));
}
// Navigate to hash after the page loads
if (window.location.hash) {
await tick();
document.getElementById(window.location.hash.slice(1))?.scrollIntoView();
}
});

/** Handler to prompt the user before navigating away from the page. */
Expand Down
23 changes: 23 additions & 0 deletions src/components/cell/CellOutput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,27 @@
.markdown-output :global(code) {
@apply text-sm text-gray-900;
}

.markdown-output
:global(:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link) {
display: inline;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
background-repeat: no-repeat;
background-position: center center;
background-size: 0.8em;
height: 0.8em;
width: 0.8em;
padding-left: 1em;
padding-right: 0.5em;
cursor: pointer;
infogulch marked this conversation as resolved.
Show resolved Hide resolved
}

.markdown-output
:global(:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link:hover) {
background-size: 0.9em;
height: 0.9em;
width: 0.9em;
infogulch marked this conversation as resolved.
Show resolved Hide resolved
filter: invert(0.1);
Copy link
Owner

Choose a reason for hiding this comment

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

What is filter: invert(0.1)?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is a generic way to 'lighten' the icon on hover without duplicating or parameterizing the svg or hard-coding colors. I changed it to 20% to make it a bit more noticeable. I'm mostly just having fun with css here, we can tune or remove it if you like. 😄

@apply transition-all;
infogulch marked this conversation as resolved.
Show resolved Hide resolved
}
</style>
4 changes: 4 additions & 0 deletions src/lib/text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@ import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkMath from "remark-math";
import remarkRehype from "remark-rehype";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeKatex from "rehype-katex";
import rehypeStringify from "rehype-stringify";

const pipeline = unified()
.use(remarkParse)
.use(remarkMath)
.use(remarkRehype)
.use(rehypeSlug)
.use(rehypeAutolinkHeadings, { behavior: "append" })
.use(rehypeKatex)
.use(rehypeStringify);

Expand Down