docs: ⚡ added contributors

2026-04-17 19:26:23 +00:00 · 2022-12-27 20:48:58 +01:00
parent 484c8c3bde
commit 7f437d0587
8 changed files with 238 additions and 61 deletions
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -20,10 +20,11 @@
    "qwik": "qwik"
  },
  "devDependencies": {
-    "@builder.io/qwik": "0.15.0",
+    "@builder.io/qwik": "0.16.1",
    "@builder.io/qwik-city": "0.0.128",
    "@fontsource/inter": "^4.5.14",
    "@iconify-json/tabler": "^1.1.49",
+    "@octokit/core": "^4.1.0",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/line-clamp": "^0.3.1",
--- a/packages/docs/src/components/icons/IconArrowDownRight.tsx
+++ b/packages/docs/src/components/icons/IconArrowDownRight.tsx
@@ -18,10 +18,6 @@ export const IconArrowDownRight = (props: ItemProps) => {
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
-        >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <line x1="7" y1="7" x2="17" y2="17"></line>
-            <polyline points="17 8 17 17 8 17"></polyline>
-        </svg>
+        ></svg>
    )
 }
--- a/packages/docs/src/components/widgets/CallToAction.tsx
+++ b/packages/docs/src/components/widgets/CallToAction.tsx
@@ -1,17 +1,23 @@
-import { component$ } from '@builder.io/qwik'
+import { $, component$, QwikMouseEvent } from '@builder.io/qwik'
+
+export const handleVideo = $((ev: QwikMouseEvent<HTMLVideoElement>) => {
+    const targetVideo = ev.target as HTMLVideoElement
+    targetVideo.play()
+})

 export default component$(() => {
    return (
-        <section class="relative">
-            <div class="max-w-6xl mx-auto px-4 sm:px-6">
-                <div class="py-12 md:py-20">
+        <section class="relative border-t border-gray-200 dark:border-slate-800">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6 ">
+                <div class="py-0 md:py-5">
                    <video
+                        class={'cursor-pointer'}
+                        onClick$={handleVideo}
                        style={'height:600px'}
                        width="100%"
                        height="400"
                        autoPlay
                        muted
-                        loop
                        playsInline
                    >
                        <source
--- a/packages/docs/src/components/widgets/Collaborator.tsx
+++ b/packages/docs/src/components/widgets/Collaborator.tsx
@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik'
+
+export default component$(
+    (props: {
+        user: {
+            id: number
+            login: string
+            html_url: string
+            avatar_url: string
+        }
+    }) => {
+        return (
+            <figure class="bg-gray-50 rounded p-4  dark:bg-slate-800">
+                <a href={props.user.html_url} target="_blank">
+                    <img
+                        class="w-16 h-16 rounded-full mx-auto object-cover"
+                        src={props.user.avatar_url}
+                        alt={props.user.login}
+                        width="384"
+                        height="512"
+                    />
+                </a>
+
+                <div class="pt-2 space-y-4 justify-center flex">
+                    <figcaption class="text-sm">
+                        <div class={'font-semibold'}>{props.user.login}</div>
+                    </figcaption>
+                </div>
+            </figure>
+        )
+    }
+)
--- a/packages/docs/src/components/widgets/Collaborators.tsx
+++ b/packages/docs/src/components/widgets/Collaborators.tsx
@@ -1,46 +1,61 @@
-import { component$ } from '@builder.io/qwik'
+import { component$, Resource, useResource$ } from '@builder.io/qwik'
+import Collaborator from './Collaborator'
+import { Octokit } from '@octokit/core'

-export default component$(() => {
+export const octokit = new Octokit({
+    auth: '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',
+})
+
+export const apiGetCollaborators = () =>
+    octokit.request(
+        'GET /repos/codigoencasa/bot-whatsapp/contributors{?anon,per_page,page}',
+        {
+            owner: 'OWNER',
+            repo: 'REPO',
+        }
+    )
+
+export const TaleUsers = component$((props: { users: any[] }) => {
    return (
-        <div class={'pt-4'}>
-            <div class="flex items-center space-x-2 text-base">
-                <h4 class="font-semibold text-slate-900">Contributors</h4>
-                <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">
-                    204
-                </span>
-            </div>
-            <div class="mt-3 flex -space-x-2 overflow-hidden">
-                <img
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                />
-                <img
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                />
-                <img
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
-                    alt=""
-                />
-                <img
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                />
-                <img
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                />
-            </div>
-            <div class="mt-3 text-sm font-medium">
-                <a href="#" class="text-blue-500">
-                    + 198 others
-                </a>
-            </div>
-        </div>
+        <>
+            {props.users.map((user) => (
+                <div class="col-span-2 ">
+                    {' '}
+                    <Collaborator user={user} />
+                </div>
+            ))}
+        </>
+    )
+})
+
+export default component$(() => {
+    const collaboratorsResource = useResource$(
+        async () => await (await apiGetCollaborators()).data
+    )
+
+    return (
+        <section class="relative ">
+            <div class={'px-4 py-16 mx-auto max-w-6xl lg:py-20'}>
+                <div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
+                    <p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
+                        Colaboradores
+                    </p>
+                    <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
+                        Super estrellas
+                    </h2>
+                    <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
+                        Todo es posible gracias a el mayor recursos de todos, el
+                        recurso humano. Tu tambien puedes formar parte
+                    </p>
+                </div>
+
+                <div class="grid lg:grid-cols-12 grid-cols-1 gap-4 ">
+                    <Resource
+                        value={collaboratorsResource}
+                        onResolved={(data) => <TaleUsers users={data} />}
+                    ></Resource>
+                </div>
+            </div>
+        </section>
    )
 })
--- a/packages/docs/src/contexts/index.tsx
+++ b/packages/docs/src/contexts/index.tsx
@@ -8,5 +8,3 @@ export interface DocumentationCtx {

 export const GlobalStore =
    createContext<DocumentationCtx[]>('documentation-site')
-
-export const AppSetting = createContext<{ repo: string }>('app-settings')
--- a/packages/docs/src/routes/index.tsx
+++ b/packages/docs/src/routes/index.tsx
@@ -6,6 +6,7 @@ import Features from '~/components/widgets/Features'
 import FAQs from '~/components/widgets/FAQs'
 // import Stats from '~/components/widgets/Stats'
 import CallToAction from '~/components/widgets/CallToAction'
+import Collaborators from '~/components/widgets/Collaborators'

 export default component$(() => {
    return (
@@ -13,6 +14,7 @@ export default component$(() => {
            <Hero />
            <Features />
            <CallToAction />
+            <Collaborators />
            <FAQs />
            {/* <Stats /> */}
        </>
--- a/yarn.lock
+++ b/yarn.lock
@@ -1068,12 +1068,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@builder.io/qwik@npm:0.15.0":
-  version: 0.15.0
-  resolution: "@builder.io/qwik@npm:0.15.0"
+"@builder.io/qwik@npm:0.16.1":
+  version: 0.16.1
+  resolution: "@builder.io/qwik@npm:0.16.1"
+  dependencies:
+    undici: ^5.14.0
  bin:
    qwik: qwik.cjs
-  checksum: ba78602ff735065265858c9e6164b538ed26e6815f73a598a92bfbd95d474f7267b35f3eddaf92911425b8805b8040d32946faf33a46189150f89e581083ccdd
+  checksum: 3dd65cf48ee74ebff9fc53d8745ca59c1c205099d8b37a3239c4683d940e6b0c893456d66f8e376e76e521615a54e4473aeff9f3373b50cca17fbaa13e9f9ce6
  languageName: node
  linkType: hard

@@ -1790,6 +1792,93 @@ __metadata:
  languageName: node
  linkType: hard

+"@octokit/auth-token@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "@octokit/auth-token@npm:3.0.2"
+  dependencies:
+    "@octokit/types": ^8.0.0
+  checksum: c7204770a6cb1661379c31b5a26779b509324446e61a4902893a69fd471738c817afc470f8ac8d86ad827738cc953046d27fbb87fc81782ff10e366b70241f4e
+  languageName: node
+  linkType: hard
+
+"@octokit/core@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@octokit/core@npm:4.1.0"
+  dependencies:
+    "@octokit/auth-token": ^3.0.0
+    "@octokit/graphql": ^5.0.0
+    "@octokit/request": ^6.0.0
+    "@octokit/request-error": ^3.0.0
+    "@octokit/types": ^8.0.0
+    before-after-hook: ^2.2.0
+    universal-user-agent: ^6.0.0
+  checksum: 4e53e02ff3ebe808b74385be0055cc1cce4b548060b20e3f2d5dd1bf7877ff7b6556f11278edc070842bf24aa869f9f59a02638f1b14083eb290b9e297447a2d
+  languageName: node
+  linkType: hard
+
+"@octokit/endpoint@npm:^7.0.0":
+  version: 7.0.3
+  resolution: "@octokit/endpoint@npm:7.0.3"
+  dependencies:
+    "@octokit/types": ^8.0.0
+    is-plain-object: ^5.0.0
+    universal-user-agent: ^6.0.0
+  checksum: c36b1577062e51d1683779a59c75d046d59f9a5c3a0f046d465e6c4c39f64bfc3a3052b42fa91a4552c7903ec382c604b4a2e1aadebdf7458191849ede5d4978
+  languageName: node
+  linkType: hard
+
+"@octokit/graphql@npm:^5.0.0":
+  version: 5.0.4
+  resolution: "@octokit/graphql@npm:5.0.4"
+  dependencies:
+    "@octokit/request": ^6.0.0
+    "@octokit/types": ^8.0.0
+    universal-user-agent: ^6.0.0
+  checksum: 8cf65cf7e6608cf3cbc96a2fa902172b4d5dc30e88ee0bae3711bf467a25b828b10cce1aaabb7f82a7580bfbcf7028b91d1dd1a894940945e38ca2deb6509754
+  languageName: node
+  linkType: hard
+
+"@octokit/openapi-types@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@octokit/openapi-types@npm:14.0.0"
+  checksum: 0a1f8f3be998cd82c5a640e9166d43fd183b33d5d36f5e1a9b81608e94d0da87c01ec46c9988f69cd26585d4e2ffc4d3ec99ee4f75e5fe997fc86dad0aa8293c
+  languageName: node
+  linkType: hard
+
+"@octokit/request-error@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "@octokit/request-error@npm:3.0.2"
+  dependencies:
+    "@octokit/types": ^8.0.0
+    deprecation: ^2.0.0
+    once: ^1.4.0
+  checksum: 41549554ce780de13d3421f8036635014c8dcbdf867c288526ef7b17e9d92470f33341ddadacf2868dc0181440842803484104efbe11ebfaecdaeec58871a13e
+  languageName: node
+  linkType: hard
+
+"@octokit/request@npm:^6.0.0":
+  version: 6.2.2
+  resolution: "@octokit/request@npm:6.2.2"
+  dependencies:
+    "@octokit/endpoint": ^7.0.0
+    "@octokit/request-error": ^3.0.0
+    "@octokit/types": ^8.0.0
+    is-plain-object: ^5.0.0
+    node-fetch: ^2.6.7
+    universal-user-agent: ^6.0.0
+  checksum: adbeb38807c60b53d32d9b69be0c1f861c26698bc6f5f3f7e05d26972290dc4867827dd333bdd801818c347e5723efd049a2b9848c6c8bf74a2032968dede0ff
+  languageName: node
+  linkType: hard
+
+"@octokit/types@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "@octokit/types@npm:8.0.0"
+  dependencies:
+    "@octokit/openapi-types": ^14.0.0
+  checksum: 1a0197b2c4c522ac90f145e02b3f8cb048a47f71c2c6bdbf021a03db7dd30ca92a899c0186acb401337f218efe44e60d33cc1cc68715b622bb75bc1a4e79515d
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-commonjs@npm:^23.0.2":
  version: 23.0.7
  resolution: "@rollup/plugin-commonjs@npm:23.0.7"
@@ -2780,6 +2869,13 @@ __metadata:
  languageName: node
  linkType: hard

+"before-after-hook@npm:^2.2.0":
+  version: 2.2.3
+  resolution: "before-after-hook@npm:2.2.3"
+  checksum: a1a2430976d9bdab4cd89cb50d27fa86b19e2b41812bf1315923b0cba03371ebca99449809226425dd3bcef20e010db61abdaff549278e111d6480034bebae87
+  languageName: node
+  linkType: hard
+
 "bignumber.js@npm:^2.1.0":
  version: 2.4.0
  resolution: "bignumber.js@npm:2.4.0"
@@ -4180,6 +4276,13 @@ __metadata:
  languageName: node
  linkType: hard

+"deprecation@npm:^2.0.0":
+  version: 2.3.1
+  resolution: "deprecation@npm:2.3.1"
+  checksum: f56a05e182c2c195071385455956b0c4106fe14e36245b00c689ceef8e8ab639235176a96977ba7c74afb173317fac2e0ec6ec7a1c6d1e6eaa401c586c714132
+  languageName: node
+  linkType: hard
+
 "dequal@npm:^2.0.0":
  version: 2.0.3
  resolution: "dequal@npm:2.0.3"
@@ -6905,6 +7008,13 @@ __metadata:
  languageName: node
  linkType: hard

+"is-plain-object@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "is-plain-object@npm:5.0.0"
+  checksum: e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c
+  languageName: node
+  linkType: hard
+
 "is-potential-custom-element-name@npm:^1.0.1":
  version: 1.0.1
  resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -8747,7 +8857,7 @@ __metadata:
  languageName: node
  linkType: hard

-"node-fetch@npm:^2.6.1":
+"node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
  version: 2.6.7
  resolution: "node-fetch@npm:2.6.7"
  dependencies:
@@ -10099,10 +10209,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "qwind@workspace:packages/docs"
  dependencies:
-    "@builder.io/qwik": 0.15.0
+    "@builder.io/qwik": 0.16.1
    "@builder.io/qwik-city": 0.0.128
    "@fontsource/inter": ^4.5.14
    "@iconify-json/tabler": ^1.1.49
+    "@octokit/core": ^4.1.0
    "@tailwindcss/aspect-ratio": ^0.4.0
    "@tailwindcss/forms": ^0.5.3
    "@tailwindcss/line-clamp": ^0.3.1
@@ -11947,6 +12058,15 @@ __metadata:
  languageName: node
  linkType: hard

+"undici@npm:^5.14.0":
+  version: 5.14.0
+  resolution: "undici@npm:5.14.0"
+  dependencies:
+    busboy: ^1.6.0
+  checksum: 7a076e44d84b25844b4eb657034437b8b9bb91f17d347de474fdea1d4263ce7ae9406db79cd30de5642519277b4893f43073258bcc8fed420b295da3fdd11b26
+  languageName: node
+  linkType: hard
+
 "unicode-properties@npm:^1.3.1":
  version: 1.4.1
  resolution: "unicode-properties@npm:1.4.1"
@@ -12081,6 +12201,13 @@ __metadata:
  languageName: node
  linkType: hard

+"universal-user-agent@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "universal-user-agent@npm:6.0.0"
+  checksum: 5092bbc80dd0d583cef0b62c17df0043193b74f425112ea6c1f69bc5eda21eeec7a08d8c4f793a277eb2202ffe9b44bec852fa3faff971234cd209874d1b79ef
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^0.1.0":
  version: 0.1.2
  resolution: "universalify@npm:0.1.2"