Restructured navbar and sidebar (#497)

* draft. restructured navbar and sidebar * Update packages * Text changes * Move docs and fix broken links * Redirects * Fix image imports * Add what are indexers section * Update home page * Add new homepages * feat: home page * feat: sidebar and same * Update links * feat: indexer * feat: first version * feat: home * feat: indexer * Update URLs * feat: network welcome * feat: update links & split chunks * feat: finish * feat: some links * chore: mark * Update links and style --------- Co-authored-by: James Bayly <[email protected]> Co-authored-by: cyrbuzz <[email protected]>
subquery · Apr 7, 2024 · 3b18119 · 3b18119
1 parent b5b54af
commit 3b18119
Show file tree

Hide file tree

Showing 245 changed files with 4,146 additions and 8,229 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# SubQuery Academy
+# SubQuery Documentation
 
 SubQuery enables better dApps by making decentralised data more accessible - [learn more](https://subquery.network).
 

diff --git a/docs/.vuepress/components/Banner.vue b/docs/.vuepress/components/Banner.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="flex gp24 layout mt140 bannerWithBackground"
+    :style="{
+      backgroundImage: `url('${backgroundUrl}')`,
+    }"
+  >
+    <div class="flexCol gp24">
+      <Typography
+        :tag="titleTag ? titleTag : 'h35'"
+        :font-size="titleFontSize"
+        >{{ title }}</Typography
+      >
+      <Typography
+        tag="p"
+        v-if="!Array.isArray(description)"
+        type="secondary"
+        size="large"
+        :font-size="descFontSize"
+      >
+        {{ description }}
+      </Typography>
+      <template v-else>
+        <Typography
+          tag="p"
+          v-for="desc in description"
+          type="secondary"
+          :key="desc"
+          size="large"
+          :font-size="descFontSize"
+        >
+          {{ desc }}
+        </Typography>
+      </template>
+      <div class="flex">
+        <router-link :to="{ path: buttonLink }">
+          <Button>
+            {{ buttonText }}
+          </Button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Typography from "./Typography.vue";
+import Button from "./Button.vue";
+
+defineProps<{
+  titleFontSize?: number | string;
+  descFontSize?: number | string;
+  titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "p";
+  title: string;
+  description: string | string[];
+  buttonText: string;
+  buttonLink: string;
+  backgroundUrl: string;
+}>();
+</script>
+
+<style lang="scss">
+.bannerWithBackground {
+  background: url("");
+  padding: 40px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 8px;
+  box-sizing: border-box;
+  p {
+    max-width: 551px;
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/docs/.vuepress/components/BaseCard.vue b/docs/.vuepress/components/BaseCard.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="card">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.card {
+  flex: 1;
+  background: var(--dark-mode-card);
+  border: 1px solid var(--dark-mode-border);
+  border-radius: 8px;
+  padding: 40px;
+  box-sizing: border-box;
+  color: #fff;
+  transition: all 0.2s linear;
+  height: 100%;
+
+  &:hover {
+    border: 1px solid #4388dd;
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/docs/.vuepress/components/Button.vue b/docs/.vuepress/components/Button.vue
@@ -0,0 +1,39 @@
+<template>
+  <button :class="['button', type === 'danger' ? 'buttonRed' : '']">
+    <slot></slot>
+  </button>
+</template>
+<script setup lang="ts">
+defineProps<{
+  type?: "normal" | "danger";
+}>();
+</script>
+<style lang="scss">
+.button {
+  display: flex;
+  align-items: center;
+  padding: 0 32px;
+  height: 48px;
+  line-height: 48px;
+  border-radius: 48px;
+  background: #4388dd;
+  font-weight: 400;
+  font-size: 16px;
+  color: #fff;
+  text-decoration: none !important;
+  border: none;
+  outline: none;
+  transition: all 0.2s linear;
+  cursor: pointer;
+  font-family: var(--font-family);
+}
+.button img {
+  margin-right: 8px;
+}
+.button:hover {
+  opacity: 0.87;
+}
+.buttonRed {
+  background: #ff4581;
+}
+</style>
diff --git a/docs/.vuepress/components/Faqs.vue b/docs/.vuepress/components/Faqs.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="faqs layout mt140">
+    <Typography tag="h35">FAQs</Typography>
+    <ul class="faqsContent">
+      <li
+        v-for="faq in faqs"
+        :key="faq.title"
+        :class="[activedFaqs.includes(faq.title) ? 'active' : '']"
+      >
+        <div
+          class="title"
+          @click="
+            () => {
+              if (activedFaqs.includes(faq.title)) {
+                activedFaqs = activedFaqs.filter((item) => item !== faq.title);
+              } else {
+                activedFaqs = [...activedFaqs, faq.title];
+              }
+            }
+          "
+        >
+          <span><img :src="faq.iconSrc" /></span>
+          <Typography tag="p">{{ faq.title }}</Typography>
+        </div>
+        <div class="animation">
+          <div class="flexCol gp24" style="padding: 24px">
+            <template v-for="cont in faq.content" :key="cont">
+              <Typography tag="p" v-html="cont"></Typography>
+            </template>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import Typography from "./Typography.vue";
+
+const allNetworks = ref<{ networks: {}[] }[]>([]);
+const activedFaqs = ref<string[]>([]);
+const router = useRouter();
+
+const fetchAllNetworks = () => {
+  fetch("https://templates.subquery.network/all").then(async (data) => {
+    const json = await data.json();
+    allNetworks.value = json.templates;
+  });
+};
+
+const faqs = computed(() => {
+  const counts =
+    allNetworks.value.reduce((cur, add) => cur + add.networks.length, 0) ||
+    "165+";
+
+  return [
+    {
+      title: "What networks do you support?",
+      iconSrc: "/assets/img/faqIcon.svg",
+      content: [
+        `We support over ${counts} leading layer-1 chains, including Ethereum, Cosmos, Polkadot, Avalanche, Algorand, Near and Flare. The list of supported layer-1 chains keeps growing every week, and it's our goal to support them all. Wherever you plan to build your next dApp, we want to be there to help you index it. <a href='https://subquery.network/networks'>View the full list here</a>`,
+        "If you would like us to index your new layer-1 chain, we would be happy to consider it, send us a message at <a href='mailto:[email protected]'>[email protected]</a>.",
+      ],
+    },
+    {
+      title: "How much does it cost?",
+      iconSrc: "/assets/img/faqIcon.svg",
+      content: [
+        "SubQuery is open-source, and free for all to use forever. You can write, run, and scale your SubQuery project in your own infrastructure with complete control, many of our biggest customers do just this. Since it's open source, you can even just run the parts of it that you want.",
+        `We're big believers in open source technology and really appreciate it when we 
+        <a style="cursor:pointer;" onclick="router.push('/miscellaneous/contributing.html')">receive contributions</a>.`,
+      ],
+    },
+    {
+      title: "Do you provide hosting, or do I have to run it myself?",
+      iconSrc: "/assets/img/faqIcon.svg",
+      content: [
+        `We provide a 
+        <a style="cursor:pointer;" onclick="router.push('/indexer/run_publish/run.html')">long guide</a> 
+        on how you can run SubQuery in your infrastructure, which includes both the indexer, Postgres database, and query service.`,
+        "Don't want to worry about running your own SubQuery infrastructure? SubQuery provides a <a href='https://explorer.subquery.network/' target='_blank'>Managed Service</a> to the community. The biggest dApps depend on SubQuery's enterprise level Managed Service. With 100s of millions of daily requests and hundreds of active projects, SubQuery's Managed Service provides industry leading hosting for our customers.",
+        "We'll run your SubQuery projects for you in a high performance, scalable, and managed public service with a generous free tier! You can host your first two SubQuery projects for absolutely free!",
+        "You can also upgrade to take advantage of production ready hosting for mission critical data with zero-downtime blue/green deployments, dedicated databases, multiple geo-redundant clusters, intelligent routing, and advanced monitoring and analytics.",
+      ],
+    },
+    {
+      title: "How is the data stored?",
+      iconSrc: "/assets/img/faqIcon.svg",
+      content: [
+        "SubQuery stores indexed data in a high performance PostgreSQL database.",
+      ],
+    },
+    {
+      title: "Why should I use SubQuery?",
+      iconSrc: "/assets/img/faqIcon.svg",
+      content: [
+        "SubQuery is the most efficient option for web3 builders to index data from multiple chains without the hassle of building your own indexing solution.",
+        "In addition to a flexible SDK, SubQuery offers superior indexing speeds and will eventually be a decentralised solution (upon the launch of the SubQuery Network) where you can have a stake in the future of the project.",
+      ],
+    },
+    {
+      title: "How are you different from The Graph?",
+      iconSrc: "/assets/img/faqIcon.svg",
+      content: [
+        `SubQuery is a flexible, cross-chain indexing service similar to The Graph. In fact, 
+        <a style="cursor:pointer;" onclick="router.push('/indexer/build/graph-migration.html')">migrating from the Graph takes only a few hours</a>. 
+        Like The Graph, there are endless possibilities for the variety of data sources that can be analysed and served using SubQuery.`,
+        "We build SubQuery with the following key competitive advantages in mind:",
+        "<ul><li>Faster than others. We’re focusing on making SubQuery faster than other solutions with advanced indexing caches and precomputed indices saving developers time, our solution is fast to set-up, fast to manage and fast to index.</li><li>More Flexible and Feature rich. SubQuery is a scaffold for building custom APIs and we provide additional features like GraphQL subscriptions, multi-chain indexing, automated historical tracking and more.</li><li>Open. Customers have already extended our open source SDK to suit their own custom implementation.</li><li>Universal. A universal infrastructure stack bringing communities together, developers now have a tool to search, sort, filter and query any data for their app across multiple blockchains.</li></ul>",
+        "Additionally, we are committed to running our Managed hosting service over the long term. We have made huge investments into it and have many customers relying on it. This provides a safe home and a reliable alternative to customers that are currently threatened by the imminent sunsetting of The Graph's hosted service.",
+      ],
+    },
+  ];
+});
+
+onMounted(() => {
+  fetchAllNetworks();
+  // it's a hack to make the router available when easy to render faqs
+  // @ts-ignore
+  window.router = router;
+});
+</script>
+
+<style lang="scss">
+.faqs {
+  margin-top: 140px;
+}
+
+.faqs h3 {
+  margin-bottom: 24px !important;
+}
+.faqsContent {
+  border: 1px solid var(--dark-mode-border);
+  background: var(--dark-mode-background);
+  padding: 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.dark .faqsContent {
+  color: #2c3e50;
+}
+.faqsContent li {
+  font-size: 16px;
+  color: #fff;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.faqsContent .title {
+  display: flex;
+  align-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  height: 72px;
+  background: var(--dark-mode-card);
+  border-bottom: 1px solid var(--dark-mode-border);
+  gap: 18px;
+}
+.faqsContent li:last-child .title {
+  /* margin-bottom: -1px; */
+  border-bottom: none;
+}
+.faqsContent li:last-child .animation {
+  /* margin-bottom: -1px; */
+  border-bottom: none;
+}
+.faqsContent .title span {
+  width: 36px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s linear;
+  transform: rotate(-90deg);
+  color: #fff;
+}
+.faqsContent .ct {
+  padding: 24px;
+  background-color: transparent;
+}
+.faqsContent .ct p {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 10px;
+  color: #fff;
+}
+.faqsContent .animation {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s linear;
+}
+.faqsContent li.active:last-child .title {
+  border-bottom: 1px solid var(--dark-mode-border);
+}
+.faqsContent .active .title span {
+  transform: rotate(0);
+}
+.faqsContent .active .animation {
+  max-height: 10000px;
+  border-bottom: 1px solid var(--dark-mode-border);
+}
+
+.faqs .title span {
+  cursor: pointer;
+}
+
+.faqs .title img {
+  pointer-events: none;
+}
+</style>
diff --git a/docs/.vuepress/components/Footer.vue b/docs/.vuepress/components/Footer.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="footer layout">SubQuery © 2024</div>
+</template>
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.footer {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 68px;
+  text-align: center;
+  color: var(--gray-500);
+}
+</style>