henrylin03/stoic-quotes

Stoic quotes whenever you seek guidance or contemplation.

Stoic Quotes

henrylin.io/stoic-quotes

Generator of handpicked quotes from the Stoics, written in HTML, CSS and vanilla JavaScript.

What is Stoicism?

According to Ryan Holiday, who runs Daily Stoic, the definition of Stoicism is:

We don't control what happens to us, but we control how we respond to what happens to us in this life

Here is a video of Ryan explaining it in a bit more detail:

Personally, Stoicism - especially Marcus Aurelius' Meditations - has provided the most impactful philosophical thoughts on my life, especially during tumultuous times. I want to share both my love for the Stoics, and the guidance it provided me, through this project. I hope it provides you solace as it did for me.

Contributing

Pull requests are welcome.

For major changes, please open an issue first to discuss what you would like to change.

License

MIT © henrylin03

stoic-quotes's Issues

as a user, i can go back to a previous quote that i just saw

if a user sees a quote previously, they should be able to go back and see that quote again

ideally, this is done by the user clicking "back" in their browser, rather than a "back" button within the app

fix images not showing in production

also includes favicon not showing

create contribution guide to welcome more quotes from other stoics

provide instructions and guidance on how to do

implement css animations in ui

background image changes (fade transition) to stoicism / philosophy related wallpapers with every generation of new quote

automate adding a greater number of quotes from various stoics

consider using one or combo of following:

1. sqlite database
2. json files (with beautifulsoup in python)
3. external apis (like quotable quotes api)

responsive font sizes - on smaller screens, reduce size of text

fix responsive design issues

related to #5

users can search for quotes

this can be based on:

• keywords
• themes
• authors

if there are tags, users should be able to click those tags to see other quotes of that type

theme in mantine instead of css

update theme and leverage in theme.ts instead of using css - this includes colour schemes and also font

fix unhandled runtime error with next.js

getting the following error and cannot resolve even if in branch (before merging pr #17) there was no issue

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "You have power over your mind - not outside events. Realise this, and you will find strength." Client: "Settle on the type of person you want to be and stick to it, whether alone or in company."

See more info here: https://nextjs.org/docs/messages/react-hydration-error

add quote symbols on background

attempting to recreate these in the existing app:

depending on author of quote, clicking button changes the background to image of author

• also fade in and fade out
• if there is no author, the background image defaults to the school of athens

add fade transition effects on quotes

WHEN user clicks "new quote" button, THEN a new quote is generated.

the existing quote and author fades out, and the new quote and author fades in

prevent the same quote from being shown in the last 5

enable download as wallpaper

on a quote that a user enjoys, the user can:

1. click a button
2. a modal pops up for user to select different wallpaper sizes (mobile or different desktops)
3. the user can then download that image in png format

allow sharing of quote

users can:

1. copy quote OR copy link to quote (this might be more difficult),
2. share on socials

separate github footer as a separate component from `QuoteBox.jsx` presentational component

as of #3, the link to github repository https://github.com/henrylin03 is part of QuoteBox.jsx presentational component, which should be separated

allow favouriting of quotes

currently unsure if a user should be able to just have in local storage, or be able to login and see their favourite quotes?