Generate a slack landing page project for self-serve slack invites to your slack community room.
generate-slack
Table of Contents
- What is "Generate"?
- Getting started
- Tasks
- Recommended usage
- Files trees
- Next steps
- Landing pages
- About
(TOC generated by verb using markdown-toc)
What is "Generate"?
Generate is a command line tool and developer framework for scaffolding out new GitHub projects using generators and tasks.
Answers to prompts and the user's environment can be used to determine the templates, directories, files and contents to build. Support for gulp, base and assemble plugins, and much more.
For more information:
- Visit the generate project
- Visit the generate documentation
- Find generators on npm (help us author generators)
Getting started
Install
Installing the CLI
To run the slack generator from the command line, you'll need to install Generate globally first. You can do that now with the following command:
$ npm install --global generateThis adds the gen command to your system path, allowing it to be run from any directory.
Install generate-slack
Install this module with the following command:
$ npm install --global generate-slackUsage
Run this generator's default task with the following command:
$ gen slackWhat you should see in the terminal
If completed successfully, you should see both starting and finished events in the terminal, like the following:
[00:44:21] starting ......[00:44:22] finished ✔If you do not see one or both of those events, please let us know about it.
Help
To see a general help menu and available commands for Generate's CLI, run:
$ gen helpTasks
All available tasks.
slack:slack
Generate a index.js file to the current working directory. Learn how to [customize behavior(#customization) or override built-in templates.
Example
$ gen slack:slackslack
Alias for running the slack task with the following command:
Example
$ gen slackVisit Generate's documentation for tasks.
Recommended usage
This generator works best in combination with generate-project, generate-git, and generate-install. generate-install is included so all of it's tasks are included.
The following command is recommended to generate a new project, initialize git, generate the files found in this generator, and install the npm dependencies and devDependencies required for the files from this generator:
$ gen project git slack slack:installThis command will take you through answering questions about the project you'd like to setup, then specific questions for [generate-slack][], then install the required npm dependencies.
Files trees
The following files trees are automatically generated by a task in verbfile.js.
- generated files: trees representing the actual generated "dest" files for each task
- source files: trees representing the source files and templates used by each task
(See Generate's customization docs to learn how to override individual templates.)
Generated files
Files generated by each task (e.g. dest files). See the Generate customization docs to learn how to override individual templates.
Note that diffs are base on comparisons against the files generated by the default task. Additionally, some tasks generate the same files, but with different contents (for example, the contents of index.js differs based on the task).
default
Files generated by the default task:
. ├── assemblefile.js ├─┬ lib │ ├── utils.js │ └─┬ helpers │ └── json.js └─┬ src ├─┬ data │ ├── questions.json │ └── site.json ├─┬ js │ └── site.js ├─┬ less │ ├── mixins.less │ ├── site.less │ └── variables.less └─┬ templates ├─┬ layouts │ └── default.hbs ├─┬ pages │ └── index.hbs └─┬ partials ├── footer.hbs ├── header.hbs ├── invite-form.hbs ├── online-users.hbs ├── related-project.hbs └── related.hbsSource files
The following trees represent the source files or templates that are used by each task. You'll see that most of the tasks use at least one "micro-generator" to generate a specific file.
default
Source files and/or libraries used by the default task:
. └─┬ templates ├── assemblefile.js ├─┬ lib │ ├── utils.js │ └─┬ helpers │ └── json.js └─┬ src ├─┬ data │ ├── questions.json │ └── site.json ├─┬ js │ └── site.js ├─┬ less │ ├── mixins.less │ ├── site.less │ └── variables.less └─┬ templates ├─┬ layouts │ └── default.hbs ├─┬ pages │ └── index.hbs └─┬ partials ├── footer.hbs ├── header.hbs ├── invite-form.hbs ├── online-users.hbs ├── related-project.hbs └── related.hbsNext steps
The assemblefile.js
The generated project contains an assemblefile.js with pre-defined tasks that can be used for creating webtask.io services, compiling less to css, building html pages, and deploying to github.
To run the tasks in the assemblefile.js install assemble globally with the following command (if it's not already installed):
$ npm install assemble --globalThe following sections will go into details about the provided tasks.
Creating webtask.io services
There are 2 webtask.io services that need to be configured and deployed before thie invite form will work. See webtask.io for details on creating an account and install the webtask command line tool.
After the webtask.io command line tool is installed and you're logged in, run the following command to configure and deploy the webtask services:
$ assemble webtasksThis will run the 2 individual tasks (webtask-invite and webtask-users). Both tasks will prompt you for information needed to deploy the webtasks:
- What would you like to name the webtask? (provide a unique name)
- What's the slack team name you'd like to use?
- What's the slack authentication token you'd like to use?
The slack team name and slack authentication token will need to be created through slack before deploying the webtask services.
When the services are deployed, a url is provided for the service. These urls will be automatically added to the src/data/site.json file under the site.services property. This json file is used in the assemble build later when creating the html page for the invite form.
The next section provides more information on the parts for the assemble project and how the invite form is built.
Modifying the project
The generated project is an assemble project that contains an assemblefile.js with tasks for creating html files, the src files used for creating the html files, and a lib folder with utils and helpers used during the assemble build.
A default theme is provided based on this startbootstrap.com theme and contains logos from other toolkit projects like assemble, base, generate, update, and verb.
The easiest way to change the colors in the theme is to update the values in src/less/variables.less. The main logo shown above the invite form can be swapped out by changing src/img/logo.png. The related projects section can be changed by updating the related property in the src/data/site.json file.
Main html structure is found in src/templates/layouts/default.hbs. The invite form page is created with partials used in src/templates/pages/index.hbs.
Custom javascript logic that makes the invite form work is found in src/js/site.js. This is basic jquery using ajax and posting data to invite webtask service created in the section above.
To build the index.html page, run the following command:
$ assembleThis run the default task which runs clean, copy, less, and build. The site files will be built into the _gh_pages folder.
For development you can run a server and get live reloads and file watching by running the following command:
$ assemble devWhen you're finished customizing your invite form, see the following section for deployment information.
Deploying to Github pages
Once the site is ready, the webtask services have been deploy, and your slack team is ready to start inviting users, use the following command to deploy your site to the gh-pages branch of your repository:
$ assemble deployThis uses the gulp-gh-pages plugin to deploy to your gh-pages branch of your repository. This requires that you've already connected a remote github repository to your folder.
The push task uses the gulp-gh-pages plugin and may be customized by passing options to the utils.ghPages() method. See gulp-gh-pages for more options.
Landing pages
The following landing pages have been created with [generate-slack][].
If you've created a landing page with [generate-slack][] add it here and submit a pull request.
About
Related projects
- assemble: Get the rocks out of your socks! Assemble makes you fast at creating web projects… more | homepage
- generate-git: Generator for initializing a git repository and adding first commit. | homepage
- generate-install: Generator that automatically detects the dependencies or devDependencies to install based on the templates or… more | homepage
- generate-project: Scaffold out complete code projects from the command line, or use this generator as a… more | homepage
- generate: Command line tool and developer framework for scaffolding out new GitHub projects. Generate offers the… more | homepage
- slack-invite-webtask: Webtask.io service to invite users to a slack team. | homepage
- slack-users-webtask: Webtask.io service for a slack badge showing the current and total users of a slack… more | homepage
- slack-users: Get the users of a slack community. | homepage
Community
Are you using Generate in your project? Have you published a generator and want to share your project with the world?
Here are some suggestions!
- If you get like Generate and want to tweet about it, please feel free to mention
@generatejsor use the#generatejshashtag - Show your love by starring Generate and
generate-slack - Get implementation help on StackOverflow (please use the
generatejstag in questions) - Gitter Discuss Generate with us on Gitter
- If you publish an generator, thank you! To make your project as discoverable as possible, please add the keyword
generategeneratorto package.json.
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Please read the contributing guide for avice on opening issues, pull requests, and coding standards.
Running tests
Install dev dependencies:
$ npm install -d && npm testAuthor
Brian Woodward
License
Copyright © 2016, Brian Woodward. Released under the MIT license.
This file was generated by verb-generate-readme, v0.1.30, on August 31, 2016.