diff --git a/docs/demo.md b/docs/demo.md index f6906a3..3be4953 100644 --- a/docs/demo.md +++ b/docs/demo.md @@ -109,21 +109,20 @@ The message you want to share ### Input ```md -::: info -This is an info box. -::: +> [!INFO] +> This is an info box. -::: tip -This is a tip. -::: +> [!TIP] +> This is a tip. -::: warning -This is a warning. -::: +> [!WARNING] +> This is a warning. -::: danger -This is a dangerous warning. -::: +> [!DANGER] +> This is a dangerous warning. + +> [!NOTE] +> This is a note. ::: details This is a details block. @@ -132,21 +131,20 @@ This is a details block. ### Output -::: info -This is an info box. -::: +> [!INFO] Info +> This is an info box. -::: tip -This is a tip. -::: +> [!TIP] Tip +> This is a tip. -::: warning -This is a warning. -::: +> [!WARNING] Warning +> This is a warning. -::: danger -This is a dangerous warning. -::: +> [!DANGER] Danger +> This is a dangerous warning. + +> [!NOTE] Note +> This is a note. ::: details This is a details block. diff --git a/docs/guide/edit-configuration.md b/docs/guide/edit-configuration.md index a4f49d9..f6198d7 100644 --- a/docs/guide/edit-configuration.md +++ b/docs/guide/edit-configuration.md @@ -59,6 +59,7 @@ Customizing the Articles in your Aplós template is a straightforward process, s ```ts articles: { + message: "Thanks for reading this article", giscus: { repo: "Foo/Bar", repoid: "ExaMpLe", @@ -67,13 +68,24 @@ Customizing the Articles in your Aplós template is a straightforward process, s }, ``` +> [!WARNING] Warning > Make sure to replace the `repo`, `repoid`, and `categoryid` with your own values. The `giscus` object contains the variables to make the [Giscus](https://giscus.app/) comments show, for more information check the [Giscus documentation](https://giscus.app/). -> [!WARNING] Warning +> [!INFO] Info > The variables above are only needed if you use Giscus as the comment provider in your articles. If you use ActivityPub, you can ignore these variables. +#### Message after the article + +You can change the message that appears after the article by changing the `message` variable inside the `articles` object: + +```ts + articles: { + message: "Thanks for reading this article", + }, +``` + ### Changing theme settings With version `2.0.0`, you can now configure more settings for the theme. For example, if you want headings to have numbers, you can change the following variables inside the `theme` object: diff --git a/docs/guide/index.md b/docs/guide/index.md index 0481a65..d4e2c85 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -43,6 +43,7 @@ export default { } satisfies Theme; ``` +> [!TIP] Tip > If you also want to add aditional styles, you can create a CSS/SCSS file inside the `theme` folder and import it in the `index.ts` file. ### With Articles or without Articles @@ -148,6 +149,7 @@ For example, to import a CSS file, add the following line to the `index.ts` file import "./styles.css"; ``` +> [!TIP] Tip > It's recommended to have the `styles.css` file in the same directory as the `index.ts` file, the `.vitepress/theme/` folder. Inside the `styles.css` file, you can add custom styles to modify the appearance of your content, or even adding custom components. @@ -166,17 +168,18 @@ You can modify the width of the content in Aplós by changing the `--content-wid You can style images in your content using various options provided by Aplós. Here's how to apply each styling option: -- **Not Rounded**: Remove the border radius from an image. -- **Static**: Prevent an image from being resized when hovered or active. +- **not-rounded**: Remove the border radius from an image. +- **static**: Prevent an image from being resized when hovered or active. - **Size Options**: - - **Small**: Make an image smaller. - - **Medium**: Make an image medium-sized. + - **small**: Make an image smaller. + - **medium**: Make an image medium-sized. - **Visual Effects**: - - **Shadow**: Add a shadow to an image. - - **Monochrome**: Make an image monochrome. - - **Invert**: Invert the colors of an image. - - **Blur**: Blur an image. - - **Sepia**: Add a sepia effect to an image. + - **shadow**: Add a shadow to an image. + - **mono**: Make an image monochrome. + - **invert**: Invert the colors of an image. + - **blur**: Blur an image. + - **sepia**: Add a sepia effect to an image. + - **pixel**: Pixelate an image. - **Transparency**: Make an image transparent. To apply any of these options, use the following syntax: @@ -191,7 +194,7 @@ For example, to make an image small, use the following syntax: ![My image](./image.png#small) ``` -> [!TIP] +> [!TIP] Tip > You can combine multiple options by separating them with a comma. For example, to make an image small and add a shadow, use the following syntax: > > ```md