[READ-ONLY] Mirror of https://github.com/flo-bit/svleek. simple but beautiful documentation generator from markdown
flo-bit.github.io/svleek/
documentation
documentation-generator
markdown
svelte
sveltekit
tailwind
fix logo again some cleanup some accessibility
+6
-243
+2
-2
build-docs.js
+2
-2
build-docs.js
···
382
382
383
383
let newLogoContent = logoContent.replace(/<slot>[\s|\S]*<\/slot>/, `<slot>${logo}</slot>`);
384
384
385
-
// replace <a href="link" with <a href="config.base_url + link"
386
-
newLogoContent = newLogoContent.replace(/<a href="(.*)">/, `<a href="${config.base_url}$1">`);
385
+
// replace <a href="link" with <a href="config.base_url"
386
+
newLogoContent = newLogoContent.replace(/<a href="(.*)">/, `<a href="${config.base_url}">`);
387
387
388
388
console.log(newLogoContent == logoContent);
389
389
fs.writeFileSync(logoPath, newLogoContent);
+1
src/lib/Github.svelte
+1
src/lib/Github.svelte
+1
-1
src/lib/Logo.svelte
+1
-1
src/lib/Logo.svelte
-171
src/lib/components/content/ContentCentered.svelte
-171
src/lib/components/content/ContentCentered.svelte
···
1
-
<script>
2
-
import ErrorAlert from '../Alerts/ErrorAlert.svelte';
3
-
import InfoAlert from '../Alerts/InfoAlert.svelte';
4
-
import SuccessAlert from '../Alerts/SuccessAlert.svelte';
5
-
import WarningAlert from '../Alerts/WarningAlert.svelte';
6
-
</script>
7
-
8
-
<!-- Don't use this, this is just for reference, use ContentCenteredMarkdown -->
9
-
10
-
<div class="px-6 py-32 lg:px-8">
11
-
<div class="mx-auto max-w-3xl text-base leading-7 text-neutral-700 dark:text-neutral-300">
12
-
<p class="text-base font-semibold leading-7 text-accent-600 dark:text-accent-500">
13
-
Introducing
14
-
</p>
15
-
<h1
16
-
class="mt-2 text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 sm:text-4xl"
17
-
>
18
-
JavaScript for Beginners
19
-
</h1>
20
-
<p class="mt-6 text-xl leading-8">
21
-
Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh
22
-
dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra
23
-
scelerisque eget. Eleifend egestas fringilla sapien.
24
-
</p>
25
-
26
-
<div class="mt-10 max-w-2xl">
27
-
<p>
28
-
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris
29
-
semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus
30
-
viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat.
31
-
Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id.
32
-
</p>
33
-
<ul role="list" class="mt-8 max-w-xl space-y-8 text-neutral-600 dark:text-neutral-400">
34
-
<li class="flex gap-x-3">
35
-
<svg
36
-
class="mt-1 h-5 w-5 flex-none text-accent-600 dark:text-accent-500"
37
-
viewBox="0 0 20 20"
38
-
fill="currentColor"
39
-
aria-hidden="true"
40
-
>
41
-
<path
42
-
fill-rule="evenodd"
43
-
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
44
-
clip-rule="evenodd"
45
-
/>
46
-
</svg>
47
-
<span
48
-
><strong class="font-semibold text-neutral-900 dark:text-neutral-100"
49
-
>Data types.</strong
50
-
> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit
51
-
eaque, iste dolor cupiditate blanditiis ratione.</span
52
-
>
53
-
</li>
54
-
<li class="flex gap-x-3">
55
-
<svg
56
-
class="mt-1 h-5 w-5 flex-none text-accent-600 dark:text-accent-500"
57
-
viewBox="0 0 20 20"
58
-
fill="currentColor"
59
-
aria-hidden="true"
60
-
>
61
-
<path
62
-
fill-rule="evenodd"
63
-
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
64
-
clip-rule="evenodd"
65
-
/>
66
-
</svg>
67
-
<span
68
-
><strong class="font-semibold text-neutral-900 dark:text-neutral-100">Loops.</strong> Anim
69
-
aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</span
70
-
>
71
-
</li>
72
-
<li class="flex gap-x-3">
73
-
<svg
74
-
class="mt-1 h-5 w-5 flex-none text-accent-600 dark:text-accent-500"
75
-
viewBox="0 0 20 20"
76
-
fill="currentColor"
77
-
aria-hidden="true"
78
-
>
79
-
<path
80
-
fill-rule="evenodd"
81
-
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
82
-
clip-rule="evenodd"
83
-
/>
84
-
</svg>
85
-
<span
86
-
><strong class="font-semibold text-neutral-900 dark:text-neutral-100">Events.</strong> Ac
87
-
tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</span
88
-
>
89
-
</li>
90
-
</ul>
91
-
<p class="mt-8">
92
-
Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit
93
-
molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius
94
-
vulputate et ultrices hac adipiscing egestas. Iaculis convallis ac tempor et ut. Ac lorem
95
-
vel integer orci.
96
-
</p>
97
-
<h2 class="mt-16 text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
98
-
From beginner to expert in 3 hours
99
-
</h2>
100
-
<p class="mt-6">
101
-
Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat in. Convallis arcu ipsum
102
-
urna nibh. Pharetra, euismod vitae interdum mauris enim, consequat vulputate nibh. Maecenas
103
-
pellentesque id sed tellus mauris, ultrices mauris. Tincidunt enim cursus ridiculus mi.
104
-
Pellentesque nam sed nullam sed diam turpis ipsum eu a sed convallis diam.
105
-
</p>
106
-
<figure class="mt-10 border-l border-accent-600 dark:border-accent-500 pl-9">
107
-
<blockquote class="font-semibold text-neutral-900 dark:text-neutral-100">
108
-
<p>
109
-
“Vel ultricies morbi odio facilisi ultrices accumsan donec lacus purus. Lectus nibh
110
-
ullamcorper ac dictum justo in euismod. Risus aenean ut elit massa. In amet aliquet eget
111
-
cras. Sem volutpat enim tristique.”
112
-
</p>
113
-
</blockquote>
114
-
<figcaption class="mt-6 flex gap-x-4">
115
-
<img
116
-
class="h-6 w-6 flex-none rounded-full bg-neutral-50"
117
-
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
118
-
alt=""
119
-
/>
120
-
<div class="text-sm leading-6">
121
-
<strong class="font-semibold text-neutral-900 dark:text-neutral-100">Maria Hill</strong>
122
-
- Marketing Manager
123
-
</div>
124
-
</figcaption>
125
-
</figure>
126
-
<p class="mt-10">
127
-
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris
128
-
semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus
129
-
viverra tellus varius sit neque erat velit.
130
-
</p>
131
-
</div>
132
-
<figure class="mt-16">
133
-
<img
134
-
class="aspect-video rounded-xl bg-neutral-50 object-cover"
135
-
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&w=1310&h=873&q=80&facepad=3"
136
-
alt=""
137
-
/>
138
-
<figcaption class="mt-4 flex gap-x-2 text-sm leading-6 text-neutral-500">
139
-
<svg
140
-
class="mt-0.5 h-5 w-5 flex-none text-neutral-300"
141
-
viewBox="0 0 20 20"
142
-
fill="currentColor"
143
-
aria-hidden="true"
144
-
>
145
-
<path
146
-
fill-rule="evenodd"
147
-
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
148
-
clip-rule="evenodd"
149
-
/>
150
-
</svg>
151
-
Faucibus commodo massa rhoncus, volutpat.
152
-
</figcaption>
153
-
</figure>
154
-
<div class="mt-16 max-w-2xl">
155
-
<h2 class="text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
156
-
Everything you need to get up and running
157
-
</h2>
158
-
<p class="mt-6">
159
-
Purus morbi dignissim senectus mattis adipiscing. Amet, massa quam varius orci dapibus
160
-
volutpat cras. In amet eu ridiculus leo sodales cursus tristique. Tincidunt sed tempus ut
161
-
viverra ridiculus non molestie. Gravida quis fringilla amet eget dui tempor dignissim.
162
-
Facilisis auctor venenatis varius nunc, congue erat ac. Cras fermentum convallis quam.
163
-
</p>
164
-
<p class="mt-8">
165
-
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris
166
-
semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus
167
-
viverra tellus varius sit neque erat velit.
168
-
</p>
169
-
</div>
170
-
</div>
171
-
</div>
-69
src/lib/components/content/ContentCenteredMarkdown.svelte
-69
src/lib/components/content/ContentCenteredMarkdown.svelte
···
1
-
<script lang="ts">
2
-
/*
3
-
* supports light and dark mode
4
-
5
-
example usage:
6
-
7
-
// add this to the script tag
8
-
import ContentCenteredMarkdown from '$lib/ui-components/page_sections/content/ContentCenteredMarkdown.svelte';
9
-
const content = '# Hello world!\n\nThis is a markdown component';
10
-
// add this to the markup
11
-
<ContentCenteredMarkdown {content}/>
12
-
13
-
currently supported syntax:
14
-
- h1, h2 for headings (# and ##)
15
-
- h3 for large text (###)
16
-
- h4 for accented text (e.g. preheadings like "Introducing") (####)
17
-
18
-
- paragraphs (separated by empty lines)
19
-
- quotes > like this
20
-
- images 
21
-
- bold and italic text *like this* and **like this**
22
-
- links [like this](https://example.com)
23
-
*/
24
-
import { marked } from 'marked';
25
-
26
-
import Prism from 'prismjs';
27
-
import { onMount } from 'svelte';
28
-
import github from 'svelte-highlight/styles/tomorrow-night-bright';
29
-
30
-
import { HighlightAuto } from 'svelte-highlight';
31
-
import Highlight from 'svelte-highlight';
32
-
import hljs from 'highlight.js/lib/core';
33
-
34
-
export let content: string;
35
-
36
-
onMount(() => {
37
-
Prism.highlightAll();
38
-
39
-
console.log('content', content);
40
-
41
-
document.querySelectorAll('pre code').forEach((el: Element) => {
42
-
hljs.highlightElement(el);
43
-
el.classList.add('rounded-md');
44
-
});
45
-
46
-
document.querySelectorAll('h4').forEach((el: Element) => {
47
-
//el.classList.add('text-base font-semibold leading-7 text-accent-600 dark:text-accent-500');
48
-
el.classList.add(
49
-
'text-base',
50
-
'font-semibold',
51
-
'leading-7',
52
-
'text-accent-600',
53
-
'dark:text-accent-500'
54
-
);
55
-
});
56
-
});
57
-
</script>
58
-
59
-
<svelte:head>
60
-
{@html github}
61
-
</svelte:head>
62
-
63
-
<div class="px-6 py-32 lg:px-8">
64
-
<div
65
-
class="mx-auto max-w-3xl text-base leading-7 text-neutral-700 dark:text-neutral-300 markdown-content"
66
-
>
67
-
{@html marked.parse(content)}
68
-
</div>
69
-
</div>