• Stars
    star
    406
  • Rank 103,837 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Plugins and Themes for Jekyll to create App Portfolio for Developers

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 | relative_path_to_image | 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 youtube_id %} 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 app_store, 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 /<project_name>/. So if you're project's URL is http(s)://<username>.github.io/<projectname>, the baseurl should be /<projectname>/. Check out the Appolo-demo repository and its corresponding page.

Credits

Images

Icons

LICENSE

MIT

More Repositories

1

NPRImageView

Instagram-like UIImageView subclass. Progress view and activity view appear during image download. Support memory and disk caching. Inspired by FXImageView and Tapku's TKImageCache. Using AFNetworking.
Objective-C
77
star
2

iPad-iPhone-Photo-Booth--iPhone-as-Wireless-Cam-for-iPad-

iPad+iPhone Photo/Party Booth. Or basically use the iPhone camera and show the live view on the iPad
Objective-C
67
star
3

DLFPhotosPicker

Photos picker for iOS using iOS 8 Photos framework
Objective-C
63
star
4

next-secure-download

A Next.js project to serve a password-protected download link.
TypeScript
31
star
5

fastgrant

Fastlane actions to grant iOS permissions in iPhone Simulator.
Ruby
28
star
6

Oauth-Module-for-Parse-Cloud-Code

A modified version of node-oauth to use in Parse Cloud Code
JavaScript
19
star
7

swift-study-group-indonesia

Ngobrol2 bareng bahasa pemrograman Swift dan pengembangan aplikasi iOS/Mac mingguan online.
JavaScript
14
star
8

imsticker

Create iMessage Sticker Pack Xcode project with a single command
Ruby
13
star
9

Raftel-Manga-iOS-App

Raftel is iOS app to read manga
Objective-C
12
star
10

header-sticky-tab

A container view controller that displays children view controllers in tabs like the profile screen on Twitter or Instagram without any dependencies
Swift
12
star
11

NPCubeTransition

Category for cube transition between two uiviews. Support up and down flip atm. Just need to one line of code. iOS 5 banner notification-like effect.
Objective-C
10
star
12

turborepo-tailwind-prisma-nextjs-starter

A Turbo repo starter that includes Tailwind CSS, Prisma, and shared environment variables
TypeScript
10
star
13

turborepo-tailwind-prisma-i18n-nextjs-starter

Turbo repo starter that uses Prisma, Tailwind, and i18next
TypeScript
9
star
14

ComposerSheet

Composer sheet that looks similar with built in Twitter composer sheet on iOS written in Swift
Swift
8
star
15

FluidProgressIndicator

Objective-C
5
star
16

practical-ios-testing

This repo showcases some examples of testing code in iOS.
Objective-C
4
star
17

simple-i18n-next

A CLI to generate TypeScript code from translation files in JSON format and Markdown files for Next.js projects.
TypeScript
4
star
18

GoogleNowScroll

This is just a sample project showing how to create Google Now-like scrolling (for iPhone).
Objective-C
4
star
19

PPION-Website

A website I develop for Indonesian Student in Osaka-Nara Japan Association. Created using CodeIgniter 2 + Doctrine 2 + Twitter's Bootstrap
PHP
3
star
20

network-api-demo

Swift
3
star
21

Timezones-Property-List

Property List (plist) files that contain mapping from city names to timezones.
3
star
22

nesktop

Create offline "desktop" app using Next.js without Electron!
TypeScript
3
star
23

YAPDatabase-Experiment

iOS project to experiment with YAPDatabase, Mantle, and AFNetworking.
Objective-C
2
star
24

next-type-safe-routing

TypeScript
2
star
25

nico.fyi

My blog
MDX
2
star
26

swift-async-await-study

Swift
2
star
27

Trovebox-Vagrant

Vagrant files to setup and run Trovebox (previously OpenPhoto) server easily
2
star
28

spanduck

TypeScript
2
star
29

SWTokyo2012

SWTokyo2012 Mobile Personal Trainer iOS app
Objective-C
2
star
30

MantleTest

Objective-C
1
star
31

AnimeSwiftUI

Experimental project to play with SwiftUI
Swift
1
star
32

PlusLike

Chrome extension to add Facebook's "Like" button to Google+ Posts Stream.
JavaScript
1
star
33

kaomoji-web

http://kaomojiapp.com
PHP
1
star
34

og-screenshots

A CLI to take screenshots of websites and generate open graph images from your own computer.
TypeScript
1
star
35

test-next-ssr

JavaScript
1
star
36

check-airplane-mode-ios-experiment

Objective-C
1
star
37

swift-aws-lambda-sample

Shell
1
star
38

iOStickersTemplate

1
star
39

Aruku

Japanese-English Translation HTML5 App
JavaScript
1
star
40

react-stripe-checkout

A sample project for integrating Stripe Checkout with React (CRA) app
JavaScript
1
star
41

swiftui-accordion-view-sample

Swift
1
star
42

Nifty-CLI-scripts--Mac-

Some scripts that ease my life.
Shell
1
star
43

shadcn-form-builder

TypeScript
1
star