Generate SVG styled quotes
- Description
- How to use
- Example
- Visitor stats
- Licensing
- Authors
- Kubernetes
- Versioning
- Contribution
- Acknowledgement
- Forks
- Issues
- Team Tools
- OpenGraph Card
- Development Support
Styled Quotes is a serverless function that generates dynamically styled quote images based on SVG (Scalable Vector Graphics). For the tech stack, Styled Quotes using Typescript and serverless function from Vercel stack.
It's simple, you can copy-aste this markdown content, like this one:
![Styled Quotes](https://styled-quotes.vercel.app/api?theme=[value]&layout=[value]&animation=[value]&bgColor=[value]&opacity=[value]&colorPattern=[value]"eColor=[value]&authorColor=[value]&pattern=[pattern]&category=[value]&width=[width]&height=[height]&keywords=[keywords])
There are several options you can use from the list:
| Options | Description | Type | Example | Query Params |
|---|---|---|---|---|
| [Theme] | Theme of the image | String |
default_repocard | ?theme=[value] |
| [Layout] | Layout of the image | String |
churchill | &layout=[value] |
| [Animation] | Animation of the image | String |
grow_out_in | &animation=[value] |
| [Background Color] | Background color of the image | Hex color code |
ffffff | &bgColor=[value] |
| [Opacity Pattern] | Opacity of the background pattern | Float number |
0 - 1 | &opacity=[value] |
| [Color Pattern] | Color of the background pattern | Hex color code |
1abc9c | &colorPattern=[value] |
| [Quote Font Color] | Font color of the quote text | Hex color code |
000000 | "eColor=[value] |
| [Author Font Color] | Font color of the author text | Hex color code |
000000 | &authorColor=[value] |
| [Pattern] | Background pattern | String constant |
plus | &pattern=[value] |
| [Category] | Quote category | String constant |
programming | &category=[value] |
| [Width] | Image width | String |
100% | &width=[value] |
| [Height] | Image height | String |
100% | &height=[value] |
| [Keywords] | Quote keywords | String/String Array |
love | &keywords=[value] |
Here is a list of supported image themes:
| Name | Value |
|---|---|
| Default | default |
| Default repocard | default_repocard |
| Dark | dark |
| Radical | radical |
| Merko | merko |
| Gruvbox | gruvbox |
| Tokyo night | tokyonight |
| One dark | onedark |
| Cobalt | cobalt |
| Synth wave | synthwave |
| High contrast | highcontrast |
| Dracula | dracula |
| Prussian | prussian |
| Monokai | monokai |
| Vue | vue |
| Vue dark | vue_dark |
| Shades of purple | shades_of_purple |
| Night owl | nightowl |
| Buefy | buefy |
| Blue green | blue_green |
| Algolia | algolia |
| Great Gatsby | great_gatsby |
| Darcula | darcula |
| Bear | bear |
| Solarized dark | solarized_dark |
| Solarized light | solarized_light |
| Chartreuse dark | chartreuse_dark |
| Nord | nord |
| Gotham | gotham |
| Material pale night | material_palenight |
| Gray white | graywhite |
| Vision friendly dark | vision_friendly_dark |
| Ayu mirage | ayu_mirage |
| Midnight purple | midnight_purple |
| Calm | calm |
| Flag India | flag_india |
| Omni | omni |
| React | react |
| Jolly | jolly |
| Maroongold | maroongold |
| Yeblu | yeblu |
| Blueberry | blueberry |
| State orange | slateorange |
| Kacho ga | kacho_ga |
| Arabesque | arabesque |
List of supported image layouts:
| Name | Value |
|---|---|
| Default | default |
| Churchill | churchill |
| Pluto | pluto |
| Samuel | samuel |
| Socrates | socrates |
| Zues | zues |
List of supported image animations:
| Name | Value |
|---|---|
| Default | default |
| Grow-out-in | grow_out_in |
List of categories supported by Quotes API:
| Name | Value |
|---|---|
| General | general |
| Life | life |
| Love | love |
| Success | success |
| Motivation | motivation |
| Fun | fun |
| Movie | movie |
| Programming | programming |
| Entrepreneurship | entrepreneurship |
| Popular | popular |
| Humor | humor |
| Philosophy | philosophy |
| God | god |
| Inspire | inspire |
| Truth | truth |
| Wisdom | wisdom |
| Poetry | poetry |
| Romance | romance |
| Death | death |
| Happiness | happiness |
| Faith | faith |
| Hope | hope |
| Writing | writing |
| Religion | religion |
| Relationships | relationships |
| Spirituality | spirituality |
| Time | time |
| Knowledge | knowledge |
| Science | science |
| Social | social |
| Books | books |
| Health | health |
| Gratitude | gratitude |
| Courage | courage |
| Responsibility | responsibility |
| Anger | anger |
| Stress | stress |
| Sadness | sadness |
| Thinking | thinking |
| Travel | travel |
| French | french |
| Portuguese | portuguese |
Patterns in Quotes are provided by Hero Pattern package which is developed by Lowmess:
| Name | Value |
|---|---|
| Jigsaw | jigsaw |
| Overcast | overcast |
| Formal Invitation | formalInvitation |
| Topography | topography |
| Texture | texture |
| Jupiter | jupiter |
| Architect | architect |
| Cutout | cutout |
| Hideout | hideout |
| Graph Paper | graphPaper |
| Yyy | yyy |
| Squares | squares |
| Falling Triangles | fallingTriangles |
| Piano Man | pianoMan |
| Pie Factory | pieFactory |
| Dominos | dominos |
| Hexagons | hexagons |
| Charlie Brown | charlieBrown |
| Autumn | autumn |
| Temple | temple |
| Stamp Collection | stampCollection |
| Death Star | deathStar |
| Church on Sunday | churchOnSunday |
| I Like Food | iLikeFood |
| Overlapping Hexagons | overlappingHexagons |
| Four Point Stars | fourPointStars |
| Bamboo | bamboo |
| Bathroom Floor | bathroomFloor |
| CorkScrew | corkScrew |
| Happy Intersection | happyIntersection |
| Kiwi | kiwi |
| Lisbon | lisbon |
| Random Shapes | randomShapes |
| Steel Beams | steelBeams |
| Tiny Checkers | tinyCheckers |
| X Equals | xEquals |
| Anchors Away | anchorsAway |
| Bevel Circle | bevelCircle |
| Brick Wall | brickWall |
| Fancy Rectangles | fancyRectangles |
| Heavy Rain | heavyRain |
| Overlapping Circles | overlappingCircles |
| Plus | plus |
| Rounded Plus Connected | roundedPlusConnected |
| Volcano Lamp | volcanoLamp |
| Wiggle | wiggle |
| Bubbles | bubbles |
| Cage | cage |
| Connections | connections |
| Current | current |
| Diagonal Stripes | diagonalStripes |
| Flipped Diamonds | flippedDiamonds |
| Floating Cogs | floatingCogs |
| Glamorous | glamorous |
| Hounds tooth | houndstooth |
| Leaf | leaf |
| Lines In Motion | linesInMotion |
| Moroccan | moroccan |
| Morphing Diamonds | morphingDiamonds |
| Rails | rails |
| Rain | rain |
| Skulls | skulls |
| Squares In Squares | squaresInSquares |
| Stripes | stripes |
| Tic Tac Toe | ticTacToe |
| ZigZag | zigZag |
| Aztec | aztec |
| BankNote | bankNote |
| Boxes | boxes |
| Circles And Squares | circlesAndSquares |
| CircuitBoard | circuitBoard |
| Curtain | curtain |
| Diagonal Lines | diagonalLines |
| Endless Clouds | endlessClouds |
| Eyes | eyes |
| Floor Tile | floorTile |
| Groovy | groovy |
| Intersecting Circles | intersectingCircles |
| Melt | melt |
| Overlapping Diamonds | overlappingDiamonds |
| Parkay Floor | parkayFloor |
| Pixel Dots | pixelDots |
| Polka Dots | polkaDots |
| Signal | signal |
| Slanted Stars | slantedStars |
| Wallpaper | wallpaper |
These are examples of using Styled Quotes:
Styled Quotes is distributed under LGPL version 3 or later, [License]. LGPLv3 is additional permissions on top of GPLv3.
Styled Quotes is maintained by the following GitHub team-members:
with community support please contact with us if you have some question or proposition.
Running k8s cluster with tilt command by acquiring k8s deployment configuration:
tilt upShutting down k8s cluster with provisioned resources removal:
tilt down --delete-namespacesThe project uses SemVer for versioning. For the versions available, see the tags on this repository.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us (emoji key).
This project follows the all-contributors specification. Contributions of any kind are welcome!
See also the list of contributors who participated in this project.
Styled Quotes Team would like inform that JetBrains is helping by provided IDE to develop the application. Thanks to its support program for an Open Source projects!
Styled Quotes has experimental support for Gitpod, a pre-configured development environment that runs in your browser. To use Gitpod, click the button below and sign in with GitHub. Gitpod also offers a browser add-on, though it is not required.
Styled Quotes project is using Lunr search tool to index and query text data by keywords.
Like Styled Quotes ? Consider buying me a coffee :)
