-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #911 from dpc-sdp/develop
Update docs site
- Loading branch information
Showing
215 changed files
with
7,425 additions
and
4,197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| name: studio-nuxt-build | ||
| run-name: studio nuxt build | ||
|
|
||
| on: | ||
| # Runs on pushes targeting the default branch | ||
| push: | ||
| branches: | ||
| - 'develop' | ||
|
|
||
| # Allows you to run this workflow manually from the Actions tab | ||
| workflow_dispatch: | ||
|
|
||
| # Add write workflow permissions | ||
| permissions: | ||
| contents: write | ||
|
|
||
| # Allow one concurrent deployment | ||
| concurrency: | ||
| group: 'pages' | ||
| cancel-in-progress: true | ||
|
|
||
| jobs: | ||
| # Build job | ||
| build-and-deploy: | ||
| runs-on: ${{ matrix.os }} | ||
| defaults: | ||
| run: | ||
| working-directory: docs | ||
|
|
||
| strategy: | ||
| matrix: | ||
| os: [ubuntu-latest] | ||
| node: [18] | ||
|
|
||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Identify package manager | ||
| id: pkgman | ||
| run: | | ||
| cache=`[ -f "docs/pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "docs/package-lock.json" ] && echo "npm" || ([ -f "docs/yarn.lock" ] && echo "yarn" || echo ""))` | ||
| package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"` | ||
| echo "cache=$cache" >> $GITHUB_OUTPUT | ||
| echo "package_manager=$package_manager" >> $GITHUB_OUTPUT | ||
| - uses: pnpm/[email protected] | ||
| if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }} | ||
| name: Install pnpm | ||
| id: pnpm-install | ||
| with: | ||
| version: 8.6.2 | ||
|
|
||
| - uses: actions/setup-node@v3 | ||
| with: | ||
| version: ${{ matrix.node }} | ||
| cache: ${{ steps.pkgman.outputs.cache }} | ||
|
|
||
| - name: Install dependencies | ||
| run: ${{ steps.pkgman.outputs.package_manager }} install | ||
|
|
||
| - name: Install @nuxthq/studio | ||
| run: ${{ steps.pkgman.outputs.package_manager }} add -D @nuxthq/studio | ||
|
|
||
| - name: Create .nuxtrc | ||
| run: echo '\nautoImport=true\nmodules[]=@nuxthq/studio' >> .nuxtrc | ||
|
|
||
| - name: Generate | ||
| run: npx nuxi generate | ||
| env: | ||
| NUXT_PUBLIC_STUDIO_API_URL: https://api.nuxt.studio | ||
| NUXT_PUBLIC_STUDIO_TOKENS: 7ae2515146ef474b6daa2184d4cdf98a00e724791e002e791a928ee41fe5e267 | ||
|
|
||
| - name: Add .nojekyll file | ||
| run: touch .output/public/.nojekyll | ||
|
|
||
| # Deployment job | ||
| - name: Deploy 🚀 | ||
| uses: JamesIves/github-pages-deploy-action@v4 | ||
| with: | ||
| folder: docs/.output/public |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
docs/content/design-system/3.develop/4.usage/1.access-to-github-packages.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| --- | ||
| title: Access to Github Packages | ||
| description: How to access and use repos hosted on Github Packages. | ||
| layout: page | ||
| --- | ||
|
|
||
| NPM allows the use of multiple repo hosts, as long as they can be identified by namespace. | ||
|
|
||
| Ripple 2 is hosted publicly on Github Packages (ghcr) under the **@dpc/sdp** namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem. | ||
|
|
||
| First, create a Personal Access Token on Github: | ||
|
|
||
| 1. Visit https://github.com/settings/tokens and select **Generate new token** > **Generate new token (classic)** | ||
|
|
||
| ::DocsImageExample | ||
| --- | ||
| src: /img/generate.jpg | ||
| alt: "Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic" | ||
| style: "width:360px" | ||
| --- | ||
| :: | ||
|
|
||
| 2. Fill in the **Note** and choose an **Expiration** - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry | ||
|
|
||
| ::DocsImageExample | ||
| --- | ||
| src: /img/token.jpg | ||
| alt: "Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days" | ||
| style: "width:505px" | ||
| --- | ||
| :: | ||
|
|
||
| 3. Set the scope to only allow `read:packages`, and **Generate** token | ||
|
|
||
| ::DocsImageExample | ||
| --- | ||
| src: /img/permissions.jpg | ||
| alt: "Screenshot of scope, with only read:packages selected" | ||
| style: "width:827px" | ||
| --- | ||
| :: | ||
|
|
||
| 4. Store the resulting token somewhere secure, and add it to either a user `.npmrc` (recommended) or the project-level `.npmrc` (the url on line 2 below is protocol-less, not a comment): | ||
|
|
||
| ``` | ||
| @dpc-sdp:registry=https://npm.pkg.github.com | ||
| //npm.pkg.github.com/:_authToken=<github personal access token> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| --- | ||
| title: Vue | ||
| description: How to use Ripple components with Vue. | ||
| layout: page | ||
| --- | ||
|
|
||
| First, set up [access to Github Packages](access-to-github-packages). | ||
|
|
||
| Next, install Ripple UI in your project: | ||
|
|
||
| `npm install @dpc-sdp/ripple-ui-core --save` | ||
|
|
||
| In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file): | ||
|
|
||
| ```js | ||
| import '@dpc-sdp/ripple-ui-core/style'; | ||
| import '@dpc-sdp/ripple-ui-core/style/components'; | ||
| ``` | ||
|
|
||
| To use a component, import it from `@dpc-sdp/ripple-ui-core/vue`, note the addition of `/vue`. | ||
|
|
||
| ```js | ||
| <script setup> | ||
| import { RplButton } from '@dpc-sdp/ripple-ui-core/vue'; | ||
| </script> | ||
|
|
||
| <template> | ||
| <RplButton variant="outlined" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| Please see this [example app](https://github.com/dpc-sdp/ripple-vue-example) for a basic demonstration of how to use Ripple components in a Vue app. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| --- | ||
| title: Nuxt | ||
| description: How to use Ripple components with Nuxt in a non-SDP context. | ||
| layout: page | ||
| --- | ||
|
|
||
| First, set up [access to Github Packages](access-to-github-packages). | ||
|
|
||
| Next, install Ripple UI in your project: | ||
|
|
||
| `npm install @dpc-sdp/ripple-ui-core --save` | ||
|
|
||
| Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of `/nuxt`: | ||
|
|
||
| ```js | ||
| export default defineNuxtConfig({ | ||
| modules: [ | ||
| '@dpc-sdp/ripple-ui-core/nuxt' | ||
| ] | ||
| }) | ||
| ``` | ||
|
|
||
| In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file): | ||
|
|
||
| ```js | ||
| import '@dpc-sdp/ripple-ui-core/style'; | ||
| import '@dpc-sdp/ripple-ui-core/style/components'; | ||
| ``` | ||
|
|
||
| There is no need to import the components as they will be registered globally by the nuxt module | ||
|
|
||
| ```js | ||
| <template> | ||
| <RplButton variant="outlined" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| Even if you are not using SDP, the [Ripple Framework documentation](/framework) is a good starting point for any Nuxt development using Ripple. |
Oops, something went wrong.