Update api client and content

craftgate · Nov 9, 2023 · 6b45294 · 6b45294
1 parent e9a7f2d
commit 6b45294
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 89 deletions.
diff --git a/public/images/youtube.svg b/public/images/youtube.svg
diff --git a/src/components/footer.astro b/src/components/footer.astro
@@ -4,66 +4,94 @@ import { Image } from 'astro:assets';
 
 <footer class="bg-black">
   <div class="container flex flex-wrap gap-4 items-center justify-between py-5">
-    <a href="/">
+    <a href="https://craftgate.io">
       <Image src="/images/logo.svg" width={135} height={32} alt="Craftgate" />
     </a>
     <nav>
       <ul class="flex gap-4 text-sm">
-        <li class="flex gap-1.5 items-center">
-          <Image
-            src="/images/github.svg"
-            width={16}
-            height={16}
-            alt="Craftgate Github"
-          />
+        <li>
           <a
             href="https://github.com/craftgate"
+            class="flex gap-1.5 items-center"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Github
+            <Image
+              src="/images/github.svg"
+              width={14}
+              height={14}
+              class="h-4 w-auto"
+              alt="Craftgate Github"
+            />
+             Github
           </a>
         </li>
-        <li class="flex gap-1.5 items-center">
-          <Image
-            src="/images/x.svg"
-            width={16}
-            height={16}
-            alt="Craftgate Twitter"
-          />
+        <li>
           <a
             href="https://twitter.com/craftgateio"
+            class="flex gap-1.5 items-center"
             target="_blank"
             rel="noopener noreferrer"
-            >Twitter
+          >
+            <Image
+              src="/images/x.svg"
+              width={14}
+              height={12}
+              class="h-4 w-auto"
+              alt="Craftgate Twitter"
+            />
+             Twitter
           </a>
         </li>
-        <li class="flex gap-1.5 items-center">
-          <Image
-            src="/images/linkedin.svg"
-            width={16}
-            height={16}
-            alt="Craftgate Linkedin"
-          />
+        <li>
           <a
             href="https://www.linkedin.com/company/craftgate"
+            class="flex gap-1.5 items-center"
             target="_blank"
             rel="noopener noreferrer"
-            >Linkedin
+          >
+            <Image
+              src="/images/linkedin.svg"
+              width={14}
+              height={14}
+              class="h-4 w-auto"
+              alt="Craftgate Linkedin"
+            />
+             Linkedin
           </a>
         </li>
-        <li class="flex gap-1.5 items-center">
-          <Image
-            src="/images/instagram.svg"
-            width={16}
-            height={16}
-            alt="Craftgate Instagram"
-          />
+        <li>
           <a
             href="https://www.instagram.com/craftgateio"
+            class="flex gap-1.5 items-center"
             target="_blank"
             rel="noopener noreferrer"
-            >Instagram
+          >
+            <Image
+              src="/images/instagram.svg"
+              width={13}
+              height={14}
+              class="h-4 w-auto"
+              alt="Craftgate Instagram"
+            />
+             Instagram
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.youtube.com/@craftgateio"
+            class="flex gap-1.5 items-center"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src="/images/youtube.svg"
+              width={29}
+              height={20}
+              class="h-3.5 w-auto"
+              alt="Craftgate Youtube"
+            />
+             Youtube
           </a>
         </li>
       </ul>

diff --git a/src/components/header.astro b/src/components/header.astro
@@ -5,8 +5,8 @@ import { Image } from 'astro:assets';
 <header
   class="container flex flex-wrap gap-4 items-center justify-between py-5"
 >
-  <a href="/">
-    <Image src="/images/logo.svg" width={135} height={32} alt="Craftgate" />
+  <a href="https://craftgate.io">
+    <Image src="/images/logo.svg" width={145} height={37} alt="Craftgate" />
   </a>
   <nav>
     <ul class="flex gap-8 font-medium">

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,14 +2,16 @@
 import Layout from '@/layouts/layout.astro';
 import Hero from '@/views/hero.astro';
 import OpenSourceProjects from '@/views/open-source-projects.astro';
+import CommunityProjects from '@/views/community-projects.astro';
 import Team from '@/views/team.astro';
 ---
 
 <Layout
   title="Open Source | Craftgate"
-  description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque perspiciatis officia architecto provident, impedit in voluptatibus consequuntur iure recusandae suscipit!"
+  description="Craftgate is a 'One-Stop Shop' payment orchestration platform where you can easily integrate and manage Virtual POS of all banks of your business as well as many other payment and e-money institutions, alternative and international payment methods from a single center."
 >
   <Hero />
   <OpenSourceProjects />
+  <CommunityProjects />
   <Team />
 </Layout>
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -11,3 +11,8 @@ export type GithubUser = {
   avatar_url: string;
   html_url: string;
 };
+
+export type CommunityProject = {
+  user: GithubUser;
+  repo: GithubRepo;
+};
diff --git a/src/utils/api-client.ts b/src/utils/api-client.ts
@@ -0,0 +1,17 @@
+const API_TOKEN = import.meta.env.API_TOKEN;
+
+const get = async (url: string) => {
+  const response = await fetch(url, {
+    headers: {
+      Accept: 'application/vnd.github+json',
+      Authorization: `Bearer ${API_TOKEN}`,
+      'X-GitHub-Api-Version': '2022-11-28',
+    },
+  });
+
+  return response.json();
+};
+
+export const apiClient = {
+  get,
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './api-client';
diff --git a/src/views/community-projects.astro b/src/views/community-projects.astro
@@ -0,0 +1,55 @@
+---
+import type { GithubRepo } from '@/types';
+import { apiClient } from '@/utils';
+
+import RepoCard from '@/components/repo-card.astro';
+
+const PROJECTS = [
+  {
+    username: 'gklp',
+    repo: 'spring-craftgate',
+  },
+  {
+    username: 'salihbilgin',
+    repo: 'craftgatePythonClient',
+  },
+  {
+    username: 'ygunayer',
+    repo: 'craftgate-elixir-client',
+  },
+  {
+    username: 'ygunayer',
+    repo: 'craftgate-java2elixir',
+  },
+  {
+    username: 'dvtkrlbs',
+    repo: 'craftgate-rs',
+  },
+  {
+    username: 'Memo-Lee',
+    repo: 'Subscription-payment',
+  },
+  {
+    username: 'enesozturk',
+    repo: 'sticker-store',
+  },
+];
+
+const data: Array<GithubRepo> = await Promise.all(
+  PROJECTS.map(async ({ username, repo }) => {
+    return apiClient.get(`https://api.github.com/repos/${username}/${repo}`);
+  }),
+);
+---
+
+<section class="container flex flex-col gap-6 mb-24">
+  <h2 class="text-4xl text-center">Community Projects</h2>
+  <p class="text-2xl text-center font-light mb-8">
+    Our commitment to open-source projects invites collaboration and collective
+    ingenuity, driving technology forward for everyone. Never hesitate to jump
+    into them and explore new ways of improvement and innovation.
+  </p>
+  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+    {data.map((repo) => <RepoCard {...repo} />)}
+  </div>
+</section>
diff --git a/src/views/hero.astro b/src/views/hero.astro
@@ -6,12 +6,14 @@ import { Image } from 'astro:assets';
   class="container grid grid-cols-1 lg:grid-cols-2 gap-4 items-center py-8 mb-16"
 >
   <div class="flex flex-col gap-8">
-    <h1 class="text-5xl sm:whitespace-nowrap">Craftgate | Open Source</h1>
+    <h1 class="text-5xl sm:whitespace-nowrap">Open Source | Craftgate</h1>
     <p class="text-2xl font-light">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. assa amet,
-      tristique purus aliquam in viverra leo. Sit volutpat at sed aenean
-      fermentum. Metus, eleifend quisque pharetra, Sit volutpat at sed aenean
-      fermentum. Metus, eleifend quisque
+      Craftgate is a 'One-Stop Shop' payment orchestration platform where you
+      can easily integrate and manage Virtual POS of all banks of your business
+      as well as many other payment and e-money institutions, alternative and
+      international payment methods from a single center. With Craftgate, you
+      can quickly benefit from many value-added services. Thus, you can focus on
+      growing your core business while reducing costs with Craftgate.
     </p>
   </div>
   <Image

diff --git a/src/views/open-source-projects.astro b/src/views/open-source-projects.astro
@@ -1,21 +1,25 @@
 ---
-import RepoCard from '@/components/repo-card.astro';
 import type { GithubRepo } from '@/types';
+import { apiClient } from '@/utils';
+
+import RepoCard from '@/components/repo-card.astro';
 
-const API_TOKEN = import.meta.env.API_TOKEN;
+const HIDDEN_REPOS = ['action-send-mail', '.github'];
 
-const response = await fetch('https://api.github.com/orgs/craftgate/repos', {
-  headers: {
-    Accept: 'application/vnd.github+json',
-    Authorization: `Bearer ${API_TOKEN}`,
-    'X-GitHub-Api-Version': '2022-11-28',
-  },
-});
-const data: Array<GithubRepo> = await response.json();
+const data = await apiClient
+  .get('https://api.github.com/orgs/craftgate/repos')
+  .then((res: Array<GithubRepo>) =>
+    res.filter((repo) => !HIDDEN_REPOS.includes(repo.name)),
+  );
 ---
 
-<section class="container flex flex-col gap-12 mb-24">
+<section class="container flex flex-col gap-6 mb-24">
   <h2 class="text-4xl text-center">Open Source Projects</h2>
+  <p class="text-2xl text-center font-light mb-8">
+    Our software crafters designed and implemented so many libraries that our
+    merchants can easily integrate Craftgate API into their platforms. Please
+    checkout our public repositories hosted in our Github organization.
+  </p>
   <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
     {data.map((repo) => <RepoCard {...repo} />)}
   </div>

diff --git a/src/views/team.astro b/src/views/team.astro
@@ -1,49 +1,35 @@
 ---
-import TeamMemberCard from '@/components/team-member-card.astro';
 import type { GithubUser } from '@/types';
+import { apiClient } from '@/utils';
+
+import TeamMemberCard from '@/components/team-member-card.astro';
 
-const API_TOKEN = import.meta.env.API_TOKEN;
-const USERNAMES = [
-  'abalikci',
-  'AlicanAkkus',
-  'deryacakmak',
-  'hakanerdogan',
-  'kadirtaskiran',
-  'lemiorhan',
-  'MasterSlave',
-  'melihmutcali',
-  'mhasanince',
-  'onurpolattimur',
-  'reywyn',
-  'semihshn',
-  'sotuzun',
-  'tuncaserhat',
+const HIDDEN_MEMBERS = [
+  'craftgate-sdlc',
+  'emirgundem',
+  'merveylmaaz90',
+  'ozturkselin',
 ];
 
-const response = await Promise.all(
-  USERNAMES.map((username) =>
-    fetch(`https://api.github.com/users/${username}`, {
-      headers: {
-        Accept: 'application/vnd.github+json',
-        Authorization: `Bearer ${API_TOKEN}`,
-        'X-GitHub-Api-Version': '2022-11-28',
-      },
-    }),
-  ),
-);
-const data: Array<GithubUser> = await Promise.all(
-  response.map((res) => res.json()),
-);
+const data = await apiClient
+  .get('https://api.github.com/orgs/craftgate/members')
+  .then((res: Array<Omit<GithubUser, 'name'>>) =>
+    res.filter((member) => !HIDDEN_MEMBERS.includes(member.login)),
+  )
+  .then((members) => {
+    return Promise.all(
+      members.map(async (member) => {
+        return apiClient.get(`https://api.github.com/users/${member.login}`);
+      }),
+    );
+  });
 ---
 
 <section class="container flex flex-col gap-6 mb-24">
-  <h2 class="text-4xl text-center">Team</h2>
+  <h2 class="text-4xl text-center">Our Engineering Team</h2>
   <p class="text-2xl text-center font-light mb-8">
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat expedita
-    repellat eaque, qui odio earum officiis harum quam animi accusamus
-    voluptatum obcaecati laboriosam alias, veritatis ipsum, autem culpa iure.
-    Sint repellat autem nisi facere illo perspiciatis cumque impedit doloremque
-    voluptate.
+    Craftgate is a tech company that focuses on the fintech industry. We are
+    working with high-qualified software engineers who have deep knowledge
   </p>
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
     {data.map((user) => <TeamMemberCard {...user} />)}

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -12,6 +12,13 @@ module.exports = {
         center: true,
       },
     },
+    screens: {
+      xs: '425px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
   },
   plugins: [],
 };