refactor: tutorials section (#461)

Daanvdplas · web-flow · commit 988c141e3906 · 2025-08-01T10:26:49.000+02:00
* refactor: tutorials section

* refactor: remove old tutorial section

* chore: fix relative link

* chore: revert relative path and add ignore pattern

* fix: pattern

* fix: link attempt 2

* refactor: remove ideas
diff --git a/.github/workflows/mlc_config.json b/.github/workflows/mlc_config.json
@@ -38,6 +38,9 @@
     },
     {
       "pattern": "^https?://metamask.io"
-    }
+    },
+    {
+      "pattern": "^/tutorials/"
+    },
   ]
 }
diff --git a/docs/intro/tutorials-examples.md b/docs/intro/tutorials-examples.md
@@ -12,15 +12,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 ## Tutorials
 
-Ready to dive deeper into ink! development? Check out our [tutorials](/tutorials) that will guide you through building real-world decentralised applications step by step.
+Ready to dive deeper into ink! development? Check out our [tutorials](/tutorials/overview) that will guide you through building real-world decentralised applications step by step.
 
 ### Contribute a Tutorial
 
 Have you built something awesome with ink!? We'd love to feature your tutorial! 
 
 **Help the community learn by contributing your own tutorial.** Whether it's a unique use case, an innovative pattern, or a step-by-step guide for beginners, your contribution makes a difference.
 
-[Learn how to contribute tutorials →](https://github.com/use-ink/ink-alliance/tree/main/tutorials)
+[Learn how to contribute tutorials →](/tutorials/guide)
 
 ## Smart Contract Examples
 
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -121,6 +121,18 @@ module.exports = {
     },
   ],
   plugins: [
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'tutorials',
+        path: 'tutorials',
+        routeBasePath: 'tutorials',
+        sidebarPath: require.resolve('./tutorials/sidebar.js'),
+        showLastUpdateAuthor: true,
+        showLastUpdateTime: true,
+        editUrl: 'https://github.com/use-ink/ink-docs/edit/master/',
+      },
+    ],
     [
       '@docusaurus/plugin-client-redirects',
       {
diff --git a/src/pages/tutorials.tsx b/src/pages/tutorials.tsx
@@ -1,123 +1,15 @@
 import React from 'react'
-import Layout from './layout'
-import { ArrowCircleDown } from '@phosphor-icons/react/dist/ssr'
-import { tutorials } from '../data/tutorials'
-import { TutorialCard } from '../components/tutorials/tutorial-card'
-import { motion } from 'motion/react'
-
-import Rocket from '@site/static/img/rocket.svg'
-import { Button } from '../components/ui/button'
-import Link from '@docusaurus/Link'
-import useBaseUrl from '@docusaurus/useBaseUrl'
-import { StarryBackground } from '../components/starry-background'
-import { useCurrentVersion } from '../hooks/use-current-version'
-const head = (
-  <>
-    <title>Tutorials | ink!</title>
-    <meta
-      name="description"
-      content="Access tutorials to help you get started with ink! smart contracts and deploy them on Polkadot and beyond."
-    />
-    <meta name="keywords" content="tutorials, learning, ink!, guides, Polkadot" />
-    <meta name="author" content="ink! Alliance" />
-    <meta property="og:title" content="Tutorials | ink!" />
-    <meta
-      property="og:description"
-      content="Access tutorials to help you get started with ink! smart contracts and deploy them on Polkadot and beyond."
-    />
-    <meta property="og:image" content="https://use-ink.com/img/opengraph-home.png" />
-    <meta property="og:url" content="https://use-ink.com" />
-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="ink!" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="ink! logo" />
-    <meta property="og:image:type" content="image/png" />
-  </>
-)
-
-export default function PageTutorials() {
-  const currentVersion = useCurrentVersion()
-  const versionedTutorials = tutorials.map((tutorial) => {
-    return {
-      ...tutorial,
-      link: tutorial.link.replace('docs/', `docs/${currentVersion?.label ?? 'v5'}/`),
-    }
-  })
+import { Redirect } from '@docusaurus/router'
+import Head from '@docusaurus/Head'
 
+export default function TutorialsRedirect() {
   return (
-    <Layout className="container overflow-hidden" head={head}>
-      <div
-        style={{
-          width: '100vw',
-          height: '200vh',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          zIndex: -1,
-          overflow: 'hidden',
-        }}
-      >
-        <StarryBackground />
-      </div>
-      <div className="flex flex-col items-center justify-center max-w-[540px] mx-auto text-center mt-[10vh]">
-        <img
-          src={useBaseUrl('/img/Constellation.svg')}
-          alt="constellation"
-          className="w-[246px] h-[246px] lg:w-[450px] lg:h-[450px] absolute left-[2vw] lg:left-[18vw] top-10"
-        />
-        <motion.div
-          className="w-[246px] h-[246px] rotate-[25deg]"
-          initial={{ opacity: 0, scale: 0.7, translateY: 200, translateX: -100, rotate: 30 }}
-          animate={{ opacity: 1, scale: 1, translateY: 0, translateX: 0, rotate: 25 }}
-          transition={{
-            duration: 1,
-            opacity: { visualDuration: 0.1 },
-            translateY: { type: 'spring', visualDuration: 0.9, bounce: 0.5 },
-            translateX: { type: 'spring', visualDuration: 0.9, bounce: 0.5 },
-            rotate: { type: 'tween', duration: 2 },
-          }}
-        >
-          <Rocket style={{ filter: 'drop-shadow(0 10px 10px #0005' }} className="w-full h-full animate-float" />
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0, translateY: 100 }}
-          animate={{ opacity: 1, translateY: 0 }}
-          transition={{ duration: 1.5 }}
-        >
-          <h1 className="font-bold text-[64px]">ink! Tutorials</h1>
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0, translateY: 100 }}
-          animate={{ opacity: 1, translateY: 0 }}
-          transition={{ duration: 1.2, delay: 0.4 }}
-        >
-          <p className="text-[18px] font-semibold">
-            Explore step-by-step tutorials and learn how to build a dApp with ink! smart contracts.
-          </p>
-        </motion.div>
-        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }}>
-          <a href="#tutorials" className="scroll-m-60">
-            <ArrowCircleDown size={32} weight="duotone" fill="rgb(140, 124, 247)" />
-          </a>
-        </motion.div>
-      </div>
-      <section id="tutorials" className="flex flex-col items-center justify-center max-w-[900px] mx-auto pt-20">
-        <div className="grid grid-cols-1 gap-[36px] md:grid-cols-2">
-          {versionedTutorials.map((tutorial) => (
-            <TutorialCard key={tutorial.title} {...tutorial} />
-          ))}
-        </div>
-        <div className="flex flex-col items-center justify-center gap-4 my-16 md:flex-row">
-          <p className="m-0">Do you have an idea or need for a tutorial?</p>
-          <Link href="https://t.me/inkathon" className="text-blue-500">
-            <Button size="lg" variant="secondary">
-              Request a topic
-            </Button>
-          </Link>
-        </div>
-      </section>
-    </Layout>
+    <>
+      <Head>
+        <link rel="canonical" href={'https://use.ink/tutorials/guide'} />
+        <meta name="robots" content="noindex, follow" />
+      </Head>
+      <Redirect to={'/tutorials/guide'} />
+    </>
   )
 }
diff --git a/tutorials/guide.md b/tutorials/guide.md
@@ -0,0 +1,33 @@
+---
+title: Guide
+sidebar_position: 1
+---
+
+Welcome to the ink! tutorial contribution guide. We're excited to have you share your knowledge with the community!
+
+### Why Contribute?
+
+By contributing a tutorial you're helping other developers learn to build with ink! and get rewarded for your work. In this way we hope to build a thriving developer community where people get recognized for their work.
+
+### How to Contribute
+
+1. **Choose a Topic**: Check out the list of tutorial [ideas](ideas.md) for inspiration, suggest an idea by [submitting a PR](https://github.com/use-ink/ink-docs/edit/main/tutorials/ideas.md), or start right away!
+2. **Follow the Template**: Use the provided [template](template) to structure your tutorial. This ensures consistency and ensures a certain level of quality that is required.
+3. **Write Your Tutorial**: Create your tutorial and submit a pull request to this repository. Check out this example of how to add a tutorial (TODO: add link to tutorial added).
+
+### Reward System
+
+Each accepted tutorial will be rewarded with a fixed amount of **$100**. This initiative is new to the ink! Alliance, and we're very much looking for feedback on whether this reward is incentivizing enough. Please share your feedback in our [community channel](https://t.me/inkathon/2357)!
+
+### Guidelines
+
+- Keep the language simple and concise.
+- Include code examples where appropriate.
+- Include images to create a fun experience!
+- Make sure to test any code snippets to ensure they work.
+
+### Questions?
+
+For any questions, refer to the [Ink Alliance Telegram](https://t.me/inkathon/2357) or open an issue in this repository.
+
+Thank you for your contribution!
diff --git a/tutorials/ideas.md b/tutorials/ideas.md
@@ -0,0 +1,25 @@
+---
+title: Ideas
+sidebar_position: 2
+---
+
+**Do you have good idea for a tutorial?**  [Add it to the list!](https://github.com/use-ink/ink-docs/edit/main/tutorials/ideas.md)
+
+- **Writing Your First Smart Contract**  
+  Step-by-step instructions on creating a simple ink! contract, explaining key concepts like storage and messages.
+
+- **Cross Contract Calling**  
+  This tutorial covers the multiple syntax options for calling one contract from another, their workflows, and best practices, with examples to clarify setup, execution, and common pitfalls.
+
+- **Ink! and XCM**  
+  An introduction to using ink! with Cross-Consensus Messaging (XCM) for cross-chain interactions, based on [ink!'s XCM basics](https://use.ink/basics/xcm). Covers what XCM is, how ink! contracts can send or receive XCM messages, and a simple example of cross-chain communication.
+
+- **Using Papi with ink! Smart Contracts**  
+  Guide the developer how to integrate Papi (Polkadot API) with ink! smart contracts. This tutorial covers setup, basic usage, and an example.
+
+- **Using Dedot with ink! Smart Contracts**  
+  Guide the developer how to integrate Dedot with ink! smart contracts. This tutorial covers setup, basic usage, and an example.
+
+- **Using Subxt to Interact with ink! Smart Contracts**  
+  Guide the developer how to integrate Subxt with ink! smart contracts. This tutorial covers setup, basic usage, and an example.
+
diff --git a/tutorials/overview.md b/tutorials/overview.md
@@ -0,0 +1,10 @@
+---
+title: Overview
+sidebar_position: 1
+---
+
+Welcome to the ink! tutorials! These resources are here to help you create decentralized applications (dApps) using ink! smart contracts. Whether you’re just starting with your first contract or working on connecting it to a full-stack dApp, these tutorials will walk you through each step.
+
+If you want to make a tutorial, take a look at our [contribution guide](./guide.md)!
+
+We’re excited to have you here, happy learning :)
diff --git a/tutorials/sidebar.js b/tutorials/sidebar.js
@@ -0,0 +1,14 @@
+module.exports = {
+  tutorials: [
+    'overview',
+    {
+      type: 'category',
+      label: 'Contribute',
+      items: [
+        'guide',
+        'ideas',
+        'template',
+      ],
+    },
+  ],
+} 
diff --git a/tutorials/template.md b/tutorials/template.md
@@ -0,0 +1,28 @@
+---
+title: Template
+sidebar_position: 3
+---
+
+*Feel free to add more sections or adjust as needed for your tutorial!* 
+
+---
+### Tutorial Title
+
+What is this tutorial about? What will the reader learn?
+
+### Prerequisites
+
+What should the reader know or have before starting?
+
+### Body
+
+Describe the first step. Include code, explanations, or images as needed.
+Describe the next step. Add more steps as needed.
+
+### Conclusion
+
+Summarize the key takeaways from the tutorial. Suggest next steps, further reading, or related tutorials.
+
+### Author _(optional)_
+
+Write a short bio and link to your profile, blog, or project.

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,9 @@`
`38`	`38`	`},`
`39`	`39`	`{`
`40`	`40`	`"pattern": "^https?://metamask.io"`
`41`		`- }`
	`41`	`+ },`
	`42`	`+ {`
	`43`	`+ "pattern": "^/tutorials/"`
	`44`	`+ },`
`42`	`45`	`]`
`43`	`46`	`}`