Merge pull request #122 from burns2854/main

Add tools hub landing page

docs/.vuepress/components/DocsCardTools.vue

@@ -0,0 +1,87 @@
+<template>
+  <a :href="link" :target="isExternalLink(link) ? '_blank' : '_self'" rel="noopener noreferrer" class="card-link">
+    <div :class="['docs-card']">
+      <div :class="['card-container']">
+        <div v-if="icon" class="card-icon-row">
+          <img :src="icon" />
+        </div>
+        <div v-if="!!title || $slots.header" :class="['header']">
+          <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+          <component :is="titleTag" v-if="!!title" v-text="title" />
+        </div>
+        <div class="details">
+          {{ details }}
+        </div>
+      </div>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  title: String,
+  titleTag: { type: String, default: 'h4' },
+  icon: String,
+  link: String,
+  details: String,
+});
+
+// Function to check if a link is external
+function isExternalLink(link) {
+  return link.startsWith('http://') || link.startsWith('https://');
+}
+</script>
+
+<style scoped>
+.card-link {
+  border: 1px solid var(--c-docs-card-border);
+  border-radius: 12px;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: 400;
+  height: 100%;
+  position: relative;
+  justify-content: flex-start;
+  overflow: hidden;
+  transition: box-shadow 0.15s ease-out, transform 0.15s ease-out,
+    opacity 0.15s ease-out;
+  width: 100%;
+  box-shadow: var(--box-shadow-large);
+}
+
+@media (hover: hover) {
+  .card-link[href]:hover {
+    box-shadow: var(--c-docs-card-shadow);
+    text-decoration: none;
+  }
+}
+
+.card-link img {
+  height: 3.75rem;
+  width: 3.75rem;
+  top: 0px;
+  right: 0px;
+  border-top-right-radius: 12px;
+}
+
+.card-link :deep(h4) {
+  font-weight: 800;
+}
+
+.docs-card .header {
+  color: var(--c-text);
+}
+
+.card-container {
+  padding: 1.5rem;
+}
+.details {
+  color: var(--c-text-light);
+  font-size: 0.875rem;
+}
+.docs-card {
+  @apply flex flex-col;
+}
+</style>

docs/.vuepress/components/Tools.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="tools-container">
+    <h3>Core Tools</h3>
+    <div class="docs-cards tools-table">
+      <div v-for="tool in coreTools" :key="tool.title" class="tools-row">
+        <DocsCard
+          :title="tool.title"
+          :icon="tool.icon"
+          :link="tool.link"
+          :details="tool.details"
+          :target="_getLinkTarget(tool.link)"
+        />
+      </div>
+    </div>
+
+    <h3>Calculators and dApps</h3>
+    <h3></h3>
+    <div class="docs-cards tools-table">
+      <div v-for="tool in calculatorsAndDApps" :key="tool.title" class="tools-row">
+        <DocsCard
+          :title="tool.title"
+          :icon="tool.icon"
+          :link="tool.link"
+          :details="tool.details"
+          :target="_getLinkTarget(tool.link)"
+        />
+      </div>
+    </div>
+
+    <h3>Analytics and Dashboards</h3>
+    <h3></h3>
+    <div class="docs-cards tools-table">
+      <div v-for="tool in analyticsSites" :key="tool.title" class="tools-row">
+        <DocsCard
+          :title="tool.title"
+          :icon="tool.icon"
+          :link="tool.link"
+          :details="tool.details"
+          :target="_getLinkTarget(tool.link)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup lang="ts">
+import DocsCard from './DocsCardTools.vue';
+
+const coreTools = [
+  {
+    title: 'Batch Swaps',
+    icon: '/images/logo-balancer-white-512x512.svg',
+    details: 'Batch Swap Queries',
+    link: '/tools/core/batch-swap.html',
+  },
+  {
+    title: 'Pools',
+    icon: '/images/hero-circles.png',
+    details: 'Pool Swap, Join and Exit Queries',
+    link: '/tools/core/pools.html',
+  },
+  {
+    title: 'Smart Order Router',
+    icon: '/images/quick-link-guides.svg',
+    details: 'Query swap routes through the SOR ',
+    link: '/tools/core/smart-order-router.html',
+  },
+  // Add more Core Tools as needed
+];
+
+const calculatorsAndDApps = [
+  {
+    title: 'Xeonus and Zen Dragon Tools',
+    icon: '/images/logo-light.svg',
+    details: 'veBAL, Impermanent Loss and Price Impact Calculators - created by Xeonus and Zen Dragon',
+    link: 'https://balancer.tools/veBAL',
+  },
+  {
+    title: 'veBAL Gauge Multivoter',
+    icon: '/images/toolshub/zekraken.jpg',
+    details: 'Vote for multiple gauges in the one transaction - created by Zekraken',
+    link: 'https://vebalvoter.web.app/',
+  },
+  {
+    title: 'Internal Balances Manager',
+    icon: '/images/toolshub/balancer-symbol.svg',
+    details: 'User-friendly interface designed for traders to easily manage and interact with their internal balances within the Vault - created by Bleu',
+    link: 'https://tools.balancer.blue/internalmanager',
+  },
+  {
+    title: 'Custom Pool Metadata',
+    icon: '/images/toolshub/balancer-symbol.svg',
+    details: 'Tool for owners to be able to add custom metadata to their pools - created by Bleu',
+    link: 'https://tools.balancer.blue/metadata/',
+  },
+  {
+    title: 'Stable Swap Simulator',
+    icon: '/images/toolshub/balancer-symbol.svg',
+    details: 'Dashboard to visualize the impact of changes in the Amplification Factor on Balancer Stable-Like Pools - created by Bleu',
+    link: 'https://tools.balancer.blue/stableswapsimulator',
+  },
+  // Add more calculators and dApps as needed
+];
+
+const analyticsSites = [
+  {
+    title: 'Defilytica Analytics',
+    icon: '/images/toolshub/defilytica_simple.png',
+    details: 'Protocol, pool and token metrics. Additionally, an in-depth financial dashboard and service-provider analytics board.',
+    link: 'https://balancer.defilytica.com/',
+  },
+  {
+    title: 'Dune veBAL',
+    icon: '/images/toolshub/DuneLogoCircle.svg',
+    details: 'veBAL Dashboard',
+    link: 'https://dune.com/balancerlabs/veBAL',
+  },
+  {
+    title: 'DefiLlama',
+    icon: '/images/toolshub/defi-lama-logo.webp',
+    details: 'Balancer Dashboard',
+    link: 'https://defillama.com/protocol/balancer',
+  },
+  
+  // Add more analytics sites as needed
+];
+
+// Function to check if a link is external
+function isExternalLink(link) {
+  return link.startsWith('http://') || link.startsWith('https://');
+}
+
+// Function to get the target attribute for the link
+function _getLinkTarget(link) {
+  return isExternalLink(link) ? '_blank' : '_self';
+}
+</script>
+
+<style scoped>
+.tools-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.docs-cards {
+  grid-gap: 1.35rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  padding-bottom: 2em;
+}
+
+.tools-row {
+  /* Adjust the styles for each row of tools (DocsCard components) */
+}
+
+/* Add any additional styles as needed */
+</style>

docs/tools/README.md

@@ -1,4 +1,11 @@
 ---
 ---
 
-# Tools Hub
+## Tools Hub
+
+<Tools />
+
+
+---
+
+These tools have been developed by various teams contributing to the Balancer Ecosystem or wider DeFi through grants, as general contributors or separate platforms entirely. This hub serves as an open source repo of these tools created to help users and devs navigate, analyse and interact with the Balancer Ecosystem. This is continously growing so if you have something you think should be on this page, get in touch and add your project to the [open source repo here](https://github.com/balancer/docs/tree/main/docs/tools) for it to be added! 

docs/tools/how-to-add-new-tool.txt

@@ -0,0 +1,14 @@
+To create a new entry:
+
+1. Add project logo to dir: ./docs/.vuepress/public/images/toolshub
+
+2. Create a new entry under the appropriate section in file ./docs/.vuepress/components/Tools.vue containing:
+
+{
+  - title: (your tool's title)
+    icon: /images/toolshub/(logo filename)
+    details: (description of what your tool does)
+    link: (tool's address)
+}
+
+3. Raise a PR with comments and get in touch with the Balancer team on Discord!