Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devcycom/cycom
Website for Cycom
https://github.com/devcycom/cycom
esports html jekyll jekyll-blog jekyll-website
Last synced: about 2 months ago
JSON representation
Website for Cycom
- Host: GitHub
- URL: https://github.com/devcycom/cycom
- Owner: DevCycom
- License: gpl-3.0
- Created: 2020-02-07T18:47:41.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-29T11:50:02.000Z (about 4 years ago)
- Last Synced: 2024-11-14T22:37:11.108Z (about 2 months ago)
- Topics: esports, html, jekyll, jekyll-blog, jekyll-website
- Language: Handlebars
- Homepage: https://cycom.org
- Size: 85.4 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Cycom
## Demo
You can see Simply in action on my Page [Demo](https://godofredo.ninja)
If for some reason I'm using a theme other than simply. then you can see the screenshots in [behance](http://bit.ly/simply-from-github-to-behance)
## Featured
- Support for different [languages](http://themes.ghost.org/docs/i18n#section-how-to-add-any-language) (en - es - de - tr - fr-CA - ru)
- Light Mode / Dark Mode
- [AMP](https://github.com/godofredoninja/Hodor-AMP-Ghost) Template
- Very fast search engine
- Related Articles (6 articles)
- Different templates for the Home Page
- Different templates for publishing posts
- Include Google Analytics Tracking use (Google Tag Manager)
- Page for (Contact - Podcast - Tags - Authors - Newsletter)
- Previous and next Post
- YouTube Subscribe Button in video post Format
- Social Media
- Instagram Feed in footer of Post
- Page 404 (Multiple faces emoticons)
- Pagination Infinite Scroll
- Support Disqus comments
- Buttons to share Post
- YouTube, Vimeo, kickstarter, dailymotion => Responsive
- Varied colors to change the look of the theme
- Lazy load Image for better performance only in backgrounds
- Code syntax [Prismjs](http://prismjs.com/index.html#languages-list) Supported all syntax.
## Table of Contents
- [Web Browser Support for Simply](#web-browser-support-for-simply)
- [Ghost Settings](#ghost-settings)
- [Simply Settings](#simply-settings)
- [Social Media](#1-social-media)
- [YouTube Subscribe Button](#2-youtube-subscribe-button)
- [Instagram](#3-instagram)
- [Comments](#4-comments)
- [Search](#5-search)
- [Home](#home-page)
- [Default](#home-page)
- [Featured](#home-page)
- [Medium](#home-page)
- [Sidebar](#home-page)
- [Grid](#home-page)
- [Post](#post-format)
- [Default Post](##post-format)
- [Post Image](##post-format)
- [Post Video](##post-format)
- [Post Not Image](##post-format)
- [Page](#page)
- [Contact](#contact-page)
- [Newsletter](#newsletter-page)
- [Archive](#authors-page)
- [Authors](#authors-page)
- [Tags](#tags-page)
- [Podcast](#podcast-page)
- [Theme Translation](#theme-translation)
- [AMP](#amp)
- [Change Theme Color](#change-theme-color)
- [Tracking Google Tag Mananger](#tracking-google-tag-mananger)
- [PrismJS code syntax](#prismjs-code-syntax)
## Web Browser Support for Simply
Simply supports the following web [browsers](http://caniuse.com/#search=flexbox).
## Ghost Settings
Enable the following checkbox on the Labs page in the Ghost admin panel.
## Simply Settings
> You don't have to add all the Simply configurations. only the ones you need
### 1. Social Media
> Facebook and Twitter is not necessary because I use them from the ghost settings
Add the Social Links only for the services you want to appear in the header section of your website. Pay attention as enabling too many services will cause menu problems.
:arrow_right: `Dashboard -> Code injection -> Site Footer`
```html
var followSocialMedia = {
'youtube': ['YOUR_URL','YOUR_TITLE'],
'instagram': ['YOUR_URL','YOUR_TITLE'],
'github': ['YOUR_URL','YOUR_TITLE'],
'linkedin': ['YOUR_URL','YOUR_TITLE'],
'rss': ['YOUR_URL','YOUR_TITLE'],
/*
'snapchat': ['YOUR_URL','YOUR_TITLE'],
'dribbble': ['YOUR_URL','YOUR_TITLE'],
'spotify': ['YOUR_URL','YOUR_TITLE'],
'codepen': ['YOUR_URL','YOUR_TITLE'],
'behance': ['YOUR_URL','YOUR_TITLE'],
'flickr': ['YOUR_URL','YOUR_TITLE'],
'telegram': ['YOUR_URL','YOUR_TITLE'],
'vimeo': ['YOUR_URL','YOUR_TITLE'],
'twitch': ['YOUR_URL','YOUR_TITLE'],
'vk': ['YOUR_URL','YOUR_TITLE'],
'slack': ['YOUR_URL','YOUR_TITLE'],
'tumblr': ['YOUR_URL','YOUR_TITLE'],
'discord': ['YOUR_URL','YOUR_TITLE'],
*/
};
```
:point_right: For those who are commented it is necessary to add those icons through `SVG`
It is not necessary to add all the icons. Only the icons you need.
:arrow_right: `Dashboard -> Code injection -> Site Footer`
```html
discord
flickr
tumblr
dribbble
vk
slack
behance
spotify
codepen
twitch
vimeo
snapchat
telegram
```
### 2. YouTube Subscribe Button
Subscription Button of YouTube in Video Post Format. Add the Channel Name and Channel ID which can be found here [YouTube Advanced Settings](https://www.youtube.com/account_advanced)
:arrow_right: `Dashboard -> Code injection -> Site Footer`
```html
var youTube = {
name: 'YOUR_CHANNEL_NAME',
channelId: 'YOUR_CHANNEL_ID'
};
```
### 3. Instagram
> I get the last 10 images then show 6 randomly It will only be shown in the footer of the Post
First, you will need to get your account `userName` and `userId` and `accessToken` from the following URLs:
- userId: [codeofaninja.com/tools/find-instagram-user-id](https://codeofaninja.com/tools/find-instagram-user-id)
- accessToken: [instagram.pixelunion.net](http://instagram.pixelunion.net/)
:arrow_right: `Dashboard -> Code injection -> Site Footer`
```html
var instagramFeed = {
token: 'Token_app_instagram',
userId: 'User_ID',
userName: 'User_Name',
};
```
### 4. Comments
Simply supports Disqus comments
— First, you will need to get your account `disqusShortName`
:arrow_right: `Dashboard -> Code injection -> Site Footer`
```html
var disqusShortName = 'YOUR_DISQUS_SHORTCUT_HERE';
```
### 5. Search
> The default search engine will only search the titles of the post
**Setup a Custom integration**
1. Go in your Ghost's `dashboard -> Integrations -> Add custom integration`
2. Set a name: `GodoFredo Themes Search`
3. Get the Content API Key and replace the demo key with this one
4. Get the admin domain. This will be different in some cases
:arrow_right: `Dashboard -> Code injection -> Site Footer`
```html
var searchSettings = {
key: 'ADD_YOUR_API_KEY',
url: 'https://demo.ghost.io',
};
```
OR - Adding parameters to the search
```html
var searchSettings = {
key: 'ADD_YOUR_API_KEY',
url: 'https://demo.ghost.io',
/* This is optional */
options: {
keys: [
'title',
],
limit: 10,
},
/* This is optional to perform filtering of the ghost api */
api: {
resource: 'posts',
parameters: {
limit: 'all',
fields: ['title', 'slug'],
filter: '',
include: '',
order: '',
formats: '',
},
},
};
```
The search engine that includes Simply is very powerful, supports almost all languages and you can customize to your liking.
Read more about the search engine [Read More](https://github.com/HauntedThemes/ghost-search)
## Home Page
> Simply - come with 4 Home page with different layout options
- First back up your routes in your ghost settings `Labs -> Routes -> Download current routes.yml`
- Re-download the Route and edit `routes.yml` line `collections -> template`
- `index` — **Default**
- `godo-template-featured` — **With Featured Post**
- `godo-template-sidebar` — **Right Sidebar**
- `godo-template-grid` — **Grid 3 Cols**
- Once you have chosen save the file and upload again
- If do not observe changes restart ghost
- **Medium** - Rename the file `medium-home.hbs` to `home.hbs`
```yaml
collections:
/:
permalink: /{slug}/
template:
# - godo-template-grid
# - godo-template-featured
# - godo-template-sidebar
- index
```
[](https://www.behance.net/gallery/89129849/Simply-Home-Page-free-theme-for-Ghost)
[](https://www.behance.net/gallery/89129849/Simply-Home-Page-free-theme-for-Ghost)
## Post Format
Simply has different templates for post formats. I will mention some of them.
**Post Image** — The Featured image will become large size
**Post Not Image** — The featured image will not be displayed in the article (Post)
**Post Video** — The first video in the article will be large size. Supports formats
- vimeo
- Dailymotion
- YouTube
- kickstarter
> Add video where convenient. When you change the theme you will not have problems and not have Problem in your AMP Template
[](https://www.behance.net/gallery/89148887/Simply-Default-Post)
## Page
### Tags Page
> A page will be displayed with all tags sorted from highest to lowest number of articles.
- Create a new page
- Choose your favorite url and title
- Select the `Archive Tags` template from the Template dropdown
- Publish the page
- To add the page to the navigation
[](https://www.behance.net/gallery/89147093/Simply-Tags-Page)
## Authors Page
- Create a new page
- Choose your favorite url and title
- Select the `Archive Author` template from the Template dropdown
- Publish the page
- To add the page to the navigation
## Contact Page
- Create a new page
- Choose your favorite url and title
- Select the `Archive Contact` template from the Template dropdown
- Publish the page
- To add the page to the navigation
:arrow_right: Add your content and the contact form code using [FORMSPREE](https://formspree.io/) as a service. Please check the code example below.
```html
Send Message
```
:arrow_right: PHONE - ADDRESS - EMAIL
```html
PHONE
+51 987 659 249
+51 01 424 0827
ADDRESS
Parque de la Reserva, Jr. Madre de Dios, Cercado de Lima, Perú
```
:arrow_right: Google Maps
```html
ADD_YOUR_IFRAME_GOOGLE_MAPS
```
[](https://www.behance.net/gallery/89147807/Simply-Contact-Page)
## Newsletter Page
- Create a new page
- Choose your favorite url and title
- Select the `Archive Newsletter` template from the Template dropdown
- Write the list as normal in your content
- To have the **Mailchimp** form copy the code and add an `HTML` section in Ghost then change the form action url.
Example: ``
```html
Email Address
Subscribe
No marketing campaigns. No jibber jabber. Unsubscribe anytime.
```
- **Testimonies** Copy the code and paste into an `HTML` section in Ghost
```html
Tim Cook
CEO, Apple
"This is a pretty fantastic newsletter tbh, I definitely recommend it"
```
- Publish the page
- To add the page to the navigation
[](https://www.behance.net/gallery/89147477/Simply-Newsletter-Page)
## Podcast Page
- Create a new page
- Choose your favorite title
- Use the url `podcast`
- In your articles use the internal tags `#podcast`
- 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`
```yaml
routes:
/podcast/:
controller: channel
filter: tag:[hash-podcast]
data:
post: page.podcast
limit: 10
template: godo-podcast
```
- In an `HTML` block in your ghost editor add this code for your content.
```html
The Podcast
Updates and behind the scenes stories about the world of Ghost. Hosted by Ghost founders John O'Nolan & Hannah Wolfe.
```
[](https://www.behance.net/gallery/89147093/Simply-Tags-Page)
## Theme Translation
**Simply supports:**
- `en` — English default language
- `es` — Español
- `de` — German - By [dkbast](https://github.com/dkbast)
- `tr` — Turkish - By [Mertcan GÖKGÖZ](https://github.com/MertcanGokgoz)
- `fr-CA` — Canadian French - By [Pascal Andy](https://github.com/pascalandy)
- `ru` — Russian - By [Partizan007](https://github.com/partizan007)
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](https://www.w3schools.com/tags/ref_language_codes.asp) of the files to use (e.g.: `fr.json` for French, `zh.json` for Chinese, `ja.json` for Japanese)
## AMP
> Simply has a nice page for AMP
- Navigation
- links to followers in social media
- Tags
- Related Articles (6 articles)
- Buttons to share the article (Facebook - Twitter - Whatsapp)
To customize the AMP page [read here](https://github.com/godofredoninja/Hodor-AMP-Ghost)
## Change Theme Color
> It is very easy to customize with your favorite colors.
To change the color of the Simply theme select one of the theme styles below and copy it into the:
:arrow_right: `Setting -> Code Injection -> Blog Header`
```html
```
## Tracking Google Tag Mananger
Simply keeps track of the user's actions on the page, for example:
- Header
- Click Logo
- Click Menu Name
- Click Social Media
- Click Search
- Sidebar
- Click Sidebar post
- Click Name of the sidebar Tag Cloud
- Article
- Click Author Name
- Click Author Avatar
- Click Author Facebook
- Click Author Twitter
- Click Share
- Click Next Post
- Click Prev Post
- Click Related Post
- Click Name of Tag
- Click Comments Button
### Settings Google Tag Mananger
With [Google Tag Manager](https://tagmanager.google.com), there are a million different ways to make your tagging setup leaner and more flexible.
> I'll use an easy way to reduce redundancy here. It's the generic event tag 😊 you guessed it!
— What are you waiting? 🖐 hands in action.
#### First we'll create triggers
1. Click Triggers
2. New
3. Name of the Trigger
4. Select Custom Event
5. Name of the Event
— If you do not understand. look at the image
#### Second we'll create Tag
1. Click tags
2. New
3. Name of the Tag
4. Select Google Analytics
5. Track Type `Event`
6. `{{Event Category}}`
7. `{{Event Action}}`
8. `{{Event Label}}`
9. `{{Event Value}}`
10. Non-Interaction Hit `true`
11. Here you have to add your Google Analytics code. I have my Google Analytics code in a Global variable. I select my global variable
12. Triggering — Select the trigger we created first
— If you do not understand. look at the image
#### Third Insert code
🤔 *You can improve the code. I'll leave that to your imagination.*
:arrow_right: Copy the below script to `Settings -> Code Injection -> Blog Footer`
```html
/* Tracking With Google Tag Mananger */
var godoTracking = document.querySelectorAll('.godo-tracking');
godoTracking.forEach(function(item) {
item.addEventListener('click', function() {
var godoCategory = this.getAttribute('data-event-category');
var godoAction = this.getAttribute('data-event-action');
var godoLabel = this.getAttribute('data-event-label');
var godoValue = this.getAttribute('data-event-non-interaction');
dataLayer.push({
'event' : 'godoGhostEvent',
'eventCategory' : godoCategory,
'eventAction' : godoAction,
'eventLabel' : godoLabel,
'eventValue' : godoValue,
});
});
});
```
### PrismJS code syntax
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](http://prismjs.com/#languages-list)
### Credits
- [Hodor AMP](https://github.com/godofredoninja/Hodor-AMP-Ghost)
- [Normalize](https://necolas.github.io/normalize.css/)
- [Ghost Search](https://github.com/HauntedThemes/ghost-search)
- [Prismjs](http://prismjs.com/)
- [Medium Zoom](https://github.com/francoischalifour/medium-zoom)
- [Lazysizes](https://github.com/aFarkas/lazysizes)
- [Fonts](https://fonts.google.com/?query=domine&selection.family=Domine|Rubik)
- [Safari Light - Mockup](https://www.uplabs.com/posts/safari-light-version)
- [Safari Dark - Mockup](https://www.uplabs.com/posts/safari-dark-mode)
## Copyright & License
Copyright (c) 2017-2019 GodoFredo - Released under the [GPLv3 license](LICENSE)
