Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

m3 dynamic colors roles #289

Merged
merged 3 commits into from
Aug 20, 2024
Merged

m3 dynamic colors roles #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
019c918
tailwind-material-colors
abernier Aug 20, 2024
104c437
note icon
abernier Aug 20, 2024
487bcc5
THEME_{PRIMARY,HINT,SCHEME,CONTRAST}
abernier Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,18 @@ on:
type: string
discord:
type: string
theme_primary:
type: string
default: '#323e48'
theme_hint:
type: string
default: '#d29922'
theme_scheme:
type: string
default: 'tonalSpot'
theme_contrast:
type: string
default: '0'

jobs:
build-job:
Expand Down Expand Up @@ -58,6 +70,10 @@ jobs:
-e LOGO \
-e GITHUB \
-e DISCORD \
-e THEME_PRIMARY \
-e THEME_HINT \
-e THEME_SCHEME \
-e THEME_CONTRAST \
ghcr.io/pmndrs/docs:main npm run build
env:
BASE_PATH: ${{ steps.set-base-path.outputs.BASE_PATH }}
Expand All @@ -72,6 +88,10 @@ jobs:
LOGO: '${{ inputs.logo }}'
GITHUB: '${{ inputs.github }}'
DISCORD: '${{ inputs.discord }}'
THEME_PRIMARY: '${{ inputs.theme_primary }}'
THEME_HINT: '${{ inputs.theme_hint }}'
THEME_SCHEME: '${{ inputs.theme_scheme }}'
THEME_CONTRAST: '${{ inputs.theme_contrast }}'

- uses: actions/upload-pages-artifact@v3
with:
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/preview.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ jobs:
--build-env LOGO=gutenberg.jpg \
--build-env GITHUB="https://github.com/${{ github.repository }}" \
--build-env DISCORD="${{ secrets.DISCORD }}" \
--build-env THEME_PRIMARY="#323e48" \
--build-env THEME_HINT="#d29922" \
--build-env THEME_SCHEME="tonalSpot" \
--build-env THEME_CONTRAST="0" \
> deployment-url.txt

echo "deployment_url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ jobs:
--build-env LOGO=gutenberg.jpg \
--build-env GITHUB="https://github.com/${{ github.repository }}" \
--build-env DISCORD="${{ secrets.DISCORD }}" \
--build-env THEME_PRIMARY="#323e48" \
--build-env THEME_HINT="#d29922" \
--build-env THEME_SCHEME="tonalSpot" \
--build-env THEME_CONTRAST="0" \
> deployment-url.txt

echo "deployment_url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT
Expand Down
4 changes: 4 additions & 0 deletions docs/getting-started/github-actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ uses: pmndrs/docs/.github/workflows/build.yml@main
logo: '/logo.png'
github: 'https://github.com/pmndrs/react-three-fiber'
discord: 'https://discord.com/channels/740090768164651008/740093168770613279'
theme_primary: '#323e48'
theme_hint: '#d29922'
theme_scheme: 'tonalSpot'
theme_contrast: '0'
```

See [`pmndrs/react-three-fiber/.github/workflows/docs.yml`](https://github.com/pmndrs/react-three-fiber/blob/master/.github/workflows/docs.yml) for an example implementation.
52 changes: 36 additions & 16 deletions docs/getting-started/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,26 @@ $ npm ci

## Configuration

| var | description | example |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| `MDX`\* | Path to `*.mdx` folder<br/>NB: can be relative or absolute | `docs` or `~/code/myproject/documentation` |
| `NEXT_PUBLIC_LIBNAME`\* | Library name | `React Three Fiber` |
| `NEXT_PUBLIC_LIBNAME_SHORT` | Library short name | `r3f` |
| `BASE_PATH` | Base path for the final URL | `/react-three-fiber` |
| `DIST_DIR` | Path to the output folder ([within project](https://nextjs.org/docs/app/api-reference/next-config-js/distDir#:~:text=should%20not%20leave%20your%20project%20directory)) | `out` or `docs/out/react-three-fiber` |
| `OUTPUT` | Set to `export` for static output | `export` |
| `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction` |
| `MDX_BASEURL` | Base URL for inlining relative images | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs` |
| `EDIT_BASEURL` | Base URL for displaying "Edit this page" URLs | `https://github.com/pmndrs/react-three-fiber/edit/master/docs` |
| `NEXT_PUBLIC_URL` | Final URL of the published website | `https://pmndrs.github.io/react-three-fiber` |
| `ICON` | Emoji or image to use as (fav)icon (path local to `MDX`) | `🇨🇭` or `/icon.png` or `/favicon.ico` |
| `LOGO` | Logo src/path (either FQURL or local to `MDX` path) | `/logo.png` or `https://worldvectorlogo.com/r3f.png` |
| `GITHUB` | Github URL | `https://github.com/pmndrs/react-three-fiber` |
| `DISCORD` | Discord URL | `https://discord.com/channels/740090768164651008/740093168770613279` |
| var | description | example |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| `MDX`\* | Path to `*.mdx` folder<br/>NB: can be relative or absolute | `docs` or `~/code/myproject/documentation` |
| `NEXT_PUBLIC_LIBNAME`\* | Library name | `React Three Fiber` |
| `NEXT_PUBLIC_LIBNAME_SHORT` | Library short name | `r3f` |
| `BASE_PATH` | Base path for the final URL | `/react-three-fiber` |
| `DIST_DIR` | Path to the output folder ([within project](https://nextjs.org/docs/app/api-reference/next-config-js/distDir#:~:text=should%20not%20leave%20your%20project%20directory)) | `out` or `docs/out/react-three-fiber` |
| `OUTPUT` | Set to `export` for static output | `export` |
| `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction` |
| `MDX_BASEURL` | Base URL for inlining relative images | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs` |
| `EDIT_BASEURL` | Base URL for displaying "Edit this page" URLs | `https://github.com/pmndrs/react-three-fiber/edit/master/docs` |
| `NEXT_PUBLIC_URL` | Final URL of the published website | `https://pmndrs.github.io/react-three-fiber` |
| `ICON` | Emoji or image to use as (fav)icon (path local to `MDX`) | `🇨🇭` or `/icon.png` or `/favicon.ico` |
| `LOGO` | Logo src/path (either FQURL or local to `MDX` path) | `/logo.png` or `https://worldvectorlogo.com/r3f.png` |
| `GITHUB` | Github URL | `https://github.com/pmndrs/react-three-fiber` |
| `DISCORD` | Discord URL | `https://discord.com/channels/740090768164651008/740093168770613279` |
| `THEME_PRIMARY` | Primary accent color (see: https://tailwind-material-colors-docs.vercel.app) | `#323e48` |
| `THEME_HINT` | Hint/Note color (see: https://tailwind-material-colors-docs.vercel.app) | `#d29922` |
| `THEME_SCHEME` | Theme scheme (see: https://tailwind-material-colors-docs.vercel.app) | `content` or `expressive` or `fidelity` or `monochrome` or `neutral` or `tonalSpot` or `vibrant` |
| `THEME_CONTRAST` | Theme contrast -- value between -1 and 1 | `0` or `-1` or `1` or `-.6` |

\* Required

Expand Down Expand Up @@ -79,6 +83,10 @@ $ (
export LOGO=gutenberg.jpg
export GITHUB=https://github.com/pmndrs/docs
export DISCORD=https://discord.com/channels/740090768164651008/1264328004172255393
export THEME_PRIMARY="#323e48"
export THEME_HINT="#d29922"
export THEME_SCHEME="tonalSpot"
export THEME_CONTRAST=0

kill $(lsof -ti:"$_PORT")
npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
Expand Down Expand Up @@ -117,6 +125,10 @@ $ (
export LOGO=gutenberg.jpg
export GITHUB=https://github.com/pmndrs/docs
export DISCORD=https://discord.com/channels/740090768164651008/1264328004172255393
export THEME_PRIMARY="#323e48"
export THEME_HINT="#d29922"
export THEME_SCHEME="tonalSpot"
export THEME_CONTRAST=0

npm run build

Expand Down Expand Up @@ -156,6 +168,10 @@ $ (
export LOGO=/logo.png
export GITHUB=https://github.com/pmndrs/react-three-fiber
export DISCORD=https://discord.com/channels/740090768164651008/740093168770613279
export THEME_PRIMARY="#323e48"
export THEME_HINT="#d29922"
export THEME_SCHEME="tonalSpot"
export THEME_CONTRAST=0

rm -rf "$MDX/out"

Expand All @@ -174,6 +190,10 @@ $ (
-e LOGO \
-e GITHUB \
-e DISCORD \
-e THEME_PRIMARY \
-e THEME_HINT \
-e THEME_SCHEME \
-e THEME_CONTRAST \
pmndrs-docs npm run build

kill $(lsof -ti:"$_PORT")
Expand Down
Loading