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
  • Install
  • Usage
  • Help
• Tasks
  • slack:slack
  • slack
• Recommended usage
• Files trees
  • Generated files
  • Source files
• Next steps
  • The assemblefile.js
  • Creating webtask.io services
  • Modifying the project
  • Deploying to Github pages
• Landing pages
• About
  • Related projects
  • Community
  • Contributing
  • Running tests
  • Author
  • License

(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 generate

This 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-slack

Usage

Run this generator's default task with the following command:

$ gen slack

What 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 help

Tasks

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:slack

slack

Alias for running the slack task with the following command:

Example

$ gen slack

Visit 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:install

This 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.hbs

Source 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.hbs

Next 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 --global

The 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 webtasks

This 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:

$ assemble

This 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 dev

When 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 deploy

This 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.

• assemble
• base
• generate
• update
• verb

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 @generatejs or use the #generatejs hashtag
• Show your love by starring Generate and generate-slack
• Get implementation help on StackOverflow (please use the generatejs tag 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 generategenerator to 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 test

Author

Brian Woodward

• github/doowb
• twitter/doowb

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.