Cowboy Coder - v2

A simple and customizable ButterCMS theme, made with Angular 8

Table of contents

• Description
• Installation
• Usage
• Config
• License

Description

This project utilizes ButterCMS - a headless CMS providing a RESTful API for content management, allowing developers to focus only on designing the look.

Like and comment features use Facebook Social Plugin, allowing visitors to like and comment using their Facebook accounts. The Facebook Javascript SDK script, however, has not been included yet. To use these features, you will have to add the script with your Facebook app's ID into src/index.html by yourself.

This project includes an Angular 8 front end and an Express server for server-side rendering with Angular Universal.

Installation

git clone https://github.com/tranHieuDev23/CowboyCoder-v2.git
cd CowboyCoder-v2
npm install

Usage

• To build or serve the Angular 8 client: use the default Angular CLI commands ng build and ng serve.
• To build or serve the project with server-side rendering: npm run build:ssr and npm run serve:ssr.
• To build and serve the project immediately: npm start.

Config

src/configs/global-config.ts

Here you can find the many configurations relating to the blog's content:

Group	Value	Meaning
GENERAL_CONFIGS	BLOG_TITLE	The title of the blog, which will be displayed on the navbar and in some meta tags of the blog for SEO.
	BLOG_URL	The base URL of the blog.
	BLOG_DESCRIPTION	A short string to describe the blog, which will be displayed on the sidebar and in some meta tags of the blog for SEO.
	BLOG_FEATURE_IMAGE_URL	The URL to a feature image, which will be displayed on the sidebar and in some meta tags of the blog for SEO.
	SHOW_FIRST_NAME_FIRST	Boolean value indicating whether authors' names on this blog are displayed with first name first or second.
	CONTACTS	An object containing three values FACEBOOK, GITHUB and EMAIL, storing the URL to these contact addresses. They will be displayed in the footer.
	BUTTER_CMS_API_KEY	The API key to use ButterCMS's backend.
NAVBAR_CONFIGS	HOME_PAGE_TEXT	The text of the link to the Home page on the navbar.
	TAGS_LIST_PAGE_TEXT	The text of the link to the Tags List page on the navbar.
	ABOUT_PAGE_TEXT	The text of the link to the About page on the navbar
SIDEBAR_CONFIGS	ABOUT_BLOG_TEXT	The text of the title of the blog description section on the sidebar.
	FACEBOOK_PAGE_TEXT	The text of the title of the Facebook Page plugin on the sidebar
HOME_PAGE_CONFIGS	MAX_LATEST_POSTS	The number of latest posts to display.
	MAX_CATEGORY_LATEST_POSTS	The number of latest posts of each category to display.
	LATEST_POSTS_TEXT	The text of the title of the latest posts section on the Home page.
POST_PAGE_CONFIGS	PREVIOUS_POST_TEXT	The text of the link to the previous post on the Post page.
	NEXT_POST_TEXT	The text of the link to the next post on the Post page.
	ABOUT_AUTHOR_TEXT	The text of the title of the author description section on the sidebar.
ARCHIVE_PAGE_CONFIGS	ARCHIVE_PAGE_SIZE	The number of posts per page to display on the Archive pages of categories, tags and authors.
	ARCHIVE_PAGE_TITLE_CATEGORY	A function, receiving a category name and the current page number, to return the title of the Category Archive page.
	ARCHIVE_PAGE_TITLE_TAG	A function, receiving a tag name and the current page number, to return the title of the Tag Archive page.
	ARCHIVE_PAGE_TITLE_AUTHOR	A function, receiving an author name and the current page number, to return the title of the Author Archive page.
SEARCH_PAGE_CONFIGS	SEARCH_PAGE_TITLE	The title of the Search page.
	SEARCH_PAGE_SIZE	The number of search results to return on the Search page.
	NO_RESULT_TEXT	A string to display when there is no search result returned.
TAGS_LIST_PAGE_CONFIGS	TAGS_LIST_PAGE_TITLE	The title of the Tags List page.
ABOUT_US_PAGE_CONFIGS	ABOUT_PAGE_TITLE	The title of the About page.
	AUTHORS_LIST_TEXT	The title of the section displaying authors on the About page.

src/configs/about-page-content.html

Here you can edit the content inside About Page in HTML.

src/configs/footer-content.html

Here you can edit the content inside the footer in HTML.

src/configs/variables.scss

Here you can find the variables relating to the typefaces and colors of the blog.

License

MIT