From 18c9ffb03497f83a7a06f42a3c08d44c988e4d7f Mon Sep 17 00:00:00 2001
From: Sabrina Ferguson <sf@matterlabs.dev>
Date: Thu, 30 May 2024 15:13:26 -0400
Subject: [PATCH] chore: create new tutorial template

---
 CONTRIBUTING.md                               |   3 +
 .../_new-tutorial-template/10.index.md        | 114 ++++++++++++++++++
 .../tutorials/_new-tutorial-template/_dir.yml |  17 +++
 3 files changed, 134 insertions(+)
 create mode 100644 content/tutorials/_new-tutorial-template/10.index.md
 create mode 100644 content/tutorials/_new-tutorial-template/_dir.yml

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3a9b680a..ab1af2f3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -23,6 +23,9 @@ and you can use components available from [Nuxt UI](https://ui.nuxt.com/componen
 
 ### Create a new section for your guide
 
+We have a template tutorial folder you can start from!
+You can copy the `/content/tutorials/_new-tutorial-template` to make setting up a new tutorial easy.
+
 Your new guide should have its own folder under `/content/tutorials`. The minimum files your directory should have are
 the `_dir.yml` and a `10.index.md`.
 
diff --git a/content/tutorials/_new-tutorial-template/10.index.md b/content/tutorials/_new-tutorial-template/10.index.md
new file mode 100644
index 00000000..d43f6cac
--- /dev/null
+++ b/content/tutorials/_new-tutorial-template/10.index.md
@@ -0,0 +1,114 @@
+---
+title: Header for the first page of the tutorial
+description: You can optionally add a small description here.
+---
+
+This tutorial shows you how to add a new tutorial to the Code Community project!
+
+## Prerequisites
+
+- [Fork this project on GitHub](https://github.com/zkSync-Community-Hub/community-code) and create a branch to track your work.
+- Make sure you have set up your project following the [README](https://github.com/zkSync-Community-Hub/community-code/blob/main/README.md).
+- Spend some time getting to know the available tools that are available.
+  - [Nuxt Content](https://content.nuxt.com/)
+  - [Nuxt UI & Nuxt UI Pro](https://ui.nuxt.com/)
+  - and more in our [CONTRIBUTING](https://github.com/zkSync-Community-Hub/community-code/blob/main/CONTRIBUTING.md)
+
+## Create a new tutorial
+
+This template tutorial is designed to help you get a quick start at setting up a new tutorial for Code Community.
+
+1. Make a copy of this folder and paste it into the `/content` directory.
+
+1. Rename the folder in dash-case format.
+  The actual name of the folder isn't too important to what's displayed on the website.
+
+1. Fill out the `_dir.yml` metadata for your tutorial.
+
+1. Update this `10.index.md` file with your tutorial!
+
+## Adding additional pages
+
+You are free to add more pages for your tutorial.
+To create a new page, create a new markdown file and prefix the name of your file with a two digit number.
+
+```txt
+20.second-page.md
+```
+
+The two-digit number is crucial for Nuxt to detect and manage the ordering of pages for navigation.
+
+## Markdown formatting
+
+This project uses markdown files for tutorials.
+You should not need anything more than the markdown syntax when writing your content.
+For more complicated UI, you should see if there are any Nuxt UI components available to use.
+
+Please avoid writing custom html and css in your tutorials.
+
+### UI components
+
+You can use Nuxt UI components in your markdown file!
+Component syntax however is a little different in markdown.
+Learn more in the Contributing page for
+[Using UI components](https://github.com/zkSync-Community-Hub/community-code/blob/main/CONTRIBUTING.md#using-ui-components).
+
+::callout{icon="i-heroicons-light-bulb"}
+Want to call something out? Use the callout component!
+::
+
+## Displaying code
+
+We have a variety of Nuxt UI components available for use though the most important one
+will likely the code component.
+
+The standard markdown syntax of the backtick will work for displaying formatted code.
+
+You can customize the display of the code block with a header using the following format:
+
+```ts
+    ```ts [sample-file.ts]
+    const foo = 'bar';
+    ```
+```
+
+```ts [sample-file.ts]
+const foo = 'bar';
+```
+
+Code blocks can also have a tabbed view using the [Code Group](https://ui.nuxt.com/pro/prose/code-group) component.
+
+```ts
+
+    ::code-group
+
+    ```bash [pnpm]
+    pnpm add @package
+    ```
+
+    ```bash [yarn]
+    yarn add @package
+    ```
+
+    ```bash [npm]
+    npm install @package
+    ```
+    ::
+
+```
+
+::code-group
+
+```bash [pnpm]
+pnpm add @package
+```
+
+```bash [yarn]
+yarn add @package
+```
+
+```bash [npm]
+npm install @package
+```
+
+::
diff --git a/content/tutorials/_new-tutorial-template/_dir.yml b/content/tutorials/_new-tutorial-template/_dir.yml
new file mode 100644
index 00000000..34da1738
--- /dev/null
+++ b/content/tutorials/_new-tutorial-template/_dir.yml
@@ -0,0 +1,17 @@
+title: New tutorial example
+authors:
+  - name: Jane Doe
+    url: https://google.com
+    avatar: https://i.pravatar.cc/300
+github_repo: https://github.com
+tags:
+  - smart contracts
+summary: Provide a tweet-sized summary that describes the tutorial.
+description:
+  Provide a brief description of the tutorial. This description should be a few sentences long and should give the
+  reader an idea of what the tutorial is about.
+what_you_will_learn:
+  - How to write a tutorial
+updated: 2024-05-09
+tools:
+  - code-community