Comments (9)
Will do. Funnily enough , I was just looking at that plugin a few mins ago. It makes sense that the elements would overlap
from gatsby-theme-try-ghost.
Newsletter Feature
Here are some instructions on how to start developing this feature.
Frontend
- A subscribe button should be added to the top right nav bar as seen on the Ghost Demo.
- If the subscribe button is clicked, a new modal page opens where users can enter their email address (same as on Ghost Demo page).
Backend
- Upon submit a verification email is sent back to the user.
- After user has visited the confirmation link, you get an subscribe email for that user.
- An unsubscribe link should be automatically generated, which needs to be placed in every newsletter.
Guide for Development
General
-
Fork repo https://github.com/styxlab/gatsby-theme-try-ghost.git
- clone your fork locally
- cd into the cloned directory
-
Create a new package as follows (use gatsby-theme-ghost-contact as a template)
- cp packages/gatsby-theme-ghost-contact packages/gatsby-theme-ghost-newsletter
- Rename "ghost-contact" into "ghost-newsletter" in README, package.json and other files
- change version in package.json to 1.0.0
Frontend
-
Add Button to top right navbar: Look at package dark-mode and inspect how this package adds the sun/moon icon to the top right navbar. Use the same for "Subscribe button".
-
Design the modal page. I have not done that with Gastby so far (so you need to figure it out yourself). A starting point might be:
- https://markoskon.com/modals-in-gatsby/
- The markup for that page should look similar to subscribe-form.hbs
- This needs to be changed into a component similar to (https://github.com/styxlab/gatsby-theme-try-ghost/blob/master/packages/gatsby-theme-ghost-contact/src/components/common/ContactForm.js - should look a lot simpler as the form is simpler)
- This markup wil be styled correctly as the global css already includes code for that!
Note: Difficult part may be the modal window. An alternative could be to make a separate page, but the modal should be preferrable.
Backend
A first implementation should integrate with the external service MailChimp (as it seems to be the most commonly used option). This integration needs to be explored, maybe this is a good starting point:
email-signup-forms-with-gatsby-and-mailchimp
-
The component should be designed similar to ContactForm which contains the code that sends a post request to the backend (here mailchimp).
-
Mailchimp should do the backend work for you, but it should also be possible to connect to different service. Therefore, make the endpoint and encodings configurable. Look at the ghost-contact plugin to see how this is achieved.
-
In addition to Mailchimp, it should be possible to run your own server with Node.js and Express. Read the micro-service part of this tutorial to see an implementation for a contact form.
However, the microserver should be extended to handle: Sending Verification emails, generate Subscribe/unsubscribe tokens and links, only sends you an email after verification.
Merging
-
When everything is working: Make sure no code except in packages/gatsby-theme-ghost-newsletter has been changed, so this can be published as an addon-package.
-
Also make sure, everything is working, if the package is not installed.
-
Issue a PR from your fork to the main repo: I will then review and merge into the main branch.
As always
Make sure you break development into parts. I'm happy to look at finished parts, so they are complete before moving on. Don't hesitate to contact me, whenever you get stuck or just want to discuss details or strategy.
While putting these instructions together, I realize that this feature has some elements that go beyond the ghost-contact from package.
Happy coding ⌨️ 😉
from gatsby-theme-try-ghost.
Thanks for the positive feedback 😄
A newsletter signup is definitely on my feature list. As this is also a "good first issue" for first time contributors, I will write down some instructions on how such a feature should be implemented in order to fit into this project. Maybe you hear the call 😉?
from gatsby-theme-try-ghost.
A newsletter signup is definitely on my feature list. As this is also a "good first issue" for first time contributors, I will write down some instructions on how such a feature should be implemented in order to fit into this project. Maybe you hear the call wink?
I can have a crack at it. I am a JS and Gatsby novice but am willing to give it a shot if you put together some initial instruction.
from gatsby-theme-try-ghost.
That's great! I'll put some thorough instructions together later today.
In the meantime, have a look at package gatsby-theme-ghost-contact which contains all the elements needed for a newsletter signup.
I suggest you start by installing gatsby-theme-ghost-contact
on your blog (instructions are in the README) and once you got the contact page up and running, you'll have a look at the code.
from gatsby-theme-try-ghost.
Looks good.
One thing I didnt see in the description above is a subscribe "Widget" (sorry, I am coming from the WP world and not sure how Ghost terms these elements") which are at the bottom of a post:
(examples: https://demo.ghost.io/welcome/ https://demo.ghost.io/the-editor/)
I am guessing thats put into the Casper theme maybe through code injection? (the class is "subscribe-form" and I didnt see that in any of the available Integrations).
When you click the "Subscribe" button at the top right in the navbar, in the Overlay, it also initiates the "subscribe-form" class.
Any ideas on how the "widget" below the post should be handled?
from gatsby-theme-try-ghost.
Yes, it's the same form which is sourced in from post.hbs
:
// post.hbs
...
{{!-- Email subscribe form at the bottom of the page --}}
{{#if @labs.members}}
{{> subscribe-form}}
{{/if}}
...
You can do the same here. I will provide you with the anchors from the base theme for this integration and the one for the button later.
from gatsby-theme-try-ghost.
This feature is under active development. Note that the above implementation guide is out of date and that we have come up with a much easier approach.
from gatsby-theme-try-ghost.
First implementation finished and published. Further improvements will follow.
from gatsby-theme-try-ghost.
Related Issues (20)
- Integrate Handlebar Templating HOT 2
- support for ignoring http errors like 403 when try to download image HOT 6
- Certificate Has Expired HOT 2
- Issue with Gatsby v3 HOT 4
- hi, ive deploy it with netlify, how can i find the admin pannel? HOT 3
- Site-Logo-URL is not redirecting to siteURL in case base path set to '/blog' HOT 1
- Allow override title and description HOT 2
- Allow filtering of Ghost artifacts retrieval HOT 2
- Ghost post is not reflecting when working in dev mode HOT 6
- Not able to find gatsby-rehype-remote-images plugin HOT 2
- How to edit casper UI? HOT 4
- Error: url passed to createRemoteFileNode is either missing or not a proper web HOT 6
- No Fetched posts HOT 4
- Some images has processed srcset but only renders the placeholder HOT 4
- gatsby build issue and `gatsby-rehype-ghost-links` HOT 3
- API keys added to ghost,json HOT 1
- gatsby-rehype-ghost-links not rewriting urls HOT 9
- gatsby-transformer-rehype with custom plugin not working in Gatsby v3.14 HOT 1
- Support for Gatsby 4 HOT 5
- Errors on Development process HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-theme-try-ghost.