Updated READMEs, bumped down versions for major bump on release

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 <project_name>
+```
+_(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)
-```
+```
+
+## 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.

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": {

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": {

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",

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
+<script lang="ts" setup>
+import { MyComponentProps } from "@/types";
+import childComponent from "./ChildComponent.vue";
+
+const props = withDefaults(defineProps<MyComponentProps>(), {
+    _components: () => {
+        return {
+            childComponent: ChildComponent,
+        }
+    }
+});
+</script>
+
+<template>
+    <component :is="props._components.childComponent" />
+</template>
+```

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",

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"
                 >
-                    <!-- unlikely scenario, but we if our secondary link points interal show an arrow not window out -->
+                    <!-- unlikely scenario, but we if our secondary link points internal show an arrow not window out -->
                     <MoveRight class="w-4 h-4" />
                 </RouterLink>
             </template>

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",

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
+<script lang="ts" setup>
+import { Literal, type LiteralProps } from "prez-components";
+
+const props = defineProps<LiteralProps>();
+const term = resolveComponent("Term") as Component;
+</script>
+
+<template>
+    <Literal v-bind="props" :_components="{term}">
+        <template #default="slotProps"><slot v-bind="slotProps" /></template>
+        <template #text="slotProps"><slot name="text" v-bind="slotProps" /></template>
+        <template #language="slotProps"><slot name="language" v-bind="slotProps" /></template>
+        <template #datatype="slotProps"><slot name="datatype" v-bind="slotProps" /></template>
+    </Literal>
+</template>
+
+```
+
+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
+
+<template>
+    <ComponentB />
+<template>
+```
+
+```vue
+// ComponentB.vue
+
+<template>
+    <ComponentC />
+<template>
+```
+
+```vue
+// ComponentC.vue
+
+<template>
+    Component C's base content
+<template>
+```
+
+If `ComponentC` was overridden in a theme, ComponentB and ComponentA will render using the new component without having to be overridden themselves.

packages/prez-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "prez-ui",
-    "version": "4.0.0",
+    "version": "3.8.4",
     "description": "A Nuxt base layer application for Prez UI",
     "license": "BSD-3-Clause",
     "type": "module",