From d27c3bd5b249ec2b3cdc2fd9d20cc4cf34234e1c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 23 Jan 2024 23:21:13 +0300
Subject: [PATCH] Add guide for CDN, menu reorg

---
 assets/menu/menu.json                        | 48 +++++++----
 doc/cdn/ComponentDoc.vue                     | 20 +++++
 doc/cdn/CreateAppDoc.vue                     | 37 +++++++++
 doc/cdn/ExampleDoc.vue                       | 57 +++++++++++++
 doc/cdn/PluginDoc.vue                        | 23 ++++++
 doc/cdn/ScriptDoc.vue                        | 25 ++++++
 doc/cdn/ThemingDoc.vue                       | 20 +++++
 doc/{guides => }/csslayer/BootstrapDoc.vue   |  0
 doc/{guides => }/csslayer/NormalizeDoc.vue   |  0
 doc/{guides => }/csslayer/ResetDoc.vue       |  0
 doc/{guides => }/csslayer/SpecificityDoc.vue |  0
 doc/{guides => }/csslayer/TailwindDoc.vue    |  0
 doc/installation/GuidesDoc.vue               | 87 ++++++++++++++++++++
 doc/nuxt/StyledModeDoc.vue                   |  2 +-
 doc/nuxt/configuration/CSSLayerOrderDoc.vue  |  2 +-
 doc/vite/StyledModeDoc.vue                   |  4 +-
 pages/cdn/index.vue                          | 64 ++++++++++++++
 pages/{guides => }/csslayer/index.vue        | 10 +--
 pages/installation/index.vue                 | 34 ++++++++
 19 files changed, 410 insertions(+), 23 deletions(-)
 create mode 100644 doc/cdn/ComponentDoc.vue
 create mode 100644 doc/cdn/CreateAppDoc.vue
 create mode 100644 doc/cdn/ExampleDoc.vue
 create mode 100644 doc/cdn/PluginDoc.vue
 create mode 100644 doc/cdn/ScriptDoc.vue
 create mode 100644 doc/cdn/ThemingDoc.vue
 rename doc/{guides => }/csslayer/BootstrapDoc.vue (100%)
 rename doc/{guides => }/csslayer/NormalizeDoc.vue (100%)
 rename doc/{guides => }/csslayer/ResetDoc.vue (100%)
 rename doc/{guides => }/csslayer/SpecificityDoc.vue (100%)
 rename doc/{guides => }/csslayer/TailwindDoc.vue (100%)
 create mode 100644 doc/installation/GuidesDoc.vue
 create mode 100644 pages/cdn/index.vue
 rename pages/{guides => }/csslayer/index.vue (85%)
 create mode 100644 pages/installation/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 5bc2b1e2f..7c9775101 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -9,16 +9,8 @@
                     "to": "/introduction"
                 },
                 {
-                    "name": "Vite Setup",
-                    "to": "/vite"
-                },
-                {
-                    "name": "Nuxt Setup",
-                    "to": "/nuxt"
-                },
-                {
-                    "name": "Configuration",
-                    "to": "/configuration"
+                    "name": "Installation",
+                    "to": "/installation"
                 },
                 {
                     "name": "Playground",
@@ -26,6 +18,38 @@
                 }
             ]
         },
+        {
+            "name": "Installation",
+            "icon": "pi pi-cloud-download",
+            "children": [
+                {
+                    "name": "Vite",
+                    "to": "/vite"
+                },
+                {
+                    "name": "Nuxt",
+                    "to": "/vite"
+                },
+                {
+                    "name": "CDN",
+                    "to": "/cdn"
+                }
+            ]
+        },
+        {
+            "name": "Configuration",
+            "icon": "pi pi-cog",
+            "children": [
+                {
+                    "name": "Options",
+                    "to": "/configuration"
+                },
+                {
+                    "name": "CSS Layer",
+                    "to": "/csslayer"
+                }
+            ]
+        },
         {
             "name": "Components",
             "icon": "pi pi-compass",
@@ -536,10 +560,6 @@
                     "name": "Accessibility",
                     "to": "/guides/accessibility"
                 },
-                {
-                    "name": "CSS Layer",
-                    "to": "/guides/csslayer"
-                },
                 {
                     "name": "PrimeTV",
                     "icon": "pi pi-youtube",
diff --git a/doc/cdn/ComponentDoc.vue b/doc/cdn/ComponentDoc.vue
new file mode 100644
index 000000000..479acad80
--- /dev/null
+++ b/doc/cdn/ComponentDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Include the component to use with a script tag.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cdn/CreateAppDoc.vue b/doc/cdn/CreateAppDoc.vue
new file mode 100644
index 000000000..00c9cfa58
--- /dev/null
+++ b/doc/cdn/CreateAppDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Create an app container element and setup the application using <i>createApp</i>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<body>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
+
+    <div id="app">
+    </div>
+
+    <script>
+        const { createApp, ref } = Vue;
+
+        const app = createApp({
+            setup() {
+
+            }
+        });
+
+        app.mount('#app');
+    <\/script>
+</body>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cdn/ExampleDoc.vue b/doc/cdn/ExampleDoc.vue
new file mode 100644
index 000000000..961799ca3
--- /dev/null
+++ b/doc/cdn/ExampleDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A complete example using a PrimeVue DatePicker. You can also view this sample live at <a href="https://stackblitz.com/edit/web-platform-xceybs?file=index.html" target="_blank" rel="noopener noreferrer">Stackblitz</a>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>PrimeVue + CDN</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />
+  </head>
+  <body>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
+    <script src="https://unpkg.com/primevue/core/core.min.js"><\/script>
+    <script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script>
+
+    <div id="app">
+      <p-datepicker v-model="date"></p-datepicker>
+      <br /><br />
+      {{ date }}
+    </div>
+
+    <script>
+      const { createApp, ref } = Vue;
+
+      const app = createApp({
+        setup() {
+          const date = ref();
+          return {
+            date,
+          };
+        },
+      });
+
+      app.use(primevue.config.default);
+      app.component('p-datepicker', primevue.calendar);
+
+      app.mount('#app');
+    <\/script>
+  </body>
+</html>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cdn/PluginDoc.vue b/doc/cdn/PluginDoc.vue
new file mode 100644
index 000000000..ab0a8ebff
--- /dev/null
+++ b/doc/cdn/PluginDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, only sets up the configuration object without affecting your
+            application.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+app.use(primevue.config.default);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cdn/ScriptDoc.vue b/doc/cdn/ScriptDoc.vue
new file mode 100644
index 000000000..289e1ed06
--- /dev/null
+++ b/doc/cdn/ScriptDoc.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            You can use PrimeVue and Vue.js from a CDN with a script tag. This approach does not involve any build step, and is suitable for enhancing static HTML. This guide uses
+            <a href="https://www.unpkg.com/" rel="noopener noreferrer">unpkg</a> however other providers such as <a href="https://www.jsdelivr.com" target="_blank" rel="noopener noreferrer">jsdeliver</a> and
+            <a href="https://cdnjs.com" target="_blank" rel="noopener noreferrer">cdnjs</a> can also be used.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+https://unpkg.com/vue@3/dist/vue.global.js
+https://unpkg.com/primevue/core/core.min.js
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cdn/ThemingDoc.vue b/doc/cdn/ThemingDoc.vue
new file mode 100644
index 000000000..408aa97cf
--- /dev/null
+++ b/doc/cdn/ThemingDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Include the theme file with a link element, see <NuxtLink to="/theming/#themes">themes</NuxtLink> section for the complete list of available themes to choose from.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/guides/csslayer/BootstrapDoc.vue b/doc/csslayer/BootstrapDoc.vue
similarity index 100%
rename from doc/guides/csslayer/BootstrapDoc.vue
rename to doc/csslayer/BootstrapDoc.vue
diff --git a/doc/guides/csslayer/NormalizeDoc.vue b/doc/csslayer/NormalizeDoc.vue
similarity index 100%
rename from doc/guides/csslayer/NormalizeDoc.vue
rename to doc/csslayer/NormalizeDoc.vue
diff --git a/doc/guides/csslayer/ResetDoc.vue b/doc/csslayer/ResetDoc.vue
similarity index 100%
rename from doc/guides/csslayer/ResetDoc.vue
rename to doc/csslayer/ResetDoc.vue
diff --git a/doc/guides/csslayer/SpecificityDoc.vue b/doc/csslayer/SpecificityDoc.vue
similarity index 100%
rename from doc/guides/csslayer/SpecificityDoc.vue
rename to doc/csslayer/SpecificityDoc.vue
diff --git a/doc/guides/csslayer/TailwindDoc.vue b/doc/csslayer/TailwindDoc.vue
similarity index 100%
rename from doc/guides/csslayer/TailwindDoc.vue
rename to doc/csslayer/TailwindDoc.vue
diff --git a/doc/installation/GuidesDoc.vue b/doc/installation/GuidesDoc.vue
new file mode 100644
index 000000000..fa4cbd3fa
--- /dev/null
+++ b/doc/installation/GuidesDoc.vue
@@ -0,0 +1,87 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="flex gap-4">
+        <div class="card">
+            <NuxtLink to="/vite">
+                <span class="images">
+                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite.svg" />
+                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite-2.svg" class="original" />
+                </span>
+                <span class="title">VITE</span>
+            </NuxtLink>
+        </div>
+        <div class="card">
+            <NuxtLink to="/nuxt">
+                <span class="images">
+                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt.svg" />
+                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt-2.svg" class="original" />
+                </span>
+                <span class="title">NUXT</span>
+            </NuxtLink>
+        </div>
+        <div class="card">
+            <NuxtLink to="/cdn">
+                <span class="images">
+                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/html.svg" />
+                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/html-2.svg" class="original" />
+                </span>
+                <span class="title">CDN</span>
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.card {
+    min-width: 15rem;
+    min-height: 15rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.card .title {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-color-secondary);
+    transition: all 0.5s;
+}
+
+.card .images {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.card img {
+    height: 62px;
+    opacity: 1;
+    transition: all 0.5s;
+}
+
+.card img.original {
+    opacity: 0;
+    margin-top: -62px;
+}
+
+.card a:hover img {
+    opacity: 0;
+}
+
+.card a:hover img.original {
+    opacity: 1;
+}
+
+.card a:hover .title {
+    color: var(--text-color);
+}
+</style>
diff --git a/doc/nuxt/StyledModeDoc.vue b/doc/nuxt/StyledModeDoc.vue
index d052bd93e..e8e9ec3a3 100644
--- a/doc/nuxt/StyledModeDoc.vue
+++ b/doc/nuxt/StyledModeDoc.vue
@@ -13,7 +13,7 @@
         <p>
             The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
             Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
-            styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for more information.
+            styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more information.
         </p>
         <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
diff --git a/doc/nuxt/configuration/CSSLayerOrderDoc.vue b/doc/nuxt/configuration/CSSLayerOrderDoc.vue
index 240c10431..b0870a689 100644
--- a/doc/nuxt/configuration/CSSLayerOrderDoc.vue
+++ b/doc/nuxt/configuration/CSSLayerOrderDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for detailed information.</p>
+        <p>Defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for detailed information.</p>
     </DocSectionText>
     <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
     <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
diff --git a/doc/vite/StyledModeDoc.vue b/doc/vite/StyledModeDoc.vue
index f4292f751..626f32642 100644
--- a/doc/vite/StyledModeDoc.vue
+++ b/doc/vite/StyledModeDoc.vue
@@ -7,8 +7,8 @@
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>
             The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
-            Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide
-            for more information.
+            Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more
+            information.
         </p>
         <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
diff --git a/pages/cdn/index.vue b/pages/cdn/index.vue
new file mode 100644
index 000000000..4c6d338dd
--- /dev/null
+++ b/pages/cdn/index.vue
@@ -0,0 +1,64 @@
+<template>
+    <Head>
+        <Title>Install PrimeVue with CDN</Title>
+        <Meta name="description" content="Setting up PrimeVue in a Vite project" />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Install PrimeVue with Vite</h1>
+                <p>Setting up PrimeVue in a Vite project.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import ComponentDoc from '@/doc/cdn/ComponentDoc.vue';
+import CreateAppDoc from '@/doc/cdn/CreateAppDoc.vue';
+import ExampleDoc from '@/doc/cdn/ExampleDoc.vue';
+import PluginDoc from '@/doc/cdn/PluginDoc.vue';
+import ScriptDoc from '@/doc/cdn/ScriptDoc.vue';
+import ThemingDoc from '@/doc/cdn/ThemingDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'script',
+                    label: 'Script',
+                    component: ScriptDoc
+                },
+                {
+                    id: 'createapp',
+                    label: 'CreateApp',
+                    component: CreateAppDoc
+                },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    component: ThemingDoc
+                },
+                {
+                    id: 'component',
+                    label: 'Component',
+                    component: ComponentDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/guides/csslayer/index.vue b/pages/csslayer/index.vue
similarity index 85%
rename from pages/guides/csslayer/index.vue
rename to pages/csslayer/index.vue
index 0c19b13fd..57c258f98 100644
--- a/pages/guides/csslayer/index.vue
+++ b/pages/csslayer/index.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import BootstrapDoc from '@/doc/guides/csslayer/BootstrapDoc.vue';
-import NormalizeDoc from '@/doc/guides/csslayer/NormalizeDoc.vue';
-import ResetDoc from '@/doc/guides/csslayer/ResetDoc.vue';
-import SpecificityDoc from '@/doc/guides/csslayer/SpecificityDoc.vue';
-import TailwindDoc from '@/doc/guides/csslayer/TailwindDoc.vue';
+import BootstrapDoc from '@/doc/csslayer/BootstrapDoc.vue';
+import NormalizeDoc from '@/doc/csslayer/NormalizeDoc.vue';
+import ResetDoc from '@/doc/csslayer/ResetDoc.vue';
+import SpecificityDoc from '@/doc/csslayer/SpecificityDoc.vue';
+import TailwindDoc from '@/doc/csslayer/TailwindDoc.vue';
 
 export default {
     data() {
diff --git a/pages/installation/index.vue b/pages/installation/index.vue
new file mode 100644
index 000000000..c0fba8045
--- /dev/null
+++ b/pages/installation/index.vue
@@ -0,0 +1,34 @@
+<template>
+    <Head>
+        <Title>Installation - PrimeVue</Title>
+        <Meta name="description" content="Installation guides for popular development environments." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Installation</h1>
+                <p>Installation guides for popular development environments.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import GuidesDoc from '@/doc/installation/GuidesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'guides',
+                    label: 'Guides',
+                    component: GuidesDoc
+                }
+            ]
+        };
+    }
+};
+</script>