✨ Work in progress

2026-01-14 09:24:23 +01:00 · 2021-09-03 20:21:02 +02:00
parent b7fbcaab4b
commit c936e71806
8 changed files with 138 additions and 1 deletions
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@tailwindcss/forms": "^0.3.3",
    "@types/node": "^16.6.1",
    "@types/vue-router": "^2.0.0",
+    "axios": "^0.21.1",
    "prismjs": "^1.24.1",
    "reflect-metadata": "^0.1.13",
    "sass": "^1.38.0",
--- a/src/assets/discord-background.png
+++ b/src/assets/discord-background.png
--- a/src/assets/discord-logo-white.svg
+++ b/src/assets/discord-logo-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 71 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M60.105,13.898C55.579,11.821 50.727,10.292 45.653,9.415C45.56,9.399 45.468,9.441 45.42,9.525C44.796,10.635 44.105,12.083 43.621,13.222C38.164,12.405 32.734,12.405 27.389,13.222C26.905,12.058 26.189,10.635 25.562,9.525C25.514,9.444 25.422,9.401 25.329,9.415C20.258,10.289 15.406,11.819 10.878,13.898C10.838,13.915 10.805,13.943 10.783,13.98C1.578,27.731 -0.944,41.144 0.293,54.391C0.299,54.456 0.335,54.518 0.386,54.558C6.459,59.017 12.341,61.725 18.115,63.52C18.207,63.548 18.305,63.514 18.364,63.438C19.73,61.573 20.947,59.606 21.991,57.538C22.052,57.417 21.994,57.274 21.868,57.226C19.937,56.493 18.098,55.6 16.329,54.586C16.189,54.504 16.178,54.304 16.307,54.208C16.679,53.929 17.051,53.639 17.407,53.346C17.471,53.293 17.561,53.281 17.636,53.315C29.256,58.62 41.835,58.62 53.318,53.315C53.394,53.279 53.483,53.29 53.55,53.343C53.906,53.636 54.278,53.929 54.653,54.208C54.782,54.304 54.773,54.504 54.633,54.586C52.865,55.62 51.026,56.493 49.092,57.223C48.966,57.271 48.91,57.417 48.972,57.538C50.038,59.603 51.255,61.57 52.596,63.435C52.652,63.514 52.753,63.548 52.845,63.52C58.646,61.725 64.529,59.017 70.602,54.558C70.655,54.518 70.689,54.459 70.694,54.394C72.175,39.079 68.215,25.776 60.197,13.982C60.177,13.943 60.144,13.915 60.105,13.898ZM23.726,46.325C20.228,46.325 17.345,43.114 17.345,39.169C17.345,35.225 20.172,32.013 23.726,32.013C27.308,32.013 30.163,35.253 30.107,39.169C30.107,43.114 27.28,46.325 23.726,46.325ZM47.318,46.325C43.82,46.325 40.937,43.114 40.937,39.169C40.937,35.225 43.764,32.013 47.318,32.013C50.9,32.013 53.755,35.253 53.699,39.169C53.699,43.114 50.9,46.325 47.318,46.325Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>
--- a/src/assets/discord-logo.svg
+++ b/src/assets/discord-logo.svg
@@ -0,0 +1,3 @@
+<svg width="71" height="80" viewBox="0 0 71 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.1045 13.8978C55.5792 11.8214 50.7265 10.2916 45.6527 9.41542C45.5603 9.39851 45.468 9.44077 45.4204 9.52529C44.7963 10.6353 44.105 12.0834 43.6209 13.2216C38.1637 12.4046 32.7345 12.4046 27.3892 13.2216C26.905 12.0581 26.1886 10.6353 25.5617 9.52529C25.5141 9.44359 25.4218 9.40133 25.3294 9.41542C20.2584 10.2888 15.4057 11.8186 10.8776 13.8978C10.8384 13.9147 10.8048 13.9429 10.7825 13.9795C1.57795 27.7309 -0.943561 41.1443 0.293408 54.3914C0.299005 54.4562 0.335386 54.5182 0.385761 54.5576C6.45866 59.0174 12.3413 61.7249 18.1147 63.5195C18.2071 63.5477 18.305 63.5139 18.3638 63.4378C19.7295 61.5728 20.9469 59.6063 21.9907 57.5383C22.0523 57.4172 21.9935 57.2735 21.8676 57.2256C19.9366 56.4931 18.0979 55.6 16.3292 54.5858C16.1893 54.5041 16.1781 54.304 16.3068 54.2082C16.679 53.9293 17.0513 53.6391 17.4067 53.3461C17.471 53.2926 17.5606 53.2813 17.6362 53.3151C29.2558 58.6202 41.8354 58.6202 53.3179 53.3151C53.3935 53.2785 53.4831 53.2898 53.5502 53.3433C53.9057 53.6363 54.2779 53.9293 54.6529 54.2082C54.7816 54.304 54.7732 54.5041 54.6333 54.5858C52.8646 55.6197 51.0259 56.4931 49.0921 57.2228C48.9662 57.2707 48.9102 57.4172 48.9718 57.5383C50.038 59.6034 51.2554 61.5699 52.5959 63.435C52.6519 63.5139 52.7526 63.5477 52.845 63.5195C58.6464 61.7249 64.529 59.0174 70.6019 54.5576C70.6551 54.5182 70.6887 54.459 70.6943 54.3942C72.1747 39.0791 68.2147 25.7757 60.1968 13.9823C60.1772 13.9429 60.1437 13.9147 60.1045 13.8978ZM23.7259 46.3253C20.2276 46.3253 17.3451 43.1136 17.3451 39.1693C17.3451 35.225 20.1717 32.0133 23.7259 32.0133C27.308 32.0133 30.1626 35.2532 30.1066 39.1693C30.1066 43.1136 27.28 46.3253 23.7259 46.3253ZM47.3178 46.3253C43.8196 46.3253 40.9371 43.1136 40.9371 39.1693C40.9371 35.225 43.7636 32.0133 47.3178 32.0133C50.9 32.0133 53.7545 35.2532 53.6986 39.1693C53.6986 43.1136 50.9 46.3253 47.3178 46.3253Z" fill="#5865F2"/>
+</svg>
--- a/src/components/CtaSplitImage.vue
+++ b/src/components/CtaSplitImage.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="relative py-16 bg-white dark:bg-gray-900">
+    <div class="hidden absolute top-0 inset-x-0 h-1/2 lg:block" aria-hidden="true" />
+    <div class="max-w-7xl mx-auto lg:bg-transparent lg:px-8">
+      <div class="lg:grid lg:grid-cols-12">
+        <div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
+          <div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
+            <div class=" bg-blue-900 rounded-xl aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1.5">
+              <img class="m-auto w-1/2 sm:h-1/2" src="../assets/discord-logo-white.svg" alt="Workflow" />
+            </div>
+          </div>
+        </div>
+
+        <div class="relative lg:col-start-3 lg:row-start-1 lg:col-span-10 lg:rounded-3xl lg:grid lg:grid-cols-10 lg:items-center">
+          <div class="hidden absolute inset-0 overflow-hidden rounded-3xl lg:block" aria-hidden="true">
+            <svg class="absolute bottom-full left-full transform translate-y-1/3 -translate-x-2/3 xl:bottom-auto xl:top-0 xl:translate-y-0" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
+              <defs>
+                <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                  <rect x="0" y="0" width="4" height="4" class="text-gray-700 dark:text-gray-700 opacity-50" fill="currentColor" />
+                </pattern>
+              </defs>
+              <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
+            </svg>
+            <svg class="absolute top-full transform -translate-y-1/3 -translate-x-1/3 xl:-translate-y-1/2" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
+              <defs>
+                <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                  <rect x="0" y="0" width="4" height="4" class="text-gray-900 dark:text-gray-200" fill="currentColor" />
+                </pattern>
+              </defs>
+              <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
+            </svg>
+          </div>
+          <div class="relative max-w-md mx-auto py-12 px-4 space-y-6 sm:max-w-3xl sm:py-16 sm:px-6 lg:max-w-none lg:p-0 lg:col-start-4 lg:col-span-6">
+            <h2 class="text-3xl font-extrabold dark:text-white" id="join-heading">Join us on discord</h2>
+            <p class="text-lg dark:text-white">Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.</p>
+            <LinkExternal
+              href="https://discord.gg/tQebEww8zG"
+              class="block w-full py-3 px-5 text-center dark:bg-gray-600 border border-transparent rounded-md shadow-md text-base font-medium text-gray-700 hover:bg-gray-50 dark:text-white sm:inline-block sm:w-auto">
+              Explore open positions
+            </LinkExternal>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { ExternalLinkIcon } from '@heroicons/vue/solid'
+import LinkExternal from './LinkExternal.vue'
+</script>
--- a/src/components/Stats.vue
+++ b/src/components/Stats.vue
@@ -0,0 +1,69 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <div class="relative bg-gray-800 rounded-xl overflow-hidden">
+    <img class="absolute" src="../assets/discord-background.png" alt="Workflow" />
+    <div class="absolute inset-0 bg-black opacity-25"></div>
+    <div class="relative z-10 max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
+      <div class="max-w-4xl mx-auto text-center">
+        <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+          Trusted by developers from over 80 planets
+        </h2>
+        <p class="mt-3 text-xl text-indigo-200 sm:mt-4">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus repellat laudantium.
+        </p>
+      </div>
+      <dl class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
+        <div class="flex flex-col">
+          <dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">
+            Users
+          </dt>
+          <dd class="order-1 text-5xl font-extrabold text-white">
+            {{ state.userCount }}
+          </dd>
+        </div>
+        <div class="flex flex-col mt-10 sm:mt-0">
+          <dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">
+            Projects
+          </dt>
+          <dd class="order-1 text-5xl font-extrabold text-white">
+            {{ state.projectCount }}
+          </dd>
+        </div>
+        <div class="flex flex-col mt-10 sm:mt-0">
+          <dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">
+            <p>Online discord</p>
+            <p>members</p>
+          </dt>
+          <dd class="order-1 text-5xl font-extrabold text-white">
+            {{ state.discord.presence_count }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import axios from 'axios'
+
+const state = reactive({
+  userCount: 0,
+  projectCount: 0,
+  discord: {}
+})
+
+async function getData () {
+  const day = new Date()
+  const { data: users } = await axios.get(`https://api.npmjs.org/downloads/point/2020-01-01:${day.getFullYear()}-${day.getUTCMonth()}-${day.getUTCDay()}/@discord-factory/command`)
+  const { data: projects } = await axios.get(`https://api.npmjs.org/downloads/point/2020-01-01:${day.getFullYear()}-${day.getUTCMonth()}-${day.getUTCDay()}/@discord-factory/core`)
+  const { data: discord } = await axios.get('https://discord.com/api/guilds/874056537444859984/widget.json')
+
+  state.userCount = users.downloads
+  state.projectCount = projects.downloads
+  state.discord = discord
+}
+
+getData()
+
+</script>
--- a/src/templates/modules/default/Home.vue
+++ b/src/templates/modules/default/Home.vue
@@ -37,10 +37,17 @@
    <div class="max-w-6xl mx-auto">
      <CollapseDemo />
    </div>
+    <cta-split-image />
+    <div class="max-w-7xl mx-auto">
+      <Stats />
+    </div>
  </div>
 </template>

 <script setup lang="ts">
 import Hightlight from '../../../components/Hightlight.vue'
 import CollapseDemo from '../../../components/CodeDemo.vue'
+import CtaSplitImage from '../../../components/CtaSplitImage.vue'
+import Stats from '../../../components/Stats.vue'
+
 </script>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,6 +15,6 @@ export default defineConfig({
  plugins: [
    formsPlugin,
    require('@tailwindcss/forms'),
-    require('@tailwindcss/aspect-ratio'),
+    require('windicss/plugin/aspect-ratio'),
  ],
 })