-
Notifications
You must be signed in to change notification settings - Fork 530
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enhancement: Docs upgrade- kit-docs and sveltejs/kit (#1665)
- Loading branch information
Showing
135 changed files
with
7,574 additions
and
4,010 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,4 @@ node_modules | |
| .env | ||
| .env.* | ||
| !.env.example | ||
| .vercel | ||
| vite.config.js.timestamp-* | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| /// <reference types="@sveltejs/kit" /> | ||
| /// <reference types="@svelteness/kit-docs/globals" /> | ||
|
|
||
| // See https://kit.svelte.dev/docs/types#app | ||
| // for information about these interfaces | ||
| // and what to do when importing types | ||
| declare namespace App { | ||
| // interface Locals {} | ||
| // interface Platform {} | ||
| // interface Session {} | ||
| // interface Stuff {} | ||
| declare global { | ||
| namespace App { | ||
| // interface Error {} | ||
| // interface Locals {} | ||
| // interface PageData {} | ||
| // interface Platform {} | ||
| } | ||
| } | ||
|
|
||
| declare module '@svelteness/kit-docs/tailwind.config.cjs' | ||
| export {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| # `kit-docs` | ||
|
|
||
| ## Global Components | ||
|
|
||
| You can create Svelte components that are global by placing them in this directory. Global | ||
| components are imported into every single Markdown file. In addition, they're automatically | ||
| mapped to Markdown containers, on which you can pass in props and dynamic slot elements. | ||
|
|
||
| First, create a component in this directory: | ||
|
|
||
| ``` | ||
| src | ||
| └─ kit-docs | ||
| ├─ Button.svelte <- | ||
| ``` | ||
|
|
||
| Now, inside your markdown files you can use the `<Button>` component like so: | ||
|
|
||
| ```svelte title=Component.md | ||
| <!-- Use the component as-is. --> | ||
| <Button /> | ||
| <!-- Or, use a markdown container. --> | ||
| :::button propA="valueA"|propB=10 Default slot content here. ::: | ||
| <!-- You can pass in dynamic slot elements! --> | ||
| <!-- If you omit `tag`, it'll default to `<p>`. --> | ||
| :::button (tag=h1&slot=title)=Title Default slot content here. ::: | ||
| ``` | ||
|
|
||
| ### Configuration | ||
|
|
||
| You can configure how global Svelte components are mapped to rules or containers by setting | ||
| them in your plugin like so: | ||
|
|
||
| ```js title=svelte.config.js | ||
| kitDocsPlugin({ | ||
| markdown: { | ||
| components: [ | ||
| // Override inline rule. | ||
| // `Image.svelte` must be a global component. | ||
| { name: 'Image', type: 'inline', rule: 'image' }, | ||
| // Override block rule. | ||
| // `Blockquote.svelte` must be a global component. | ||
| { name: 'Blockquote', type: 'block', rule: 'blockquote' }, | ||
| // Create custom container. | ||
| // `Button.svelte` must be a global component. | ||
| { name: 'Button', type: 'custom', container: { marker: '!' } } | ||
| ] | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| The configuration above will transform the following Markdown like so: | ||
|
|
||
| ```md | ||
|  | ||
|
|
||
| > This is a blockquote. | ||
|
|
||
| !!!button | ||
| ... | ||
| !!! | ||
| ``` | ||
|
|
||
| ```svelte | ||
| <Image href="https://..." alt="alt text" /> | ||
| <Blockquote>This is a blockquote.</Blockquote> | ||
| <Button>...</Button> | ||
| ``` | ||
|
|
||
| ## Default Components | ||
|
|
||
| There's a few components we provide out of the box such as `CodeFence`, `CodeInline`, `Link` and | ||
| others. You can find all of our [default components](https://github.com/svelteness/kit-docs/tree/main/packages/kit-docs/src/lib/kit-docs) | ||
| on GitHub. | ||
|
|
||
| ### Overriding | ||
|
|
||
| If you want to override any of the default components, simply create a Svelte component with the | ||
| same name in this directory and make sure it accepts the same props. | ||
|
|
||
| For example, you can override `CodeFence` by creating it in this directory like so: | ||
|
|
||
| ``` | ||
| src | ||
| └─ kit-docs | ||
| ├─ CodeFence.svelte <- | ||
| ``` | ||
|
|
||
| Finally, you can use the following minimal boilerplate and style the component as desired: | ||
|
|
||
| ```svelte title=CodeFence.svelte|copy | ||
| <script> | ||
| /** @type {string} */ | ||
| export let lang | ||
| /** @type {string} */ | ||
| export let ext | ||
| /** @type {string} */ | ||
| export let code | ||
| /** @type {number} */ | ||
| export let linesCount | ||
| /** @type {[number, number][]} */ | ||
| export let highlightLines = [] | ||
| </script> | ||
| <div class={`lang-${lang} ext-${ext}`}> | ||
| {@html code} | ||
| </div> | ||
| ``` |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Oops, something went wrong.