Kusi Doc is a beautiful and elegant theme for the documentation of your project.

Hello 😄 , I created this theme for the documentation of your project. It is available for free so you can use on your site. If you have any suggestions to improve the theme send me a tweet @GodoFredoNinja

➡️ If you still don't have a Hosting for your Ghost. Use Digital Ocean using my referral link and you will get free a $100 in credit over 60 days to use in Digital Ocean. This way you will also be helping me.

• Support for different languages (en - es)
• Previous and next Post
• Table of Content for documentation post
• YouTube, Vimeo, kickstarter, dailymotion => Responsive
• Code syntax Prismjs Supported all syntax

• Web Browser Support for Kusi Doc
• Ghost Settings
• Home Page
• Documentation Page
• Blog Page
• Theme Translation
• PrismJS code syntax

Kusi Doc supports the following web browsers.

Enable the following checkbox on the Labs page in the Ghost admin panel.

• Create a new page
• Choose your favorite title
• Use the url kusi-doc-home or your favorite url
• First back up your routes in your ghost settings Labs -> Routes -> Download current routes.yml
• Re-download the Route and edit routes.yml line routes

routes:
  # Home Page - kusi Doc
  /:
    data:
      post: page.kusi-doc-home
    template: kusi-doc-home

• In an HTML block in your ghost editor add this code for your content.

  <!-- Description -->
  <p class="mt-6 text-lg text-center leading-normal lg:max-w-xl">Beautiful and elegant theme for the documentation of your project.</p>
  <!-- Verion -->
  <p class="flex justify-center mt-6 text-sm text-gray-500">v1.0</p>

• Buttons

  <div class="md:flex mt-16">
    <!-- Documentation -->
    <a href="http://localhost:2368/docs/" class="flex items-center mt-2 mx-2 px-4 py-2 rounded-lg border text-gray-700 hover:bg-gray-200 hover:border-gray-500">
      <svg class="fill-current mr-2 w-4 h-4"><use xlink:href="#icon-doc"></use></svg>
      Documentation
    </a>

    <!-- Github -->
    <a href="https://github.com/godofredoninja/kusi-doc" class="flex items-center mt-2 mx-2 px-4 py-2 rounded-lg border text-gray-700 hover:bg-gray-200 hover:border-gray-500">
      <svg class="fill-current mr-2 w-4 h-4"><use xlink:href="#icon-github"></use></svg>
      Source on Github
    </a>

    <!-- Blog -->
    <a href="http://localhost:2368/blog/" class="flex items-center mt-2 mx-2 px-4 py-2 rounded-lg border text-gray-700 hover:bg-gray-200 hover:border-gray-500">
      <svg class="fill-current mr-2 w-4 h-4"><use xlink:href="#icon-rss"></use></svg>
      Blog
    </a>
  </div>

To create the documentation page is very easy, you have to create an article and choose in template kusi-doc. you also have to add the primary tag docs.

🤓 The secondary menu will be used on the documentation page.

So we need to make some changes to our routes.

➡️ Doc Collection

• Appears on: site.com/docs/
• Post URLs: site.com/docs/my-documentation/
• Contains posts with: a primary_tag of docs

collections:
  /docs/:
    permalink: /docs/{slug}/
    filter: primary_tag:docs

To have a blog page is very easy. Just add a primary tag called blog in your articles

So we need to make some changes to our routes.

➡️ Blog collection

• Appears on: site.com/blog/
• Post URLs: site.com/blog/my-story/
• Contains posts with: a primary_tag of blog

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: kusi-doc-blog
    filter: primary_tag:blog

😅 If you want to pass content to the blog page as a title and a description.

• Create a new page
• Choose your favorite title
• Use the url kusi-doc-blog or your favorite url

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: kusi-doc-blog
    filter: primary_tag:blog
    data:
      post: page.kusi-doc-blog

Kusi Doc supports:

• en — English default language
• es — Español
• tr — Turkish by @tolgaaaltas

if you want to have in another language you just have to copy locales>en.json and rename the file then translate to your favorite language:

Just enter the language/locale tag of the files to use (e.g.: fr.json for French, zh.json for Chinese, ja.json for Japanese)

Make your code stand out with the PrismJS code highlighter. PrismJS allows you to select which languge you embeded and performs code highlighting according to the language. Neat!

Take a look at the Prismjs Supported Language List

• Tailwindcss
• Tocbot
• Medium Zoom
• Prismjs
• Safari Light - Mockup

Copyright (c) 2020 GodoFredo - Released under the MIT license