diff --git a/README.md b/README.md index 5738d77..7a8444c 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,31 @@ # Prez UI +Prez UI is the front end of [Prez](https://github.com/RDFLib/prez) - a linked data API - and is a suite of packages to interact with and render RDF in JavaScript. -The new structure is as follows: -- docs: will contain install instructions, how to use, etc. -- examples: will contain a few different use cases of using the various libraries -- packages - - `prez-lib`: the JS library containing RDF processing logic - - `prez-components`: the Vue component library - - `prez-ui`: the base Nuxt application - - `create-prez-app`: a NPX starter template for initialising a Prez UI theme +## Contents +- [Running Prez UI](#running-prez-ui) +- [Packages](#packages) +- [License](#license) -## How do I decide what to use? +## Running Prez UI +There are several ways to use Prez UI's suite of features. The most common way to run Prez UI is by creating a 'themed' instance using `create-prez-app`. You can do so by running: + +```bash +npx create-prez-app@latest +``` +_(Note: for pnpm, run `pnpm dlx` instead of `npx`)_ + +See the included README in the starter template from the above command, or the [theming documentation](./docs/theming.md) for more information on how to get started. + +For other use cases, see the below packages that are available. + +## Packages +Prez UI is comprised of 4 NPM packages: +- [`prez-lib`](./packages/prez-lib/): the JavaScript library containing RDF processing logic +- [`prez-components`](./packages/prez-components/): the [Vue.js](https://vuejs.org/) component library +- [`prez-ui`](./packages/prez-ui/): the base layer [Nuxt](https://nuxt.com/) application +- [`create-prez-app`](./packages/create-prez-app/): the NPX starter template for initialising a Prez UI theme + +### How do I decide what to use? ```mermaid flowchart TD @@ -19,4 +35,7 @@ flowchart TD C -->|Yes| D{I want to run Prez UI} D -->|No| E(prez-components) D -->|Yes| F(create-prez-app) -``` \ No newline at end of file +``` + +## License +This version of Prez UI and the contents of this repository are also available under the [BSD-3-Clause License](https://opensource.org/license/BSD-3-Clause). See this repository's [LICENSE](./LICENSE) file for details. diff --git a/package.json b/package.json index cb15004..ea81e9f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "prez-ui", "private": true, - "version": "4.0.0", + "version": "3.8.4", "description": "The frontend for Prez, a Linked Data API", "main": "index.js", "scripts": { diff --git a/packages/create-prez-app/package.json b/packages/create-prez-app/package.json index 3fc910a..9d314db 100644 --- a/packages/create-prez-app/package.json +++ b/packages/create-prez-app/package.json @@ -1,6 +1,6 @@ { "name": "create-prez-app", - "version": "4.0.0", + "version": "3.8.4", "description": "A starter template for creating your own themed Prez UI instance", "license": "BSD-3-Clause", "bin": { diff --git a/packages/create-prez-app/template/package.json b/packages/create-prez-app/template/package.json index 37953d8..904468b 100644 --- a/packages/create-prez-app/template/package.json +++ b/packages/create-prez-app/template/package.json @@ -1,6 +1,6 @@ { "name": "prez-ui-starter", - "version": "4.0.0", + "version": "3.8.4", "private": true, "license": "BSD-3-Clause", "type": "module", diff --git a/packages/prez-components/README.md b/packages/prez-components/README.md index ef86279..0e912b5 100644 --- a/packages/prez-components/README.md +++ b/packages/prez-components/README.md @@ -51,3 +51,51 @@ export default defineNuxtConfig({ ... }); ``` + +## Developing `prez-components` +### Install & Run + +Run in the project root: +```bash +pnpm install +``` + +and to run: +```bash +pnpm dev +``` + +### Writing Components for Overriding +To support deep overriding of components in Nuxt layers, components in this library need their prop type declared in `types.ts`, and any child component dependencies in the component library need to be declared in a `components` object in the props: + +```typescript +// types.ts +export interface MyComponentProps { + // your prop types here + _components?: { + childComponent: Component, + }; +}; +``` + +Using these child components must be done dynamically with defaults: + +```vue +// src/components/MyComponent.vue + + + +``` \ No newline at end of file diff --git a/packages/prez-components/package.json b/packages/prez-components/package.json index 9b045c9..6c63c3f 100644 --- a/packages/prez-components/package.json +++ b/packages/prez-components/package.json @@ -1,6 +1,6 @@ { "name": "prez-components", - "version": "4.0.0", + "version": "3.8.4", "description": "A Vue.js component library for rendering RDF data for use with Prez UI", "type": "module", "license": "BSD-3-Clause", diff --git a/packages/prez-components/src/components/ItemLink.vue b/packages/prez-components/src/components/ItemLink.vue index 5b43a75..c585727 100644 --- a/packages/prez-components/src/components/ItemLink.vue +++ b/packages/prez-components/src/components/ItemLink.vue @@ -116,7 +116,7 @@ const linkClass = props.class ? defaultClasses + ' ' + props.class : defaultClas :to="secondaryUrl" :title="hideTitle ? undefined : props.title" :class="linkClass" > - + diff --git a/packages/prez-lib/package.json b/packages/prez-lib/package.json index 3fc5f8d..f383906 100644 --- a/packages/prez-lib/package.json +++ b/packages/prez-lib/package.json @@ -1,6 +1,6 @@ { "name": "prez-lib", - "version": "4.0.0", + "version": "3.8.4", "description": "A JS library for processing RDF data for use with Prez UI", "type": "module", "license": "BSD-3-Clause", diff --git a/packages/prez-ui/README.md b/packages/prez-ui/README.md index e43eb6a..181fa6e 100644 --- a/packages/prez-ui/README.md +++ b/packages/prez-ui/README.md @@ -2,6 +2,8 @@ This is the Nuxt application of Prez UI as a base layer for theme extension. ## Install +We recommend you bootstrap your Prez UI instance using `create-prez-app`, which comes with `prez-ui` preinstalled. + To install this layer for extending your own Prez UI theme, run: ```bash @@ -22,3 +24,66 @@ export default defineNuxtConfig({ ``` See the [theming documentation](https://github.com/rdflib/prez-ui/blob/main/docs/theming.md) on how to customise your Prez UI theme. + +## Developing Prez UI +### Install & Run + +Run in the project root: +```bash +pnpm install +``` + +For running prez-ui, *ensure you build the workspace dependencies first* - prez-lib and prez-components. The you can run in the prez-ui directory: +```bash +pnpm dev +``` + +### Re-exporting `prez-components` Components in `prez-ui` +For supporting deep overrides in extending Prez UI's base layer, any components that are made available to Nuxt from the `prez-components` component library must be re-exported in `prez-ui/components/` in the following way: + +```vue + + + + +``` + +This takes advantage of Nuxt's auto-importing to allow for dependant components to be overridden in layer themes automatically. For example, consider the following component structure: + +```vue +// ComponentA.vue + +