Skip to content

Commit 4aa5f95

Browse files
taocodetaocode
committed
feat(dev): imported README for dev page content
Maintaining 1 README is so much better 🎉
1 parent 930d8b8 commit 4aa5f95

File tree

6 files changed

+58
-153
lines changed

6 files changed

+58
-153
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"@vcarl/remark-headings": "^0.1.0",
2020
"husky": "^8.0.2",
2121
"mdsvex": "^0.10.6",
22-
"remark-heading-autoid": "^0.1.1",
2322
"remark-heading-id": "^1.0.0",
2423
"semantic-release": "^19.0.5",
2524
"svelte": "^3.53.1",

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/routes/+page.server.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { error } from '@sveltejs/kit'
2+
import fs from 'fs'
3+
import path from 'path'
4+
import { compile } from 'mdsvex'
5+
import { remarkPlugins } from '../../svelte.config'
6+
7+
export async function load({ params }) {
8+
try {
9+
const readme = fs.readFileSync(path.resolve(process.cwd(),'README.md'))
10+
const processed = await compile(readme,{remarkPlugins})
11+
return { headings: processed.data.headings }
12+
} catch (err) {
13+
console.error('/+page.server.js',err)
14+
throw error(510,`${err}, check console for stack`)
15+
}
16+
}

‎src/routes/+page.svelte‎

Lines changed: 26 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<script>
22
import { Headroom } from '$lib'
3+
import Readme from '../../README.md'
4+
5+
export let data
6+
let headings = data.headings
7+
$: headings = data.headings
38
49
function onPin() {
510
console.log('pin')
@@ -11,7 +16,9 @@
1116
pinned = false
1217
}
1318
14-
const propsMenu = ['tolerance','offsetTop','offsetBottom','duration','easing','bottom',['ats','(hide|show)at(Top|Bottom)']]
19+
const propsHeadings = headings
20+
.filter((o) => o.depth === 3)
21+
.map((c) => [ c.data.id, c.value.split(' ')[0] ] )
1522
let pinned = true
1623
</script>
1724

@@ -25,12 +32,8 @@
2532
<div class="topmenu">
2633
<div class="label">props:</div>
2734
<nav class="menu">
28-
{#each propsMenu as p}
29-
{#if Array.isArray(p)}
30-
<a href="#{p[0]}">{p[1]}</a>
31-
{:else}
32-
<a href="#{p}">{p}</a>
33-
{/if}
35+
{#each propsHeadings as [id,name]}
36+
<a href="#{id}">{name}</a>
3437
{/each}
3538
</nav>
3639
</div>
@@ -44,126 +47,26 @@
4447
</div>
4548

4649
<article class="markdown-body entry-content container-lg" itemprop="text">
47-
<h1>Svelte-Headroom</h1>
48-
<p><strong>Hide your header and footer until you need them!</strong></p>
49-
<p>Svelte Headroom is a <a href="https://svelte.dev" rel="nofollow">Svelte</a> component to hide or show your header
50-
on scroll, based on <a href="https://github.com/collardeau/svelte-headroom">collardeau/svelte-headroom</a>, inspired
51-
by <a href="https://wicky.nillia.ms/headroom.js/" rel="nofollow">headroom.js</a></p>
52-
<p><code>@taocode/svelte-headroom</code> has <strong>no dependencies</strong>.</p>
53-
<h2>Demo</h2>
54-
<p><a href="https://svelte.dev/repl/44cafd471bcf497080e12ed3bee80986?version=3" rel="nofollow">SVELTE REPL</a></p>
55-
<h2>Install</h2>
56-
<p><code>npm install @taocode/svelte-headroom</code></p>
57-
<h2>Usage</h2>
58-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
59-
<pre>
60-
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
61-
<span class="pl-k">import</span> <span class="pl-v">Headroom</span> <span class="pl-k">from</span> <span class="pl-s">'@taocode/svelte-headroom'</span><span class="pl-kos">;</span>
62-
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
63-
64-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span>
65-
<span class="pl-c">&lt;!-- Header will be fixed at top and auto show/hide based on scroll --&gt;</span>
66-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
67-
</div>
68-
<h2>Props</h2>
69-
<h3 id="tolerance"><code>tolerance</code> number</h3>
70-
<p>The number of pixels that need to be scrolled in either direction for the effect to occur. This is useful if you
71-
want the user to be able to scroll slowly and not trigger un/pin event. Default: <code>0</code>.</p>
72-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
73-
<pre>
74-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">tolerance</span>=<span class="pl-s">&lbrace;10&rbrace;</span><span class="pl-kos">&gt;</span>
75-
<span class="pl-c">&lt;!-- will ignore any scroll less than 10px --&gt;</span>
76-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
77-
</div>
78-
<h3 id="offsetTop"><code>offsetTop</code> number</h3>
79-
<p>The number of pixels from the top of the page before the effect is allowed to occur; <em>controls</em> `class:atTop` (used with hideAtTop, showAtTop) Default: <code>2</code>.</p>
80-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
81-
<pre>
82-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">offsetTop</span>=<span class="pl-s">&lbrace;50&rbrace;</span><span class="pl-kos">&gt;</span>
83-
<span class="pl-c">&lt;!-- will show until after 50px from top --&gt;</span>
84-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
85-
</div>
86-
<h3 id="offsetBottom"><code>offsetBottom</code> number</h3>
87-
<p>The number of pixels from top to still be considered at the bottom; <em>controls:</em> `class:atBottom` (used with hideAtBottom, showAtBottom).
88-
Default: <code>2</code>.</p>
89-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
90-
<pre>
91-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> showAtBottom <span class="pl-c1">offsetBottom</span>=<span class="pl-s">&lbrace;150&rbrace;</span><span class="pl-kos">&gt;</span>
92-
<span class="pl-c">&lt;!-- will show when within 150px of bottom --&gt;</span>
93-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
94-
</div>
95-
<h3 id="duration"><code>duration</code> string</h3>
96-
<p>The duration of the sliding effect. The value is passed on as a <a
97-
href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration" rel="nofollow">CSS Transition
98-
Duration</a>. Default: <code>"300ms"</code>.</p>
99-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
100-
<pre>
101-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">duration</span>='<span class="pl-s">500ms</span>'<span class="pl-kos">&gt;</span>
102-
<span class="pl-c">&lt;!-- will take 500ms to transition --&gt;</span>
103-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
104-
</div>
105-
106-
<h3 id="easing"><code>easing</code> string</h3>
107-
<p>The easing of the sliding effect. The value is passed on as a <a
108-
href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function" rel="nofollow">CSS Transition
109-
Timing Function</a>. Default: <code>"linear"</code>.</p>
110-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
111-
<pre>
112-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">easing</span>='<span class="pl-s">ease-out</span>'<span class="pl-kos">&gt;</span>
113-
<span class="pl-c">&lt;!-- will ease-out --&gt;</span>
114-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
115-
</div>
116-
117-
<h3 id="bottom"><code>bottom</code> boolean</h3>
118-
<p>If this is to be pinned to the bottom, like a return to top button. Default: false.</p>
119-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
120-
<pre>
121-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">bottom</span><span class="pl-kos">&gt;</span>
122-
<span class="pl-c">&lt;!-- pinned to the bottom --&gt;</span>
123-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
124-
</div>
125-
126-
<h3 id="ats"><code>(show|hide)At(Top|Bottom)</code> boolean</h3>
127-
<p>Always <em>show</em> or <em>hide</em> when at <em>top</em> or <em>bottom</em>. Default: false.</p>
128-
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto">
129-
<pre>
130-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">showAtBottom</span><span class="pl-kos">&gt;</span>
131-
<span class="pl-c">&lt;!-- header: always show when at bottom --&gt;</span>
132-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
133-
134-
<pre>
135-
<span class="pl-kos">&lt;</span><span class="pl-ent">Headroom</span> <span class="pl-c1">bottom hideAtTop showAtBottom</span><span class="pl-kos">&gt;</span>
136-
<span class="pl-c">&lt;!-- footer: auto show for 'To Top' button --&gt;</span>
137-
<span class="pl-kos">&lt;/</span><span class="pl-ent">Headroom</span><span class="pl-kos">&gt;</span></pre>
138-
</div>
139-
140-
141-
<h2>Events</h2>
142-
<p>A <code>svelte-headroom</code> component emits two events: <code>pin</code> and <code>unpin</code>.</p>
143-
<div class="highlight highlight-source-js notranslate position-relative overflow-auto">
144-
<pre><span class="pl-c1">&lt;</span><span class="pl-ent">Headroom</span>
145-
<span class="pl-s1">on</span>:<span class="pl-s1">pin</span><span class="pl-c1">=</span><span class="pl-kos">&lbrace;</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">&lbrace;</span><span class="pl-kos">&rbrace;</span> <span class="pl-kos">&rbrace;</span>
146-
<span class="pl-s1">on</span>:<span class="pl-s1">unpin</span><span class="pl-c1">=</span><span class="pl-kos">&lbrace;</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">&lbrace;</span><span class="pl-kos">&rbrace;</span> <span class="pl-kos">&rbrace;</span>
147-
<span class="pl-c1">&gt;</span>
148-
<span class="pl-c1">&lt;</span><span class="pl-ent">header</span><span class="pl-c1">&gt;</span>My Header<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">header</span><span class="pl-c1">&gt;</span>
149-
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Headroom</span><span class="pl-c1">&gt;</span></pre>
150-
<div class="zeroclipboard-container position-absolute right-0 top-0">
151-
152-
</div>
153-
</div>
154-
<p class="happy">Happy Coding!</p>
50+
<Readme />
15551
</article>
15652
</div>
53+
15754
<style>
15855
:global(html, body) {
15956
margin: 0;
16057
font-family: sans-serif;
16158
font-size: 12pt;
16259
}
163-
[id]:target {
60+
:global(h3[id]:target) {
16461
margin-top: -3.5em;
16562
padding-top: 3.5em;
16663
}
64+
:global(#happy) {
65+
font-size: 3em;
66+
text-align: center;
67+
padding: 40vh 0;
68+
font-family: 'Courier New', Courier, monospace;
69+
}
16770
16871
.topmenu-wrap {
16972
background: hsl(29, 100%, 40%);
@@ -188,7 +91,7 @@
18891
transform: rotate(0);
18992
}
19093
}
191-
94+
19295
.menu {
19396
display: flex;
19497
flex-wrap: wrap;
@@ -232,11 +135,12 @@
232135
article {
233136
max-width: 70ch;
234137
margin: 5em auto;
138+
line-height: 1.8;
235139
}
236-
.happy {
237-
font-size: 3em;
238-
text-align: center;
239-
padding: 40vh 0;
240-
font-family: 'Courier New', Courier, monospace;
140+
:global(pre) {
141+
line-height: 1.25;
142+
font-size: 0.9em;
241143
}
144+
145+
242146
</style>

‎svelte.config.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1-
import adapter from '@sveltejs/adapter-auto';
1+
import adapter from '@sveltejs/adapter-auto'
2+
import { mdsvex } from 'mdsvex'
3+
import headings from '@vcarl/remark-headings'
4+
import headingids from 'remark-heading-id'
5+
6+
export const remarkPlugins = [headingids, headings]
7+
const extensions = ['.md','.svelte']
28

39
/** @type {import('@sveltejs/kit').Config} */
410
const config = {
11+
extensions,
12+
preprocess: [mdsvex({extensions, remarkPlugins})],
513
kit: {
614
adapter: adapter()
715
}
816
};
917

10-
export default config;
18+
export default config

‎vite.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import { sveltekit } from '@sveltejs/kit/vite';
22

33
/** @type {import('vite').UserConfig} */
44
const config = {
5-
plugins: [sveltekit()]
5+
plugins: [sveltekit()],
6+
server: {
7+
fs: {
8+
allow: ['..']
9+
}
10+
}
611
};
712

813
export default config;

0 commit comments

Comments
 (0)