파트너 머지

merge

merge

Author: narusas

ko-KR/src/partners/components/PartnerCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Partner } from './type'
-import { normalizeName, getHero, getLogo } from './utils'
+import { normalizeName, getHero, getLogo, track } from './utils'
 import Location from './PartnerLocation.vue'
 
 const { data, hero, page } = defineProps<{
@@ -9,7 +9,16 @@ const { data, hero, page } = defineProps<{
   page?: boolean
 }>()
 
-const { name, intro, region, logo, proficiencies, flipLogo } = data
+const {
+  name,
+  intro,
+  region,
+  logo,
+  hero: heroImg,
+  proficiencies,
+  flipLogo,
+  website
+} = data
 </script>
 
 <template>
@@ -20,13 +29,15 @@ const { name, intro, region, logo, proficiencies, flipLogo } = data
     :href="'/partners/' + normalizeName(name) + '.html'"
   >
     <div class="info">
-      <img
-        class="logo dark"
-        v-if="hero && flipLogo"
-        :src="getLogo(logo, flipLogo)"
-      />
-      <img class="logo" v-if="hero" :src="getLogo(logo)" />
-      <h3 v-else>{{ name }}</h3>
+      <a :href="website.url" target="_blank" @click="track">
+        <img
+          class="logo dark"
+          v-if="hero && flipLogo"
+          :src="getLogo(logo, flipLogo)"
+        />
+        <img class="logo" v-if="hero" :src="getLogo(logo)" />
+        <h3 v-else>{{ name }}</h3>
+      </a>
 
       <p class="region"><Location /> {{ region.join(', ') }}</p>
 
@@ -37,7 +48,7 @@ const { name, intro, region, logo, proficiencies, flipLogo } = data
         <span class="proficiency" v-for="p in proficiencies">{{ p }}</span>
       </p>
     </div>
-    <img class="big" :src="getHero(name)" :alt="name + ' hero'" />
+    <img class="big" :src="getHero(heroImg, name)" :alt="name + ' hero'" />
   </component>
 </template>
 

ko-KR/src/partners/components/PartnerHero.vue

@@ -6,11 +6,11 @@ const { title = 'Vue Partners' } = defineProps<{ title?: string }>()
   <div class="PartnerHero">
     <h1 class="title">{{ title }}</h1>
     <p class="lead">
-      Vue Partners are Vue-team endorsed angencies that provide first-class
-      Vue consulting and development services. If your company is
-      interested in being listed as a partner, please
+      Vue 파트너는 Vue 팀이 승인한 에이전시로서 최고 수준의
+      Vue 컨설팅 및 개발 서비스를 제공합니다. 귀사가
+      파트너로 등록하는 데 관심이 있으시면
       <a href="https://airtable.com/shrCQhat57SApJI2l" target="_blank"
-        >register your interest here</a
+        >에서 관심을 등록하세요</a
       >.
     </p>
   </div>

ko-KR/src/partners/components/PartnerList.vue

@@ -1,21 +1,54 @@
 <script setup lang="ts">
-import partners from '../partners.json'
-import { computed } from 'vue'
+import partnersRaw from '../partners.json'
+import { computed, onMounted } from 'vue'
 import PartnerCard from './PartnerCard.vue'
 import { Partner } from './type'
 
 const { filter } = defineProps<{
   filter?: (p: Partner) => boolean | undefined
 }>()
 
+let mounted = $ref(false)
+let partners = $shallowRef(partnersRaw)
+
 const filtered = computed(() =>
   filter ? (partners as Partner[]).filter(filter) : (partners as Partner[])
 )
+
+onMounted(() => {
+  mounted = true
+  const platinum = partners.filter((p) => p.platinum)
+  shuffle(platinum)
+  const normal = partners.filter((p) => !p.platinum)
+  shuffle(normal)
+  partners = [...platinum, ...normal]
+})
+
+function shuffle(array: Array<any>) {
+  let currentIndex = array.length
+  let temporaryValue
+  let randomIndex
+
+  // while there remain elements to shuffle...
+  while (currentIndex !== 0) {
+    // pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex)
+    currentIndex -= 1
+    // and swap it with the current element.
+    temporaryValue = array[currentIndex]
+    array[currentIndex] = array[randomIndex]
+    array[randomIndex] = temporaryValue
+  }
+  return array
+}
 </script>
 
 <template>
-  <div class="PartnerList">
-    <PartnerCard v-for="p in filtered" :key="p.name" :data="p" />
+  <div class="PartnerList" v-show="mounted">
+    <!-- to skip SSG since the partners are shuffled -->
+    <ClientOnly>
+      <PartnerCard v-for="p in filtered" :key="p.name" :data="p" />
+    </ClientOnly>
   </div>
 </template>
 

ko-KR/src/partners/components/PartnerPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import data from '../partners.json'
 import { Partner } from './type'
-import { normalizeName } from './utils'
+import { normalizeName, track } from './utils'
 import PartnerCard from './PartnerCard.vue'
 import { VTIconChevronLeft } from '@vue/theme'
 
@@ -13,6 +13,8 @@ const p = (data as Partner[]).find(
   (p) => normalizeName(p.name) === partner
 )!
 
+const { name, description, hiring, contact, website } = p
+
 function genMailLink(email: string) {
   return `mailto:${email}?subject=Looking for a Vue.js Partner`
 }
@@ -22,26 +24,32 @@ function genMailLink(email: string) {
   <div class="partner-page">
     <div class="back">
       <a href="/partners/all.html"
-        ><VTIconChevronLeft class="icon" />Back to all partners</a
+        ><VTIconChevronLeft class="icon" />모든 파트너로 돌아가기</a
       >
     </div>
 
     <PartnerCard hero page :data="p" />
 
     <div class="description">
-      <h2>About {{ p.name }}</h2>
-      <p v-for="desc in p.description" v-html="desc"></p>
+      <h2>{{ name }}에 대하셔 </h2>
+      <p v-for="desc in description" v-html="desc"></p>
     </div>
 
     <div class="actions">
-      <a :href="p.website.url" target="_blank">Visit Website</a>
-      <a class="contact" :href="genMailLink(p.contact)" target="_blank"
-        >Contact</a
+      <a :href="website.url" target="_blank" @click="track"
+        >웹사이트 방문하기</a
+      >
+      <a
+        class="contact"
+        :href="genMailLink(contact)"
+        target="_blank"
+        @click="track"
+        >연락</a
       >
     </div>
 
-    <div class="hiring" v-if="p.hiring">
-      <a :href="p.hiring">{{ p.name }} is hiring!</a>
+    <div class="hiring" v-if="hiring">
+      <a :href="hiring" @click="track">{{ name }}은 현재 구인중입니다!</a>
     </div>
   </div>
 </template>

ko-KR/src/partners/components/type.ts

@@ -1,6 +1,7 @@
 export interface Partner {
   name: string
   logo: string
+  hero?: string
   flipLogo?: boolean
   intro: string
   description: string[]

ko-KR/src/partners/components/utils.ts

@@ -1,9 +1,13 @@
+export function track() {
+  fathom.trackGoal('TTDUIE6G', 0)
+}
+
 export function normalizeName(name: string) {
   return name.toLowerCase().replace(/\s+/g, '')
 }
 
-export function getHero(name: string) {
-  return `/images/partners/${normalizeName(name)}-hero.jpg`
+export function getHero(img: string | undefined, name: string) {
+  return `/images/partners/${img || `${normalizeName(name)}-hero.jpg`}`
 }
 
 export function getLogo(img: string, flip = false) {

ko-KR/src/partners/dreamonkey.md

@@ -0,0 +1,10 @@
+---
+page: true
+footer: false
+---
+
+<script setup>
+import Page from './components/PartnerPage.vue'
+</script>
+
+<Page partner="dreamonkey" />

ko-KR/src/partners/epicmax.md

@@ -0,0 +1,10 @@
+---
+page: true
+footer: false
+---
+
+<script setup>
+import Page from './components/PartnerPage.vue'
+</script>
+
+<Page partner="epicmax" />

ko-KR/src/partners/jump24.md

@@ -0,0 +1,10 @@
+---
+page: true
+footer: false
+---
+
+<script setup>
+import Page from './components/PartnerPage.vue'
+</script>
+
+<Page partner="jump24" />

ko-KR/src/partners/partners.json

@@ -25,7 +25,7 @@
       "url": "https://www.vehikl.com?utm_source=vue_partners_page"
     },
     "contact": "[email protected]",
-    "hiring": "www.vehikl.com/jobs/developer",
+    "hiring": "https://vehikl.com/jobs/developer/",
     "platinum": true
   },
   {
@@ -76,7 +76,7 @@
     "region": ["Europe"],
     "website": {
       "text": "www.monterail.com",
-      "url": "https://www.monterail.com/?utm_source=vuejs.org&utm_medium=referral&utm_campaign=partners"
+      "url": "https://www.monterail.com/services/vue-js-development/?utm_source=vuejs.org"
     },
     "contact": "[email protected]",
     "hiring": "https://www.monterail.com/careers?utm_source=vuejs.org&utm_medium=referral&utm_campaign=partner-hiring-link",
@@ -100,24 +100,6 @@
     "hiring": "https://www.curotec.com/careers?source=vuejs-partner",
     "platinum": true
   },
-  {
-    "name": "64 Robots",
-    "logo": "64robots.svg",
-    "intro": "We're a team of Vue / Nuxt experts creating beautifully designed, cutting edge modern applications. Whether building something new, refactoring an existing project or moving to Vue/Nuxt 3, we'll give you a personal and thoughtful approach to development.",
-    "description": [
-      "We specialize in building Laravel APIs, Vue.js 2/3 SPAs, Nuxt.js 2/3 SSR applications, and Flutter mobile applications.",
-      "We love working with companies of all sizes. We've guided early-stage, funded startups to a successful launch and helped large international companies refactor and rebuild existing products to scale into the future. Whatever your needs, we'll help you make the right technology decisions and build a polished product that will put you on the path to success.",
-      "We set ourselves apart by our level of involvement in your product. Think of us as an extension of your team. Whether augmenting an existing team or stepping in as de facto CTO to make the technical decisions, we're there for you. We're selective in the products that we take on, as we truly want to believe in our work and do everything we can to make them successful. Your success is our success."
-    ],
-    "region": ["North America", "Europe", "Africa"],
-    "proficiencies": ["Vue", "Nuxt", "Laravel", "Flutter", "Node.js"],
-    "website": {
-      "text": "64robots.com",
-      "url": "https://64robots.com/"
-    },
-    "contact": "[email protected]",
-    "platinum": true
-  },
   {
     "name": "DevSquad",
     "logo": "devsquad.png",
@@ -186,7 +168,7 @@
     "logo": "webreinvent.png",
     "intro": "WebReinvent is a software development company that provides a range of end-to-end software products, real-time apps, multi-tenant SaaS applications, low latency API & mobile app development services. We have delivered MVP to enterprise-level software globally from startup to MNC. Email us, and let's build your software product.",
     "description": [
-      "WebReinvent is a process-oriented software development company that provides a range of end-to-end software products, real-time apps, multi-tenant SaaS applications, low latency API & mobile apps development services. Our team is well versed with VueJs and its ecosystem. We have delivered MVP to enterprise-level software from startup to MNC. Not only client projects we have developed multiple open-source products which are based on VueJs. We are proud to mention that we are one of the few official Laravel & NuxtJS partners too.",
+      "WebReinvent is a process-oriented software development company that provides a range of end-to-end software products, real-time apps, multi-tenant SaaS applications, low latency API & mobile apps development services. Our team is well versed with VueJs and its ecosystem. We have delivered MVP to enterprise-level software from startup to MNC. Not only client projects we have developed multiple open-source products which are based on VueJs. We are proud to mention that we are one of the few official Laravel & Nuxt partners too.",
       "Our team loves to follow the industry standards, some of which are managing git repo, code review, release deployments via CI/CD (DevOps), automated software testing, maintaining detailed technical documentation, application performance monitoring, etc.",
       "Email us, and let's build your software product."
     ],
@@ -198,5 +180,81 @@
     },
     "contact": "[email protected]",
     "hiring": "https://webreinvent.com/career?utm_source=vuejs.org&utm_medium=website&utm_campaign=partner-hiring-link"
+  },
+  {
+    "name": "Dreamonkey",
+    "logo": "dreamonkey.png",
+    "hero": "dreamonkey-hero.png",
+    "intro": "We are an Italian software house, including international team collaborators, with 8 years of experience in software design and development. We build software from scratch or re-design it and support other companies’ teams, especially for industrial IoT, delivery, finance, medical, automotive and supply chain, working mostly for American and Canadian clients. We are proud sponsors of the Quasar framework and members of its core team.",
+    "description": [
+      "Our stack includes Vue, Quasar, Laravel and, when requested, Angular too. We strive to produce high quality, clean and well-documented code, making it rock-solid by means of automatic tests. Our frontend follows the main guidelines of Google Material Design.",
+      "We are able to lead projects from the very start to their deployment, including requirements analysis, UX/UI design, design assets hand-off, development and setup of CI/CD pipelines on AWS. We can merge with the client’s agile methodology and, when requested, we can take care of project management too with a dedicated professional.",
+      "We have experience with different project complexity, from startup to enterprise-level. We can provide static UIs, working MPVs, fully operative SPA or mobile apps. We also split our team in order to provide the client just with the specific expertise that is needed, be it development, design or just a feasibility analysis.",
+      "If you need to integrate new skills in your team, we can structure a training program focusing on development or design topics of your interest and help your employees progress with dedicated lessons."
+    ],
+    "proficiencies": [
+      "Vue",
+      "Quasar",
+      "Angular",
+      "Capacitor",
+      "Laravel",
+      "Node.js",
+      "NestJS",
+      "UX Design",
+      "AWS"
+    ],
+    "region": ["Europe", "North America"],
+    "website": {
+      "text": "dreamonkey.com",
+      "url": "https://dreamonkey.com/en/vue-partner"
+    },
+    "contact": "[email protected]",
+    "hiring": "https://dreamonkey.com/en/work-with-us"
+  },
+  {
+    "name": "Jump24",
+    "logo": "jump24.svg",
+    "flipLogo": true,
+    "hero": "jump24-hero.jpg",
+    "intro": "Hand crafted software, delivered. We work alongside start-ups, enterprises and tech teams creating bespoke web software solutions that will help them grow. Honing our skills since 2013, our strength is our people. We design and build custom applications to the highest standard, so you can reap the benefits.",
+    "description": [
+      "Jump24 is a full-circle development studio that brings ideas to life. From our base in the UK, we’ve worked closely over the years with clients in Europe and the United States, including Jamie Oliver, Admiral, InPost and Buffer. With a team of 16 developers, you’ll be in safe hands with us.",
+      "Long-lasting relationships are our speciality. Whether you’re a startup, enterprise or agency, your story is important to us. We focus on the minute details to help create something that reflects you and your business.",
+      "We’re a talkative bunch, so to find out even more about us, head to our Twitter and LinkedIn."
+    ],
+    "proficiencies": ["Vue", "Laravel", "Tailwind", "Inertia", "React"],
+    "region": ["Europe"],
+    "website": {
+      "text": "jump24.co.uk",
+      "url": "https://jump24.co.uk/vue-specialist/"
+    },
+    "contact": "[email protected]",
+    "hiring": "jump24.co.uk/careers"
+  },
+  {
+    "name": "Epicmax",
+    "logo": "epicmax.svg",
+    "hero": "epicmax.png",
+    "intro": "Epicmax is a team of Vue.js experts with 6 years of experience in building Vue.js interfaces. We bring Vue.js knowledge in front-end development across industries and geographies, serving businesses of different sizes. We have more than 55 completed projects, 45 clients worldwide and 3 Open Source products in our portfolio.",
+    "description": [
+      "Epicmax is a Vue.js software development company with over 55 successfully completed projects all over the world and 3 widely acclaimed Open Source products.",
+      "Since 2017, we’ve helped international clients in over 15 industries, both startups and larger companies, build everything from e-commerce through social media platforms to real-time analytics products.",
+      "We bring deep Vue.js knowledge necessary to help clients solve the most complex issues for their business: from building Vue.js applications to consulting, code auditing and migration to Vue. We move fast and smoothly integrate into a client’s team for agile and collaborative processes.",
+      "Epicmax is built around Open Source software - it is a part of our culture and everyone on the team is an active contributor. We’ve created and are maintaining Vuestic UI, Vuestic Admin and Epic Spinners libraries which are completely free for everyone and available on GitHub."
+    ],
+    "proficiencies": [
+      "Vue",
+      "Nuxt",
+      "TypeScript",
+      "Tailwind",
+      "Vuetify",
+      "Quasar"
+    ],
+    "region": ["Europe"],
+    "website": {
+      "text": "epicmax.co",
+      "url": "https://epicmax.co/"
+    },
+    "contact": "[email protected]"
   }
 ]