Kolokodess / TutLab

Tutlab provides a guided, tutorial, hands-on coding experience by rendering content from markdown (.md) on github repository

Home Page:http://opentutlab.appspot.com/posts/kingsmentor/codelab/buildingsmallerapk

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TutLab

Tutlab provides a guided, tutorial, hands-on coding experience by rendering content from markdown (.md files) on github repository.
It takes away the hazzle of having to build the codelab template and bother about different styling and designs, allowing tutors to focus on creating a rich content only.
It builds off of Google's Codelab template.

This  example on Github Repo produces this codelab

Steps on Setting up a Tut Lab Project

  1. Create a Github repo
  2. Create a folder to house your codelab post and manifest file as seen here
  3. create manifest.josn
  4. push .md files content

Manifest.json - How it Works

{
  "title": "Building Smaller Apks",
  "home":"http://belvi.xyz",
  "feedback_link": "http://belvi.xyz",
  "showLastUpdate": false,
  "flavor":"github",
  "steps": [
    "introduction",
    "using gradle",
  ],
  "introduction": {
    "label": "Getting started Shrinking Apk Size."
  },
  "using gradle": {
    "label": "Updating gradle."
  }
}
Key function
title the title of the article
feedback_link link to be redirect to for codelab feedback
showLastUpdate if true, last update time of the article is displayed
home where it should redirect to after a user finish a codelab session
flavor your preferred flavor for styling mardown file ('github' or 'vanilla' or 'original')
steps array of .md file names. this should be arranged in the order you want the files to be rendered
label lable of the step referenced in steps array

YOUR CODE LAB LINK

To share with audience, here's the pattern to your codelab link.

http://opentutlab.appspot.com/posts/YOUR_GIT_USERNAME/CODELAB_REPO_NAME/PATH_TO_CODELAB_MANIFEST_FILES_AND_FILES

Using this as an example

BASE_URL = http://opentutlab.appspot.com/posts/
MY_GIT_USERNAME = kigsmentor
CODELAB_REPO_NAME = codelab
PATH_TO_CODELAB_MANIFEST_FILES_AND_FILES = buildingsmallerapk

knowing this, I can share my codelab as : http://opentutlab.appspot.com/posts/kingsmentor/codelab/buildingsmallerapk

Resource and Credits

  • Google Codelab template
  • Showdown.js
  • axios.js

Contributions

Looking forward to working with great contributors. If you find this project interesting, kindly contribute.
I am not so fluent with the technologies I have used to set this up and there might be many fawls, please help fix if you find any.
I know there are many ways this can be better. Contribute, share and reach out. Thanks

About

Tutlab provides a guided, tutorial, hands-on coding experience by rendering content from markdown (.md) on github repository

http://opentutlab.appspot.com/posts/kingsmentor/codelab/buildingsmallerapk

License:MIT License


Languages

Language:Python 83.9%Language:HTML 7.9%Language:JavaScript 5.2%Language:CSS 2.9%