CUSCA

A responsive theme for Ghost 3.x.

What that mean CUSCA?

Is the abbreviation for Cuscatlán, it was the name of El Salvador before the conquest and means "the land of precious things" in Nahuatl.

---

Introduction

Cusca was development using Foundation as base, the style is generated with Sass and the javascript is generated with Typescript and other cool stuff that comes from different libraries:

• Shuffle
• LightGallery.js
• FontAwesome
• Prism.js
• Color Thief
• Particles.js
• Ghost Search

All the help to contribute to the development or improvement of the theme is welcomed.

Installation

Inside the Ghost themes folder (content/themes) you have to clone the repository or download the last version:

⚓ Last release

git clone https://github.com/wdiazux/cusca.git

Setup

Disqus

Inside the post.hbs file you need to replace [your-disqus-name] with your Disqus name:

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.async = true;
    s.src = 'https://[your-disqus-name].disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

Do the same for partials/loop.hbs:

<script id="dsq-count-scr" src="//[your-disqus-name].disqus.com/count.js" async></script>

Search

The new release of the Ghost API v3, require extra steps that are NECESSARY for the search functionality:

• Go in your Ghost's dashboard -> Integrations -> Add custom integration
• Set a name: Themes Search
• Get the Content API Key and replace the demo key with this one
• Do the same with the API URL

The file to modify with this credentials is src/scripts/app.ts and at the end of the document is the Search section, and the parameter you need to change are the URL and Key from the GhostSearch class.

const ghostSearch = new GhostSearch({
    url: 'http://localhost:2368',
    key: '4f1476d8df3a9cd277b2273b6e',
});

You will need to rebuild the theme to make it work after modifying the parameters. In the end of this page you will find the commands that you need to do it.

Social Icons

Inside the partials/footer.hbs file replace [your-user] with your user names for each social network:

<li>
    <a href="https://www.youtube.com/[your-user]" target="_blank" rel="noopener" title="Youtube"><i class="fab fa-youtube"></i></a>
</li>
<li>
    <a href="https://www.facebook.com/[your-user]" target="_blank" rel="noopener" title="Facebook"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
    <a href="https://twitter.com/[your-user]" target="_blank" rel="noopener" title="Twitter"><i class="fab fa-twitter"></i></a>
</li>
<li>
    <a href="https://www.instagram.com/[your-user]" target="_blank" rel="noopener" title="Instagram"><i class="fab fa-instagram"></i></a>
</li>
<li>
    <a href="https://github.com/[your-user]" target="_blank" rel="noopener" title="Github"><i class="fab fa-github-alt"></i></a>
</li>
<li>
    <a href="https://www.linkedin.com/in/[your-user]" target="_blank" rel="noopener" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</li>

Google Analytics

Inside the partials/google_analytics.hbs file replace [your-ga-id] with your google analytics id:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', '[your-ga-id]', 'auto');
ga('send', 'pageview');

Modify the theme

You need to run a ghost instance in the port 2368 it is the default ghost port, the theme was development using Webpack, so first you need to install it and their dependencies with this command:

npm install

You also can use yarn instead of npm:

yarn install

Then you have four commands provided by the Webpack configuration file:

• npm run dev to compile files in development.
• npm run start for live development.
• npm run build to build a production environment.
• npm run test to test the theme with gscan.

If you are using yarn:

• yarn dev to compile files in development.
• yarn start for live development.
• yarn build to build a production environment.
• yarn test to test the theme with gscan.

If you are looking to modify the style or something in the scripts, the source files are in the src directory assets is the destination directory and it shouldn't be modified. This version use Typescript for javascript and SASS to generate CSS.

Copyright & License

• Copyright (c) 2017-2020 William Diaz - Released under the MIT license. This version is using the MIT license and the libraries are also MIT or compatibles with it.