From 656d63d8a7ee5da9b6563cd388d1d5c92f8ae035 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 27 Jul 2024 17:43:22 +0300
Subject: [PATCH] Add contributors guide

---
 apps/showcase/assets/menu/menu.json           |  6 ++
 .../assets/styles/layout/_sidebar.scss        |  3 +-
 .../showcase/doc/contribution/BenefitsDoc.vue |  9 +++
 apps/showcase/doc/contribution/CLADoc.vue     |  8 ++
 .../doc/contribution/CommunicationDoc.vue     |  8 ++
 .../doc/contribution/HelpNeededDoc.vue        | 18 +++++
 .../doc/contribution/IntroductionDoc.vue      | 51 +++++++++++++
 .../doc/contribution/KeyPointsDoc.vue         |  8 ++
 apps/showcase/doc/contribution/PathwayDoc.vue | 13 ++++
 apps/showcase/pages/contribution/index.vue    | 74 +++++++++++++++++++
 10 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 apps/showcase/doc/contribution/BenefitsDoc.vue
 create mode 100644 apps/showcase/doc/contribution/CLADoc.vue
 create mode 100644 apps/showcase/doc/contribution/CommunicationDoc.vue
 create mode 100644 apps/showcase/doc/contribution/HelpNeededDoc.vue
 create mode 100644 apps/showcase/doc/contribution/IntroductionDoc.vue
 create mode 100644 apps/showcase/doc/contribution/KeyPointsDoc.vue
 create mode 100644 apps/showcase/doc/contribution/PathwayDoc.vue
 create mode 100644 apps/showcase/pages/contribution/index.vue

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index d28a9b256..62c496dfe 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -569,6 +569,12 @@
                 }
             ]
         },
+        {
+            "name": "Contribution",
+            "to": "/contribution",
+            "icon": "pi pi-users",
+            "badge": "NEW"
+        },
         {
             "name": "Discover",
             "icon": "pi pi-search",
diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss
index 67f449fae..242df1efa 100644
--- a/apps/showcase/assets/styles/layout/_sidebar.scss
+++ b/apps/showcase/assets/styles/layout/_sidebar.scss
@@ -157,8 +157,9 @@
             top: 50%;
             transform: translateY(-50%);
 
-            .p-tag-value {
+            .p-tag-label {
                 line-height: 1;
+                font-size: 0.75rem;
             }
         }
 
diff --git a/apps/showcase/doc/contribution/BenefitsDoc.vue b/apps/showcase/doc/contribution/BenefitsDoc.vue
new file mode 100644
index 000000000..78b80e89f
--- /dev/null
+++ b/apps/showcase/doc/contribution/BenefitsDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Contributing to PrimeVue comes with several benefits. Being part of an open-source project will enhance your career and open up exciting opportunities. Contributors and Committers will be listed on our
+            <NuxtLink to="/team">team page</NuxtLink>. You'll gain significant visibility in the developer community while improving yourself as a professional.
+        </p>
+        <p>You'll be invited to a private communication channel at Discord to get in touch with PrimeTek. In addition, contributors have access to all PrimeVue add-ons like Premium Templates, Blocks, and UI Kit free of charge.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/contribution/CLADoc.vue b/apps/showcase/doc/contribution/CLADoc.vue
new file mode 100644
index 000000000..cece3de61
--- /dev/null
+++ b/apps/showcase/doc/contribution/CLADoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue is a popular Vue UI library maintained by PrimeTek, a company renowned for its comprehensive set of UI components for various frameworks. PrimeTek is dedicated to providing high-quality, versatile, and accessible UI components
+            that help developers build better applications faster.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/contribution/CommunicationDoc.vue b/apps/showcase/doc/contribution/CommunicationDoc.vue
new file mode 100644
index 000000000..d6324b078
--- /dev/null
+++ b/apps/showcase/doc/contribution/CommunicationDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Join the Contributors channel on the PrimeLand Discord server to connect with PrimeVue staff and fellow contributors. In this channel, you can discuss the areas you want to contribute to and receive feedback. This channel is open to
+            everyone who'd like to contribute.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/contribution/HelpNeededDoc.vue b/apps/showcase/doc/contribution/HelpNeededDoc.vue
new file mode 100644
index 000000000..e579b71ac
--- /dev/null
+++ b/apps/showcase/doc/contribution/HelpNeededDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue is a community-driven project backed by the expertise and sponsorship of PrimeTek, and we appreciate any help you can provide. Here are some areas where you can contribute:</p>
+        <h3>Issue Triage</h3>
+        <p>Help us manage issues by;</p>
+        <ul class="leading-normal px-10 m-0">
+            <li>Reproducing reported bugs</li>
+            <li>Clarifying issue descriptions</li>
+            <li>Tagging issues with appropriate labels</li>
+        </ul>
+
+        <h3>Sending Pull Requests</h3>
+        <p>We encourage you to send pull requests, especially for issues tagged with the <i>help-needed</i> label.</p>
+
+        <h3>Community Support</h3>
+        <p>Assist other users by participating in the issue tracker, GitHub discussions, and the PrimeLand Discord server. Your expertise can help others solve problems and improve their experience with PrimeVue.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/contribution/IntroductionDoc.vue b/apps/showcase/doc/contribution/IntroductionDoc.vue
new file mode 100644
index 000000000..b2378212e
--- /dev/null
+++ b/apps/showcase/doc/contribution/IntroductionDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue is a popular Vue UI library maintained by PrimeTek, a company renowned for its comprehensive set of UI components for various frameworks. PrimeTek is dedicated to providing high-quality, versatile, and accessible UI components
+            that help developers build better applications faster.
+        </p>
+        <h3>Development Setup</h3>
+        <p>To begin with, clone the PrimeVue repository from GitHub:</p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+        <p>Then run the showcase in your local environment at <i>http://localhost:3000/</i>.</p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+        <h3>Project Structure</h3>
+        <p>PrimeVue utilizes a monorepo architecture, the libraries are located at <i>packages</i> folder and the website is at <i>apps/showcase</i>.</p>
+        <DocSectionCode :code="code3" hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+git clone https://github.com/primefaces/primevue.git
+cd primevue
+`
+            },
+            code2: {
+                basic: `
+npm run setup
+npm run dev
+`
+            },
+            code3: {
+                basic: `
+- apps
+  - showcase                // website
+- packages
+  - auto-import-resolver    // unplugin resolver
+  - core                    // core api
+  - icons                   // primeicons as sfc
+  - metadata                // list of components and directives
+  - nuxt-module             // module for nuxt    
+  - primevue                // main package of components and directives
+  - themes                  // presets of styled mode
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/contribution/KeyPointsDoc.vue b/apps/showcase/doc/contribution/KeyPointsDoc.vue
new file mode 100644
index 000000000..032f27217
--- /dev/null
+++ b/apps/showcase/doc/contribution/KeyPointsDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue has several add-ons such as UI Kit, Premium Templates, and Blocks that rely on design tokens and styling. Any core structural changes, such as adding new props, events, or updating design tokens, should be communicated with the
+            core team to ensure consistency and compatibility.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/contribution/PathwayDoc.vue b/apps/showcase/doc/contribution/PathwayDoc.vue
new file mode 100644
index 000000000..e30653ff7
--- /dev/null
+++ b/apps/showcase/doc/contribution/PathwayDoc.vue
@@ -0,0 +1,13 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeTek offers an organization structure involving contributors and the core team:</p>
+        <h3>Contributor Role</h3>
+        <p>After a certain period of frequent contributions, a community member is offered the Contributor role.On average, it may take about three months, but the exact duration can vary depending on the individual commitment.</p>
+
+        <h3>Committer Role</h3>
+        <p>If a contributor actively participates in the codebase and PRs, their role may be upgraded to a Committer level, providing direct commit access to the PrimeVue codebase.</p>
+
+        <h3>Employment</h3>
+        <p>PrimeTek prefers to hire team members from open source committers, so you may be offered a full-time position when a position becomes available.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/pages/contribution/index.vue b/apps/showcase/pages/contribution/index.vue
new file mode 100644
index 000000000..50147ab05
--- /dev/null
+++ b/apps/showcase/pages/contribution/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <Head>
+            <Title>Contribution - PrimeVue</Title>
+            <Meta name="description" content="Accessible Vue UI Components." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Contribution Guide</h1>
+                    <p>Welcome to the PrimeVue Contribution Guide and thank you for considering contributing.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import BenefitsDoc from '@/doc/contribution/BenefitsDoc.vue';
+import CLADoc from '@/doc/contribution/CLADoc.vue';
+import CommunicationDoc from '@/doc/contribution/CommunicationDoc.vue';
+import HelpNeededDoc from '@/doc/contribution/HelpNeededDoc.vue';
+import IntroductionDoc from '@/doc/contribution/IntroductionDoc.vue';
+import KeyPointsDoc from '@/doc/contribution/KeyPointsDoc.vue';
+import PathwayDoc from '@/doc/contribution/PathwayDoc.vue';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            docs: [
+                {
+                    id: 'introduction',
+                    label: 'Introduction',
+                    component: IntroductionDoc
+                },
+                {
+                    id: 'helpneeded',
+                    label: 'Help Needed',
+                    component: HelpNeededDoc
+                },
+                {
+                    id: 'keypoints',
+                    label: 'Key Points',
+                    component: KeyPointsDoc
+                },
+                {
+                    id: 'communication',
+                    label: 'Communication',
+                    component: CommunicationDoc
+                },
+                {
+                    id: 'pathway',
+                    label: 'Pathway',
+                    component: PathwayDoc
+                },
+                {
+                    id: 'benefits',
+                    label: 'Benefits',
+                    component: BenefitsDoc
+                },
+                {
+                    id: 'cla',
+                    label: 'CLA',
+                    component: CLADoc
+                }
+            ]
+        };
+    }
+};
+</script>