├── .github └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── content ├── about.mdx ├── contribute.mdx └── stacks │ └── algolia-site-search-full.mdx ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── netlify.toml ├── package-lock.json ├── package.json ├── plugins └── gatsby-transform-stacks │ ├── gatsby-node.js │ └── package.json ├── src ├── components │ ├── banner.js │ ├── footer.js │ ├── layout.js │ ├── mdx │ │ ├── github.js │ │ ├── stackshare.js │ │ └── tools.js │ ├── navbar.js │ ├── pages │ │ ├── content-docs-page.js │ │ ├── content-page.js │ │ ├── content-stacks-page.js │ │ └── readme-stacks-page.js │ ├── seo.js │ └── stacks │ │ ├── card.js │ │ ├── category.js │ │ ├── content-stack-hero.js │ │ ├── github-card.js │ │ ├── github-icon.js │ │ ├── readme-stack-hero.js │ │ ├── stack-card.js │ │ └── stackshare-card.js ├── css │ ├── bulma │ │ ├── _variables.sass │ │ └── bulma.sass │ ├── fonts │ │ ├── bebas.scss │ │ ├── bebas │ │ │ ├── 38FEED_0_0.woff │ │ │ └── 38FEED_0_0.woff2 │ │ ├── inter.css │ │ └── inter │ │ │ ├── Inter-Black.woff │ │ │ ├── Inter-Black.woff2 │ │ │ ├── Inter-BlackItalic.woff │ │ │ ├── Inter-BlackItalic.woff2 │ │ │ ├── Inter-Bold.woff │ │ │ ├── Inter-Bold.woff2 │ │ │ ├── Inter-BoldItalic.woff │ │ │ ├── Inter-BoldItalic.woff2 │ │ │ ├── Inter-ExtraBold.woff │ │ │ ├── Inter-ExtraBold.woff2 │ │ │ ├── Inter-ExtraBoldItalic.woff │ │ │ ├── Inter-ExtraBoldItalic.woff2 │ │ │ ├── Inter-ExtraLight-BETA.woff │ │ │ ├── Inter-ExtraLight-BETA.woff2 │ │ │ ├── Inter-ExtraLightItalic-BETA.woff │ │ │ ├── Inter-ExtraLightItalic-BETA.woff2 │ │ │ ├── Inter-Italic.woff │ │ │ ├── Inter-Italic.woff2 │ │ │ ├── Inter-Light-BETA.woff │ │ │ ├── Inter-Light-BETA.woff2 │ │ │ ├── Inter-LightItalic-BETA.woff │ │ │ ├── Inter-LightItalic-BETA.woff2 │ │ │ ├── Inter-Medium.woff │ │ │ ├── Inter-Medium.woff2 │ │ │ ├── Inter-MediumItalic.woff │ │ │ ├── Inter-MediumItalic.woff2 │ │ │ ├── Inter-Regular.woff │ │ │ ├── Inter-Regular.woff2 │ │ │ ├── Inter-SemiBold.woff │ │ │ ├── Inter-SemiBold.woff2 │ │ │ ├── Inter-SemiBoldItalic.woff │ │ │ ├── Inter-SemiBoldItalic.woff2 │ │ │ ├── Inter-Thin-BETA.woff │ │ │ ├── Inter-Thin-BETA.woff2 │ │ │ ├── Inter-ThinItalic-BETA.woff │ │ │ ├── Inter-ThinItalic-BETA.woff2 │ │ │ ├── Inter-italic.var.woff2 │ │ │ ├── Inter-upright.var.woff2 │ │ │ └── Inter.var.woff2 │ ├── layout.sass │ └── lib │ │ └── bulma-helpers │ │ └── bulma-helpers.css ├── favicon.png ├── images │ ├── awesome-logo.png │ ├── awesome-stacks-logo-github.png │ ├── awesome-stacks-logo-sunglasses.svg │ ├── awesome-stacks-logo.svg │ ├── awesome-stacks-stacked-logo.png │ ├── awesome-stacks-vertical-logo.png │ ├── developermode-logo.png │ ├── stackshare-logo-black.png │ └── stackshare-logo.png ├── pages │ ├── 404.js │ └── index.js ├── utils.js └── utils │ ├── github.js │ └── stackshare.js └── static └── images ├── awesome-stacks-twitter-card-large-v3.png ├── awesome-stacks-vertical-blue-logo.png └── awesometown.gif /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### For all PRs 2 | 3 | - [ ] I read the [Contribution Guide](CONTRIBUTING.md) 4 | 5 | ### For new stacks 6 | 7 | - [ ] I followed the [do's and don'ts](CONTRIBUTING.md#contributing-dos-and-donts) 8 | - [ ] This stack does not already exist 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | .env.development 57 | .env.* 58 | 59 | # gatsby files 60 | .cache/ 61 | public 62 | 63 | # Mac files 64 | .DS_Store 65 | 66 | # Yarn 67 | yarn-error.log 68 | .pnp/ 69 | .pnp.js 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at team@stackshare.io. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. 4 | 5 | ## tl;dr 6 | 7 | - Edit the README file 8 | - Add a new stack using markdown 9 | - Open a pull request 10 | - StackShare team approves or gives feedback on the PR 11 | - When merged, your stack will appear in the README and on [awesomestacks.dev](https://awesomestacks.dev/) 12 | 13 | ## What should I contribute? 14 | 15 | The goal of Awesome Stacks is to gather a variety of tech stacks that are widely recognized to be good at solving a particular problem or implementing a certain feature, like "user authentication" or "handling file uploads" or "adding site search" or "building mobile apps". Because there is usually more than one way to build a feature, there may be multiple awesome stacks with the same goal in mind, each one having a different approach and tools. 16 | 17 | In general, if you have a stack that you think works great for solving a particular problem, and there is some evidence that the community agrees, then we encourage you to submit it to Awesome Stacks so other developers will know about it. 🤘 18 | 19 | ## Adding an awesome stack 20 | 21 | To add an awesome stack to both the README and the website [awesomestacks.dev](https://awesomestacks.dev/), you will write markdown that conforms to a specific format and then open a pull request to propose your changes. You can do this entirely from github.com (see below) or clone the repository and edit locally. 22 | 23 | ## Stack markdown 24 | 25 | Here's what the markdown for a stack looks like, using "PWA with Gatsby" as an example. 26 | 27 | ```markdown 28 | ## PWA with Gatsby [↗](https://awesomestacks.dev/pwa-with-gatsby) 29 | 30 | Build a simple polling progressive web application with some great modern tech. 31 | 32 | - [Gatsby](https://gatsbyjs.org/) - [🛠](https://stackshare.io/gatsbyjs) - [🐙](https://github.com/gatsbyjs/gatsby) - Gatsby is a blazing fast modern site generator for React. 33 | - [Cloud Firestore](https://firebase.google.com/docs/firestore/) - [🛠️](https://stackshare.io/cloud-firestore) - A noSQL cloud database that exposes event listeners for real-time updates. 34 | - [Netlify](https://netlify.com/) - [🛠️](https://stackshare.io/netlify) - Netlify is a global CDN that makes continuous deployments as simple as a few clicks. 35 | - [styled components](https://www.styled-components.com/) - [🛠](https://stackshare.io/styled-components) - [🐙](https://github.com/styled-components/styled-components) - A react-specific css-in-js solution. 36 | 37 | #### Resources 38 | 39 | - [JAMstack PWA — Let’s Build a Polling App. with Gatsby.js, Firebase, and Styled-components](https://medium.com/@UnicornAgency/jamstack-pwa-lets-build-a-polling-app-with-gatsby-js-firebase-and-styled-components-pt-1-78a03a633092) 40 | ``` 41 | 42 | Here's a breakdown of all of the different elements in the markdown. 43 | 44 | ### Stack name 45 | 46 | This goes first. It must be an `H2` that contains a link. The link text is the name of the stack. This should be short and including something about the use case and/or solution, e.g. "User authentication with OAuth". 47 | 48 | The link should go to `https://awesomestacks.dev/{slug}` where slug is the URL-ized version stack name you've chosen (spaces converted to dashes, punctuation removed, all lowercase). E.g. `React and Firebase` becomes `react-and-firebase`. This is necessary so that the link goes to the correct page on the awesomestacks.dev site, which will be built automatically from the markdown you're creating! 49 | 50 | If you're having trouble coming up with the name, here's a quick guide: 51 | 52 | - If the stack is based on a boilerplate or starter kit, just call it that, e.g. "React Starter Kit" 53 | - If the stack is for a specific use case or task, write it like "*task* with *key tool(s)*", e.g. "Caching with Redis and Node.js" 54 | - Otherwise, just highlight the key tools: "Electron with Meteor and Electrify" 55 | 56 | ### Stack description 57 | 58 | In a paragraph under the description, please describe what the stack is used for. Mention if the stack is associated to a particular starter kit, boilerplate or other project. 59 | 60 | ### Tools 61 | 62 | Next, specify the key tools in the stack in an unordered list. 5 tools is the recommended maximum. Choose tools that complement each other and form the basis of the stack. 63 | 64 | For each tool, these elements can be provided: 65 | 66 | **Tool name and homepage** (required): The first link must be the name of the tool and a link to its homepage. If it doesn't have a homepage, you can point the link to its GitHub or StackShare page. 67 | 68 | **StackShare profile link** (optional): If the tool has a StackShare page, link to it next. Use the 🛠️ (`:hammer_and_wrench`) emoji as the link contents and the StackShare page (`https://stackshare.io/{tool}`) as the URL. 69 | 70 | **GitHub repository link** (optional): If the tool has a GitHub repository, link to it next using the 🐙 (`:octopus`) emoji as the link content. The link URL should be to the repository (`https://github.com/{owner}/{name}`). 71 | 72 | **Tool description** (required): After all of the links, please provide a short description of the tool. Stick to about 20 words or less. 73 | 74 | The markdown must follow these conventions precisely for the companion web site to build correctly, including the URLs provided for GitHub and StackShare pages. Don't worry if you won't get it right the first time, any errors will be detected in the pull request process and can be addressed there. 75 | 76 | ### Resources 77 | 78 | Underneath the tools, you can provide a list of resources to help developers learn more about the stack or get up and running quickly. Use an h4 heading called `Resources` followed by a list. 79 | 80 | ```markdown 81 | 82 | #### Resources 83 | 84 | - [JAMstack PWA — Let’s Build a Polling App. with Gatsby.js, Firebase, and Styled-components](https://medium.com/@UnicornAgency/jamstack-pwa-lets-build-a-polling-app-with-gatsby-js-firebase-and-styled-components-pt-1-78a03a633092) 85 | ``` 86 | 87 | ## Improving an awesome stack 88 | 89 | The process is roughly the same as creating the stack, but instead of creating a whole markdown block you will just add to or change one that already exists. We welcome contributions for adding additional tools or improving the descriptions of both stacks and tools. 90 | 91 | You can also add relevant content to the resources section - a guideline is that it should describe at least a few of the tools in the stack and how to integrate them (as opposed to just a tutorial for one tool). If you aren't yet ready to add an entire stack, this is a great way to make a first contribution! 92 | 93 | ## Contributing do's and don'ts 94 | 95 | - ✅ Do include at least 3 tools in your stack 96 | - ✅ Do include up to 10 of the most important and/or commonly used tools in the stack 97 | - ✅ Do submit stacks that represent a reusable pattern or architecture like LAMP or MEVN 98 | - ✅ Do submit stacks based on well-known starter kits and boilerplates (and link to the kit in the resources section) 99 | - ✅ Do link to the GitHub and StackShare profiles that exist for each tool 100 | - ❌ Don't submit a very generic stack like "Rails" or "React"; make it more specific ("React for doing X" or "React with tools X and Y") 101 | - ❌ Don't submit a stack you used to build a specific thing but isn't necessarily resuable - put that on [StackShare instead](https://stackshare.io/) 102 | - ❌ Don't edit a stack without opening an issue first explaining why a tool needs to be added/removed/replaced. PR's will be closed otherwise. 103 | 104 | ## Tip: finding tool links 105 | 106 | To quickly locate the right pages for the tools you're adding, here are two handy links: 107 | 108 | - [GitHub search page](https://github.com/search) 109 | - [StackShare search page](https://stackshare.io/search) 110 | 111 | ## Editing and opening a pull request on GitHub 112 | 113 | If you have something awesome to contribute to an awesome stack, this is a way to do it all from github.com. 114 | 115 | You'll need a [GitHub account](https://github.com/join)! 116 | 117 | 1. Go to: https://github.com/stackshareio/awesome-stacks 118 | 2. Click on the `README.md` file: ![Step 2 Click on Readme.md](https://cloud.githubusercontent.com/assets/170270/9402920/53a7e3ea-480c-11e5-9d81-aecf64be55eb.png) 119 | 3. Now click on the edit icon. ![Step 3 - Click on Edit](https://cloud.githubusercontent.com/assets/170270/9402927/6506af22-480c-11e5-8c18-7ea823530099.png) 120 | 4. You can start editing the text of the file in the in-browser editor. Make sure you follow guidelines above. You can use [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). ![Step 4 - Edit the file](https://cloud.githubusercontent.com/assets/170270/9402932/7301c3a0-480c-11e5-81f5-7e343b71674f.png) 121 | 5. Say why you're proposing the changes, and then click on "Propose file change". ![Step 5 - Propose Changes](https://cloud.githubusercontent.com/assets/170270/9402937/7dd0652a-480c-11e5-9138-bd14244593d5.png) 122 | 6. Submit the [pull request](https://help.github.com/articles/using-pull-requests/)! 123 | 124 | ## Updating your Pull Request 125 | 126 | Sometimes, a maintainer of an awesome list will ask you to edit your Pull Request before it is included. This is normally due to spelling errors or because your PR didn't match the awesome-* list guidelines. 127 | 128 | [Here](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) is a write up on how to change a Pull Request, and the different ways you can do that. 129 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | Pink sunglasses with text Awesome Stacks 3 |

4 | 5 |
6 | 7 | # Awesome Stacks 8 | [![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/stackshare/awesome-stacks) 9 | 10 | > Tech stacks for building different applications and features. 11 | 12 | ## Contents 13 | 14 | - [Front-end](#front-end) 15 | - [Full stack](#full-stack) 16 | - [Back-end](#back-end) 17 | - [Mobile](#mobile) 18 | 19 | Awesome Stacks is a community-curated list of tech stacks for building different applications and features. It is open source and inspired by the original [awesome list](http://awesome.re/). 20 | 21 | Each stack in the list has a name, description, and list of a few of the key tools and technologies. Optionally, it links to a tutorial, starter kit or boilerplate that makes it easy to get started with. 22 | 23 | Got a stack you think is a great way to build something? Please edit this file and add it! Check out [CONTRIBUTING.md](CONTRIBUTING.md) for more information. 24 | 25 | #### Browsing the stacks 26 | 27 | Stacks can be browsed in two places—on the README and on [awesomestacks.dev](https://awesomestacks.dev/). The site, built with Gatsby and React, displays logos and metrics about each tool listed in the README by pulling data from the GitHub and StackShare APIs. 28 | 29 | #### Legend 30 | 31 | 🛠 - StackShare tool profile
32 | 🐙 - GitHub repository 33 | 34 | ## Front-end 35 | 36 | ### React Next Boilerplate [↗](https://awesomestacks.dev/react-next-boilerplate) 37 | 38 | A basis for reducing the configuration of your projects with Next.js, best development practices and popular libraries in the developer community. 39 | 40 | - [Next.js](https://nextjs.org/) - [🛠](https://stackshare.io/next-js) - [🐙](https://github.com/zeit/next.js) - The React Framework for server rendering, static websites, PWAs. 41 | - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) - [🛠](https://stackshare.io/react-testing-library) - [🐙](https://github.com/testing-library/react-testing-library) - react-testing-library is a tool in the Testing Frameworks category of a tech stack. 42 | - [Emotion](https://emotion.sh/) - [🛠](https://stackshare.io/emotion) - [🐙](https://github.com/emotion-js/emotion) - CSS-in-JS library designed for high performance style composition. 43 | - [I18next](https://www.i18next.com/) - [🐙](https://github.com/i18next/i18next) - I18next is an internationalization-framework written in and for JavaScript. But it's much more than that. 44 | - [Redux Saga](https://redux-saga.js.org/) - [🐙](https://github.com/redux-saga/redux-saga) - is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures. 45 | 46 | ##### Resources 47 | 48 | - [react-next-boilerplate](https://github.com/react-next-boilerplate/react-next-boilerplate) 49 | 50 | ### React starter kit [↗](https://awesomestacks.dev/react-starter-kit) 51 | 52 | React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. 53 | 54 | - [React](https://reactjs.org/) - [🛠](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - React components can be used on the client and server side. 55 | - [Webpack](https://webpack.js.org/) - [🛠️](https://stackshare.io/webpack) - [🐙](https://github.com/webpack/webpack) - A static module bundler for modern JavaScript applications. 56 | - [GraphQL](https://graphql.org/) - [🛠](https://stackshare.io/graphql) - [🐙](https://github.com/graphql/graphql-js) - A query language for APIs and a runtime for fulfilling those queries with your existing data. 57 | - [Babel](https://babeljs.io/) - [🛠️](https://stackshare.io/babel) - [🐙](https://github.com/babel/babel) - A JavaScript compiler; use next generation JavaScript, today. 58 | - [Express](https://expressjs.com/) - [🛠️](https://stackshare.io/expressjs) - [🐙](https://github.com/expressjs/express) - A minimal and flexible Node.js web application framework. 59 | - [Node.js](https://nodejs.org/) - [🛠️](https://stackshare.io/nodejs) - [🐙](https://github.com/nodejs/node) - A JavaScript runtime built on Chrome's V8 JavaScript engine. 60 | 61 | ##### Resources 62 | 63 | - [react-starter-kit](https://github.com/kriasoft/react-starter-kit) 64 | 65 | ### React Firebase starter [↗](https://awesomestacks.dev/react-firebase-starter) 66 | 67 | React Starter Kit for Firebase is a popular project template (aka, boilerplate) for building modern, scalable web applications with React, Relay, and GraphQL using serverless infrastructure provided by Google Cloud (Cloud SQL, Cloud Functions, CDN hosting, and file storage). 68 | 69 | - [Firebase](https://firebase.google.com/) - [🛠️](https://stackshare.io/firebase) - A cloud-hosted NoSQL database that lets you store and sync data between your users in real-time. 70 | - [Create React App](https://facebook.github.io/create-react-app/) - [🛠](https://stackshare.io/create-react-app) - [🐙](https://github.com/facebook/create-react-app) - Set up a modern web app by running one command. 71 | - [Material UI](https://material-ui.com/) - [🛠️](https://stackshare.io/material-ui) - [🐙](https://github.com/mui-org/material-ui) - React components that implement Google's Material Design. 72 | - [Relay](https://facebook.github.io/relay/) - [🛠️](https://stackshare.io/relay) - [🐙](https://github.com/facebook/relay) - A JavaScript framework for building data-driven React applications. 73 | - [GraphQL](https://graphql.org/) - [🛠](https://stackshare.io/graphql) - [🐙](https://github.com/graphql/graphql-js) - A query language for APIs and a runtime for fulfilling those queries with your existing data. 74 | 75 | ##### Resources 76 | 77 | - [react-firebase-starter](https://github.com/kriasoft/react-firebase-starter) 78 | 79 | ### vue-starter [↗](https://awesomestacks.dev/vue-starter) 80 | 81 | The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices. 82 | 83 | - [Vue.js](https://vuejs.org/) - [🛠️](https://stackshare.io/vue-js) - [🐙](https://github.com/vuejs/vue) - An approachable core library that focuses on the view layer only. 84 | - [TypeScript](https://www.typescriptlang.org/) - [🛠️](https://stackshare.io/typescript) - [🐙](https://github.com/Microsoft/TypeScript) - A typed superset of JavaScript that compiles to plain JavaScript. 85 | - [Jest](https://jestjs.io/) - [🛠️](https://stackshare.io/jest) - [🐙](https://github.com/facebook/jest) - A comprehensive, delightful JavaScript testing solution. 86 | - [Prettier](https://prettier.io/) - [🛠️](https://stackshare.io/prettier) - [🐙](https://github.com/prettier/prettier) - An opinionated code formatter. 87 | - [Vuex](https://vuex.vuejs.org/) - [🐙](https://github.com/vuejs/vuex) - Centralized State Management for Vue.js. 88 | - [Vue Router](https://router.vuejs.org/) - [🐙](https://github.com/vuejs/vue-router) - Vue Router is the official router for Vue.js. 89 | 90 | ##### Resources 91 | 92 | - [vue-starter](https://vue-starter.herokuapp.com/docs/) 93 | 94 | ### Vue Enterprise Boilerplate [↗](https://awesomestacks.dev/vue-enterprise-boilerplate) 95 | 96 | An ever-evolving and opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3. 97 | 98 | - [Vue.js](https://vuejs.org/) - [🛠️](https://stackshare.io/vue-js) - [🐙](https://github.com/vuejs/vue) - An approachable core library that focuses on the view layer only. 99 | - [Vuex](https://vuex.vuejs.org/) - [🐙](https://github.com/vuejs/vuex) - Centralized State Management for Vue.js. 100 | - [Vue Router](https://router.vuejs.org/) - [🐙](https://github.com/vuejs/vue-router) - Vue Router is the official router for Vue.js. 101 | - [Vue CLI](https://cli.vuejs.org/) - [🐙](https://github.com/vuejs/vue-cli) - An approachable core library that focuses on the view layer only. 102 | - [Babel](https://babeljs.io/) - [🛠️](https://stackshare.io/babel) - [🐙](https://github.com/babel/babel) - compiler for writing next generation JavaScript; Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support. 103 | - [Sass](https://sass-lang.com) - [🛠️](https://stackshare.io/sass) - [🐙](https://github.com/sass/sass) - Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. 104 | 105 | ##### Resources 106 | 107 | - [vue-enterprise-boilerplate](https://github.com/chrisvfritz/vue-enterprise-boilerplate) 108 | 109 | ### Progressive Web App with Gatsby [↗](https://awesomestacks.dev/progressive-web-app-with-gatsby) 110 | 111 | Build a simple polling progressive web application with some great modern tech. 112 | 113 | - [Gatsby](https://gatsbyjs.org/) - [🛠](https://stackshare.io/gatsbyjs) - [🐙](https://github.com/gatsbyjs/gatsby) - Gatsby is a blazing fast modern site generator for React. 114 | - [Cloud Firestore](https://firebase.google.com/docs/firestore/) - [🛠️](https://stackshare.io/cloud-firestore) - A noSQL cloud database that exposes event listeners for real-time updates. 115 | - [Netlify](https://netlify.com/) - [🛠️](https://stackshare.io/netlify) - Netlify is a global CDN that makes continuous deployments as simple as a few clicks. 116 | - [styled components](https://www.styled-components.com/) - [🛠](https://stackshare.io/styled-components) - [🐙](https://github.com/styled-components/styled-components) - A react-specific css-in-js solution. 117 | - [Contentful](https://www.contentful.com/) - [🛠](https://stackshare.io/contentful) - [🐙](https://github.com/contentful) - Contentful is a flexible and future-friendly content platform that helps editors to manage and developers to serve content into mobile or web applications. Last but not least a powerhouse when worked with Gatsby. 118 | 119 | ##### Resources 120 | 121 | - [JAMstack PWA — Let’s Build a Polling App. with Gatsby.js, Firebase, and Styled-components](https://medium.com/@UnicornAgency/jamstack-pwa-lets-build-a-polling-app-with-gatsby-js-firebase-and-styled-components-pt-1-78a03a633092) 122 | - [Learn how to easily build a GatsbyJS website powered by Contentful](https://www.contentful.com/r/knowledgebase/gatsbyjs-and-contentful-in-five-minutes/) 123 | 124 | 125 | ### Victor Hugo boilerplate [↗](https://awesomestacks.dev/victor-hugo-boilerplate) 126 | 127 | A Hugo boilerplate for creating truly epic websites. This is a boilerplate for using Hugo as a static site generator and Webpack as your asset pipeline. 128 | 129 | - [Hugo](https://gohugo.io/) - [🛠](https://stackshare.io/hugo_2)- [🐙](https://github.com/gohugoio/hugo) - The world’s fastest framework for building websites. 130 | - [Webpack](https://webpack.js.org/) - [🛠️](https://stackshare.io/webpack) - [🐙](https://github.com/webpack/webpack) - A static module bundler for modern JavaScript applications. 131 | - [Babel](https://babeljs.io/) - [🛠️](https://stackshare.io/babel) - [🐙](https://github.com/babel/babel) - A JavaScript compiler; use next generation JavaScript, today. 132 | - [PostCSS](https://postcss.org/) - [🛠](https://stackshare.io/postcss) - [🐙](https://github.com/postcss/postcss) - A tool for transforming CSS with JavaScript. 133 | 134 | ##### Resources 135 | 136 | - [netlify-templates/victor-hugo](https://github.com/netlify-templates/victor-hugo) 137 | 138 | 139 | ### Nuxt, TypeScript + Docker [↗](https://awesomestacks.dev/nuxt-type-script-docker) 140 | 141 | Bleeding edge vue template focused on code quality and developer happiness. 142 | 143 | Offers a complete setup for both small and enterprise-scale apps. 144 | 145 | - [Nuxt](https://nuxtjs.org/) - [🛠](https://stackshare.io/nuxt) - [🐙](https://github.com/nuxt/nuxt.js) - Vue.js Meta Framework to create complex, fast & universal web applications quickly. 146 | - [TypeScript](https://www.typescriptlang.org/) - [🛠️](https://stackshare.io/typescript) - [🐙](https://github.com/Microsoft/TypeScript) - A typed superset of JavaScript that compiles to plain JavaScript. 147 | - [Sass](https://sass-lang.com) - [🛠️](https://stackshare.io/sass) - [🐙](https://github.com/sass/sass) - Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. 148 | - [Jest](https://jestjs.io/) - [🛠️](https://stackshare.io/jest) - [🐙](https://github.com/facebook/jest) - A comprehensive, delightful JavaScript testing solution. 149 | - [eslint](https://eslint.org/) - [🛠️](https://stackshare.io/eslint) - [🐙](https://github.com/eslint/eslint) - The pluggable linting utility for JavaScript and JSX. 150 | - [stylelint](https://stylelint.io/) - [🛠️](https://stackshare.io/stylelint) - [🐙](https://github.com/stylelint/stylelint) - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. 151 | - [Docker](https://www.docker.com/) - [🛠](https://stackshare.io/docker) - [🐙](https://github.com/docker/docker) A tool to create, deploy and run applications inside containers. 152 | 153 | ##### Resources 154 | 155 | - [wemake-vue-template](https://github.com/wemake-services/wemake-vue-template) 156 | 157 | 158 | ### Nextjs Blog Starter [↗](https://awesomestacks.dev/nextjs-blog-starter) 159 | 160 | A Nextjs Boilerplate code for creating a blog. The perfect solution to start a blog in React and use Tailwind CSS for styling. 161 | 162 | - [Next.js](https://nextjs.org/) - [🛠](https://stackshare.io/next-js) - [🐙](https://github.com/zeit/next.js) - The React Framework for server rendering, static websites, PWAs. 163 | - [React](https://reactjs.org/) - [🛠](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - React components can be used on the client and server side. 164 | - [TypeScript](https://www.typescriptlang.org/) - [🛠️](https://stackshare.io/typescript) - [🐙](https://github.com/Microsoft/TypeScript) - A typed superset of JavaScript that compiles to plain JavaScript. 165 | - [eslint](https://eslint.org/) - [🛠️](https://stackshare.io/eslint) - [🐙](https://github.com/eslint/eslint) - The pluggable linting utility for JavaScript and JSX. 166 | - [Babel](https://babeljs.io/) - [🛠️](https://stackshare.io/babel) - [🐙](https://github.com/babel/babel) - A JavaScript compiler; use next generation JavaScript, today. 167 | - [PostCSS](https://postcss.org/) - [🛠](https://stackshare.io/postcss) - [🐙](https://github.com/postcss/postcss) - A tool for transforming CSS with JavaScript. 168 | - [Netlify](https://netlify.com/) - [🛠️](https://stackshare.io/netlify) - Netlify is a global CDN that makes continuous deployments as simple as a few clicks. 169 | 170 | ##### Resources 171 | 172 | - [Nextjs Blog Starter](https://github.com/ixartz/Next-js-Blog-Boilerplate) 173 | - [Nextjs Blog Starter Demo](https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/) 174 | 175 | 176 | ## Full stack 177 | 178 | ### MERN: Mongo Express React Node [↗](https://awesomestacks.dev/mern-mongo-express-react-node) 179 | 180 | MERN stands for MongoDB, Express, React, Node. The four key technologies that make up the stack. 181 | 182 | - [React](https://reactjs.org/) - [🛠](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - React components can be used on the client and server side. 183 | - [MongoDB](https://www.mongodb.com/) - [🛠️](https://stackshare.io/mongodb) - [🐙](https://github.com/mongodb/mongo) - A document and JSON-oriented database. 184 | - [Express](https://expressjs.com/) - [🛠️](https://stackshare.io/expressjs) - [🐙](https://github.com/expressjs/express) - Fast, unopinionated, minimalist web framework for Node.js. 185 | - [Node.js](https://nodejs.org/en/) - [🛠️](https://stackshare.io/nodejs) - [🐙](https://github.com/nodejs/node) - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. 186 | 187 | ##### Resources 188 | 189 | - [Learn the MERN stack by building an exercise tracker — MERN Tutorial](https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1) 190 | 191 | ### GraphCMS React + Apollo [↗](https://awesomestacks.dev/graph-cms-react-apollo) 192 | 193 | Lightning fast starter for bloggers, content creators, and really anyone who wants to break free from WordPress. 194 | 195 | - [GraphCMS](https://graphcms.com/) - [🛠️](https://stackshare.io/graphcms) - GraphCMS providing a backend to your app, giving you the tools to manage content. 196 | - [Create React App](https://facebook.github.io/create-react-app/) - [🛠](https://stackshare.io/create-react-app) - [🐙](https://github.com/facebook/create-react-app) - Set up a modern web app by running one command. 197 | - [Apollo](https://www.apollographql.com/) - [🛠️](https://stackshare.io/apollo) - [🐙](https://github.com/apollographql/apollo-client) - Apollo Client is the best way to use GraphQL to build client applications. 198 | 199 | ##### Resources 200 | 201 | - [GraphCMS starter blog with React & Apollo Client](https://github.com/GraphCMS/graphcms-examples/tree/master/with-reactjs) 202 | 203 | ### Strapi CMS with Gatsby [↗](https://awesomestacks.dev/strapi-cms-with-gatsby) 204 | 205 | Use Strapi CMS to maintain and manage your Gatsby static site. Deploy to Heroku. 206 | 207 | - [Strapi CMS](https://strapi.io) - [🐙](https://github.com/strapi/strapi) - Strapi is the Headless CMS developers love. 208 | - [Gatsby](https://gatsbyjs.org/) - [🛠](https://stackshare.io/gatsbyjs) - [🐙](https://github.com/gatsbyjs/gatsby) - Gatsby is a blazing fast modern site generator for React. 209 | - [Heroku](https://www.heroku.com/) - [🛠️](https://stackshare.io/heroku) - Heroku is a powerful platform for deploying your apps. 210 | 211 | ##### Resources 212 | 213 | - [Building a Static Blog using Gatsby and Strapi](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi/) 214 | - [Learn Gatsby with Strapi Headless CMS Video Series](https://www.youtube.com/playlist?list=PL7Q0DQYATmvgGiz0MbbsMA_aB1V0yLE7a) 215 | - [Deploying Strapi to Heroku](https://strapi.io/documentation/3.x.x/guides/deployment.html#heroku) 216 | 217 | ### Algolia site search [↗](https://awesomestacks.dev/algolia-site-search) 218 | 219 | Add search to your JAMStack website, through a static site integration or by crawling the content. 220 | 221 | - [Algolia](https://algolia.com/) - [🛠](https://stackshare.io/algolia) - Hosted search API, free up to 10,000 records. 222 | - [DocSearch](https://community.algolia.com/docsearch) - [🐙](https://github.com/algolia/docsearch-scraper) - Crawls a website and uploads it to an index. 223 | - [gatsby-plugin-algolia](https://www.gatsbyjs.org/packages/gatsby-plugin-algolia/) - [🐙](https://github.com/algolia/gatsby-plugin-algolia) - Use GraphQL to specify Gatsby object to index with Algolia (beta). 224 | - [hugo-algolia](https://github.com/replicatedhq/hugo-algolia) - [🐙](https://github.com/replicatedhq/hugo-algolia) - Generate and send indices from Hugo static sites for use with Algolia. 225 | - [instantsearch.js](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/) - [🐙](https://github.com/algolia/instantsearch.js) - JavaScript library for building performant and instant search experiences. 226 | 227 | ##### Resources 228 | 229 | - [Static site search with Hugo + Algolia](https://forestry.io/blog/search-with-algolia-in-hugo/) 230 | 231 | ### MEVN: Mongo Express Vue Node [↗](https://awesomestacks.dev/mevn-mongo-express-vue-node) 232 | 233 | This is a full stack web app boilerplate project with VueJS + ExpressJS + MongoDB. 234 | 235 | - [Vue.js](https://vuejs.org/) - [🛠️](https://stackshare.io/vue-js) - [🐙](https://github.com/vuejs/vue) - An approachable core library that focuses on the view layer only. 236 | - [MongoDB](https://www.mongodb.com/) - [🛠️](https://stackshare.io/mongodb) - [🐙](https://github.com/mongodb/mongo) - A document and JSON-oriented database. 237 | - [Express](https://expressjs.com/) - [🛠️](https://stackshare.io/expressjs) - [🐙](https://github.com/expressjs/express) - A minimal and flexible Node.js web application framework. 238 | - [Node.js](https://nodejs.org/en/) - [🛠️](https://stackshare.io/nodejs) - [🐙](https://github.com/nodejs/node) - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. 239 | 240 | ##### Resources 241 | 242 | - [Welcome to Vue-Express-Mongo BoilerPlate](http://vemapp.moleculer.services/) 243 | 244 | ### Rock Solid Modern Rails [↗](https://awesomestacks.dev/rock-solid-modern-rails) 245 | 246 | A Rails/JavaScript-based stack with modern/developer friendly technologies 247 | 248 | - [Rails](https://rubyonrails.org/) - [🛠](https://stackshare.io/rails) - [🐙](https://github.com/rails/rails) - An established web app framework with a focus on simplicity and productivity. 249 | - [React](https://reactjs.org/) - [🛠](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - React components can be used on the client and server side. 250 | - [GraphQL Ruby](https://graphql-ruby.org/) - [🛠](https://stackshare.io/graphql-ruby) - [🐙](https://github.com/rmosolgo/graphql-ruby) - Ruby server implementation of the GraphQL specification. 251 | - [Apollo Client](https://dev.apollodata.com/) - [🛠](https://stackshare.io/apollo) - [🐙](https://github.com/apollographql/apollo-client) - A powerfully extensible GraphQL JavaScript client. 252 | - [Heroku](https://heroku.com) - [🛠️](https://stackshare.io/heroku) Developer friendly web app infrastructure provider with seamless Ruby/Rails support. 253 | - [Cloud 66](https://www.cloud66.com/) - [🛠️](https://stackshare.io/cloud-66) Cloud 66 gives you everything you need to build, deploy, and manage your Rails applications on any cloud without the headache of the “server stuff”. 254 | 255 | ##### Resources 256 | 257 | - [A Rock Solid, Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku](https://blog.heroku.com/a-rock-solid-modern-web-stack) 258 | 259 | ### Serverless Stack with React on AWS [↗](https://awesomestacks.dev/serverless-stack-with-react-on-aws) 260 | 261 | Learn how to build a full-stack production ready note taking app using Serverless and React on AWS from serverless-stack.com. Step-by-step open-source tutorials with screenshots and code samples included. 262 | 263 | - [Serverless Framework](https://serverless.com/) - [🛠️](https://stackshare.io/serverless) - [🐙](https://github.com/serverless/serverless) - A toolkit for building serverless applications. 264 | - [AWS Lambda](https://aws.amazon.com/lambda) - [🛠️](https://stackshare.io/aws-lambda) - A compute service that runs your code in response to events. 265 | - [DynamoDB](http://aws.amazon.com/dynamodb/) - [🛠️](https://stackshare.io/amazon-dynamodb) - Fully managed NoSQL database service. 266 | - [Amazon Cognito](https://aws.amazon.com/cognito/) - [🛠️](https://stackshare.io/amazon-cognito) - Securely manage and synchronize app data for your users across their mobile devices. 267 | - [Amazon S3](https://aws.amazon.com/s3/) - [🛠️](https://stackshare.io/amazon-s3) - Store and retrieve any amount of data, at any time, from anywhere on the web. 268 | - [AWS Amplify](https://aws-amplify.github.io/) - [🛠️](https://stackshare.io/aws-amplify) - JavaScript Open Source Library with React, React Native Extensions. 269 | - [Amazon CloudFront](https://aws.amazon.com/cloudfront/) - [🛠️](https://stackshare.io/amazon-cloudfront) - Content delivery with low latency and high data transfer speeds. 270 | - [Create React App](https://facebook.github.io/create-react-app/) - [🛠](https://stackshare.io/create-react-app) - [🐙](https://github.com/facebook/create-react-app) - Set up a modern web app by running one command. 271 | 272 | ##### Resources 273 | 274 | - [serverless-stack.com](https://serverless-stack.com/) 275 | 276 | ### Electron React Boilerplate [↗](https://awesomestacks.dev/electron-react-boilerplate) 277 | 278 | A foundation for scalable cross-platform desktop apps all the way from development to distributing your app. 279 | 280 | - [Electron](http://electron.atom.io/) - [🛠️](https://stackshare.io/electron) - [🐙](https://github.com/electron/electron) - Build cross-platform desktop apps with JavaScript, HTML, and CSS. 281 | - [React](https://reactjs.org/) - [🛠](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - React components can be used on the client and server side. 282 | - [Redux](https://redux.js.org/) - [🛠](https://stackshare.io/reduxjs) - [🐙](https://github.com/reduxjs/redux) - Predictable state container for JavaScript apps. 283 | - [electron-builder](https://www.electron.build) - [🐙](https://github.com/electron-userland/electron-builder) - A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box. 284 | 285 | ##### Resources 286 | 287 | - [Electron React Boilerplate website](https://electron-react-boilerplate.js.org/) 288 | 289 | ### Vue with Electron [↗](https://awesomestacks.dev/vue-with-electron) 290 | 291 | A foundation for scalable cross-platform desktop apps all the way from development to distributing your app using Vue and Electron. 292 | 293 | - [Electron](http://electron.atom.io/) - [🛠️](https://stackshare.io/electron) - [🐙](https://github.com/electron/electron) - Build cross-platform desktop apps with JavaScript, HTML, and CSS. 294 | - [Vue.js](https://vuejs.org/) - [🛠️](https://stackshare.io/vue-js) - [🐙](https://github.com/vuejs/vue) - An approachable core library that focuses on the view layer only. 295 | - [Vuex](https://redux.js.org/) - [🛠](https://stackshare.io/reduxjs) - [🐙](https://github.com/reduxjs/redux) - Predictable state container for JavaScript apps. 296 | - [Vue Router](https://router.vuejs.org/) - [🐙](https://github.com/vuejs/vue-router) - Vue Router is the official router for Vue.js. 297 | - [Vue CLI](https://cli.vuejs.org/) - [🐙](https://github.com/vuejs/vue-cli) - An approachable core library that focuses on the view layer only. 298 | - [electron-builder](https://www.electron.build) - [🐙](https://github.com/electron-userland/electron-builder) - A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box. 299 | 300 | ##### Resources 301 | 302 | - [Vue.js & Electron: The easy way. – Mikeal](https://medium.com/@mikeal/vue-js-electron-the-easy-way-adc3ca09234a) 303 | - [How to use Vue.js with Electron and Vuex](https://alligator.io/vuejs/vue-electron/) 304 | 305 | ### Code Coverage & CI [↗](https://awesomestacks.dev/code-coverage-and-ci) 306 | 307 | Quickest way to get started with CI and Code Coverage. 308 | 309 | - [CircleCI](https://circleci.com/) - [🛠](https://stackshare.io/circleci) - Popular managed CI server. 310 | - [Codecov](https://codecov.io/) - [🛠️](https://stackshare.io/codecov) - Hosted coverage reports with awesome features to enhance your CI workflow. 311 | - [Bash](https://www.gnu.org/software/bash/) - [🛠](https://stackshare.io/gnu-bash) - The Bourne Again SHell is an sh-compatible shell. 312 | - [GitHub](https://github.com/) - [🛠](https://stackshare.io/github) - Powerful collaboration, review, and code management for open source and private development projects. 313 | 314 | ##### Resources 315 | 316 | - [Making code coverage easy to see with Codecov & CircleCI](https://circleci.com/blog/making-code-coverage-easy-to-see-with-the-codecov-orb/) 317 | - [CI Provider Relationship](https://docs.codecov.io/docs/ci-service-relationship) 318 | - [Codecov Bash Uploader](https://docs.codecov.io/docs/about-the-codecov-bash-uploader) 319 | 320 | ### Vue SPA with Laravel [↗](https://awesomestacks.dev/vue-spa-with-laravel) 321 | 322 | The best way to create a versatile and scalable PHP Web Application! It sure will make you fall in love with PHP (if not, Laravel). Laravel team has an official collaboration with the Vue, so Vue, Babel and Sass is already integrated before you even started! 323 | 324 | - [PHP 7](https://php.net) - [🛠](https://stackshare.io/php) - [🐙](https://github.com/php/php-src) - A popular general-purpose scripting language that is especially suited for web development. 325 | - [Laravel](https://laravel.com/) - [🛠](https://stackshare.io/laravel) - [🐙](https://github.com/laravel/laravel) - One of the most popular Object Oriented MVC PHP Framework with elegant syntax and golden standard software patterns. 326 | - [Vue.js](https://vuejs.org/) - [🛠️](https://stackshare.io/vue-js) - [🐙](https://github.com/vuejs/vue) - An approachable core library that focuses on the view layer only. 327 | - [Laravel Mix](https://laravel.com/docs/5.8/mix) - [🐙](https://github.com/JeffreyWay/laravel-mix) - A build tool built on top of webpack, to easily compile any front end assets. (secret: works with or without Laravel) 328 | - [Babel](https://babeljs.io/) - [🛠️](https://stackshare.io/babel) - [🐙](https://github.com/babel/babel) - compiler for writing next generation JavaScript; Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support. 329 | - [Sass](https://sass-lang.com) - [🛠️](https://stackshare.io/sass) - [🐙](https://github.com/sass/sass) - Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. 330 | 331 | ##### Resources 332 | - [Building a Vue SPA with Laravel](https://laravel-news.com/using-vue-router-laravel) 333 | - [Laravel Tutorial: Step by Step Guide to Building Your First Laravel Application](https://laravel-news.com/your-first-laravel-application) 334 | 335 | ### FReMP: Flask ReactJS MongoDB Python [↗](https://awesomestacks.dev/fremp-flask-reactjs-mongodb-python) 336 | 337 | FReMP stack is a highly scalable full stack framework, which can be used to build robust and modern web apps using Flask, ReactJS, MongoDB and Python. 338 | 339 | - [Flask](https://flask.palletsprojects.com/) - [🛠️](https://stackshare.io/flask) - [🐙](https://github.com/pallets/flask) - The Python micro framework for building web applications. 340 | - [ReactJS](https://reactjs.org/) - [🛠️](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - A declarative, efficient, and flexible JavaScript library for building user interfaces. 341 | - [MongoDB](https://www.mongodb.com/) - [🛠️](https://stackshare.io/mongodb) - [🐙](https://github.com/mongodb/mongo) - A document and JSON-oriented database. 342 | - [Python](https://www.python.org/) - [🛠️](https://stackshare.io/python) - [🐙](https://github.com/python/cpython) - A programming language that lets you work quickly. 343 | 344 | ##### Resources 345 | 346 | - [How to install FReMP Stack on Ubuntu?](https://medium.com/@akhilmaulloo/how-to-install-fremp-stack-on-ubuntu-20-04-e4be2a3a88b9) 347 | - [How to build a full stack web app using FReMP?](https://medium.com/@akhilmaulloo/the-fremp-stack-building-a-full-stack-web-application-91308e505250) 348 | - [How to deploy the app to Heroku?](https://medium.com/@akhilmaulloo/the-fremp-stack-deploying-to-heroku-163254c3ca4d) 349 | - [Official Website](https://fremp.github.io) 350 | - [Github](https://github.com/FReMP) 351 | - [Boilerplate](https://github.com/FReMP/fremp) 352 | 353 | ## Back-end 354 | 355 | ### GCP Kubernetes Stack [↗](https://awesomestacks.dev/gcp-kubernetes-stack) 356 | 357 | Stack used to deploy and manage a cluster of Docker containerized applications using Google Cloud services. 358 | 359 | - [GKE](https://cloud.google.com/kubernetes-engine/) - [🛠](https://stackshare.io/google-kubernetes-engine) - Kubernetes cluster managed by Google. 360 | - [Kubernetes](https://kubernetes.io/) - [🐙](https://github.com/kubernetes/kubernetes) - [🛠](https://stackshare.io/kubernetes) - Production-Grade Container Scheduling and Management. 361 | - [Docker](https://www.docker.com/) - [🛠](https://stackshare.io/docker) - [🐙](https://github.com/docker/docker) - A tool to create, deploy and run applications inside containers. 362 | - [Stackdriver](https://cloud.google.com/stackdriver/) - [🛠️](https://stackshare.io/stackdriver) - Stackdriver Logging allows you to store, search, analyze, monitor, and alert on log data and events. 363 | 364 | ### Ethereum DApp [↗](https://awesomestacks.dev/ethereum-d-app) 365 | 366 | A collection of tools for building decentralized applications on the Ethereum blockchain. 367 | 368 | - [Solidity](https://solidity.readthedocs.io) - [🐙](https://github.com/ethereum/solidity) - Solidity is an object-oriented, high-level language for implementing smart contracts. 369 | - [web3.js](https://web3js.readthedocs.io) - [🐙](https://github.com/ethereum/web3.js) - Ethereum JavaScript API. 370 | - [db3.js](https://docs.db3.network/) - [🐙](https://github.com/dbpunk-labs/db3.js) - db3.js is the db3 network(Ethereum layer2) javascript API to write and query JSON documents 371 | - [Truffle](https://truffleframework.com/truffle) - [🐙](https://github.com/trufflesuite/truffle) - A world class development environment, testing framework and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM). 372 | - [Ganache](https://truffleframework.com/ganache) - [🐙](https://github.com/trufflesuite/ganache) - Personal blockchain for Ethereum development. 373 | - [drizzle](https://truffleframework.com/drizzle) - [🐙](https://github.com/trufflesuite/drizzle) - A collection of front-end libraries that make writing dapp user interfaces easier and more predictable. 374 | 375 | ### Rails Monitoring Stack [↗](https://awesomestacks.dev/rails-monitoring-stack) 376 | 377 | Tools to use to monitor your Rails app in production. 378 | 379 | - [Skylight](https://www.skylight.io) - [🛠](https://stackshare.io/skylight) - The smart profiler for your Rails apps. 380 | - [New Relic](https://newrelic.com) - [🛠](https://stackshare.io/new-relic) - SaaS Application Performance Management for Ruby, PHP, .Net, Java, Python, and Node.js Apps. 381 | - [rack-mini-profiler](https://github.com/MiniProfiler/rack-mini-profiler) - [🐙](https://github.com/MiniProfiler/rack-mini-profiler) - Profiler for your development and production Ruby rack apps. 382 | - [Sqreen](https://www.sqreen.com/) - [🛠](https://stackshare.io/sqreen) - Security monitoring and protection for Ruby, PHP, Java, Go, Python, and Node.js Apps. 383 | 384 | ### User Behavior Analytics via Segment [↗](https://awesomestacks.dev/user-behavior-analytics-via-segment) 385 | 386 | Hosted tools to use to analyze user behavior for a web app. 387 | 388 | - [Segment](https://segment.com) - [🛠️](https://stackshare.io/segment) - A single hub to collect, translate and send your data with the flip of a switch. 389 | - [Google Analytics](https://marketingplatform.google.com/about/analytics/) - [🛠️](https://stackshare.io/google-analytics) - Enterprise-class web analytics. 390 | - [Amplitude](https://amplitude.com) - [🛠️](https://stackshare.io/amplitude) - User analytics to fuel explosive user growth. 391 | - [FullStory](https://www.fullstory.com/) - [🛠️](https://stackshare.io/fullstory) - Capture all your customer experience data in one powerful, easy-to-use platform. 392 | 393 | ### Streaming Analytics with Kafka, Spark, and Cassandra [↗](https://awesomestacks.dev/streaming-analytics-with-kafka-spark-and-cassandra) 394 | 395 | The Kafka-Spark-Cassandra pipeline for processing a firehose of incoming events. 396 | 397 | - [Kafka](http://kafka.apache.org/) - [🛠](https://stackshare.io/kafka) - [🐙](https://github.com/apache/kafka) - Distributed, fault tolerant, high throughput pub-sub messaging system. 398 | - [Apache Spark](https://spark.apache.org) - [🛠](https://stackshare.io/spark) - [🐙](https://github.com/apache/spark) - Fast and general engine for large-scale data processing. 399 | - [Cassandra](http://cassandra.apache.org) - [🛠](https://stackshare.io/cassandra) - [🐙](https://github.com/apache/cassandra) - Highly-scalable partitioned row store. 400 | 401 | ##### Resources 402 | 403 | - [kafka-sparkstreaming-cassandra](https://github.com/Yannael/kafka-sparkstreaming-cassandra) 404 | - [Applying the Lambda Architecture with Spark, Kafka, and Cassandra](https://www.pluralsight.com/courses/spark-kafka-cassandra-applying-lambda-architecture) 405 | - [Streaming Analytics with Spark, Kafka, Cassandra, and Akka](https://databricks.com/session/streaming-analytics-with-spark-kafka-cassandra-and-akka) 406 | 407 | ### Self-Hosted Devops and Collaboration [↗](https://awesomestacks.dev/self-hosted-devops-and-collaboration) 408 | 409 | Self-hosted open source devops and collaboration tools, suitable for enterprise. 410 | 411 | - [GitLab](https://about.gitlab.com/) - [🛠](https://stackshare.io/gitlab) - [🐙](https://github.com/gitlabhq/gitlabhq) - Open source self-hosted Git management software. 412 | - [Zulip](https://zulipchat.com) - [🛠](https://stackshare.io/zulip) - [🐙](https://github.com/zulip/zulip) - Powerful open source team chat. 413 | - [Hubot](https://hubot.github.com) - [🛠](https://stackshare.io/hubot) - [🐙](https://github.com/hubotio/hubot) - A customizable life embetterment robot. 414 | - [Sentry](https://sentry.io) - [🛠](https://stackshare.io/sentry) - [🐙](https://github.com/getsentry/sentry) - Cross-platform application monitoring, with a focus on error reporting. 415 | - [Taiga.io](https://taiga.io) - [🛠](https://stackshare.io/taiga) - [🐙](https://github.com/taigaio) - Project management web application with scrum in mind. 416 | - [Metabase](https://www.metabase.com/) - [🛠](https://stackshare.io/metabase) - [🐙](https://github.com/metabase/metabase) - An open-source business intelligence tool. 417 | 418 | 419 | ### Production Ready Django + Docker [↗](https://awesomestacks.dev/production-ready-django-docker) 420 | 421 | Bleeding edge Django template focused on code quality and security. 422 | 423 | Build, test, and deploy pipelines are configured by default. 424 | 425 | - [Python 3](https://www.python.org/) - [🛠](https://stackshare.io/python) - [🐙](https://github.com/python/cpython) - A programming language that lets you work quickly. 426 | - [Django](https://www.djangoproject.com/) - [🛠](https://stackshare.io/django) - [🐙](https://github.com/django/django) - The Web framework for perfectionists with deadlines. 427 | - [Docker](https://www.docker.com/) - [🛠](https://stackshare.io/docker) - [🐙](https://github.com/docker/docker) - A tool to create, deploy and run applications inside containers. 428 | - [GitLab](https://about.gitlab.com/) - [🛠](https://stackshare.io/gitlab) - [🐙](https://github.com/gitlabhq/gitlabhq) - Open source self-hosted Git management software. 429 | - [Caddy](https://caddyserver.com/) - [🛠](https://stackshare.io/caddy) - [🐙](https://github.com/mholt/caddy) - The HTTP/2 Web Server with Automatic HTTPS. 430 | 431 | ##### Resources 432 | 433 | - [wemake-django-template](https://github.com/wemake-services/wemake-django-template) 434 | 435 | ### RESTful API with Java and Spring Boot [↗](https://awesomestacks.dev/res-tful-api-with-java-and-spring-boot) 436 | 437 | Build a simple and robust RESTful API. 438 | 439 | - [Spring Boot](https://spring.io/projects/spring-boot) - [🛠](https://stackshare.io/spring-boot) - [🐙](https://github.com/spring-projects/spring-boot) - Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run". 440 | - [Gradle](https://gradle.org/) - [🛠️](https://stackshare.io/gradle) - [🐙](https://github.com/gradle/gradle)- A build tool with a focus on build automation and support for multi-language development. 441 | - [Java](https://docs.oracle.com/javase/specs/index.html) - [🛠️](https://stackshare.io/java) - Java is an Object-Oriented and one of the most used programming languages in the world. 442 | 443 | #### Resources 444 | 445 | - [Building an Application with Spring Boot](https://spring.io/guides/gs/spring-boot/) 446 | 447 | ### Graphweaver - GraphQL API Over Multiple Datasources [↗](https://awesomestacks.dev/graphweaver-graphql-api-over-multiple-datasources) 448 | 449 | Connect to various datasources and combine the data into a real-time GraphQL API and AdminUI. Useful stack when you have multiple datasources such as Postgres, MySql, Sqlite, Rest, etc. 450 | 451 | - [Graphweaver](https://graphweaver.com/) - [🛠️](https://stackshare.io/graphweaver) - [🐙](https://github.com/exogee-technology/graphweaver) - Data Everywhere - Instant GraphQL. 452 | - [ReactJS](https://reactjs.org/) - [🛠️](https://stackshare.io/react) - [🐙](https://github.com/facebook/react) - The adminUI is built in React and can be extended. 453 | - [AWS Lambda](https://aws.amazon.com/lambda) - [🛠️](https://stackshare.io/aws-lambda) - Deployable as a single JS bundle to lambda. 454 | - [AWS Cognito](https://aws.amazon.com/cognito) - Pre-built integration with AWS Cognito. 455 | 456 | ##### Resources 457 | 458 | - [Connect to a datasource](https://graphweaver.com/docs/connect-to-a-data-source) 459 | 460 | ## Mobile 461 | 462 | ### React Native with Expo and Hasura [↗](https://awesomestacks.dev/react-native-with-expo-and-hasura) 463 | 464 | Hasura is an open source GraphQL engine that deploys instant, real-time GraphQL APIs on any Postgres database. This React Native stack uses Hasura droplets hosted on Digital Ocean. 465 | 466 | - [Hasura](https://hasura.io/) - [🛠️](https://stackshare.io/hasura) - [🐙](https://github.com/hasura/graphql-engine) - Blazing fast, instant real-time GraphQL APIs on Postgres with fine grained access control. 467 | - [React Native](https://facebook.github.io/react-native/) - [🛠️](https://stackshare.io/react-native) - [🐙](https://github.com/facebook/react-native) - Build native mobile apps using JavaScript and React. 468 | - [Expo](https://expo.io/) - [🛠️](https://stackshare.io/expo) - [🐙](https://github.com/expo/expo) - Build, deploy, and quickly iterate on native iOS and Android apps from the same JavaScript codebase. 469 | - [Digital Ocean](https://www.digitalocean.com/) - [🛠️](https://stackshare.io/digitalocean) - [🐙](https://github.com/digitalocean/) - Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access. 470 | - [Auth0](https://auth0.com/) - [🛠️](https://stackshare.io/auth0) - A universal authentication & authorization platform for web, mobile and legacy applications. 471 | 472 | ##### Resources 473 | 474 | - [Udemy course: Learn the Newest and EASIEST React Native Stack](https://www.udemy.com/course/how-to-make-a-full-stack-react-native-app-with-easy-backend/?referralCode=E944B7F521E0A6B88CD2) 475 | - [Tutorial: Fullstack React Native with GraphQL and Authentication](https://blog.hasura.io/tutorial-fullstack-react-native-with-graphql-and-authentication-18183d13373a/) 476 | - [Guide: Hasura GraphQL Engine One-click App on DigitalOcean Marketplace](https://docs.hasura.io/1.0/graphql/manual/guides/deployment/digital-ocean-one-click.html) 477 | 478 | ### Unity Game Development boilerplate [↗](https://awesomestacks.dev/unity-Game-Development-boilerplate) 479 | 480 | Unity is a game engine that connects to Plastic SCM to keep version control and large asset and huge repo management clean and frictionless. 481 | 482 | - [Unity](https://unity.com/) - [🛠](https://stackshare.io/unity-3d) - [🐙](https://github.com/Unity-Technologies/UnityCsReference) - The C# part of the Unity engine and editor source code. May be used for reference purposes only. 483 | - [Plastic SCM](https://www.plasticscm.com/) - [🛠️](https://stackshare.io/plastic-scm) - [🐙](https://github.com/PlasticSCM/plastic-docker) - PlasticSCM Docker image. 484 | - [TeamCity](https://www.jetbrains.com/teamcity/) - [🛠](https://stackshare.io/teamcity) - A Java-based build management and continuous integration server from JetBrains. 485 | 486 | ##### Resources 487 | 488 | - [First steps with Plastic SCM in Unity](https://www.youtube.com/playlist?list=PL29P1RRr5_NzEhAustJCTwdahs60JvcMm) 489 | - [Plastic SCM for Games](https://www.plasticscm.com/games) 490 | 491 | ### Workflow Automation with GitHub, Jira and Jenkins [↗](https://awesomestacks.dev/workflow-automation-with-git-hub-jira-and-jenkins) 492 | 493 | Boost your Productivity with GitHub, Jira and Jenkins. 494 | 495 | - [Jenkins](https://jenkins.io/) - [🛠️](https://stackshare.io/jenkins) - [🐙](https://github.com/jenkinsci/jenkins) - Open source automation server for CI/CD. 496 | - [GitHub](https://github.com/) - [🛠](https://stackshare.io/github) - The site to keep your code and open it to world. 497 | - [Jira](https://es.atlassian.com/software/jira) - [🛠️](https://stackshare.io/jira) - Agile software development. 498 | - [Slack](https://slack.com) - [🛠️](https://stackshare.io/slack) - Where work flows. 499 | 500 | ##### Resources 501 | 502 | - [Integrating Jira, GitHub, Jenkins, and Slack in your workflow](https://support.acquia.com/hc/en-us/articles/360005167214-Integrating-JIRA-GitHub-Jenkins-and-Slack-in-your-workflow) 503 | 504 | 505 | ## Contributing 506 | 507 | See [CONTRIBUTING.md](./CONTRIBUTING.md) for information and guides on how to contribute stacks and tools. 508 | 509 | ## License 510 | 511 | [![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/) 512 | 513 | To the extent possible under law, [StackShare](https://stackshare.io) has waived all copyright and related or neighboring rights to this work [README](/README.md) 514 | 515 | -------------------------------------------------------------------------------- /content/about.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | --- 4 | 5 | # Awesome Stacks 6 | 7 | [![Awesome](https://awesome.re/badge-flat2.svg)](https://awesome.re) 8 | 9 | [![Netlify Status](https://api.netlify.com/api/v1/badges/7fb9c28c-1e1e-41e0-a0c6-95a5770f4abf/deploy-status)](https://app.netlify.com/sites/awesomestacks/deploys) 10 | 11 | Awesome Stacks is a community-curated list of tech stacks for building different applications and features. It is open source and inspired by the original [awesome list](http://awesome.re/). 12 | 13 | Each stack in the list has a name, description, and list of a few of the key tools and technologies. Optionally, it links to a tutorial, starter kit or boilerplate that makes it easy to get started with. 14 | 15 | Got a stack you think is the best way to do something? Please edit this file and add it! Check out CONTRIBUTING.md for more information. 16 | 17 | ## Where can I see the stacks? 18 | 19 | Stacks can be browsed in two places—on the README and on [awesomestacks.dev](https://awesomestacks.dev/). The site, built with Gatsby and React, displays logos and metrics about each tool listed in the README by pulling data from the GitHub and StackShare APIs. 20 | 21 | ## Who writes the stacks? 22 | 23 | You do! Just like awesome lists, anyone is welcome and encouraged to contribute their knowledge. See the [Contribution Guide](/contribute) for how to get started. 24 | 25 | ## Who’s behind all this? 26 | 27 | Awesome Stacks is built and maintained by [StackShare](https://stackshare.io/) with the help of [DeveloperMode](https://developermode.com/). StackShare’s mission is to help developers discover new tools and make better technology decisions, and generally to make building software more awesome ✌️ 28 | 29 |
30 |
31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 |
40 |
-------------------------------------------------------------------------------- /content/contribute.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contributing 3 | --- 4 | 5 | # Contributing 6 | 7 | Stack missing? Got more tools to add? Be awesome and do it! 8 | 9 | Please see the [CONTRIBUTING.md](https://github.com/stackshareio/awesome-stacks/blob/master/CONTRIBUTING.md) on the GitHub repository for a step-by-step walkthrough. 10 | 11 |
12 | 13 |
14 | 15 |
-------------------------------------------------------------------------------- /content/stacks/algolia-site-search-full.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: The Algolia way to build a site search for any website using a crawler. 3 | title: Algolia site search 4 | createdAt: 2019-03-09 5 | updatedAt: 2019-03-18 6 | contributors: 7 | - dzello 8 | --- 9 | 10 | # Introduction 11 | 12 | Need a site search? If you have content that you want users to find, the answer is yes! Thankfully it's not hard to add a basic site search using Algolia, even if your content doesn't live in a well-organized CMS or database. This awesome stack is a collection of all of the various tools you'll need to crawl and scrape your site's content, upload it to Algolia, then add a search box to your UI. 13 | 14 | # Search Engine 15 | 16 | 17 | 18 | Algolia's Community plan is free up to 10,000 records with unlimited search queries. 19 | 20 | 21 | Crawls the sitemap and uses CSS selectors to extract elements from the page, then pushes the data to a configured Algolia index. Written in Node.js. 22 | 23 | 24 | 25 | ## Resources 26 | 27 | - [Algolia Docs - How Algolia Works](https://www.algolia.com/doc/guides/getting-started/how-algolia-works/) 28 | - [Algolia Docs - Prepare Your Data - Format and Structure](https://www.algolia.com/doc/guides/sending-and-managing-data/prepare-your-data/) 29 | 30 | # Crawling 31 | 32 | 33 | 34 | Crawls the sitemap and uses CSS selectors to extract elements from the page, then pushes the data to a configured Algolia index. Written in Node.js. 35 | 36 | 37 | An open source project from Algolia that crawls a website and uploads it to an index. Used mostly for documentation but can be adapted to general websites. 38 | 39 | 40 | A popular crawling and scraping tool for Python. This will help you get the data off your site, then you'll use an Algolia SDK to upload it. 41 | 42 | 43 | Like scrapy but for Node.js. Syntax is composable - takes a bit to get used to but if very powerful. 44 | 45 | 46 | 47 | ## Resources 48 | 49 | - [The Ultimate Guide to Web Scraping with Node.js](https://medium.freecodecamp.org/the-ultimate-guide-to-web-scraping-with-node-js-daa2027dcd3) 50 | - [How To Crawl A Web Page with Scrapy and Python 3](https://www.digitalocean.com/community/tutorials/how-to-crawl-a-web-page-with-scrapy-and-python-3) 51 | - [Algolia Docs - Indexing Long Documents](https://www.algolia.com/doc/guides/sending-and-managing-data/prepare-your-data/how-to/indexing-long-documents/) 52 | - [chunk-text - chunk/split a string by length without cutting/truncating words](https://github.com/algolia/chunk-text) 53 | 54 | # Static site integrations 55 | 56 | If you're using a common static site generator to build your site, there’s a good chance Algolia or the community has created a pre-built integration you can use. 57 | 58 | 59 | 60 | An official Algolia-supported way to create a search for websites based on jekyll. 61 | 62 | 63 | A Gatsby plugin that lets you query for GraphQL site content and convert it into Algolia records. 64 | 65 | 66 | For the Hugo users, an alternative to the DocSearch plugin that allows more customization. 67 | 68 | 69 | 70 | ## Resources 71 | 72 | - [Static site search with Algolia and Hugo](https://forestry.io/blog/search-with-algolia-in-hugo/) 73 | - [Jekyll search with Algolia and webtasks](https://forestry.io/blog/search-with-algolia-in-jekyll/) 74 | - [Custom search with Algolia in Gatsby](https://janosh.io/blog/gatsby-algolia-search) 75 | - [Gatsby Docs - Adding Search](https://www.gatsbyjs.org/docs/adding-search/) 76 | 77 | # User interface 78 | 79 | 80 | 81 | This is the "vanilla JS" version of InstantSearch, meaning that it doesn't need any JavaScript framework to work. 82 | 83 | 84 | If you're already using React, maybe through Gatsby, this library will feel very comfortable. 85 | 86 | 87 | The Vue.js version of InstantSearch. 88 | 89 | 90 | The Angular version of InstantSearch, compatible with Angular 5 and above. 91 | 92 | 93 | Use for a standard drop-down interface, good if you’re putting a search bar in the site header 94 | 95 | 96 | 97 | ## Resources 98 | 99 | - [Algolia Docs - What is InstantSearch.js](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/) 100 | - [Video - Build an instant search result page](https://www.youtube.com/watch?v=lN0-mnwyfrE) 101 | - [Search interface - 20 things to consider](https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881) 102 | 103 | # Utilities 104 | 105 | 106 | 107 | A swiss army knife for manipulating JSON on the command line. Useful to transform records before uploading to Algolia. 108 | 109 | 110 | Generate the code for a search box that matches your site’s design and colors. 111 | 112 | 113 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import "./src/css/layout.sass" 2 | import '@fortawesome/fontawesome-svg-core/styles.css' 3 | import { config } from "@fortawesome/fontawesome-svg-core"; 4 | config.autoAddCss = false; -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config({ path: '.env.development' }); 2 | 3 | module.exports = { 4 | siteMetadata: { 5 | title: `Awesome Stacks`, 6 | url: `https://awesomestacks.dev`, 7 | description: `Discover awesome tech stacks for building different applications and features.`, 8 | image: `/images/awesome-stacks-twitter-card-large-v3.png`, 9 | imageWidth: 1688, 10 | imageHeight: 883, 11 | author: `@dzello`, 12 | repository: `https://github.com/stackshareio/awesome-stacks`, 13 | contributing: `https://github.com/stackshareio/awesome-stacks/blob/master/CONTRIBUTING.md`, 14 | techStack: `https://stackshare.io/stackshare/awesome-stacks` 15 | }, 16 | plugins: [ 17 | `gatsby-plugin-react-helmet`, 18 | { 19 | resolve: `gatsby-source-filesystem`, 20 | options: { 21 | name: `images`, 22 | path: `${__dirname}/src/images`, 23 | }, 24 | }, 25 | // { 26 | // resolve: `gatsby-source-filesystem`, 27 | // options: { 28 | // name: `content-docs`, 29 | // path: `${__dirname}/content/docs`, 30 | // }, 31 | // }, 32 | { 33 | resolve: `gatsby-source-filesystem`, 34 | options: { 35 | name: `content-stacks`, 36 | path: `${__dirname}/content/stacks`, 37 | }, 38 | }, 39 | { 40 | resolve: `gatsby-source-filesystem`, 41 | options: { 42 | name: `content`, 43 | path: `${__dirname}/content`, 44 | }, 45 | }, 46 | { 47 | resolve: `gatsby-source-filesystem`, 48 | options: { 49 | name: `readme-stacks`, 50 | path: `${__dirname}/README.md` 51 | }, 52 | }, 53 | `gatsby-plugin-sass`, 54 | `gatsby-transformer-sharp`, 55 | `gatsby-plugin-sharp`, 56 | { 57 | resolve: `gatsby-transformer-remark`, 58 | options: { 59 | filter: node => node.sourceInstanceName === `readme-stacks` 60 | }, 61 | }, 62 | `gatsby-mdx`, 63 | { 64 | resolve: 'gatsby-plugin-html-attributes', 65 | options: { 66 | class: 'has-navbar-fixed-top' 67 | } 68 | }, 69 | `gatsby-plugin-favicon`, 70 | `gatsby-transform-stacks`, 71 | { 72 | resolve: 'gatsby-source-apiserver', 73 | options: { 74 | url: `https://api.github.com/repos/stackshareio/awesome-stacks/contributors`, 75 | name: "githubContributors" 76 | } 77 | }, 78 | { 79 | resolve: `gatsby-plugin-google-analytics`, 80 | options: { 81 | trackingId: `UA-41067622-2`, 82 | respectDNT: true 83 | } 84 | } 85 | ] 86 | } 87 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const cheerio = require("cheerio"); 3 | const { createFilePath } = require("gatsby-source-filesystem"); 4 | 5 | const stackshare = require("./src/utils/stackshare"); 6 | const github = require("./src/utils/github"); 7 | 8 | // to support relative paths in sass files 9 | exports.onCreateWebpackConfig = ({ actions }) => { 10 | actions.setWebpackConfig({ 11 | resolve: { 12 | modules: [path.resolve(__dirname, "src"), "node_modules"], 13 | }, 14 | }) 15 | } 16 | 17 | exports.onCreateNode = async ({ node, 18 | actions, 19 | getNode, 20 | loadNodeContent }) => { 21 | 22 | const { createNodeField } = actions 23 | 24 | if (node.internal.type !== `Mdx`) { 25 | return 26 | } 27 | 28 | // create a queryable sourceName field 29 | const parent = getNode(node.parent); 30 | if (parent.internal.type === "File") { 31 | createNodeField({ 32 | name: `sourceName`, 33 | node, 34 | value: parent.sourceInstanceName 35 | }); 36 | } 37 | 38 | // set the slug b/c outside /src/pages 39 | // https://gatsby-mdx.netlify.com/guides/programmatically-creating-pages 40 | const slugValue = createFilePath({ node, getNode }); 41 | createNodeField({ 42 | name: "slug", 43 | node, 44 | value: `${parent.sourceInstanceName === `content-docs` ? `/docs` : ``}${slugValue}` 45 | }); 46 | 47 | // only process front matter for stacks 48 | if (parent.sourceInstanceName !== `content-stacks`) { 49 | return 50 | } 51 | 52 | const contributors = node.frontmatter.contributors; 53 | if (contributors) { 54 | const contributorsLoaded = await Promise.all(contributors.map(github.getGitHubUser)).then(users => users.filter(user => user)); 55 | createNodeField({ 56 | name: "contributors", 57 | node, 58 | value: contributorsLoaded 59 | }); 60 | } 61 | 62 | // add a field for the list of tools used in the mdx 63 | const nodeContent = await loadNodeContent(node); 64 | const githubs = (nodeContent.match(/]+>/g) || []).map((toolTag) => { 65 | const nameWithOwner = (cheerio.load(toolTag))("GitHub").attr('name'); 66 | const [owner, name] = nameWithOwner.split('/'); 67 | return { owner, name }; 68 | }); 69 | const githubsLoaded = await Promise.all(githubs.map(github.getGitHubTool)).then(tools => tools.filter(tool => tool)); 70 | createNodeField({ 71 | name: "gitHubTools", 72 | node, 73 | value: githubsLoaded 74 | }); 75 | 76 | const stackshares = (nodeContent.match(/]+>/g) || []).map((toolTag) => { 77 | const name = (cheerio.load(toolTag))("StackShare").attr('name'); 78 | const url = `https://stackshare.io/${name}`; 79 | return { name, url }; 80 | }); 81 | 82 | // fetch the data from stackshare for each tool 83 | // filter out any tools that aren't found 84 | const stacksharesLoaded = await Promise.all(stackshares.map(stackshare.getStackShareTool)).then(tools => tools.filter(tool => tool && tool.name)); 85 | createNodeField({ 86 | name: "stackShareTools", 87 | node, 88 | value: stacksharesLoaded 89 | }); 90 | 91 | }; 92 | 93 | exports.createPages = ({ graphql, actions }) => { 94 | const { createPage } = actions; 95 | return new Promise((resolve, reject) => { 96 | resolve( 97 | graphql( 98 | ` 99 | { 100 | allMdx(filter: { fields: { sourceName: { in: ["content", "content-docs", "content-stacks"] } } }) { 101 | edges { 102 | node { 103 | id 104 | fields { 105 | slug 106 | sourceName 107 | } 108 | } 109 | } 110 | } 111 | } 112 | ` 113 | ).then(result => { 114 | if (result.errors) { 115 | console.error(result.errors); 116 | reject(result.errors); 117 | } 118 | result.data.allMdx.edges.forEach(({ node }) => { 119 | createPage({ 120 | path: node.fields.slug, 121 | component: path.resolve(`./src/components/pages/${node.fields.sourceName}-page.js`), 122 | context: { id: node.id } 123 | }); 124 | }); 125 | }).catch(err => { 126 | console.error("Building pages failed"); 127 | console.error(err); 128 | }) 129 | ); 130 | }); 131 | }; -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "public" 3 | command = "npm run build" 4 | [build.environment] 5 | NODE_VERSION = "11.7.0" 6 | NPM_VERSION = "6.9.0" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awesome-stacks", 3 | "description": "Discover awesome tech stacks for all kinds of applications.", 4 | "version": "0.1.0", 5 | "author": "Josh Dzielak ", 6 | "dependencies": { 7 | "@fortawesome/fontawesome-svg-core": "^1.2.15", 8 | "@fortawesome/free-brands-svg-icons": "^5.7.2", 9 | "@fortawesome/free-solid-svg-icons": "^5.7.2", 10 | "@fortawesome/react-fontawesome": "^0.1.4", 11 | "@mdx-js/mdx": "^0.20.1", 12 | "@mdx-js/tag": "^0.18.0", 13 | "@sindresorhus/slugify": "^0.9.0", 14 | "apollo-boost": "^0.3.1", 15 | "bulma": "^0.7.4", 16 | "cheerio": "^1.0.0-rc.2", 17 | "gatsby": "^2.1.19", 18 | "gatsby-cli": "^2.5.7", 19 | "gatsby-image": "^2.0.30", 20 | "gatsby-mdx": "^0.4.2", 21 | "gatsby-plugin-favicon": "^3.1.5", 22 | "gatsby-plugin-google-analytics": "^2.0.18", 23 | "gatsby-plugin-html-attributes": "^1.0.5", 24 | "gatsby-plugin-manifest": "^2.0.20", 25 | "gatsby-plugin-offline": "^2.0.24", 26 | "gatsby-plugin-react-helmet": "^3.0.7", 27 | "gatsby-plugin-sass": "^2.0.10", 28 | "gatsby-plugin-sharp": "^2.0.23", 29 | "gatsby-source-apiserver": "^2.1.1", 30 | "gatsby-source-filesystem": "^2.0.23", 31 | "gatsby-transformer-remark": "^2.3.8", 32 | "gatsby-transformer-sharp": "^2.1.15", 33 | "graphql": "^14.1.1", 34 | "graphql-tag": "^2.10.1", 35 | "node-fetch": "^2.3.0", 36 | "node-sass": "^4.11.0", 37 | "prop-types": "^15.7.2", 38 | "react": "^16.8.3", 39 | "react-dom": "^16.8.3", 40 | "react-helmet": "^5.2.0", 41 | "remark": "^10.0.1", 42 | "remark-html": "^9.0.0", 43 | "sharp": "^0.21.3" 44 | }, 45 | "devDependencies": { 46 | "prettier": "^1.16.4" 47 | }, 48 | "keywords": [ 49 | "gatsby" 50 | ], 51 | "license": "MIT", 52 | "scripts": { 53 | "build": "gatsby build", 54 | "develop": "gatsby develop", 55 | "format": "prettier --write src/**/*.{js,jsx}", 56 | "start": "npm run develop", 57 | "serve": "gatsby serve", 58 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" 59 | }, 60 | "repository": { 61 | "type": "git", 62 | "url": "https://github.com/stackshareio/awesome-stacks" 63 | }, 64 | "bugs": { 65 | "url": "https://github.com/stackshareio/awesome-stacks/issues" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /plugins/gatsby-transform-stacks/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const cheerio = require("cheerio"); 3 | const slugify = require('@sindresorhus/slugify'); 4 | const remark = require('remark'); 5 | const html = require('remark-html'); 6 | 7 | const stackshare = require("../../src/utils/stackshare"); 8 | const github = require("../../src/utils/github"); 9 | 10 | const customReplacements = [ 11 | [".", ""] 12 | ] 13 | 14 | exports.onCreateNode = async ({ node, 15 | actions, 16 | getNode, 17 | loadNodeContent }) => { 18 | 19 | const { createNodeField } = actions 20 | 21 | if (node.internal.type !== `MarkdownRemark`) { 22 | return 23 | } 24 | 25 | const parent = getNode(node.parent); 26 | if (parent.internal.type === "File") { 27 | createNodeField({ 28 | name: `sourceName`, 29 | node, 30 | value: parent.sourceInstanceName 31 | }); 32 | } 33 | 34 | if (parent.sourceInstanceName !== `readme-stacks`) { 35 | return 36 | } 37 | 38 | // add a field for the list of tools used in the mdx 39 | const nodeContent = await loadNodeContent(node); 40 | const nodeContentHtml = await remark().use(html).process(nodeContent); 41 | 42 | const $ = cheerio.load(nodeContentHtml.contents); 43 | 44 | const h3s = $(`h3`); 45 | 46 | var toolCount = 0; 47 | var stackCount = $(`h3`.length); 48 | 49 | console.log(`Processing ${stackCount} stacks in the README`) 50 | 51 | const stacks = h3s.map((index, h3) => { 52 | stackCount++; 53 | const name = $(h3).text().replace(/↗/, '').trim(); 54 | const path = slugify(name, { customReplacements }); 55 | return { 56 | name, path, index, 57 | url: $(h3).find("a").attr("href"), 58 | description: $(h3).next("p").text(), 59 | tools: $(h3).nextUntil(`h3, h5`, `ul`).find(`li`).map((_, li) => { 60 | toolCount++; 61 | const toolObj = {}; 62 | $(li).find("a").each((_, link) => { 63 | if ($(link).attr("href").match(/https:\/\/stackshare.io\//)) { 64 | toolObj.stackShareUrl = $(link).attr("href"); 65 | } else if ($(link).attr("href").match(/https:\/\/github.com\//)) { 66 | toolObj.gitHubUrl = $(link).attr("href"); 67 | } else if ($(link).text().match(/[\w\d_ -]/)) { 68 | toolObj.name = $(link).text(); 69 | toolObj.url = $(link).attr("href"); 70 | } 71 | }); 72 | toolObj.description = $(li).clone().children().remove().end().contents().text(); 73 | return toolObj; 74 | }).get(), 75 | resources: $(h3).nextUntil(`h3`, `h5`).nextUntil(`h3`, `ul`).find(`li > a`).map((_, a) => { 76 | return { 77 | text: $(a).text(), 78 | href: $(a).attr(`href`) 79 | } 80 | }).get() 81 | } 82 | }).get() 83 | 84 | console.log(`Fetching data for ${toolCount} tools in ${stackCount} stacks`); 85 | 86 | // get the stacks then get the tools 87 | 88 | await Promise.all(stacks.map(stack => { 89 | 90 | return Promise.all(stack.tools.map(async tool => { 91 | if (tool.gitHubUrl) { 92 | const [owner, name] = tool.gitHubUrl.replace(/http[s]+:\/\/github\.com\//, '').split(`/`); 93 | try { 94 | console.log(`Fetching GitHub: ${tool.gitHubUrl}`) 95 | tool.gitHubData = await github.getGitHubTool({ owner, name }) 96 | } catch (e) { 97 | console.warn(e); 98 | } 99 | } 100 | if (tool.stackShareUrl) { 101 | const url = tool.stackShareUrl 102 | const name = url.replace(/http[s]+:\/\/stackshare\.io\//, '') 103 | try { 104 | console.log(`Fetching StackShare: ${tool.stackShareUrl}`); 105 | tool.stackShareData = await stackshare.getStackShareTool({ name }); 106 | } catch (e) { 107 | console.warn(e); 108 | } 109 | } 110 | })); 111 | 112 | })); 113 | 114 | console.log(`\n*** Fetching complete — updating node fields ***\n`); 115 | 116 | createNodeField({ 117 | name: "stacks", 118 | node, 119 | value: stacks 120 | }); 121 | 122 | }; 123 | 124 | exports.createPages = ({ graphql, actions }) => { 125 | const { createPage } = actions; 126 | return new Promise((resolve, reject) => { 127 | resolve( 128 | graphql( 129 | ` 130 | { 131 | allMarkdownRemark(filter: { fields: { sourceName: { eq: "readme-stacks" } } }) { 132 | edges { 133 | node { 134 | id 135 | fields { 136 | stacks { 137 | name 138 | path 139 | } 140 | } 141 | } 142 | } 143 | } 144 | } 145 | ` 146 | ).then(result => { 147 | if (result.errors) { 148 | console.error(result.errors); 149 | reject(result.errors); 150 | return 151 | } 152 | // there will just be one edge for the readme 153 | var pageCount = 0; 154 | result.data.allMarkdownRemark.edges.forEach(({ node }) => { 155 | node.fields.stacks.forEach((stack, index) => { 156 | createPage({ 157 | path: stack.path, 158 | component: path.resolve(`./src/components/pages/readme-stacks-page.js`), 159 | context: { id: node.id, stackName: stack.name } 160 | }); 161 | pageCount++; 162 | }); 163 | }); 164 | console.log(`Built ${pageCount} pages from the gatsby-transform-stacks plugin`); 165 | }) 166 | ); 167 | }); 168 | }; -------------------------------------------------------------------------------- /plugins/gatsby-transform-stacks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-transform-stacks" 3 | } -------------------------------------------------------------------------------- /src/components/banner.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Banner = () => ( 4 |
5 | Awesome Stacks - Discover & share useful tech stacks for your next project 😎 | Product Hunt Embed 6 |
7 | ) 8 | 9 | export default Banner 10 | -------------------------------------------------------------------------------- /src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { StaticQuery, graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | const Footer = () => ( 6 | { 8 | return ( 9 |
10 |
11 |
12 |
13 |
14 |
15 | Made with ♥ by 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 | ); 26 | } 27 | } 28 | query={graphql` 29 | query { 30 | footerImage: file(relativePath: { eq: "stackshare-logo-black.png" }) { 31 | childImageSharp { 32 | fixed(height: 24) { 33 | ...GatsbyImageSharpFixed_noBase64 34 | } 35 | } 36 | } 37 | }`} 38 | /> 39 | ) 40 | 41 | export default Footer -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import { StaticQuery, graphql } from "gatsby" 4 | import { library } from '@fortawesome/fontawesome-svg-core' 5 | import { fab } from '@fortawesome/free-brands-svg-icons' 6 | import { faCommentAlt, faStar, faCodeBranch, faLayerGroup, faExternalLinkAlt, faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons' 7 | import Navbar from "./navbar" 8 | import Footer from "./footer" 9 | 10 | library.add(fab, faCommentAlt, faStar, faCodeBranch, faLayerGroup, faExternalLinkAlt, faArrowCircleRight, faArrowCircleLeft) 11 | 12 | const Layout = ({ children }) => ( 13 | ( 23 |
24 | 25 |
{children}
26 |
27 |
28 | )} 29 | /> 30 | ) 31 | 32 | Layout.propTypes = { 33 | children: PropTypes.node.isRequired, 34 | } 35 | 36 | export default Layout 37 | -------------------------------------------------------------------------------- /src/components/mdx/github.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useStaticQuery, graphql } from "gatsby" 3 | import GitHubCard from "../stacks/github-card" 4 | 5 | function GitHub({ name, children }) { 6 | const data = useStaticQuery(query); 7 | const github = getNode(name, data) 8 | return ( 9 | 10 | 11 | ) 12 | } 13 | 14 | const query = graphql` 15 | query { 16 | allMdx( 17 | filter: { fields: { sourceName: { eq: "content-stacks" } } } 18 | ) { 19 | edges { 20 | node { 21 | ...MdxFields 22 | } 23 | } 24 | } 25 | } 26 | ` 27 | 28 | function getNode(nameWithOwner, data) { 29 | var tool; 30 | data.allMdx.edges.forEach((edge) => { 31 | const tools = edge.node.fields.gitHubTools; 32 | tools.forEach((_tool) => { 33 | if (_tool.nameWithOwner === nameWithOwner) { 34 | tool = _tool; 35 | } 36 | }); 37 | }); 38 | return tool; 39 | } 40 | 41 | export default GitHub 42 | -------------------------------------------------------------------------------- /src/components/mdx/stackshare.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useStaticQuery, graphql } from "gatsby" 3 | import StackShareCard from "../stacks/stackshare-card" 4 | 5 | function StackShare({ name, children }) { 6 | const data = useStaticQuery(query); 7 | const stackshare = getNode(name, data); 8 | return ( 9 | 10 | 11 | ) 12 | } 13 | 14 | const query = graphql` 15 | query { 16 | allMdx( 17 | filter: { fields: { sourceName: { eq: "content-stacks" } } } 18 | ) { 19 | edges { 20 | node { 21 | ...MdxFields 22 | } 23 | } 24 | } 25 | } 26 | ` 27 | function getNode(name, data) { 28 | var tool; 29 | data.allMdx.edges.forEach((edge) => { 30 | const tools = edge.node.fields.stackShareTools; 31 | tools.forEach((_tool) => { 32 | if (_tool.name === name) { 33 | tool = _tool; 34 | } 35 | }); 36 | }); 37 | return tool; 38 | } 39 | 40 | export default StackShare 41 | -------------------------------------------------------------------------------- /src/components/mdx/tools.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | class Tools extends React.Component { 4 | componentDidMount() { 5 | } 6 | 7 | render() { 8 | return ( 9 |
10 | {React.Children.map(this.props.children, 11 | (child =>
{child}
))} 12 |
); 13 | } 14 | } 15 | 16 | export default Tools 17 | -------------------------------------------------------------------------------- /src/components/navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import { useStaticQuery, graphql, Link } from "gatsby" 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 4 | import logoImage from "../images/awesome-stacks-logo.svg" 5 | 6 | function Navbar() { 7 | const data = useStaticQuery(navbarQuery); 8 | const [burger, setBurger] = useState(''); 9 | return ( 10 |
11 |
12 |
13 | 14 | {data.site.siteMetadata.title} 15 | 16 |
setBurger(burger === 'is-active' ? '' : 'is-active')}> 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | About 25 | Contribute 26 | 27 | 28 |   GitHub 29 | 30 |
31 |
32 |
33 |
34 | ) 35 | } 36 | 37 | const navbarQuery = graphql` 38 | query { 39 | brandImage: file(relativePath: { eq: "awesome-stacks-logo.svg" }) { 40 | childImageSharp { 41 | fixed(height: 32) { 42 | ...GatsbyImageSharpFixed_noBase64 43 | } 44 | } 45 | } 46 | site { 47 | siteMetadata { 48 | title 49 | repository 50 | } 51 | } 52 | }`; 53 | 54 | export default Navbar; -------------------------------------------------------------------------------- /src/components/pages/content-docs-page.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby"; 3 | import Layout from "../layout" 4 | import SEO from "../seo" 5 | import MDXRenderer from "gatsby-mdx/mdx-renderer"; 6 | 7 | function ContentDocsPage({ data }) { 8 | return ( 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | {data.mdx.code.body} 17 |
18 |
19 |
20 |
21 |
22 | 23 | ) 24 | } 25 | 26 | export const pageQuery = graphql` 27 | query($id: String!) { 28 | mdx(id: { eq: $id }) { 29 | frontmatter { 30 | title 31 | } 32 | code { 33 | body 34 | } 35 | } 36 | } 37 | ` 38 | export default ContentDocsPage 39 | -------------------------------------------------------------------------------- /src/components/pages/content-page.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import Layout from "../layout" 4 | import SEO from "../seo" 5 | import { MDXTag } from '@mdx-js/tag'; 6 | import Img from "gatsby-image"; 7 | import MDXRenderer from "gatsby-mdx/mdx-renderer"; 8 | 9 | function ContentPage({ data }) { 10 | return ( 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 | 19 | {data.mdx.code.body} 20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | ) 29 | } 30 | 31 | export const pageQuery = graphql` 32 | query($id: String!) { 33 | mdx(id: { eq: $id }) { 34 | frontmatter { 35 | title 36 | } 37 | code { 38 | body 39 | } 40 | } 41 | site { 42 | siteMetadata { 43 | repository 44 | techStack 45 | } 46 | } 47 | stackShareLogo: file(relativePath: { eq: "stackshare-logo.png" }) { 48 | childImageSharp { 49 | fixed(height: 28) { 50 | ...GatsbyImageSharpFixed_noBase64 51 | } 52 | } 53 | } 54 | developerModeLogo: file(relativePath: { eq: "developermode-logo.png" }) { 55 | childImageSharp { 56 | fixed(height: 28) { 57 | ...GatsbyImageSharpFixed_noBase64 58 | } 59 | } 60 | } 61 | }`; 62 | 63 | export default ContentPage 64 | -------------------------------------------------------------------------------- /src/components/pages/content-stacks-page.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MDXTag, MDXProvider } from '@mdx-js/tag'; 3 | import Layout from "../layout"; 4 | import SEO from "../seo"; 5 | import { graphql } from "gatsby"; 6 | import MDXRenderer from "gatsby-mdx/mdx-renderer"; 7 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 8 | 9 | import Tools from "../mdx/tools" 10 | // import StackCard from "../stacks/stack-card" 11 | import GitHub from "../mdx/github" 12 | import StackShare from "../mdx/stackshare" 13 | import ContentStackHero from "../stacks/content-stack-hero" 14 | 15 | const MyH1 = props =>

{props.children}

16 | const components = { 17 | h1: MyH1 18 | } 19 | 20 | function ContentStacksPage({ data }) { 21 | const { mdx } = data; 22 | // const StackCards = data.allMdx.edges.map(edge => 23 | // id === edge.node.id ? `` :
24 | // 25 | //
26 | //
27 | //
28 | // ); 29 | return ( 30 | 31 | 32 | 33 |
34 |
35 |
36 | 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 | 54 | {mdx.code.body} 55 | 56 | 57 |
58 |
59 |
60 |
61 |
62 | {/*
*/} 63 | {/*
64 |
65 |

——— More Stacks ———

66 |
67 |
*/} 68 | {/*
69 | {StackCards} 70 |
71 |
*/} 72 | 73 | ); 74 | } 75 | 76 | // this will query our new node type which contains all the GitHub and StackShare references 77 | export const pageQuery = graphql` 78 | query($id: String!) { 79 | site { 80 | siteMetadata { 81 | repository 82 | } 83 | } 84 | mdx(id: { eq: $id }) { 85 | ...MdxFields 86 | } 87 | allMdx( 88 | sort: { order: DESC, fields: [frontmatter___createdAt] }, 89 | filter: { fields: { sourceName: { eq: "content-stacks" } } } 90 | ) { 91 | edges { 92 | node { 93 | ...MdxFields 94 | } 95 | } 96 | } 97 | } 98 | `; 99 | export default ContentStacksPage -------------------------------------------------------------------------------- /src/components/pages/readme-stacks-page.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, graphql } from "gatsby"; 3 | import Layout from "../layout"; 4 | import SEO from "../seo"; 5 | 6 | import Tools from "../mdx/tools" 7 | import GitHubCard from "../stacks/github-card" 8 | import StackShareCard from "../stacks/stackshare-card" 9 | import ReadmeStackHero from "../stacks/readme-stack-hero" 10 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 11 | 12 | function ReadmeStacksPage({ data, pageContext: { stackName } }) { 13 | const stacks = data.markdownRemark.fields.stacks; 14 | const stack = stacks.find(stack => stack.name === stackName); 15 | const tools = stack.tools.map(tool => { 16 | if (tool.stackShareData) { 17 | return ( 18 | 19 | {tool.description} 20 | 21 | ); 22 | } 23 | else if (tool.gitHubData) { 24 | return ( 25 | 26 | {tool.description} 27 | 28 | ); 29 | } else { 30 | return null; 31 | } 32 | }); 33 | return ( 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |

Tools

42 | {tools} 43 |
44 |
45 |
46 |
47 |

Resources

48 |
49 | {stack.resources.length > 0 ? 50 |
    51 | {stack.resources.map(({ text, href }) => 52 |
    • 53 | )} 54 |
: 55 |
56 | No guides or tutorials listed. Edit this stack to add some.
57 | } 58 |
59 |
60 |
61 |
62 |
63 | < Back to stacks 64 |
65 | 73 |
74 |
75 |
76 | 77 | ); 78 | } 79 | 80 | export const pageQuery = graphql` 81 | query($id: String!) { 82 | site { 83 | siteMetadata { 84 | repository 85 | } 86 | } 87 | markdownRemark(id: { eq: $id }) { 88 | fields { 89 | stacks { 90 | name 91 | description 92 | path 93 | index 94 | resources { 95 | text 96 | href 97 | } 98 | tools { 99 | name 100 | description 101 | gitHubData { 102 | name 103 | nameWithOwner 104 | description 105 | descriptionHTML 106 | stargazers { 107 | totalCount 108 | } 109 | repositoryTopics { 110 | edges { 111 | node { 112 | topic { 113 | name 114 | } 115 | url 116 | } 117 | } 118 | } 119 | forks { 120 | totalCount 121 | } 122 | updatedAt 123 | url 124 | homepageUrl 125 | languages { 126 | edges { 127 | node { 128 | name 129 | color 130 | } 131 | } 132 | } 133 | } 134 | stackShareData { 135 | name 136 | description 137 | imageUrl 138 | websiteUrl 139 | profileUrl 140 | githubUrl 141 | group { 142 | name 143 | url 144 | } 145 | category { 146 | name 147 | url 148 | } 149 | stackshareStats { 150 | name 151 | value 152 | } 153 | githubStats { 154 | name 155 | value 156 | } 157 | } 158 | } 159 | } 160 | } 161 | } 162 | } 163 | `; 164 | export default ReadmeStacksPage -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import Helmet from "react-helmet" 4 | import { useStaticQuery, graphql } from "gatsby" 5 | 6 | function SEO({ description, lang, meta, keywords, title, titleTemplate, image }) { 7 | const { site } = useStaticQuery( 8 | graphql` 9 | query { 10 | site { 11 | siteMetadata { 12 | title 13 | description 14 | author 15 | url 16 | image 17 | imageWidth 18 | imageHeight 19 | } 20 | } 21 | } 22 | ` 23 | ) 24 | 25 | const metaDescription = description || site.siteMetadata.description 26 | 27 | return ( 28 | 0 90 | ? { 91 | name: `keywords`, 92 | content: keywords.join(`, `), 93 | } 94 | : [] 95 | ) 96 | .concat(meta)} 97 | /> 98 | ) 99 | } 100 | 101 | SEO.defaultProps = { 102 | lang: `en`, 103 | meta: [], 104 | keywords: [], 105 | } 106 | 107 | SEO.propTypes = { 108 | description: PropTypes.string, 109 | lang: PropTypes.string, 110 | meta: PropTypes.array, 111 | keywords: PropTypes.arrayOf(PropTypes.string), 112 | title: PropTypes.string.isRequired, 113 | } 114 | 115 | export default SEO 116 | -------------------------------------------------------------------------------- /src/components/stacks/card.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 3 | 4 | function Card({ description, color, children }) { 5 | return ( 6 | <> 7 |
8 |
9 | {children} 10 |
11 |
12 | {description ? ( 13 |
14 | {" "} 21 | {description.replace(/ - /g, "")} 22 |
23 | ) : ( 24 |
25 | )} 26 | 27 | ) 28 | } 29 | 30 | export default Card 31 | -------------------------------------------------------------------------------- /src/components/stacks/category.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import StackCard from "./stack-card" 3 | 4 | const Category = ({ category }) => { 5 | const Stacks = category.stacks.map(stack => ( 6 |
7 | 8 |
9 | )) 10 | return ( 11 | <> 12 |
13 |
14 | {category.name} 15 |
16 |
17 | {Stacks} 18 |
19 | 20 | ) 21 | } 22 | 23 | export default Category 24 | -------------------------------------------------------------------------------- /src/components/stacks/content-stack-hero.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function ContentStackHero({ frontmatter, fields }) { 4 | const { title, description, updatedAt } = frontmatter; 5 | const { contributors } = fields; 6 | return ( 7 |
8 |
9 |
10 |
11 |
12 |

{title}

13 |

{description}

14 |
15 | {contributors ? getContributors(contributors, updatedAt) : ''} 16 |
17 |
18 |
19 |
20 | ) 21 | } 22 | 23 | function getContributors(contributors, updatedAt) { 24 | return ( 25 |
26 |
27 | {contributors.slice(0, 4).map((contributor) => ( 28 | 29 | {`${contributor.login}`} 30 | 31 | ))} 32 |
33 |
    34 |
  • 35 | Contributed by {contributors.map(contributor => @{contributor.login}).map((item, index) => [index > 0 && ' ', item])} 36 |
    • 37 |
  • 38 | Last updated: {updatedAt} 39 |
    • 40 |
41 |
42 | ) 43 | } 44 | export default ContentStackHero -------------------------------------------------------------------------------- /src/components/stacks/github-card.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 3 | import Card from "./card" 4 | import GitHubIcon from "./github-icon"; 5 | import { truncate, shortenLargeNumber } from "../../utils" 6 | 7 | function GitHubCard({ name, description, github }) { 8 | if (!github) { 9 | return {name} not found 10 | } 11 | const url = github.homepageUrl || github.url; 12 | return ( 13 | 14 |
15 | 16 |
17 | {github.name} 18 |
19 |
20 | 25 |
26 | {truncate(github.description, 70)} 27 |
28 |
29 |
30 | 42 | {github.repositoryTopics.edges.length > 0 ? ( 43 |
44 |
45 | {github.repositoryTopics.edges.map(edge => ( 46 | 51 | ))} 52 |
53 |
54 | ) : ''} 55 |
56 | 57 | ) 58 | } 59 | 60 | export default GitHubCard 61 | -------------------------------------------------------------------------------- /src/components/stacks/github-icon.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | function GitHubIcon({ github }) { 4 | const languageEdge = github.languages.edges[0] 5 | const languageColor = languageEdge ? languageEdge.node.color : "#CC427F" 6 | const languageName = languageEdge ? languageEdge.node.name : "" 7 | return ( 8 |
20 | 21 | {github.name.substring(0, 1).toUpperCase()} 22 | 23 | {github.name.substring(1, 2)} 24 |
25 | ) 26 | } 27 | 28 | export default GitHubIcon 29 | -------------------------------------------------------------------------------- /src/components/stacks/readme-stack-hero.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "gatsby"; 3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 4 | 5 | function ReadmeStackHero({ stack: { name, description, index }, stacks }) { 6 | var nextStack = stacks[index + 1]; 7 | const prevStack = stacks[index - 1]; 8 | return ( 9 |
10 |
11 |
12 |
13 |
14 | {prevStack ? 15 |
16 | 17 | 18 | 19 |
20 | : "" 21 | } 22 |

{name}

23 |

{description}

24 | {nextStack ? 25 |
26 | 27 | 28 | 29 |
30 | : "" 31 | } 32 |
33 |
34 |
35 |
36 |
37 | ) 38 | } 39 | 40 | export default ReadmeStackHero -------------------------------------------------------------------------------- /src/components/stacks/stack-card.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import GitHubIcon from "./github-icon" 4 | import { truncate } from "../../utils" 5 | 6 | const StackCard = ({ stack }) => ( 7 | <> 8 |
9 |
10 |
11 |
12 |
13 |

14 | 15 | {stack.name} 16 | 17 |

18 |

19 | {truncate(stack.description, 150)} 20 |

21 |
22 |
23 |
24 | {stack.tools.slice(0, 3).map((tool) => 25 |
26 | 27 | {tool.stackShareData ? 28 | {tool.stackShareData.name} 29 | : tool.gitHubData ? : 30 |
31 | {tool.name} 32 |
33 | } 34 | 35 |
36 | )} 37 |
38 | { stack.tools.length > 3 ? 39 |
40 | 41 | and {stack.tools.length - 3} more... 42 | 43 |
44 | : "" } 45 |
46 |
47 | 48 | ); 49 | 50 | export default StackCard -------------------------------------------------------------------------------- /src/components/stacks/stackshare-card.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 3 | import Card from "./card" 4 | import { truncate, shortenLargeNumber } from "../../utils" 5 | 6 | function StackShare({ name, description, stackshare }) { 7 | if (!stackshare) { 8 | return {name} not found 9 | } 10 | const stacksMetric = getMetric(`stacks`, stackshare.stackshareStats); 11 | const starsMetric = getMetric(`stars`, stackshare.githubStats || []); 12 | const forksMetric = getMetric(`forks`, stackshare.githubStats || []); 13 | return ( 14 | 15 |
16 |
17 | 18 | Tool logo 19 | 20 |
21 | 26 |
27 |
28 | 29 | StackShare 30 | 31 | {stackshare.githubUrl ? 32 |  ·  33 | 34 | GitHub 35 | 36 | 37 | : ``} 38 |
39 |
40 | {truncate(stackshare.description, 70)} 41 |
42 |
43 |
44 |
45 |
46 | {starsMetric ? metricsLevelItem(`star`, `${stackshare.githubUrl}/stargazers`, starsMetric.value) : ``} 47 | {forksMetric ? metricsLevelItem(`code-branch`, `${stackshare.githubUrl}/network/members`, forksMetric.value) : ``} 48 | {stacksMetric ? metricsLevelItem(`layer-group`, `${stackshare.profileUrl}/in-stacks`, stacksMetric.value) : ``} 49 |
50 |
51 |
52 | 60 |
61 |
62 |
63 | 64 | ); 65 | } 66 | 67 | function getMetric(name, metrics) { 68 | return metrics.find((metric) => { 69 | return metric.name === name; 70 | }); 71 | } 72 | 73 | function metricsLevelItem(icon, url, value) { 74 | return ( 75 | 80 | ); 81 | } 82 | 83 | export default StackShare 84 | -------------------------------------------------------------------------------- /src/css/bulma/_variables.sass: -------------------------------------------------------------------------------- 1 | // define variables that influence the bulma build 2 | // see https://bulma.io/documentation/customize/variables/ 3 | 4 | // limit maximum width of site 5 | $gap: 32px 6 | $desktop: 760px + (2 * $gap) 7 | $widescreen-enabled: false 8 | $fullhd-enabled: false 9 | 10 | $red: #EF65A4 11 | $grey: #8E9FA9 12 | $blue: #163F5F 13 | 14 | $link: $red 15 | $info: $blue 16 | $link-hover: $blue 17 | $body-color: darken($grey, 15%) 18 | 19 | // $body-size: 16px 20 | $size-1: 3.5rem 21 | $size-2: 2.75rem 22 | $size-3: 2.2rem 23 | $size-4: 1.25rem 24 | $size-5: 1.1rem 25 | 26 | $navbar-height: 4rem 27 | $navbar-item-img-max-height: 2rem 28 | 29 | $family-sans-serif: 'Inter', sans-serif 30 | $family-primary: $family-sans-serif -------------------------------------------------------------------------------- /src/css/bulma/bulma.sass: -------------------------------------------------------------------------------- 1 | @import "_variables" 2 | @import "../../../node_modules/bulma/bulma" 3 | 4 | h1, h2, h3, h4, .navbar-brand 5 | text-transform: uppercase !important 6 | font-family: 'BebasNeue' 7 | line-height: 1 8 | 9 | h1, h2, h3, h4 10 | color: $red 11 | 12 | .content 13 | h1, h2, h3, h4 14 | color: $red 15 | h1, h2, h3, h4, h5, h6 16 | font-weight: inherit !important 17 | 18 | .navbar-item, .navbar-item a 19 | text-transform: uppercase 20 | font-weight: bold 21 | color: $grey !important 22 | 23 | .navbar-item.is-active 24 | color: $blue !important 25 | 26 | .navbar-brand 27 | a 28 | color: $grey !important 29 | 30 | html body .tag 31 | font-weight: bold 32 | height: 1.5em 33 | padding-left: 0.5em 34 | padding-right: 0.5em 35 | &.is-grey 36 | background: $grey !important 37 | color: $white !important 38 | 39 | // bulma content header size and spacing 40 | // no sass variable so have to override here 41 | // these are the defaults 42 | .content 43 | h1 44 | font-size: $size-1 45 | margin-bottom: 0.5em 46 | &:not(:first-child) 47 | margin-top: 1em 48 | h2 49 | font-size: $size-2 50 | margin-bottom: 0.5714em 51 | &:not(:first-child) 52 | margin-top: 1.1428em 53 | h3 54 | font-size: $size-3 55 | margin-bottom: 0.6666em 56 | &:not(:first-child) 57 | margin-top: 1.3333em 58 | h4 59 | font-size: $size-4 60 | margin-bottom: 0.8em 61 | h5 62 | font-size: $size-5 63 | margin-bottom: 0.8888em 64 | h6 65 | font-size: $size-6 66 | margin-bottom: 1em -------------------------------------------------------------------------------- /src/css/fonts/bebas.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "BebasNeue"; 3 | src: url("fonts/bebas/38FEED_0_0.woff2") format("woff2"), url("fonts/bebas/38FEED_0_0.woff") format("woff"); 4 | } 5 | -------------------------------------------------------------------------------- /src/css/fonts/bebas/38FEED_0_0.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/bebas/38FEED_0_0.woff -------------------------------------------------------------------------------- /src/css/fonts/bebas/38FEED_0_0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/bebas/38FEED_0_0.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Inter"; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: url("fonts/inter/Inter-Regular.woff2") format("woff2"), url("fonts/inter/Inter-Regular.woff") format("woff"); 6 | } 7 | @font-face { 8 | font-family: "Inter"; 9 | font-style: italic; 10 | font-weight: 400; 11 | src: url("fonts/inter/Inter-Italic.woff2") format("woff2"), url("fonts/inter/Inter-Italic.woff") format("woff"); 12 | } 13 | 14 | @font-face { 15 | font-family: "Inter"; 16 | font-style: normal; 17 | font-weight: 700; 18 | src: url("fonts/inter/Inter-Bold.woff2") format("woff2"), url("fonts/inter/Inter-Bold.woff") format("woff"); 19 | } 20 | -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Black.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Black.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-BlackItalic.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-BlackItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-BlackItalic.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Bold.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Bold.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-BoldItalic.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-BoldItalic.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraBold.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraBold.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraBoldItalic.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraBoldItalic.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraLight-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraLight-BETA.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraLight-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraLight-BETA.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraLightItalic-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraLightItalic-BETA.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ExtraLightItalic-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ExtraLightItalic-BETA.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Italic.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Italic.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Light-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Light-BETA.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Light-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Light-BETA.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-LightItalic-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-LightItalic-BETA.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-LightItalic-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-LightItalic-BETA.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Medium.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Medium.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-MediumItalic.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-MediumItalic.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Regular.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Regular.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-SemiBold.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-SemiBold.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-SemiBoldItalic.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Thin-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Thin-BETA.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-Thin-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-Thin-BETA.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ThinItalic-BETA.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ThinItalic-BETA.woff -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-ThinItalic-BETA.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-ThinItalic-BETA.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-italic.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-italic.var.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter-upright.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter-upright.var.woff2 -------------------------------------------------------------------------------- /src/css/fonts/inter/Inter.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/css/fonts/inter/Inter.var.woff2 -------------------------------------------------------------------------------- /src/css/layout.sass: -------------------------------------------------------------------------------- 1 | @import "bulma/bulma" 2 | @import "lib/bulma-helpers/bulma-helpers" 3 | @import "./fonts/inter" 4 | @import "./fonts/bebas" 5 | 6 | .layout 7 | display: flex 8 | min-height: 100vh 9 | flex-direction: column 10 | main 11 | flex: 1 12 | 13 | .is-size-hero-title 14 | font-size: 5rem 15 | 16 | .is-size-larger 17 | font-size: 1.5rem 18 | 19 | .navbar-end 20 | .navbar-item 21 | padding-top: 18px 22 | 23 | .is-uppercase 24 | text-transform: uppercase 25 | font-family: 'BebasNeue', serif 26 | 27 | .stack-hero 28 | a, h1, h2, h3, h4, h5, h6 29 | color: white !important 30 | 31 | .grey-box 32 | background: $grey 33 | border-radius: 0 34 | box-shadow: none 35 | * 36 | color: $white !important 37 | a 38 | font-weight: bold 39 | font-size: $size-7 40 | li 41 | line-height: 1.1em !important 42 | &.is-fixed 43 | width: 165px 44 | 45 | .card .level 46 | align-items: flex-start 47 | 48 | .is-strong 49 | font-weight: bold 50 | 51 | .content hr 52 | margin: 2rem 0 53 | 54 | .content > div > hr:first-child 55 | display: none 56 | 57 | .has-background-blue-gradient 58 | background: $blue 59 | background: linear-gradient(90deg, rgba(8,31,50,1) 0%, rgba(19,58,89,1) 50%, rgba(24,84,130,1) 100%) 60 | 61 | body hr, .has-dotted-line 62 | background: $grey-lighter 63 | height: 2px 64 | 65 | .is-logo 66 | width: 75px 67 | height: 75px 68 | border-radius: 3px 69 | 70 | .is-fixed 71 | position: fixed 72 | 73 | .anchor 74 | position: relative 75 | a, div 76 | position: absolute 77 | left: 0px 78 | top: -100px 79 | 80 | .card 81 | height: 360px 82 | .is-top 83 | height: 120px 84 | .is-logo-link 85 | height: 80px 86 | .is-description 87 | height: 65px 88 | font-size: 0.8rem 89 | .tag 90 | color: $white 91 | background: $blue 92 | background: linear-gradient(90deg, rgba(8,31,50,1) 0%, rgba(19,58,89,1) 50%, rgba(24,84,130,1) 100%) 93 | 94 | .is-comment 95 | font-size: 0.8rem 96 | 97 | .has-overflow-hidden 98 | overflow: hidden 99 | 100 | .is-relative 101 | position: relative 102 | 103 | .is-absolute 104 | position: absolute 105 | 106 | .is-avatar-image 107 | max-width: 75px 108 | border-radius: 3px 109 | 110 | .arrow 111 | display: none 112 | @media(min-width: 960px) 113 | display: block 114 | position: absolute 115 | top: 40% 116 | &.prev-arrow 117 | left: -10% 118 | &.next-arrow 119 | right: -10% 120 | 121 | .has-grey-lighter-hover 122 | &:hover 123 | background-color: $grey-lighter -------------------------------------------------------------------------------- /src/css/lib/bulma-helpers/bulma-helpers.css: -------------------------------------------------------------------------------- 1 | .is-borderless { 2 | border: 0px !important; 3 | } 4 | 5 | .is-top-borderless { 6 | border-top: 0px !important; 7 | } 8 | 9 | .is-bottom-borderless { 10 | border-bottom: 0px !important; 11 | } 12 | 13 | .is-left-borderless { 14 | border-left: 0px !important; 15 | } 16 | 17 | .is-right-borderless { 18 | border-right: 0px !important; 19 | } 20 | 21 | .has-border-width-1 { 22 | border-width: 1px !important; 23 | } 24 | 25 | .has-border-top-width-1 { 26 | border-top-width: 1px !important; 27 | } 28 | 29 | .has-border-bottom-width-1 { 30 | border-bottom-width: 1px !important; 31 | } 32 | 33 | .has-border-left-width-1 { 34 | border-left-width: 1px !important; 35 | } 36 | 37 | .has-border-right-width-1 { 38 | border-right-width: 1px !important; 39 | } 40 | 41 | .has-border-width-2 { 42 | border-width: 2px !important; 43 | } 44 | 45 | .has-border-top-width-2 { 46 | border-top-width: 2px !important; 47 | } 48 | 49 | .has-border-bottom-width-2 { 50 | border-bottom-width: 2px !important; 51 | } 52 | 53 | .has-border-left-width-2 { 54 | border-left-width: 2px !important; 55 | } 56 | 57 | .has-border-right-width-2 { 58 | border-right-width: 2px !important; 59 | } 60 | 61 | .has-border-width-3 { 62 | border-width: 3px !important; 63 | } 64 | 65 | .has-border-top-width-3 { 66 | border-top-width: 3px !important; 67 | } 68 | 69 | .has-border-bottom-width-3 { 70 | border-bottom-width: 3px !important; 71 | } 72 | 73 | .has-border-left-width-3 { 74 | border-left-width: 3px !important; 75 | } 76 | 77 | .has-border-right-width-3 { 78 | border-right-width: 3px !important; 79 | } 80 | 81 | .has-border-width-4 { 82 | border-width: 4px !important; 83 | } 84 | 85 | .has-border-top-width-4 { 86 | border-top-width: 4px !important; 87 | } 88 | 89 | .has-border-bottom-width-4 { 90 | border-bottom-width: 4px !important; 91 | } 92 | 93 | .has-border-left-width-4 { 94 | border-left-width: 4px !important; 95 | } 96 | 97 | .has-border-right-width-4 { 98 | border-right-width: 4px !important; 99 | } 100 | 101 | .has-border-width-5 { 102 | border-width: 5px !important; 103 | } 104 | 105 | .has-border-top-width-5 { 106 | border-top-width: 5px !important; 107 | } 108 | 109 | .has-border-bottom-width-5 { 110 | border-bottom-width: 5px !important; 111 | } 112 | 113 | .has-border-left-width-5 { 114 | border-left-width: 5px !important; 115 | } 116 | 117 | .has-border-right-width-5 { 118 | border-right-width: 5px !important; 119 | } 120 | 121 | .has-border-width-6 { 122 | border-width: 6px !important; 123 | } 124 | 125 | .has-border-top-width-6 { 126 | border-top-width: 6px !important; 127 | } 128 | 129 | .has-border-bottom-width-6 { 130 | border-bottom-width: 6px !important; 131 | } 132 | 133 | .has-border-left-width-6 { 134 | border-left-width: 6px !important; 135 | } 136 | 137 | .has-border-right-width-6 { 138 | border-right-width: 6px !important; 139 | } 140 | 141 | .has-border-width-7 { 142 | border-width: 7px !important; 143 | } 144 | 145 | .has-border-top-width-7 { 146 | border-top-width: 7px !important; 147 | } 148 | 149 | .has-border-bottom-width-7 { 150 | border-bottom-width: 7px !important; 151 | } 152 | 153 | .has-border-left-width-7 { 154 | border-left-width: 7px !important; 155 | } 156 | 157 | .has-border-right-width-7 { 158 | border-right-width: 7px !important; 159 | } 160 | 161 | .has-border-width-8 { 162 | border-width: 8px !important; 163 | } 164 | 165 | .has-border-top-width-8 { 166 | border-top-width: 8px !important; 167 | } 168 | 169 | .has-border-bottom-width-8 { 170 | border-bottom-width: 8px !important; 171 | } 172 | 173 | .has-border-left-width-8 { 174 | border-left-width: 8px !important; 175 | } 176 | 177 | .has-border-right-width-8 { 178 | border-right-width: 8px !important; 179 | } 180 | 181 | .has-border-width-9 { 182 | border-width: 9px !important; 183 | } 184 | 185 | .has-border-top-width-9 { 186 | border-top-width: 9px !important; 187 | } 188 | 189 | .has-border-bottom-width-9 { 190 | border-bottom-width: 9px !important; 191 | } 192 | 193 | .has-border-left-width-9 { 194 | border-left-width: 9px !important; 195 | } 196 | 197 | .has-border-right-width-9 { 198 | border-right-width: 9px !important; 199 | } 200 | 201 | .has-cursor-pointer { 202 | cursor: pointer !important; 203 | } 204 | 205 | .has-cursor-grab { 206 | cursor: -webkit-grab !important; 207 | cursor: grab !important; 208 | } 209 | 210 | .has-cursor-help { 211 | cursor: help !important; 212 | } 213 | 214 | .has-cursor-wait { 215 | cursor: wait !important; 216 | } 217 | 218 | .has-cursor-crosshair { 219 | cursor: crosshair !important; 220 | } 221 | 222 | .has-cursor-not-allowed { 223 | cursor: not-allowed !important; 224 | } 225 | 226 | .has-cursor-zoom-in { 227 | cursor: zoom-in !important; 228 | } 229 | 230 | .flex .flex-row, .flex .flex-column { 231 | display: flex; 232 | } 233 | 234 | .flex-row { 235 | flex-direction: row !important; 236 | } 237 | 238 | .flex-column { 239 | flex-direction: column !important; 240 | } 241 | 242 | .nowrap { 243 | flex-wrap: nowrap !important; 244 | } 245 | 246 | .wrap { 247 | flex-wrap: wrap !important; 248 | } 249 | 250 | .wrap-reverse { 251 | flex-wrap: wrap-reverse !important; 252 | } 253 | 254 | .align-start { 255 | align-content: start !important; 256 | } 257 | 258 | .align-end { 259 | align-content: end !important; 260 | } 261 | 262 | .align-flex-start { 263 | align-content: flex-start !important; 264 | } 265 | 266 | .align-flex-end { 267 | align-content: flex-end !important; 268 | } 269 | 270 | .align-center { 271 | align-content: center !important; 272 | } 273 | 274 | .align-normal { 275 | align-content: normal !important; 276 | } 277 | 278 | .align-space-between { 279 | align-content: space-between !important; 280 | } 281 | 282 | .align-space-around { 283 | align-content: space-around !important; 284 | } 285 | 286 | .align-space-evenly { 287 | align-content: space-evenly !important; 288 | } 289 | 290 | .align-stretch { 291 | align-content: stretch !important; 292 | } 293 | 294 | .align-baseline { 295 | align-content: baseline !important; 296 | } 297 | 298 | .justify-left { 299 | justify-content: left !important; 300 | } 301 | 302 | .justify-right { 303 | justify-content: right !important; 304 | } 305 | 306 | .justify-start { 307 | justify-content: start !important; 308 | } 309 | 310 | .justify-end { 311 | justify-content: end !important; 312 | } 313 | 314 | .justify-flex-start { 315 | justify-content: flex-start !important; 316 | } 317 | 318 | .justify-flex-end { 319 | justify-content: flex-end !important; 320 | } 321 | 322 | .justify-center { 323 | justify-content: center !important; 324 | } 325 | 326 | .justify-normal { 327 | justify-content: normal !important; 328 | } 329 | 330 | .justify-space-between { 331 | justify-content: space-between !important; 332 | } 333 | 334 | .justify-space-around { 335 | justify-content: space-around !important; 336 | } 337 | 338 | .justify-space-evenly { 339 | justify-content: space-evenly !important; 340 | } 341 | 342 | .justify-stretch { 343 | justify-content: stretch !important; 344 | } 345 | 346 | .justify-baseline { 347 | justify-content: baseline !important; 348 | } 349 | 350 | .align-self-auto { 351 | align-self: auto !important; 352 | } 353 | 354 | .align-self-flex-start { 355 | align-self: flex-start !important; 356 | } 357 | 358 | .align-self-flex-end { 359 | align-self: flex-end !important; 360 | } 361 | 362 | .align-self-center { 363 | align-self: center !important; 364 | } 365 | 366 | .align-self-baseline { 367 | align-self: baseline !important; 368 | } 369 | 370 | .align-self-stretch { 371 | align-self: stretch !important; 372 | } 373 | 374 | .align-items-flex-start { 375 | align-items: flex-start !important; 376 | } 377 | 378 | .align-items-flex-end { 379 | align-items: flex-end !important; 380 | } 381 | 382 | .align-items-center { 383 | align-items: center !important; 384 | } 385 | 386 | .align-items-baseline { 387 | align-items: baseline !important; 388 | } 389 | 390 | .align-items-stretch { 391 | align-items: stretch !important; 392 | } 393 | 394 | .is-blurred { 395 | -webkit-filter: blur(15px) !important; 396 | filter: blur(15px) !important; 397 | } 398 | 399 | .is-blurred-medium { 400 | -webkit-filter: blur(40px) !important; 401 | filter: blur(40px) !important; 402 | } 403 | 404 | .is-blurred-hard { 405 | -webkit-filter: blur(75px) !important; 406 | filter: blur(75px) !important; 407 | } 408 | 409 | .has-max-width-50 { 410 | max-width: 50px !important; 411 | } 412 | 413 | .has-min-width-50 { 414 | min-width: 50px !important; 415 | } 416 | 417 | .has-max-height-50 { 418 | max-height: 50px !important; 419 | } 420 | 421 | .has-min-height-50 { 422 | min-height: 50px !important; 423 | } 424 | 425 | .has-max-width-100 { 426 | max-width: 100px !important; 427 | } 428 | 429 | .has-min-width-100 { 430 | min-width: 100px !important; 431 | } 432 | 433 | .has-max-height-100 { 434 | max-height: 100px !important; 435 | } 436 | 437 | .has-min-height-100 { 438 | min-height: 100px !important; 439 | } 440 | 441 | .has-max-width-150 { 442 | max-width: 150px !important; 443 | } 444 | 445 | .has-min-width-150 { 446 | min-width: 150px !important; 447 | } 448 | 449 | .has-max-height-150 { 450 | max-height: 150px !important; 451 | } 452 | 453 | .has-min-height-150 { 454 | min-height: 150px !important; 455 | } 456 | 457 | .has-max-width-200 { 458 | max-width: 200px !important; 459 | } 460 | 461 | .has-min-width-200 { 462 | min-width: 200px !important; 463 | } 464 | 465 | .has-max-height-200 { 466 | max-height: 200px !important; 467 | } 468 | 469 | .has-min-height-200 { 470 | min-height: 200px !important; 471 | } 472 | 473 | .has-max-width-250 { 474 | max-width: 250px !important; 475 | } 476 | 477 | .has-min-width-250 { 478 | min-width: 250px !important; 479 | } 480 | 481 | .has-max-height-250 { 482 | max-height: 250px !important; 483 | } 484 | 485 | .has-min-height-250 { 486 | min-height: 250px !important; 487 | } 488 | 489 | .has-max-width-300 { 490 | max-width: 300px !important; 491 | } 492 | 493 | .has-min-width-300 { 494 | min-width: 300px !important; 495 | } 496 | 497 | .has-max-height-300 { 498 | max-height: 300px !important; 499 | } 500 | 501 | .has-min-height-300 { 502 | min-height: 300px !important; 503 | } 504 | 505 | .has-max-width-350 { 506 | max-width: 350px !important; 507 | } 508 | 509 | .has-min-width-350 { 510 | min-width: 350px !important; 511 | } 512 | 513 | .has-max-height-350 { 514 | max-height: 350px !important; 515 | } 516 | 517 | .has-min-height-350 { 518 | min-height: 350px !important; 519 | } 520 | 521 | .has-width-50 { 522 | width: 50px !important; 523 | } 524 | 525 | .has-height-50 { 526 | height: 50px !important; 527 | } 528 | 529 | .has-width-100 { 530 | width: 100px !important; 531 | } 532 | 533 | .has-height-100 { 534 | height: 100px !important; 535 | } 536 | 537 | .has-width-150 { 538 | width: 150px !important; 539 | } 540 | 541 | .has-height-150 { 542 | height: 150px !important; 543 | } 544 | 545 | .has-width-200 { 546 | width: 200px !important; 547 | } 548 | 549 | .has-height-200 { 550 | height: 200px !important; 551 | } 552 | 553 | .has-width-250 { 554 | width: 250px !important; 555 | } 556 | 557 | .has-height-250 { 558 | height: 250px !important; 559 | } 560 | 561 | .has-width-300 { 562 | width: 300px !important; 563 | } 564 | 565 | .has-height-300 { 566 | height: 300px !important; 567 | } 568 | 569 | .has-width-350 { 570 | width: 350px !important; 571 | } 572 | 573 | .has-height-350 { 574 | height: 350px !important; 575 | } 576 | 577 | .is-full-height { 578 | height: 100% !important; 579 | } 580 | 581 | .has-page-height { 582 | height: 100vh !important; 583 | } 584 | 585 | .is-half-height { 586 | height: 50% !important; 587 | } 588 | 589 | .has-half-page-height { 590 | height: 50vh !important; 591 | } 592 | 593 | .is-quarter-height { 594 | height: 25% !important; 595 | } 596 | 597 | .has-quarter-page-height { 598 | height: 25vh !important; 599 | } 600 | 601 | .is-full-width { 602 | width: 100% !important; 603 | } 604 | 605 | .has-page-width { 606 | width: 100vw !important; 607 | } 608 | 609 | .is-half-width { 610 | width: 50% !important; 611 | } 612 | 613 | .has-half-page-width { 614 | width: 50vw !important; 615 | } 616 | 617 | .is-quarter-width { 618 | width: 25% !important; 619 | } 620 | 621 | .has-quarter-page-width { 622 | width: 25vw !important; 623 | } 624 | 625 | .has-margin-5 { 626 | margin: 5px !important; 627 | } 628 | 629 | .has-padding-5 { 630 | padding: 5px !important; 631 | } 632 | 633 | .has-margin-top-5 { 634 | margin-top: 5px !important; 635 | } 636 | 637 | .has-padding-top-5 { 638 | padding-top: 5px !important; 639 | } 640 | 641 | .has-margin-bottom-5 { 642 | margin-bottom: 5px !important; 643 | } 644 | 645 | .has-padding-bottom-5 { 646 | padding-bottom: 5px !important; 647 | } 648 | 649 | .has-margin-left-5 { 650 | margin-left: 5px !important; 651 | } 652 | 653 | .has-padding-left-5 { 654 | padding-left: 5px !important; 655 | } 656 | 657 | .has-margin-right-5 { 658 | margin-right: 5px !important; 659 | } 660 | 661 | .has-padding-right-5 { 662 | padding-right: 5px !important; 663 | } 664 | 665 | .has-margin-10 { 666 | margin: 10px !important; 667 | } 668 | 669 | .has-padding-10 { 670 | padding: 10px !important; 671 | } 672 | 673 | .has-margin-top-10 { 674 | margin-top: 10px !important; 675 | } 676 | 677 | .has-padding-top-10 { 678 | padding-top: 10px !important; 679 | } 680 | 681 | .has-margin-bottom-10 { 682 | margin-bottom: 10px !important; 683 | } 684 | 685 | .has-padding-bottom-10 { 686 | padding-bottom: 10px !important; 687 | } 688 | 689 | .has-margin-left-10 { 690 | margin-left: 10px !important; 691 | } 692 | 693 | .has-padding-left-10 { 694 | padding-left: 10px !important; 695 | } 696 | 697 | .has-margin-right-10 { 698 | margin-right: 10px !important; 699 | } 700 | 701 | .has-padding-right-10 { 702 | padding-right: 10px !important; 703 | } 704 | 705 | .has-margin-15 { 706 | margin: 15px !important; 707 | } 708 | 709 | .has-padding-15 { 710 | padding: 15px !important; 711 | } 712 | 713 | .has-margin-top-15 { 714 | margin-top: 15px !important; 715 | } 716 | 717 | .has-padding-top-15 { 718 | padding-top: 15px !important; 719 | } 720 | 721 | .has-margin-bottom-15 { 722 | margin-bottom: 15px !important; 723 | } 724 | 725 | .has-padding-bottom-15 { 726 | padding-bottom: 15px !important; 727 | } 728 | 729 | .has-margin-left-15 { 730 | margin-left: 15px !important; 731 | } 732 | 733 | .has-padding-left-15 { 734 | padding-left: 15px !important; 735 | } 736 | 737 | .has-margin-right-15 { 738 | margin-right: 15px !important; 739 | } 740 | 741 | .has-padding-right-15 { 742 | padding-right: 15px !important; 743 | } 744 | 745 | .has-margin-20 { 746 | margin: 20px !important; 747 | } 748 | 749 | .has-padding-20 { 750 | padding: 20px !important; 751 | } 752 | 753 | .has-margin-top-20 { 754 | margin-top: 20px !important; 755 | } 756 | 757 | .has-padding-top-20 { 758 | padding-top: 20px !important; 759 | } 760 | 761 | .has-margin-bottom-20 { 762 | margin-bottom: 20px !important; 763 | } 764 | 765 | .has-padding-bottom-20 { 766 | padding-bottom: 20px !important; 767 | } 768 | 769 | .has-margin-left-20 { 770 | margin-left: 20px !important; 771 | } 772 | 773 | .has-padding-left-20 { 774 | padding-left: 20px !important; 775 | } 776 | 777 | .has-margin-right-20 { 778 | margin-right: 20px !important; 779 | } 780 | 781 | .has-padding-right-20 { 782 | padding-right: 20px !important; 783 | } 784 | 785 | .has-margin-25 { 786 | margin: 25px !important; 787 | } 788 | 789 | .has-padding-25 { 790 | padding: 25px !important; 791 | } 792 | 793 | .has-margin-top-25 { 794 | margin-top: 25px !important; 795 | } 796 | 797 | .has-padding-top-25 { 798 | padding-top: 25px !important; 799 | } 800 | 801 | .has-margin-bottom-25 { 802 | margin-bottom: 25px !important; 803 | } 804 | 805 | .has-padding-bottom-25 { 806 | padding-bottom: 25px !important; 807 | } 808 | 809 | .has-margin-left-25 { 810 | margin-left: 25px !important; 811 | } 812 | 813 | .has-padding-left-25 { 814 | padding-left: 25px !important; 815 | } 816 | 817 | .has-margin-right-25 { 818 | margin-right: 25px !important; 819 | } 820 | 821 | .has-padding-right-25 { 822 | padding-right: 25px !important; 823 | } 824 | 825 | .has-margin-30 { 826 | margin: 30px !important; 827 | } 828 | 829 | .has-padding-30 { 830 | padding: 30px !important; 831 | } 832 | 833 | .has-margin-top-30 { 834 | margin-top: 30px !important; 835 | } 836 | 837 | .has-padding-top-30 { 838 | padding-top: 30px !important; 839 | } 840 | 841 | .has-margin-bottom-30 { 842 | margin-bottom: 30px !important; 843 | } 844 | 845 | .has-padding-bottom-30 { 846 | padding-bottom: 30px !important; 847 | } 848 | 849 | .has-margin-left-30 { 850 | margin-left: 30px !important; 851 | } 852 | 853 | .has-padding-left-30 { 854 | padding-left: 30px !important; 855 | } 856 | 857 | .has-margin-right-30 { 858 | margin-right: 30px !important; 859 | } 860 | 861 | .has-padding-right-30 { 862 | padding-right: 30px !important; 863 | } 864 | 865 | .has-margin-35 { 866 | margin: 35px !important; 867 | } 868 | 869 | .has-padding-35 { 870 | padding: 35px !important; 871 | } 872 | 873 | .has-margin-top-35 { 874 | margin-top: 35px !important; 875 | } 876 | 877 | .has-padding-top-35 { 878 | padding-top: 35px !important; 879 | } 880 | 881 | .has-margin-bottom-35 { 882 | margin-bottom: 35px !important; 883 | } 884 | 885 | .has-padding-bottom-35 { 886 | padding-bottom: 35px !important; 887 | } 888 | 889 | .has-margin-left-35 { 890 | margin-left: 35px !important; 891 | } 892 | 893 | .has-padding-left-35 { 894 | padding-left: 35px !important; 895 | } 896 | 897 | .has-margin-right-35 { 898 | margin-right: 35px !important; 899 | } 900 | 901 | .has-padding-right-35 { 902 | padding-right: 35px !important; 903 | } 904 | 905 | .has-margin-40 { 906 | margin: 40px !important; 907 | } 908 | 909 | .has-padding-40 { 910 | padding: 40px !important; 911 | } 912 | 913 | .has-margin-top-40 { 914 | margin-top: 40px !important; 915 | } 916 | 917 | .has-padding-top-40 { 918 | padding-top: 40px !important; 919 | } 920 | 921 | .has-margin-bottom-40 { 922 | margin-bottom: 40px !important; 923 | } 924 | 925 | .has-padding-bottom-40 { 926 | padding-bottom: 40px !important; 927 | } 928 | 929 | .has-margin-left-40 { 930 | margin-left: 40px !important; 931 | } 932 | 933 | .has-padding-left-40 { 934 | padding-left: 40px !important; 935 | } 936 | 937 | .has-margin-right-40 { 938 | margin-right: 40px !important; 939 | } 940 | 941 | .has-padding-right-40 { 942 | padding-right: 40px !important; 943 | } 944 | 945 | .has-margin-45 { 946 | margin: 45px !important; 947 | } 948 | 949 | .has-padding-45 { 950 | padding: 45px !important; 951 | } 952 | 953 | .has-margin-top-45 { 954 | margin-top: 45px !important; 955 | } 956 | 957 | .has-padding-top-45 { 958 | padding-top: 45px !important; 959 | } 960 | 961 | .has-margin-bottom-45 { 962 | margin-bottom: 45px !important; 963 | } 964 | 965 | .has-padding-bottom-45 { 966 | padding-bottom: 45px !important; 967 | } 968 | 969 | .has-margin-left-45 { 970 | margin-left: 45px !important; 971 | } 972 | 973 | .has-padding-left-45 { 974 | padding-left: 45px !important; 975 | } 976 | 977 | .has-margin-right-45 { 978 | margin-right: 45px !important; 979 | } 980 | 981 | .has-padding-right-45 { 982 | padding-right: 45px !important; 983 | } 984 | 985 | .has-margin-50 { 986 | margin: 50px !important; 987 | } 988 | 989 | .has-padding-50 { 990 | padding: 50px !important; 991 | } 992 | 993 | .has-margin-top-50 { 994 | margin-top: 50px !important; 995 | } 996 | 997 | .has-padding-top-50 { 998 | padding-top: 50px !important; 999 | } 1000 | 1001 | .has-margin-bottom-50 { 1002 | margin-bottom: 50px !important; 1003 | } 1004 | 1005 | .has-padding-bottom-50 { 1006 | padding-bottom: 50px !important; 1007 | } 1008 | 1009 | .has-margin-left-50 { 1010 | margin-left: 50px !important; 1011 | } 1012 | 1013 | .has-padding-left-50 { 1014 | padding-left: 50px !important; 1015 | } 1016 | 1017 | .has-margin-right-50 { 1018 | margin-right: 50px !important; 1019 | } 1020 | 1021 | .has-padding-right-50 { 1022 | padding-right: 50px !important; 1023 | } 1024 | 1025 | .has-margin-55 { 1026 | margin: 55px !important; 1027 | } 1028 | 1029 | .has-padding-55 { 1030 | padding: 55px !important; 1031 | } 1032 | 1033 | .has-margin-top-55 { 1034 | margin-top: 55px !important; 1035 | } 1036 | 1037 | .has-padding-top-55 { 1038 | padding-top: 55px !important; 1039 | } 1040 | 1041 | .has-margin-bottom-55 { 1042 | margin-bottom: 55px !important; 1043 | } 1044 | 1045 | .has-padding-bottom-55 { 1046 | padding-bottom: 55px !important; 1047 | } 1048 | 1049 | .has-margin-left-55 { 1050 | margin-left: 55px !important; 1051 | } 1052 | 1053 | .has-padding-left-55 { 1054 | padding-left: 55px !important; 1055 | } 1056 | 1057 | .has-margin-right-55 { 1058 | margin-right: 55px !important; 1059 | } 1060 | 1061 | .has-padding-right-55 { 1062 | padding-right: 55px !important; 1063 | } 1064 | 1065 | .has-margin-60 { 1066 | margin: 60px !important; 1067 | } 1068 | 1069 | .has-padding-60 { 1070 | padding: 60px !important; 1071 | } 1072 | 1073 | .has-margin-top-60 { 1074 | margin-top: 60px !important; 1075 | } 1076 | 1077 | .has-padding-top-60 { 1078 | padding-top: 60px !important; 1079 | } 1080 | 1081 | .has-margin-bottom-60 { 1082 | margin-bottom: 60px !important; 1083 | } 1084 | 1085 | .has-padding-bottom-60 { 1086 | padding-bottom: 60px !important; 1087 | } 1088 | 1089 | .has-margin-left-60 { 1090 | margin-left: 60px !important; 1091 | } 1092 | 1093 | .has-padding-left-60 { 1094 | padding-left: 60px !important; 1095 | } 1096 | 1097 | .has-margin-right-60 { 1098 | margin-right: 60px !important; 1099 | } 1100 | 1101 | .has-padding-right-60 { 1102 | padding-right: 60px !important; 1103 | } 1104 | 1105 | .has-margin-65 { 1106 | margin: 65px !important; 1107 | } 1108 | 1109 | .has-padding-65 { 1110 | padding: 65px !important; 1111 | } 1112 | 1113 | .has-margin-top-65 { 1114 | margin-top: 65px !important; 1115 | } 1116 | 1117 | .has-padding-top-65 { 1118 | padding-top: 65px !important; 1119 | } 1120 | 1121 | .has-margin-bottom-65 { 1122 | margin-bottom: 65px !important; 1123 | } 1124 | 1125 | .has-padding-bottom-65 { 1126 | padding-bottom: 65px !important; 1127 | } 1128 | 1129 | .has-margin-left-65 { 1130 | margin-left: 65px !important; 1131 | } 1132 | 1133 | .has-padding-left-65 { 1134 | padding-left: 65px !important; 1135 | } 1136 | 1137 | .has-margin-right-65 { 1138 | margin-right: 65px !important; 1139 | } 1140 | 1141 | .has-padding-right-65 { 1142 | padding-right: 65px !important; 1143 | } 1144 | 1145 | .has-margin-70 { 1146 | margin: 70px !important; 1147 | } 1148 | 1149 | .has-padding-70 { 1150 | padding: 70px !important; 1151 | } 1152 | 1153 | .has-margin-top-70 { 1154 | margin-top: 70px !important; 1155 | } 1156 | 1157 | .has-padding-top-70 { 1158 | padding-top: 70px !important; 1159 | } 1160 | 1161 | .has-margin-bottom-70 { 1162 | margin-bottom: 70px !important; 1163 | } 1164 | 1165 | .has-padding-bottom-70 { 1166 | padding-bottom: 70px !important; 1167 | } 1168 | 1169 | .has-margin-left-70 { 1170 | margin-left: 70px !important; 1171 | } 1172 | 1173 | .has-padding-left-70 { 1174 | padding-left: 70px !important; 1175 | } 1176 | 1177 | .has-margin-right-70 { 1178 | margin-right: 70px !important; 1179 | } 1180 | 1181 | .has-padding-right-70 { 1182 | padding-right: 70px !important; 1183 | } 1184 | 1185 | .has-margin-75 { 1186 | margin: 75px !important; 1187 | } 1188 | 1189 | .has-padding-75 { 1190 | padding: 75px !important; 1191 | } 1192 | 1193 | .has-margin-top-75 { 1194 | margin-top: 75px !important; 1195 | } 1196 | 1197 | .has-padding-top-75 { 1198 | padding-top: 75px !important; 1199 | } 1200 | 1201 | .has-margin-bottom-75 { 1202 | margin-bottom: 75px !important; 1203 | } 1204 | 1205 | .has-padding-bottom-75 { 1206 | padding-bottom: 75px !important; 1207 | } 1208 | 1209 | .has-margin-left-75 { 1210 | margin-left: 75px !important; 1211 | } 1212 | 1213 | .has-padding-left-75 { 1214 | padding-left: 75px !important; 1215 | } 1216 | 1217 | .has-margin-right-75 { 1218 | margin-right: 75px !important; 1219 | } 1220 | 1221 | .has-padding-right-75 { 1222 | padding-right: 75px !important; 1223 | } 1224 | 1225 | .has-margin-80 { 1226 | margin: 80px !important; 1227 | } 1228 | 1229 | .has-padding-80 { 1230 | padding: 80px !important; 1231 | } 1232 | 1233 | .has-margin-top-80 { 1234 | margin-top: 80px !important; 1235 | } 1236 | 1237 | .has-padding-top-80 { 1238 | padding-top: 80px !important; 1239 | } 1240 | 1241 | .has-margin-bottom-80 { 1242 | margin-bottom: 80px !important; 1243 | } 1244 | 1245 | .has-padding-bottom-80 { 1246 | padding-bottom: 80px !important; 1247 | } 1248 | 1249 | .has-margin-left-80 { 1250 | margin-left: 80px !important; 1251 | } 1252 | 1253 | .has-padding-left-80 { 1254 | padding-left: 80px !important; 1255 | } 1256 | 1257 | .has-margin-right-80 { 1258 | margin-right: 80px !important; 1259 | } 1260 | 1261 | .has-padding-right-80 { 1262 | padding-right: 80px !important; 1263 | } 1264 | 1265 | .has-margin-85 { 1266 | margin: 85px !important; 1267 | } 1268 | 1269 | .has-padding-85 { 1270 | padding: 85px !important; 1271 | } 1272 | 1273 | .has-margin-top-85 { 1274 | margin-top: 85px !important; 1275 | } 1276 | 1277 | .has-padding-top-85 { 1278 | padding-top: 85px !important; 1279 | } 1280 | 1281 | .has-margin-bottom-85 { 1282 | margin-bottom: 85px !important; 1283 | } 1284 | 1285 | .has-padding-bottom-85 { 1286 | padding-bottom: 85px !important; 1287 | } 1288 | 1289 | .has-margin-left-85 { 1290 | margin-left: 85px !important; 1291 | } 1292 | 1293 | .has-padding-left-85 { 1294 | padding-left: 85px !important; 1295 | } 1296 | 1297 | .has-margin-right-85 { 1298 | margin-right: 85px !important; 1299 | } 1300 | 1301 | .has-padding-right-85 { 1302 | padding-right: 85px !important; 1303 | } 1304 | 1305 | .has-margin-90 { 1306 | margin: 90px !important; 1307 | } 1308 | 1309 | .has-padding-90 { 1310 | padding: 90px !important; 1311 | } 1312 | 1313 | .has-margin-top-90 { 1314 | margin-top: 90px !important; 1315 | } 1316 | 1317 | .has-padding-top-90 { 1318 | padding-top: 90px !important; 1319 | } 1320 | 1321 | .has-margin-bottom-90 { 1322 | margin-bottom: 90px !important; 1323 | } 1324 | 1325 | .has-padding-bottom-90 { 1326 | padding-bottom: 90px !important; 1327 | } 1328 | 1329 | .has-margin-left-90 { 1330 | margin-left: 90px !important; 1331 | } 1332 | 1333 | .has-padding-left-90 { 1334 | padding-left: 90px !important; 1335 | } 1336 | 1337 | .has-margin-right-90 { 1338 | margin-right: 90px !important; 1339 | } 1340 | 1341 | .has-padding-right-90 { 1342 | padding-right: 90px !important; 1343 | } 1344 | 1345 | .has-margin-95 { 1346 | margin: 95px !important; 1347 | } 1348 | 1349 | .has-padding-95 { 1350 | padding: 95px !important; 1351 | } 1352 | 1353 | .has-margin-top-95 { 1354 | margin-top: 95px !important; 1355 | } 1356 | 1357 | .has-padding-top-95 { 1358 | padding-top: 95px !important; 1359 | } 1360 | 1361 | .has-margin-bottom-95 { 1362 | margin-bottom: 95px !important; 1363 | } 1364 | 1365 | .has-padding-bottom-95 { 1366 | padding-bottom: 95px !important; 1367 | } 1368 | 1369 | .has-margin-left-95 { 1370 | margin-left: 95px !important; 1371 | } 1372 | 1373 | .has-padding-left-95 { 1374 | padding-left: 95px !important; 1375 | } 1376 | 1377 | .has-margin-right-95 { 1378 | margin-right: 95px !important; 1379 | } 1380 | 1381 | .has-padding-right-95 { 1382 | padding-right: 95px !important; 1383 | } 1384 | 1385 | .has-margin-100 { 1386 | margin: 100px !important; 1387 | } 1388 | 1389 | .has-padding-100 { 1390 | padding: 100px !important; 1391 | } 1392 | 1393 | .has-margin-top-100 { 1394 | margin-top: 100px !important; 1395 | } 1396 | 1397 | .has-padding-top-100 { 1398 | padding-top: 100px !important; 1399 | } 1400 | 1401 | .has-margin-bottom-100 { 1402 | margin-bottom: 100px !important; 1403 | } 1404 | 1405 | .has-padding-bottom-100 { 1406 | padding-bottom: 100px !important; 1407 | } 1408 | 1409 | .has-margin-left-100 { 1410 | margin-left: 100px !important; 1411 | } 1412 | 1413 | .has-padding-left-100 { 1414 | padding-left: 100px !important; 1415 | } 1416 | 1417 | .has-margin-right-100 { 1418 | margin-right: 100px !important; 1419 | } 1420 | 1421 | .has-padding-right-100 { 1422 | padding-right: 100px !important; 1423 | } 1424 | 1425 | .has-margin-105 { 1426 | margin: 105px !important; 1427 | } 1428 | 1429 | .has-padding-105 { 1430 | padding: 105px !important; 1431 | } 1432 | 1433 | .has-margin-top-105 { 1434 | margin-top: 105px !important; 1435 | } 1436 | 1437 | .has-padding-top-105 { 1438 | padding-top: 105px !important; 1439 | } 1440 | 1441 | .has-margin-bottom-105 { 1442 | margin-bottom: 105px !important; 1443 | } 1444 | 1445 | .has-padding-bottom-105 { 1446 | padding-bottom: 105px !important; 1447 | } 1448 | 1449 | .has-margin-left-105 { 1450 | margin-left: 105px !important; 1451 | } 1452 | 1453 | .has-padding-left-105 { 1454 | padding-left: 105px !important; 1455 | } 1456 | 1457 | .has-margin-right-105 { 1458 | margin-right: 105px !important; 1459 | } 1460 | 1461 | .has-padding-right-105 { 1462 | padding-right: 105px !important; 1463 | } 1464 | 1465 | .has-margin-110 { 1466 | margin: 110px !important; 1467 | } 1468 | 1469 | .has-padding-110 { 1470 | padding: 110px !important; 1471 | } 1472 | 1473 | .has-margin-top-110 { 1474 | margin-top: 110px !important; 1475 | } 1476 | 1477 | .has-padding-top-110 { 1478 | padding-top: 110px !important; 1479 | } 1480 | 1481 | .has-margin-bottom-110 { 1482 | margin-bottom: 110px !important; 1483 | } 1484 | 1485 | .has-padding-bottom-110 { 1486 | padding-bottom: 110px !important; 1487 | } 1488 | 1489 | .has-margin-left-110 { 1490 | margin-left: 110px !important; 1491 | } 1492 | 1493 | .has-padding-left-110 { 1494 | padding-left: 110px !important; 1495 | } 1496 | 1497 | .has-margin-right-110 { 1498 | margin-right: 110px !important; 1499 | } 1500 | 1501 | .has-padding-right-110 { 1502 | padding-right: 110px !important; 1503 | } 1504 | 1505 | .has-margin-115 { 1506 | margin: 115px !important; 1507 | } 1508 | 1509 | .has-padding-115 { 1510 | padding: 115px !important; 1511 | } 1512 | 1513 | .has-margin-top-115 { 1514 | margin-top: 115px !important; 1515 | } 1516 | 1517 | .has-padding-top-115 { 1518 | padding-top: 115px !important; 1519 | } 1520 | 1521 | .has-margin-bottom-115 { 1522 | margin-bottom: 115px !important; 1523 | } 1524 | 1525 | .has-padding-bottom-115 { 1526 | padding-bottom: 115px !important; 1527 | } 1528 | 1529 | .has-margin-left-115 { 1530 | margin-left: 115px !important; 1531 | } 1532 | 1533 | .has-padding-left-115 { 1534 | padding-left: 115px !important; 1535 | } 1536 | 1537 | .has-margin-right-115 { 1538 | margin-right: 115px !important; 1539 | } 1540 | 1541 | .has-padding-right-115 { 1542 | padding-right: 115px !important; 1543 | } 1544 | 1545 | .has-margin-120 { 1546 | margin: 120px !important; 1547 | } 1548 | 1549 | .has-padding-120 { 1550 | padding: 120px !important; 1551 | } 1552 | 1553 | .has-margin-top-120 { 1554 | margin-top: 120px !important; 1555 | } 1556 | 1557 | .has-padding-top-120 { 1558 | padding-top: 120px !important; 1559 | } 1560 | 1561 | .has-margin-bottom-120 { 1562 | margin-bottom: 120px !important; 1563 | } 1564 | 1565 | .has-padding-bottom-120 { 1566 | padding-bottom: 120px !important; 1567 | } 1568 | 1569 | .has-margin-left-120 { 1570 | margin-left: 120px !important; 1571 | } 1572 | 1573 | .has-padding-left-120 { 1574 | padding-left: 120px !important; 1575 | } 1576 | 1577 | .has-margin-right-120 { 1578 | margin-right: 120px !important; 1579 | } 1580 | 1581 | .has-padding-right-120 { 1582 | padding-right: 120px !important; 1583 | } 1584 | 1585 | .has-margin-125 { 1586 | margin: 125px !important; 1587 | } 1588 | 1589 | .has-padding-125 { 1590 | padding: 125px !important; 1591 | } 1592 | 1593 | .has-margin-top-125 { 1594 | margin-top: 125px !important; 1595 | } 1596 | 1597 | .has-padding-top-125 { 1598 | padding-top: 125px !important; 1599 | } 1600 | 1601 | .has-margin-bottom-125 { 1602 | margin-bottom: 125px !important; 1603 | } 1604 | 1605 | .has-padding-bottom-125 { 1606 | padding-bottom: 125px !important; 1607 | } 1608 | 1609 | .has-margin-left-125 { 1610 | margin-left: 125px !important; 1611 | } 1612 | 1613 | .has-padding-left-125 { 1614 | padding-left: 125px !important; 1615 | } 1616 | 1617 | .has-margin-right-125 { 1618 | margin-right: 125px !important; 1619 | } 1620 | 1621 | .has-padding-right-125 { 1622 | padding-right: 125px !important; 1623 | } 1624 | 1625 | .has-margin-130 { 1626 | margin: 130px !important; 1627 | } 1628 | 1629 | .has-padding-130 { 1630 | padding: 130px !important; 1631 | } 1632 | 1633 | .has-margin-top-130 { 1634 | margin-top: 130px !important; 1635 | } 1636 | 1637 | .has-padding-top-130 { 1638 | padding-top: 130px !important; 1639 | } 1640 | 1641 | .has-margin-bottom-130 { 1642 | margin-bottom: 130px !important; 1643 | } 1644 | 1645 | .has-padding-bottom-130 { 1646 | padding-bottom: 130px !important; 1647 | } 1648 | 1649 | .has-margin-left-130 { 1650 | margin-left: 130px !important; 1651 | } 1652 | 1653 | .has-padding-left-130 { 1654 | padding-left: 130px !important; 1655 | } 1656 | 1657 | .has-margin-right-130 { 1658 | margin-right: 130px !important; 1659 | } 1660 | 1661 | .has-padding-right-130 { 1662 | padding-right: 130px !important; 1663 | } 1664 | 1665 | .has-margin-135 { 1666 | margin: 135px !important; 1667 | } 1668 | 1669 | .has-padding-135 { 1670 | padding: 135px !important; 1671 | } 1672 | 1673 | .has-margin-top-135 { 1674 | margin-top: 135px !important; 1675 | } 1676 | 1677 | .has-padding-top-135 { 1678 | padding-top: 135px !important; 1679 | } 1680 | 1681 | .has-margin-bottom-135 { 1682 | margin-bottom: 135px !important; 1683 | } 1684 | 1685 | .has-padding-bottom-135 { 1686 | padding-bottom: 135px !important; 1687 | } 1688 | 1689 | .has-margin-left-135 { 1690 | margin-left: 135px !important; 1691 | } 1692 | 1693 | .has-padding-left-135 { 1694 | padding-left: 135px !important; 1695 | } 1696 | 1697 | .has-margin-right-135 { 1698 | margin-right: 135px !important; 1699 | } 1700 | 1701 | .has-padding-right-135 { 1702 | padding-right: 135px !important; 1703 | } 1704 | 1705 | .has-margin-140 { 1706 | margin: 140px !important; 1707 | } 1708 | 1709 | .has-padding-140 { 1710 | padding: 140px !important; 1711 | } 1712 | 1713 | .has-margin-top-140 { 1714 | margin-top: 140px !important; 1715 | } 1716 | 1717 | .has-padding-top-140 { 1718 | padding-top: 140px !important; 1719 | } 1720 | 1721 | .has-margin-bottom-140 { 1722 | margin-bottom: 140px !important; 1723 | } 1724 | 1725 | .has-padding-bottom-140 { 1726 | padding-bottom: 140px !important; 1727 | } 1728 | 1729 | .has-margin-left-140 { 1730 | margin-left: 140px !important; 1731 | } 1732 | 1733 | .has-padding-left-140 { 1734 | padding-left: 140px !important; 1735 | } 1736 | 1737 | .has-margin-right-140 { 1738 | margin-right: 140px !important; 1739 | } 1740 | 1741 | .has-padding-right-140 { 1742 | padding-right: 140px !important; 1743 | } 1744 | 1745 | .has-margin-145 { 1746 | margin: 145px !important; 1747 | } 1748 | 1749 | .has-padding-145 { 1750 | padding: 145px !important; 1751 | } 1752 | 1753 | .has-margin-top-145 { 1754 | margin-top: 145px !important; 1755 | } 1756 | 1757 | .has-padding-top-145 { 1758 | padding-top: 145px !important; 1759 | } 1760 | 1761 | .has-margin-bottom-145 { 1762 | margin-bottom: 145px !important; 1763 | } 1764 | 1765 | .has-padding-bottom-145 { 1766 | padding-bottom: 145px !important; 1767 | } 1768 | 1769 | .has-margin-left-145 { 1770 | margin-left: 145px !important; 1771 | } 1772 | 1773 | .has-padding-left-145 { 1774 | padding-left: 145px !important; 1775 | } 1776 | 1777 | .has-margin-right-145 { 1778 | margin-right: 145px !important; 1779 | } 1780 | 1781 | .has-padding-right-145 { 1782 | padding-right: 145px !important; 1783 | } 1784 | 1785 | .is-top-marginless { 1786 | margin-top: 0 !important; 1787 | } 1788 | 1789 | .is-top-paddingless { 1790 | padding-top: 0 !important; 1791 | } 1792 | 1793 | .is-bottom-marginless { 1794 | margin-bottom: 0 !important; 1795 | } 1796 | 1797 | .is-bottom-paddingless { 1798 | padding-bottom: 0 !important; 1799 | } 1800 | 1801 | .is-left-marginless { 1802 | margin-left: 0 !important; 1803 | } 1804 | 1805 | .is-left-paddingless { 1806 | padding-left: 0 !important; 1807 | } 1808 | 1809 | .is-right-marginless { 1810 | margin-right: 0 !important; 1811 | } 1812 | 1813 | .is-right-paddingless { 1814 | padding-right: 0 !important; 1815 | } 1816 | /*# sourceMappingURL=bulma-helpers.css.map */ -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/favicon.png -------------------------------------------------------------------------------- /src/images/awesome-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/awesome-logo.png -------------------------------------------------------------------------------- /src/images/awesome-stacks-logo-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/awesome-stacks-logo-github.png -------------------------------------------------------------------------------- /src/images/awesome-stacks-logo-sunglasses.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/awesome-stacks-logo.svg: -------------------------------------------------------------------------------- 1 | AS_Logo_Horz -------------------------------------------------------------------------------- /src/images/awesome-stacks-stacked-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/awesome-stacks-stacked-logo.png -------------------------------------------------------------------------------- /src/images/awesome-stacks-vertical-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/awesome-stacks-vertical-logo.png -------------------------------------------------------------------------------- /src/images/developermode-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/developermode-logo.png -------------------------------------------------------------------------------- /src/images/stackshare-logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/stackshare-logo-black.png -------------------------------------------------------------------------------- /src/images/stackshare-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/src/images/stackshare-logo.png -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | import Layout from "../components/layout" 5 | import SEO from "../components/seo" 6 | 7 | const NotFoundPage = () => ( 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |

404 AWESOMENESS NOT FOUND

17 |

There's no Awesome Stack here yet. Create one?

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | ) 27 | 28 | export default NotFoundPage 29 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from 'gatsby' 3 | import Layout from "../components/layout" 4 | import SEO from "../components/seo" 5 | import StackCard from "../components/stacks/stack-card" 6 | import Banner from "../components/banner" 7 | import logomarkImage from "../images/awesome-stacks-logo-sunglasses.svg" 8 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 9 | 10 | const IndexPage = ({ 11 | data: { 12 | site: { siteMetadata: { title, description, contributing, repository } }, 13 | allGithubContributors, 14 | allMarkdownRemark 15 | }, 16 | }) => { 17 | const Stacks = allMarkdownRemark.edges[0].node.fields.stacks.map(stack => 18 |
19 | 20 |
21 | ); 22 | const Contributors = allGithubContributors.edges 23 | .filter(edge => edge.node.login) 24 | .map(({ node: { login, avatar_url, html_url } }) => ( 25 | )) 31 | return ( 32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 | Pink slotted sunglasses 40 |

41 | Stacks on Stacks 42 |

43 |
44 |
45 |

{description}

46 |
47 |
48 | 56 |
57 |
58 |
59 | 60 |
61 | {Stacks} 62 |
63 |
64 |
65 |

——— Contributors ———

66 |
67 |
68 |
69 |
70 |
71 | {Contributors} 72 |
73 |
74 | 77 |
78 |
79 |
80 | ); 81 | } 82 | 83 | export const pageQuery = graphql` 84 | query { 85 | site { 86 | siteMetadata { 87 | title 88 | description 89 | repository 90 | contributing 91 | } 92 | } 93 | allMdx( 94 | sort: { order: DESC, fields: [frontmatter___createdAt] }, 95 | filter: { fields: { sourceName: { eq: "content-stacks" } } } 96 | ) { 97 | edges { 98 | node { 99 | ...MdxFields 100 | } 101 | } 102 | } 103 | allMarkdownRemark( 104 | filter: { fields: { sourceName: { eq: "readme-stacks" } } } 105 | ) { 106 | edges { 107 | node { 108 | ...MarkdownRemarkFields 109 | } 110 | } 111 | } 112 | allGithubContributors { 113 | edges { 114 | node { 115 | login 116 | html_url 117 | avatar_url 118 | } 119 | } 120 | } 121 | } 122 | ` 123 | 124 | export const MarkdownRemarkFields = graphql` 125 | fragment MarkdownRemarkFields on MarkdownRemark { 126 | fields { 127 | stacks { 128 | name 129 | path 130 | description 131 | url 132 | tools { 133 | name 134 | description 135 | url 136 | gitHubUrl 137 | stackShareUrl 138 | stackShareData { 139 | name 140 | imageUrl 141 | } 142 | gitHubData { 143 | name 144 | url 145 | homepageUrl 146 | languages { 147 | edges { 148 | node { 149 | name 150 | color 151 | } 152 | } 153 | } 154 | } 155 | } 156 | } 157 | } 158 | } 159 | `; 160 | 161 | export const mdxQuery = graphql` 162 | fragment MdxFields on Mdx { 163 | id 164 | parent { 165 | ... on File { 166 | name 167 | } 168 | } 169 | frontmatter { 170 | title 171 | description 172 | createdAt(formatString: "MMMM D, YYYY") 173 | updatedAt(formatString: "MMMM D, YYYY") 174 | } 175 | code { 176 | body 177 | } 178 | fields { 179 | contributors { 180 | login 181 | name 182 | avatarUrl 183 | url 184 | } 185 | stackShareTools { 186 | name 187 | description 188 | imageUrl 189 | websiteUrl 190 | profileUrl 191 | githubUrl 192 | group { 193 | name 194 | url 195 | } 196 | category { 197 | name 198 | url 199 | } 200 | stackshareStats { 201 | name 202 | value 203 | } 204 | githubStats { 205 | name 206 | value 207 | } 208 | } 209 | gitHubTools { 210 | name 211 | nameWithOwner 212 | description 213 | descriptionHTML 214 | stargazers { 215 | totalCount 216 | } 217 | repositoryTopics { 218 | edges { 219 | node { 220 | topic { 221 | name 222 | } 223 | url 224 | } 225 | } 226 | } 227 | forks { 228 | totalCount 229 | } 230 | updatedAt 231 | url 232 | homepageUrl 233 | languages { 234 | edges { 235 | node { 236 | name 237 | color 238 | } 239 | } 240 | } 241 | } 242 | } 243 | } 244 | ` 245 | 246 | export default IndexPage 247 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export function truncate(str, limit = 12) { 2 | return str && str.length > limit ? `${str.substring(0, limit).trim()}…` : str 3 | } 4 | 5 | export function shortenLargeNumber(num, digits) { 6 | var units = ['k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'], 7 | decimal; 8 | 9 | for (var i = units.length - 1; i >= 0; i--) { 10 | decimal = Math.pow(1000, i + 1); 11 | 12 | if (num <= -decimal || num >= decimal) { 13 | return +(num / decimal).toFixed(digits) + units[i]; 14 | } 15 | } 16 | 17 | return num; 18 | } -------------------------------------------------------------------------------- /src/utils/github.js: -------------------------------------------------------------------------------- 1 | const { ApolloClient } = require("apollo-boost") 2 | const { HttpLink } = require("apollo-link-http") 3 | const { InMemoryCache } = require("apollo-cache-inmemory") 4 | const fetch = require("node-fetch") 5 | const gql = require("graphql-tag") 6 | 7 | function getApolloClient() { 8 | return new ApolloClient({ 9 | link: new HttpLink({ 10 | uri: "https://api.github.com/graphql", 11 | fetch, 12 | headers: { 13 | Authorization: `bearer ${process.env.GITHUB_ACCESS_TOKEN}`, 14 | }, 15 | }), 16 | cache: new InMemoryCache(), 17 | }) 18 | } 19 | 20 | module.exports = { 21 | getGitHubTool: function ({ owner, name }) { 22 | if (!owner || !name) { 23 | return 24 | } 25 | return getApolloClient() 26 | .query({ 27 | variables: { owner, name }, 28 | query: gql` 29 | query($owner: String!, $name: String!) { 30 | repository(owner: $owner, name: $name) { 31 | name 32 | nameWithOwner 33 | description 34 | descriptionHTML 35 | stargazers { 36 | totalCount 37 | } 38 | repositoryTopics(first: 3) { 39 | edges { 40 | node { 41 | topic { 42 | name 43 | } 44 | url 45 | } 46 | } 47 | } 48 | forks { 49 | totalCount 50 | } 51 | updatedAt 52 | url 53 | homepageUrl 54 | languages(first: 1) { 55 | edges { 56 | node { 57 | name 58 | color 59 | } 60 | } 61 | } 62 | } 63 | } 64 | `, 65 | }) 66 | .then(({ data: { repository } }) => { 67 | return repository 68 | }) 69 | .catch(err => { 70 | console.error(err) 71 | return 72 | }) 73 | }, 74 | 75 | getGitHubUser: function (login) { 76 | return getApolloClient() 77 | .query({ 78 | variables: { login }, 79 | query: gql` 80 | query($login: String!) { 81 | user(login: $login) { 82 | login 83 | name 84 | avatarUrl 85 | url 86 | } 87 | } 88 | `, 89 | }) 90 | .then(({ data: { user } }) => { 91 | return user 92 | }) 93 | .catch(err => { 94 | console.error(err) 95 | return 96 | }) 97 | }, 98 | } 99 | -------------------------------------------------------------------------------- /src/utils/stackshare.js: -------------------------------------------------------------------------------- 1 | const { ApolloClient } = require("apollo-boost") 2 | const { HttpLink } = require("apollo-link-http") 3 | const { InMemoryCache } = require("apollo-cache-inmemory") 4 | const fetch = require("node-fetch") 5 | const gql = require("graphql-tag") 6 | 7 | function getApolloClient() { 8 | return new ApolloClient({ 9 | link: new HttpLink({ 10 | uri: "https://graphql.stackshare.io/", 11 | fetch, 12 | headers: { 13 | Authorization: `Bearer ${process.env.STACKSHARE_ACCESS_TOKEN}`, 14 | }, 15 | }), 16 | cache: new InMemoryCache(), 17 | }) 18 | } 19 | 20 | module.exports = { 21 | getStackShareTool: function ({ name }) { 22 | if (!name) { 23 | return 24 | } 25 | return getApolloClient() 26 | .query({ 27 | variables: { slug: name }, 28 | query: gql` 29 | query($slug: String!) { 30 | tool(slug: $slug) { 31 | name 32 | description 33 | imageUrl 34 | websiteUrl 35 | profileUrl 36 | githubUrl 37 | group { 38 | name 39 | url 40 | } 41 | category { 42 | name 43 | url 44 | } 45 | stackshareStats { 46 | name 47 | value 48 | } 49 | githubStats { 50 | name 51 | value 52 | } 53 | } 54 | } 55 | `, 56 | }) 57 | .then(({ data: { tool } }) => { 58 | return tool 59 | }) 60 | .catch(err => { 61 | console.error(err) 62 | return 63 | }) 64 | }, 65 | } 66 | -------------------------------------------------------------------------------- /static/images/awesome-stacks-twitter-card-large-v3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/static/images/awesome-stacks-twitter-card-large-v3.png -------------------------------------------------------------------------------- /static/images/awesome-stacks-vertical-blue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/static/images/awesome-stacks-vertical-blue-logo.png -------------------------------------------------------------------------------- /static/images/awesometown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackshareio/awesome-stacks/70c81c220f254b9ca37cc5692cb29bafac306768/static/images/awesometown.gif --------------------------------------------------------------------------------