Skip to content

Commit

Permalink
chore: updated CodeBlock in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrea Zanenghi committed Sep 21, 2024
1 parent 0eb36ac commit 261438d
Show file tree
Hide file tree
Showing 29 changed files with 480 additions and 398 deletions.
34 changes: 17 additions & 17 deletions apps/docs/src/components/burger/burger.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
2 changes: 1 addition & 1 deletion apps/docs/src/components/code-block/code-block.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
20 changes: 10 additions & 10 deletions apps/docs/src/components/header/header.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
8 changes: 4 additions & 4 deletions apps/docs/src/components/logo/logo.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
22 changes: 11 additions & 11 deletions apps/docs/src/components/navigation/navigation.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
16 changes: 8 additions & 8 deletions apps/docs/src/components/radiant-counter/radiant-counter.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
118 changes: 59 additions & 59 deletions apps/docs/src/components/radiant-todo-app/radiant-todo-app.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
2 changes: 1 addition & 1 deletion apps/docs/src/layouts/base-layout/base-layout.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
main {
@apply container mx-auto w-screen;
@apply container mx-auto w-screen;
}
42 changes: 21 additions & 21 deletions apps/docs/src/layouts/docs-layout/docs-layout.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
8 changes: 4 additions & 4 deletions apps/docs/src/pages/404.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
19 changes: 13 additions & 6 deletions apps/docs/src/pages/docs/context/context-consumer.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.


<CodeBlock lang='typescript'>{`import { myContext } from './my-element-provider'
<CodeBlock>
```typescript
import { myContext } from './my-element-provider'

@customElement("my-consumer")
export class MyElement extends RadiantElement {
@consumeContext(myContext)
consumer!: ContextProvider<typeof myContext>;
}`}</CodeBlock>
```
</CodeBlock>
Once you have a context consumer, you can access the context value using the `consumer` property and the following properties:
Expand All @@ -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.

<CodeBlock lang='typescript'>{`import { myContext } from './my-element-provider';
<CodeBlock>
```typescript
import { myContext } from './my-element-provider';
import { ContextRequestEvent } from '@ecopages/radiant';
@customElement("my-consumer")
Expand All @@ -46,4 +51,6 @@ export class MyElement extends RadiantElement {
super.connectedCallback();
this.dispatchEvent(new ContextRequestEvent(myContext, (context) => this.context = context));
}
}`}</CodeBlock>
}
```
</CodeBlock>
Loading

0 comments on commit 261438d

Please sign in to comment.