Merge pull request mouseless#59 from cihandeniz/issue/primevue-tailwind

Issue  PrimeVue & Tailwind

.theme/composables/useGitHub.js

@@ -1,14 +1,13 @@
-import { joinURL } from "ufo";
-
 export default function() {
-  const urlBase = "https://api.github.com";
+  const { public: { gitHubBaseURL: baseURL } } = useRuntimeConfig();
 
   async function getContributorStats(repository) {
     // Look here for response detail and headers =>
     // https://docs.github.com/en/rest/metrics/statistics?apiVersion=2022-11-28#get-all-contributor-commit-activity
     return await $fetch(
-      joinURL(urlBase, "repos", repository, "stats/contributors"),
+      `repos/${repository}/stats/contributors`,
       {
+        baseURL,
         method: "GET",
         headers: {
           "X-GitHub-Api-Version": "2022-11-28"
@@ -21,8 +20,9 @@ export default function() {
     // Look here for response detail and headers =>
     // https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#get-a-repository
     return await $fetch(
-      joinURL(urlBase, "repos", repository),
+      `repos/${repository}`,
       {
+        baseURL,
         method: "GET",
         headers: {
           "X-GitHub-Api-Version": "2022-11-28"
@@ -35,8 +35,9 @@ export default function() {
     // Look here for response detail and headers =>
     // https://docs.github.com/en/rest/orgs/orgs?apiVersion=2022-11-28#get-an-organization
     return await $fetch(
-      joinURL(urlBase, "orgs", organization),
+      `orgs/${organization}`,
       {
+        baseURL,
         method: "GET",
         headers: {
           "X-GitHub-Api-Version": "2022-11-28"

.theme/nuxt.config.ts

@@ -1,6 +1,5 @@
 import { joinURL } from "ufo";
 
-// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
     baseURL: process.env.NUXT_PUBLIC_BASE_URL,
@@ -41,6 +40,7 @@ export default defineNuxtConfig({
       ]
     }
   },
+  compatibilityDate: "2024-10-10",
   components: {
     dirs: [{ global: true, path: "~/components/Prose" }, "~/components"]
   },
@@ -108,7 +108,8 @@ export default defineNuxtConfig({
           }
         }
       },
-      baseUrl: ""
+      baseUrl: "",
+      gitHubBaseURL: "https://api.github.com"
     }
   },
   vite: {

Makefile

@@ -8,10 +8,10 @@ run:
 	echo "Please select 1-4: " ; \
 	read srv ; \
 	if test $$srv -eq "1" ; then \
-		cd .theme ; npm run dev ; cd .. ; \
+		cd .theme ; npm run -s dev ; cd .. ; \
 	fi ; \
 	if test $$srv -eq "2" ; then \
-		cd .theme ; npm run local ; cd .. ; \
+		cd .theme ; npm run -s local ; cd .. ; \
 	fi
 build:
 	@ \
@@ -21,8 +21,8 @@ build:
 	echo "Please select 1-2: " ; \
 	read srv ; \
 	if test $$srv -eq "1" ; then \
-		cd .theme ; npm run generate:production ; cd .. ; \
+		cd .theme ; npm run -s generate:production ; cd .. ; \
 	fi ; \
 	if test $$srv -eq "2" ; then \
-		cd .theme ; npm run generate:local ; cd .. ; \
+		cd .theme ; npm run -s generate:local ; cd .. ; \
 	fi

build-and-run.md

@@ -4,8 +4,8 @@ position: 101
 
 # Build & Run
 
-To create a static site we use `nuxt generate`, to run the project in
-development mode we use `nuxt dev`.
+To create a static site we use `nuxi generate`, to run the project in
+development mode we use `nuxi dev`.
 
 For unix-like systems use `Makefile`;
 
@@ -42,8 +42,8 @@ flowchart TB
         direction LR
         E(eslint) --> P(prebuild)
     end
-    setup -->|nuxt generate| SWS(static web site)
-    setup -->|nuxt dev| OS(running on server)
+    setup -->|nuxi generate| SWS(static web site)
+    setup -->|nuxi dev| OS(running on server)
 ```
 
 ## `package.json` Configuration
@@ -54,17 +54,17 @@ edit to run processes such as [Eslint][], [Prebuild][].
 ### Argument Passing/Parsing
 
 We took help from arguments to reduce repetitive steps and to improve with
-parameters in scripts. Look at `.theme/package.json` to see use.
+parameters in scripts. Have a look at `.theme/package.json` to see use.
 
-We used [cross-var](https://www.npmjs.com/package/cross-var) to avoid using
+We used [cross-env](https://npmjs.com/package/cross-env) to avoid using
 different syntax for different operating systems.
 
 ### Using `npx`
 
-We run packages like [Eslint][] and [http-server][] with `npx`, which can be
-used without installing them to reduce dependencies locally. Look at
-`.theme/package.json` to see use.
+We run [http-server][] package via `npx`, which allows it to be used without
+installing to reduce dependencies. Have a look at `.theme/package.json` to see
+use.
 
 [Eslint]: https://eslint.org/
-[http-server]: https://www.npmjs.com/package/http-server
 [Prebuild]: https://github.com/mouseless/prebuild
+[http-server]: https://www.npmjs.com/package/http-server

components.md

@@ -180,4 +180,87 @@ the fetched data.
 See [demo/pinia](/demo/pinia) for demo of how we use the Pinia store to add and
 import data.
 
+## PrimeVue
+
+We use [PrimeVue][primevue] for app development. Install it using below script;
+
+```bash
+npm i primevue primeicons @primevue/themes # base packages
+npm i chart.js # to enable Chart component
+npm i --save-dev @primevue/nuxt-module @nuxtjs/tailwindcss # dev dependencies
+```
+
+To use prime icons you need to import it in `assets/styles.scss`.
+
+```scss
+@import "primeicons/primeicons.css";
+```
+
+Finally `nuxt.config.ts` should include below configurations;
+
+```typescript
+import Aura from "@primevue/themes/aura";
+
+export default defineNuxtConfig({
+  ...
+  modules: [
+    ...
+    "@nuxtjs/tailwindcss",
+    "@primevue/nuxt-module",
+    ...
+  ],
+  primevue: {
+    options: {
+      theme: {
+        preset: Aura
+      }
+    },
+    autoImport: true
+  },
+  ...
+});
+```
+
+### Customizing Themes
+
+To make customizations in a theme, include `definePreset` and use a theme as a
+base, e.g., `Aura`.
+
+```typescript
+import Aura from "@primevue/themes/aura";
+import { definePreset } from "@primevue/themes";
+
+const Mouseless = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: "{red.50}",
+      ...
+      950: "{red.950}"
+    }
+  }
+});
+
+export default defineNuxtConfig({
+  ...
+  primevue: {
+    options: {
+      theme: {
+        preset: Mouseless
+      }
+    }
+  },
+  ...
+});
+```
+
+See https://primevue.org/theming/styled/#customization for detailed official
+docs.
+
+> [!NOTE]
+>
+> This site currently does not use [PrimeVue][primevue] and [Tailwind
+> CSS][tailwindcss].
+
 [pinia]: https://pinia.vuejs.org/ssr/nuxt.html
+[primevue]: https://primevue.org/nuxt/
+[tailwindcss]: https://tailwindcss.com/docs/installation