Merge branch 'site-sidebar-level-4-headings' of https://github.com/mindrones/svelte into mindrones-site-sidebar-level-4-headings

pull/2406/head
Richard Harris 6 years ago
commit 55bec34a6e

@ -24,7 +24,7 @@ All three sections — script, styles and markup — are optional.
A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
#### 1. `export` creates a component prop
##### 1. `export` creates a component prop
---
@ -48,7 +48,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
</script>
```
#### 2. Assignments are 'reactive'
##### 2. Assignments are 'reactive'
---
@ -68,7 +68,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
</script>
```
#### 3. `$:` marks a statement as reactive
##### 3. `$:` marks a statement as reactive
---
@ -104,7 +104,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
</script>
```
#### 4. Prefix stores with `$` to access their values
##### 4. Prefix stores with `$` to access their values
---
@ -190,4 +190,4 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
color: goldenrod;
}
</style>
```
```

@ -106,6 +106,10 @@
opacity: 1
}
.subsection[data-level="4"] {
padding-left: 1em;
}
.active {
opacity: 1;
/* font-weight: 700; */
@ -138,7 +142,12 @@
{#each section.subsections as subsection}
<!-- see <script> below: on:click='scrollTo(event, subsection.slug)' -->
<a class="subsection" class:active="{subsection.slug === active_section}" href="docs#{subsection.slug}">
<a
class="subsection"
class:active="{subsection.slug === active_section}"
href="docs#{subsection.slug}"
data-level="{subsection.level}"
>
{subsection.title}
{#if subsection.slug === active_section}
@ -150,4 +159,4 @@
{/each}
</li>
{/each}
</ul>
</ul>

@ -99,39 +99,35 @@ export default function() {
const seen = new Set();
renderer.heading = (text, level, rawtext) => {
if (level <= 4) {
const slug = rawtext
.toLowerCase()
.replace(/[^a-zA-Z0-9]+/g, '-')
.replace(/^-/, '')
.replace(/-$/, '');
if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
seen.add(slug);
if (level === 3) {
const title = unescape(
text
.replace(/<\/?code>/g, '')
.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
if ($3) return `.${$1}(...)`;
if ($2) return `.${$1}()`;
return `.${$1}`;
})
);
subsections.push({ slug, title });
}
return `
<h${level}>
<span id="${slug}" class="offset-anchor" ${level > 3 ? 'data-scrollignore' : ''}></span>
<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
${text}
</h${level}>`;
const slug = rawtext
.toLowerCase()
.replace(/[^a-zA-Z0-9]+/g, '-')
.replace(/^-/, '')
.replace(/-$/, '');
if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
seen.add(slug);
if (level === 3 || level === 4) {
const title = unescape(
text
.replace(/<\/?code>/g, '')
.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
if ($3) return `.${$1}(...)`;
if ($2) return `.${$1}()`;
return `.${$1}`;
})
);
subsections.push({ slug, title, level });
}
return `<h${level}>${text}</h${level}>`;
return `
<h${level}>
<span id="${slug}" class="offset-anchor" ${level > 4 ? 'data-scrollignore' : ''}></span>
<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
${text}
</h${level}>`;
};
blockTypes.forEach(type => {

@ -18,7 +18,7 @@
let show_contents = false;
onMount(() => {
// don't update `active_section` for headings below level 3, see _sections.js
// don't update `active_section` for headings above level 4, see _sections.js
const anchors = container.querySelectorAll('[id]:not([data-scrollignore])');
let positions;
@ -245,12 +245,15 @@
@media (min-width: 768px) {
.content :global(h2):hover :global(.anchor),
.content :global(h3):hover :global(.anchor),
.content :global(h4):hover :global(.anchor) {
.content :global(h4):hover :global(.anchor),
.content :global(h5):hover :global(.anchor),
.content :global(h6):hover :global(.anchor) {
opacity: 1;
}
.content :global(h4):hover :global(.anchor) {
top: 0.4em;
.content :global(h5) :global(.anchor),
.content :global(h6) :global(.anchor) {
top: 0.5em;
}
}
@ -265,6 +268,7 @@
line-height: 1;
}
.content :global(h4),
.content :global(h4 > code) {
font-weight: 700;
font-size: var(--h4);

Loading…
Cancel
Save