docs: dynamic comm tutorials (#744)

* feat: dynamic content hardcoded

* feat: dynamic fetching through network call

* fix: remove broken links

* fix: typo

* fix: link to repos

docs/.vuepress/components/TutorialList.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="tutorial-container">
+    <div v-for="(t, index) in tutorials" :key="t.title" class="tutorial-card">
+      <h3 class="tutorial-title">
+        <a :href="`${tutorialsRepo}${t.slug}/TUTORIAL.md`" target="_blank">{{ t.title }}</a>
+        <span> by {{ t.author }}</span>
+      </h3>
+      <div :class="`badge`" v-for="tag in t.tags" :key="tag" :style="{ backgroundColor: getColorForBadge(tag) }">{{ tag }}</div>
+      <p class="time"><span>⏳ Time:</span> <strong>{{ t.time }}</strong></p>
+      <p>{{ t.description }}</p>
+      <p>
+        <a class="button" :href="`${tutorialsRepo}${t.slug}/TUTORIAL.md`" target="_blank">Tutorial repository</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+const tutorialsRepo = "https://github.com/zkSync-Community-Hub/tutorials/blob/main/tutorials/";
+
+const tutorials = ref([]);
+
+onMounted(async () => {
+  try {
+    const response = await fetch("https://raw.githubusercontent.com/zkSync-Community-Hub/tutorials/main/tutorials.json");
+    if (response.ok) {
+      tutorials.value = await response.json();
+    } else {
+      console.error("Failed to fetch tutorials:", response.statusText);
+    }
+  } catch (error) {
+    console.error("Error fetching tutorials:", error);
+  }
+});
+
+const getColorForBadge = (badgeName) => {
+  const hash = badgeName.split("").reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);
+  const hue = hash % 360;
+  return `hsl(${hue}, 60%, 70%)`;
+};
+</script>
+
+<style>
+.tutorial-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.tutorial-card {
+  border: 1px solid #eaeaea;
+  padding: 20px;
+  margin-bottom: 30px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s;
+}
+
+.tutorial-card:hover {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.tutorial-title {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+.tutorial-title a {
+  color: #1e69ff;
+  text-decoration: none;
+}
+
+.tutorial-title a:hover {
+  text-decoration: underline;
+}
+
+.author {
+  font-size: 1rem;
+  color: #888;
+}
+
+.badge {
+  display: inline-block;
+  padding: 4px 12px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  color: #fff;
+  transition: background-color 0.3s;
+}
+
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-weight: 500;
+  color: #fff;
+  background-color: #1e69ff;
+  border-radius: 20px;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+.time {
+  font-size: 1.1em;
+  margin-top: 10px;
+}
+
+.time span {
+  margin-right: 5px;
+}
+</style>

docs/.vuepress/sidebar/en.ts

@@ -32,6 +32,7 @@ export const enSidebar = sidebar({
       text: "Tutorials",
       link: "/dev/tutorials.md",
       children: [
+        { text: "Community", link: "/dev/community-tutorials/README.md", children: [] },
         { text: "zkSync Team", link: "/dev/tutorials/README.md", children: [
           "/dev/tutorials/cross-chain-tutorial.md",
           "/dev/tutorials/custom-aa-tutorial.md",
@@ -40,11 +41,6 @@ export const enSidebar = sidebar({
           "/dev/tutorials/api3-usd-paymaster-tutorial.md",
           "/dev/tutorials/gated-nft-paymaster-tutorial.md",
         ]},
-        { text: "Community", link: "/dev/community-tutorials/README.md", children: [
-          "/dev/community-tutorials/redstone-marketplace-tutorial.md",
-          "/dev/community-tutorials/the-graph-tutorial.md",
-          "/dev/community-tutorials/zksync-cli-quickstart.md",
-        ] },
       ],
     },
   ],

docs/dev/README.md

@@ -34,6 +34,3 @@ Our docs are open source so feel free to suggest new topics, add new content, or
 - [Building a custom paymaster](./tutorials/custom-paymaster-tutorial.md): build a paymaster that allows users to pay gas fees with an ERC20 token.
 - [USDC paymaster tutorial with API3](./tutorials/api3-usd-paymaster-tutorial.md): build a paymaster that allows users to pay gas fees with USDC using API3 dAPIs.
 - [Gated NFT paymaster](./tutorials/gated-nft-paymaster-tutorial.md): build a paymaster that allows users to pay 0 gas fees when owning a particular NFT.
-- [zkSync Redstone Stable Price Marketplace](./community-tutorials/redstone-marketplace-tutorial.md): build a marketplace where users can buy and sell NFTs using Redstone oracles on zkSync.
-- [the Graph on zkSync](./community-tutorials/the-graph-tutorial.md): build a subgraph for zkSync on the Graph Protocol using the Graph Studio.
-- [zkSync CLI Quickstart](./community-tutorials/zksync-cli-quickstart.md): use the zkSync CLI to deploy your first smart contract on zkSync.

docs/dev/community-tutorials/README.md

@@ -7,17 +7,15 @@ head:
 
 # Community Tutorials
 
-Here is the list of tutorials created by the community to help you build on zkSync Era:
-
-- [zkSync Redstone Stable Price Marketplace](./redstone-marketplace-tutorial.md): build a marketplace where users can buy and sell NFTs using Redstone oracles on zkSync.
-- [the Graph on zkSync](./the-graph-tutorial.md): build a subgraph for zkSync on the Graph Protocol using the Graph Studio.
-- [zkSync CLI Quickstart](./zksync-cli-quickstart.md): use the zkSync CLI to deploy your first smart contract on zkSync.
+Here is the list of tutorials created by partners, projects, and community members to help you build on zkSync Era.
 
 ## Contributing
 
 ### Want to Contribute?
 
-If you'd like to contribute and don't know exactly how, check out [the repo's issues](https://github.com/zkSync-Community-Hub/tutorials/issues) for ideas on what to work on - help is welcome!
+The community tutorials is an **open source initiative** from the [zkSync Community Hub](https://github.com/zkSync-Community-Hub/zkync-developers/discussions).
+
+If you'd like to contribute and don't know exactly how, check out [the repo's issues](https://github.com/zkSync-Community-Hub/tutorials/issues) for ideas on what to work on - help is welcome! Make also sure to follow the contribution guidelines in the [community tutorials repo](https://github.com/zkSync-Community-Hub/tutorials#tutorial-guideliness).
 
 ### Got a Tutorial Idea?
 
@@ -26,3 +24,7 @@ If you have created a tutorial that you would like to share with the community,
 ### Reach Out to Us
 
 If you have any questions or suggestions, please reach out to us on our [GitHub Discussions Forum](https://github.com/zkSync-Community-Hub/zkync-developers/discussions).
+
+## Tutorials
+
+<TutorialList />