Code Monkey home page Code Monkey logo

lyra's Introduction

Lyra

A paid-members publication for Ghost. Can be used with no code knowledge required.

Installation instructions

  1. Download this theme
  2. Log into Ghost, and go to the Design settings area to upload the zip file
  3. Unzip the theme archive on your computer and locate the file called routes.yaml
  4. Inside Ghost admin, go to the Labs settings area and scroll down until you see the Custom Routes section
  5. Upload the routes.yaml from this theme

That's it! You now have a Ghost publication which supports free and paid memberships. If you need help, check out the Ghost members documentation or chat with other Ghost users on Ghost forum.

Screenshot of a subscribers only post

Upgrade instructions

  1. Download this theme and rename the zip for ease of identification in Ghost later. For example 2022-10-20_Lyra-main.zip
  2. Log into Ghost, 4. go to the Labs settings area and scroll down until you see the Routes section
  3. Download your current routes.yaml file
  4. Next go to the Design settings area and click Change Theme at the bottom of the navigation pane
  5. Click the Upload theme button in the top right and upload the zip file you downloaded and renamed earlier (for example 2022-10-20_Lyra-main.zip)
  6. You will now see two instances of Lyra similar to the screenshot below Themes list showing two copies of Lyra
  7. Ensure your new Lyra theme is active (based on the renamed zip from earlier, lyra (2020-10-31_Lyra-main) in the screenshot)
  8. Delete the previous Lyra theme (lyra (Lyra-master) in the screenshot) 9Upload routes.yaml as required (see Installation instructions above)

Development

Styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:

# Install
yarn

# Run build & watch for changes
$ yarn dev

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

The zip Gulp task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

yarn zip

PostCSS Features Used

  • Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
  • Variables - Simple pure CSS variables
  • Color Function

Copyright & License

Copyright (c) 2013-2022 Ghost Foundation - Released under the MIT license.

lyra's People

Contributors

allouis avatar daniellockyer avatar erisds avatar johnonolan avatar joncojonathan avatar kevinansfield avatar minimaluminium avatar naz avatar ndarilek avatar peterzimon avatar pieronoviello avatar rafaelstz avatar renovate-bot avatar renovate[bot] avatar rishabhgrg avatar sam-lord avatar stromfeldt avatar sudo-owen avatar theodorechu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lyra's Issues

Image sizes on page.hbs and post.hbs are not the same with Casper

On Lyra/page.hbs, lines 36-37, we have:

                            (max-width: 1170px) 700px,
                            1400px"

This is different from Lyra/post.hbs, lines 101-102:

                            (max-width: 1170px) 1170px,
                                2000px"

On Casper, they are the same. This is Casper/page.hbs, lines 36-37:

                            (max-width: 1170px) 1170px,
                            2000px"

This is Casper/post.hbs, lines 98-99:

                        (max-width: 1170px) 1170px,
                            2000px"

Should we update the lines on Lyra/page.hbs? Is there a reason for the image sizes on Lyra?

A paid publication theme VS. paid-members publication

Git repo description states "A paid publication theme for Ghost" which can be read as a "paid product". Based on the license its not. Readme does call it "a paid-members publication" which is more clear.

Suggested fix: change the repo description

Name Field in Sign Up form isn't digested into DB

Adding the input field for a username is supported in the form but when a user signs up and includes a name, it isn't registered into the DB.
<input data-members-name type="text" placeholder="Type your name..." required="true"/>

<form class="signup-form" data-members-form="signup">
            <h1 class="signup-title">Signup to {{@site.title}}</h1>
            <p>{{@site.description}}</p>
            <div class="signup-box">
                **<input data-members-name type="text" placeholder="Type your name..." required="true"/>**
                <input data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
                <button class="button primary" type="submit">
                    <span class="button-content">Continue</span>
                    <span class="button-loader">{{> "icons/loader"}}</span>
                </button>
            </div>
            <p><small>Already have an account? <a href="/signin/">Sign in</a></small></p>
            <div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
            <div class="message-error">Please enter a valid email address!</div>
        </form>

On a personal note, I would like to take this if only someone could point me in the right direction to where data-members-form is defined.

Unable to login as member

When i click on ligin link (received in email), it redirects to homepage with success message.
Not showing any logout and unable to access member only posts. (mean due to some reason its not creating session).
Any idea please??

Issue with Zapier "resource not found"

I'm trying to set up a Zap where when a member signs up, it goes to MailChimp as a new subscriber. I went through the process of setting up Ghost's half and tested with a success, I then went through Mailchimp's half with the same success.

The issue arises when I try to turn my Zap on and get the error "Resource not found". I have spoken to Zapier support and he can't find an issue on his end, but has found an issue with Ghost's API endpoint.

His latest response is as follows...

Yes this is a strange issue looking at the logs when the Zap is trying to start I am seeing that it is calling on your Ghost Account and it is then erroring after a Timeout stating "Received 404 code from https://blog.michaelbrooks.dev/ghost/api/v2/admin/webhooks/ after 607ms Received content "errors":"message":"Resource not found"

The strange thing is that the Zap can pull Sample Data, hence why I'm starting to think this may potentially be a bug.

However before going that route, I would like to rule out other factors. Can I get you to review this article https://zapier.com/help/troubleshoot/behavior/cant-turn-on-zap which is related to Zaps no turning on.

Can you see if any of the topics are true in your case?

One thing I saw in the Logs that may related to this is the word Pro come up in the error messages frequently. Does your subscription have to be paid/Pro on Ghost for external Apps can access its API, this may be something you may need to clarify with Ghost Support.

In the logs: Resource not found","context":null,"type":"NotFoundError","details":null,"pro"

Can I also get you to create the Zap from fresh and see if another instance of it can be turned on?

Thanks and I look forward to your response.

Best Regards,
Gary

I tried creating another Zap from scratch with the exact same issue. I am running the latest Ghost version hosted with Ghost.org and using version 1.0.0 of Lyra.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: node

Clicking "Magic Link" from e-mail after 10 minutes sends you to success page

Here are the steps to reproduce:

  1. Submit an e-mail into the subscriber form.
  2. Verify that you received the e-mail and wait 10 minutes
  3. After 10 minutes, click the link.

"You have successfully subscribed to "

The above message is displayed and the user thinks everything is great. But it's not, because the user passed the 10 minute mark and the e-mail did not go through. A separate issue should be that you only have those 10 minutes, and you can't turn it off.

Mobile Friendly Version?

The Lyra theme doesn’t really feel very mobile friendly. The top menu gets cut off, which is a pain. I depend on mobile users and want to make their experience the best possible experience. Is there a way to make the menu show up as a sort of compressed (stacked) menu, where users only have to click on the three horizontal lines for more menu options?

Custom base URL issue.

I created a post on the forum but haven't really found a resolution. The post can be seen here.

The issue within the codebase is that we use /signup instead of concat @site.url "/signup" so it doesn't really work with subdirectories. I fixed that on my end but the same issue I believe exists with emails and I can't really change those?

This is what the CTA in the email links to - https://tryindigo.com/blog/?token=TOKEN&action=signup and it ends up redirecting the user to https://tryindigo.com/signup instead of https://tryindigo.com/blog/signup.

Is this something I am expected to fix/handle on my own end because I am not sure if that's possible. Any help/pointers would be really appreciated because no one can sign in to the blog until this is fixed.

Thank you!

Secondary Navigation

Has Lyra been updated with secondary navigation compatibility? If not, how do we do that?

Search

I attempted to add Search360 to this theme using the Caspar description of how to do that.

I do get a search page - but no search box.

And the search page gives no results.

Are there plans to add a search function?

Gravatar not loading

Hi Ghost team,

Love the recent Gravatar addition.

It however does not render the gravatar, neither on my deployment, nor on lyra.ghost.io, see image for /account

And yes, I do have a gravatar for the email address I've used.

For testing purposes, one can test their email here: https://en.gravatar.com/site/check/

Screenshot 2020-02-27 at 18 25 13

Laggy/slow scroll (both Casper and Lyra themes effected)

There appears a laggy scroll in the themes for Ghost - tested on v3.0.

It's very hard to test on touchpad, especially Macbook touchpads since they are smooth. Test this with an external mouse, it's especially visible on Windows.

The lag appears on:

  • Casper themes WITH members enabled
  • Lyra themes WITH & WITHOUT members enabled. I tested both the plain Lyra theme and my own modified theme, the issue occurs on both.

The bad workaround: The lag seems to disappear on the Casper theme WHEN disabling members (not optimal).

Demonstration

Note that it's not exactly easy to see this issue, but you can kind of see it in the GIFs below. If you want a website to test, I suggest looking at ML From Scratch. The site is an example of laggy scroll with Lyra.


Casper with members disabled (smooth scroll, no issues):

casper-no-subs

Modified Lyra with Members enabled (laggy scroll):

lyra-subs

Outdated jQuery 3.4.1 in default.hbs

Chrome's Lighthouse audit identifies that jQuery 3.4.1 is in use and has vulnerabilities. A quick search of the code suggests jQuery 3.4.1 is called by default.hbs on line 67:

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>

According to jQuery, the following code would resolve the issue:

<script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
</script>

User signup flow problematic when the publication is free

I'm building a free publication (maurobanze.com) with newsletter functionality. Therefore, I'm using members functionality with Lyra theme. When a new member signs up, after clicking on the email confirmation link sent by email, they are directed to the "subscription plans" page, with the plans showing "0 usd/month". Clicking on the "Choose plan" button on either plan does nothing. The user still shows on the Members section within the admin, so they were successfully signed up. However, this is bad UX as the user is not sure that they have successfully subscribed to the publication (no success message).

In my opinion the solution should either be to not show the "subscription plans" page at all if no money is being charged for the publication (instead, replace it with a success message). Alternatively, direct the user to that same page, but make the buttons work. Choosing a plan shouldn't require users to input payment information in this case, as the publication is free.

Why not use Casper then if the publication is free? I need the membership functionality as the site is a newsletter.

Thank you

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository.

  • WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/deploy-theme.yml
  • actions/checkout v3
  • TryGhost/action-deploy-theme v1.6.3
.github/workflows/test.yml
  • actions/checkout v3
  • actions/setup-node v3
npm
package.json
  • @tryghost/release-utils 0.8.1
  • autoprefixer 10.4.14
  • beeper 2.1.0
  • cssnano 5.1.15
  • gscan 4.1.3
  • gulp 4.0.2
  • gulp-livereload 4.0.2
  • gulp-postcss 9.0.1
  • gulp-sourcemaps 3.0.0
  • gulp-uglify 3.0.2
  • gulp-util 3.0.8
  • gulp-watch 5.0.1
  • gulp-zip 5.1.0
  • postcss 8.4.21
  • postcss-color-function 4.1.0
  • postcss-custom-properties 11.0.0
  • postcss-easy-import 3.0.0

  • Check this box to trigger a request for Renovate to run again on this repository

Ability to have featured posts

I have a blog post that I set as featured within the admin section of Ghost and since then I've added more blog posts. My issue is that the latest posts are pushing my featured post down which I wasn't expecting.

Are featured posts implemented with the Lyra theme?

upgrade usage of TryGhost/action-deploy-theme from 1.0.0 which has broken

Forked this repo today, and the deploy workflow is broken.

Error from the GitHub action runner output:

Run TryGhost/[email protected]
  with:
    api-url: ***
    api-key: ***
(node:2779) UnhandledPromiseRejectionWarning: Error: GhostAdminAPI Config Invalid: @tryghost/admin-api requires a "key" in following format {A}:{B}, where A is 24 hex characters and B is 64 hex characters
    at GhostAdminAPI (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:6642:15)
    at new GhostAdminAPI (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:6588:16)
    at main (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:1207:17)
    at Object.104 (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:1231:2)
    at __webpack_require__ (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:22:30)
    at startup (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:37:19)
    at /home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:41:18
    at Object.<anonymous> (/home/runner/work/_actions/TryGhost/action-deploy-theme/v1.0.0/dist/index.js:44:10)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)

Upgrading to TryGhost/[email protected] worked fine for me.
Or, I see that https://github.com/TryGhost/Starter/blob/master/.github/workflows/deploy-theme.yml uses TryGhost/[email protected] , probably just staying in sync with upstream would be simpler

Preview a post in a members enabled app shows subscription notice.

I recently upgraded to Ghost 3.0 and moved to Lyra to have the option of allowing my users to sign up and noticed this issue while creating a new post today.

Steps to reproduce:

  1. Enable members
  2. Start writing a new post.
  3. Try to access the preview.

I am guessing this isn't the expected behavior and was wondering what the team thought about it. I've also been experiencing a couple of other small issues and am not quite sure about whether I should create a separate ticket for those. Let me know.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.