diff --git a/.docs/README.md b/.docs/README.md deleted file mode 100755 index 8607e02..0000000 --- a/.docs/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# Docus Starter - -Starter template for [Docus](https://docus.dev). - -## Clone - -Clone the repository (using `nuxi`): - -```bash -npx nuxi init -t themes/docus -``` - -## Setup - -Install dependencies: - -```bash -yarn install -``` - -## Development - -```bash -yarn dev -``` - -## Edge Side Rendering - -Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments. - -Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets). - -```bash -yarn build -``` - -## Static Generation - -Use the `generate` command to build your application. - -The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting. - -```bash -yarn generate -``` - -## Preview build - -You might want to preview the result of your build locally, to do so, run the following command: - -```bash -yarn preview -``` - ---- - -For a detailed explanation of how things work, check out [Docus](https://docus.dev). diff --git a/.docs/app.config.ts b/.docs/app.config.ts index 1781f1a..8e05fc4 100644 --- a/.docs/app.config.ts +++ b/.docs/app.config.ts @@ -1,38 +1,17 @@ export default defineAppConfig({ docus: { - title: 'Docus', - description: 'The best place to start your documentation.', - image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png', + title: '@movie-web/providers', + description: 'For all your media scraping needs', socials: { - twitter: 'nuxt_js', - github: 'nuxt-themes/docus', - nuxt: { - label: 'Nuxt', - icon: 'simple-icons:nuxtdotjs', - href: 'https://nuxt.com' - } - }, - github: { - dir: '.starters/default/content', - branch: 'main', - repo: 'docus', - owner: 'nuxt-themes', - edit: true + github: 'movie-web/providers', }, + image: '', aside: { level: 0, - collapsed: false, - exclude: [] - }, - main: { - padded: true, - fluid: true + exclude: [], }, header: { - logo: true, - showLinkIcon: true, - exclude: [], - fluid: true - } - } -}) + logo: false, + }, + }, +}); diff --git a/.docs/content/0.index.md b/.docs/content/0.index.md index d909fd8..72e0802 100644 --- a/.docs/content/0.index.md +++ b/.docs/content/0.index.md @@ -1,50 +1,25 @@ --- -title: Home +title: "@movie-web/providers | For all your media scraping needs" navigation: false layout: page -main: - fluid: false --- -:ellipsis{right=0px width=75% blur=150px} - ::block-hero --- cta: - - Get started - - /introduction/getting-started + - Get Started + - /guide/why-neat-config secondary: - Open on GitHub → - - https://github.com/nuxt-themes/docus + - https://github.com/movie-web/providers +snippet: npm i @movie-web/providers --- #title -The best place to start your documentation. +@movie-web/providers #description -Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com). - -#extra - ::list - - **+50 Components** ready to build rich pages - - **Docs** and **Page** layouts - - Start from a `README`, scale to a framework documentation - - Navigation and Table of Contents generation - - Fully configurable design system - - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) - - Used on [Content Documentation](https://content.nuxtjs.org) - :: - -#support - ::terminal - --- - content: - - npx nuxi@latest init -t themes/docus - - cd docs - - npm install - - npm run dev - --- - :: +Easily scrape all sorts of media sites for content :: ::card-grid @@ -52,48 +27,25 @@ Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.o What's included #root -:ellipsis{left=0px width=40rem top=10rem blur=140px} +:ellipsis #default - ::card{icon=logos:nuxt-icon} + ::card{icon="vscode-icons:file-type-light-json"} #title - Nuxt Architecture + Scrape popular streaming websites. #description - Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. + Don't settle for just one media site for you content, use everything that's available. :: - - ::card{icon=IconNuxtStudio} + ::card{icon="codicon:source-control"} #title - Nuxt Studio ready + Multi-platform. #description - Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio). + Scrape from browser or server, whichever you prefer. :: - - ::card{icon=logos:vue} + ::card{icon="logos:typescript-icon-round"} #title - Vue Components + Easy to use. #description - Use built-in components (or your own!) inside your content. - :: - - ::card{icon=simple-icons:markdown} - #title - Write Markdown - #description - Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). - :: - - ::card{icon=noto:rocket} - #title - Deploy anywhere - #description - Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com). - :: - - ::card{icon=noto:puzzle-piece} - #title - Extensible. - #description - Customize the whole design, or add components using slots - you can make Docus your own. + Get started with scraping your favourite media sites with just 5 lines of code. Fully typed of course. :: :: diff --git a/.docs/content/1.Guide/1.usage.md b/.docs/content/1.Guide/1.usage.md new file mode 100644 index 0000000..79e9865 --- /dev/null +++ b/.docs/content/1.Guide/1.usage.md @@ -0,0 +1,61 @@ +# Usage + +Let's get started with `@movie-web/providers`. First lets install the package. + +::code-group + ```bash [NPM] + npm install @movie-web/providers + ``` + ```bash [Yarn] + yarn add @movie-web/providers + ``` + ```bash [PNPM] + pnpm install @movie-web/providers + ``` +:: + +## Scrape your first item + +To get started with scraping on the **server**, first you have to make an instance of the providers. + +::code-group + ```ts [index.ts (server)] + import { makeProviders, makeDefaultFetcher, targets } from '@movie-web/providers'; + + // this is how the library will make http requests + const myFetcher = makeDefaultFetcher(fetch); + + // make an instance of the providers library + const providers = makeProviders({ + fetcher: myFetcher, + + // will be played on a native video player + target: targets.NATIVE + }) + ``` +:: + +Perfect, now we can start scraping a stream: + +::code-group + ```ts [index.ts (server)] + // fetch some data from TMDB + const media = { + type: 'movie', + title: "Hamilton", + releaseYear: 2020, + tmdbId: "556574" + } + + const output = await providers.runAll({ + media: media + }) + + if (!output) console.log("No stream found") + console.log(`stream url: ${output.stream.playlist}`) + ``` +:: + +::alert{type="info"} +Thats it! Next up: [check out some examples](/examples). +:: diff --git a/.docs/content/1.Guide/_dir.yml b/.docs/content/1.Guide/_dir.yml new file mode 100644 index 0000000..eadfd00 --- /dev/null +++ b/.docs/content/1.Guide/_dir.yml @@ -0,0 +1,2 @@ +icon: ph:star-duotone +navigation.redirect: /guide/why-neat-config diff --git a/.docs/content/1.introduction/1.getting-started.md b/.docs/content/1.introduction/1.getting-started.md deleted file mode 100644 index 4c08c14..0000000 --- a/.docs/content/1.introduction/1.getting-started.md +++ /dev/null @@ -1,57 +0,0 @@ -# Getting Started - -From your Markdown files to a deployed website in few minutes. - -## Play online - -You can start playing with Docus in your browser using Stackblitz: - -:button-link[Play on StackBlitz]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank} - -## Create a new project - -1. Start a fresh Docus project with: - -```bash [npx] -npx nuxi@latest init docs -t themes/docus -``` - -2. Install the dependencies in the `docs` folder: - -::code-group - - ```bash [npm] - npm install - ``` - - ```bash [yarn] - yarn install - ``` - - ```bash [pnpm] - pnpm install --shamefully-hoist - ``` - -:: - -3. Run the `dev` command to start Docus in development mode: - -::code-group - -```bash [npm] -npm run dev -``` - -```bash [yarn] -yarn dev -``` - -```bash [pnpm] -pnpm run dev -``` - -:: - -::alert{type="success"} -✨ Well done! A browser window should automatically open for -:: diff --git a/.docs/content/1.introduction/2.project-structure.md b/.docs/content/1.introduction/2.project-structure.md deleted file mode 100644 index 1446a52..0000000 --- a/.docs/content/1.introduction/2.project-structure.md +++ /dev/null @@ -1,21 +0,0 @@ -# Project Structure - -Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. - -## Directory Structure - -This is the minimal directory structure to get an up and running Docus website. - -```bash -content/ - index.md -app.config.ts -nuxt.config.ts -``` - -The `content/` directory is where you [write Markdown pages](/introduction/writing-pages). - -The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design. - - -The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration). diff --git a/.docs/content/1.introduction/3.writing-pages.md b/.docs/content/1.introduction/3.writing-pages.md deleted file mode 100644 index a321324..0000000 --- a/.docs/content/1.introduction/3.writing-pages.md +++ /dev/null @@ -1,41 +0,0 @@ -# Writing Pages - -Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. - -Each Markdown pages in the `content/` folder will be mapped to a route. - -| File | Generated route | -| ------------------------ | :-------------------- | -| `index.md` | `/` | -| `about.md` | `/about` | -| `blog/index.md` | `/blog` | -| `blog/hello.md` | `/blog/hello` | -| `1.guide/2.installation` | `/guide/installation` | - -## Frontmatter - -Docus supports multiple Front-matter attributes for pages. - -```md [index.md] ---- -title: "Get Started" -description: "Let's learn how to use my amazing module." ---- -``` - -| **Key** | **Type** | **Default** | **Description** | -| ----------------------- | --------- | ----------- | ------------------------------------------------------------- | -| `layout` | `string` | `default` | Use any layout name like you would in `definePageMeta()` | -| `title` | `string` | | Defines the page title and H1 in docs pages | -| `description` | `string` | | Defines the page description and excerpt in docs pages | -| `redirect` | `string` | | A route path to redirect | -| `image` | `object` | | OpenGraph cover image | -| **Docs layout options** | | | | -| `aside` | `boolean` | | Toggles the visibility of aside navigation | -| `toc` | `boolean` | | Toggles the visibility of table of contents | -| `header` | `boolean` | | Toggles the visibility of the page header | -| `bottom` | `boolean` | | Toggles the visibility of page bottom section | -| **Navigation options** | | | | -| `navigation` | `boolean` | | Toggles the visibility of the page or directory in navigation | -| `navigation.title` | `string` | | Changes the name of the page or directory in navigation | -| `navigation.icon` | `string` | | Changes the icon of the page or directory in navigation | diff --git a/.docs/content/1.introduction/4.configuration.md b/.docs/content/1.introduction/4.configuration.md deleted file mode 100644 index d7d8e1a..0000000 --- a/.docs/content/1.introduction/4.configuration.md +++ /dev/null @@ -1,149 +0,0 @@ -# Configuration - -Learn how to configure Docus. - -::code-group - -```ts [Minimal app.config.ts] -export default defineAppConfig({ - docus: { - title: 'Docus', - description: 'My Docus Project', - url: 'http://docus.dev' - } -}) -``` - -```ts [Complete app.config.ts] -export default defineAppConfig({ - docus: { - title: 'Docus', - description: 'My Docus Project', - url: 'http://docus.dev', - image: '/social-card-preview.png', - socials: { - twitter: '@nuxt_js', - github: 'nuxt-themes/docus', - }, - github: { - root: 'content', - edit: true, - contributors: false - }, - layout: 'default', - aside: { - level: 1, - filter: [], - }, - header: { - title: false, - logo: true, - showLinkIcon: false - }, - footer: { - credits: { - icon: 'IconDocus', - text: 'Powered by Docus', - href: 'https://docus.dev', - }, - textLinks: [ - { - text: 'Nuxt', - href: 'https://nuxt.com', - target: '_blank', - rel: 'noopener' - } - ], - iconLinks: [ - { - label: 'NuxtJS', - href: 'https://nuxtjs.org', - component: 'IconNuxtLabs', - }, - { - label: 'Vue Telescope', - href: 'https://vuetelescope.com', - component: 'IconVueTelescope', - }, - ], - } - } -}) -``` - -:: - -| **Key** | **Type** | **Default** | **Description** | -| ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- | -| `title` | `string` | Docus | Website title | -| `titleTemplate` | `string` | Docus | Website title template | -| `description` | `string` | My Docus Project | Website description | -| `url` | `string` | | Website URL | -| `layout` | `string` | default | Fallback layout to use (supports `default` or `page`) | -| **Socials** | | | | -| `socials` | `object` | `{}` | Social links | -| `socials.github` | `string` | | The repository to use on GitHub links | -| `socials.twitter` | `string` | | The account to use on Twitter links | -| `socials.youtube` | `string` | | The channel to use on Youtube links | -| `socials.instagram` | `string` | | The account to use on Instagram links | -| `socials.facebook` | `string` | | The account to use on Facebook links | -| `socials.medium` | `string` | | The account to use on Medium links | -| `socials.[social]` | `object` | | Override social or display custom one | -| `socials.[social].label` | `string` | | A label to use for the social | -| `socials.[social].icon` | `string` | | A icon to use for the social | -| `socials.[social].href` | `string` | | A link to use for the social | -| `socials.[social].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | -| **Header** | | | | -| `header` | `object` | | Header configuration | -| `header.logo` | `boolean` | | Whether or not to use `Logo.vue` as the header logo | -| `header.title` | `string` | | If set to a string, will be used in the header | -| `header.showLinkIcon` | `boolean` | | If set to `true` links icons will show in the header | -| `header.exclude` | `string[]` | | An array of path to exclude out from the header navigation | -| `header.fluid` | `boolean` | `true` | Make header `Container` fluid | -| **Main** | | | | -| `main` | `object` | | Main configuration | -| `main.fluid` | `boolean` | `true` | Make main content `Container` fluid | -| `main.padded` | `boolean` | `true` | Make main content `Container` padded | -| **Aside** | | | | -| `aside` | `object` | | Aside configuration | -| `aside.level` | `string` | 0 | Aside base level of nesting | -| `aside.collapsed` | `boolean` | | Will be used as default value for collapsible navigation categories | -| `aside.exclude` | `string[]` | | An array of path to exclude out from the aside navigation | -| **Footer** | | | | -| `footer` | `object` | | Footer configuration | -| `footer.credits` | `object` | | An object defining the bottom left credits | -| `footer.credits.icon` | `object` | | The icon to use for the credits | -| `footer.credits.text` | `object` | | The text to use for the credits | -| `footer.textLinks` | `array` | `[]` | An array of texts to display at the center of footer | -| `footer.textLinks[0].text` | `string` | | The text to display | -| `footer.textLinks[0].href` | `string` | | A link to use for the text | -| `footer.textLinks[0].target` | `string` | `_self` | Where to display the linked URL, as the name for a browsing context | -| `footer.textLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | -| `footer.iconLinks` | `array` | `[]` | An array of icons to display in the footer | -| `footer.iconLinks[0].label` | `string` | | A label to use for the icon | -| `footer.iconLinks[0].href` | `string` | | A link to use for the icon | -| `footer.iconLinks[0].icon` | `string` | | The icon to use (can be a component name) | -| `footer.iconLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | -| `footer.fluid` | `boolean` | `true` | Make footer `Container` fluid | -| **GitHub** | | | | -| `github` | `object` | `false` | GitHub integration configuration | -| `github.dir` | `string` | | Directory containing the files to be edited | -| `github.branch` | `string` | | Branch to start editing | -| `github.repo` | `string` | | Name of the GitHub repo to edit files | -| `github.owner` | `string` | | Owner of the repo | -| `github.edit` | `boolean` | | Toggle "Edit this page on Github" component on documentation pages | -**Search** |||| -| `fuse` | `object` || useFuse [options](https://vueuse.org/integrations/useFuse/) | - - -## Customizing the logo - -To update the logo in the header, create a component in `components/Logo.vue` with your own logo. - -In this example, the image is located at `/public/img`. - -```vue [components/Logo.vue] - -``` diff --git a/.docs/content/1.introduction/_dir.yml b/.docs/content/1.introduction/_dir.yml deleted file mode 100644 index ff0894d..0000000 --- a/.docs/content/1.introduction/_dir.yml +++ /dev/null @@ -1,2 +0,0 @@ -icon: ph:star-duotone -navigation.redirect: /introduction/getting-started diff --git a/.docs/content/2.api/1.components.md b/.docs/content/2.api/1.components.md deleted file mode 100644 index 74b17d8..0000000 --- a/.docs/content/2.api/1.components.md +++ /dev/null @@ -1,693 +0,0 @@ -# Components - -Discover every component you can use in your content. - - -## `` - -::code-group - - ::code-block{label="Preview" preview} - ::alert{type="info" style="margin-top: 0;"} - Check out an **info** alert with `code` and a [link](/). - :: - - ::alert{type="success"} - Check out a **success** alert with `code` and a [link](/). - :: - - ::alert{type="warning"} - Check out a **warning** alert with `code` and a [link](/). - :: - - ::alert{type="danger" style="margin-bottom: 0;"} - Check out a **danger** alert with `code` and a [link](/). - :: - :: - - ```md [Code] - ::alert{type="info"} - Check out an **info** alert with `code` and a [link](/). - :: - - ::alert{type="success"} - Check out a **success** alert with `code` and a [link](/). - :: - - ::alert{type="warning"} - Check out a **warning** alert with `code` and a [link](/). - :: - - ::alert{type="danger"} - Check out a **danger** alert with `code` and a [link](/). - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Alert.vue" ---- -:: - ---- - -## `` - -`` support same types as ``. - -::code-group - - ::code-block{label="Preview" preview} - ::div{style="display:flex; gap: 1rem;"} - :badge[v1.2] - - :badge[Deprecated]{type="warning"} - - ::badge{type="danger"} - Not found! - :: - :: - :: - - ```md [Code] - :badge[v1.2] - - :badge[Deprecated]{type="warning"} - - ::badge{type="danger"} - Not found! - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Badge.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview"} - ::block-hero - --- - cta: - - Get started - - /introduction/getting-started - secondary: - - Open on GitHub → - - https://github.com/nuxtlabs/docus - snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter - --- - #title - Document-driven framework - - #description - Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. - :: - :: - - ```md [Code] - ::block-hero - --- - cta: - - Get started - - /get-started - secondary: - - Open on GitHub → - - https://github.com/nuxtlabs/docus - snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter - --- - #title - Document-driven framework - - #description - Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/BlockHero.vue" ---- -:: - ---- - -## `` -::code-group - - ::code-block{label="Preview" preview} - :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} - :: - - ```md [Code] - :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} - ``` - -:: - - - -::source-link ---- -source: "components/content/ButtonLink.vue" ---- -:: - ---- - -## `` - -`` support same types as ``. - -::code-group - - ::code-block{label="Preview"} - ::callout - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - - ::callout{type="warning"} - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - :: - - ```md [Code] - ::callout - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - - ::callout{type="warning"} - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Callout.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview"} - ::card - --- - icon: logos:nuxt-icon - --- - #title - Nuxt Architecture. - #description - Based on **Nuxt 3** and **Nuxt Content**. :br - Use Nuxt to build a static site, or a serverless app. - :: - :: - - ```md [Code] - ::card{icon="logos:nuxt-icon"} - #title - Nuxt Architecture. - #description - Based on **Nuxt 3** and **Nuxt Content**. :br - Use Nuxt to build a static site, or a serverless app. - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Card.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview"} - ::card-grid - #title - What's included? - - #root - :ellipsis - - #default - ::card - #title - Nuxt Architecture. - #description - Harness the full power of Nuxt and the Nuxt ecosystem. - :: - ::card - #title - Vue Components. - #description - Use built-in components (or your own!) inside your content. - :: - ::card - #title - Write Markdown. - #description - Enjoy the ease and simplicity of Markdown and discover MDC syntax. - :: - :: - :: - - ```md [Code] - ::card-grid - #title - What's included - - #root - :ellipsis - - #default - ::card - #title - Nuxt Architecture. - #description - Harness the full power of Nuxt and the Nuxt ecosystem. - :: - ::card - #title - Vue Components. - #description - Use built-in components (or your own!) inside your content. - :: - ::card - #title - Write Markdown. - #description - Enjoy the ease and simplicity of Markdown and discover MDC syntax. - :: - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/CardGrid.vue" ---- -:: - ---- - -## `` - -This component uses `slots` to create a tab panel of your code examples or preview. - -::code-group - - ::code-block{label="Preview" preview} - ::code-group - ```bash [Yarn] - yarn add docus - ``` - - ```bash [NPM] - npm install docus - ``` - :: - :: - - ```md [Code] - ::code-group - ```bash [Yarn] - yarn add docus - ``` - ```bash [NPM] - npm install docus - ``` - :: - ``` - -:: - -::source-link ---- -source: "components/content/CodeGroup.vue" ---- -:: - ---- - -## `` - -To be used inside a `` component to display a preview of some rendered code. - -::code-group - -::code-block{label="Preview" preview} - ::badge - Hello World! - :: -:: - -```md [Code] -/* Added as a child of `` */ - -::code-block{label="Preview" preview} - ::badge - Hello World! - :: -:: -``` - -:: - - - -::source-link ---- -source: "components/content/CodeBlock.vue" ---- -:: - ---- - -## `` - - -::code-group - -::code-block{label="Preview" preview} - :copy-button{content="hey!"} -:: - -```md [Code] -:copy-button{content="hey!"} -``` - -:: - - - -::source-link ---- -source: "components/content/CopyButton.vue" ---- -:: - ---- - -## `` - -Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org). - -::code-group - - ::code-block{label="Preview" preview} - :icon{name="logos:nuxt-icon"} - :icon{name="logos:vue"} - :icon{name="logos:nuxt-icon"} - :: - - ```md [Code] - :icon{name="logos:nuxt-icon"} - :icon{name="logos:vue"} - :icon{name="logos:nuxt-icon"} - ``` - -:: - - - -::source-link ---- -source: "components/content/Icon.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview" preview} - ::list{type="primary"} - - **Important** - - Always - :: - - ::list{type="success"} - - Amazing - - Congrats - :: - - ::list{type="info"} - - Do you know? - - You can also do this - :: - - ::list{type="warning"} - - Be careful - - Use with precautions - :: - - ::list{type="danger"} - - Drinking too much - - Driving drunk - :: - - :: - - ```md [Code] - ::list{type="primary"} - - **Important** - - Always - :: - - ::list{type="success"} - - Amazing - - Congrats - :: - - ::list{type="info"} - - Do you know? - - You can also do this - :: - - ::list{type="warning"} - - Be careful - - Use with precautions - :: - - ::list{type="danger"} - - Drinking too much - - Driving drunk - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/List.vue" ---- -:: - - -## `` - -Embed CodeSandbox/StackBlitz easily in your documentation with great performances. - -Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport. - -::code-group - - ::code-block{label="Preview" preview} - :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} - :: - - ```md [Code] - :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} - ``` - -:: - - - -::source-link ---- -source: "components/content/Sandbox.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview" preview} - :terminal{content="nuxi build"} - :: - - ```md [Code] - :terminal{content="nuxi build"} - ``` - -:: - - - -::source-link ---- -source: "components/content/Terminal.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview" preview} - ::div - :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} - :: - :: - - ```md [Code] - ::div - :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/VideoPlayer.vue" ---- -:: diff --git a/.docs/content/2.api/2.composables.md b/.docs/content/2.api/2.composables.md deleted file mode 100644 index 4c0bea2..0000000 --- a/.docs/content/2.api/2.composables.md +++ /dev/null @@ -1,88 +0,0 @@ -# Composables - -Discover the Docus composables to use in your custom Vue components and pages. - -## `useDocus()` - -`useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts` - -- `config` refers to the merged config of the current page. - -`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file. - -The configs in `app.config` file will be used as defaults. - -```vue - - - -``` - -- `tree` refers to the current navigation tree that is displayed in the `aside` component. - -```vue - - - -``` - -::source-link ---- -source: "composables/useDocus.ts" ---- -:: - -## `useMenu()` - -`useMenu()` gives access to `$menu` plugin controlling mobile navigation globally. - -```ts -const { - // Is menu visible - visible, - // Close menu function - close, - // Open menu function - open, - // Toggle menu function - toggle -} = useMenu() -``` - -::source-link ---- -source: "composables/useMenu.ts" ---- -:: - -## `useScrollspy()` - -`useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings. - -```ts -const { - // Headings on the page - visibleHeadings, - // Active headings (for the current page) - activeHeadings, - // Update headings (an array of DOM nodes) - updateHeadings -} = useScrollspy() -``` - -::source-link ---- -source: "composables/useScrollspy.ts" ---- -:: diff --git a/.docs/content/2.api/3.layouts.md b/.docs/content/2.api/3.layouts.md deleted file mode 100644 index 25dc458..0000000 --- a/.docs/content/2.api/3.layouts.md +++ /dev/null @@ -1,43 +0,0 @@ -# Layouts -Docus provides multiple built-in layouts for displaying your Markdown pages. - -## `default` - -The default layout for every page created in the project. This layout renders multiple section alongside the content: - -- Aside navigation menu (togglable with `aside: false/true`) -- Page bottom section (togglable with `bottom: false/true`) -- Table of content (togglable with `toc: false/true`) - -```md [index.md] ---- -aside: true -bottom: true -toc: false ---- - -Your awesome content -``` - -Current page is live sample of default layout. - -## `page` - -`page` layout is content focused layout. This layout does not render aside menu of table of contents. - - -This layout accept some configuration from content front-matter. - -- `fluid`: By setting `fluid: true` in content front-matter the content will be rendered in full width. -- `constrainedClass`: Using this option you can modify layout container look. Like constraining layout width of changing the background. -- `padded`: Setting `padded: true` in front-matter will add horizontal padding in the layout. - -```md [index.md] ---- -title: Home -layout: page -fluid: true ---- -``` - -Check [Home page](/) as live sample of page layout diff --git a/.docs/content/2.api/_dir.yml b/.docs/content/2.api/_dir.yml deleted file mode 100644 index b340141..0000000 --- a/.docs/content/2.api/_dir.yml +++ /dev/null @@ -1,2 +0,0 @@ -title: 'API' -icon: heroicons-outline:bookmark-alt diff --git a/.docs/public/cover.png b/.docs/public/cover.png deleted file mode 100644 index c8b3473..0000000 Binary files a/.docs/public/cover.png and /dev/null differ diff --git a/.docs/tokens.config.ts b/.docs/tokens.config.ts index b80da0a..b93204c 100644 --- a/.docs/tokens.config.ts +++ b/.docs/tokens.config.ts @@ -1,4 +1,18 @@ import { defineTheme } from 'pinceau' export default defineTheme({ + color: { + primary: { + 50: "#FFF6E5", + 100: "#FFEDCC", + 200: "#FFDB99", + 300: "#FFC966", + 400: "#FFB833", + 500: "#FFA500", + 600: "#CC8500", + 700: "#996300", + 800: "#664200", + 900: "#332100" + } + } })