A platform for community discussion. Free, open, simple.
Go to file
Joffrey JAFFEUX 0623ac684a
DEV: FloatKit (#23541)
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension.

---

This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:50:26 +02:00
.devcontainer DEV: Replace postCreateCommand with postStartCommand (#16665) 2022-05-05 23:52:35 +02:00
.github Build(deps): Bump actions/checkout from 3 to 4 (#23500) 2023-09-11 11:42:02 +02:00
.vscode-sample DEV: introduce Ember <template> tag support (.gjs) (#22719) 2023-07-20 21:01:12 +01:00
app DEV: FloatKit (#23541) 2023-09-12 15:50:26 +02:00
bin DEV: Allow explicitly enabling/disabling system tests in bin/turbo_rspec (#23515) 2023-09-11 13:11:06 -05:00
config Update translations (#23538) 2023-09-12 15:27:48 +02:00
db DEV: Switch over category settings to new table - Part 3 (#20657) 2023-09-12 09:51:49 +08:00
docs DEV: FloatKit (#23541) 2023-09-12 15:50:26 +02:00
documentation DEV: Fix random typos (#20937) 2023-04-03 19:27:32 +02:00
images Replace README logo with PNG (#14044) 2021-08-13 14:23:49 -04:00
lib DEV: Add link to PR when generating release notes 2023-09-12 09:26:46 +02:00
log
plugins DEV: FloatKit (#23541) 2023-09-12 15:50:26 +02:00
public Update translations (#23538) 2023-09-12 15:27:48 +02:00
script DEV: introduce Embroider behind a flag, and start testing in CI (#23005) 2023-09-07 13:15:43 +01:00
spec DEV: FloatKit (#23541) 2023-09-12 15:50:26 +02:00
test DEV: Run tests with new chrome headless (#21684) 2023-05-26 11:02:56 +02:00
vendor DEV: FloatKit (#23541) 2023-09-12 15:50:26 +02:00
.editorconfig DEV: Update .editorconfig to match new hbs rules (#19816) 2023-01-10 16:21:16 +01:00
.eslintignore DEV: Chat service object initial implementation (#19814) 2023-02-13 13:09:57 +01:00
.eslintrc DEV: Update linting setup (#23434) 2023-09-06 14:23:06 +02:00
.git-blame-ignore-revs DEV: Add recent formatting commits to .git-blame-ignore-revs (#19799) 2023-01-09 14:51:48 +00:00
.gitattributes DEV: introduce Ember <template> tag support (.gjs) (#22719) 2023-07-20 21:01:12 +01:00
.gitignore DEV: Use esbuild to make DiscourseJsProcessor (#23223) 2023-08-24 16:36:22 +02:00
.jsdoc DEV: Chat service object initial implementation (#19814) 2023-02-13 13:09:57 +01:00
.licensed.yml Build(deps): Bump nio4r from 2.5.8 to 2.5.9 (#20947) 2023-04-04 02:28:29 +02:00
.licensee.json DEV: Update eslint/prettier (#22226) 2023-06-21 20:59:03 +02:00
.npmrc DEV: Prevent npm usage (#13945) 2021-08-04 22:04:58 +02:00
.prettierignore DEV: Chat service object initial implementation (#19814) 2023-02-13 13:09:57 +01:00
.prettierrc DEV: introduce Ember <template> tag support (.gjs) (#22719) 2023-07-20 21:01:12 +01:00
.rspec Add RSpec 4 compatibility (#17652) 2022-07-28 10:27:38 +08:00
.rspec_parallel
.rubocop.yml DEV: Enable unless cops 2023-02-21 10:30:48 +01:00
.ruby-gemset.sample
.ruby-version.sample DEV: Update recommended Ruby to 3.2.1 (#20444) 2023-02-24 12:51:34 -03:00
.streerc DEV: Apply syntax_tree formatting to app/* 2023-01-09 14:14:59 +00:00
.template-lintrc.js DEV: Introduce declarative hide-application-footer helper (#23088) 2023-08-17 12:47:08 +01:00
Brewfile
config.ru
CONTRIBUTING.md
COPYRIGHT.md DEV: Absorb onebox gem into core (#12979) 2021-05-26 15:11:35 +05:30
d
discourse.sublime-project
Gemfile DEV: Add S3 upload system specs using minio (#22975) 2023-08-23 11:18:33 +10:00
Gemfile.lock Build(deps-dev): Bump rubocop from 1.56.2 to 1.56.3 (#23522) 2023-09-12 00:56:28 +02:00
jsconfig.base.json DEV: introduce Ember <template> tag support (.gjs) (#22719) 2023-07-20 21:01:12 +01:00
lefthook.yml DEV: Add syntax_tree check to lefthook (#19877) 2023-01-17 10:16:07 +10:00
LICENSE.txt DEV: Absorb onebox gem into core (#12979) 2021-05-26 15:11:35 +05:30
package.json DEV: Update linting setup (#23434) 2023-09-06 14:23:06 +02:00
Rakefile
README.md FIX: correct link to meta.discourse.org 2023-08-29 13:17:05 +02:00
translator.yml FEATURE: Bundle discourse-checklist plugin into core (#22927) 2023-08-02 10:17:24 +01:00
yarn.lock DEV: FloatKit (#23541) 2023-09-12 15:50:26 +02:00

Discourse is the online home for your community. We offer a 100% open source community platform to those who want complete control over how and where their site is run.

Our platform has been battle-tested for over a decade and continues to evolve to meet users needs for a powerful community platform. Discourse allows you to create discussion topics and connect using real-time chat, as well as access an ever-growing number of official and community themes. In addition, we offer a wide variety of plugins for features ranging from chatbots powered by Discourse AI to functionalities like SQL analysis using the Data Explorer plugin.

To learn more, visit discourse.org and join our support community at meta.discourse.org.

Screenshots

Discourse 3.1

Boing Boing

Mobile

Browse lots more notable Discourse instances.

Development

To get your environment set up, follow the community setup guide for your operating system.

  1. If you're on macOS, try the macOS development guide.
  2. If you're on Ubuntu, try the Ubuntu development guide.
  3. If you're on Windows, try the Windows 10 development guide.
  4. If you're looking to use a simpler Docker-based install, try the Docker development guide.

If you're familiar with how Rails works and are comfortable setting up your own environment, you can also try out the Discourse Advanced Developer Guide, which is aimed primarily at Ubuntu and macOS environments.

Before you get started, ensure you have the following minimum versions: Ruby 3.2+, PostgreSQL 13, Redis 7. If you're having trouble, please see our TROUBLESHOOTING GUIDE first!

Setting up Discourse

If you want to set up a Discourse forum for production use, see our Discourse Install Guide.

If you're looking for official hosting, see discourse.org/pricing.

Requirements

Discourse is built for the next 10 years of the Internet, so our requirements are high.

Discourse supports the latest, stable releases of all major browsers and platforms:

Browsers Tablets Phones
Apple Safari iPadOS iOS
Google Chrome Android Android
Microsoft Edge
Mozilla Firefox

Additionally, we aim to support Safari on iOS 15.7+.

Built With

  • Ruby on Rails — Our back end API is a Rails app. It responds to requests RESTfully in JSON.
  • Ember.js — Our front end is an Ember.js app that communicates with the Rails API.
  • PostgreSQL — Our main data store is in Postgres.
  • Redis — We use Redis as a cache and for transient data.
  • BrowserStack — We use BrowserStack to test on real devices and browsers.

Plus lots of Ruby Gems, a complete list of which is at /main/Gemfile.

Contributing

Build Status

Discourse is 100% free and open source. We encourage and support an active, healthy community that
accepts contributions from the public including you!

Before contributing to Discourse:

  1. Please read the complete mission statements on discourse.org. Yes we actually believe this stuff; you should too.
  2. Read and sign the Electronic Discourse Forums Contribution License Agreement.
  3. Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
  4. Always strive to collaborate with mutual respect.
  5. Not sure what to work on? We've got some ideas.

We look forward to seeing your pull requests!

Security

We take security very seriously at Discourse; all our code is 100% open source and peer reviewed. Please read our security guide for an overview of security measures in Discourse, or if you wish to report a security issue.

The Discourse Team

The original Discourse code contributors can be found in AUTHORS.MD. For a complete list of the many individuals that contributed to the design and implementation of Discourse, please refer to the official Discourse blog and GitHub's list of contributors.

Copyright 2014 - 2023 Civilized Discourse Construction Kit, Inc.

Licensed under the GNU General Public License Version 2.0 (or later);
you may not use this work except in compliance with the License.
You may obtain a copy of the License in the LICENSE file, or at:

https://www.gnu.org/licenses/old-licenses/gpl-2.0.txt

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Discourse logo and “Discourse Forum” ®, Civilized Discourse Construction Kit, Inc.

Accessibility

To guide our ongoing effort to build accessible software we follow the W3Cs Web Content Accessibility Guidelines (WCAG). If you'd like to report an accessibility issue that makes it difficult for you to use Discourse, email accessibility@discourse.org. For more information visit discourse.org/accessibility.

Dedication

Discourse is built with love, Internet style.