From c0967df93189e3ca04fc530a9a90f4a580ad9996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 25 Jan 2024 13:51:06 +0100
Subject: [PATCH] pkp/pkp-lib#9527 Documentation WIP

---
 src/composables/useApiUrl.mdx      | 15 +++++++++++++++
 src/docs/guide/APIInteractions.mdx |  8 +++++++-
 tailwind.config.js                 |  2 +-
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/composables/useApiUrl.mdx

diff --git a/src/composables/useApiUrl.mdx b/src/composables/useApiUrl.mdx
new file mode 100644
index 000000000..5aed0586a
--- /dev/null
+++ b/src/composables/useApiUrl.mdx
@@ -0,0 +1,15 @@
+import {Meta} from '@storybook/blocks';
+
+<Meta title="Composables/useApiUrl" />
+
+# useApiUrl
+
+Simple composable to generate API URL. It correctly generates API URL based on currect context (Journal) selected. It does not cover adding query params, as query params are passed separately when making the request with [useFetch](?path=/docs/composables-usefetch--docs).
+
+```javascript
+import {useApiUrl} from '@/composables/useApiUrl';
+
+const {apiUrl: submissionApiUrl} = useApiUrl(
+	`submissions/${props.submissionId}`,
+);
+```
diff --git a/src/docs/guide/APIInteractions.mdx b/src/docs/guide/APIInteractions.mdx
index a94002610..5a926ab15 100644
--- a/src/docs/guide/APIInteractions.mdx
+++ b/src/docs/guide/APIInteractions.mdx
@@ -8,4 +8,10 @@ To interact with the API there are handy composables to simplify the process.
 
 ## Compose URL
 
-First its necessary to generate correct API URL. For that use
+Once you know which API endpoint you want to interact with, its necessary to create correct API URL based on current context. Use [useApiUrl](?path=/docs/composables-useapiurl--docs) composable to achieve that.
+
+## Making HTTP requests
+
+To make HTTP request to the API, best is use dedicated [useFetch](?path=/docs/composables-usefetch--docs) or [useFetchPaginated](?path=/docs/composables-usefetchpaginated--docs) composables. Refer to their documentation for examples.
+
+For more custom use-cases its possible to use directly underlying [ofetch](https://github.com/unjs/ofetch) package.
diff --git a/tailwind.config.js b/tailwind.config.js
index 7854d66a6..0ec4c3bf8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,7 +38,7 @@ export default {
 			...colors,
 			dark: '#222222',
 			'dark-accent': '#01354F',
-			light: '#777777',
+			light: '#505050',
 			lightest: '#FFFFFF',
 		},
 		borderColor: {