Need help with appolo?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nicnocquee
417 Stars 40 Forks MIT License 24 Commits 3 Opened issues

Description

Plugins and Themes for Jekyll to create App Portfolio for Developers

Services available

!
?

Need anything else?

Contributors list

No Data

Appolo for Jekyll

Appolo is a set of plugins and themes for Jekyll to create a static portfolio website for app developers to showcase their work. Its minimalistic theme and playful animations make it perfect to display the amazing apps you have made. The responsive design looks perfect in desktop or mobile. It also comes with a set of plugins to remove the hassle of formatting your apps' pages.

Made by a developer. For developers.

There are so many single page landing page for showcasing a single app. But I need a theme to showcase multiple apps and I couldn't find it. And since I've been using Github with Jekyll and Octopress to blog, I figured it'd be nice to have a Jekyll theme for apps showcase. This theme is based on a Zoom Slider demo in Codrops. Appolo also comes with custom Liquid tags to help writing an app's page easier. Check out my apps' website to see it in action.

Quick start

  1. Clone this repo.
  2. Install Jekyll if you haven't.
    gem install jekyll
  3. Go to repo's directory and run
    jekyll serve
    from Terminal.
  4. Open
    http://localhost:4000
    in browser.

Adding a new app

To add a new app, simply create a markdown file in

_posts
directory or just duplicate sample the markdown file in
_posts/2015-12-26-appolo.markdown
. Set the variables in the YAML Front Matter block with your app's parameters.

Key

Description
layout Always use

post
.
title
title
appears on the top of the app's page.
subtitle
subtitle
appears after the
title
in the app's page.
description Used in the head's meta.
date Published date.
categories Not used currently.
permalink NEEDED. This sets the app's URL to baseurl/permalink.
device Type of device to use for this app in the landing page. Available options: imac, macbook, iphone, ipad, and apple-watch.
name Name of the app that is shown on the landing page.
tagline Shown under
name
on the landing page.
external_url OPTIONAL. If you want to open external URL when user clicks on the app, set this variable.

Writing a new app page

Appolo comes with some custom Liquid tags to make it easy writing an app page.

Tag

Description

{% section_title Section Title Here %}
| Use this tag to render a section title. {% img alignment | relativepathtoimage | alt %} | Use
img
tag to render an image with an assigned
alignment
. You can use one of the four alignments:
center
,
right
,
left
, or
fill-width
.
{% textalign center %}
| Use
textalign
block to set the paragraph alignment. `{% youtube youtubeid %}
| Use
youtube
followed by the id of the video to show a responsive YouTube frame.
{% features %}
| Use
features
block to list the features of your apps.
{% download type | url %} | Use
download
tag to render a button to download your app. Available options for
type
are
appstore
,
play
store
,
direct
, and
coming_soon`.

App's Images

When adding a new app, there are some images you need to prepare. You need to put these images in

images/app_name
folder.

Image Name

Size Description
preview.png 321 x 193 px This preview image is used on the landing page. It is positioned inside the device you chose for the app.
icon.png 512 x 512 px Icon of the app.
fb.png 1200 x 630 px The image for Facebook Open Graph.

Known Issue

  • If you got
    "Your site is having problems building: The tag img in _posts/2015-12-20-deep.markdown/#excerpt is not a recognized Liquid tag"
    , check out the workaround here.
  • If you're using Appolo for a Github Project Page, set the
    baseurl
    in
    _config.yml
    to
    //
    . So if you're project's URL is
    http(s)://.github.io/
    , the
    baseurl
    should be
    //
    . Check out the Appolo-demo repository and its corresponding page.

Credits

Images

Icons

LICENSE

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.