diff --git a/docs/index.mdx b/docs/index.mdx index 39b657f..8cc19fc 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -6,9 +6,24 @@ Be sure to check us out on [GitHub](https://github.com/velopack/velopack) and [j ## Overview To enable your application to make full use of Velopack, you need to do 3 things: -1. Integrate the SDK into your app, and check for updates. [[Read more]](integrating/overview.mdx) -0. Run the `vpk` command line tool to generate your update packages and installers. [[Read more]](packaging/overview.mdx) -0. Upload your release somewhere your app can download updates from. [[Read more]](distributing/overview.mdx) + + +### Integrate the SDK & check for updates. +We have client libraries for some [languages below](#language-support), or if we don't support your language yet you can use [our CLI](./getting-started/fusion-cli.mdx).
+[Read more →](integrating/overview.mdx) +
+ + +### Build a Velopack release +Our command-line tool `vpk` can help you build update packages and installers in just one command.
+[Read more →](packaging/overview.mdx) +
+ + +### Upload your releases somewhere +You can host updates anywhere static files can be served, eg. cloud file storage, GitHub Releases, and more.
+[Read more →](distributing/overview.mdx) +
## Language Support There are libraries planned or supported for the languages below. diff --git a/src/components/FancyStep.tsx b/src/components/FancyStep.tsx new file mode 100644 index 0000000..2b855c1 --- /dev/null +++ b/src/components/FancyStep.tsx @@ -0,0 +1,21 @@ +import "../css/FancyStep.css"; +import type { PropsWithChildren } from 'react'; +import MDXContent from '@theme/MDXContent'; + +export type FancyStepProps = PropsWithChildren & { + step: number; + noline: boolean; +}; + +export default function FancyStep({ step, noline, children }: FancyStepProps) { + return ( +
+
+
{step}
+
+
+ {children} +
+
+ ); +} \ No newline at end of file diff --git a/src/css/FancyStep.css b/src/css/FancyStep.css new file mode 100644 index 0000000..1dd0cac --- /dev/null +++ b/src/css/FancyStep.css @@ -0,0 +1,59 @@ +.fancystep-root { + flex-direction: row; + flex-wrap: nowrap; + display: flex; + gap: 20px; + margin-top: 20px; + margin-left: 6px; +} + +.fancystep-number { + width: 40px; + height: 40px; + text-align: center; + line-height: 38px; + border-radius: 999px; + background-color: var(--ifm-color-primary-light); + position: relative; + color: rgba(255, 255, 255, 0.9); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: var(--ifm-h3-font-size); + font-weight: bold; +} + +[data-theme='dark'] .fancystep-number { + color: black; +} + +.fancystep-leftcol { + position: relative; +} + +.fancystep-leftcol::after { + content: ''; + background-color: var(--ifm-color-primary-light); + position: absolute; + left: 20px; + opacity: 0.5; + top: 60px; + right: 19px; + bottom: 0px; +} + +.fancystep-number::before { + content: ''; + position: absolute; + left: -6px; + right: -6px; + top: -6px; + bottom: -6px; + opacity: 0.3; + z-index: -1; + border-radius: 999px; + background-color: var(--ifm-color-primary-light); +} + +.fancystep-content { + flex: 1; + padding-top: 6px; +} \ No newline at end of file diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 9f23f04..32fb150 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -1,7 +1,9 @@ import MDXComponents from '@theme-original/MDXComponents'; import AppliesTo from '@site/src/components/AppliesTo'; +import FancyStep from '@site/src/components/FancyStep'; export default { ...MDXComponents, AppliesTo, + FancyStep, }; \ No newline at end of file