Skip to content

Commit

Permalink
Updated NLUX docs
Browse files Browse the repository at this point in the history
  • Loading branch information
salmenus committed Jun 17, 2024
1 parent b863508 commit 4af06d9
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 29 deletions.
6 changes: 2 additions & 4 deletions docs/src/pages/(examples)/intro/example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,8 @@ export default () => {
user
}}
conversationOptions={{ layout: 'bubbles' }}
displayOptions={{ colorScheme: "dark" }}
composerOptions={{
placeholder: "Type your query"
}}
displayOptions={{ colorScheme: "${colorScheme}" }}
composerOptions={{ placeholder: "Type your query" }}
/>
);
};
Expand Down
120 changes: 120 additions & 0 deletions docs/src/pages/(sections)/hero/border.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
HTML CSSResult Skip Results Iframe

/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}

@property --border-angle-2 {
syntax: "<angle>";
inherits: true;
initial-value: 90deg;
}

@property --border-angle-3 {
syntax: "<angle>";
inherits: true;
initial-value: 180deg;
}


/* sRGB color. */
:root {
--bright-blue: rgb(0, 100, 255);
--bright-green: rgb(232, 221, 191);
--bright-red: rgb(255, 0, 0);
--background: black;
--foreground: #fbf2ef;
--border-size: 2px;
--border-radius: 0.75em;
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
:root {
--bright-blue: color(display-p3 0 0.2 1);
--bright-green: color(display-p3 0.4 1 0);
--bright-red: color(display-p3 1 0 0);
}
}

@keyframes rotateBackground {
to {
--border-angle-1: 360deg;
}
}

@keyframes rotateBackground2 {
to {
--border-angle-2: -270deg;
}
}

@keyframes rotateBackground3 {
to {
--border-angle-3: 540deg;
}
}

.shinyButton {
--border-angle-1: 0deg;
--border-angle-2: 90deg;
--border-angle-3: 180deg;
color: inherit;
font-family: inherit;
border: 0;
padding: var(--border-size);
display: flex;
width: max-content;
border-radius: var(--border-radius);
background-color: transparent;
background-image: conic-gradient(
from var(--border-angle-1) at 10% 15%,
transparent,
var(--bright-blue) 10%,
transparent 30%,
transparent
),
conic-gradient(
from var(--border-angle-2) at 70% 60%,
transparent,
var(--bright-green) 10%,
transparent 60%,
transparent
),
conic-gradient(
from var(--border-angle-3) at 50% 20%,
transparent,
var(--bright-red) 10%,
transparent 50%,
transparent
);

animation: rotateBackground 3s linear infinite,
rotateBackground2 8s linear infinite,
rotateBackground3 13s linear infinite;
}

/* Change this background to transparent to see how the gradient works */
.shinyButton div {
padding: 0.5em 1em;
border-radius: calc(var(--border-radius) - var(--border-size));
}

html[data-theme="dark"] .shinyButton div {
background: var(--background);
color: var(--foreground);
}

html[data-theme="light"] .shinyButton div {
background: var(--foreground);
color: var(--background);
}

@font-face {
font-family: "Aspekta";
font-weight: normal;
src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");
}
37 changes: 12 additions & 25 deletions docs/src/pages/(sections)/hero/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import exampleIntroFileSendFunction from '@site/src/pages/(examples)/intro/send'
import exampleIntroFileAiChatBot from '@site/src/pages/(examples)/intro/example';
import exampleIntroFilePersonas from '@site/src/pages/(examples)/intro/personas';
import styles from '@site/src/pages/index.module.css';
import borderStyles from './border.module.css';
import heroStyles from '@site/src/pages/(sections)/hero/hero.module.css';
import Heading from '@theme/Heading';

Expand Down Expand Up @@ -90,43 +91,29 @@ export const Hero = ({className}: { className?: string }) => {
</div>
</div>
</div>
<div className={styles.buttons}>
<Link
className={`shinyButton button button--primary button--lg ${borderStyles.shinyButton}`}
to="/learn/get-started"
>
<div>
Get Started Now
</div>
</Link>
</div>
<div className={styles.nluxInAction}>
<p>
<strong><code>@nlux/react</code> in action</strong> 👇 ―
Edit the code below to see how it works.
</p>
<CodeEditor
className={styles.codeEditor}
direction="row"
files={{
'App.tsx': exampleIntroFileAiChatBot(colorMode),
'App.tsx': exampleIntroFileAiChatBot,
'send.ts': exampleIntroFileSendFunction,
'personas.tsx': exampleIntroFilePersonas,
}}
editorHeight={420}
simulatedPrompt="How an AI assistant can enhance my website's user experience?"
/>
</div>
<div className={styles.buttons}>
<Link
className="button button--primary button--lg"
to="/learn/get-started"
>
Get Started
</Link>
<Link
className="button button--primary button--lg"
to="/examples/react-js-ai-assistant"
>
Examples
</Link>
<Link
className="button button--primary button--lg"
to="/reference/overview"
>
API Reference
</Link>
</div>
</div>
</header>
);
Expand Down

0 comments on commit 4af06d9

Please sign in to comment.