Jamstack Cfp
Run your call for papers using JAMStack + GitHub Actions
Overview:
JAMStack CFP is a call for papers application that showcases how to add user-generated content to a JAMStack static site using GitHub Actions. It is built with Gridsome, but the same approach can be used with other static site generators like Gatsby. This application allows users to submit their papers through a form, triggers a GitHub workflow to generate a pull request with the submitted content, and generates a static site with the accepted submissions once the pull request is merged.
Features:
- Serverless Function: A serverless function triggers a GitHub workflow that generates a pull request when a user submits a form.
- Static Site Generation: Gridsome generates the site statically, listing all the accepted submissions once the pull request is merged.
- GitHub GraphQL API Integration: The application connects to GitHub's GraphQL API to generate the list of pending submissions from open pull requests.
Summary:
JAMStack CFP is an example call for papers application that demonstrates how to add user-generated content to a JAMStack static site using GitHub Actions. It triggers a GitHub workflow to generate a pull request with the submitted content and generates a statically generated site with the accepted submissions. While it does not include authentication, it can be easily connected to a GitHub OAuth app for authentication purposes. The application can be used as a proof of concept, MVP, or for small apps where immediate feedback is not required. It can be forked and adapted to other projects, and deployment options include Netlify and GitHub pages.
- Gridsome
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.