Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/getmindspun/ghost-theme-utils
Utility package to help users easily build Ghost themes.
https://github.com/getmindspun/ghost-theme-utils
ghost ghost-theme koenig theme
Last synced: 3 months ago
JSON representation
Utility package to help users easily build Ghost themes.
- Host: GitHub
- URL: https://github.com/getmindspun/ghost-theme-utils
- Owner: getmindspun
- License: mit
- Created: 2021-04-06T17:59:28.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-06-10T17:19:06.000Z (over 3 years ago)
- Last Synced: 2024-07-06T23:22:32.965Z (4 months ago)
- Topics: ghost, ghost-theme, koenig, theme
- Language: JavaScript
- Homepage:
- Size: 95.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - getmindspun/ghost-theme-utils - Utility package to help users easily build Ghost themes. (others)
README
ghost-theme-utils
Easily add Ghost functionality to custom themes.
See the blog article
[Everything you need to know about subscription forms in Ghost](https://www.mindspun.com/blog/ghost-subscription-forms/)
for a detailed explanation.
## What's included
* Base functional styles and javascript for subscribe forms.
* Message overlays e.g. for 'Thank you' pages after contact form submission.
* Generic Koenig styles - inclusion of _koenig.scss passes gscan.
Styles include the source SCSS files in addition to generated CSS.
## Demo
You can see this package in action in the following ways.
### Single page demo with simulated Ghost
* https://getmindspun.github.io/ghost-theme-utils/
This is the easiest way to explore the functionality provided by this package.
### As part of the Spin, the default Mindspun theme
* https://demo.mindspin/
## Usage
### From the CDN (recommended)
```html
```
```html
```
The packaged version of the CSS also contains the CSS
from [bootstrap-avatar](https://github.com/getmindspun/bootstrap-avatar). Usage of the above CDN does NOT require either
Bootstrap or jQuery.
### From source
The SCSS sources files may be included in a custom build as usual:
```scss
@import "node_modules/ghost-theme-utils/scss/subscribe"
```
Or you can use the standalone files from the `dist/` directory.
Technically you may add these file only on specific pages, but generally they are included in `default.hbs`
## Subscription
Here's how to get started using the subscription support in your theme.
### Add HTML messages
You need to add HTML to the theme to show the message both on email confirmation failure and error:
```html
```
These messages use Bootstrap classes for styling, but that isn't required.
### Test
During development, the easiest way to test is to navigate to the following URLs on your site:
**Success** : /?action=subscribe&success=true
**Failure** : /?action=subscribe&success=false
If all is working, you should see the corresponding message.
Of course, one deployed, test using the real subscription mechanism in Ghost.
## Forms
Here's how to integrate a contact form into your theme. Contact forms are the most common usage, but this methodology
works with any type of form you want to use.
### Create the form
```html
Name
Email
Message
Write to us
```
This example is the contact from and uses the
Mindspun form handler, but any form service will do. The important thing is to redirect
the user to the anchor #thank-you after form submission.
In this example, the user would be redirected to .
### Add the HTML message
After the form is submitted, a confirmation message is shown as an overlay. The first step is to add the HTML for the
message to the **page where you redirect the user**. Don't include the HTML
in the page containing the form (unless they are the same page). For example,
if your form lives at `/contact/` and you return the user to your
home page at `/` after form submission, then this HTML must be included in the home page.
```html
```
The small amount of Javascript in the link simply removes the anchor tag from the URL - in this case #thank-you. For
example if the page URL is `/#thank-you` which causes the overlay to be shown, then clicking the close button
will send the user back `/`.
### Test
You can test style of the 'thank-you' page by navigating to anchor directly.
From the above example, click on and
you'll see the contact form 'thank you' messages without actually
submitting the form.
## Development
```
npm run dev
```
---
This repository is maintained by [Mindspun](https://www.mindspun.com).