Skip to content

Commit

Permalink
Improve SDK List (#146)
Browse files Browse the repository at this point in the history 
Slight improvements to the SDK component and list layout. Added icons to
differentiate which libraries are official and which are community
built. Also updated css to make images responsive.

This change addresses the need by:
* Updating the SDK component
* Updating SCSS to make images responsive
  • Loading branch information
@imRohan
imRohan authored Mar 27, 2022
1 parent 69e2e8d commit 18407ef
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 21 deletions.
2 changes: 1 addition & 1 deletion dist/src/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/src/bundle.js.map
View file

Large diffs are not rendered by default.

33 changes: 27 additions & 6 deletions src/app/components/sdk.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,55 @@ const sdk = {
platform: 'Node.js',
author: 'Team Pantry',
link: 'https://github.com/imRohan/pantry-node',
},
{
name: 'pantry-cloud',
platform: 'Node.js',
author: 'rdarida',
link: 'https://github.com/rdarida/pantry-cloud',
verified: true,
},
{
name: 'bash-client',
platform: 'Bash',
author: 'Team Pantry',
link: 'https://github.com/imRohan/Pantry/tree/master/client-libraries/Bash',
verified: true,
},
{
name: 'libPantryDotNet',
platform: '.Net',
author: 'Krutonium',
link: 'https://github.com/Krutonium/libPantryDotNet',
verified: false,
},
{
name: 'pantry-cloud',
platform: 'Node.js',
author: 'rdarida',
link: 'https://github.com/rdarida/pantry-cloud',
verified: false,
},
{
name: 'pantry_wrapper',
platform: 'Python',
author: 'alexmulligan',
link: 'https://github.com/alexmulligan/pantry_wrapper',
verified: false,
},
],
defaultBadgeClasses: `flex-shrink-0 inline-block px-2 py-0.5
text-xs font-medium
rounded-full`,
}
},
methods: {
getBadgeClass(platform: string): string {
const _platform = platform.trim().toLowerCase()
const _table: { [key: string]: string } = {
'node.js': 'bg-green-200',
'bash': 'bg-gray-200',
'python': 'bg-yellow-200',
'.net': 'bg-blue-200',
}

return _table[_platform] ?? 'bg-gray-200'
},
},
}

export = sdk
2 changes: 1 addition & 1 deletion src/app/scss/_images.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

&__hero {
width: 50%;
height: 30vw;
height: 20vw;
background-size: contain;
background-repeat: no-repeat;
z-index: 2;
Expand Down
2 changes: 1 addition & 1 deletion src/app/templates/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2 class="text-3xl font-extrabold text-orange-400 sm:text-4xl">
</span>
</div>
</div>
<div class="images__hero images--example"></div>
<div class="hidden md:block images__hero images--example"></div>
</div>
</div>
</div>
Expand Down
61 changes: 50 additions & 11 deletions src/app/templates/sdk.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,46 @@ <h1>
</span>
</h1>
<p class="mt-8 text-xl text-gray-500 leading-8">
Speed up development by integrating Pantry into your
application using one of these libraries.
Pantry has official libraries which will be maintained and supported
by the team going forward.

There are also several third-party libraries built by kind
developers (like yourself) that we'd like to showcase.
</p>

<div>
<div class="mt-8">
<ul role="list" class="mt-3 grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-2">
<template v-for="sdk in sdks">
<li class="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
<div class="w-full flex items-center justify-between p-6 space-x-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<div class="flex items-center space-x-1">
<h3 class="text-gray-900 text-sm font-medium truncate">
{{ sdk.name }}
</h3>
<span class="flex-shrink-0 inline-block px-2 py-0.5
text-green-800 text-xs font-medium
bg-green-100 rounded-full">
<template v-if="sdk.verified">
<span class="flex items-center inline-block text-xs
font-medium">
<svg class="w-3 h-3" fill="none" stroke="#1d85ff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
</path>
</svg>
<span class="ml-1">
Team Pantry
</span>
</span>
</template>
<template v-else>
<span class="text-gray-500 text-sm truncate">
by: {{ sdk.author }}
</span>
</template>
</div>
<div>
<div :class="[defaultBadgeClasses, getBadgeClass(sdk.platform)]">
{{ sdk.platform }}
</span>
</div>
</div>
<p class="mt-1 text-gray-500 text-sm truncate">
Author: {{ sdk.author }}
</p>
</div>
</div>
<div>
Expand All @@ -58,6 +75,28 @@ <h3 class="text-gray-900 text-sm font-medium truncate">
</div>
</li>
</template>

<li class="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
<a href="https://github.com/imRohan/Pantry/discussions/151"
target="_blank">
<div class="flex-1 flex flex-col pt-8 pb-4">
<div class="flex justify-center items-center
m-auto">
<svg class="w-14 h-14" fill="none" stroke="#cdcdcd" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
</div>
</div>
<div class="flex">
<div class="relative w-0 flex-1 inline-flex items-center
justify-center text-sm text-gray-700 font-medium
border border-transparent rounded-bl-lg hover:text-gray-500">
<span class="ml-3">Add Your Own</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
Expand Down

0 comments on commit 18407ef

Please sign in to comment.