diff --git a/apps/docs/src/components/burger/burger.css b/apps/docs/src/components/burger/burger.css
index 430cba6..27ce815 100644
--- a/apps/docs/src/components/burger/burger.css
+++ b/apps/docs/src/components/burger/burger.css
@@ -1,23 +1,23 @@
.burger {
- @apply flex flex-col justify-between w-10 h-10 bg-none border-none cursor-pointer rounded-full px-2 py-3;
+ @apply flex flex-col justify-between w-10 h-10 bg-none border-none cursor-pointer rounded-full px-2 py-3;
- &__line {
- @apply w-full bg-on-background h-0.5 pointer-events-none transition-transform transform-gpu;
- }
+ &__line {
+ @apply w-full bg-on-background h-0.5 pointer-events-none transition-transform transform-gpu;
+ }
- &[aria-expanded] {
- .burger__line {
- &:nth-child(1) {
- @apply transform rotate-45 translate-y-1.5;
- }
+ &[aria-expanded] {
+ .burger__line {
+ &:nth-child(1) {
+ @apply transform rotate-45 translate-y-1.5;
+ }
- &:nth-child(2) {
- @apply opacity-0;
- }
+ &:nth-child(2) {
+ @apply opacity-0;
+ }
- &:nth-child(3) {
- @apply transform -rotate-45 -translate-y-2;
- }
- }
- }
+ &:nth-child(3) {
+ @apply transform -rotate-45 -translate-y-2;
+ }
+ }
+ }
}
diff --git a/apps/docs/src/components/code-block/code-block.css b/apps/docs/src/components/code-block/code-block.css
index 6bb2a36..4cb23cc 100644
--- a/apps/docs/src/components/code-block/code-block.css
+++ b/apps/docs/src/components/code-block/code-block.css
@@ -1,3 +1,3 @@
.code-block {
- @apply my-8 rounded-md [&_pre.shiki]:col-span-4 [&_pre.shiki]:col-start-2 [&_pre.shiki]:whitespace-pre-wrap [&_pre.shiki]:p-4 [&_pre.shiki]:rounded-md [&_pre.shiki]:overflow-scroll;
+ @apply my-8 rounded-md [&_pre.shiki]:col-span-4 [&_pre.shiki]:col-start-2 [&_pre.shiki]:whitespace-pre-wrap [&_pre.shiki]:p-4 [&_pre.shiki]:rounded-md [&_pre.shiki]:overflow-scroll;
}
diff --git a/apps/docs/src/components/header/header.css b/apps/docs/src/components/header/header.css
index 648a408..6e12ab7 100644
--- a/apps/docs/src/components/header/header.css
+++ b/apps/docs/src/components/header/header.css
@@ -1,12 +1,12 @@
.header {
- @apply bg-background-accent text-on-background-accent shadow-sm sticky top-0;
- &__inner {
- @apply px-4 py-3 container mx-auto flex items-center justify-between;
- &-left-side {
- @apply flex items-center gap-4;
- .version {
- @apply text-xs font-semibold bg-background text-on-background px-2 rounded-md;
- }
- }
- }
+ @apply bg-background-accent text-on-background-accent shadow-sm sticky top-0;
+ &__inner {
+ @apply px-4 py-3 container mx-auto flex items-center justify-between;
+ &-left-side {
+ @apply flex items-center gap-4;
+ .version {
+ @apply text-xs font-semibold bg-background text-on-background px-2 rounded-md;
+ }
+ }
+ }
}
diff --git a/apps/docs/src/components/logo/logo.css b/apps/docs/src/components/logo/logo.css
index a7dfcf4..a0c9d03 100644
--- a/apps/docs/src/components/logo/logo.css
+++ b/apps/docs/src/components/logo/logo.css
@@ -1,6 +1,6 @@
.logo {
- @apply font-mono font-bold text-xl px-4 py-1.5 -skew-x-6 transition-colors rounded-full;
- &:hover {
- @apply bg-background;
- }
+ @apply font-mono font-bold text-xl px-4 py-1.5 -skew-x-6 transition-colors rounded-full;
+ &:hover {
+ @apply bg-background;
+ }
}
diff --git a/apps/docs/src/components/navigation/navigation.css b/apps/docs/src/components/navigation/navigation.css
index 624714e..dce663c 100644
--- a/apps/docs/src/components/navigation/navigation.css
+++ b/apps/docs/src/components/navigation/navigation.css
@@ -1,13 +1,13 @@
.navigation {
- ul {
- @apply flex gap-4;
- li {
- a {
- @apply text-on-primary-container;
- &:hover {
- @apply text-on-primary-container/80;
- }
- }
- }
- }
+ ul {
+ @apply flex gap-4;
+ li {
+ a {
+ @apply text-on-primary-container;
+ &:hover {
+ @apply text-on-primary-container/80;
+ }
+ }
+ }
+ }
}
diff --git a/apps/docs/src/components/radiant-counter/radiant-counter.css b/apps/docs/src/components/radiant-counter/radiant-counter.css
index 55861b9..7690d3a 100644
--- a/apps/docs/src/components/radiant-counter/radiant-counter.css
+++ b/apps/docs/src/components/radiant-counter/radiant-counter.css
@@ -1,10 +1,10 @@
radiant-counter {
- @apply flex gap-4 items-center bg-indigo-200 rounded-md max-w-fit p-2;
- [data-ref="increment"],
- [data-ref="decrement"] {
- @apply flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white rounded-md w-8 h-8;
- }
- span {
- @apply text-gray-900 font-bold p-2 bg-gray-100 min-w-20 h-10 flex items-center justify-center rounded-md;
- }
+ @apply flex gap-4 items-center bg-indigo-200 rounded-md max-w-fit p-2;
+ [data-ref="increment"],
+ [data-ref="decrement"] {
+ @apply flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white rounded-md w-8 h-8;
+ }
+ span {
+ @apply text-gray-900 font-bold p-2 bg-gray-100 min-w-20 h-10 flex items-center justify-center rounded-md;
+ }
}
diff --git a/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css b/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css
index fc5ddbc..1c8e669 100644
--- a/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css
+++ b/apps/docs/src/components/radiant-todo-app/radiant-todo-app.css
@@ -1,74 +1,74 @@
.todo {
- @apply flex flex-col gap-4 items-start bg-gray-50 rounded-md p-4 w-full;
+ @apply flex flex-col gap-4 items-start bg-gray-50 rounded-md p-4 w-full;
- &__board {
- @apply flex flex-col lg:flex-row gap-4 w-full;
- }
+ &__board {
+ @apply flex flex-col lg:flex-row gap-4 w-full;
+ }
- &__panel {
- @apply flex flex-col gap-4 w-full;
- h2 {
- @apply m-0;
- }
- }
+ &__panel {
+ @apply flex flex-col gap-4 w-full;
+ h2 {
+ @apply m-0;
+ }
+ }
- &__list {
- @apply flex flex-col bg-white gap-2 rounded-md p-2 w-full min-h-28;
+ &__list {
+ @apply flex flex-col bg-white gap-2 rounded-md p-2 w-full min-h-28;
- &--complete {
- @apply border-2 border-green-500;
- }
+ &--complete {
+ @apply border-2 border-green-500;
+ }
- &--incomplete {
- @apply border-2 border-blue-500;
- }
- }
+ &--incomplete {
+ @apply border-2 border-blue-500;
+ }
+ }
- [data-todo-form] {
- @apply flex gap-4 bg-gray-100 w-full;
- }
+ [data-todo-form] {
+ @apply flex gap-4 bg-gray-100 w-full;
+ }
- form {
- @apply flex flex-col md:flex-row gap-2 w-full md:justify-between;
+ form {
+ @apply flex flex-col md:flex-row gap-2 w-full md:justify-between;
- .form-group {
- @apply flex-col gap-1 w-full;
- }
+ .form-group {
+ @apply flex-col gap-1 w-full;
+ }
- label {
- @apply text-sm font-semibold;
- }
+ label {
+ @apply text-sm font-semibold;
+ }
- input {
- @apply w-full p-2 border border-gray-300 rounded-md;
- }
+ input {
+ @apply w-full p-2 border border-gray-300 rounded-md;
+ }
- button {
- @apply bg-blue-700 self-end text-white p-2 rounded-md min-w-20;
- }
- }
+ button {
+ @apply bg-blue-700 self-end text-white p-2 rounded-md min-w-20;
+ }
+ }
- p,
- &__count {
- @apply flex w-full gap-1 m-0 text-sm text-gray-700;
- & span {
- @apply font-semibold;
- }
- }
+ p,
+ &__count {
+ @apply flex w-full gap-1 m-0 text-sm text-gray-700;
+ & span {
+ @apply font-semibold;
+ }
+ }
- &__item {
- @apply flex items-center justify-between gap-2 p-2 bg-blue-100 rounded-md;
- &[complete="true"] {
- @apply bg-green-200;
- }
- & label {
- @apply flex items-center gap-2 cursor-pointer;
- }
- & input[type="checkbox"] {
- @apply w-4 h-4 rounded-md accent-green-500 cursor-pointer;
- }
- &-remove {
- @apply text-gray-900 bg-black/5 rounded-full p-1;
- }
- }
+ &__item {
+ @apply flex items-center justify-between gap-2 p-2 bg-blue-100 rounded-md;
+ &[complete="true"] {
+ @apply bg-green-200;
+ }
+ & label {
+ @apply flex items-center gap-2 cursor-pointer;
+ }
+ & input[type="checkbox"] {
+ @apply w-4 h-4 rounded-md accent-green-500 cursor-pointer;
+ }
+ &-remove {
+ @apply text-gray-900 bg-black/5 rounded-full p-1;
+ }
+ }
}
diff --git a/apps/docs/src/layouts/base-layout/base-layout.css b/apps/docs/src/layouts/base-layout/base-layout.css
index 577bdfe..40fb328 100644
--- a/apps/docs/src/layouts/base-layout/base-layout.css
+++ b/apps/docs/src/layouts/base-layout/base-layout.css
@@ -1,3 +1,3 @@
main {
- @apply container mx-auto w-screen;
+ @apply container mx-auto w-screen;
}
diff --git a/apps/docs/src/layouts/docs-layout/docs-layout.css b/apps/docs/src/layouts/docs-layout/docs-layout.css
index 5db530d..ca21d32 100644
--- a/apps/docs/src/layouts/docs-layout/docs-layout.css
+++ b/apps/docs/src/layouts/docs-layout/docs-layout.css
@@ -1,28 +1,28 @@
.docs-layout {
- @apply md:grid md:grid-cols-[auto,1fr];
- .docs-layout__aside {
- @apply fixed top-16 h-[calc(100svh_-_4rem)] md:sticky;
- @apply bg-background p-6 md:p-8 border-r border-r-background-accent;
+ @apply md:grid md:grid-cols-[auto,1fr];
+ .docs-layout__aside {
+ @apply fixed top-16 h-[calc(100svh_-_4rem)] md:sticky;
+ @apply bg-background p-6 md:p-8 border-r border-r-background-accent;
- ul,
- ol {
- @apply list-none p-0;
- }
+ ul,
+ ol {
+ @apply list-none p-0;
+ }
- a {
- @apply text-link no-underline;
- }
- }
+ a {
+ @apply text-link no-underline;
+ }
+ }
- .docs-layout__content {
- @apply px-6 md:px-12 py-4;
- }
+ .docs-layout__content {
+ @apply px-6 md:px-12 py-4;
+ }
- .docs-layout__nav-group {
- @apply my-8 uppercase text-sm font-bold text-on-background;
- }
+ .docs-layout__nav-group {
+ @apply my-8 uppercase text-sm font-bold text-on-background;
+ }
- .docs-layout__nav-group-list {
- @apply ml-4 mt-2 mb-8;
- }
+ .docs-layout__nav-group-list {
+ @apply ml-4 mt-2 mb-8;
+ }
}
diff --git a/apps/docs/src/pages/404.css b/apps/docs/src/pages/404.css
index 80b8510..f853a85 100644
--- a/apps/docs/src/pages/404.css
+++ b/apps/docs/src/pages/404.css
@@ -1,6 +1,6 @@
.error404 {
- @apply flex flex-col gap-4 items-center justify-center bg-background-accent rounded-md p-4 my-20 max-w-fit mx-auto shadow-md;
- p {
- @apply text-lg text-on-background p-8 bg-background rounded-md;
- }
+ @apply flex flex-col gap-4 items-center justify-center bg-background-accent rounded-md p-4 my-20 max-w-fit mx-auto shadow-md;
+ p {
+ @apply text-lg text-on-background p-8 bg-background rounded-md;
+ }
}
diff --git a/apps/docs/src/pages/docs/context/context-consumer.mdx b/apps/docs/src/pages/docs/context/context-consumer.mdx
index 386d155..add5c02 100644
--- a/apps/docs/src/pages/docs/context/context-consumer.mdx
+++ b/apps/docs/src/pages/docs/context/context-consumer.mdx
@@ -4,8 +4,8 @@ import { DocsLayout } from '@/layouts/docs-layout';
export const layout = DocsLayout;
export const getMetadata = () => ({
- title: 'Docs | Context Consumer',
- description: 'The place to learn about @ecopages/radiant',
+ title: 'Docs | Context Consumer',
+ description: 'The place to learn about @ecopages/radiant',
})
# @consumeContext
@@ -16,13 +16,16 @@ To consume a context in a component, you can use the `@consumeContext` decorator
- `context`: The context object that you want to consume.
-{`import { myContext } from './my-element-provider'
+
+```typescript
+import { myContext } from './my-element-provider'
@customElement("my-consumer")
export class MyElement extends RadiantElement {
@consumeContext(myContext)
consumer!: ContextProvider;
-}`}
+```
+
Once you have a context consumer, you can access the context value using the `consumer` property and the following properties:
@@ -36,7 +39,9 @@ If you need more fine-grained control over the context, you can use the `@contex
If for any reason you don't want to use the `@consumeContext` decorator, you can simply send a custom event to the provider element with the context value.
-{`import { myContext } from './my-element-provider';
+
+```typescript
+import { myContext } from './my-element-provider';
import { ContextRequestEvent } from '@ecopages/radiant';
@customElement("my-consumer")
@@ -46,4 +51,6 @@ export class MyElement extends RadiantElement {
super.connectedCallback();
this.dispatchEvent(new ContextRequestEvent(myContext, (context) => this.context = context));
}
-}`}
\ No newline at end of file
+}
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/context/context-provider.mdx b/apps/docs/src/pages/docs/context/context-provider.mdx
index 4de1f2d..9f5d89c 100644
--- a/apps/docs/src/pages/docs/context/context-provider.mdx
+++ b/apps/docs/src/pages/docs/context/context-provider.mdx
@@ -56,20 +56,24 @@ Please note that the provider must be a parent of the consumer.
To read the documentation relative to the consumer, click [here](/docs/context/context-consumer).
-
-{`
+
+```html
+
-`}
+
+```
If for any reason you don't want to use the \`@provideContext\` decorator, you can use the \`ContextProvider\` component directly.
-
-{`@customElement("my-context")
+
+```typescript
+@customElement("my-context")
export class MyElement extends RadiantElement {
provider = new ContextProvider(this, {
context: myContext,
initialValue: { value: "Hello World" },
});
-}`}
+}
+```
diff --git a/apps/docs/src/pages/docs/context/context-selector.mdx b/apps/docs/src/pages/docs/context/context-selector.mdx
index 62d54bd..673de72 100644
--- a/apps/docs/src/pages/docs/context/context-selector.mdx
+++ b/apps/docs/src/pages/docs/context/context-selector.mdx
@@ -23,8 +23,9 @@ This decorator is a method decorator, so it should be used on a method of a clas
Here is an example of how to use the `@contextSelector` decorator:
-
-{`import { MyContext } from './my-element-provider'
+
+```typescript
+import { MyContext } from './my-element-provider'
@customElement("my-consumer")
export class MyElement extends RadiantElement {
@@ -32,12 +33,16 @@ export class MyElement extends RadiantElement {
handleValue({ value }: Pick) {
console.log(value);
}
-}`}
+}
+```
+
+
This can be very handy when you need to manipulate the context value before using it.
-
-{`import { MyContext } from './my-element-provider'
+
+```typescript
+import { MyContext } from './my-element-provider'
@customElement("my-consumer")
export class MyElement extends RadiantElement {
@contextSelector({
@@ -47,12 +52,16 @@ export class MyElement extends RadiantElement {
handleValue({ value }: Pick) {
console.log(value);
}
-}`}
+}
+```
+
+
If for any reason you don't want to use the `@contextSelector` decorator, you can subscribe to the context changes manually.
-
-{`import { MyContext } from './my-element-provider'
+
+```typescript
+import { MyContext } from './my-element-provider'
@customElement("my-consumer")
export class MyElement extends RadiantElement {
context!: ContextProvider;
@@ -71,5 +80,7 @@ export class MyElement extends RadiantElement {
onChangeValue({ value }: Pick) {
console.log(value);
}
-}`}
+}
+```
+
diff --git a/apps/docs/src/pages/docs/core/radiant-element.mdx b/apps/docs/src/pages/docs/core/radiant-element.mdx
index ee4264a..4985135 100644
--- a/apps/docs/src/pages/docs/core/radiant-element.mdx
+++ b/apps/docs/src/pages/docs/core/radiant-element.mdx
@@ -19,6 +19,9 @@ You can use the `@customElement` decorator to define a custom element.
Go to the [Decorator Section](/docs/decorators/custom-element) to see all the available decorators.
-{`@customElement('lc-demo')
-export class MyElement extends RadiantElement {}`}
+
+```typescript
+@customElement('lc-demo')
+export class MyElement extends RadiantElement {}
+```
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/decorators/event.mdx b/apps/docs/src/pages/docs/decorators/event.mdx
index 8a41c23..de00604 100644
--- a/apps/docs/src/pages/docs/decorators/event.mdx
+++ b/apps/docs/src/pages/docs/decorators/event.mdx
@@ -15,9 +15,13 @@ A decorator that creates an EventEmitter on the target element.
The EventEmitter can be used to dispatch custom events from the target element.
-{`@event({ name: 'my-custom-event', bubbles: true, composed: true })
+
+```typescript
+@event({ name: 'my-custom-event', bubbles: true, composed: true })
customEvent!: EventEmitter;
connectedCallback() {
this.customEvent.emit({ detail: 'Hello, World!' });
-}`}
+}
+```
+
diff --git a/apps/docs/src/pages/docs/decorators/on-event.mdx b/apps/docs/src/pages/docs/decorators/on-event.mdx
index dc0bba7..8879806 100644
--- a/apps/docs/src/pages/docs/decorators/on-event.mdx
+++ b/apps/docs/src/pages/docs/decorators/on-event.mdx
@@ -28,6 +28,14 @@ And the following properties:
- `type`: The event type to listen for.
- `options` (optional): `AddEventListenerOptions` An options object that specifies characteristics about the event listener.
-{`@onEvent({ selector: "button", type: "click" }) doSomething() {...} `}
-
-{`@onEvent({ ref: "my-ref", type: "click" }) doSomething() {...} `}
\ No newline at end of file
+
+```typescript
+@onEvent({ selector: "button", type: "click" }) doSomething() {...}
+```
+
+
+
+```typescript
+@onEvent({ ref: "my-ref", type: "click" }) doSomething() {...}
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/decorators/on-updated.mdx b/apps/docs/src/pages/docs/decorators/on-updated.mdx
index a9c935a..85f7149 100644
--- a/apps/docs/src/pages/docs/decorators/on-updated.mdx
+++ b/apps/docs/src/pages/docs/decorators/on-updated.mdx
@@ -15,4 +15,8 @@ This is a decorator that allows you to register a method to be called when a pro
It takes the name of the property to watch for changes.
-{`@onUpdated("count") doSomething() {...}`}
\ No newline at end of file
+
+```typescript
+@onUpdated("count") doSomething() {...}
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/decorators/query-selector-all.mdx b/apps/docs/src/pages/docs/decorators/query-selector-all.mdx
index 547eea4..061d35a 100644
--- a/apps/docs/src/pages/docs/decorators/query-selector-all.mdx
+++ b/apps/docs/src/pages/docs/decorators/query-selector-all.mdx
@@ -15,4 +15,8 @@ This is a decorator that allows you to query for elements inside the component t
It takes a selector and a property to assign the element to. Behind the scenes, it uses querySelectorAll
-{`@querySelectorAll("[data-text]") allTexts: HTMLElement[];`}
\ No newline at end of file
+
+```typescript
+@querySelectorAll("[data-text]") allTexts: HTMLElement[];
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/decorators/query.mdx b/apps/docs/src/pages/docs/decorators/query.mdx
index 7f94cbd..65e2c7e 100644
--- a/apps/docs/src/pages/docs/decorators/query.mdx
+++ b/apps/docs/src/pages/docs/decorators/query.mdx
@@ -15,13 +15,25 @@ A decorator to query by CSS selector or data-ref attribute.
By default it queries for the first element that matches the selector, but it can be configured to query for all elements.
-{`@query({ selector: "[data-text]"}) text: HTMLElement;`}
+
+```typescript
+@query({ selector: "[data-text]"}) text: HTMLElement;
+```
+
It is possible to query for all elements that match the selector by setting the `all` property to true.
-{`@query({ ref: "my-ref", all: true }) allTexts: HTMLElement[];`}
+
+```typescript
+@query({ ref: "my-ref", all: true }) allTexts: HTMLElement[]
+```
+
By default it caches the result of the query, but it can be configured to not cache the result by setting the `cache` property to false.
This can be very handful when dealing with dynamic content.
-{`@query({ ref: "list-item", all:true, cache: false }) text: HTMLElement;`}
\ No newline at end of file
+
+```typescript
+@query({ ref: "list-item", all:true, cache: false }) text: HTMLElement;
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/decorators/reactive-field.mdx b/apps/docs/src/pages/docs/decorators/reactive-field.mdx
index caec219..2fcdc52 100644
--- a/apps/docs/src/pages/docs/decorators/reactive-field.mdx
+++ b/apps/docs/src/pages/docs/decorators/reactive-field.mdx
@@ -17,4 +17,8 @@ Once an update is made to the field, it will inform the component that an update
It plays well in combination with the @onUpdated decorator.
-{`@reactiveField numberOfClicks = 1;`}
\ No newline at end of file
+
+```typescript
+@reactiveField numberOfClicks = 1;
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/decorators/reactive-prop.mdx b/apps/docs/src/pages/docs/decorators/reactive-prop.mdx
index 45d0728..9d8d694 100644
--- a/apps/docs/src/pages/docs/decorators/reactive-prop.mdx
+++ b/apps/docs/src/pages/docs/decorators/reactive-prop.mdx
@@ -25,4 +25,8 @@ It is also possible to define a default value for the attribute using the `defau
It plays well in combination with the @onUpdated decorator.
-{`@reactiveProp({ type: Number, reflect: true, attribute: 'count-it', defaultValue: 5 }) declare count: number;`}
\ No newline at end of file
+
+```typescript
+@reactiveProp({ type: Number, reflect: true, attribute: 'count-it', defaultValue: 5 }) declare count: number;
+```
+
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/examples/counter.mdx b/apps/docs/src/pages/docs/examples/counter.mdx
index 00613ff..c47ad89 100644
--- a/apps/docs/src/pages/docs/examples/counter.mdx
+++ b/apps/docs/src/pages/docs/examples/counter.mdx
@@ -36,8 +36,9 @@ If you want to use the `RadiantCounter` component, the only thing you need to do
This can be done by using the `data-decrement`, `data-increment`, and `data-text` attributes.
-
-{`
+
+```jsx
+
@@ -45,7 +46,8 @@ This can be done by using the `data-decrement`, `data-increment`, and `data-text
-`}
+
+```
## Typescript
@@ -56,8 +58,9 @@ Please note that the props in there are used mainly to provide type checking and
The component is also dispatching a `change` event when the value is updated, this can be used to listen for changes in the value of the component.
-
-{`export type RadiantCounterProps = {
+
+```typescript
+export type RadiantCounterProps = {
value?: number;
};
@@ -89,5 +92,6 @@ declare global {
'radiant-counter': HtmlTag & RadiantCounterProps;
}
}
-}`}
+}
+```
\ No newline at end of file
diff --git a/apps/docs/src/pages/docs/examples/todo-app.mdx b/apps/docs/src/pages/docs/examples/todo-app.mdx
index 6d92832..81a458f 100644
--- a/apps/docs/src/pages/docs/examples/todo-app.mdx
+++ b/apps/docs/src/pages/docs/examples/todo-app.mdx
@@ -52,8 +52,9 @@ Please remember that due the nature of the web components, you need to stringify
Since hydrate will merge the data with the initial value, you can pass only the properties that you want to update.
-
-{`({ todos: data.todos })}>
+
+```jsx
+({ todos: data.todos })}>
Todo List
@@ -88,7 +89,7 @@ Since hydrate will merge the data with the initial value, you can pass only the
-`}
+```
## Typescript
@@ -103,8 +104,9 @@ The features used in this component are:
- `@contextSelector` decorator to select the todos based on the complete status
- `renderTemplate` method to render the templates. Here we are using WithKita mixin to render the JSX templates
-
-{`export type Todo = {
+
+```typescript
+export type Todo = {
id: string;
text: string;
complete: boolean;
@@ -185,7 +187,7 @@ declare global {
}
}
}
-`}
+```
In this second snippet we have the `radiant-todo-item` component that is responsible for rendering the todo item.
@@ -196,8 +198,9 @@ The features used in this component are:
- `@reactiveProp` decorator to define the complete attribute
- `@consumeContext` decorator to consume the context from the parent component
-
-{`export type RadiantTodoProps = {
+
+```typescript
+export type RadiantTodoProps = {
complete?: boolean;
};
@@ -244,7 +247,8 @@ declare global {
'radiant-todo-item': HtmlTag & RadiantTodoProps;
}
}
-}`}
+}
+```
Finally, in this last snippet we have the `NoTodosMessage`, `NoCompletedTodosMessage`, `TodoItem` and `TodoList` components.
@@ -253,8 +257,9 @@ Theses components are responsible for rendering the messages when there are no t
They are used both in the initial markup and in the custom elements.
-
-{`import type { Todo } from './radiant-todo-app.script';
+
+```jsx
+import type { Todo } from './radiant-todo-app.script';
export const NoTodosMessage = () => {
return