Skip to content

Commit

Permalink
docs: Improvements (#79)
Browse files Browse the repository at this point in the history
## Description
Landing Page text changes, docs color changes

### Type of change
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [x] Documentation update (improves or adds clarity to existing
documentation)

### Checklist
- [x] I have performed a self-review of my code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have updated the documentation accordingly
- [x] My changes generate no new warnings
  • Loading branch information
jakmro authored Jan 14, 2025
1 parent 3627631 commit c7ad6ae
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 61 deletions.
2 changes: 1 addition & 1 deletion docs/docs/llms/exporting-llama.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@ Navigate to the `llama_export` directory and run the following command:

The script will pull a Docker image from Docker Hub, and then run it to export the model. By default the output (llama3_2.pte file) will be saved in the `llama-export/outputs` directory. However, you can override that behavior with the `--output-path [path]` flag.

:::note[Note]
:::note
This Docker image was tested on MacOS with ARM chip. This might not work in other environments.
:::
115 changes: 59 additions & 56 deletions docs/src/css/colors.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,6 @@
--swm-navy-dark-40: #abbcf5;
--swm-navy-dark-20: #c1c6e5;

/* react-native-executorch */
--swm-cornflower-100: #4B6CF4;
--swm-cornflower-80: #7394FF;
--swm-cornflower-60: #A6C2FF;
--swm-cornflower-0: #F7FAFF;

--swm-navy-100: #160042;
/* end react-native-executorch */

--swm-purple-light-100: #782aeb;
--swm-purple-light-80: #b58df1;
--swm-purple-light-60: #d1bbf3;
Expand Down Expand Up @@ -92,6 +83,18 @@
--swm-yellow-dark-60: #fff1b2;
--swm-yellow-dark-40: #fff9db;

/* react-native-executorch */
--swm-navy-100: #160042;

--swm-cornflower-140: #23326f;
--swm-cornflower-120: #3851b4;
--swm-cornflower-100: #4B6CF4;
--swm-cornflower-80: #7394FF;
--swm-cornflower-60: #A6C2FF;
--swm-cornflower-40: #D0E2FF;
--swm-cornflower-20: #E6EFFF;
--swm-cornflower-0: #F7FAFF;

/* Black & White palette, mainly for background settings */
--swm-off-white: #f8f9ff;
--swm-white: #fcfcff;
Expand Down Expand Up @@ -133,34 +136,34 @@

/* Tabs */
--swm-tab: var(--swm-navy-light-20);
--swm-tab-hover: var(--swm-blue-light-80);
--swm-tab-active: var(--swm-blue-light-100);
--swm-tab-hover: var(--swm-cornflower-80);
--swm-tab-active: var(--swm-cornflower-100);

/* Table of Contents */
--ifm-toc-border-color: transparent;
--ifm-toc-link-color: var(--swm-navy-light-60);
--ifm-toc-link-color-active: var(--swm-navy-light-100);

--swm-hire-us-toc: var(--swm-navy-light-100);
--swm-hire-us-toc: var(--swm-cornflower-100);
--swm-hire-us-toc-color: var(--swm-off-white);
--swm-hire-us-toc-color-hover: var(--swm-navy-light-100);
--swm-hire-us-toc-border-hover: var(--swm-navy-light-100);
--swm-hire-us-toc-color-hover: var(--swm-cornflower-100);
--swm-hire-us-toc-border-hover: var(--swm-cornflower-100);

/* Details section */
--swm-details-foreground: var(--swm-purple-light-20);
--swm-details-background: var(--swm-purple-light-100);
--swm-details-foreground: var(--swm-cornflower-20);
--swm-details-background: var(--swm-cornflower-100);

/* Admonitions */
--swm-admonition-color-secondary: var(--swm-navy-light-10);
--swm-admonition-color-success: var(--swm-green-light-20);
--swm-admonition-color-danger: var(--swm-red-light-20);
--swm-admonition-color-info: var(--swm-blue-light-20);
--swm-admonition-color-info: var(--swm-cornflower-20);
--swm-admonition-color-caution: var(--swm-yellow-light-20);

--swm-admonition-color-secondary-shadow: var(--swm-navy-light-80);
--swm-admonition-color-success-shadow: var(--swm-green-light-100);
--swm-admonition-color-danger-shadow: var(--swm-red-light-100);
--swm-admonition-color-info-shadow: var(--swm-blue-light-100);
--swm-admonition-color-info-shadow: var(--swm-cornflower-100);
--swm-admonition-color-caution-shadow: var(--swm-yellow-light-100);

/* Details */
Expand All @@ -185,7 +188,7 @@
--swm-interactive-button-color: var(--swm-navy-light-60);
--swm-interactive-button-active: var(--ifm-font-color-base);

--swm-interactive-slider: var(--swm-blue-light-100);
--swm-interactive-slider: var(--swm-cornflower-100);
--swm-interactive-slider-rail: var(--swm-navy-light-20);

/* --swm-navy-light-100 in rgba */
Expand All @@ -201,8 +204,8 @@

/* Pagination */
--swm-paginator-sublabel: var(--swm-navy-light-100);
--swm-paginator-label: var(--swm-blue-light-80);
--swm-paginator-label-hover: var(--swm-blue-light-100);
--swm-paginator-label: var(--swm-cornflower-80);
--swm-paginator-label-hover: var(--swm-cornflower-100);

/* Footer */
--swm-brand-copyright-color: var(--swm-navy-light-100);
Expand All @@ -217,12 +220,12 @@
--swm-searchbar-text-color: var(--swm-navy-light-60);
--swm-searchbar-background: var(--swm-background);
--swm-searchbar-border: var(--swm-navy-light-20);
--swm-searchbar-border-hover: var(--swm-blue-light-100);
--swm-searchbar-border-hover: var(--swm-cornflower-100);

--swm-search-hit-background: var(--swm-blue-light-20);
--swm-search-hit-background-hover: var(--swm-blue-light-80);
--swm-search-hit-border: var(--swm-blue-light-40);
--swm-search-hit-border-hover: var(--swm-blue-light-100);
--swm-search-hit-background: var(--swm-cornflower-20);
--swm-search-hit-background-hover: var(--swm-cornflower-80);
--swm-search-hit-border: var(--swm-cornflower-40);
--swm-search-hit-border-hover: var(--swm-cornflower-100);
--swm-search-hit-active-color: var(--swm-off-white);

--swm-docsearch-hit-source-color: var(--swm-navy-light-100);
Expand Down Expand Up @@ -262,11 +265,11 @@
/* Cards */
--swm-card-background: var(--swm-background);
--swm-card-border: var(--swm-navy-light-20);
--swm-card-border-hover: var(--swm-blue-light-100);
--swm-card-border-hover: var(--swm-cornflower-100);

/* Sidebar label*/
/* Sidebar label */
--swm-sidebar-label-text-new: var(--swm-off-white);
--swm-sidebar-label-background-new: var(--swm-blue-light-100);
--swm-sidebar-label-background-new: var(--swm-cornflower-100);

--swm-sidebar-label-text-experimental: var(--swm-navy-light-100);
--swm-sidebar-label-background-experimental: var(--swm-yellow-light-40);
Expand All @@ -279,15 +282,15 @@
/* Versions dropdown */
--swm-dropdown-versions-background: var(--swm-off-white);
--swm-dropdown-versions-item: var(--swm-navy-light-100);
--swm-dropdown-versions-item-border: var(--swm-blue-light-40);
--swm-dropdown-versions-item-background: var(--swm-blue-light-20);
--swm-dropdown-versions-item-border: var(--swm-cornflower-40);
--swm-dropdown-versions-item-background: var(--swm-cornflower-20);

--swm-dropdown-versions-item-active: var(--swm-off-white);
--swm-dropdown-versions-item-border-active: var(--swm-blue-light-100);
--swm-dropdown-versions-item-background-active: var(--swm-blue-light-80);
--swm-dropdown-versions-item-border-active: var(--swm-cornflower-100);
--swm-dropdown-versions-item-background-active: var(--swm-cornflower-80);

--swm-dropdown-versions-item-hover: var(--swm-navy-light-100);
--swm-dropdown-versions-item-active-hover: var(--swm-blue-light-100);
--swm-dropdown-versions-item-active-hover: var(--swm-cornflower-100);

/* Version badge */
--swm-version-badge: var(--swm-navy-light-100);
Expand Down Expand Up @@ -320,34 +323,34 @@

/* Tabs */
--swm-tab: var(--swm-navy-light-60);
--swm-tab-hover: var(--swm-blue-dark-60);
--swm-tab-active: var(--swm-blue-light-80);
--swm-tab-hover: var(--swm-cornflower-60);
--swm-tab-active: var(--swm-cornflower-80);

/* Table of Contents */
--ifm-toc-border-color: transparent;
--ifm-toc-link-color: var(--swm-navy-light-40);
--ifm-toc-link-color-active: var(--swm-off-white);

--swm-hire-us-toc: var(--swm-blue-light-80);
--swm-hire-us-toc: var(--swm-cornflower-100);
--swm-hire-us-toc-color: var(--swm-off-white);
--swm-hire-us-toc-color-hover: var(--swm-navy-light-40);
--swm-hire-us-toc-border-hover: var(--swm-navy-light-40);

/* Details section */
--swm-details-foreground: var(--swm-blue-dark-120);
--swm-details-background: var(--swm-blue-dark-140);
--swm-details-foreground: var(--swm-cornflower-120);
--swm-details-background: var(--swm-cornflower-140);

/* Admonitions */
--swm-admonition-color-secondary: var(--swm-navy-dark-70);
--swm-admonition-color-success: var(--swm-green-dark-120);
--swm-admonition-color-danger: var(--swm-red-dark-120);
--swm-admonition-color-info: var(--swm-blue-dark-120);
--swm-admonition-color-info: var(--swm-cornflower-120);
--swm-admonition-color-caution: var(--swm-yellow-dark-120);

--swm-admonition-color-secondary-shadow: var(--swm-navy-dark-100);
--swm-admonition-color-success-shadow: var(--swm-green-dark-140);
--swm-admonition-color-danger-shadow: var(--swm-red-dark-140);
--swm-admonition-color-info-shadow: var(--swm-blue-dark-140);
--swm-admonition-color-info-shadow: var(--swm-cornflower-140);
--swm-admonition-color-caution-shadow: var(--swm-yellow-dark-140);

/* Details */
Expand All @@ -369,7 +372,7 @@
/* Interactive Examples */
--swm-interactive-button-color: var(--swm-navy-light-40);

--swm-interactive-slider: var(--swm-blue-light-80);
--swm-interactive-slider: var(--swm-cornflower-80);
--swm-interactive-slider-rail: var(--swm-navy-light-20);

/* --swm-navy-light-20 in rgba schema */
Expand All @@ -381,8 +384,8 @@

/* Pagination */
--swm-paginator-sublabel: var(--swm-navy-light-20);
--swm-paginator-label: var(--swm-blue-light-60);
--swm-paginator-label-hover: var(--swm-blue-light-40);
--swm-paginator-label: var(--swm-cornflower-60);
--swm-paginator-label-hover: var(--swm-cornflower-40);

/* Footer */
--swm-brand-copyright-color: var(--swm-navy-light-20);
Expand All @@ -394,12 +397,12 @@
/* Search */
--swm-searchbar-text-color: var(--swm-navy-dark-40);
--swm-searchbar-border: var(--swm-navy-dark-60);
--swm-searchbar-border-hover: var(--swm-blue-dark-80);
--swm-searchbar-border-hover: var(--swm-cornflower-80);

--swm-search-hit-background: var(--swm-blue-dark-120);
--swm-search-hit-background-hover: var(--swm-blue-dark-40);
--swm-search-hit-border: var(--swm-blue-dark-120);
--swm-search-hit-border-hover: var(--swm-blue-dark-40);
--swm-search-hit-background: var(--swm-cornflower-120);
--swm-search-hit-background-hover: var(--swm-cornflower-40);
--swm-search-hit-border: var(--swm-cornflower-120);
--swm-search-hit-border-hover: var(--swm-cornflower-40);
--swm-search-hit-active-color: var(--swm-navy-light-100);

--swm-docsearch-hit-source-color: var(--swm-navy-light-10);
Expand Down Expand Up @@ -440,11 +443,11 @@
/* Cards */
--swm-card-background: var(--swm-navy);
--swm-card-border: var(--swm-navy-dark-60);
--swm-card-border-hover: var(--swm-blue-dark-80);
--swm-card-border-hover: var(--swm-cornflower-80);

/* Sidebar label*/
--swm-sidebar-label-text-new: var(--swm-off-white);
--swm-sidebar-label-background-new: var(--swm-blue-dark-120);
--swm-sidebar-label-background-new: var(--swm-cornflower-120);

--swm-sidebar-label-text-experimental: var(--swm-off-white);
--swm-sidebar-label-background-experimental: var(--swm-yellow-dark-120);
Expand All @@ -458,15 +461,15 @@

--swm-dropdown-versions-background: var(--swm-off-navy);
--swm-dropdown-versions-item: var(--swm-off-white);
--swm-dropdown-versions-item-border: var(--swm-blue-dark-40);
--swm-dropdown-versions-item-background: var(--swm-blue-dark-40);
--swm-dropdown-versions-item-border: var(--swm-cornflower-40);
--swm-dropdown-versions-item-background: var(--swm-cornflower-40);

--swm-dropdown-versions-item-active: var(--swm-off-white);
--swm-dropdown-versions-item-border-active: var(--swm-blue-dark-120);
--swm-dropdown-versions-item-background-active: var(--swm-blue-dark-120);
--swm-dropdown-versions-item-border-active: var(--swm-cornflower-120);
--swm-dropdown-versions-item-background-active: var(--swm-cornflower-120);

--swm-dropdown-versions-item-hover: var(--swm-navy-dark-100);
--swm-dropdown-versions-item-active-hover: var(--swm-blue-dark-100);
--swm-dropdown-versions-item-active-hover: var(--swm-cornflower-100);

/* Version badge */
--swm-version-badge: var(--swm-off-white);
Expand Down
5 changes: 4 additions & 1 deletion docs/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ const Home = () => {
<ExecuTorchIntroduction />
<ReactNativeExecuTorchFeatures />
<div className={styles.hireUsSection}>
<HireUsSection href="https://swmansion.com/contact/projects?utm_source=react-native-executorch&utm_medium=docs" />
<HireUsSection
href="https://swmansion.com/contact/projects?utm_source=react-native-executorch&utm_medium=docs"
content="React Native Core Contributors and experts in dealing with all kinds of React Native issues. Need help using React Native ExecuTorch or deploying and running AI models on your device? Let's tackle it together."
/>
</div>
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions docs/src/theme/TOCItems/index.js

This file was deleted.

29 changes: 29 additions & 0 deletions docs/src/theme/TOCItems/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import { TOCItems } from '@swmansion/t-rex-ui';
import styles from './styles.module.css';

const TOCItemsWrapper = ({
toc,
className = 'table-of-contents table-of-contents__left-border',
linkClassName = 'table-of-contents__link',
linkActiveClassName = undefined,
minHeadingLevel: minHeadingLevelOption,
maxHeadingLevel: maxHeadingLevelOption,
...props
}) => {
return (
<div className={styles.TOCItemsWrapper}>
<TOCItems
toc={toc}
className={className}
linkClassName={linkClassName}
linkActiveClassName={linkActiveClassName}
minHeadingLevel={minHeadingLevelOption}
maxHeadingLevel={maxHeadingLevelOption}
{...props}
/>
</div>
);
};

export default TOCItemsWrapper;
3 changes: 3 additions & 0 deletions docs/src/theme/TOCItems/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[data-theme='light'] .TOCItemsWrapper > div {
background-color: var(--swm-cornflower-20);
}

0 comments on commit c7ad6ae

Please sign in to comment.