{"id":29140075,"url":"https://github.com/portiesp/markupwidgets","last_synced_at":"2026-04-27T00:31:54.652Z","repository":{"id":45982400,"uuid":"514967106","full_name":"PortiESP/MarkupWidgets","owner":"PortiESP","description":"This is a set of customizable widgets as react components","archived":false,"fork":false,"pushed_at":"2023-05-21T16:49:56.000Z","size":218,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-30T13:54:32.781Z","etag":null,"topics":["component-library","components","next","nextjs","react","tags","widgets","widgets-bundle"],"latest_commit_sha":null,"homepage":"https://porti.dev","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PortiESP.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-17T22:13:39.000Z","updated_at":"2023-03-03T13:23:39.000Z","dependencies_parsed_at":"2023-01-18T18:45:23.157Z","dependency_job_id":null,"html_url":"https://github.com/PortiESP/MarkupWidgets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PortiESP/MarkupWidgets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PortiESP%2FMarkupWidgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PortiESP%2FMarkupWidgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PortiESP%2FMarkupWidgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PortiESP%2FMarkupWidgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PortiESP","download_url":"https://codeload.github.com/PortiESP/MarkupWidgets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PortiESP%2FMarkupWidgets/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262807397,"owners_count":23367428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","components","next","nextjs","react","tags","widgets","widgets-bundle"],"created_at":"2025-06-30T16:03:03.868Z","updated_at":"2026-04-27T00:31:54.639Z","avatar_url":"https://github.com/PortiESP.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# MarkupWidgets docs 📖\n\nThe MarkupWidgets module is a packet of React components (widgets) that provides more tags for building web SubPages that the programmer can use as default but also customize the base component.\n\n[*Go to widgets*](#widgets-list)\n\n### Features\n\n- 🎨 Fully customizable\n- 🕹️ Interactive widgets\n- 💼 Prop | wrap based content\n- 😍 Nice designs \n- 🏷️ Styles, IDs, etc...\n\n### *Example SubPage:*\n\n\u003cdetails\u003e\n  \u003csummary\u003eExample screenshoots 🖼️\u003c/summary\u003e \n\n![Screenshoot SubPage 1](https://i.gyazo.com/d6d15a8a876deedf5358e82d18a3b094.jpg)\n![Screenshoot SubPage 2](https://i.gyazo.com/a9e96bbb6ab3c3af088d3583531b0d9b.jpg)\n![Screenshoot SubPage 3](https://i.gyazo.com/edc26983da335f72ac784db9fc531808.png)\n  \n \u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eExample syntax 📟\u003c/summary\u003e \n\n#### Code of the screenshoots above...\n\n```js\n\u003c\u003e\n    \u003cTags.Title\u003e\n        Title\n    \u003c/Tags.Title\u003e\n    \u003cTags.Paragraph\u003e\n        Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas Letraset, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus SubPageMaker, el cual incluye versiones de Lorem Ipsum.\n    \u003c/Tags.Paragraph\u003e\n    \u003cTags.Title2\u003e\n        Subtitle\n    \u003c/Tags.Title2\u003e\n    \u003cTags.Code\u003e\n                                                                // Escaping collons\n        \u003cCmd\u003egit\u003c/Cmd\u003e \u003cOpt\u003ecommit\u003c/Opt\u003e \u003cFlag\u003e-m\u003c/Flag\u003e \u003cStr\u003e{'\"This is a new commit\"'}\u003c/Str\u003e \u0026gt; \u003cPath\u003e./text.txt\u003c/Path\u003e\n    \u003c/Tags.Code\u003e\n    \u003cTags.Title3\u003e\n        Subtitle\n    \u003c/Tags.Title3\u003e\n    \u003cTags.Img img={testImg} alt=\"Alt text\"/\u003e\n    \u003cTags.UList items={[\"Item 1\", \"Item 2\", \"Item 3\", \"Item 4\"]} /\u003e\n    \u003cTags.Callout label=\"custom\" labelData={{text: \"Secret\", color: \"#25AA88\", style: [\"font-weight: 500;\", \"filter: brightness(130%);\"]}}\u003e\n        This is a custom callout block\n    \u003c/Tags.Callout\u003e\n    \u003cTags.Callout  \u003e\n        This is a custom callout block\n    \u003c/Tags.Callout\u003e\n    \u003cTags.Quote title=\"Quote title\" text=\"This is a template text for a quote element as a text prop\" /\u003e\n    \u003cTags.Quote title=\"Quote title children\"\u003eThis is a template text for a quote element as a children\u003c/Tags.Quote\u003e\n    \u003cTags.Paragraph\u003e\n        Lorem Ipsum es simplemente el texto \u003cTags.Link href=\"google.com\"\u003eLink text\u003c/Tags.Link\u003e de relleno de las imprentas y archivos.\n    \u003c/Tags.Paragraph\u003e\n\u003c/\u003e\n```\n\n \u003c/details\u003e\n\n------------------------------------------------\n\n## How to use the widgets?\n\n### Download the module 📥\n\nNavigate to the path of the folder where you want to install the module and clone from the github\n\n```sh\ngit clone https://github.com/PortiESP/MarkupWidgets.git\n```\n\n### Import the module 🧩\n\nImport the module from the file where you want to have access to the components, the module is structured in a way that the components can be imported in 3 diferent ways\n- Import directly from the component file\n- Import each component from the `./Tags.js`\n- Import the default object of the file `./Tags.js`\n\n\n```javascript\n// Import component directly\nimport Paragraph from \"./MarkupWidgets/tags/Paragraph\"\n// Import each component separately\nimport {Title, Paragraph, Code, Callout} from \"./MarkupWidgets/Tags\"\n// Import all components as an object\nimport Tags from \"./MarkupWidgets/Tags\"\n```\n\n### Use the widgets 🖨️\n\nUsing the widgets in the return of a React component\n\n```javascript\nimport Tags from \"./MarkupWidgets/Tags\"\nimport {Code, Callout}\n\nexport default function MyComponent(){\n\n    return (\n        \u003c\u003e\n            // Using the component from the default imported object\n            \u003cTags.Paragraph\u003eExample title\u003c/Tags.Paragraph\u003e\n            // Using the component from the specific export\n            \u003cCode\u003esudo chmod +x myScript.sh\u003c/Code\u003e\n        \u003c/\u003e\n    )\n}\n```\n\n### Wrapper \u0026 prop based widgets 💼\n\nMost of the widget in the module are compatible with both, *wrapper* and *prop* based tags\n\n***Wrapper based tag***\n```html\n\u003cTitle\u003e\n    This is the title content\n\u003c/Title\u003e\n```\n\n***Prop based tag***\n```html\n\u003cTitle text=\"This is the title content\" /\u003e\n```\n\n*If both options are used, the wrapper content will be priorized over the prop value*\n\n\nBut other widget like the `Img`, `UList`, *etc...*, this ones only support props to handle their content\n\n### Styling the widgets\n\nAll the widgets support the `style` prop to handle the component style, anyways there are a few widgets that offer a bit more advanced features to style the diferent parts of the component\n\n```html\n\u003cTitle style={myStyles}\u003e\u003c/Title\u003e\n```\n\n### FAQs\n\n- **How do is escape characters inside a component**: \n```js\n// The inner collons are parsed as part of a JS string and the interpolated in the JSX code\n\u003c\u003e This is an {'\"example\"'} string \u003c/\u003e\n```\n\n- **How do I add a new line in my paragraph, code, callout, etc...**:\n```js\n// The code is parsed as normal text but the \u003cbr/\u003e will be parsed as HTML\n\u003cCode\u003e\nconst myArray = {\n    elem1,  \u003cbr/\u003e\n    elem2,  \u003cbr/\u003e\n    elem3   \u003cbr/\u003e\n}\n\u003c/Code\u003e\n```\n\n----------------------------------------------------------------\n\n## Widgets list\n  - [`Title`](#title)\n  - [`Paragraph`](#paragraph)\n  - [`Link`](#link)\n  - [`Img`](#img)\n  - [`Code`](#code)\n  - [`UList`](#ulist)\n  - [`Callout`](#callout)\n  - [`Quote`](#quote)\n  - [`Colors`](#colors)\n  - [`Hr`](#hr)\n  - [`italic`/`bold`](#italic--bold-styles)\n  - [`Button`](#button)\n  - [`Toggle`](#toggle)\n  - [`Block`](#block)\n  - [`Url`](#url)\n  - [`SubPage`](#SubPage)\n  - [`Section`](#section)\n  - [`KbdKey`](#kbdkey)\n  - [`Comment`](#comment)\n  - [`MindMap`](#mindmap)\n\n\n## Title\n\nThere are 4 types of titles/headings: *h1, h2, h3, h4* as *Title1, Title2, ...*\n\n\u003e ### **Props**\n\u003e - `background` - Add a background for the title\n\u003e - `text` - Text content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```html\n\u003cTags.Title\u003e\n    Text template title\n\u003c/Tags.Title\u003e\n\n\n\u003cTags.Title text=\"Text template title h1\" /\u003e\n\u003cTags.Title2 text=\"Text template title h2\" background=\"#303030\" /\u003e\n\u003cTags.Title3 text=\"Text template title h3\" /\u003e\n```\n\n*H1*\n\n![Title example screenshoot](https://i.gyazo.com/b3e161f98a115577855b8a3568d005a3.png \"Title example screenshoot\")\n\n*H2*\n\n![Title example screenshoot](https://i.gyazo.com/be80368683cd5b505c9d99252a7bfdc7.png \"Title example screenshoot\")\n\n*H3*\n\n![Title example screenshoot](https://i.gyazo.com/ea1a204167804e222618fe92d15b6352.png \"Title example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Paragraph\n\nClasic paragraph to write text, also we can write special characters by adding them inside a JS string\n\n\u003e ### **Props**\n\u003e - `text` - Text content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```html\n\u003cTags.Paragraph\u003e\n    Lorem Ipsum es simplemente el texto de relleno de las imprentas y \n    archivos de texto. Lorem {'\"Ipsum\"'} ha sido el texto de relleno estándar de \n    las industrias desde el año 1500.\n\u003c/Tags.Paragraph\u003e\n\n\n\u003cTags.Paragraph text=\"Text template title\" /\u003e\n```\n\n![Paragraph example screenshoot](https://i.gyazo.com/dac24341490b8f99f7b0009c0c0754a7.png  \"Paragraph example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Link\n\nThe link widget is the same as the `\u003ca\u003e` tag but with its own styles\n\n\u003e ### **Props**\n\u003e - `href` - Target location of the link\n\u003e - `title` - Add a *title* attribute to the tag\n\u003e - `target` - Add *target* attribute to the tag\n\u003e - `dynamic` - Flag for dynamic URLs on the same host\n\u003e - `text` - Text content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```html\nLorem Ipsum \u003cTags.Link href=\"www.example.com\"\u003eLink text\u003c/Tags.Link\u003e de relleno.\n```\n\n![Link example screenshoot](https://i.gyazo.com/5fe3c4fb4c6119ea9423ac9643602622.png  \"Link example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Img\n\nDisplay an image, this component can be used in 3 diferent ways based on the props\n- Passing an image object imported from a path\n- Passing the image path, the image will fit the parent container \n- Passing the image path and the `height` and `width` props\n\n\u003e The image aspect-ratio will respected no matter the option used\n\n\u003e ### **Props**\n\u003e - `src` - Image object/path\n\u003e - `alt` - Alt text\n\u003e - `title` - Add a *title* attribute\n\u003e - `ratio` - Aspect ratio of the image (default 16/9)\n\u003e - `hideCaption` - Hides the caption text shown when clicking the image\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```javascript\nimport testImg from \"./exampleImage.jpg\"\n\n\n\u003cTags.Img src={testImg} alt=\"Alt text\"/\u003e\n\u003cTags.Img src=\"./images/image.jpg\" alt=\"Alt text\" ratio=\"1/2\"/\u003e\n\u003cTags.Img src=\"./images/image.jpg\" width=\"100px\" height=\"50px\" alt=\"Alt text\"/\u003e\n\n\u003cTags.Img src={testImg} alt=\"Alt text\" title=\"Title\"/\u003e\n\u003cTags.Img src={testImg} alt=\"Alt text\"/\u003e\n```\n\n![Img example screenshoot](https://i.gyazo.com/a3ef41ebe0be29818230b3b2791d4381.png  \"Img example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n\n## ImgTextAside\n\nDisplay an image with an aside section for text or other tags\n\n\u003e Use the `ratio` prop to adjust the image postion and size\n\n\u003e ### **Props**\n\u003e - `src` - Image object/path\n\u003e - `title` - Add a the *alt* and *title* value\n\u003e - `ratio` - Aspect ratio of the image (default 1/1)\n\u003e - `imgProportion` - Porcetage of the block that will be reserved for the image\n\u003e - `separator` - Adds a separation line between the img and the aside section\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```javascript\nimport testImg from \"./exampleImage.jpg\"\n\n\u003cTags.ImgTextAside src={testImg} title=\"Alt text\" ratio=\"1/2\" imgProportion=\"30%\"/\u003e\n\n```\n\n![ImgTextAside example screenshoot](https://i.gyazo.com/e074246e485f572ad7ec58f6975b053e.png  \"ImgTextAsido example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n\n\n## Code\n\nThe code widget provides a snippet of some piece of code, if you *hover* into the block an icon will appear at the *bottom-right* corner that you can click to copy the code to the clipboard, a copy message will appear when the button is clicked\n\nThere are also 3 decorative buttons at the *top-right* corder, this buttons are just decorative and dont have any action\n\n\u003e ### **Props**\n\u003e - `inline` - Flag for code string\n\u003e - `color` - Color for the inline code\n\u003e - `caption` - Add a caption text for the code snippet\n\u003e - `output` - Add an nested div to print some kind of command output\n\u003e - `text` - Text content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```html\n// Example from the first image\n\u003cTags.Code\u003e\n    git commit -m \"This is a new commit\" ./text.txt\n\u003c/Tags.Code\u003e\n\n// Example for second image\n// This is how we parse special characters, new lines and tabs\n\u003cTags.Code\u003e{`\nexport default (\u003cbr/\u003e\n    {\"\u003c\u003e\"}                            \u003cbr/\u003e\n        {\"  \"}\u003cFlag\u003ecomment\u003c/Flag\u003e    \u003cbr/\u003e\n    {\"\u003c/\u003e\"}                           \u003cbr/\u003e\n)\n`}\u003c/Tags.Code\u003e\n\n\n// Example with text prop\n\u003cTags.Code text=\"Text template title\" /\u003e\n```\n\nThere is also an alternative prop to use this component for writtring *inline code*\n\n```html\n// Example from the second image\nThis is some content \u003cTags.Code inline\u003enpm install react\u003c/Tags.Code\u003e blablaba\nThis is some content \u003cTags.Code inline color=\"#ab124F\"\u003enpm install react\u003c/Tags.Code\u003e blablaba\n```\n\n\u003e To add a new line in your code just type \u003cbr /\u003e as the HTML tag\n\n\u003e Both options **allow** custom styles with the *style* prop\n\n![Code example screenshoot](https://i.gyazo.com/83ab08f18b17588aa7fa03e7ee4c77cb.png  \"Code example screenshoot\")\n![Code2 example screenshoot](https://i.gyazo.com/ca52db55395134fae205865957169e7e.png  \"Code2 example screenshoot\")\n![Inline code example screenshoot](https://i.gyazo.com/ddeaea6b199729d98eaddeab84b1b538.png  \"Inline code example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## UList\n\nThis widget take an array as a prop to generate the list\n\n\u003e ### **Props**\n\u003e - `items` - Array of the item strings\n\u003e - `itemStyle` - Style of the idividual items\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```html\n\u003cTags.UList items={myItemList} /\u003e\n```\n\n![UList example screenshoot](https://i.gyazo.com/b8006621f16f9438a8a6131177935b6b.png  \"UList example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Callout\n\nThis widget creates a text block to spotlight some text, it also can take a `label` prop to show a small text at the top of the block (*as show in the screenshoots*)\n\nThis widget can take 3 styles:\n- **No label**, only the text\n- **Predefined labels**, The `label` value can the following values (*warning, info, tip, danger*) with predefined styles\n- **Custom label**, The label with custon text \u0026 color, but also custom styles\n\n\u003e ### **Props**\n\u003e - `label` - Text shown at the top in an outter block\n\u003e - `labelData` - Text, color, style (*Data taken here only when label='custom'*)\n\u003e - `text` - Text content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```html\n\u003cTags.Callout label=\"warning\"\u003e\n    This is a custom callout block\n\u003c/Tags.Callout\u003e\n\n\n// Basic callout\n\u003cTags.Callout text=\"This is a custom callout block\"/\u003e\n// Callout with label\n\u003cTags.Callout label=\"warning\" text=\"This is a custom callout block\"/\u003e\n// Callout with custom label with default styles\n\u003cTags.Callout label=\"custom\" text=\"Callout text\" labelData={ text: \"data\", color=\"#ffffff\" } /\u003e\n// Callout with custom label with custom styles\n\u003cTags.Callout label=\"custom\" text=\"Callout text\" labelData={ text: \"Secret\", color=\"#10A5FE\", style: [ \"background-color: red\", \"border-radius: 20px\"] } /\u003e \n```\n\n![Callout example screenshoot](https://i.gyazo.com/48442e0ad328a522487a5f856c08d1c8.png  \"Basic callout example screenshoot\")\n![Callout example screenshoot](https://i.gyazo.com/9015635234d86070f35eee04ede0712f.png  \"Warning callout example screenshoot\")\n![Callout example screenshoot](https://i.gyazo.com/dcd5e748b3ede14a40ae3cae11ae3ede.png  \"Custom callout example screenshoot\")\n![Callout example screenshoot](https://i.gyazo.com/106ef547673da2507483068a098f4469.png \"Danger example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Quote\n\n\u003e ### **Props**\n\u003e - `title` Add a *title* attribute\n\u003e - `text` - Text content\n\u003e - `style` - Styles object\n\u003e - `color` - Theme color of the box\n\u003e - `id` - Add an ID attribute\n\nQuote block, colors can be personalized with the `style` props\n\n```html\n\u003cTags.Quote title=\"Quote title\" color=\"#f5a206\"\u003e\n    This is a template text for a quote element as a text prop\n\u003c/Tags.Qoute\u003e\n\n\n\u003cTags.Quote title=\"Quote title\" text=\"This is a template text for a quote element as a text prop\" /\u003e\n```\n\n![Quote example screenshoot](https://i.gyazo.com/0147ed02d39c1cc7b0bee2cba7cc8341.png  \"Quote example screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Colors\n\n\nWe can apply color styles to some piece of text by using the components of the `./tags/Colors.js`, this file contains the color components to apply colors to the wrapped text\n\n\u003e This file is not exported by the `./Tags.js` file and it needs to be imported manualy\n\nThere are 3 types of color here based on their component name:\n- **Colors**: Colors by name (*`Yellow`, `Blue`, `Red`, etc...*)(*not all colors included*)\n- **Color of context**: Colors that represent the meaning of the text, (*`Str`, `Cmd`, `Opt`, `Flag`*)\n- **Custom color**: Personalized color (*`Color`*)\n\n### Import module\n\n```js\n// Import necesary colors\nimport {Blue, Red, Orange, Color, Flag} from \"./MarkupWidgets/Tags/Colors\"\n// Import default component: `Color`\nimport MyColor from \"./MarkupWidgets/Tags/Colors\"\n```\n\nIf you want to rename the components you can use the *import as*\n```js\nimport {\n    Red as R,\n    Blue as B,\n    Green as G,\n    Color as C,\n    Flag as F\n} from \"./MarkupWidgets/Tags/Colors\"\n```\n\n```html\n// Example \nThis is an \u003cR\u003eexample\u003c/R\u003e text to \u003cF\u003etry\u003c/F\u003e the colors\n\n// Nested\n\u003cParagraph\u003e\n    This is an \u003cR\u003eexample\u003c/R\u003e text to \u003cF\u003etry\u003c/F\u003e the colors\n\u003c/Paragraph\u003e\n```\n\u003e Remember that we have imported the component colors as its initial letter\n\nIf we use the `Color` component we can pass only the CSS color name or the prop `color` with the value\n\n```html\nLets colour the \u003cC aquamarine\u003eexample\u003c/C\u003e text\nLets colour the \u003cC color=\"aquamarine\"\u003eexample\u003c/C\u003e text\nLets colour the \u003cC color=\"rgb(127, 255, 212)\"\u003eexample\u003c/C\u003e text\n```\n\n*Example of the colors usage in a code widget*\n \n![Code example screenshoot](https://i.gyazo.com/83ab08f18b17588aa7fa03e7ee4c77cb.png  \"Colors example screenshoot\")\n\n*Syntax of the screenshoot*\n\n![Code syntax screenshoot](https://i.gyazo.com/793b7d79515a6d87a61456df13b547e4.png \"Colors example syntax screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Hr\n\nCreates a simple horizontal line to divide content, it can also take parameter `small` to create a shorter line\n\n\u003e ### **Props**\n\u003e - `small` - Make shorter line\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```js\n\u003cHr /\u003e\n\u003cHr small /\u003e\n```\n\n![Hr screenshoot](https://i.gyazo.com/01e94914817f97017c3cd23c2f4f4399.png \"Hr screenshoot\")\n![Hr small screenshoot](https://i.gyazo.com/58e556350c525804faf2f9aacd5f78c2.png \"Hr small screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Italic \u0026 Bold styles\n\nTo apply *italic* or *bold* styles to some text you can add it as you will do in HTML:\n```js\n\u003cParagraph\u003e\n    This is an \u003ci\u003eitalic\u003c/i\u003e word\n\u003c/Paragraph\u003e\n```\n\n[*Go to widgets*](#widgets-list)\n\n## Button\n\nAdds custommizable button, with optional icon and easy-access styling props for the most common attributes, for more specific ones use the `style` prop\n\nText content can be passed as a wrapped child or by the `text` prop, if \ntext is **not** passed as a wrapped child the prop text must be passed\n\n\u003e ### **Props**\n\u003e \n\u003e *All of the props are optional*\n\u003e \n\u003e - `text` - Text content of the button\n\u003e - `icon` - This props receives an image as an object from an `import` statement\n\u003e - `id` - Add an ID attribute to the widget\n\u003e - `callback` - Callback function triggered when the button is clicked\n\u003e - `href` - URL to navigate when the button is clicked\n\u003e \n\u003e *Button*\n\u003e \n\u003e - `borderRadius` - Round the corners (px)\n\u003e - `background` - Background style of the button\n\u003e   \n\u003e *Icon*\n\u003e \n\u003e - `iconScale` - Multiplier of the icon size (%): *Ex: 120%*\n\u003e - `iconInvert` - Invert the colors of the icon (0-100)\n\u003e - `iconBackground` - Background of the icon\n\u003e   \n\u003e *Text*\n\u003e \n\u003e - `fontSize` - Size of the text (px)\n\u003e - `color` - Color of the text\n\u003e   \n\u003e *Object styles*\n\u003e \n\u003e - `style` - Global styles of the widget, (*styles not recommended here*)\n\u003e - `styleButton` - Style of the inner div, (*button styles are recommentded here*)\n\u003e - `styleIcon` - Style of the icon image div\n\u003e - `styleText` - Style of the text div\n\u003e - `styleHover` - Style of the button when hover (***css syntax***)\n\u003e - `styleActive` - Style of the button when active (***css syntax***)\n  \n![Example button screenshoot](https://i.gyazo.com/663775cea1dd63fd79ec1524c5d4d9b4.png)\n\n```js\n// Import icon from path\nimport icon from \"./myIcon.png\"\n\n\u003cTags.Button // Some example props\n    text=\"Example\" \n    icon={icon} \n    callback={myCallback}\n    borderRadius=\"10px\" \n    iconScale=\"140%\" \n    iconInvert=\"100\" \n    styleActive=\"background: red;\"\n    styleButton={{padding: \"30px\"}}\n/\u003e\n\n```\n\n[*Go to widgets*](#widgets-list)\n\n## Toggle\n\nThis widget can expand to show more content\n\n\u003e ### **Props**\n\u003e - `title` - The title is shown always, wont be hided\n\u003e - `background` - Background of the container\n\u003e - `backgroundHover` - Background of the header when hover\n\u003e - `arrowColor` - Color of the toggle arrow\n\u003e - `arrowSize` - size of the toggle arrow (*use units*)\n\u003e - `color` - Color of the title text\n\u003e - `fontSize` - Font size of the title (*use units*)\n\u003e - `style` - Styles wrapper object\n\u003e - `id` - Add an ID attribute\n\n```js\n\u003cTags.Toggle title=\"Example toggle\"\u003e\n\n    \u003cTags.Callout label=\"info\" \u003e\n        This is a custom callout block\n    \u003c/Tags.Callout\u003e\n    \u003cTags.Paragraph\u003e\n    Lorem Ipsum es simplemente el texto \u003cTags.Link href=\"google.com\" title=\"ggg\"\u003eLink text\u003c/Tags.Link\u003e de relleno de las imprentas y archivos.\n    \u003c/Tags.Paragraph\u003e\n    \u003cTags.Quote title=\"Quote title children\"\u003eThis is a template text for a quote element as a children\u003c/Tags.Quote\u003e\n    \n\u003c/Tags.Toggle\u003e\n```\n\n![Toggle screenshoot](https://i.gyazo.com/0830c1813eabefd9da15bcba21870513.png \"Toggle screenshoot\")\n![Toggle screenshoot](https://i.gyazo.com/20e234fd89847e9ce8aa3eb9db86daae.png \"Toggle screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n\n\n## Block\n\nThis widget is really simple, it just wraps content in a box to diferenciate from the code around\n\n\u003e ### **Props**\n\u003e - `background` - Background of the block\n\u003e - `bulletColor` - Item bullet color\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n```js\n \u003cTags.Block\u003e\n    \u003cTags.UList items={[\"Item 1\", \"Item 2\", \"Item 3\", \"Item 4\"]}/\u003e\n    \u003cTags.Img img=\"/example1.jpg\" height=\"300px\" width=\"500px\" alt=\"Alt text\" caption=\"Enviorement\"/\u003e\n\u003c/Tags.Block\u003e\n```\n\n![Block screenshoot](https://i.gyazo.com/9c0f2719368abf3ccee472c50d8ba654.png \"Block screenshoot\") \n\n[*Go to widgets*](#widgets-list)\n\n## Url\n\nThis widget takes and url and a few information to create a card to make the URL stand out, this widgets will show a title, description, url and a screenshoot of the URL\n\n\u003e ### **Props**\n\u003e - `src` - URL we want to embed\n\u003e - `img` - Image we want to show\n\u003e - `title` - Title for the URL card\n\u003e - `description` - Description of the URL content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n\n```js\n\u003cTags.Url src=\"https://porti.dev/\" title=\"My personal site\" description=\"An online portfolio and blog where I show my skills\"/\u003e\n```\n\n![URL screenshoot](https://i.gyazo.com/6021c453b05f43160b5e9f525e4bd857.png \"URL screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## SubPage\n\nThis widget can hold content and display it as a popup on click event\n\n\u003e ### **Props**\n\u003e - `title` - Title for the SubPage card\n\u003e - `description` - Description of the SubPage content\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\u003e - `small` - Smmaller version of the widget without preview\n\n\n```js\n\u003cTags.SubPage title=\"Test SubPage\" description=\"Template description\" small\u003e\n                \u003ch1\u003egg\u003c/h1\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam\u003c/p\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam\u003c/p\u003e\n\u003c/Tags.SubPage\u003e\n```\n\n![SubPage screenshoot](https://i.gyazo.com/244073869b78ed34d398c7fda30b71e2.png \"SubPage screenshoot\")\n![SubPage small screenshoot](https://i.gyazo.com/9212fe8ebfd4f244118a08575253df2d.png \"SubPage small screenshoot\")\n![SubPage opened](https://i.gyazo.com/319dd02ad8d4f629cd597222b9c9b0c2.png \"SubPage opened screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n## Section\n\nThis widget is just a section with styles and a preformated title\n\n\u003e ### **Props**\n\u003e - `title` - Add an h2 at the beggining of the section\n\u003e - `sticky` - Make titles stick to the top of the viewport\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n\n```js\n\u003cTags.Section id=\"secction--example\"\u003e\n                \u003ch1\u003egg\u003c/h1\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam\u003c/p\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam\u003c/p\u003e\n\u003c/Tags.Section\u003e\n```\n\n![Section screenshoot](https://i.gyazo.com/12a30eaa510448d584bc725e6962665b.png \"Section screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n\n\n## KbdKey\n\nThis widget adds a styled keyboard key as an inline tag\n\n\u003e ### **Props**\n\u003e - `title` - The key value as a props\n\u003e - `style` - Styles object\n\u003e - `id` - Add an ID attribute\n\n\n```js\n    \u003cTags.KbdKey\u003eWIN\u003c/Tags.KbdKey\u003e\n    \u003cTags.KbdKey title=\"WIN\"/\u003e\n```\n\n![Section screenshoot](https://i.gyazo.com/0e8fe0f1907185b0cbfad2da85b1eb03.png \"KbdKey screenshoot\")\n![Section screenshoot](https://i.gyazo.com/7597daf49bfe2f81a60ab44a7d8e7a65.png \"KbdKey hover screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n\n\n## Comment\n\nThis widget adds a comment for some text, the comment appears when we hover to pointer over the commented string\n\n\u003e ### **Props**\n\u003e - `message` - The key value as a props\n\n\n```js\n    \u003cp\u003eLets comment something: \u003cComment comment=\"This is a comment, some more info, some more info to fill the line\"\u003ehello\u003c/Comment\u003e some more text\u003c/p\u003e\n```\n\n![Comment screenshoot](https://i.gyazo.com/1bf87543db2fe0b2f036fa28f206298f.png \"Comment screenshoot\")\n\n[*Go to widgets*](#widgets-list)\n\n\n\n## MindMap\n\nThis widget displays a canvas to navigate over an SVG file, it also provides a menu where we can change the structure of the SVG to make an interactive canvas. \n\n\u003e **Features**\n\u003e \n\u003e - **ZoomIn**/**ZoomOut** with the mouse wheel\n\u003e - **Navigate** by *dragging* with *right-click*\n\u003e - The scale is shown as '%' at the bottom-right corner, click it to reset to *100%*\n\u003e - The menu can be hidden by clicking the header\n\u003e - The menu provides 2 type of buttons *toggle* and *chamber*\n\u003e   - The *toggle* allows to hide/show a list of HTML tags with an id in a list\n\u003e   - The *chamber* does something similar but we can rotate between multiple views, only one shown at a time. This one can be also toggled\n\n\u003e **INFO**\n\u003e \n\u003e - The *MinMap* tag fits the parents box, so you should give a width and height to the parent of the *MinMap* tag\n\u003e - Page scroll is **blocked** while hoveing the canvas\n\u003e - Also remember that JSX uses the *camelCase* naming convention while some SVG attributes have dashes in its name, so you should replace all thoose names such as: *stroke-width* to *strokeWidth*\n\n\u003e ### **Props**\n\u003e - `width` - The max width of the SVG\n\u003e - `height` - The max height of the SVG\n\u003e - `controls` - The list of options that will be shown in the menu\n\u003e - `children` (*wrapped*) - The SVG code **without the `svg` tag, just the child**\n\n\n```js\n    const controls = [\n        {   // Example of toggle type\n            label: \"test1\",  // Label shown in the menu\n            type: \"toggle\",  // Type of item [toggle|chamber]\n            title: \"test title\",  // Hint shown while hovering over the item (optional)\n            ids: [\"Ellipse1\", \"Ellipse2\"],  // List if IDs that will be affected by this item\n            initial: true,  // The toggle will be activated by default (optional)\n            controls: [{}]   // Recursive submenus (same structure as the main one)\n        },\n        {   // Simplified example of toggle type\n            label: \"test3\",\n            type: \"toggle\",\n            ids: [\"Ellipse1\"]\n        },\n        {   // Example of chamber type\n            label: \"test2\",\n            type: \"chamber\",\n            title: \"chamber title\",\n            initial: true,  // The toggle will be activated by default (optional)\n            idsGroups: [  // List of options show in the select\n                {\n                    label: \"opt 1\",  // Label of the option 1 (default)\n                    ids: [\"rect1\", \"rect2\"],  // List if IDs that will be affected by this option\n                    controls: [{}]  // Recursive submenus when this option is selected (same structure as the main one)\n                },\n                {\n                    label: \"opt 2\",\n                    ids: [\"rect3\", \"rect4\"]\n                },\n                {\n                    label: \"opt 3\",\n                    ids: [\"rect5\", \"rect6\"]\n                },\n            ]\n        },\n    ]\n```\n\n```js\n    // WRONG CODE\n    \u003cMindMap MindMap width={892} height={562} controls={controls}\u003e\n        \u003csvg\u003e {/* \u003c--- DO NOT PALCE THIS TAG */} \n            \u003crect width=\"892\" height=\"562\" fill=\"#F5F5F5\"/\u003e\n            \u003crect width=\"892\" height=\"562\" fill=\"#F5F5F5\"/\u003e\n            \u003crect width=\"892\" height=\"562\" fill=\"#F5F5F5\"/\u003e\n        \u003c/svg\u003e {/* \u003c--- DO NOT PALCE THIS TAG */} \n    \u003c/MindMap\u003e\n\n    // RIGHT CODE\n    \u003cMindMap MindMap width={892} height={562} controls={controls}\u003e\n            \u003crect width=\"892\" height=\"562\" fill=\"#F5F5F5\"/\u003e\n            \u003crect width=\"892\" height=\"562\" fill=\"#F5F5F5\"/\u003e\n            \u003crect width=\"892\" height=\"562\" fill=\"#F5F5F5\"/\u003e\n    \u003c/MindMap\u003e\n```\n\n![MindMap screenshoot](https://i.gyazo.com/b4d1516985c1f37cf8f5781c04ba60e0.png \"MindMap screenshoot\")\n\u003e [View MindMap GIF](https://i.gyazo.com/936fb287fb535a37bdefbb6f48623e08.mp4 \"MindMap GIF\")\n\n[*Go to widgets*](#widgets-list)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fportiesp%2Fmarkupwidgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fportiesp%2Fmarkupwidgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fportiesp%2Fmarkupwidgets/lists"}