-
-
-
-
-
diff --git a/.vitepress/theme/components/Environment.vue b/.vitepress/theme/components/Environment.vue
index a4291be..005481a 100644
--- a/.vitepress/theme/components/Environment.vue
+++ b/.vitepress/theme/components/Environment.vue
@@ -1,17 +1,22 @@
+<<<<<<< HEAD
Ambiente:
{{ type }}
+=======
+
+
+ Environment:
+ {{ type }}
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
-
+
Esta função de configuração só será executada no ambiente Node.js, você pode ter acesso a API do Node.
diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue
deleted file mode 100644
index 59b6eff..0000000
--- a/.vitepress/theme/components/Home.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
diff --git a/.vitepress/theme/components/Tweet.vue b/.vitepress/theme/components/TheTweet.vue
similarity index 63%
rename from .vitepress/theme/components/Tweet.vue
rename to .vitepress/theme/components/TheTweet.vue
index 1dd52a1..f822111 100644
--- a/.vitepress/theme/components/Tweet.vue
+++ b/.vitepress/theme/components/TheTweet.vue
@@ -1,14 +1,14 @@
-
-
-
-
-
+
+
+
+
+
+
-
diff --git a/.vitepress/theme/components/ThemeGallery.vue b/.vitepress/theme/components/ThemeGallery.vue
index 57d159c..ee92e0c 100644
--- a/.vitepress/theme/components/ThemeGallery.vue
+++ b/.vitepress/theme/components/ThemeGallery.vue
@@ -1,10 +1,10 @@
-
-
diff --git a/.vitepress/theme/components/icons/ArrowLeft.vue b/.vitepress/theme/components/icons/ArrowLeft.vue
deleted file mode 100644
index 3f64f1a..0000000
--- a/.vitepress/theme/components/icons/ArrowLeft.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
diff --git a/.vitepress/theme/components/icons/ArrowRight.vue b/.vitepress/theme/components/icons/ArrowRight.vue
deleted file mode 100644
index 19d2186..0000000
--- a/.vitepress/theme/components/icons/ArrowRight.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
diff --git a/.vitepress/theme/components/icons/Moon.vue b/.vitepress/theme/components/icons/Moon.vue
deleted file mode 100644
index 69567db..0000000
--- a/.vitepress/theme/components/icons/Moon.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/.vitepress/theme/components/icons/OutboundLink.vue b/.vitepress/theme/components/icons/OutboundLink.vue
deleted file mode 100644
index 4d74eee..0000000
--- a/.vitepress/theme/components/icons/OutboundLink.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
diff --git a/.vitepress/theme/components/icons/README.md b/.vitepress/theme/components/icons/README.md
deleted file mode 100644
index 58b1801..0000000
--- a/.vitepress/theme/components/icons/README.md
+++ /dev/null
@@ -1 +0,0 @@
-Download from https://icones.js.org/collection/carbon
diff --git a/.vitepress/theme/components/icons/Sun.vue b/.vitepress/theme/components/icons/Sun.vue
deleted file mode 100644
index 9cd6bdf..0000000
--- a/.vitepress/theme/components/icons/Sun.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
diff --git a/.vitepress/theme/composables/activeSidebarLink.ts b/.vitepress/theme/composables/activeSidebarLink.ts
deleted file mode 100644
index 9cf3aba..0000000
--- a/.vitepress/theme/composables/activeSidebarLink.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { onMounted, onUnmounted, onUpdated } from 'vue-demi'
-
-export function useActiveSidebarLinks() {
- let rootActiveLink: HTMLAnchorElement | null = null
- let activeLink: HTMLAnchorElement | null = null
-
- const onScroll = throttleAndDebounce(setActiveLink, 300)
-
- function setActiveLink(): void {
- const sidebarLinks = getSidebarLinks()
- const anchors = getAnchors(sidebarLinks)
-
- for (let i = 0; i < anchors.length; i++) {
- const anchor = anchors[i]
- const nextAnchor = anchors[i + 1]
-
- const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
-
- if (isActive) {
- history.replaceState(null, document.title, hash || ' ')
- activateLink(hash)
- return
- }
- }
- }
-
- function activateLink(hash: string | null): void {
- deactiveLink(activeLink)
- deactiveLink(rootActiveLink)
-
- activeLink = document.querySelector(`.sidebar a[href="${hash}"]`)
-
- if (!activeLink)
- return
-
- activeLink.classList.add('active')
-
- // also add active class to parent h2 anchors
- const rootLi = activeLink.closest('.sidebar-links > ul > li')
-
- if (rootLi && rootLi !== activeLink.parentElement) {
- rootActiveLink = rootLi.querySelector('a')
- rootActiveLink && rootActiveLink.classList.add('active')
- }
- else {
- rootActiveLink = null
- }
- }
-
- function deactiveLink(link: HTMLAnchorElement | null): void {
- link && link.classList.remove('active')
- }
-
- onMounted(() => {
- setActiveLink()
- window.addEventListener('scroll', onScroll)
- })
-
- onUpdated(() => {
- // sidebar update means a route change
- activateLink(decodeURIComponent(location.hash))
- })
-
- onUnmounted(() => {
- window.removeEventListener('scroll', onScroll)
- })
-}
-
-function getSidebarLinks(): HTMLAnchorElement[] {
- return [].slice.call(
- document.querySelectorAll('.sidebar a.sidebar-link-item'),
- )
-}
-
-function getAnchors(sidebarLinks: HTMLAnchorElement[]): HTMLAnchorElement[] {
- return [].slice
- .call(document.querySelectorAll('.header-anchor'))
- .filter((anchor: HTMLAnchorElement) =>
- sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash),
- ) as HTMLAnchorElement[]
-}
-
-function getPageOffset(): number {
- return (document.querySelector('.nav-bar') as HTMLElement).offsetHeight
-}
-
-function getAnchorTop(anchor: HTMLAnchorElement): number {
- const pageOffset = getPageOffset()
-
- return anchor.parentElement!.offsetTop - pageOffset - 15
-}
-
-function isAnchorActive(
- index: number,
- anchor: HTMLAnchorElement,
- nextAnchor: HTMLAnchorElement,
-): [boolean, string | null] {
- const scrollTop = window.scrollY
-
- if (index === 0 && scrollTop === 0)
- return [true, null]
-
- if (scrollTop < getAnchorTop(anchor))
- return [false, null]
-
- if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor))
- return [true, decodeURIComponent(anchor.hash)]
-
- return [false, null]
-}
-
-function throttleAndDebounce(fn: () => void, delay: number): () => void {
- let timeout: NodeJS.Timeout
- let called = false
-
- return () => {
- if (timeout)
- clearTimeout(timeout)
-
- if (!called) {
- fn()
- called = true
- setTimeout(() => {
- called = false
- }, delay)
- }
- else {
- timeout = setTimeout(fn, delay)
- }
- }
-}
diff --git a/.vitepress/theme/composables/editLink.ts b/.vitepress/theme/composables/editLink.ts
deleted file mode 100644
index f2a3114..0000000
--- a/.vitepress/theme/composables/editLink.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { computed } from 'vue-demi'
-import { useSiteDataByRoute, usePageData } from 'vitepress'
-import { endingSlashRE, isNullish, isExternal } from '../utils'
-
-const bitbucketRE = /bitbucket.org/
-
-export function useEditLink() {
- const site = useSiteDataByRoute()
- const page = usePageData()
-
- const url = computed(() => {
- const showEditLink = isNullish(page.value.frontmatter.editLink)
- ? site.value.themeConfig.editLinks
- : page.value.frontmatter.editLink
-
- const {
- repo,
- docsDir = '',
- docsBranch = 'main',
- docsRepo = repo,
- } = site.value.themeConfig
-
- const { relativePath } = page.value
-
- if (!showEditLink || !relativePath || !repo)
- return null
-
- return createUrl(repo, docsRepo, docsDir, docsBranch, relativePath)
- })
-
- const text = computed(() => {
- return site.value.themeConfig.editLinkText || 'Edit this page'
- })
-
- return {
- url,
- text,
- }
-}
-
-function createUrl(
- repo: string,
- docsRepo: string,
- docsDir: string,
- docsBranch: string,
- path: string,
-): string {
- return bitbucketRE.test(repo)
- ? createBitbucketUrl(repo, docsRepo, docsDir, docsBranch, path)
- : createGitHubUrl(repo, docsRepo, docsDir, docsBranch, path)
-}
-
-function createGitHubUrl(
- repo: string,
- docsRepo: string,
- docsDir: string,
- docsBranch: string,
- path: string,
-): string {
- const base = isExternal(docsRepo)
- ? docsRepo
- : `https://github.com/${docsRepo}`
-
- return (
- `${base.replace(endingSlashRE, '')
- }/edit`
- + `/${docsBranch}/${
- docsDir ? `${docsDir.replace(endingSlashRE, '')}/` : ''
- }${path}`
- )
-}
-
-function createBitbucketUrl(
- repo: string,
- docsRepo: string,
- docsDir: string,
- docsBranch: string,
- path: string,
-): string {
- const base = isExternal(docsRepo) ? docsRepo : repo
-
- return (
- `${base.replace(endingSlashRE, '')
- }/src`
- + `/${docsBranch}/${
- docsDir ? `${docsDir.replace(endingSlashRE, '')}/` : ''
- }${path
- }?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
- )
-}
diff --git a/.vitepress/theme/composables/nav.ts b/.vitepress/theme/composables/nav.ts
deleted file mode 100644
index 4097a41..0000000
--- a/.vitepress/theme/composables/nav.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { computed } from 'vue-demi'
-import { useRoute, useSiteData, inBrowser } from 'vitepress'
-import type { DefaultTheme } from '../config'
-
-export function useLocaleLinks() {
- const route = useRoute()
- const site = useSiteData()
-
- return computed(() => {
- const theme = site.value.themeConfig as DefaultTheme.Config
- const locales = theme.locales
-
- if (!locales)
- return null
-
- const localeKeys = Object.keys(locales)
-
- if (localeKeys.length <= 1)
- return null
-
- // handle site base
- const siteBase = inBrowser ? site.value.base : '/'
-
- const siteBaseWithoutSuffix = siteBase.endsWith('/')
- ? siteBase.slice(0, -1)
- : siteBase
-
- // remove site base in browser env
- const routerPath = route.path.slice(siteBaseWithoutSuffix.length)
-
- const currentLangBase = localeKeys.find((key) => {
- return key === '/' ? false : routerPath.startsWith(key)
- })
-
- const currentContentPath = currentLangBase
- ? routerPath.substring(currentLangBase.length - 1)
- : routerPath
-
- const candidates = localeKeys.map((v) => {
- const localePath = v.endsWith('/') ? v.slice(0, -1) : v
-
- return {
- text: locales[v].label,
- link: `${localePath}${currentContentPath}`,
- }
- })
-
- const currentLangKey = currentLangBase || '/'
-
- const selectText = locales[currentLangKey].selectText
- ? locales[currentLangKey].selectText
- : 'Languages'
-
- return {
- text: selectText,
- items: candidates,
- } as DefaultTheme.NavItemWithChildren
- })
-}
diff --git a/.vitepress/theme/composables/navLink.ts b/.vitepress/theme/composables/navLink.ts
deleted file mode 100644
index 2bf3172..0000000
--- a/.vitepress/theme/composables/navLink.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { computed, Ref } from 'vue-demi'
-import { useRoute } from 'vitepress'
-import type { DefaultTheme } from '../config'
-import { isExternal as isExternalCheck } from '../utils'
-import { useUrl } from '../composables/url'
-
-export function useNavLink(item: Ref) {
- const route = useRoute()
- const { withBase } = useUrl()
-
- const isExternal = isExternalCheck(item.value.link)
-
- const props = computed(() => {
- const link = interpret(item.value.link)
- const routePath = normalizePath(`/${route.data.relativePath}`)
-
- let active = false
- if (item.value.activeMatch) {
- active = new RegExp(item.value.activeMatch).test(routePath)
- }
- else {
- const itemPath = normalizePath(withBase(link))
- active
- = itemPath === '/'
- ? itemPath === routePath
- : routePath.startsWith(itemPath)
- }
-
- return {
- 'class': {
- active,
- isExternal,
- },
- 'href': isExternal ? link : withBase(link),
- 'target': item.value.target || isExternal ? '_blank' : null,
- 'rel': item.value.rel || isExternal ? 'noopener noreferrer' : null,
- 'aria-label': item.value.ariaLabel,
- }
- })
-
- return {
- props,
- isExternal,
- }
-}
-
-function interpret(path = '') {
- return path
- .replace(/{{pathname}}/, typeof window === 'undefined' ? '/' : location.pathname)
-}
-
-function normalizePath(path: string): string {
- return path
- .replace(/#.*$/, '')
- .replace(/\?.*$/, '')
- .replace(/\.(html|md)$/, '')
- .replace(/\/index$/, '/')
-}
diff --git a/.vitepress/theme/composables/nextAndPrevLinks.ts b/.vitepress/theme/composables/nextAndPrevLinks.ts
deleted file mode 100644
index 2b20c28..0000000
--- a/.vitepress/theme/composables/nextAndPrevLinks.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { computed } from 'vue-demi'
-import { useSiteDataByRoute, usePageData } from 'vitepress'
-import { isArray, ensureStartingSlash } from '../utils'
-import { getSideBarConfig, getFlatSideBarLinks } from '../support/sideBar'
-
-export function useNextAndPrevLinks() {
- const site = useSiteDataByRoute()
- const page = usePageData()
-
- const path = computed(() => {
- return ensureStartingSlash(page.value.relativePath)
- })
-
- const candidates = computed(() => {
- const config = getSideBarConfig(site.value.themeConfig.sidebar, path.value)
-
- return isArray(config) ? getFlatSideBarLinks(config) : []
- })
-
- const index = computed(() => {
- return candidates.value.findIndex((item) => {
- return item.link === path.value
- })
- })
-
- const next = computed(() => {
- if (
- site.value.themeConfig.nextLinks !== false
- && index.value > -1
- && index.value < candidates.value.length - 1
- )
- return candidates.value[index.value + 1]
- })
-
- const prev = computed(() => {
- if (site.value.themeConfig.prevLinks !== false && index.value > 0)
- return candidates.value[index.value - 1]
- })
-
- const hasLinks = computed(() => !!next.value || !!prev.value)
-
- return {
- next,
- prev,
- hasLinks,
- }
-}
diff --git a/.vitepress/theme/composables/repo.ts b/.vitepress/theme/composables/repo.ts
deleted file mode 100644
index d0909df..0000000
--- a/.vitepress/theme/composables/repo.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { computed } from 'vue-demi'
-import { useSiteDataByRoute } from 'vitepress'
-import type { DefaultTheme } from '../config'
-
-export const platforms = ['GitHub', 'GitLab', 'Bitbucket'].map((platform) => {
- return [platform, new RegExp(platform, 'i')] as const
-})
-
-export function useRepo() {
- const site = useSiteDataByRoute()
-
- return computed(() => {
- const theme = site.value.themeConfig as DefaultTheme.Config
- const name = theme.docsRepo || theme.repo
-
- if (!name)
- return null
-
- const link = getRepoUrl(name)
- const text = getRepoText(link, theme.repoLabel)
-
- return { text, link }
- })
-}
-
-function getRepoUrl(repo: string): string {
- // if the full url is not provided, default to GitHub repo
- return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
-}
-
-function getRepoText(url: string, text?: string): string {
- if (text)
- return text
-
- // if no label is provided, deduce it from the repo url
- const hosts = url.match(/^https?:\/\/[^/]+/)
-
- if (!hosts)
- return 'Source'
-
- const platform = platforms.find(([, re]) => re.test(hosts[0]))
-
- if (platform && platform[0])
- return platform[0]
-
- return 'Source'
-}
diff --git a/.vitepress/theme/composables/sideBar.ts b/.vitepress/theme/composables/sideBar.ts
deleted file mode 100644
index 0384769..0000000
--- a/.vitepress/theme/composables/sideBar.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { computed } from 'vue-demi'
-import { useRoute, useSiteDataByRoute } from 'vitepress'
-// import { Header } from '/@types/shared'
-import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
-import { getSideBarConfig } from '../support/sideBar'
-import { DefaultTheme } from '../config'
-
-export function useSideBar() {
- const route = useRoute()
- const site = useSiteDataByRoute()
-
- useActiveSidebarLinks()
-
- return computed(() => {
- // at first, we'll check if we can find the sidebar setting in frontmatter.
- const headers = route.data.headers
- const frontSidebar = route.data.frontmatter.sidebar
- const sidebarDepth = route.data.frontmatter.sidebarDepth
-
- // if it's `false`, we'll just return an empty array here.
- if (frontSidebar === false)
- return []
-
- // if it's `atuo`, render headers of the current page
- if (frontSidebar === 'auto')
- return resolveAutoSidebar(headers, sidebarDepth)
-
- // now, there's no sidebar setting at frontmatter; let's see the configs
- const themeSidebar = getSideBarConfig(
- site.value.themeConfig.sidebar,
- route.path,
- )
-
- if (themeSidebar === false)
- return []
-
- if (themeSidebar === 'auto')
- return resolveAutoSidebar(headers, sidebarDepth)
-
- return themeSidebar
- })
-}
-
-function resolveAutoSidebar(
- headers: any[],
- depth: number,
-): DefaultTheme.SideBarItem[] {
- const ret: DefaultTheme.SideBarItem[] = []
-
- if (headers === undefined)
- return []
-
- let lastH2: DefaultTheme.SideBarItem | undefined
- headers.forEach(({ level, title, slug }) => {
- if (level - 1 > depth)
- return
-
- const item: DefaultTheme.SideBarItem = {
- text: title,
- link: `#${slug}`,
- }
- if (level === 2) {
- lastH2 = item
- ret.push(item)
- }
- else if (lastH2) {
- ((lastH2 as any).children || ((lastH2 as any).children = [])).push(item)
- }
- })
-
- return ret
-}
diff --git a/.vitepress/theme/composables/url.ts b/.vitepress/theme/composables/url.ts
deleted file mode 100644
index 7ea91fc..0000000
--- a/.vitepress/theme/composables/url.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useSiteData, joinPath } from 'vitepress'
-
-export function useUrl() {
- const site = useSiteData()
-
- function withBase(path: string): string {
- if (!path)
- return ''
- return joinPath(site.value.base, path)
- }
-
- return {
- withBase,
- }
-}
diff --git a/.vitepress/theme/composables/versions.ts b/.vitepress/theme/composables/versions.ts
deleted file mode 100644
index 28c22ce..0000000
--- a/.vitepress/theme/composables/versions.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '../../../../meta/packages'
diff --git a/.vitepress/theme/config.ts b/.vitepress/theme/config.ts
deleted file mode 100644
index 408f30f..0000000
--- a/.vitepress/theme/config.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable @typescript-eslint/no-namespace */
-
-export namespace DefaultTheme {
- export interface Config {
- logo?: string
- nav?: NavItem[] | false
- sidebar?: SideBarConfig | MultiSideBarConfig
-
- /**
- * GitHub repository following the format /.
- *
- * @example `"vuejs/vue-next"`
- */
- repo?: string
-
- /**
- * Customize the header label. Defaults to GitHub/Gitlab/Bitbucket
- * depending on the provided repo.
- *
- * @exampe `"Contribute!"`
- */
- repoLabel?: string
-
- /**
- * If your docs are in a different repository from your main project.
- *
- * @example `"vuejs/docs-next"`
- */
- docsRepo?: string
-
- /**
- * If your docs are not at the root of the repo.
- *
- * @example `"docs"`
- */
- docsDir?: string
-
- /**
- * If your docs are in a different branch. Defaults to `main`.
- *
- * @example `"next"`
- */
- docsBranch?: string
-
- /**
- * Enable links to edit pages at the bottom of the page.
- */
- editLinks?: boolean
-
- /**
- * Custom text for edit link. Defaults to "Edit this page".
- */
- editLinkText?: string
-
- /**
- * Show last updated time at the bottom of the page. Defaults to `false`.
- * If given a string, it will be displayed as a prefix (default value:
- * "Last Updated").
- */
- lastUpdated?: string | boolean
-
- prevLinks?: boolean
- nextLinks?: boolean
-
- locales?: Record>
- }
-
- // navbar --------------------------------------------------------------------
-
- export type NavItem = NavItemWithLink | NavItemWithChildren
-
- export interface NavItemBase {
- text: string
- target?: string
- rel?: string
- ariaLabel?: string
- activeMatch?: string
- }
-
- export interface NavItemWithLink extends NavItemBase {
- link: string
- }
-
- export interface NavItemWithChildren extends NavItemBase {
- items: NavItemWithLink[]
- }
-
- // sidebar -------------------------------------------------------------------
-
- export type SideBarConfig = SideBarItem[] | 'auto' | false
-
- export interface MultiSideBarConfig {
- [path: string]: SideBarConfig
- }
-
- export type SideBarItem = SideBarLink | SideBarGroup
-
- export interface SideBarLink {
- text: string
- link: string
- }
-
- export interface SideBarGroup {
- text: string
- link?: string
-
- /**
- * @default false
- */
- collapsable?: boolean
-
- children: SideBarItem[]
- }
-
- // locales -------------------------------------------------------------------
-
- export interface LocaleConfig {
- /**
- * Text for the language dropdown.
- */
- selectText?: string
-
- /**
- * Label for this locale in the language dropdown.
- */
- label?: string
- }
-}
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 5e15d50..aed8830 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,18 +1,16 @@
-import Layout from './Layout.vue'
-import NotFound from './NotFound.vue'
+import Theme from 'vitepress/theme'
+import type { EnhanceAppContext } from 'vitepress'
+import TwoSlash from '@shikijs/vitepress-twoslash/client'
-import 'windi-base.css'
-import 'windi-components.css'
+import '@shikijs/vitepress-twoslash/style.css'
import './styles/vars.css'
-import './styles/layout.css'
-import './styles/code.css'
-import './styles/custom-blocks.css'
-import './styles/sidebar-links.css'
-import 'windi-utilities.css'
+import './styles/demo.css'
+import './styles/custom.css'
+import 'uno.css'
-const theme = {
- Layout,
- NotFound,
+export default {
+ extends: Theme,
+ enhanceApp({ app }: EnhanceAppContext) {
+ app.use(TwoSlash as any)
+ },
}
-
-export default theme
diff --git a/.vitepress/theme/styles/code.css b/.vitepress/theme/styles/code.css
deleted file mode 100644
index 218eb9f..0000000
--- a/.vitepress/theme/styles/code.css
+++ /dev/null
@@ -1,120 +0,0 @@
-/* https://github.com/antfu/prism-theme-vars */
-@import 'prism-theme-vars/base.css';
-@import 'prism-theme-vars/marker.css';
-
-:root {
- --prism-font-family: var(--font-family-mono);
- --prism-font-size: 0.85rem;
- --prism-marker-opacity: 0;
-}
-
-html:not(.dark) {
- --prism-foreground: #393a34;
- --prism-background: #fafafa;
- --prism-inline-background: #f5f5f5;
- --prism-comment: #a0ada0;
- --prism-string: #b56959;
- --prism-literal: #2f8a89;
- --prism-number: #296aa3;
- --prism-keyword: #1c6b48;
- --prism-function: #6c7834;
- --prism-boolean: #296aa3;
- --prism-constant: #a65e2b;
- --prism-deleted: #a14f55;
- --prism-class: #2993a3;
- --prism-builtin: #ab5959;
- --prism-property: #b58451;
- --prism-namespace: #b05a78;
- --prism-punctuation: #8e8f8b;
- --prism-decorator: #bd8f8f;
- --prism-regex: #ab5e3f;
- --prism-json-property: #698c96;
-}
-
-html.dark {
- --prism-scheme: dark;
- --prism-foreground: #d4cfbf;
- --prism-background: #181818;
- --prism-comment: #758575;
- --prism-string: #d48372;
- --prism-literal: #429988;
- --prism-keyword: #4d9375;
- --prism-boolean: #6394bf;
- --prism-number: #6394bf;
- --prism-variable: #c2b36e;
- --prism-function: #a1b567;
- --prism-deleted: #bc6066;
- --prism-class: #54b1bf;
- --prism-builtin: #e0a569;
- --prism-property: #dd8e6e;
- --prism-namespace: #db889a;
- --prism-punctuation: #858585;
- --prism-decorator: #bd8f8f;
- --prism-regex: #ab5e3f;
- --prism-json-property: #6b8b9e;
- --prism-line-number: #888888;
- --prism-line-number-gutter: #eeeeee;
- --prism-line-highlight-background: #444444;
- --prism-selection-background: #444444;
- --prism-inline-background: theme('colors.dark.300');
-}
-
-
-.token.title {
- color: var(--prism-keyword);
-}
-
-/* Overrides */
-
-pre, code {
- @apply font-mono;
-}
-
-:not(pre) > code {
- background: var(--prism-inline-background);
- padding: 1px 6px;
- border-radius: 3px;
-}
-
-a > code {
- color: var(--c-brand-dark);
-}
-
-div[class*='language-'] {
- position: relative;
-}
-
-div[class*='language-'] pre {
- margin: 0;
- z-index: 1;
-}
-
-div[class*='language-'] code {
- font-size: var(--prism-font-size);
- font-family: var(--prism-font-family);
-}
-
-.token.important {
- font-weight: normal;
-}
-
-/* Line highlighting */
-
-.highlight-lines {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- padding: var(--prism-block-padding-y) 0;
- width: 100%;
- line-height: var(--prism-line-height);
- font-family: var(--prism-font-family);
- font-size: var(--prism-font-size);
- user-select: none;
- overflow: hidden;
- z-index: -1;
-}
-
-.highlight-lines .highlighted {
- background-color: var(--prism-line-highlight-background);
-}
diff --git a/.vitepress/theme/styles/custom-blocks.css b/.vitepress/theme/styles/custom-blocks.css
deleted file mode 100644
index d65bea1..0000000
--- a/.vitepress/theme/styles/custom-blocks.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.custom-block.tip,
-.custom-block.warning,
-.custom-block.danger {
- margin: 2rem 0 1rem 0;
- border-left: .5rem solid;
- padding: .1rem 1.5rem;
- overflow-x: auto;
-}
-
-.custom-block.tip {
- background-color: var(--c-bg-secondary);
- border-color: #42b983;
-}
-
-.custom-block.warning {
- border-color: #e7c000;
- background-color: rgba(255, 229, 100, .3);
-}
-
-.custom-block.warning .custom-block-title {
- color: #b29400;
-}
-
-.custom-block.warning a {
- color: var(--c-text);
-}
-
-.custom-block.danger {
- border-color: #c00;
- background-color: #ffe6e6;
-}
-
-.custom-block.danger .custom-block-title {
- color: #900;
-}
-
-.custom-block.danger a {
- color: var(--c-text);
-}
-
-.custom-block.details {
- position: relative;
- display: block;
- border-radius: 2px;
- margin: 1.6em 0;
- padding: 1.6em;
- background-color: #eee;
-}
-
-.custom-block.details h4 {
- margin-top: 0;
-}
-
-.custom-block.details figure:last-child,
-.custom-block.details p:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
-}
-
-.custom-block.details summary {
- outline: none;
- cursor: pointer;
-}
-
-.custom-block-title {
- display: none;
-}
diff --git a/.vitepress/theme/styles/custom.css b/.vitepress/theme/styles/custom.css
new file mode 100644
index 0000000..45d334d
--- /dev/null
+++ b/.vitepress/theme/styles/custom.css
@@ -0,0 +1,19 @@
+.icon-btn {
+ --uno: inline-block cursor-pointer select-none important-outline-none;
+ --uno: opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
+ --uno: hover:(opacity-100 bg-gray-400 bg-opacity-10);
+}
+
+.icon-btn.disabled {
+ --uno: opacity-25 pointer-events-none;
+}
+
+.inline-icon-btn {
+ --uno: text-primary-deep;
+ --uno: inline-block rounded p-0.5 text-2xl align-middle;
+ --uno: border border-primary border-opacity-20 border-solid;
+}
+
+[data-tweet-id] {
+ border-radius: 13px;
+}
diff --git a/.vitepress/theme/styles/demo.css b/.vitepress/theme/styles/demo.css
new file mode 100644
index 0000000..64a5be3
--- /dev/null
+++ b/.vitepress/theme/styles/demo.css
@@ -0,0 +1,170 @@
+html:not(.dark) {
+ --prism-foreground: #393a34;
+ --prism-background: #fafafa;
+ --prism-inline-background: #f5f5f5;
+ --prism-comment: #a0ada0;
+ --prism-string: #b56959;
+ --prism-literal: #2f8a89;
+ --prism-number: #296aa3;
+ --prism-keyword: #1c6b48;
+ --prism-function: #6c7834;
+ --prism-boolean: #296aa3;
+ --prism-constant: #a65e2b;
+ --prism-deleted: #a14f55;
+ --prism-class: #2993a3;
+ --prism-builtin: #ab5959;
+ --prism-property: #b58451;
+ --prism-namespace: #b05a78;
+ --prism-punctuation: #8e8f8b;
+ --prism-decorator: #bd8f8f;
+ --prism-regex: #ab5e3f;
+ --prism-json-property: #698c96;
+}
+
+html.dark {
+ --prism-scheme: dark;
+ --prism-foreground: #d4cfbf;
+ --prism-background: #181818;
+ --prism-comment: #758575;
+ --prism-string: #d48372;
+ --prism-literal: #429988;
+ --prism-keyword: #4d9375;
+ --prism-boolean: #6394bf;
+ --prism-number: #6394bf;
+ --prism-variable: #c2b36e;
+ --prism-function: #a1b567;
+ --prism-deleted: #bc6066;
+ --prism-class: #54b1bf;
+ --prism-builtin: #e0a569;
+ --prism-property: #dd8e6e;
+ --prism-namespace: #db889a;
+ --prism-punctuation: #858585;
+ --prism-decorator: #bd8f8f;
+ --prism-regex: #ab5e3f;
+ --prism-json-property: #6b8b9e;
+ --prism-line-number: #888888;
+ --prism-line-number-gutter: #eeeeee;
+ --prism-line-highlight-background: #444444;
+ --prism-selection-background: #444444;
+ --prism-inline-background: theme('colors.dark.300');
+}
+
+.token.title {
+ color: var(--prism-keyword);
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: var(--prism-comment);
+ font-style: var(--prism-comment-style);
+}
+
+.token.namespace {
+ color: var(--prism-namespace);
+}
+
+.token.interpolation {
+ color: var(--prism-interpolation);
+}
+
+.token.string {
+ color: var(--prism-string);
+}
+
+.token.punctuation {
+ color: var(--prism-punctuation);
+}
+
+.token.operator {
+ color: var(--prism-operator);
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+ color: var(--prism-keyword-control);
+}
+
+.token.url,
+.token.symbol,
+.token.inserted {
+ color: var(--prism-symbol);
+}
+
+.token.constant {
+ color: var(--prism-constant);
+}
+
+.token.string.url {
+ text-decoration: var(--prism-url-decoration);
+}
+
+.token.boolean,
+.language-json .token.boolean {
+ color: var(--prism-boolean);
+}
+
+.token.number,
+.language-json .token.number {
+ color: var(--prism-number);
+}
+
+.token.variable {
+ color: var(--prism-variable);
+}
+
+.token.keyword {
+ color: var(--prism-keyword);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.selector {
+ color: var(--prism-selector);
+}
+
+.token.function {
+ color: var(--prism-function);
+}
+
+.token.deleted {
+ color: var(--prism-deleted);
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.class-name {
+ color: var(--prism-class);
+}
+
+.token.tag,
+.token.builtin {
+ color: var(--prism-builtin);
+}
+
+.token.attr-name,
+.token.property,
+.token.entity {
+ color: var(--prism-property);
+}
+
+.language-json .token.property {
+ color: var(--prism-json-property);
+}
+
+.token.regex {
+ color: var(--prism-regex);
+}
+
+.token.decorator,
+.token.annotation {
+ color: var(--prism-decorator);
+}
diff --git a/.vitepress/theme/styles/layout.css b/.vitepress/theme/styles/layout.css
deleted file mode 100644
index 306966a..0000000
--- a/.vitepress/theme/styles/layout.css
+++ /dev/null
@@ -1,312 +0,0 @@
-*,
-::before,
-::after {
- box-sizing: border-box;
- border-width: 0;
- border-style: solid;
- border-color: #e5e7eb;
-}
-/*
-* {
- scrollbar-color: var(--c-divider-light) var(--c-bg);
-}
-::-webkit-scrollbar {
- width: var(--scrollbar-width);
-}
-::-webkit-scrollbar:horizontal {
- height: var(--scrollbar-width);
-}
-::-webkit-scrollbar-track {
- background: var(--c-bg);
- border-radius: 10px;
-}
-::-webkit-scrollbar-thumb {
- background: transparent;
- border-radius: 10px;
- background-clip: padding-box;
-}
-::-webkit-scrollbar-thumb:hover {
- background: var(--c-divider-dark);
-}
-*:hover::-webkit-scrollbar-thumb {
- background: var(--c-divider-light);
-} */
-
-html {
- line-height: 1.4;
- font-size: 16px;
- -webkit-text-size-adjust: 100%;
-}
-
-body {
- margin: 0;
- width: 100%;
- min-width: 320px;
- min-height: 100vh;
- line-height: 1.4;
- font-family: var(--font-family-base);
- font-size: 16px;
- font-weight: 400;
- color: var(--c-text);
- background-color: var(--c-bg);
- direction: ltr;
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- overflow-x: hidden;
-}
-
-main {
- display: block;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin: 0;
- line-height: 1.25;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
- font-weight: 600;
-}
-
-h1:hover .header-anchor,
-h1:focus .header-anchor,
-h2:hover .header-anchor,
-h2:focus .header-anchor,
-h3:hover .header-anchor,
-h3:focus .header-anchor,
-h4:hover .header-anchor,
-h4:focus .header-anchor,
-h5:hover .header-anchor,
-h5:focus .header-anchor,
-h6:hover .header-anchor,
-h6:focus .header-anchor {
- opacity: 1;
-}
-
-h1 {
- margin-top: 1.5rem;
- font-size: 1.9rem;
-}
-
-@media screen and (min-width: 420px) {
- h1 {
- font-size: 2.2rem;
- }
-}
-
-h2 {
- margin-top: 2.25rem;
- margin-bottom: 1.25rem;
- border-bottom: 1px solid var(--c-divider);
- padding-bottom: 0.3rem;
- line-height: 1.25;
- font-size: 1.65rem;
- /* overflow-x: auto; */
-}
-
-h2 + h3 {
- margin-top: 1.5rem;
-}
-
-h3 {
- margin-top: 2rem;
- font-size: 1.35rem;
-}
-
-h4 {
- font-size: 1.15rem;
-}
-
-p,
-ol,
-ul {
- margin: 1rem 0;
- line-height: 1.7;
-}
-
-a,
-area,
-button,
-[role="button"],
-input,
-label,
-select,
-summary,
-textarea {
- touch-action: manipulation;
-}
-
-a {
- text-decoration: none;
- color: var(--c-brand);
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-a.header-anchor {
- float: left;
- margin-top: 0.125em;
- margin-left: -0.87em;
- padding-right: 0.23em;
- font-size: 0.85em;
- opacity: 0;
-}
-
-a.header-anchor:hover,
-a.header-anchor:focus {
- text-decoration: none;
-}
-
-figure {
- margin: 0;
-}
-
-img {
- max-width: 100%;
-}
-
-ul,
-ol {
- padding-left: 1.25em;
-}
-
-li > ul,
-li > ol {
- margin: 0;
-}
-
-table {
- @apply w-full;
-}
-
-tr {
- @apply border-b border-gray-400 border-opacity-20;
-}
-
-th {
- @apply text-left font-600;
-}
-
-td, th {
- @apply p-1 py-2;
-}
-
-blockquote {
- margin: 1rem 0;
- border-left: 0.2rem solid #8885;
- padding: 0.25rem 0 0.25rem 1rem;
- font-size: 1rem;
- color: var(--c-text);
- @apply bg-gray-400 bg-opacity-10;
-}
-
-kbd {
- @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
- @apply bg-gray-400 bg-opacity-5 py-0.5 px-2 text-sm text-center font-mono;
-}
-
-blockquote > p {
- margin: 0;
-}
-
-form {
- margin: 0;
-}
-
-.theme.sidebar-open .sidebar-mask {
- display: block;
-}
-
-.theme.no-navbar > h1,
-.theme.no-navbar > h2,
-.theme.no-navbar > h3,
-.theme.no-navbar > h4,
-.theme.no-navbar > h5,
-.theme.no-navbar > h6 {
- margin-top: 1.5rem;
- padding-top: 0;
-}
-
-.theme.no-navbar aside {
- top: 0;
-}
-
-@media screen and (min-width: 720px) {
- .theme.no-sidebar aside {
- display: none;
- }
-
- .theme.no-sidebar main {
- margin-left: 0;
- }
-}
-
-.sidebar-mask {
- position: fixed;
- z-index: 2;
- display: none;
- width: 100vw;
- height: 100vh;
-}
-
-.nav-btn {
- display: flex;
- font-size: 1.05rem;
- border: 0;
- outline: none;
- background: none;
- color: var(--c-text);
- opacity: 0.8;
- cursor: pointer;
-}
-.nav-btn:hover {
- opacity: 1;
-}
-.nav-btn svg {
- margin: auto;
-}
-.external-link {
- font-size: 0.95rem;
- opacity: 0.7;
-}
-
-.icon-btn {
- @apply inline-block cursor-pointer select-none !outline-none;
- @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
- @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
-}
-
-.icon-btn.disabled {
- @apply opacity-25 pointer-events-none;
-}
-
-.inline-icon-btn {
- @apply text-primary-deep;
- @apply inline-block rounded p-0.5 text-2xl align-middle;
- @apply border border-primary border-opacity-20 border-solid;
-}
-
-p > img {
- @apply rounded-2xl
-}
-
-li > svg {
- vertical-align: middle;
- transform: translateY(-10%);
-}
diff --git a/.vitepress/theme/styles/sidebar-links.css b/.vitepress/theme/styles/sidebar-links.css
deleted file mode 100644
index b87e43c..0000000
--- a/.vitepress/theme/styles/sidebar-links.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.sidebar-links {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.sidebar-link-item {
- display: block;
- margin: 0;
- border-left: .25rem solid transparent;
- color: var(--c-text);
-}
-
-a.sidebar-link-item:hover {
- text-decoration: none;
- color: var(--c-brand);
-}
-
-a.sidebar-link-item.active {
- color: var(--c-brand);
-}
-
-.sidebar > .sidebar-links {
- padding: .75rem 0 5rem;
-}
-
-@media (min-width: 720px) {
- .sidebar > .sidebar-links {
- padding: 1.5rem 0;
- }
-}
-
-.sidebar > .sidebar-links > .sidebar-link + .sidebar-link {
- padding-top: .5rem;
-}
-
-@media (min-width: 720px) {
- .sidebar > .sidebar-links > .sidebar-link + .sidebar-link {
- padding-top: 1.25rem;
- }
-}
-
-.sidebar > .sidebar-links > .sidebar-link > .sidebar-link-item {
- padding: .35rem 1.5rem .35rem 1.25rem;
- font-size: 1.1rem;
- font-weight: 700;
-}
-
-.sidebar > .sidebar-links > .sidebar-link > a.sidebar-link-item.active {
- border-left-color: var(--c-brand);
- font-weight: 600;
-}
-
-.sidebar > .sidebar-links > .sidebar-link > .sidebar-links > .sidebar-link > .sidebar-link-item {
- display: block;
- padding: .35rem 1.5rem .35rem 2rem;
- line-height: 1.4;
- font-size: 1rem;
- font-weight: 400;
-}
-
-.sidebar > .sidebar-links > .sidebar-link > .sidebar-links > .sidebar-link > a.sidebar-link-item.active {
- border-left-color: var(--c-brand);
- font-weight: 600;
-}
-
-.sidebar >
-.sidebar-links >
-.sidebar-link >
-.sidebar-links >
-.sidebar-link >
-.sidebar-links >
-.sidebar-link >
-.sidebar-link-item {
- display: block;
- padding: .3rem 1.5rem .3rem 3rem;
- line-height: 1.4;
- font-size: .9rem;
- font-weight: 400;
-}
-
-.sidebar >
-.sidebar-links >
-.sidebar-link >
-.sidebar-links >
-.sidebar-link >
-.sidebar-links >
-.sidebar-link >
-.sidebar-links >
-.sidebar-link >
-.sidebar-link-item {
- display: block;
- padding: .3rem 1.5rem .3rem 4rem;
- line-height: 1.4;
- font-size: .9rem;
- font-weight: 400;
-}
-/*
-a.sidebar-link-item {
- font-family: monospace;
- letter-spacing: -0.5px;
-} */
diff --git a/.vitepress/theme/styles/vars.css b/.vitepress/theme/styles/vars.css
index eddc7b6..a5f6998 100644
--- a/.vitepress/theme/styles/vars.css
+++ b/.vitepress/theme/styles/vars.css
@@ -1,104 +1,152 @@
-/** Base Styles */
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ * satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ * It must satisfy the contrast ratio with pure white (#ffffff) text on
+ * top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ * on top of it.
+ *
+ * The soft color must be semi transparent alpha channel. This is crucial
+ * because it allows adding multiple "soft" colors on top of each other
+ * to create a accent, such as when having inline code block inside
+ * custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ * special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ * brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ * brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ * container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ * in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
:root {
+ --vp-c-brand-1: #3AB9D4;
+ --vp-c-brand-2: #60c4db;
+ --vp-c-brand-3: #6fcce1;
+ --vp-c-brand-soft: #3AB9D450;
+ --vp-c-bg-alt: #f9f9f9;
+
+ --vp-font-family-mono: theme('fontFamily.mono');
+}
+
+.dark {
+ --vp-c-brand-1: #6fcce1;
+ --vp-c-brand-2: #60c4db;
+ --vp-c-brand-3: #3AB9D4;
+ --vp-c-brand-soft: #3AB9D450;
+ --vp-c-bg-alt: #18181b;
+ --vp-c-gutter: #8883;
+}
+
+:root {
+ --vp-c-default-1: var(--vp-c-gray-1);
+ --vp-c-default-2: var(--vp-c-gray-2);
+ --vp-c-default-3: var(--vp-c-gray-3);
+ --vp-c-default-soft: var(--vp-c-gray-soft);
+
+ --vp-c-tip-1: var(--vp-c-brand-1);
+ --vp-c-tip-2: var(--vp-c-brand-2);
+ --vp-c-tip-3: var(--vp-c-brand-3);
+ --vp-c-tip-soft: var(--vp-c-brand-soft);
+}
+
+:root {
+ -vp-c-text-1: rgba(42, 40, 47);
+ -vp-c-text-2: rgba(42, 40, 47, 0.78);
+ -vp-c-text-3: rgba(42, 40, 47, 0.56);
+ --black-text-1: rgba(42, 40, 47);
+}
- /**
- * Colors
- * --------------------------------------------------------------------- */
- --c-bg: #fff;
- --c-bg-semi: rgba(255,255,255,0.8);
- --c-bg-secondary: #f3f5f7;
-
- --c-white: #ffffff;
- --c-black: #000000;
-
- --c-divider-light: rgba(60, 60, 67, .12);
- --c-divider-dark: rgba(84, 84, 88, .48);
-
- --c-text-light-1: #2c3e50;
- --c-text-light-2: #476582;
- --c-text-light-3: #90a4b7;
-
- --c-brand: #3AB9D4;
- --c-brand-active: #3AB9D4;
- --c-brand-dark: #3AB9D4;
- --c-brand-light: #3AB9D4;
-
- --c-disabled-bg: #e5e5e5;
- --c-disabled-fg: #666;
-
- --code-bg-color: #f8f8f8;
- --code-inline-bg-color: rgba(27, 31, 35, .04);
- --code-highlight: rgba(0, 0, 0, .04);
-
- /**
- * Typography
- * --------------------------------------------------------------------- */
-
- --font-family-base: 'Inter', apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
- --font-family-mono: 'IBM Plex Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-
- /**
- * Z Indexes
- *
- * Algolia SearchBox has a z-index of 200, so make sure not to go above
- * that value.
- * --------------------------------------------------------------------- */
-
- --z-index-navbar: 10;
- --z-index-sidebar: 6;
-
- /**
- * Shadows
- * --------------------------------------------------------------------- */
-
- --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
- --shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
- --shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
- --shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
- --shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
-
- /**
- * Sizes
- * --------------------------------------------------------------------- */
-
- --header-height: 3.6rem;
- --sidebar-width: 17.5rem;
- --scrollbar-width: 0;
+.dark {
+ --vp-c-text-1: rgba(255, 255, 245, 0.86);
+ --vp-c-text-2: rgba(235, 235, 245, 0.6);
+ --vp-c-text-3: rgba(235, 235, 245, 0.38);
}
-html.dark {
- --c-bg: #111;
- --c-bg-semi: rgba(17,17,17,0.8);
- --c-bg-secondary: #222;
- --c-text: #f5f7fa;
- --c-text-light: #f9f9f9;
- --c-text-lighter: #ffffff;
-
- --c-divider-light: rgba(200, 200, 200, .12);
- --c-divider-dark: rgba(200, 200, 200, .48);
- --code-bg-color: #191919;
- --code-inline-bg-color: rgba(255, 255, 255, .04);
- --code-highlight: rgba(0, 0, 0, .66);
-
- --c-disabled-bg: #333;
- --c-disabled-fg: #aaa;
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-button-brand-border: transparent;
+ --vp-button-brand-text: var(--vp-c-white);
+ --vp-button-brand-bg: var(--vp-c-brand-1);
+ --vp-button-brand-hover-border: transparent;
+ --vp-button-brand-hover-text: var(--vp-c-white);
+ --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+ --vp-button-brand-active-border: transparent;
+ --vp-button-brand-active-text: var(--vp-c-white);
+ --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+.dark {
+ --vp-button-brand-text: var(--black-text-1);
+ --vp-button-brand-bg: var(--vp-c-brand-2);
+ --vp-button-brand-hover-text: var(--black-text-1);
+ --vp-button-brand-hover-bg: var(--vp-c-brand-1);
+ --vp-button-brand-active-text: var(--black-text-1);
+ --vp-button-brand-active-bg: var(--vp-c-brand-3);
}
-/** Fallback Styles */
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
:root {
- --c-divider: var(--c-divider-light);
+ --vp-home-hero-name-color: var(--vp-c-brand-1);
+}
- --c-text: var(--c-text-light-1);
- --c-text-light: var(--c-text-light-2);
- --c-text-lighter: var(--c-text-light-3);
+@media (min-width: 640px) {
+ :root {
+ --vp-home-hero-image-filter: blur(56px);
+ }
+}
+
+@media (min-width: 960px) {
+ :root {
+ --vp-home-hero-image-filter: blur(72px);
+ }
+}
- --c-bg: var(--c-white);
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
- --code-line-height: 24px;
- --code-font-family: var(--font-family-mono);
- --code-font-size: 14px;
+:root {
+ --vp-custom-block-tip-border: transparent;
+ --vp-custom-block-tip-text: var(--vp-c-text-1);
+ --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+ --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}
-.no-sidebar {
- --sidebar-width: 0;
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+ --docsearch-primary-color: var(--vp-c-brand-1) !important;
}
diff --git a/.vitepress/theme/support/sideBar.ts b/.vitepress/theme/support/sideBar.ts
deleted file mode 100644
index 0d6b201..0000000
--- a/.vitepress/theme/support/sideBar.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { DefaultTheme } from '../config'
-import {
- isArray,
- ensureSlash,
- ensureStartingSlash,
- removeExtention,
-} from '../utils'
-
-export function isSideBarConfig(
- sidebar: DefaultTheme.SideBarConfig | DefaultTheme.MultiSideBarConfig,
-): sidebar is DefaultTheme.SideBarConfig {
- return sidebar === false || sidebar === 'auto' || isArray(sidebar)
-}
-
-export function isSideBarGroup(
- item: DefaultTheme.SideBarItem,
-): item is DefaultTheme.SideBarGroup {
- return (item as DefaultTheme.SideBarGroup).children !== undefined
-}
-
-/**
- * Get the `SideBarConfig` from sidebar option. This method will ensure to get
- * correct sidebar config from `MultiSideBarConfig` with various path
- * combinations such as matching `guide/` and `/guide/`. If no matching config
- * was found, it will return `auto` as a fallback.
- */
-export function getSideBarConfig(
- sidebar: DefaultTheme.SideBarConfig | DefaultTheme.MultiSideBarConfig,
- path: string,
-): DefaultTheme.SideBarConfig {
- if (isSideBarConfig(sidebar))
- return sidebar
-
- // get the very first segment of the path to compare with nulti sidebar keys
- // and make sure it's surrounded by slash
- path = removeExtention(path)
- path = ensureStartingSlash(path).split('/')[1] || '/'
- path = ensureSlash(path)
-
- for (const dir of Object.keys(sidebar)) {
- // make sure the multi sidebar key is surrounded by slash too
- if (path === ensureSlash(dir))
- return sidebar[dir]
- }
-
- return 'auto'
-}
-
-/**
- * Get flat sidebar links from the sidebar items. This method is useful for
- * creating the "next and prev link" feature. It will ignore any items that
- * don't have `link` property and removes `.md` or `.html` extension if a
- * link contains it.
- */
-export function getFlatSideBarLinks(
- sidebar: DefaultTheme.SideBarItem[],
-): DefaultTheme.SideBarLink[] {
- return sidebar.reduce((links, item) => {
- if (item.link)
- links.push({ text: item.text, link: removeExtention(item.link) })
-
- if (isSideBarGroup(item))
- links = [...links, ...getFlatSideBarLinks(item.children)]
-
- return links
- }, [])
-}
diff --git a/.vitepress/theme/utils.ts b/.vitepress/theme/utils.ts
deleted file mode 100644
index aad8b5a..0000000
--- a/.vitepress/theme/utils.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-export const hashRE = /#.*$/
-export const extRE = /(index)?\.(md|html)$/
-export const endingSlashRE = /\/$/
-export const outboundRE = /^[a-z]+:/i
-
-export function isNullish(value: any): value is null | undefined {
- return value === null || value === undefined
-}
-
-export function isArray(value: any): value is any[] {
- return Array.isArray(value)
-}
-
-export function isExternal(path: string): boolean {
- return outboundRE.test(path)
-}
-
-export function isActive(route: any, path?: string): boolean {
- if (path === undefined)
- return false
-
- const routePath = normalize(route.path)
- const pagePath = normalize(path)
-
- return routePath === pagePath
-}
-
-export function normalize(path: string): string {
- return decodeURI(path).replace(hashRE, '').replace(extRE, '')
-}
-
-export function joinUrl(base: string, path: string): string {
- const baseEndsWithSlash = base.endsWith('/')
- const pathStartsWithSlash = path.startsWith('/')
-
- if (baseEndsWithSlash && pathStartsWithSlash)
- return base.slice(0, -1) + path
-
- if (!baseEndsWithSlash && !pathStartsWithSlash)
- return `${base}/${path}`
-
- return base + path
-}
-
-/**
- * get the path without filename (the last segment). for example, if the given
- * path is `/guide/getting-started.html`, this method will return `/guide/`.
- * Always with a trailing slash.
- */
-export function getPathDirName(path: string): string {
- const segments = path.split('/')
-
- if (segments[segments.length - 1])
- segments.pop()
-
- return ensureEndingSlash(segments.join('/'))
-}
-
-export function ensureSlash(path: string): string {
- return ensureEndingSlash(ensureStartingSlash(path))
-}
-
-export function ensureStartingSlash(path: string): string {
- return /^\//.test(path) ? path : `/${path}`
-}
-
-export function ensureEndingSlash(path: string): string {
- return /(\.html|\/)$/.test(path) ? path : `${path}/`
-}
-
-/**
- * Remove `.md` or `.html` extention from the given path. It also converts
- * `index` to slush.
- */
-export function removeExtention(path: string): string {
- return path.replace(/(index)?(\.(md|html))?$/, '') || '/'
-}
diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts
index 9c285e0..6961e0e 100644
--- a/.vitepress/themes.ts
+++ b/.vitepress/themes.ts
@@ -127,26 +127,6 @@ export const official: ThemeInfo[] = [
]
export const community: ThemeInfo[] = [
- {
- id: 'slidev-theme-flayyer',
- name: 'Flayyer',
- description: 'This theme is inspired by the layout of Flayyer and the way that it works.',
- author: {
- name: 'Daniel Esteves',
- link: 'https://github.com/danestves',
- },
- repo: 'https://github.com/danestves/slidev-theme-flayyer',
- previews: [
- 'https://i.imgur.com/grKiGIK.png',
- 'https://i.imgur.com/tAvcf5S.png',
- 'https://i.imgur.com/mj42LcL.png',
- 'https://i.imgur.com/41QWv3c.png',
- ],
- tags: [
- 'dark',
- 'light',
- ],
- },
{
id: 'slidev-theme-geist',
name: 'Vercel',
@@ -192,6 +172,27 @@ export const community: ThemeInfo[] = [
'light',
],
},
+ {
+ id: 'slidev-theme-eloc',
+ name: 'Eloc',
+ description: 'Focus on writing, present in a concise style.',
+ author: {
+ name: 'Amio',
+ link: 'https://github.com/amio',
+ },
+ repo: 'https://github.com/zthxxx/slides/tree/master/packages/slidev-theme-eloc',
+ previews: [
+ 'https://cdn.jsdelivr.net/gh/zthxxx/slides@master/packages/slidev-theme-eloc/screenshot/01.png',
+ 'https://cdn.jsdelivr.net/gh/zthxxx/slides@master/packages/slidev-theme-eloc/screenshot/02.png',
+ 'https://cdn.jsdelivr.net/gh/zthxxx/slides@master/packages/slidev-theme-eloc/screenshot/03.png',
+ 'https://cdn.jsdelivr.net/gh/zthxxx/slides@master/packages/slidev-theme-eloc/screenshot/04.png',
+ 'https://cdn.jsdelivr.net/gh/zthxxx/slides@master/packages/slidev-theme-eloc/screenshot/05.png',
+ ],
+ tags: [
+ 'dark',
+ 'light',
+ ],
+ },
{
id: 'slidev-theme-purplin',
name: 'Purplin',
@@ -315,6 +316,116 @@ export const community: ThemeInfo[] = [
'light',
],
},
+ {
+ id: 'slidev-theme-academic',
+ name: 'Academic',
+ description: 'Academic presentations with Slidev made simple',
+ author: {
+ name: 'Alexander Eble',
+ link: 'https://github.com/alexanderdavide',
+ },
+ repo: 'https://github.com/alexanderdavide/slidev-theme-academic',
+ previews: [
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/01.png',
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/02.png',
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/08.png',
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/04.png',
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/05.png',
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/06.png',
+ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/07.png',
+ ],
+ tags: [
+ 'dark',
+ 'light',
+ ],
+ },
+ {
+ id: 'slidev-theme-mokkapps',
+ name: 'Mokkapps',
+ description: 'A theme for my personal brand "Mokkapps"',
+ author: {
+ name: 'Michael Hoffmann',
+ link: 'https://github.com/mokkapps',
+ },
+ repo: 'https://github.com/mokkapps/slidev-theme-mokkapps',
+ previews: [
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/001.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/002.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/003.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/004.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/005.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/006.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/007.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/008.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/009.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/010.png',
+ 'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/011.png',
+ ],
+ tags: [
+ 'dark',
+ 'light',
+ ],
+ },
+ {
+ id: 'slidev-theme-the-unnamed',
+ name: 'The unnamed',
+ description: 'A theme based on The unnamed VS Code theme',
+ author: {
+ name: 'Elio Struyf',
+ link: 'https://elio.dev',
+ },
+ repo: 'https://github.com/estruyf/slidev-theme-the-unnamed',
+ previews: [
+ 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/cover.png',
+ 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/about-me.png',
+ 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/default.png',
+ 'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/section.png',
+ ],
+ tags: [
+ 'dark',
+ ],
+ },
+ {
+ id: 'slidev-theme-dracula',
+ name: 'Dracula',
+ description: 'One the best dark theme meets slidev',
+ author: {
+ name: 'JD Solanki (jd-solanki)',
+ link: 'https://github.com/jd-solanki',
+ },
+ repo: 'https://github.com/jd-solanki/slidev-theme-dracula',
+ previews: [
+ 'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-1.png',
+ 'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-2.png',
+ 'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-3.png',
+ 'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-4.png',
+ 'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-5.png',
+ ],
+ tags: [
+ 'dark',
+ 'minimalism',
+ ],
+ },
+ {
+ id: 'slidev-theme-frankfurt',
+ name: 'Frankfurt',
+ description: 'Inspired by the Beamer theme Frankfurt',
+ author: {
+ name: 'Mu-Tsun Tsai',
+ link: 'https://github.com/MuTsunTsai',
+ },
+ repo: 'https://github.com/MuTsunTsai/slidev-theme-frankfurt',
+ previews: [
+ 'https://cdn.jsdelivr.net/gh/MuTsunTsai/slidev-theme-frankfurt/screenshots/01.png',
+ 'https://cdn.jsdelivr.net/gh/MuTsunTsai/slidev-theme-frankfurt/screenshots/04.png',
+ 'https://cdn.jsdelivr.net/gh/MuTsunTsai/slidev-theme-frankfurt/screenshots/06.png',
+ 'https://cdn.jsdelivr.net/gh/MuTsunTsai/slidev-theme-frankfurt/screenshots/07.png',
+ ],
+ tags: [
+ 'dark',
+ 'light',
+ ],
+ },
// Add yours here!
{
id: '',
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b3e97b8..823d357 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
{
"languageToolLinter.languageTool.language": "pt-BR",
"languageToolLinter.languageTool.motherTongue": "pt-BR",
@@ -62,4 +63,49 @@
"yaml",
"yarn"
],
-}
\ No newline at end of file
+}
+=======
+{
+ // Enable the ESlint flat config support
+ "eslint.experimental.useFlatConfig": true,
+
+ // Disable the default formatter, use eslint instead
+ "prettier.enable": false,
+ "editor.formatOnSave": false,
+
+ // Auto fix
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": "explicit",
+ "source.organizeImports": "never"
+ },
+
+ // Silent the stylistic rules in you IDE, but still auto fix them
+ "eslint.rules.customizations": [
+ { "rule": "style/*", "severity": "off" },
+ { "rule": "format/*", "severity": "off" },
+ { "rule": "*-indent", "severity": "off" },
+ { "rule": "*-spacing", "severity": "off" },
+ { "rule": "*-spaces", "severity": "off" },
+ { "rule": "*-order", "severity": "off" },
+ { "rule": "*-dangle", "severity": "off" },
+ { "rule": "*-newline", "severity": "off" },
+ { "rule": "*quotes", "severity": "off" },
+ { "rule": "*semi", "severity": "off" }
+ ],
+
+ // Enable eslint for all supported languages
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ "typescript",
+ "typescriptreact",
+ "vue",
+ "html",
+ "markdown",
+ "json",
+ "jsonc",
+ "yaml",
+ "toml"
+ ]
+}
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/README.md b/README.md
index fc99e67..2843576 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@ Documentação do [Slidev](https://github.com/slidevjs/slidev)
## Traduções
+<<<<<<< HEAD
| | Repositório | Site | Mantenedores |
| -------------- | ---------------------------------------------- | -------------------------------: | --------------------------------------------------------------------- |
| English | [docs](https://github.com/slidevjs/docs) | [sli.dev](https://sli.dev) | [@antfu](https://github.com/antfu) |
@@ -15,6 +16,20 @@ Documentação do [Slidev](https://github.com/slidevjs/slidev)
| Deutsch | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock) |
| Português (BR) | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12) |
| Ελληνικά | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr) |
+=======
+| | Repo | Site | Maintainers |
+|---|---|---:|---|
+| English | [docs](https://github.com/slidevjs/docs) | [sli.dev](https://sli.dev) | [@antfu](https://github.com/antfu) |
+| 简体中文 | [docs-cn](https://github.com/slidevjs/docs-cn) | [cn.sli.dev](https://cn.sli.dev) | [@QC-L](https://github.com/QC-L) [@Ivocin](https://github.com/Ivocin) |
+| Français | [docs-fr](https://github.com/slidevjs/docs-fr) | [fr.sli.dev](https://fr.sli.dev) | [@ArthurDanjou](https://github.com/ArthurDanjou) |
+| Español | [docs-es](https://github.com/slidevjs/docs-es) | [es.sli.dev](https://es.sli.dev) | [@owlnai](https://github.com/owlnai) |
+| Русский | [docs-ru](https://github.com/slidevjs/docs-ru) | [ru.sli.dev](https://ru.sli.dev) | [@xesjkeee](https://github.com/xesjkeee) |
+| Việt Nam | [docs-vn](https://github.com/slidevjs/docs-vn) | [vn.sli.dev](https://vn.sli.dev) | [@bongudth](https://github.com/bongudth) |
+| Deutsch | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock) |
+| Português (BR) | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12) |
+| Ελληνικά | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr) |
+| 日本語 | [docs-ja](https://github.com/slidevjs/docs-el) | [ja.sli.dev](https://ja.sli.dev) | [@IkumaTadokoro](https://github.com/IkumaTadokoro) |
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## Rode o servidor localmente
diff --git a/TRANSLATIONS.md b/TRANSLATIONS.md
index f85f435..252722e 100644
--- a/TRANSLATIONS.md
+++ b/TRANSLATIONS.md
@@ -17,9 +17,15 @@ In case it's already been translated but you're wondering how to maintain it, sk
## Getting started
+<<<<<<< HEAD
- [x] Fork the main docs repo: [slidevjs/docs](https://github.com/slidevjs/docs)
- [x] Translate README.md, you can take one of the already translated repositories as an example.
- [x] Share your repo's link to the `#translations` channel telling people you are working on it and find collaborators.
+=======
+- [ ] Fork the main docs repo: [slidevjs/docs](https://github.com/slidevjs/docs)
+- [ ] Translate README.md, you can take one of the already translated repositories as an example.
+- [ ] Share your repo's link to the `#translations` channel telling people you are working on it and find collaborators.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## Translating Markdown files
@@ -41,6 +47,7 @@ In case it's already been translated but you're wondering how to maintain it, sk
### custom/
+<<<<<<< HEAD
- [x] `config-katex.md` - Configuring Katex
- [x] `config-mermaid.md` - Configuring Mermaid
- [x] `config-monaco.md` - Configuring Monaco
@@ -54,6 +61,20 @@ In case it's already been translated but you're wondering how to maintain it, sk
- [x] `highlighters.md` - Configuring code highlighters
- [x] `index.md`- Customizations index page
- [x] `vue-context.md` - The Vue global context
+=======
+- [ ] `config-katex.md` - Configuring Katex
+- [ ] `config-mermaid.md` - Configuring Mermaid
+- [ ] `config-monaco.md` - Configuring Monaco
+- [ ] `config-shortcuts.md` - Configuring Shortcuts
+- [ ] `config-vite.md` - Configuring Vite
+- [ ] `config-vue.md` - Configuring Vue
+- [ ] `directory-structure.md` - Configuring the directory structure
+- [ ] `fonts.md` - Configuring fonts
+- [ ] `global-layers.md` - Configuring the global layers
+- [ ] `highlighters.md` - Configuring code highlighters
+- [ ] `index.md`- Customizations index page
+- [ ] `vue-context.md` - The Vue global context
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### guide/
@@ -79,6 +100,11 @@ In case it's already been translated but you're wondering how to maintain it, sk
- [x] `use.md` - How to use Slidev themes
- [x] `write-a-theme.md` - Write your own theme
+### addons/
+
+- [ ] `use.md` - How to use Slidev addons
+- [ ] `write-an-addon.md` - Write your own addon
+
## Publishing your translations
- [x] When you finish the translation (at least 90%), `@antfu` in the Discord and we will invite you to the org and make the translation official.
@@ -90,7 +116,6 @@ In case it's already been translated but you're wondering how to maintain it, sk
- `docschina-bot` will periodically submit merge requests from the `slidev/docs` repository. Switch to the branch created in the pull request, make any changes necessary and merge it. [example](https://github.com/slidevjs/docs-fr/pull/13).
- Sometimes it will occur that a merge request is made and you haven't merged the previous one. The latest PR always checks your main branch against the English one; so you can just close the previous PR(s), move your work to the latest one and merge it.
-
[Working-in-progress translation list](https://discord.com/channels/851817370623410197/851822360955977760/852614294017146900)
Thanks again!
diff --git a/addons/use.md b/addons/use.md
new file mode 100644
index 0000000..d1ca9e2
--- /dev/null
+++ b/addons/use.md
@@ -0,0 +1,38 @@
+# Use Addon
+
+Addons are sets of additional components, layouts, styles, configuration...etc. that you can use in your presentation.
+
+They are quite similar to [themes](/themes/use), but in general:
+
+* they don't affect the global styles of your slides
+* you can use multiple addons in one presentation
+
+To use addons, you have to install them manually via:
+
+```bash
+$ npm install [slidev-addon-package1] [slidev-addon-package2]
+```
+
+And then declare the addons either in your frontmatter:
+
+```yaml
+---
+addons:
+ - slidev-addon-package1
+ - slidev-addon-package2
+---
+```
+
+Or in your `package.json` file:
+
+```json
+// package.json
+{
+ "slidev": {
+ "addons": [
+ "slidev-addon-package1",
+ "slidev-addon-package2"
+ ]
+ }
+}
+```
diff --git a/addons/write-an-addon.md b/addons/write-an-addon.md
new file mode 100644
index 0000000..e5197a5
--- /dev/null
+++ b/addons/write-an-addon.md
@@ -0,0 +1,71 @@
+# Write an Addon
+
+> Available since v0.32.1
+
+## Capability
+
+An addon can contribute to the following points:
+
+- Global styles (use with caution has it is more the role of [themes](/themes/use))
+- Provide custom layouts or override the existing one
+- Provide custom components or override the existing one
+- Extend UnoCSS/Windi CSS configurations
+- Configure tools like Monaco and Prism
+
+## Conventions
+
+Addons are published to npm registry, and they should follow the conventions below:
+
+- Package name should start with `slidev-addon-`, for example: `slidev-addon-awesome`
+- Add `slidev-addon` and `slidev` in the `keywords` field of your `package.json`
+
+## Setup
+
+### Initialization
+
+To create your addon, start by creating a directory with create a `package.json` file (you can use `npm init`).
+
+Then, install slidev dependencies:
+
+```bash
+$ npm install -D @slidev/cli
+```
+
+### Testing
+
+To set up the testing playground for your addon, you can create an `example.md` file with some content.
+
+And optionally, you can also add some scripts to your `packages.json`
+
+```json
+// package.json
+{
+ "scripts": {
+ "dev": "slidev example.md",
+ "build": "slidev build example.md",
+ "export": "slidev export example.md",
+ "screenshot": "slidev export example.md --format png"
+ }
+}
+```
+
+To publish your addon, simply run `npm publish` and you are good to go. There is no build process required (which means you can directly publish `.vue` and `.ts` files, Slidev is smart enough to understand them).
+
+Addon contribution points follow the same conventions as local customization, please refer to [the docs for the naming conventions](/custom/).
+
+## Addon metadata
+
+### Slidev Version
+
+If the addon is relying on a specific feature of Slidev that are newly introduced, you can set the minimal Slidev version required to have your addon working properly:
+
+```json
+// package.json
+{
+ "engines": {
+ "slidev": ">=0.32.1"
+ }
+}
+```
+
+If users are using older versions of Slidev, an error will be thrown.
diff --git a/builtin/components.md b/builtin/components.md
index 6c27b20..e946c5f 100644
--- a/builtin/components.md
+++ b/builtin/components.md
@@ -2,7 +2,271 @@
## Componentes internos
+<<<<<<< HEAD
> A documentação dessa seção continua em progresso. Até lá, você pode olhar o [código-fonte](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin) diretamente.
+=======
+### `Arrow`
+
+Draw an arrow.
+
+#### Usage
+
+~~~md
+
+~~~
+
+Or:
+
+~~~md
+
+~~~
+
+Parameters:
+
+* `x1` (`string | number`, required): start point x position
+* `y1` (`string | number`, required): start point y position
+* `x2` (`string | number`, required): end point x position
+* `y2` (`string | number`, required): end point x position
+* `width` (`string | number`, default: `2`): line width
+* `color` (`string`, default: `'currentColor'`): line color
+
+### `AutoFitText`
+
+> Experimental
+
+Box inside which the font size will automatically adapt to fit the content. Similar to PowerPoint or Keynote TextBox.
+
+#### Usage
+
+~~~md
+
+~~~
+
+Parameters:
+
+* `max` (`string | number`, default `100`): Maximum font size
+* `min` (`string | number`, default `30`): Minimum font size
+* `modelValue` (`string`, default `''`): text content
+
+### `LightOrDark`
+
+Use it to display one thing or another depending on the active light or dark theme.
+
+#### Usage
+
+Use it with the two named Slots `#dark` and `#light`:
+~~~md
+
+ Dark mode is on
+ Light mode is on
+
+~~~
+
+Provided props on `LightOrDark` component will be available using scoped slot props:
+~~~md
+
+
+
+
+
+
+
+
+~~~
+
+You can provide markdown in the slots, but you will need to surround the content with blank lines:
+~~~md
+
+
+
+![dark](/dark.png)
+
+
+
+
+![light](/light.png)
+
+
+
+~~~
+
+### `Link`
+
+Insert a link you can use to navigate to a given slide.
+
+#### Usage
+
+~~~md
+Go to slide 42
+
+
+~~~
+
+Parameters:
+
+* `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`)
+* `title` (`string`): The title to display
+
+One can use a string as `to`, provided the corresponding route exists, e.g.
+
+~~~md
+---
+routeAlias: solutions
+---
+# Now some solutions!
+~~~
+
+### `RenderWhen`
+
+Render slot only when the context match (for example when we are in presenter view).
+
+#### Usage
+
+~~~md
+This will only be rendered in presenter view.
+~~~
+
+Context type: `'main' | 'slide' | 'overview' | 'presenter' | 'previewNext'`
+
+Parameters:
+
+* `context` (`Context | Context[]`): context or array of contexts you want the slot to be rendered
+
+### `SlideCurrentNo`
+
+Current slide number.
+
+#### Usage
+
+~~~md
+
+~~~
+
+### `SlidesTotal`
+
+Total number of slides.
+
+#### Usage
+
+~~~md
+
+~~~
+
+### `Titles`
+
+Insert the main title from a slide parsed as HTML.
+
+Titles and title levels get automatically retrieved from the first title element of each slides.
+
+You can override this automatic behaviour for a slide by using the front matter syntax:
+```yml
+---
+title: Amazing slide title
+level: 2
+---
+```
+
+#### Usage
+
+The `` component is a virtual component you can import with:
+```js
+import Titles from '/@slidev/titles.md'
+```
+
+Then you can use it with:
+~~~md
+
+~~~
+
+Parameters:
+
+* `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
+
+### `Toc`
+
+Insert a Table Of Content.
+
+If you want a slide to not appear in the `` component, you can use in the front matter block of the slide:
+```yml
+---
+hideInToc: true
+---
+```
+
+Titles are displayed using the [`` component](#titles)
+
+#### Usage
+
+~~~md
+
+~~~
+
+Parameters:
+
+* `columns` (`string | number`, default: `1`): The number of columns of the display
+* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list
+* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display
+* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display
+* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`):
+ * `'all'`: Display all items
+ * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item)
+ * `'onlySiblings'`: Display only items that are in current tree and their direct siblings
+
+### `Transform`
+
+Apply scaling or transforming to elements.
+
+#### Usage
+
+~~~md
+
+
+
+~~~
+
+Parameters:
+
+* `scale` (`number | string`, default `1`): transform scale value
+* `origin` (`string`, default `'top left'`): transform origin value
+
+### `Tweet`
+
+Embed a tweet.
+
+#### Usage
+
+~~~md
+
+~~~
+
+Parameters:
+
+* `id` (`number | string`, required): id of the tweet
+* `scale` (`number | string`, default `1`): transform scale value
+* `conversation` (`string`, default `'none'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)
+* `cards` (`'hidden' | 'visible'`, default `'visible'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)
+
+### `VAfter`, `VClick` and `VClicks`
+
+See https://sli.dev/guide/animations.html
+### `Youtube`
+
+Embed a youtube video.
+
+#### Usage
+
+~~~md
+
+~~~
+
+Parameters:
+
+* `id` (`string`, required): id of the youtube video
+* `width` (`number`): width of the video
+* `height` (`number`): height of the video
+
+You can also make the video start at specific time if you add `?start=1234` to the id value (where 1234 are seconds),
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## Componentes customizados
diff --git a/builtin/layouts.md b/builtin/layouts.md
index ebc8d34..3a5fdf1 100644
--- a/builtin/layouts.md
+++ b/builtin/layouts.md
@@ -4,10 +4,13 @@
> Já que temas podem sobrepor o comportamento dos layouts, o melhor jeito de saber exatamente o uso, parâmetros e exemplos é consultando suas respectivas documentações.
-
### `center`
+<<<<<<< HEAD
Exibe o conteúdo no meio da tela.
+=======
+Displays the content in the middle of the screen.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### `cover`
@@ -15,7 +18,11 @@ Usado para exibir a página de capa para a apresentação, pode conter o título
### `default`
+<<<<<<< HEAD
O layout mais básico, para exibir qualquer conteúdo.
+=======
+The most basic layout, to display any kind of content.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### `end`
@@ -80,6 +87,23 @@ image: ./caminho/para/a/imagem
---
```
+You can change the default background size (`cover`) by adding the `backgroundSize` attribute:
+
+```yaml
+---
+layout: image
+image: ./path/to/the/image
+backgroundSize: contain
+---
+```
+
+```yaml
+---
+layout: image-left
+image: ./path/to/the/image
+backgroundSize: 20em 70%
+---
+```
### `iframe-left`
@@ -132,7 +156,6 @@ url: https://github.com/slidevjs/slidev
---
```
-
### `intro`
Para introduzir a apresentação, geralmente com o título, uma descrição curta, o autor, etc.
@@ -159,7 +182,6 @@ Separa o conteúdo da página em duas colunas.
#### Uso
-
```md
---
layout: two-cols
@@ -176,7 +198,37 @@ Isto está à esquerda
Isto está à direita
```
+<<<<<<< HEAD
## Layouts Customizados
+=======
+### `two-cols-header`
+
+Separates the upper and lower lines of the page content, and the second line separates the left and right columns.
+
+#### Usage
+
+```md
+---
+layout: two-cols-header
+---
+
+This spans both
+
+::left::
+
+# Left
+
+This shows on the left
+
+::right::
+
+# Right
+
+This shows on the right
+```
+
+## Custom Layouts
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Crie um diretório `layouts/` no diretório raiz do projeto, e simplesmente insira os componentes do seu layout customizado do Vue lá dentro.
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..b34c1cc
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,62 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+ export interface GlobalComponents {
+ Arrow: typeof import('./.vitepress/@slidev/client/builtin/Arrow.vue')['default']
+ AutoFitText: typeof import('./.vitepress/@slidev/client/builtin/AutoFitText.vue')['default']
+ 'Carbon:chevronLeft': typeof import('~icons/carbon/chevron-left')['default']
+ 'Carbon:chevronRight': typeof import('~icons/carbon/chevron-right')['default']
+ CarbonApps: typeof import('~icons/carbon/apps')['default']
+ CarbonArrowLeft: typeof import('~icons/carbon/arrow-left')['default']
+ CarbonArrowRight: typeof import('~icons/carbon/arrow-right')['default']
+ CarbonBadge: typeof import('~icons/carbon/badge')['default']
+ CarbonDownload: typeof import('~icons/carbon/download')['default']
+ CarbonEdit: typeof import('~icons/carbon/edit')['default']
+ CarbonInformation: typeof import('~icons/carbon/information')['default']
+ CarbonMaximize: typeof import('~icons/carbon/maximize')['default']
+ CarbonMinimize: typeof import('~icons/carbon/minimize')['default']
+ CarbonMoon: typeof import('~icons/carbon/moon')['default']
+ CarbonPen: typeof import('~icons/carbon/pen')['default']
+ CarbonSettingsAdjust: typeof import('~icons/carbon/settings-adjust')['default']
+ CarbonSun: typeof import('~icons/carbon/sun')['default']
+ CarbonUserAvatar: typeof import('~icons/carbon/user-avatar')['default']
+ CarbonUserSpeaker: typeof import('~icons/carbon/user-speaker')['default']
+ CarbonVideo: typeof import('~icons/carbon/video')['default']
+ CodeBlockWrapper: typeof import('./.vitepress/@slidev/client/builtin/CodeBlockWrapper.vue')['default']
+ Demo: typeof import('./.vitepress/theme/components/Demo.vue')['default']
+ DemoEditor: typeof import('./.vitepress/theme/components/DemoEditor.vue')['default']
+ DemoSlide: typeof import('./.vitepress/theme/components/DemoSlide.vue')['default']
+ Environment: typeof import('./.vitepress/theme/components/Environment.vue')['default']
+ LandingPage: typeof import('./.vitepress/theme/components/LandingPage.vue')['default']
+ Link: typeof import('./.vitepress/@slidev/client/builtin/Link.vue')['default']
+ LogosVue: typeof import('~icons/logos/vue')['default']
+ MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
+ Mermaid: typeof import('./.vitepress/@slidev/client/builtin/Mermaid.vue')['default']
+ Monaco: typeof import('./.vitepress/@slidev/client/builtin/Monaco.vue')['default']
+ PlantUml: typeof import('./.vitepress/@slidev/client/builtin/PlantUml.vue')['default']
+ RenderWhen: typeof import('./.vitepress/@slidev/client/builtin/RenderWhen.vue')['default']
+ RouterLink: typeof import('vue-router')['RouterLink']
+ RouterView: typeof import('vue-router')['RouterView']
+ ShowCaseInfo: typeof import('./.vitepress/theme/components/ShowCaseInfo.vue')['default']
+ ShowCases: typeof import('./.vitepress/theme/components/ShowCases.vue')['default']
+ SlideCurrentNo: typeof import('./.vitepress/@slidev/client/builtin/SlideCurrentNo.vue')['default']
+ SlidesTotal: typeof import('./.vitepress/@slidev/client/builtin/SlidesTotal.vue')['default']
+ Starport: typeof import('vue-starport')['Starport']
+ StarportCarrier: typeof import('vue-starport')['StarportCarrier']
+ ThemeGallery: typeof import('./.vitepress/theme/components/ThemeGallery.vue')['default']
+ ThemeInfo: typeof import('./.vitepress/theme/components/ThemeInfo.vue')['default']
+ TheTweet: typeof import('./.vitepress/theme/components/TheTweet.vue')['default']
+ Toc: typeof import('./.vitepress/@slidev/client/builtin/Toc.vue')['default']
+ TocList: typeof import('./.vitepress/@slidev/client/builtin/TocList.vue')['default']
+ Transform: typeof import('./.vitepress/@slidev/client/builtin/Transform.vue')['default']
+ Tweet: typeof import('./.vitepress/@slidev/client/builtin/Tweet.vue')['default']
+ TwemojiCatWithTearsOfJoy: typeof import('~icons/twemoji/cat-with-tears-of-joy')['default']
+ UimRocket: typeof import('~icons/uim/rocket')['default']
+ Youtube: typeof import('./.vitepress/@slidev/client/builtin/Youtube.vue')['default']
+ }
+}
diff --git a/custom/config-mermaid.md b/custom/config-mermaid.md
index 0fafc8f..b6ac9ac 100644
--- a/custom/config-mermaid.md
+++ b/custom/config-mermaid.md
@@ -14,4 +14,38 @@ export default defineMermaidSetup(() => {
})
```
+<<<<<<< HEAD
Com essa configuração, você pode prover as configurações customizadas para o [Mermaid](https://mermaid-js.github.io/). Consulte as definições de tipo e suas documentações para obter mais detalhes.
+=======
+With the setup, you can provide a custom default setting for [Mermaid](https://mermaid-js.github.io/). Refer to the type definitions and its documentation for more details.
+
+## Custom theme/styles
+
+In case you want to create your custom Mermaid themes or styles, you can do this by defining `themeVariables` like in the following example:
+
+```ts
+import { defineMermaidSetup } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+ return {
+ theme: 'base',
+ themeVariables: {
+ // General theme variables
+ noteBkgColor: '#181d29',
+ noteTextColor: '#F3EFF5cc',
+ noteBorderColor: '#404551',
+
+ // Sequence diagram variables
+ actorBkg: '#0E131F',
+ actorBorder: '#44FFD2',
+ actorTextColor: '#F3EFF5',
+ actorLineColor: '#F3EFF5',
+ signalColor: '#F3EFF5',
+ signalTextColor: '#F3EFF5',
+ }
+ }
+})
+```
+
+You can find all theme variables on the [Mermaid Theme Configuration](https://mermaid.js.org/config/theming.html) page.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/custom/config-monaco.md b/custom/config-monaco.md
index 941ebff..b5d4326 100644
--- a/custom/config-monaco.md
+++ b/custom/config-monaco.md
@@ -18,28 +18,28 @@ Saiba mais sobre [como configurar o Monaco](https://github.com/Microsoft/monaco-
Para usar o Monaco nos seus slides, simplesmente acrescente `{monaco}` aos seus blocos de código:
-~~~js
-//```js
+~~~md
+```js
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
-//```
+```
~~~
Para
-~~~js
-//```js {monaco}
+~~~md
+```js {monaco}
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
-//```
+```
~~~
## Exportando
@@ -56,13 +56,13 @@ monaco: true # padrão "dev"
Quando é usado TypeScript com o Monaco, os tipos para as dependências serão instalados automaticamente no lado do cliente.
-~~~ts
-//```ts {monaco}
+~~~md
+```ts {monaco}
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'
const counter = ref(0)
-//```
+```
~~~
Neste exemplo acima, verifique que tanto o `vue` quanto o `@vueuse/core` estão instalados localmente assim como as dependências / dependências dev, o Slidev vai lidar com o resto para obter os tipos para o editor automaticamente!
@@ -107,4 +107,35 @@ export default defineMonacoSetup((monaco) => {
})
```
+<<<<<<< HEAD
> Se você estiver criando um tema para o Slidev, use o `import()` dinâmico na função de configuração para obter resultados melhores.
+=======
+> If you are creating a theme for Slidev, use dynamic `import()` inside the setup function to get better tree-shaking and code-splitting results.
+
+## Configure the Editor
+
+> Available since v0.43.0
+
+If you would like to customize the Monaco editor you may pass an `editorOptions` object that matches the [Monaco IEditorOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOptions.html) definition.
+
+~~~md
+```ts {monaco} { editorOptions: { wordWrap:'on'} }
+console.log('HelloWorld')
+```
+~~~
+
+Alternatively if you would like these options to be applied to every Monaco instance, you can return them in the `defineMonacoSetup` function
+
+```ts
+// ./setup/monaco.ts
+import { defineMonacoSetup } from '@slidev/types'
+
+export default defineMonacoSetup(() => {
+ return {
+ editorOptions: {
+ wordWrap: 'on'
+ }
+ }
+})
+```
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/custom/config-parser.md b/custom/config-parser.md
new file mode 100644
index 0000000..4784932
--- /dev/null
+++ b/custom/config-parser.md
@@ -0,0 +1,172 @@
+# Configure and Extend the Parser
+
+Slidev parses your presentation file (e.g. `slides.md`) in three steps:
+
+1. A "preparsing" step is carried out: the file is split into slides using the `---` separator, and considering the possible frontmatter blocks.
+2. Each slide is parsed with an external library.
+3. Slidev resolves the special frontmatter property `src: ....`, which allows to include other md files.
+
+## Markdown Parser
+
+Configuring the markdown parser used in step 2 can be done by [configuring Vite internal plugins](/custom/config-vite#configure-internal-plugins).
+
+## Preparser Extensions
+
+> Available since v0.37.0
+
+:::warning
+Important: when modifying the preparser configuration, you need to stop and start slidev again (restart might not be sufficient).
+:::
+
+The preparser (step 1 above) is highly extensible and allows to implement custom syntaxes for your md files. Extending the preparser is considered **an advanced feature** and is susceptible to break [editor integrations](/guide/editors) due to implicit changes in the syntax.
+
+To customize it, create a `./setup/preparser.ts` file with the following content:
+
+```ts
+import { definePreparserSetup } from '@slidev/types'
+
+export default definePreparserSetup(({ filepath, headmatter }) => {
+ return [
+ {
+ transformRawLines(lines) {
+ for (const i in lines) {
+ if (lines[i] === '@@@')
+ lines[i] = 'HELLO'
+ }
+ },
+ }
+ ]
+})
+```
+
+This example systematically replaces any `@@@` line by a line with `hello`. It illustrates the structure of a preparser configuration file and some of the main concepts the preparser involves:
+- `definePreparserSetup` must be called with a function as parameter.
+- The function receives the file path (of the root presentation file) and headmatter (from the md file). It could use this information (e.g., enable extensions based on the presentation file).
+- The function must return a list of preparser extensions.
+- An extension can contain:
+ - a `transformRawLines(lines)` function that runs just after parsing the headmatter of the md file and receives a list of all lines (from the md file). The function can mutate the list arbitrarily.
+ - a `transformSlide(content, frontmatter)` function that is called for each slide, just after splitting the file, and receives the slide content as a string and the frontmatter of the slide as an object. The function can mutate the frontmatter and must return the content string (possibly modified, possibly `undefined` if no modifications have been done).
+ - a `name`
+
+## Example Preparser Extensions
+
+### Use case 1: compact syntax top-level presentation
+
+Imagine a situation where (part of) your presentation is mainly showing cover images and including other md files. You might want a compact notation where for instance (part of) `slides.md` is as follows:
+
+```md
+@cover: /nice.jpg
+# Welcome
+@src: page1.md
+@src: page2.md
+@cover: /break.jpg
+@src: pages3-4.md
+@cover: https://source.unsplash.com/collection/94734566/1920x1080
+# Questions?
+see you next time
+```
+
+To allow these `@src:` and `@cover:` syntaxes, create a `./setup/preparser.ts` file with the following content:
+
+```ts
+import { definePreparserSetup } from '@slidev/types'
+
+export default definePreparserSetup(() => {
+ return [
+ {
+ transformRawLines(lines) {
+ let i = 0
+ while (i < lines.length) {
+ const l = lines[i]
+ if (l.match(/^@cover:/i)) {
+ lines.splice(
+ i,
+ 1,
+ '---',
+ 'layout: cover',
+ `background: ${l.replace(/^@cover: */i, '')}`,
+ '---',
+ ''
+ )
+ continue
+ }
+ if (l.match(/^@src:/i)) {
+ lines.splice(
+ i,
+ 1,
+ '---',
+ `src: ${l.replace(/^@src: */i, '')}`,
+ '---',
+ ''
+ )
+ continue
+ }
+ i++
+ }
+ }
+ },
+ ]
+})
+```
+
+And that's it.
+
+### Use case 2: using custom frontmatter to wrap slides
+
+Imagine a case where you often want to scale some of your slides but still want to use a variety of existing layouts so create a new layout would not be suited.
+For instance, you might want to write your `slides.md` as follows:
+
+```md
+---
+layout: quote
+_scale: 0.75
+---
+
+# Welcome
+
+> great!
+
+---
+_scale: 4
+---
+# Break
+
+---
+
+# Ok
+
+---
+layout: center
+_scale: 2.5
+---
+# Questions?
+see you next time
+```
+
+Here we used an underscore in `_scale` to avoid possible conflicts with existing frontmatter properties (indeed, the case of `scale`, without underscore would cause potential problems).
+
+To handle this `_scale: ...` syntax in the frontmatter, create a `./setup/preparser.ts` file with the following content:
+
+```ts
+import { definePreparserSetup } from '@slidev/types'
+
+export default definePreparserSetup(() => {
+ return [
+ {
+ transformSlide(content, frontmatter) {
+ if ('_scale' in frontmatter) {
+ return [
+ ``,
+ '',
+ content,
+ '',
+ ''
+ ].join('\n')
+ }
+ },
+ },
+ ]
+})
+```
+
+And that's it.
diff --git a/custom/config-shortcuts.md b/custom/config-shortcuts.md
index 90a883d..4e88f69 100644
--- a/custom/config-shortcuts.md
+++ b/custom/config-shortcuts.md
@@ -2,15 +2,25 @@
> Disponível a partir da v0.20
+> Since v0.35.6 (excluded), you decide which base shortcuts to keep (see `...base,` below).
+
+<<<<<<< HEAD
Crie o arquivo `./setup/shortcuts.ts` com o seguinte conteúdo:
+=======
+## Getting started
+
+Create `./setup/shortcuts.ts` with the following content:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```ts
-import { defineShortcutsSetup, NavOperations } from '@slidev/types'
+import type { NavOperations, ShortcutOptions } from '@slidev/types'
+import { defineShortcutsSetup } from '@slidev/types'
-export default defineShortcutsSetup((nav: NavOperations) => {
+export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
return [
+ ...base, // keep the existing shortcuts
{
key: 'enter',
fn: () => nav.next(),
@@ -29,4 +39,50 @@ Com a configuração, você pode fornecer as customizações para os atalhos men
A função de configuração recebe um objeto com alguns métodos de navegação, e retorna um array contendo alguns atalhos de configuração. Confira as definições de tipos para mais detalhes.
+<<<<<<< HEAD
Confira [useMagicKeys | VueUse](https://vueuse.org/core/useMagicKeys/) para mais detalhes sobre o evento de uma tecla pressionada.
+=======
+## Advanced key binding
+
+The `key` type only allows for strings, but you can still bind multiple keys by using following convention:
+
+```ts
+import type { NavOperations, ShortcutOptions } from '@slidev/types'
+import { defineShortcutsSetup } from '@slidev/types'
+
+export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
+ return [
+ ...base,
+ {
+ key: 'ShiftLeft+ArrowRight',
+ fn: () => nav.next(),
+ autoRepeat: true,
+ }
+ ]
+})
+```
+
+## Advanced navigation features
+
+The `nav` navigation operations allows you to access some functionalities than basic _next slide_ or _previous slide_. See the following for use-cases:
+
+```ts
+import { NavOperations, defineShortcutsSetup } from '@slidev/types'
+
+export default defineShortcutsSetup((nav: NavOperations) => {
+ return [
+ {
+ key: 'e',
+
+ // Set the `e` keyboard shortcut to be used as a bookmark
+ // or quick-access of sorts, to navigate specifically to
+ // slide number 42
+ fn: () => nav.go(42),
+ autoRepeat: true,
+ }
+ ]
+})
+```
+
+Refer to [useMagicKeys | VueUse](https://vueuse.org/core/useMagicKeys/) for more details about key pressed event.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/custom/config-unocss.md b/custom/config-unocss.md
new file mode 100644
index 0000000..65ef03b
--- /dev/null
+++ b/custom/config-unocss.md
@@ -0,0 +1,46 @@
+# Configure UnoCSS
+
+
+
+[UnoCSS](https://unocss.dev) is now the default CSS framework for Slidev since v0.42.0. UnoCSS is an fast atomic CSS engine that has full flexibility and extensibility.
+
+By default, Slidev enables the following presets out-of-box:
+
+- [@unocss/preset-uno](https://unocss.dev/presets/uno) - Tailwind / Windi CSS compatible utilities
+- [@unocss/preset-attributify](https://unocss.dev/presets/attributify) - Attributify mode
+- [@unocss/preset-icons](https://unocss.dev/presets/icons) - Use any icons as class
+- [@unocss/preset-web-fonts](https://unocss.dev/presets/web-fonts) - Use web fonts at ease
+- [@unocss/transformer-directives](https://unocss.dev/transformers/directives) - Use `@apply` in CSS
+
+Slidev also adds shortcuts as can be seen in its [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/uno.config.ts).
+
+You can therefore style your content the way you want. For example:
+
+```html
+
+
+### Name
+
+- Item 1
+- Item 2
+
+
+```
+
+## Configurations
+
+You can create `uno.config.ts` under the root of your project to extend the builtin configurations
+
+```ts
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+ shortcuts: {
+ // custom the default background
+ 'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+ },
+ // ...
+})
+```
+
+Learn more about [UnoCSS configurations](https://unocss.dev/guide/config-file)
diff --git a/custom/config-vite.md b/custom/config-vite.md
index aae9bee..65e04c5 100644
--- a/custom/config-vite.md
+++ b/custom/config-vite.md
@@ -2,7 +2,11 @@
+<<<<<<< HEAD
O Slidev usa o [Vite](http://vitejs.dev/) por baixo dos panos. Isso significa que você pode aproveitar o excelente sistema de plug-ins do Vite para personalizar ainda mais seus slides.
+=======
+Slidev is powered by [Vite](https://vitejs.dev/) under the hood. This means you can leverage Vite's great plugin system to customize your slides even further.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
O arquivo `vite.config.ts` será seguido se você tiver um.
@@ -11,9 +15,9 @@ O Slidev possui os seguintes plug-ins pré-configurados:
- [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue)
- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
- [unplugin-icons](https://github.com/antfu/unplugin-icons)
-- [vite-plugin-md](https://github.com/antfu/vite-plugin-md)
-- [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss)
+- [vite-plugin-vue-markdown](https://github.com/antfu/vite-plugin-vue-markdown)
- [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets)
+- [unocss/vite](https://github.com/unocss/unocss/tree/main/packages/vite)
Saiba mais sobre as [pré-configurações aqui](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts).
diff --git a/custom/config-windicss.md b/custom/config-windicss.md
index 4682946..5612261 100644
--- a/custom/config-windicss.md
+++ b/custom/config-windicss.md
@@ -2,12 +2,20 @@
+<<<<<<< HEAD
O Markdown suporta naturalmente tags HTML embutidas. Portanto, você pode estilizar seu conteúdo como preferir. Para oferecer certa comodidade, nós temos o [Windi CSS](https://github.com/windicss/windicss) embutido, para que você possa estilizar o conteúdo diretamente usando classes.
+=======
+::: warning
+Since Slidev v0.47.0, we no longer support Windi CSS. Please migrate to [UnoCSS](/custom/config-unocss).
+:::
+
+Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Por exemplo:
```html
-
+
### Nome
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index 8519f4b..3af6b85 100644
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -5,6 +5,7 @@ O Slidev emprega algumas convenções de estrutura de diretório para minimizar
A estrutura básica é a seguinte:
```bash
+<<<<<<< HEAD
seu-slidev/
├── components/ # componentes customizados
├── layouts/ # layouts customizados
@@ -14,6 +15,17 @@ seu-slidev/
├── index.html # injeções ao index.html
├── slides.md # a entrada principal dos slides
└── vite.config.ts # extensões às configurações do vite
+=======
+your-slidev/
+ ├── components/ # custom components
+ ├── layouts/ # custom layouts
+ ├── public/ # static assets
+ ├── setup/ # custom setup / hooks
+ ├── styles/ # custom style
+ ├── index.html # injections to index.html
+ ├── slides.md # the main slides entry
+ └── vite.config.ts # extending vite config
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```
Todos eles são opcionais.
@@ -48,7 +60,11 @@ seu-slidev/
```
+<<<<<<< HEAD
Esta funcionalidade é fornecida pelo [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components), saiba mais por lá.
+=======
+This feature is powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components), learn more there.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
O Slidev também disponibiliza alguns [componentes embutidos](/builtin/components) pra você usar.
@@ -115,19 +131,23 @@ import './code.css'
import './layouts.css'
```
+<<<<<<< HEAD
Estilos serão processados pelo [Windi CSS](http://windicss.org/) e o [PostCSS](https://postcss.org/), portanto você pode usar aninhamento de css e as [at-directives](https://windicss.org/features/directives.html) sem nenhuma configuração adicional.
Por exemplo:
+=======
+Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://unocss.dev/transformers/directives#apply) out-of-box. For example:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```less
.slidev-layout {
- @apply px-14 py-10 text-[1.1rem];
+ --uno: px-14 py-10 text-[1.1rem];
h1, h2, h3, h4, p, div {
- @apply select-none;
+ --uno: select-none;
}
pre, code {
- @apply select-text;
+ --uno: select-text;
}
a {
@@ -136,7 +156,11 @@ Por exemplo:
}
```
+<<<<<<< HEAD
[Aprenda mais sobre a sintaxe](https://windicss.org/features/directives.html).
+=======
+[Learn more about the syntax](https://unocss.dev/transformers/directives#apply).
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## `index.html`
@@ -184,5 +208,9 @@ O `index.html` final hospedado será:
Convenções: `global-top.vue` | `global-bottom.vue`
+<<<<<<< HEAD
Saiba mais: [Camadas Globais](/custom/global-layers)
+=======
+Learn more: [Global Layers](/custom/global-layers)
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/custom/fonts.md b/custom/fonts.md
index b38945e..122b122 100644
--- a/custom/fonts.md
+++ b/custom/fonts.md
@@ -9,12 +9,21 @@ No seu frontmatter, configure assim:
```yaml
---
fonts:
+<<<<<<< HEAD
# basicamente o texto
sans: 'Robot'
# use com a classe `font-serif` do windicss
serif: 'Robot Slab'
# para blocos de código, códigos inline, etc.
mono: 'Fira Code'
+=======
+ # basically the text
+ sans: Robot
+ # use with `font-serif` css class from UnoCSS
+ serif: Robot Slab
+ # for code blocks, inline code, etc.
+ mono: Fira Code
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
---
```
@@ -24,15 +33,24 @@ As fontes serão **importadas automaticamente do [Google Fonts](https://fonts.go
## Fontes Locais
+<<<<<<< HEAD
Por padrão, o Slidev assume que todas as fontes especificadas por meio da configuração `fonts` vêm do Google Fonts. Se você quiser usar fontes locais, especifique o `fonts.local` para interromper a importação automática.
+=======
+By default, Slidev assumes all the fonts specified via `fonts` configurations come from Google Fonts. If you want to use local fonts, specify the `fonts.local` to opt-out the auto-importing.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```yaml
---
fonts:
# assim como no font-family do css, você pode usar `,` para separar múltiplas como substitutas
sans: 'Helvetica Neue,Robot'
+<<<<<<< HEAD
# marca 'Helvetica Neue' como uma fonte local
local: 'Helvetica Neue'
+=======
+ # mark 'Helvetica Neue' as local font
+ local: Helvetica Neue
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
---
```
@@ -43,8 +61,13 @@ Por padrão, o Slidev importa três espessuras `200`,`400`,`600` para cada fonte
```yaml
---
fonts:
+<<<<<<< HEAD
sans: 'Robot'
# padrão
+=======
+ sans: Robot
+ # default
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
weights: '200,400,600'
# importa fontes itálicas, o padrão é `false`
italic: false
@@ -60,13 +83,17 @@ Na maioria das vezes, você só vai precisar especificar a "fonte especial" e o
```yaml
---
fonts:
- sans: 'Robot'
- serif: 'Robot Slab'
- mono: 'Fira Code'
+ sans: Robot
+ serif: Robot Slab
+ mono: Fira Code
---
```
+<<<<<<< HEAD
vai resultar em
+=======
+will result in
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```css
.font-sans {
@@ -86,7 +113,7 @@ Se você quiser desabilitar as fontes substitutas, configure assim:
---
fonts:
mono: 'Fira Code, monospace'
- fallback: false
+ fallbacks: false
---
```
@@ -100,8 +127,6 @@ Atualmente, apenas o Google Fonts é suportado, nós planejamos adicionar mais p
```yaml
---
fonts:
- provide: 'none'
+ provider: none
---
```
-
-
diff --git a/custom/global-layers.md b/custom/global-layers.md
index 0398339..dd41d37 100644
--- a/custom/global-layers.md
+++ b/custom/global-layers.md
@@ -4,18 +4,28 @@
Camadas globais te permitem ter componentes customizados que **permanecem** pelos slides. Isto pode ser útil para ter rodapés, animações entre os slides, efeitos globais, etc.
+<<<<<<< HEAD
O Slidev disponibiliza duas camadas para está funcionalidade, crie o arquivo `global-top.vue` ou `global-bottom.vue` na raiz do projeto e elas serão inseridas automaticamente.
+=======
+Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue` or `custom-nav-controls.vue` under your project root and it will pick up automatically.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Relacionamento das Camadas:
- Cabeçalho Global (`global-top.vue`)
- Slides
+<<<<<<< HEAD
- Rodapé Global (`global-bottom.vue`)
+=======
+- Global Bottom (`global-bottom.vue`)
+- NavControls
+ - Customized Navigation Controls (`custom-nav-controls.vue`)
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## Exemplo
```html
-
+
@@ -23,7 +33,22 @@ Relacionamento das Camadas:
O texto `Seu Nome` vai aparecer em todos os slides.
+<<<<<<< HEAD
Para habilitar isso em função de alguma condição, você pode utilizar com o [Vue Global Context](/custom/vue-context).
+=======
+```html
+
+
+
+
+```
+
+The button `Next` will appear in NavControls.
+
+To enable it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context).
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```html
@@ -60,3 +85,13 @@ Para habilitar isso em função de alguma condição, você pode utilizar com o
```
+
+```html
+
+
+
+
+
+```
diff --git a/custom/highlighters.md b/custom/highlighters.md
index 98cfe83..db2392d 100644
--- a/custom/highlighters.md
+++ b/custom/highlighters.md
@@ -1,34 +1,53 @@
# Destacadores
+<<<<<<< HEAD
O Slidev vem com dois destacadores de sintaxe pra você escolher:
+=======
+Slidev comes with two syntax highlighters for you to choose from:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
- [Prism](https://prismjs.com/)
- [Shiki](https://github.com/shikijs/shiki)
**Prism** é um dos destacadores de sintaxe mais populares. O destaque é feito adicionando classes de token ao código e é colorido utilizando CSS. Você pode pesquisar nos seus [temas oficiais](https://github.com/PrismJS/prism-themes), ou criar/customizar um você mesmo de forma bem fácil usando o [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars).
+<<<<<<< HEAD
**Shiki**, por outro lado, é um destacador de sintaxe TextMate baseado em gramática. Ele gera tokens coloridos, então não é necessário CSS adicional. Já que ele tem um ótimo suporte gramatical, as cores geradas são bem precisas, como as que você vê no VS Code. Shiki também vem com [vários temas predefinidos](https://github.com/shikijs/shiki/blob/master/docs/themes.md). O ponto negativo do Shiki é que ele também precisa de temas TextMate (compatíveis com temas do VS Code) para fazer o destaque, o que pode ser um pouco mais complicado de customizar.
+=======
+**Shiki** is a TextMate grammar-powered syntax highlighter. It generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with [a bunch of built-in themes](https://shiki.style/themes). In Slidev, we also provided the [TwoSlash](#twoslash-integration) support is also built-in.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Os temas do Slidev geralmente suportam tanto Prism quanto Shiki, mas dependendo do temas que estiver usando, pode ser que só suporte um deles.
Quando você tiver escolha, a troca é basicamente:
+<<<<<<< HEAD
- **Prism** para uma customização mais fácil
- **Shiki** para um destaque mais preciso
Por padrão, o Slidev usa Prism. Você pode mudar isso modificando seu frontmatter:
+=======
+- **Prism** for easier customization
+- **Shiki** for accurate highlighting
+
+Slidev uses Shiki by default since v0.47. You can switch to it by adding the following to your `slides.md`:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```yaml
---
-highlighter: shiki
+highlighter: Prism
---
```
+<<<<<<< HEAD
## Configurar Prism
Para configurar seu Prism, você pode simplesmente importar o tema css or usar o [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) para configurar temas tanto para o modo claro quanto para o escuro. Consulte suas documentações para mais detalhes.
## Configurar Shiki
+=======
+## Configure Shiki
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
@@ -40,14 +59,18 @@ import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup(() => {
return {
- theme: {
+ themes: {
dark: 'min-dark',
light: 'min-light',
},
+ transformers: [
+ // ...
+ ]
}
})
```
+<<<<<<< HEAD
Consulte a [documentação do Shiki](https://github.com/shikijs/shiki/blob/master/docs/themes.md#all-themes) para ver o nome dos temas disponíveis.
Ou se você quiser usar seu próprio tema:
@@ -66,3 +89,10 @@ export default defineShikiSetup(async({ loadTheme }) => {
}
})
```
+=======
+Refer to [Shiki's docs](https://shiki.style) for available theme names.
+
+## Configure Prism
+
+To configure your Prism, you can just import the theme CSS or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/custom/index.md b/custom/index.md
index 980a80a..9f9c6da 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -1,6 +1,10 @@
# Customizações
+<<<<<<< HEAD
O Slidev é totalmente customizável, desde estilização até configurações de ferramentas. Ele te permite configurar as ferramentas por trás ([Vite](/custom/config-vite), [Windi CSS](/custom/config-windicss), [Monaco](/custom/config-monaco), etc.)
+=======
+Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [UnoCSS](/custom/config-unocss), [Monaco](/custom/config-monaco), etc.)
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## Configurações do Frontmatter
@@ -8,13 +12,29 @@ Você pode configurar o Slidev no frontmatter do seu primeiro slide, abaixo é m
```yaml
---
+<<<<<<< HEAD
# id fo tema ou nome do módulo
theme: 'default'
# título do seu slide, será automaticamente inferido do primeiro header se não for espeecificado
title: ''
# titleTemplate para a página web, `%s` será substituído pelo título da página
+=======
+# theme id or package name
+# Learn more: https://sli.dev/themes/use.html
+theme: default
+# title of your slide, will auto infer from the first header if not specified
+title: Slidev
+# titleTemplate for the webpage, `%s` will be replaced by the page's title
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
titleTemplate: '%s - Slidev'
+# information for your slides, can be a markdown string.
+info: false
+# author field for exported PDF
+author: Your Name Here
+# keywords field for exported PDF, comma-delimited.
+keywords: keyword1,keyword2
+<<<<<<< HEAD
# habilita o download em PDF na SPA compilada, também pode ser uma url customizada
download: true
# destacador de sintaxe, pode ser 'prism' ou 'shiki'
@@ -31,30 +51,115 @@ routerMode: 'history'
# proporção da tela para os slides
aspectRatio: '16/9'
# largura real da tela, unidade em px
+=======
+# enable presenter mode, can be boolean, 'dev' or 'build'
+presenter: true
+# enabled pdf downloading in SPA build, can also be a custom url
+download: false
+# filename of the export file
+exportFilename: slidev-exported
+# export options
+# use export CLI options in camelCase format
+# Learn more: https://sli.dev/guide/exporting.html
+export:
+ format: pdf
+ timeout: 30000
+ dark: false
+ withClicks: false
+ withToc: false
+# syntax highlighter, can be 'prism', 'shiki'
+highlighter: shiki
+# show line numbers in code blocks
+lineNumbers: false
+# enable monaco editor, can be boolean, 'dev' or 'build'
+monaco: dev
+# download remote assets in local using vite-plugin-remote-assets, can be boolean, 'dev' or 'build'
+remoteAssets: false
+# controls whether texts in slides are selectable
+selectable: true
+# enable slide recording, can be boolean, 'dev' or 'build'
+record: dev
+
+# force color schema for the slides, can be 'auto', 'light', or 'dark'
+colorSchema: auto
+# router mode for vue-router, can be "history" or "hash"
+routerMode: history
+# aspect ratio for the slides
+aspectRatio: 16/9
+# real width of the canvas, unit in px
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
canvasWidth: 980
+# used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x`
+themeConfig:
+ primary: '#5d8392'
+<<<<<<< HEAD
# fontes serão automaticamente importadas do Google fonts
# Saiba mais: https://sli.dev/custom/fonts
+=======
+# favicon, can be a local file path or URL
+favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
+# URL of PlantUML server used to render diagrams
+plantUmlServer: 'https://www.plantuml.com/plantuml'
+# fonts will be auto imported from Google fonts
+# Learn more: https://sli.dev/custom/fonts
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
fonts:
- sans: 'Roboto'
- serif: 'Roboto Slab'
- mono: 'Fira Code'
+ sans: Roboto
+ serif: Roboto Slab
+ mono: Fira Code
# frontmatter padrão aplicado para todos os slides
defaults:
- layout: 'default'
+ layout: default
# ...
+<<<<<<< HEAD
# informações para seus slides, pode ser uma string em markdown
info: |
## Slidev
Minha primeira apresentação com o [Slidev](http://sli.dev/)!
+=======
+# drawing options
+# Learn more: https://sli.dev/guide/drawing.html
+drawings:
+ enabled: true
+ persist: false
+ presenterOnly: false
+ syncAll: true
+
+# HTML tag attributes
+htmlAttrs:
+ dir: ltr
+ lang: en
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
---
```
Vejas as [definições de tipos](https://github.com/slidevjs/slidev/blob/main/packages/types/src/config.ts) para mais opções.
+<<<<<<< HEAD
## Estrutura de Diretório
+=======
+## Per slide configuration
+
+In addition, every slide accepts the following configuration in the Frontmatter block:
+
+* `clicks` (`number`): Custom clicks count (learn more [here](/guide/animations.html#custom-total-clicks-count)).
+* `disabled` (`boolean`): Completely disable and hide the slide.
+* `hide` (`boolean`): The same as `disabled`.
+* `hideInToc` (`boolean`): Hide the slide for the `` components (learn more [here](/builtin/components.html#toc)).
+* `layout` (`string`): Defines the layout component applied to the slide (learn more [here](/guide/syntax.html#front-matter-layouts) and [here](/builtin/layouts.html)).
+* `level` (`number`): Override the title level for the `` and `` components (only if `title` has also been declared, learn more [here](/builtin/components.html#titles)).
+* `preload` (`boolean`, default `true`): Preload the next slide (learn more [here](/guide/animations.html#motion)).
+* `routeAlias` (`string`): Create a route alias that can be used in the URL or with the `` component (learn more [here](/builtin/components.html#link)).
+* `src` (`string`): Includes a markdown file (learn more [here](/guide/syntax.html#multiple-entries)).
+* `title` (`string`): Override the title for the `` and `` components (learn more [here](/builtin/components.html#titles)).
+* `transition` (`string | TransitionProps`): Defines the transition between the slide and the next one (learn more [here](/guide/animations.html#slide-transitions)).
+* `zoom` (`number`): Custom zoom scale. Useful for slides with a lot of content.
+
+## Directory Structure
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
O Slidev emprega algumas convenções de estrutura de diretório para minimizar a superfície de configuração e tornar as extensões das funcionalidades flexíveis e intuitivas.
@@ -62,6 +167,7 @@ Consulte a seção [Estrutura de Diretório](/custom/directory-structure).
## Configurar Ferramentas
+<<<<<<< HEAD
- [Destacadores](/custom/highlighters)
- [Configurar Vue](/custom/config-vue)
- [Configurar Vite](/custom/config-vite)
@@ -69,3 +175,12 @@ Consulte a seção [Estrutura de Diretório](/custom/directory-structure).
- [Configurar Monaco](/custom/config-monaco)
- [Configurar KaTeX](/custom/config-katex)
- [Configurar Mermaid](/custom/config-mermaid)
+=======
+- [Highlighters](/custom/highlighters)
+- [Configure Vue](/custom/config-vue)
+- [Configure Vite](/custom/config-vite)
+- [Configure UnoCSS](/custom/config-unocss)
+- [Configure Monaco](/custom/config-monaco)
+- [Configure KaTeX](/custom/config-katex)
+- [Configure Mermaid](/custom/config-mermaid)
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/custom/vue-context.md b/custom/vue-context.md
index 6a5d941..3b82395 100644
--- a/custom/vue-context.md
+++ b/custom/vue-context.md
@@ -25,6 +25,34 @@ A página atual é: {{ $slidev.nav.currentPage }}
## Propriedades
+### `$clicks`
+
+`$clicks` hold a number of clicks on the current slide. Can be used conditionally to show different content on clicks.
+
+```html
+
Content
+```
+
+### `$page`
+
+`$page` holds the number of the current page, 1-indexed.
+
+```md
+Page: {{ $page }}
+
+Is current page active: {{ $page === $slidev.nav.currentPage }}
+```
+
+### `$renderContext`
+
+`$renderContext` holds the current render context, can be `slide`, `overview`, `presenter` or `previewNext`
+
+```md
+
+ This content will only be rendered in slides view
+
+```
+
### `$slidev.nav`
Um objeto reativo contendo as propriedades e controles da navegação dos slides. Por exemplo:
@@ -40,13 +68,19 @@ $slidev.nav.go(10) // vai para o slide #10
```js
$slidev.nav.currentPage // número do slide atual
+<<<<<<< HEAD
$slidev.nav.currentLayout // id do layout atual
$slidev.nav.clicks // contagem de clicks atual
+=======
+$slidev.nav.currentLayout // current layout id
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```
Para mais propriedades disponíveis, consulte as exportações do arquivo [nav.ts](https://github.com/slidevjs/slidev/blob/main/packages/client/logic/nav.ts).
+> Note: `$slidev.nav.clicks` is a global state while `$clicks` is local to each slide. It's recommended to **use `$clicks` over `$slidev.nav.clicks`** to avoid clicks changed been triggered on page transitions.
+
### `$slidev.configs`
Um objeto reativo que contém as [configurações do primeiro frontmatter](/custom/#configuracoes-do-frontmatter) do seu `slides.md`. Por exemplo:
@@ -69,10 +103,16 @@ Um objeto reativo contendo as configurações de tema.
---
title: Meu Primeiro Slidev!
themeConfig:
- primary: #213435
+ primary: # 213435
---
```
```
{{ $slidev.themeConfigs.primary }} // '#213435'
```
+
+### `$nav`
+
+> Available since v0.43.0
+
+A shorthand of `$slidev.nav`.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..f03c99f
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,5 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+
+})
diff --git a/guide/animations.md b/guide/animations.md
index d87a6f3..e8a1f47 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -1,12 +1,24 @@
+<<<<<<< HEAD
# Animações
+=======
+---
+outline: deep
+---
+
+# Animations
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
## Animações no clique
+> [!NOTE]
+> Since v0.48.0, we are rewritten the click animations system with much more consistent behaviors. It might change the behaviors of your existing slides in edge cases. While this page is showing the new click system, you can find more details about the refactor in [#1279](https://github.com/slidevjs/slidev/pull/1279).
+
### `v-click`
Para aplicar "animações no clique" para os elementos, você pode usar a diretriz `v-click` ou os componentes ``.
```md
+<<<<<<< HEAD
# Olá
@@ -22,10 +34,20 @@ Olá Mundo
Eae!
+=======
+
+ Hello **World**
+
+
+
Hey!
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```
### `v-after`
+<<<<<<< HEAD
O uso do `v-after` é similar ao do `v-click`, mas ele tornará o elemento visível quando o `v-click` anterior tiver sido disparado.
```md
@@ -34,18 +56,48 @@ O uso do `v-after` é similar ao do `v-click`, mas ele tornará o elemento visí
```
Quando você clicar no botão "próximo", tanto `Olá` quanto `Mundo` aparecerão simultaneamente.
+=======
+`v-after` is only provided as a directive. It will turn the element visible when the previous `v-click` is triggered.
+
+```md
+
Hello
+
World
+```
+
+When you press "next", both `Hello` and `World` will show up together.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
-### `v-click-hide`
+### Hide after clicking
+<<<<<<< HEAD
Tem o mesmo comportamento do `v-click`, mas em vez de fazer o elemento aparecer, faz o elemento invisível após do clique.
```md
Olá
+=======
+Add a `.hide` modifier to `v-click` or `v-after` to make the element invisible after clicking, instead of showing up.
+
+```md
+
Visible after 1 click
+
Hidden after 2 click
+
Hidden after 2 click
+```
+
+For `v-click` component, you can use the `hide` prop to achieve the same effect:
+
+```md
+ Visible after 1 click
+ Hidden after 2 click
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```
### `v-clicks`
+<<<<<<< HEAD
`v-clicks` só é provido como um componente. É uma alternativa a aplicar a diretriz `v-click` em todos os elementos dentro dele. Ele é especialmente útil quando se está trabalhando com listas.
+=======
+`v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. It is especially useful when working with lists and tables.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```md
@@ -53,14 +105,146 @@ Tem o mesmo comportamento do `v-click`, mas em vez de fazer o elemento aparecer,
- Item 1
- Item 2
- Item 3
-- Item 4
```
+<<<<<<< HEAD
Um item se tornará visível a cada vez que você clicar em "próximo".
### Contagem de Cliques Customizadas
+=======
+An item will become visible each time you click "next".
+It accepts a `depth` prop for nested list:
+
+```md
+
+
+- Item 1
+ - Item 1.1
+ - Item 1.2
+- Item 2
+ - Item 2.1
+ - Item 2.2
+
+
+```
+
+Also, you can use the `every` prop to specify the number of items to show after each click:
+
+```md
+
+
+- Item 1 (part 1)
+- Item 1 (part 2)
+- Item 2 (part 1)
+- Item 2 (part 2)
+
+
+```
+
+### Positioning
+
+By default, the clicking animations take place one by one. You can customize the animation position of elements by using the `at` prop or the `v-click` directive with value.
+
+Like the CSS layout system, click-animated elements can be "relative" or "absolute":
+
+#### Relative Position
+
+This actual position of relative elements are calculated based on the previous relative elements:
+
+~~~md
+
visible after 1 click
+
visible after 3 clicks
+
hidden after 2 clicks
+
+```js {none|1|2}{at:'+5'}
+1 // highlighted after 7 clicks
+2 // highlighted after 8 clicks
+```
+~~~
+
+> [!NOTE]
+> The default value of `v-click` is `'+1'` when you don't specify it.
+
+In fact, `v-after` are just shortcuts for `v-click` with `at` prop:
+
+```md
+
+
+
+
+
+
+
+
+```
+
+:::info
+Only string values start with `'+'` or `'-'` like `'+1'` are treated as relative positions:
+
+| Value | Kind |
+| -------------- | -------- |
+| `'-1'`, `'+1'` | Relative |
+| `+1` === `1` | Absolute |
+| `'1'` | Absolute |
+
+So don't forget the single quotes for the relative values.
+:::
+
+#### Absolute Position
+
+The given value is the exact click count to show the element:
+
+~~~md
+
visible after 3 clicks
+
visible after 2 clicks
+
hidden after 1 click
+
+```js {none|1|2}{at:3}
+1 // highlighted after 3 clicks
+2 // highlighted after 4 clicks
+```
+~~~
+
+#### Mixed Case
+
+You can mix the absolute and relative positions:
+
+~~~md
+
visible after 1 click
+
visible after 3 clicks
+
visible after 2 click
+
visible after 1 click
+
visible after 4 clicks
+~~~
+
+The following example synchronizes the highlighting of the two code blocks:
+
+~~~md
+```js {1|2}{at:1}
+1 + 1
+'a' + 'b'
+```
+
+```js {1|2}{at:1}
+2
+'ab'
+```
+~~~
+
+### Enter & Leave
+
+> Available since v0.43.0
+
+You can also specify the enter and leave index for the `v-click` directive by passing an array. The end index is exclusive.
+
+```md
+
This will be shown on the 2nd and 3rd clicks, and hide again after the 4th.
+```
+
+### Custom Total Clicks Count
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Por padrão, o Slidev calcula quantos passos são necessários antes de passar para o próximo slide. Você pode sobrepor está configuração informando a propriedade `clicks` no frontmatter:
@@ -71,6 +255,7 @@ clicks: 10
---
```
+<<<<<<< HEAD
### Ordenação
Passando o índice o clique nas suas diretrizes, você pode customizar a ordem dos aparecimentos.
@@ -100,6 +285,9 @@ clicks: 3
```
### Transição de Elementos
+=======
+### Element Transitions
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Quando você aplica a diretriz `v-click` aos seus elementos, a eles serão anexados a classe `slidev-vclick-target`. Quando os elementos estão ocultos, a classe `slidev-vclick-hidden` também será anexada. Por exemplo:
@@ -128,9 +316,15 @@ Por padrão, uma transição suave de opacidade é aplicada à essas classes:
}
```
+<<<<<<< HEAD
Você pode substituí-las no seu CSS customizado para alterar os efeitos de transição.
Por exemplo, você pode conseguir uma transição de aumentar a escala assim:
+=======
+You can override them to customize the transition effects in your custom stylesheets.
+
+For example, you can achieve the scaling up transitions by:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```css
// styles.css
@@ -196,8 +390,113 @@ O texto `Slidev` se moverá de `-80px` até sua posição original na inicializa
>
> ```
+<<<<<<< HEAD
Saiba mais: [Demonstração](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/directive-usage.html) | [Presets](https://motion.vueuse.org/presets.html)
## Transições de Página
> O suporte integrado para transição entre slides AINDA NÂO é provido na versão atual. Estamos planejando adicionar o suporte na próxima versão principal. Até lá, você ainda pode usar estilos customizados e bibliotecas para fazer isso.
+=======
+Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/features/directive-usage) | [Presets](https://motion.vueuse.org/features/presets)
+
+## Slide Transitions
+
+
+
+> Available since v0.39.0
+
+Slidev supports slide transitions out of the box. You can enable it by setting the `transition` frontmatter option:
+
+```md
+---
+transition: slide-left
+---
+```
+
+This will give you a nice sliding effects on slide switching. Setting it in the frontmatter will apply to all slides. You can also set different transition per slide.
+
+### Builtin Transitions
+
+- `fade` - Crossfade in/out
+- `fade-out` - Fade out and then fade in
+- `slide-left` - Slides to the left (slide to right when going backward)
+- `slide-right` - Slides to the right (slide to left when going backward)
+- `slide-up` - Slides to the top (slide to bottom when going backward)
+- `slide-down` - Slides to the bottom (slide to top when going backward)
+- `view-transition` - Slides with the view transitions API
+
+### View Transitions
+
+> Available since v0.43.0
+
+The **View Transitions API** provides a mechanism for easily creating animated transitions between different DOM states. Learn more how it works in [View Transitions API - MDN Web Docs - Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API).
+
+:::warning
+Experimental: This is not supported by all browsers. Check the [Browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility) carefully before using this.
+:::
+
+You can use the `view-transition-name` CSS property to name view transitions, which creates connections between different page elements and smooth transitions when switching slides.
+
+You can enable [MDC (Markdown Component) Syntax](https://content.nuxtjs.org/guide/writing/mdc) support to conveniently name view-transitions:
+
+```md
+---
+transition: view-transition
+mdc: true
+---
+# View Transition {.inline-block.view-transition-title}
+---
+# View Transition {.inline-block.view-transition-title}
+```
+
+### Custom Transitions
+
+Slidev's slide transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by:
+
+```md
+---
+transition: my-transition
+---
+```
+
+and then in your custom stylesheets:
+
+```css
+.my-transition-enter-active,
+.my-transition-leave-active {
+ transition: opacity 0.5s ease;
+}
+
+.my-transition-enter-from,
+.my-transition-leave-to {
+ opacity: 0;
+}
+```
+
+Learn more how it works in [Vue Transition](https://vuejs.org/guide/built-ins/transition.html).
+
+### Forward & Backward Transitions
+
+You can specify different transitions for forward and backward navigation using `|` as a separator in the transition name:
+
+```md
+---
+transition: go-forward | go-backward
+---
+```
+
+With this, when you go from slide 1 to slide 2, the `go-forward` transition will be applied. When you go from slide 2 to slide 1, the `go-backward` transition will be applied.
+
+### Advanced Usage
+
+The `transition` field accepts an option that will passed to the [``](https://vuejs.org/api/built-in-components.html#transition) component. For example:
+
+```md
+---
+transition:
+ name: my-transition
+ enterFromClass: custom-enter-from
+ enterActiveClass: custom-enter-active
+---
+```
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/guide/drawing.md b/guide/drawing.md
index 545d137..3a411f5 100644
--- a/guide/drawing.md
+++ b/guide/drawing.md
@@ -6,7 +6,7 @@ Nós temos o [drauu](https://github.com/antfu/drauu) embutido para desenhos e an
Pra começar, clique no ícone na barra de navegação e comece a desenhar. Isto também está disponível no [Modo Apresentador](/guide/presenter-mode). Desenhos e anotações que você ciar serão **sincronizadas** automaticamente por todas as instâncias em tempo real.
-
+
## Use com uma caneta Stylus
@@ -18,7 +18,7 @@ A seguinte configuração do frontmatter te permite manter os desenhos como SVGs
```md
---
-drawings:
+drawings:
persist: true
---
```
@@ -29,7 +29,7 @@ Inteiramente:
```md
---
-drawings:
+drawings:
enabled: false
---
```
@@ -38,7 +38,7 @@ Apenas no Desenvolvimento:
```md
---
-drawings:
+drawings:
enabled: dev
---
```
@@ -47,7 +47,7 @@ Apenas no Modo de Apresentador:
```md
---
-drawings:
+drawings:
presenterOnly: true
---
```
@@ -58,9 +58,13 @@ Por padrão, o Slidev sincroniza os seus desenhos por todas as instâncias. Se
```md
---
-drawings:
+drawings:
syncAll: false
---
```
+<<<<<<< HEAD
Com esta configuração, só os desenhos da instância do apresentador serão sincronizados com as outras.
+=======
+With this config, only the drawing from the presenter instance will be able to sync with others.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/guide/editors.md b/guide/editors.md
index 5b86fc4..f9ace19 100644
--- a/guide/editors.md
+++ b/guide/editors.md
@@ -6,7 +6,11 @@ Se você quiser certo gerenciamento de alto-nível em seus slides, nós provemos
## Editor Integrado
+<<<<<<< HEAD
O Slidev vem com um editor [CodeMirror](https://codemirror.net/) integrado que vai instantaneamente recarregar e salvar as alterações no seu arquivo.
+=======
+Slidev comes with an integrated [CodeMirror](https://codemirror.net/) editor that will instantly reload and save the changes to your file.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Clique no botão para abri-lo.
@@ -40,4 +44,4 @@ A extensão do VS Code fornece algumas funcionalidades para te ajudar a organiza
![](https://user-images.githubusercontent.com/11247099/116809994-cc2caa00-ab73-11eb-879f-60585747c3c9.png)
-
+
diff --git a/guide/exporting.md b/guide/exporting.md
index 37d5bfd..2a3cded 100644
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -1,6 +1,8 @@
# Exportando
-## PDF
+## Slides
+
+### PDF
> A exportação para PDF depende do [Playwright](https://playwright.dev) para renderizar. Você precisa instalar o [`playwright-chromium`](https://playwright.dev/docs/installation#download-single-browser-binary) primeiro para usar esta funcionalidade.
> Se você estiver fazendo exportações num ambiente de CI, [o guia do playwright para CI](https://playwright.dev/docs/ci) pode ser útil.
@@ -17,6 +19,7 @@ Agora exporte seus slides para PDF usando o seguinte comando
$ slidev export
```
+<<<<<<< HEAD
Após alguns segundos, seus slides estarão prontos em `./slides-exports.pdf`.
### Exportar etapas de cliques
@@ -29,6 +32,11 @@ $ slidev export --with-clicks
```
## PNGs
+=======
+After a few seconds, your slides will be ready at `./slides-export.pdf`.
+
+### PNGs and Markdown
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Ao passar a opção `--format png`, o Slidev vai exportar imagens em PNG para cada slide em vez de PDF.
@@ -36,6 +44,126 @@ Ao passar a opção `--format png`, o Slidev vai exportar imagens em PNG para ca
$ slidev export --format png
```
+You can also compile a markdown file composed of compiled png using `--format md`.
+
+```bash
+$ slidev export --format md
+```
+
+### Dark mode
+
+In case you want to export your slides using the dark version of the theme, use the `--dark` option:
+
+```bash
+$ slidev export --dark
+```
+
+### Export Clicks Steps
+
+> Available since v0.21
+
+By default, Slidev exports one page per slide with clicks animations disabled. If you want export slides with multiple steps into multiple pages, pass the `--with-clicks` option.
+
+```bash
+$ slidev export --with-clicks
+```
+
+### Slide range
+
+You can also specify a range of slides to export with the `--range` option.
+
+```bash
+$ slidev export --range 1,4-5,6
+```
+
+### PDF outline
+
+> Available since v0.36.10
+
+You can generate the PDF outline by passing the `--with-toc` option.
+
+```bash
+$ slidev export --with-toc
+```
+
+### Output filename
+
+You can specify the output filename with the `--output` option.
+
+```bash
+$ slidev export --output my-pdf-export
+```
+
+Or in the frontmatter configuration:
+
+```yaml
+---
+exportFilename: my-pdf-export
+---
+```
+
+### Export a range of slides
+
+By default, all slides in the presentation are exported. If you want to export a specific slide or a range of slides you can set the `--range` option and specify which slides you would like to export.
+
+```bash
+$ slidev export --range 1,6-8,10
+```
+
+This option accepts both specific slide numbers and ranges.
+
+The example above would export slides 1,6,7,8, and 10.
+
+### Multiple entries
+
+You can also export multiple slides at once.
+
+```bash
+$ slidev export slides1.md slides1.md
+```
+
+Or
+
+```bash
+$ slidev export *.md
+```
+
+In this case, each input file will generate its own PDf file.
+
+## Presenter notes
+
+> Available since v0.36.8
+
+Export only the presenter notes (the last comment block for each slide) into a text document in PDF.
+
+```bash
+$ slidev export-notes
+```
+
+This command also accept multiple entries like for the [export command](#multiple-entries)
+
## Single-Page Application (SPA)
+<<<<<<< HEAD
Veja [Hospedagem Estática](/guide/hosting).
+=======
+See [Static Hosting](/guide/hosting).
+
+## Troubleshooting
+
+### Timeout
+
+For big presentation you might want to increase the playwrigth timeout with `--timeout`
+
+```bash
+$ slidev export --timeout 60000
+```
+
+### Executable path
+
+You can set the browser executable path for playwright using `--executable-path`
+
+```bash
+$ slidev export --executable-path [path_to_chromium]
+```
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/guide/faq.md b/guide/faq.md
index 90f19f1..97a38dc 100644
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -4,7 +4,11 @@
Já que o Slidev é baseado na Web, você pode aplicar qualquer layout de grid como quiser. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), ou até [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), você tem total controle.
+<<<<<<< HEAD
Como nós temos o [Windi CSS](https://windicss.org/) integrado, aqui vai um jeito simples de você fazer isso:
+=======
+Since we have [UnoCSS](https://unocss.dev/) built-in, here is one simple way for you to reference:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```html
@@ -24,7 +28,7 @@ A segunda coluna
Vá além, você pode customizar o tamanho de cada coluna assim:
```html
-
+
A primeira coluna (200px)
@@ -43,9 +47,13 @@ A terceira coluna (10% da largura do elemento pai)
```
+<<<<<<< HEAD
Aprenda mais sobre [Windi CSS Grids](https://windicss.org/utilities/grid.html).
## Posicionamento
+=======
+## Positioning
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Os slides são definidos em um tamanho fixo (padrão `980x552px`) e se ajusta para caber na tela do usuário. Você pode tranquilamente usar posições absolutas em seus slides e elas serão expandidas com a tela.
@@ -96,7 +104,7 @@ Saiba mais: [Estilos Integrados](/guide/syntax.html#estilos-integrados)
Você pode fornecer estilos globais customizados criando um arquivo `./style.css`, por exemplo:
```css
-/* style.css */
+/* style.css */
h1 {
font-size: 10em !important;
diff --git a/guide/hosting.md b/guide/hosting.md
index ee0b71e..87abd09 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -8,11 +8,23 @@ Você também pode compilar os slides em uma aplicação SPA auto-hospedável:
$ slidev build
```
+<<<<<<< HEAD
A aplicação gerada estará disponível na pasta `dist/` e a partir daí você pode hospedá-la no [GitHub Pages](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), ou em qualquer outra plataforma que preferir. Agora você pode compartilhar seus slides com o todo mundo com um único link.
+=======
+The generated application will be available under `dist/`.
+
+You can test the generated build using a web server (Apache, NGINX, Caddy...etc.) or in the project you can directly run: `npx vite preview`.
+
+Then you can host it on [GitHub Pages](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), or whatever you want. Now you can share your slides with the rest of the world with a single link.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### Diretório Base
+<<<<<<< HEAD
Para implantar seus slides em sub-rotas, você precisará passar a opção `--base`. Por exemplo:
+=======
+To deploy your slides under sub-routes, you will need to pass the `--base` option. The `--base` path **must begin and end** with a slash `/`; for example:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```bash
$ slidev build --base /palestras/minha-palestra-legal/
@@ -30,9 +42,15 @@ download: true
---
```
+<<<<<<< HEAD
O Slidev vai gerar um arquivo PDF na compilação e um botão de download aparecerá na aplicação SPA.
Você também pode prover uma URL customizada para o PDF. Nesse caso, o processo de renderização do arquivo será pulado.
+=======
+Slidev will generate a PDF file along with the build, and a download button will be displayed in the SPA.
+
+You can also provide a custom URL for the PDF. In that case, the rendering process will be skipped.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```md
---
@@ -40,7 +58,54 @@ download: 'https://myside.com/my-talk.pdf'
---
```
+<<<<<<< HEAD
## Exemplos
+=======
+This can also be done with the CLI option `--download` (`boolean` only).
+
+```bash
+$ slidev build --download
+```
+
+When using the download option, you can also provide the export options:
+
+* By using [CLI export options](/guide/exporting.html)
+* Or [frontmatter export options](/custom/#frontmatter-configures)
+
+### Output directory
+
+You can change the output directory using `--out`.
+
+```bash
+$ slidev build --out my-build-folder
+```
+
+### Watch mode
+
+By passing the `--watch` option the build will run in watch mode and will rebuild anytime the source changes.
+
+```bash
+$ slidev build --watch
+```
+
+### Multiple entries
+
+You can also build multiple slides at once.
+
+```bash
+$ slidev build slides1.md slides1.md
+```
+
+Or
+
+```bash
+$ slidev build *.md
+```
+
+In this case, each input file will generate a folder containing the build in the output directory.
+
+## Examples
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Aqui estão alguns exemplos de aplicações SPA exportadas:
@@ -51,7 +116,11 @@ Para mais, veja a [Galeria](/showcases).
## Hospedando
+<<<<<<< HEAD
Nós recomendamos usar o comando `npm init slidev@lastest` para iniciar seu projeto, que já contém as configurações necessárias para serviços de hospedagem.
+=======
+We recommend to use `npm init slidev@latest` to scaffold your project, which contains the necessary configuration files for hosting services out-of-the-box.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### Netlify
@@ -59,21 +128,25 @@ Nós recomendamos usar o comando `npm init slidev@lastest` para iniciar seu proj
Crie o arquivo `netlify.toml` na raiz do projeto com o seguinte conteúdo.
-```ts
-[build.environment]
- NODE_VERSION = "14"
-
+```toml
[build]
- publish = "dist"
- command = "npm run build"
+publish = 'dist'
+command = 'npm run build'
+
+[build.environment]
+NODE_VERSION = '20'
[[redirects]]
- from = "/*"
- to = "/index.html"
- status = 200
+from = '/*'
+to = '/index.html'
+status = 200
```
+<<<<<<< HEAD
Depois vá para o seu painel de controle do Netlify e crie um novo site com o repositório.
+=======
+Then go to your Netlify dashboard and create a new site with the repository.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### Vercel
@@ -89,33 +162,68 @@ Crie o arquivo `vercel.json` na raiz do projeto com o seguinte conteúdo.
}
```
+<<<<<<< HEAD
Depois vá para o seu painel de controle da Vercel e crie um novo site com o repositório.
+=======
+Then go to your Vercel dashboard and create a new site with the repository.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
-## GitHub Pages
+### GitHub Pages
- [GitHub Pages](https://pages.github.com/)
+<<<<<<< HEAD
Crie o arquivo `.github/workflows/deploy.yml` com o seguinte conteúdo para implantar seus slides no Github Pages pelo Github Actions.
+=======
+To deploy your slides on GitHub Pages:
+- upload all the files of the project in your repo (i.e. named `name_of_repo`)
+- create `.github/workflows/deploy.yml` with following content to deploy your slides to GitHub Pages via GitHub Actions. In this file, replace `` with `name_of_repo`. Make sure to leave the leading and trailing slashes in place.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```yaml
name: Deploy pages
-on: push
+
+on:
+ workflow_dispatch: {}
+ push:
+ branches:
+ - main
+
jobs:
deploy:
runs-on: ubuntu-latest
+
+ permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+
steps:
- - uses: actions/checkout@v2
- - uses: actions/setup-node@v2
+ - uses: actions/checkout@v4
+
+ - uses: actions/setup-node@v4
with:
- node-version: '14'
+ node-version: 'lts/*'
+
- name: Install dependencies
run: npm install
+
- name: Build
- run: npm run build
- - name: Deploy pages
- uses: crazy-max/ghaction-github-pages@v2
+ run: npm run build -- --base //
+
+ - uses: actions/configure-pages@v4
+
+ - uses: actions/upload-pages-artifact@v3
with:
- build_dir: dist
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ path: dist
+
+ - name: Deploy
+ id: deployment
+ uses: actions/deploy-pages@v4
```
+- In your repository, go to Settings>Pages. Under "Build and deployment", select "Github Actions".
+- Finally, after all workflows are executed, a link to the slides should appear under Settings>Pages.
diff --git a/guide/index.md b/guide/index.md
index 7423c3e..6c80434 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -1,13 +1,24 @@
+<<<<<<< HEAD
# Primeiros Passos
## Introdução
Slidev (slide + dev, `/slʌɪdɪv/`) é uma ferramenta baseada em tecnologias web para criar e apresentar slides. O Slidev foi projetado para desenvolvedores focarem em escrever conteúdo em Markdown e ainda ter o poder do HTML e dos componentes do Vue para fornecer layouts e designs perfeitos com demonstrações interativas de suas apresentações.
+=======
+---
+outline: deep
+---
+
+# Getting Started
+
+Slidev (slide + dev, **/slaɪdɪv/**) is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
É usado um arquivo Markdown cheio de recursos para gerar slides bonitos com uma experiência de *refresh* instantâneo, além de várias integrações embutidas como desenvolvimento de código em tempo real, exportação pra PDF, gravação da apresentação, e assim por diante. Como tem como base tecnologias da web, você pode fazer tudo com o Slidev - as possibilidades são infinitas.
Você pode saber mais sobre a lógica por trás do projeto na seção [Por que Slidev](/guide/why).
+<<<<<<< HEAD
### Funcionalidades
- 📝 [**Baseado em markdown**](/guide/syntax.html) - use seus editores fluxos de trabalho favoritos
@@ -54,11 +65,43 @@ O Slidev é possível pela combinação dessas ferramentes e tecnologias.
#### Crie Localmente
Com NPM:
+=======
+## Features
+
+- 📝 [**Markdown-based**](/guide/syntax.html) - use your favorite editors and workflow
+- 🧑💻 [**Developer Friendly**](/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc.
+- 🎨 [**Themable**](/themes/gallery.html) - theme can be shared and used with npm packages
+- 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss).
+- 🤹 [**Interactive**](/custom/directory-structure.html#components) - embedding Vue components seamlessly
+- 🎙 [**Presenter Mode**](/guide/presenter-mode.html) - use another window, or even your phone to control your slides
+- 🎨 [**Drawing**](/guide/drawing.html) - draw and annotate on your slides
+- 🧮 [**LaTeX**](/guide/syntax.html#latex) - built-in LaTeX math equations support
+- 📰 [**Diagrams**](/guide/syntax.html#diagrams) - creates diagrams with textual descriptions
+- 🌟 [**Icons**](/guide/syntax.html#icons) - Access to icons from any iconset directly
+- 💻 [**Editors**](/guide/editors.html) - integrated editor, or [extension for VS Code](https://github.com/slidevjs/slidev-vscode)
+- 🎥 [**Recording**](/guide/recording.html) - built-in recording and camera view
+- 📤 [**Portable**](/guide/exporting.html) - export into PDF, PNGs, or even a hostable SPA
+- ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev)
+- 🛠 [**Hackable**](/custom/config-vite.html) - using Vite plugins, Vue components, or any npm packages
+
+## Scaffolding Your First Presentation
+
+### Try it Online
+
+Start Slidev right in your browser: [sli.dev/new](https://sli.dev/new)
-```bash
-$ npm init slidev
+[![](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://sli.dev/new)
+
+### Create Locally
+
+::: code-group
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
+
+```bash [npm]
+npm init slidev@latest
```
+<<<<<<< HEAD
Com Yarn:
```bash
@@ -68,6 +111,21 @@ $ yarn create slidev
Siga as instruções e comece a fazer seus slides agora mesmo! Para mais detalhes sobre a sintaxe do markdown, dê uma olhada no [guia de sintaxe](/guide/syntax).
### Interface de Linha de Comando
+=======
+```bash [yarn]
+yarn create slidev
+```
+
+```bash [pnpm]
+pnpm create slidev
+```
+
+:::
+
+Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the [syntax guide](/guide/syntax).
+
+## Command Line Interface
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Em um projeto onde o Slidev está instalado, você pode usar o binário `slidev` nos seus scripts do npm.
@@ -89,7 +147,11 @@ $ npx slidev
Rode `slidev --help` para mais opções disponíveis.
+<<<<<<< HEAD
### Sintaxe do Markdown
+=======
+## Markdown Syntax
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
O Slidev lê o seu arquivo `slides.md` na raiz do seu projeto e o converte em slides. A qualquer alteração que você faça nele, o conteúdo dos slides serão atualizados imediatamente. Por exemplo:
@@ -104,13 +166,38 @@ Olá Mundo
Use blocos de código diretamente para o destaque
+<<<<<<< HEAD
//```ts
console.log('Olá, Mundo!')
//```
+=======
+```ts
+console.log('Hello, World!')
+```
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
---
# Página 3
~~~
+<<<<<<< HEAD
Leia mais sobre a sintaxe Markdown do Slidev no [guia de sintaxe](/guide/syntax).
+=======
+Read more about the Slidev Markdown syntax in the [syntax guide](/guide/syntax).
+
+## Tech Stack
+
+Slidev is made possible by combining these tools and technologies.
+
+- [Vite](https://vitejs.dev) - An extremely fast frontend tooling
+- [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
+- [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS framework, style your slides at ease
+- [Shiki](https://github.com/shikijs/shiki), [Prism](https://github.com/PrismJS/prism), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
+- [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
+- [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
+- [Iconify](https://iconify.design/) - Iconsets collection.
+- [Drauu](https://github.com/antfu/drauu) - Drawing and annotations support
+- [KaTeX](https://katex.org/) - LaTeX math rendering.
+- [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/guide/install.md b/guide/install.md
index f621fa5..689bd45 100644
--- a/guide/install.md
+++ b/guide/install.md
@@ -2,16 +2,25 @@
## Modelo Inicial
+<<<<<<< HEAD
> Slidev requer [**Node.js >=14.0**](https://nodejs.org/)
+=======
+> Slidev requires [**Node.js >=18.0**](https://nodejs.org/)
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
O melhor jeito de começar é usando nosso modelo oficial.
+<<<<<<< HEAD
Com NPM:
+=======
+::: code-group
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
-```bash
-$ npm init slidev@latest
+```bash [npm]
+npm init slidev@latest
```
+<<<<<<< HEAD
Com Yarn:
```bash
@@ -19,6 +28,19 @@ $ yarn create slidev
```
Siga as instruções e vai abrir automaticamente pra você uma apresentação de slides em http://localhost:3030/.
+=======
+```bash [yarn]
+yarn create slidev
+```
+
+```bash [pnpm]
+pnpm create slidev
+```
+
+:::
+
+Follow the prompts and it will open up the slideshow at `http://localhost:3030/` automatically for you.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
A apresentação também contém a configuração básica e uma breve demonstração de como começar com o Slidev.
@@ -27,15 +49,16 @@ A apresentação também contém a configuração básica e uma breve demonstra
Se ainda assim preferir instalar o Slidev manualmente ou se quiser integrá-lo em seus projetos existentes, você pode fazer assim:
```bash
-$ npm install @slidev/cli @slidev/theme-default
+npm install @slidev/cli @slidev/theme-default
```
```bash
-$ touch slides.md
+touch slides.md
```
```bash
-$ npx slidev
+npx slidev
```
+<<<<<<< HEAD
> Observe que se você estiver usando o [pnpm](https://pnpm.io), será necessário habilitar a opção [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) para que o Slidev funcione corretamente:
>
> ```bash
@@ -43,25 +66,186 @@ $ npx slidev
> ```
## Instalação Global
+=======
+## Install Globally
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
> Disponível a partir da v0.14
Você pode instalar o Slidev globalmente com o seguinte comando
```bash
-$ npm i -g @slidev/cli
+npm i -g @slidev/cli
```
E agora você pode usar comando `slidev` em qualquer lugar sem ter que criar um projeto toda hora.
```bash
-$ slidev
+npx slidev
```
Este comando também vai tentar o `@slidev/cli` local se ele for encontrado nos `node_modules`.
## Instalação no Docker
+<<<<<<< HEAD
Se você precisar de uma maneira rápida de rodar uma apresentação com container, você pode usar a imagem do [docker](https://hub.docker.com/r/stig124/slidev) mantida por [stig124](https://github.com/Stig124), ou construir sua própria.
Consulte o [repositório do slidevjs/container](https://github.com/slidevjs/container) para mais detalhes.
+=======
+If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker](https://hub.docker.com/r/tangramor/slidev) image maintained by [tangramor](https://github.com/tangramor), or build your own.
+
+Just run following command in your work folder:
+
+```bash
+docker run --name slidev --rm -it \
+ --user node \
+ -v ${PWD}:/slidev \
+ -p 3030:3030 \
+ tangramor/slidev:latest
+```
+
+If your work folder is empty, it will generate a template `slides.md` and other related files under your work folder, and launch the server on port `3030`.
+
+You can access your slides from `http://localhost:3030/`
+
+### Build deployable image
+
+Or you can create your own slidev project to a docker image with Dockerfile:
+
+```Dockerfile
+FROM tangramor/slidev:latest
+
+ADD . /slidev
+
+```
+
+Create the docker image: `docker build -t myppt .`
+
+And run the container: `docker run --name myslides --rm --user node -p 3030:3030 myppt`
+
+You can visit your slides from `http://localhost:3030/`
+
+### Build hostable SPA (Single Page Application)
+
+Run command `docker exec -i slidev npx slidev build` on the running container `slidev`. It will generate static HTML files under `dist` folder.
+
+#### Host on Github Pages
+
+You can host `dist` in a static web site such as [Github Pages](https://tangramor.github.io/slidev_docker/) or Gitlab Pages.
+
+Because in Github pages the url may contain subfolder, so you need to modify the generated `index.html` to change `href="/assets/xxx` to `href="./assets/xxx`. Or you may use `--base=//` option during the build process, such as: `docker exec -i slidev npx slidev build --base=/slidev_docker/`.
+
+And to avoid Jekyll build process, you need to add an empty file `.nojekyll`.
+
+#### Host by docker
+
+You can also host it by yourself with docker:
+
+```bash
+docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine
+```
+
+Or create a static image with following Dockerfile:
+
+```Dockerfile
+FROM nginx:alpine
+
+COPY dist /usr/share/nginx/html
+```
+
+Create the docker image: `docker build -t mystaticppt .`
+
+And run the container: `docker run --name myslides --rm -p 80:80 mystaticppt`
+
+You can visit your slides from http://localhost/
+
+Refer to the [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details.
+
+## Command Line Interface (CLI)
+
+`@slidev/cli` Expose a few commands you can use with `npx slidev ...` or by adding scripts in your `package.json`:
+```json
+{
+ "script": {
+ "dev": "slidev"
+ }
+}
+```
+
+In that case you will be able to run `npm run dev`.
+
+You can pass options to any commands:
+
+* boolean option are `true` if they are present, false otherwise (example: `slidev --open`)
+* some options can have values you can add just after the option or by using the `=` character (example: `slidev --port 8080` or `slidev --port=8080`)
+
+If you use npm scripts, don't forget to add `--` after the npm command:
+```bash
+npm run slidev -- --open
+```
+
+### `slidev [entry]`
+
+Start a local server for Slidev.
+
+* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+Options:
+
+* `--port`, `-p` (`number`, default: `3030`): port number.
+* `--open`, `-o` (`boolean`, default: `false`): open in browser.
+* `--remote [password]` (`string`): listen to public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query `password` parameter.
+* `--bind` (`string`, default: `0.0.0.0`): specify which IP addresses the server should listen on in the remote mode.
+* `--log` (`'error', 'warn', 'info', 'silent'`, default: `'warn'`): Log level.
+* `--force`, `-f` (`boolean`, default: `false`): force the optimizer to ignore the cache and re-bundle.
+* `--theme`, `-t` (`string`): override theme.
+
+### `slidev build [entry]`
+
+Build hostable SPA.
+
+* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+Options:
+
+* `--watch`, `-w` (`boolean`, default: `false`): build watch.
+* `--out`, `-o` (`string`, default: `dist`): output dir.
+* `--base` (`string`, default: `/`): base URL (see https://cli.vuejs.org/config/#publicpath)
+* `--download` (`boolean`, default: `false`): allow to download the slides as PDF inside the SPA.
+* `--theme`, `-t` (`string`): override theme.
+
+### `slidev export [entry]`
+
+Export slides to PDF (or other format).
+
+* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+Options:
+
+* `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output.
+* `--format` (`'pdf', 'png', 'md'`, default: `'pdf'`): output format.
+* `--timeout` (`number`, default: `30000`): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto).
+* `--range` (`string`): page ranges to export (example: `'1,4-5,6'`).
+* `--dark` (`boolean`, default: `false`): export as dark theme.
+* `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every clicks (see https://sli.dev/guide/animations.html#click-animations).
+* `--theme`, `-t` (`string`): override theme.
+
+### `slidev format [entry]`
+
+Format the markdown file.
+
+* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+### `slidev theme [subcommand]`
+
+Theme related operations.
+
+Subcommands:
+
+* `eject [entry]`: Eject current theme into local file system
+ * `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+ * Options:
+ * `--dir` (`string`, default: `theme`): output dir.
+ * `--theme`, `-t` (`string`): override theme.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
diff --git a/guide/navigation.md b/guide/navigation.md
index bce4f7d..24c7ec2 100644
--- a/guide/navigation.md
+++ b/guide/navigation.md
@@ -2,7 +2,11 @@
## Barra de Navegação
+<<<<<<< HEAD
Mova seu mouse para o canto inferior esquerdo da página do Slidev, a barra de navegação aparecerá.
+=======
+Move your mouse to the bottom left corner of Slidev page to make the navigation bar appear.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
![](/screenshots/navbar.png)
@@ -28,6 +32,10 @@ Mova seu mouse para o canto inferior esquerdo da página do Slidev, a barra de n
## Visualização dos Slides
+<<<<<<< HEAD
Ao apertar o ou clicar no botão na barra de navegação, você pode ter uma visão geral dos slides para que você possa alterná-los facilmente.
+=======
+By pressing o or clicking the button in the navigation bar, you can have the overview of your slides so you can jump between them easily.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
![](/screenshots/slides-overview.png)
diff --git a/guide/presenter-mode.md b/guide/presenter-mode.md
index f7d45b2..d7dd05e 100644
--- a/guide/presenter-mode.md
+++ b/guide/presenter-mode.md
@@ -1,5 +1,39 @@
# Modo Apresentador
+<<<<<<< HEAD
Clique no botão no painel de navegação, ou visite manualmente http://localhost:3030/presenter para entrar no modo apresentador. Sempre que você entrar no modo de apresentador, outras instâncias da página ficarão automaticamente sincronizadas com o apresentador.
+=======
+Click the button in the navigation panel, or visit `http://localhost:3030/presenter` manually, to enter the presenter mode. Whenever you enter the presenter mode, other page instances will automatically stay in sync with the presenter.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
![](/screenshots/presenter-mode.png)
+
+## Disabling
+
+Presenter mode is enabled by default.
+
+You can disable this feature with the following config:
+
+```md
+---
+presenter: false
+---
+```
+
+Or you can enable it only for `dev` or `build` mode by setting the mode you want in the config:
+```md
+---
+presenter: dev
+---
+```
+In that case the presenter will only be available when running `slidev` but not when running `slidev build`.
+
+## Remote restricted access
+
+You can run your presentation with remote access by running `slidev --remote`.
+
+In that case you may want to share the slides with other people but you don't want them to access the presenter mode to mess up your presentation.
+
+For this scenario you can provide a password for starting the server by running `slidev --remote=your_password`.
+
+In that case you will need to provide the password when accessing `/presenter/*` routes.
diff --git a/guide/recording.md b/guide/recording.md
index 32671bb..a5134c7 100644
--- a/guide/recording.md
+++ b/guide/recording.md
@@ -6,7 +6,7 @@ O Slidev tem gravação e visão da câmera integrados. Você pode usá-las para
Clique no botão no painel de navegação para mostrar sua câmera na apresentação. Você pode arrastar para movê-la, e usar o manipulador no canto inferior direito para redimensioná-la. O tamanho e a posição vai continuar no `localStorage`, por isso vai permanecer mesmo após recarregamentos, então você não precisa se preocupar com isso.
-
+
## Gravando
diff --git a/guide/syntax.md b/guide/syntax.md
index 6594d8b..5a391d1 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -1,8 +1,20 @@
+<<<<<<< HEAD
# Sintaxe do Markdown
Os slides são escritos em **um único arquivo markdown** (por padrão `./slides.md`).
Você pode usar [os recursos do Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) normalmente, com suporte adicional de HTML *inline* e Componentes do Vue. Estilização usando o [Windi CSS](https://windicss.org) também é suportada. Use `---` seguido de uma nova linha para separar seus slides.
+=======
+---
+outline: deep
+---
+
+# Markdown Syntax
+
+Slides are written within **a single markdown file** (by default `./slides.md`).
+
+You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional support of inlined HTML and Vue Components. Styling using [UnoCSS](/custom/config-unocss) is also supported. Use `---` padded with a new line to separate your slides.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
~~~md
# Slidev
@@ -30,9 +42,13 @@ Você pode usar o Windi CSS e componentes Vue diretamente para estilizar e enriq
~~~
-## Front Matter & Layouts
+## Frontmatter & Layouts
+<<<<<<< HEAD
Especifique layouts e outros metadados para cada slide convertendo os separadores em [blocos front matter](https://jekyllrb.com/docs/front-matter/). Cada frontmatter começa e termina com três traços (`---`). Os textos entre os traços são dados no formato [YAML](https://www.cloudbees.com/blog/yaml-tutorial-everything-you-need-get-started/). Por exemplo:
+=======
+Specify layouts and other metadata for each slide by converting the separators into [frontmatter blocks](https://jekyllrb.com/docs/front-matter/). Each frontmatter starts with a triple-dash and ends with another. Texts between them are data objects in [YAML](https://www.cloudbees.com/blog/yaml-tutorial-everything-you-need-get-started/) format. For example:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
~~~md
---
@@ -47,7 +63,7 @@ Esta é a página capa.
layout: center
background: './images/background-1.png'
class: 'text-white'
----
+---
# Página 2
@@ -62,10 +78,42 @@ Está pe uma página padrão sem nenhum metadado adicional.
Dê uma olhada em [customização](/custom/) para mais detalhes.
+<<<<<<< HEAD
## Blocos de Código
+=======
+> The custom syntax might not be compactible with some formatters like Prettier. To improve that, we also support using a direct `yaml` code block to define the frontmatter:
+>
+> ~~~markdown
+> ---
+> layout: cover
+> ---
+>
+> # Slidev
+>
+> This is the cover page.
+>
+> ---
+>
+> ```yaml
+> # The first yaml block will be treated as the frontmatter of that slide
+> layout: center
+> background: './images/background-1.png'
+> class: 'text-white'
+> ```
+>
+> # Page 2
+>
+> This is a page with the layout `center` and a background image.
+> ~~~
+>
+> (Available since v0.44.0)
+
+## Code Blocks
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Um grande motivo pelo qual eu estou desenvolvendo o Slidev é a necessidade de fazer meu código aparecer perfeitamente nos slides. Então como você deve estar pensando, você pode usar blocos de código no estilo do Markdown para destacar seu código.
+<<<<<<< HEAD
~~~ts
//```ts
console.log('Olá, Mundo!')
@@ -73,50 +121,173 @@ console.log('Olá, Mundo!')
~~~
Nós suportamos o [Prism](http://prismjs.com) e o [Shiki](https://github.com/shiki/shiki) como destacadores de sintaxe. Consulte [a seção de destacadores](/custom/highlighters) para mais detalhes.
+=======
+~~~md
+```ts
+console.log('Hello, World!')
+```
+~~~
+
+We support [Prism](https://prismjs.com), [Shiki](https://github.com/shikijs/shiki) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### Realce de Linha
+<<<<<<< HEAD
Para realçar linhas específicas, simplesmente adicione o número das linhas em chaves `{}`. A contagem do número das linhas começa a partir do 1.
+=======
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
-~~~ts
-//```ts {2,3}
+~~~md
+```ts {2,3}
function add(
a: Ref | number,
b: Ref | number
) {
return computed(() => unref(a) + unref(b))
}
-//```
+```
~~~
+<<<<<<< HEAD
Para definir os realces em vários passos, você pode usar `|` para separá-los. Por exemplo:
+=======
+You can enable line number to all slides by setting `lineNumbers: true` on the config or enable each code block individually by setting `lines:true`. You can also set the starting line for each code block and highlight the lines accordingly, defaults to 1:
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
-~~~ts
-//```ts {2-3|5|all}
+~~~md
+```ts {6,7}{lines:true, startLine:5}
function add(
a: Ref | number,
b: Ref | number
) {
return computed(() => unref(a) + unref(b))
}
-//```
+```
~~~
+<<<<<<< HEAD
Isto vai primeiro realçar `a: Ref | number` e `b: Ref | number`, aí `return computed(() => unref(a) + unref(b))` após um clique, e por último, o bloco inteiro. Aprenda mais no [guia de animações no clique](/guide/animations#animacoes-no-clique).
+=======
+To change the highlight in multiple clicks, you can use `|` to separate them:
+
+~~~md
+```ts {2-3|5|all}
+function add(
+ a: Ref | number,
+ b: Ref | number
+) {
+ return computed(() => unref(a) + unref(b))
+}
+```
+~~~
+
+This will first highlight `a: Ref | number` and `b: Ref | number`, and then `return computed(() => unref(a) + unref(b))` after one click, and lastly, the whole block.
+
+You can set the line number to `hide` to hide the code block or `none` to not highlight any line:
+
+~~~md
+```ts {hide|none}
+function add(
+ a: Ref | number,
+ b: Ref | number
+) {
+ return computed(() => unref(a) + unref(b))
+}
+```
+~~~
+
+::: tip
+Learn more in the [clicks animations guide](./animations#positioning).
+:::
+
+If the code doesn't fit into one slide, you use the `maxHeight` to set fixed height and enable scrolling:
+
+~~~md
+```ts {2|3|7|12}{maxHeight:'100px'}
+function add(
+ a: Ref | number,
+ b: Ref | number
+) {
+ return computed(() => unref(a) + unref(b))
+}
+/// ...as many lines as you want
+const c = add(1, 2)
+```
+~~~
+
+### TwoSlash Integration
+
+This feature is only available when you [set `highlighter` to `shiki`](/custom/highlighters)
+
+[TwoSlash](https://twoslash.netlify.app/) is a powerful tool for rendering TypeScript code blocks with type information on hover or inlined. It's quite useful for preparing slides for JavaScript/TypeScript-related topics.
+
+To use it, you can add `twoslash` to the code block's language identifier:
+
+~~~md
+```ts twoslash
+import { ref } from 'vue'
+
+const count = ref(0)
+// ^?
+```
+~~~
+
+It will be rendered as:
+
+```ts twoslash
+import { ref } from 'vue'
+
+const count = ref(0)
+// ^?
+```
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
### Editor Monaco
Sempre que quiser fazer alguma modificação na apresentação, simplesmente adicione `{monaco}` após o id da linguagem — isto transforma o bloco em um editor Monaco com todos os seus recursos!
+<<<<<<< HEAD
~~~ts
//```ts {monaco}
console.log('OláMundo')
//```
+=======
+~~~md
+```ts {monaco}
+console.log('HelloWorld')
+```
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
~~~
Aprenda mais sobre [configurar Monaco](/custom/config-monaco).
+<<<<<<< HEAD
## Estilos Embutidos
+=======
+#### Monaco Diff
+
+Monaco can also generate a diff between two code blocks. Use `{monaco-diff}` to turn the block into a [diff Monaco editor](https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#example-creating-the-diffeditor-multi-line-example) and use `~~~` to separate both original and modified version of the code!
+
+````md
+```ts {monaco-diff}
+This line is removed on the right.
+just some text
+abcd
+efgh
+Some more text
+~~~
+just some text
+abcz
+zzzzefgh
+Some more text.
+This line is removed on the left.
+```
+````
+
+## Embedded Styles
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Você pode usar a tag `
@@ -168,7 +345,11 @@ Para recursos locais, os coloque na [pasta `public`](/custom/directory-structure
![Imagem Local](/foto.png)
```
+<<<<<<< HEAD
Se quiser aplicar tamanhos ou estilos customizados, você pode converter para uma tag ``
+=======
+For you want to apply custom sizes or styles, you can convert them to the `` tag
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
```html
@@ -206,7 +387,11 @@ Isto é outra nota
## Ícones
+<<<<<<< HEAD
O Slidev te permite acessar quase todos os conjutos de ícones open-source **diretamente** no seu markdown. Graças ao [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) e ao [Iconify](https://iconify.design/).
+=======
+Slidev allows you to have the accessing to almost all the popular open-source iconsets **directly** in your markdown. Powered by [`unplugin-icons`](https://github.com/antfu/unplugin-icons) and [Iconify](https://iconify.design/).
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Os nomes seguem a convenção do [Iconify](https://iconify.design/) `{nome-da-coleção}-{nome-do-icone}`. Por exemplo:
@@ -311,7 +496,27 @@ Isto é mostrado à direita
Isto é mostrado à esquerda
```
+<<<<<<< HEAD
## Configurações
+=======
+## Import Code Snippets
+
+> Available since v0.47.0
+
+You can import code snippets from existing files via following syntax:
+
+```md
+<<< @/snippets/snippet.js
+```
+
+::: tip
+The value of `@` corresponds to the source root, the directory where the `slides.md` is located.
+:::
+
+This feature is vendored from VitePress, learn more about it in [VitePress's documentation](https://vitepress.dev/guide/markdown#import-code-snippets).
+
+## Configurations
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Todas as configurações necessárias podem ser definidas no arquivo Markdown. Por exemplo:
@@ -333,7 +538,7 @@ Aprenda mais sobre as [configurações do frontmatter](/custom/#configuracoes-do
O Slidev vem com suporte a LaTeX incluído, usando o [KaTeX](https://katex.org/) para isso.
-
+
### Em Linha
@@ -347,7 +552,7 @@ $\sqrt{3x-1}+(1+x)^2$
Use dois (`$$`) para renderização em bloco. Este modo mostra símbolos maiores e centraliza o resultado.
-```md
+```latex
$$
\begin{array}{c}
@@ -364,7 +569,30 @@ $$
Aprenda mais: [Demonstração](https://sli.dev/demo/starter/8) | [KaTeX](https://katex.org/) | [`markdown-it-katex`](https://github.com/waylonflinn/markdown-it-katex)
+<<<<<<< HEAD
## Diagramas
+=======
+### LaTex line highlighting
+
+> Available since v0.43.1
+
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default.
+
+```latex
+$$ {1|3|all}
+\begin{array}{c}
+\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
+= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
+\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
+\nabla \cdot \vec{\mathbf{B}} & = 0
+\end{array}
+$$
+```
+
+The `at` and `finally` options of [code blocks](#line-highlighting) are also available for LaTeX blocks.
+
+## Diagrams
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Você também pode criar diagramas / gráficos a partir de descrições em texto no seu Markdown, renderizado pelo [Mermaid](https://mermaid-js.github.io/mermaid).
@@ -483,3 +711,27 @@ src: ./conteudo.md
src: ./conteudo.md
---
```
+
+## MDC Syntax
+
+> Available since v0.43.0
+
+Slidev has an experimental support for [MDC (Markdown Components) Syntax](https://content.nuxtjs.org/guide/writing/mdc) powered by [`markdown-it-mdc`](https://github.com/antfu/markdown-it-mdc).
+
+You can enable it by adding `mdc: true` to the frontmatter of your markdown file.
+
+```md
+---
+mdc: true
+---
+
+This is a [red text]{style="color:red"} :inline-component{prop="value"}
+
+![](/image.png){width=500px lazy}
+
+::block-component{prop="value"}
+The **default** slot
+::
+```
+
+Learn more about [the syntax](https://content.nuxtjs.org/guide/writing/mdc).
diff --git a/guide/why.md b/guide/why.md
index ce8517c..b8973f5 100644
--- a/guide/why.md
+++ b/guide/why.md
@@ -2,7 +2,11 @@
Existem inúmeras ferramentas para criar slides cheias de recurso, de uso geral, como [Microsoft PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint) e [Apple Keynote](https://www.apple.com/keynote/). Elas funcionam muito bem para fazer slides legais com animações, gráficos, e muitas outras coisas, além de serem bem intuitivas e fáceis de aprender. Então por que gastar tempo fazendo o Slidev?
+<<<<<<< HEAD
O Slidev visa fornecer a flexibilidade e a interatividade para desenvolvedores fazerem suas apresentações ainda mais interessantes, expressivas, e atraentes usando ferramentas e tecnologias das quais já estão familiarizados.
+=======
+Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Ao trabalhar com editores *WYSIWYG*, é bem fácil se distrair com as opções de estilização. O Slidev corrige isso separando o conteúdo dos recursos visuais. Isto te permite focar em uma coisa de cada vez, além de reutilizar temas da comunidade. O Slidev não pretende substituir completamente outras ferramentas de slides. Em vez disso, se concentra em atender à comunidade de desenvolvedores.
@@ -34,7 +38,11 @@ Aprenda mais sobre [destacadores](/custom/highlighters) e [configurações do Mo
## Rápido
+<<<<<<< HEAD
O Slidev é construído com [Vite](https://vitejs.dev/), [Vue 3](https://v3.vuejs.org/) e [Windi CSS](https://windicss.org/), o que te proporciona uma experiência espetacular de desenvolvimento. Toda mudança que você fizer refletirá **instantaneamente** em seus slides.
+=======
+Slidev is powered by [Vite](https://vitejs.dev/), [Vue 3](https://v3.vuejs.org/) and [UnoCSS](https://unocss.dev/), which give you the most wonderful authoring experience. Every change you made will reflect to your slides **instantly**.
+>>>>>>> c3c1774bdf48295664f5b30d7ba7bfbda5a0f3d2
Saiba mais sobre [nossas tecnologias](/guide/#tecnologias).
@@ -68,6 +76,4 @@ $ npm init slidev
Ou tenha uma breve prévia:
-