💡

Tutorial of Dopex.Learn (1)

Please refer to the below to understand how Dopex Learn is built and what you can do and should do when doing anything on these pages:

1. Notion and Super.so

Super.so is a notion specific front-end. Meaning it gives your notion pages a different look and feel compared to the standard UI when you publish a page. It is a paid SaaS subscription. Rainbow wallet’s help page for example is also built with a notion specific front-end. We can swap out the front-end any time we want. Unless you want to change the code, colors or do SEO you don’t need to log-in to super.

Notion is where all the content lives and is, just like storyblok, a CMS (or database) that carries all the articles. Layout changes and organization of articles happens here. Everything you add to notion will be directly visible to the public, so make sure to edit in private.

2. The different pages on Dopex Learn explained

image
  • About Dopex Learn = Landing page
  • Dopex v2 = Everything in one place for Dopex v2
  • Product Explainers = Tutorials and walkthroughs
  • Advanced Strats = Strategy articles

  • Options Expl = Tutorials and ELI5s
  • DeFi Expl = Tutorials and ELI5s
  • Glossary = Jargon we use explained

  • CEO’s personal blog: DP updates, art etc.
  • Community: guest writer articles, links & resources from the community

Every change you make in these pages below will be immediately visible on the front-end/UI. So please write your articles in a private page beforehand.

image

  • Hidden Pages: Everything in this block is hidden from the public/UI. Quick links that are essential for Dopex Learn (e.g. templates, this guide, databases etc.) go here.

3. Walkthrough: adding a new article

Where Go to our regular Dopex notion, then click on About Dopex Learn (nested under Marketing). This one page contains the whole Dopex Learn website, everything is in here.

How

  • Scroll down to ‘Hidden Pages’:
    • Click on [Write Here] All Articles and it’ll take you to the master article database.
    • Add a new row to the table and start a new page, within that new page you will find ‘Template page’. Click on that so your article has the right base structure:
      • image
    • Make sure you’ve finished making up/writing the article in a private page before adding it to Dopex Learn, anything you paste in there is live immediately.
  • When you’ve finished writing your article, make sure to fill out the master table:
      • image
    1. Name = Article name, as displayed externally.
    2. Shown in = Where the article should be displayed. Many pages show a table that is filtered on these tags e.g. “Home Page, Product Explainers, Dopex v2” etc.
    3. Status = Whether the article is published or a draft. If you don’t fill out the ‘Shown in’ column, the page should not appear anywhere and it can live as a ‘draft’. But, technically it is still live and accessible to outsiders so it’s never really private. Use this option if something is ready, but not yet announced, this way anyone can “publish” it even if the author is asleep/AFK.
    4. super:Link = add the public URL of the page in here, it is needed because otherwise the ‘Tiles’ aren’t clickable on the front-end.
      • A tile can link to your article.
      • A tile can link to another page within Dopex Learn.
      • A tile can link to an external page.

        • I’m talking about these tiles, see below:

        image
    5. Tags = see the colored tags under the title in the tiles above? These are tags so users can quickly see what it is about. In the future, when the devs have more time we can ask if they make a filter on the page itself so people can immediately filter on what they want.

Writing in the template

When you create a ‘Template page’ (it takes a while to load unfortunately) it will eventually show you this page:

image

Please copy/paste or start writing in the section that’s boxed in red in the image above.

💡
Additional content blocks (to make your page pretty) n the ‘Hidden pages’ there is also a page called Content Block examples in this page you will find additional blocks/mark ups you can use to add to your article for certain purposes: e.g. to add a video or other multimedia, adding buttons, basically anything to make a long wall of text look better.

Note: the way stuff looks here on notion is different from how it is displayed on the front-end. If you want to look how all the different content blocks look like in prod, check out the official template page.

Then, don’t forget:

  • Add the article banner here on top at “add cover”, because otherwise the tiles don’t show images.
    • image

  • AND copy the banner in the body of the article too so that it shows up when someone open the article.
  • If you don't want a button to appear in your article you should only 'link the text' and not additionally 'Bold' it.
      • image
    1. Bold + link = button
    2. link = link

4. Displaying the database of articles on one of the pages

There is only 1 table that is the master content table (called ‘@Articles’) that has all the articles, these are then split by tags. If you don’t follow the instructions above, the layout may break since everything is sorted from the master table.

Whenever you want to show just a certain set of articles on your page:

  • Add a table to the page using /table view
  • Choose the data source and add
    Articles
  • Then choose ‘Gallery View’ and make use of the Filter and check the appropriate tags.
image

5. SEO Stuff

I don’t have a lot of experience on SEO but basically if you want to edit a preview text or preview card of a specific page you can do so through the admin panel of super.so and then navigate in the menu bar to “SEO”.

6. Login details Super.so

A screenshot of the admin panel of the Super page. Here you can do layout customizations like: color scheme, header/footer/menu items, domain stuff, page URLs and SEO stuff can be done from here.

image

Email: bella@dopex.io

Password: DopexLearn2023!