wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-11 11:27:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-584] Add Version 5 Documentation (#2523)

Browse Source 
* feat: initial version

* fix: adjusted height

* fix: tweaked sidebar styles again

* fix: adjusted overflow property

* fix: reverted overflow, cleaned sidebar
This commit is contained in:
Wyatt Johnson
2019-09-05 20:53:03 +00:00
committed by GitHub
parent a4c4032b0d
commit aa6058e9d1
13 changed files with 699 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_config.yml
+119 -105
View File
@@ -47,7 +47,7 @@ highlight:
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
path: ""
# Category & Tag
default_category: uncategorized
@@ -78,112 +78,126 @@ sidebar:
- title: Docker
url: https://hub.docker.com/r/coralproject/talk/
side:
- title: Installation
- title: Version 5
children:
- title: Talk Quickstart
url: /
- title: Installation from Docker
url: /installation-from-docker/
- title: Installation from Source
url: /installation-from-source/
- title: Planning your Talk Architecture
url: /planning-architecture/
- title: Pre-Launch Checklist
url: /pre-launch-checklist/
- title: Configuration
- title: Getting Started
children:
- title: Installing
url: /
- title: Configuration
url: /v5/configuration/
- title: Integration
url: /v5/integrating/
- title: Developing
url: /v5/developing/
- title: Version 4
children:
- title: Required Configuration
url: /configuration/
- title: Advanced Configuration
url: /advanced-configuration/
- title: Configuration with CLI tools
url: /configuration-cli-tools/
- title: Integrating
children:
- title: Authentication
url: /integrating/authentication/
- title: CMS Integration
url: /integrating/cms-integration/
- title: Asset Scraping
url: /integrating/asset-scraping/
- title: Configuring the Comment Stream
url: /integrating/configuring-comment-stream/
- title: Configuring the Admin
url: /integrating/configuring-admin/
- title: Notifications
url: /integrating/notifications/
- title: Event Tracking and Metrics
url: /integrating/event-tracking-metrics/
- title: Styling and CSS
url: /integrating/styling-css/
- title: Translations and i18n
url: /integrating/translations-i18n/
- title: GDPR Compliance
url: /integrating/gdpr/
- title: Accelerated Mobile Page
url: /integrating/amp/
- title: Product Guide
children:
- title: How Talk Works
url: /how-talk-works/
- title: Commenter Features
url: /commenter-features/
- title: Moderator Features
url: /moderator-features/
- title: User Roles in Talk
url: /roles/
- title: Trust
url: /trust/
- title: Toxic Comments
url: /toxic-comments/
- title: Configuring Talk
url: /configuring-talk/
- title: Plugins
children:
- title: Plugins Overview
url: /plugins/
- title: Plugin Directory
url: /plugins-directory/
- title: Plugin Recipes
url: /plugin-recipes/
- title: API
children:
- title: GraphQL Overview
url: /api/overview/
- title: GraphQL Reference
url: /api/graphql/
- title: Server Plugin API
url: /api/server/
- title: Client Plugin API
url: /api/client/
- title: Plugin Slots API
url: /api/slots/
- title: Tutorials
children:
- title: Creating a Basic Plugin
url: /building-basic-plugin/
- title: Customizing Plugins with Coral UI
url: /customizing-plugins-coral-ui/
- title: When You've Installed Talk
url: /when-youve-installed-talk/
- title: Embedding Talk in Native Mobile Apps
url: /embedding-in-native-mobile-apps/
- title: Migrating
children:
- title: Migrating from v3.x.x
url: /migration/3/
- title: Migrating to v4.0.0
url: /migration/4/
- title: Migrating to v4.1.0
url: /migration/4.1/
- title: FAQ & Troubleshooting
children:
- title: FAQ
url: /faq/
- title: Troubleshooting Tips
url: /troubleshooting-tips/
- title: Contact
url: /contact/
- title: Installation
children:
- title: Talk Quickstart
url: /installation-quickstart
- title: Installation from Docker
url: /installation-from-docker/
- title: Installation from Source
url: /installation-from-source/
- title: Planning your Talk Architecture
url: /planning-architecture/
- title: Pre-Launch Checklist
url: /pre-launch-checklist/
- title: Configuration
children:
- title: Required Configuration
url: /configuration/
- title: Advanced Configuration
url: /advanced-configuration/
- title: Configuration with CLI tools
url: /configuration-cli-tools/
- title: Integrating
children:
- title: Authentication
url: /integrating/authentication/
- title: CMS Integration
url: /integrating/cms-integration/
- title: Asset Scraping
url: /integrating/asset-scraping/
- title: Configuring the Comment Stream
url: /integrating/configuring-comment-stream/
- title: Configuring the Admin
url: /integrating/configuring-admin/
- title: Notifications
url: /integrating/notifications/
- title: Event Tracking and Metrics
url: /integrating/event-tracking-metrics/
- title: Styling and CSS
url: /integrating/styling-css/
- title: Translations and i18n
url: /integrating/translations-i18n/
- title: GDPR Compliance
url: /integrating/gdpr/
- title: Accelerated Mobile Page
url: /integrating/amp/
- title: Product Guide
children:
- title: How Talk Works
url: /how-talk-works/
- title: Commenter Features
url: /commenter-features/
- title: Moderator Features
url: /moderator-features/
- title: User Roles in Talk
url: /roles/
- title: Trust
url: /trust/
- title: Toxic Comments
url: /toxic-comments/
- title: Configuring Talk
url: /configuring-talk/
- title: Plugins
children:
- title: Plugins Overview
url: /plugins/
- title: Plugin Directory
url: /plugins-directory/
- title: Plugin Recipes
url: /plugin-recipes/
- title: API
children:
- title: GraphQL Overview
url: /api/overview/
- title: GraphQL Reference
url: /api/graphql/
- title: Server Plugin API
url: /api/server/
- title: Client Plugin API
url: /api/client/
- title: Plugin Slots API
url: /api/slots/
- title: Tutorials
children:
- title: Creating a Basic Plugin
url: /building-basic-plugin/
- title: Customizing Plugins with Coral UI
url: /customizing-plugins-coral-ui/
- title: When You've Installed Talk
url: /when-youve-installed-talk/
- title: Embedding Talk in Native Mobile Apps
url: /embedding-in-native-mobile-apps/
- title: Migrating
children:
- title: Migrating from v3.x.x
url: /migration/3/
- title: Migrating to v4.0.0
url: /migration/4/
- title: Migrating to v4.1.0
url: /migration/4.1/
- title: FAQ & Troubleshooting
children:
- title: FAQ
url: /faq/
- title: Troubleshooting Tips
url: /troubleshooting-tips/
- title: Contact
url: /contact/
marked:
gfm: true
docs/package.json
+1 -1
View File
@@ -3,7 +3,7 @@
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.8.0"
"version": "3.7.1"
},
"scripts": {
"start": "hexo serve",
docs/public/_redirects
-4
View File
@@ -1,4 +0,0 @@
/ /talk/
/talk/reference/server/ /talk/api/server/
/talk/reference/graphql/ /talk/api/graphql/
/talk/integrating/asset-management/ /talk/integrating/cms-integration/
docs/source/01-01-talk-quickstart.md
+18 -23
View File
@@ -1,13 +1,13 @@
---
title: Talk Quickstart
permalink: /
permalink: /installation-quickstart/
---
Online comments are broken. Our open-source Talk tool rethinks how moderation,
comment display, and conversation function, creating the opportunity for safer,
smarter discussions around your work.
smarter discussions around your work.
More than 60 newsrooms use Talk to run their on-site communities, including the Washington Post, the Wall Street Journal, and IGN.
More than 60 newsrooms use Talk to run their on-site communities, including the Washington Post, the Wall Street Journal, and IGN.
[Read more about our product features and
goals here](https://coralproject.net/talk).
@@ -31,7 +31,7 @@ to persist data. The following versions are supported:
- MongoDB 3.2+
- Redis 3.2.5+
You can run Talk (and its dependencies) locally or from [Docker](https://www.docker.com/community-edition#/download) containers. Docker is used in the local example below for the database and cache, however it is possible to run Talk without Docker by configuring your own MongoDB and Redis instances. We have tested Talk
You can run Talk (and its dependencies) locally or from [Docker](https://www.docker.com/community-edition#/download) containers. Docker is used in the local example below for the database and cache, however it is possible to run Talk without Docker by configuring your own MongoDB and Redis instances. We have tested Talk
and this documentation with Docker versions 17.06.2+.
An optional dependency for Talk is
@@ -44,7 +44,7 @@ and this documentation with versions 1.14.0+.
### Installation from Docker
To use Talk without major customization you can run the application using our
provided docker image.
provided docker image.
Start by making a new directory and create a file called `docker-compose.yml` and copy the following:
@@ -52,7 +52,7 @@ Start by making a new directory and create a file called `docker-compose.yml` an
# For details on the syntax of docker-compose.yml files, check out:
# https://docs.docker.com/compose/compose-file/compose-file-v2/
version: '2'
version: "2"
services:
talk:
image: coralproject/talk:4
@@ -89,7 +89,6 @@ volumes:
The environment variables listed above are the bare minimum needed to run the demo, for more configuration
variables, check out the [Configuration](/talk/configuration/) section.
And you can then start it with:
```bash
@@ -121,7 +120,6 @@ redis_1 docker-entrypoint.sh redis ... Up 6379/tcp
talk_1 yarn start Up 0.0.0.0:3000->3000/tcp
```
You now have a Talk instance up and running! Continue on to the [Setup](#setup) section for details on how to complete the
initial setup and get started using Talk.
@@ -157,7 +155,6 @@ Didn't work? Sometimes you may already have a container running on these ports,
run `docker ps` to see what other containers you have running and running
`docker stop <id>` on those containers to stop them.
_This documentation assumes that you will be running MongoDB on
`127.0.0.1:27017` and Redis on `127.0.0.1:6379`. The above Docker commands bind
MongoDB and Redis on these interfaces for you._
@@ -188,27 +185,26 @@ Continue onto the [Setup](#setup) section for details on how to complete the
installation and get started using Talk.
## Setup
### Create Admin Account
With Talk running, you can now navigate to
[http://127.0.0.1:3000/admin/install](http://127.0.0.1:3000/admin/install)
and walk through the initial setup steps.
and walk through the initial setup steps.
* First, enter your **Organization Name** and **Organization Contact Email**. This will appear in emails when inviting new team members.
* Next, create your Admin user. You can specify an **Email Address**, **Username**, and **Password**
* Finally, enter your list of **Permitted Domains**, read [here](/talk/configuring-talk/#permitted-domains) about whitelisting domains
- First, enter your **Organization Name** and **Organization Contact Email**. This will appear in emails when inviting new team members.
- Next, create your Admin user. You can specify an **Email Address**, **Username**, and **Password**
- Finally, enter your list of **Permitted Domains**, read [here](/talk/configuring-talk/#permitted-domains) about whitelisting domains
_During development, ensure you whitelist 127.0.0.1:3000 otherwise the
[http://127.0.0.1:3000/](http://127.0.0.1:3000/) page will not
load._
Once the setup wizard has been completed you can log into Talk ([http://127.0.0.1:3000/](http://127.0.0.1:3000/)) using the email address and password for the Admin user account that you just created.
From here you can test out features in Talk, see comments in the admin interface where you can do moderation, and configure the user experience.
In the next step you'll create some user comments to moderate.
Once the setup wizard has been completed you can log into Talk ([http://127.0.0.1:3000/](http://127.0.0.1:3000/)) using the email address and password for the Admin user account that you just created.
From here you can test out features in Talk, see comments in the admin interface where you can do moderation, and configure the user experience.
In the next step you'll create some user comments to moderate.
### Demo Embedded Comments
@@ -221,7 +217,7 @@ In order for the demo to work, you must add
`https://docs.coralproject.net/` to your
permitted domains list. You can do this by visiting
[http://127.0.0.1:3000/admin/configure](http://127.0.0.1:3000/admin/configure)
now and selecting *Tech Settings* from the sidebar.
now and selecting _Tech Settings_ from the sidebar.
Once you have added the domain of these docs, you can click the button below.
@@ -235,13 +231,12 @@ Once you have added the domain of these docs, you can click the button below.
With your local instance of Talk running in development mode (env variable `NODE_ENV=development`) you should now also be able to access the following developer routes:
* [http://127.0.0.1:3000/dev](http://127.0.0.1:3000/dev]) provides a sample comment stream
- [http://127.0.0.1:3000/dev](http://127.0.0.1:3000/dev]) provides a sample comment stream
* [http://127.0.0.1:3000/dev/assets](http://127.0.0.1:3000/dev/assets]) provides a list of all stories in Talk and can generate new sample assets
- [http://127.0.0.1:3000/dev/assets](http://127.0.0.1:3000/dev/assets]) provides a list of all stories in Talk and can generate new sample assets
### Conclusion
At this point you've successfully installed, configured, and ran your very own
instance of Talk! Continue through this documentation on this site to learn more
on how to configure, develop with, and contribute to Talk!
docs/source/version-5-configuration.md
+60
View File
@@ -0,0 +1,60 @@
---
title: Configuring Version 5
permalink: /v5/configuration/
---
The following environment variables can be set to configure the Coral Server. You
can expose them in your shell via `export NODE_ENV=development` or by placing
the variables in a `.env` file in the root of the project in a simple
`NODE_ENV=development` format delimited by newlines.
- `NODE_ENV` - Can be one of `production` or `development`. All production
deployments should use `production`. Defaults to `production` when ran with
`npm run start` and `development` when run with `npm run start:development`.
- `PORT` - The port to listen for HTTP and Websocket requests. (Default `3000`)
- `MONGODB_URI` - The MongoDB database URI to connect to.
(Default `mongodb://127.0.0.1:27017/coral`)
- `REDIS_URI` - The Redis database URI to connect to.
(Default `redis://127.0.0.1:6379`)
- `REDIS_OPTIONS` - A JSON string with optional configuration options to be used
when connecting to Redis as specified in the [ioredis](https://github.com/luin/ioredis/blob/1dac50a63753c2afc969315cfe38faf0edc50bc5/API.md#new_Redis_new) documentation.
(Default: `{}`)
- `SIGNING_SECRET` - The shared secret to use to sign JSON Web Tokens (JWT) with
the selected signing algorithm. 🚨 **Don't forget to set this variable!** 🚨
(Default: `keyboard cat`)
- `SIGNING_ALGORITHM` - The signing algorithm to use for signing JWT's.
(Default `HS256`).
- `LOGGING_LEVEL` - The logging level that can be set to one of `fatal`,
`error`, `warn`, `info`, `debug`, or `trace`. (Default `info`)
- `STATIC_URI` - The URI that static assets can be accessed from. This URI can
be to a proxy that uses this Coral server on `PORT` as the upstream. Disabled
by default.
- `DISABLE_TENANT_CACHING` - When `true`, all tenants will be loaded from the
database when needed rather than keeping a in-memory copy in sync via
published events on Redis. (Default `false`)
- `DISABLE_MONGODB_AUTOINDEXING` - When `true`, Coral will not perform indexing
operations when it starts up. This can be desired when you've already
installed Coral on the target MongoDB, but want to improve start performance.
**You should not use this parameter unless you know what you're doing! Upgrades
may introduce additional indexes that the application relies on.**
(Default `false`)
- `LOCALE` - Specify the default locale to use for all requests without a locale
specified. (Default `en-US`)
- `ENABLE_GRAPHIQL` - When `true`, it will enable the `/graphiql` even in
production, use with care. (Default `false`)
- `CONCURRENCY` - The number of worker nodes to spawn to handle web traffic,
this should be tied to the number of CPU's available. (Default
`os.cpus().length`)
- `DEV_PORT` - The port where the Webpack Development server is running on.
(Default `8080`)
- `METRICS_USERNAME` - The username for _Basic Authentication_ at the `/metrics` and `/cluster_metrics`
endpoint.
- `METRICS_PASSWORD` - The password for _Basic Authentication_ at the `/metrics` and `/cluster_metrics`
endpoint.
- `CLUSTER_METRICS_PORT` - If `CONCURRENCY` is more than `1`, the metrics are provided at this port under `/cluster_metrics`. (Default `3001`)
- `DISABLE_LIVE_UPDATES` - When `true`, disables subscriptions for the comment
stream for all stories across all tenants (Default `false`)
- `WEBSOCKET_KEEP_ALIVE_TIMEOUT` - A duration in a parsable format (e.g. `30 seconds`
, `1 minute`) that should be used to send keep alive messages through the
websocket to keep the socket alive (Default `30 seconds`)
- `TRUST_PROXY` - When provided, it configures the "trust proxy" settings for Express (See https://expressjs.com/en/guide/behind-proxies.html)
docs/source/version-5-development.md
+103
View File
@@ -0,0 +1,103 @@
---
title: Developing
permalink: /v5/developing/
---
Running Coral for development is very similar to installing Coral via Source as
described above.
Coral requires NodeJS >=10, we recommend using `nvm` to help manage node
versions: https://github.com/creationix/nvm.
```bash
# Clone and cd into the Coral directory.
git clone https://github.com/coralproject/talk.git
cd talk
# Install dependencies.
npm install
```
Running Coral with default settings assumes that you have:
- MongoDB >=3.6 running on `127.0.0.1:27017`
- Redis >=3.2 running on `127.0.0.1:6379`
If you don't already have these databases running, you can execute the following
assuming you have Docker installed on your local machine:
```bash
docker run -d -p 27017:27017 --restart always --name mongo mongo:3.6
docker run -d -p 6379:6379 --restart always --name redis redis:3.2
```
We recommend installing [watchman](https://facebook.github.io/watchman/docs/install.html) for better watch
performance.
```bash
# On macOS, you can run the following with Homebrew.
brew update
brew install watchman
```
Then start Coral with:
```bash
# Run the server in development mode in order to facilitate auto-restarting and
# rebuilding when file changes are detected. This might take a while to fully run.
npm run watch
```
When the client code has been built, navigate to http://localhost:8080/install
to start the installation wizard. **Note: Ensure `localhost:8080` is used in the permitted domains list.**
To see the comment stream goto http://localhost:8080/.
To run linting and tests use the following commands:
```bash
# Run the linters.
npm run lint
# Run our unit and integration tests.
npm run test
```
## Email
To test out the email sending functionality, you can run [inbucket](https://www.inbucket.org/)
which provides a test SMTP server that can visualize emails in the browser:
```bash
docker run -d --name inbucket --restart always -p 2500:2500 -p 9000:9000 inbucket/inbucket
```
You can then configure the email server on Coral
by setting the email settings in
`Configure -> Email` in the admin:
| Field | Value |
| -------------- | -------------------- |
| From Address | `community@test.com` |
| Secure | `No` |
| Host | `localhost` |
| Port | `2500` |
| Authentication | `No` |
Navigate to http://localhost:9000, click the "Monitor" tab. New emails received
on this screen.
## Design Language System (UI Components)
We use [docz](https://docz.site) to document and develop our Design Language System. To start docz run:
```bash
# Make sure CSS types are generated.
# This is not required when `npm run watch` is already running.
npm run generate:css-types
# Run docz in development.
npm run docz -- dev
```
After compilation has finished you can access docz at http://localhost:3030/.
docs/source/version-5-installation.md
+118
View File
@@ -0,0 +1,118 @@
---
title: Installing Version 5
permalink: /
---
Online comments are broken. Our open-source commenting platform, Coral, rethinks
how moderation, comment display, and conversation function, creating the
opportunity for safer, smarter discussions around your work.
[Read more about Coral here](https://coralproject.net/talk).
Built with ❤️ by The Coral Project, a part of [Vox Media](https://product.voxmedia.com/).
Preview Coral easily by running Coral via a Heroku App:
[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk/tree/next)
## Requirements
- MongoDB >=3.6
- Redis >=3.2
- NodeJS >=10
- NPM >=6.7
## Running
You can install Coral using Docker or via Source. We recommend Docker, as it
provides the easiest deployment solution going forward, as all the dependencies
are baked and shipped with the provided
[coralproject/talk:next](https://hub.docker.com/r/coralproject/talk) image.
When v5 releases to master, you'll be able to select it using
`coralproject/talk:5`.
### Docker
The easiest way to get started with Coral is through our published Docker image
and provided example `docker-compose.yml` file. The following assumes that you
have Docker and Docker Compose installed on your local machine:
- Install Docker: https://docs.docker.com/install/
- Install Docker Compose: https://docs.docker.com/compose/install/ (this is typically included in the Docker Desktop editions already)
```bash
# Create directories to persist the data in MongoDB and Redis.
mkdir -p data/{mongo,redis}
# Create the `docker-compose.yml` file to get started.
cat > docker-compose.yml <<EOF
version: "2"
services:
talk:
image: coralproject/talk:next
restart: always
ports:
- "127.0.0.1:3000:5000"
depends_on:
- mongo
- redis
environment:
- MONGODB_URI=mongodb://mongo:27017/coral
- REDIS_URI=redis://redis:6379
- SIGNING_SECRET=<replace me with something secret>
mongo:
image: mongo:3.6
volumes:
- ./data/mongo:/data/db
redis:
image: redis:3.2
volumes:
- ./data/redis:/data
EOF
# Start up Coral using Docker.
docker-compose up -d
```
Then head on over to http://localhost:3000 to install Coral!
### Source
Coral requires NodeJS >=10, we recommend using `nvm` to help manage node
versions: https://github.com/creationix/nvm.
```bash
# Clone and cd into the Coral directory.
git clone https://github.com/coralproject/talk.git
cd talk
# Install dependencies.
npm install
# Build the application dependencies.
# This might take a while.
npm run build
```
This should output all the compiled application code to `./dist`.
Running Coral with default settings assumes that you have:
- MongoDB >=3.6 running on `127.0.0.1:27017`
- Redis >=3.2 running on `127.0.0.1:6379`
If you don't already have these databases running, you can execute the following
assuming you have Docker installed on your local machine:
```bash
docker run -d -p 27017:27017 --restart always --name mongo mongo:3.6
docker run -d -p 6379:6379 --restart always --name redis redis:3.2
```
Then start Coral with:
```bash
# Start the server in production mode.
npm run start
```
Then head on over to http://localhost:3000 to install Coral!
docs/source/version-5-integrating.md
+134
View File
@@ -0,0 +1,134 @@
---
title: Integrating on your site
permalink: /v5/integrating/
---
## Embed On Your Site
With Coral setup and running locally you can test embeding the comment stream with this sample embed script:
```
<div id="coral_thread"></div>
<script type="text/javascript">
(function() {
var talk = document.createElement('script'); talk.type = 'text/javascript'; talk.async = true;
var url = '{{ CORAL_DOMAIN_NAME }}';
talk.src = '//' + url + '/assets/js/embed.js';
talk.onload = function() {
Coral.createStreamEmbed({
id: "coral_thread",
autoRender: true,
rootURL: '//' + url,
});
};
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(talk);
})();
</script>
```
> **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral.
## Single Sign On
In order to allow seamless connection to an existing authentication system,
Coral utilizes the industry standard [JWT Token](https://jwt.io/) to connect. To
learn more about how to create a JWT token, see [this introduction](https://jwt.io/introduction/).
1. Visit: `https://{{ CORAL_DOMAIN_NAME }}/admin/configure/auth`
2. Scroll to the `Login with Single Sign On` section
3. Enable the Single Sign On Authentication Integration
4. Enable `Allow Registration`
5. Copy the string in the `Key` box
6. Click Save
> **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral.
You will then have to generate a JWT with the following claims:
- `jti` (_optional_) - A unique ID for this particular JWT token. We recommend
using a [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)
for this value. Without this parameter, the logout functionality inside the
embed stream will not work and you will need to call logout on the embed
itself.
- `exp` (_optional_) - When the given SSO token should expire. This is
specified as a unix time stamp in seconds. Once the token has expired, a new
token should be generated and passed into Coral. Without this parameter, the
logout functionality inside the embed stream will not work and you will need
to call logout on the embed itself.
- `iat` (_optional_) - When the given SSO token was issued. This is required to
utilize the automatic user detail update system. If this time is newer than
the time we received the last update, the contents of the token will be used
to update the user.
- `user.id` (**required**) - the ID of the user from your authentication system.
This is required to connect the user in your system to allow a seamless
connection to Coral.
- `user.email` (**required**) - the email address of the user from your
authentication system. This is required to facilitate notification email's
about status changes on a user account such as bans or suspensions.
- `user.username` (**required**) - the username that should be used when being
presented inside Coral to moderators and other users.
- `user.badges` (_optional_) - array of strings to be displayed as badges beside
username inside Coral, visible to other users and moderators. For example, to indicate
a user's subscription status.
- `user.role` (_optional_) - one of "COMMENTER", "STAFF", "MODERATOR", "ADMIN". Will create/update
Coral user with this role.
An example of the claims for this token would be:
```json
{
"jti": "151c19fc-ad15-4f80-a49c-09f137789fbb",
"exp": 1572172094,
"iat": 1562172094,
"user": {
"id": "628bdc61-6616-4add-bfec-dd79156715d4",
"email": "bob@example.com",
"username": "bob"
}
}
```
With the claims provided, you can sign them with the `Key` obtained from the
Coral administration panel in the previous steps with a `HS256` algorithm. This
token can be provided in the above mentioned embed code by adding it to the
`createStreamEmbed` function:
```js
Coral.createStreamEmbed({
// Don't forget to include the parameters from the
// "Embed On Your Site" section.
accessToken: "{{ SSO_TOKEN }}"
});
```
Or by calling the `login/logout` method on the embed object:
```js
var embed = Coral.createStreamEmbed({
// Don't forget to include the parameters from the
// "Embed On Your Site" section.
});
// Login the current embed with the generated SSO token.
embed.login("{{ SSO_TOKEN }}");
// Logout the user.
embed.logout();
```
### SSO Login Prompts
In order to handle login prompts (e.g. a user clicks on the sign in button) you can listen to the `loginPrompt` event.
```js
var embed = Coral.createStreamEmbed({
// Don't forget to include the parameters from the
// "Embed On Your Site" section.
events: function(events) {
events.on("loginPrompt", function() {
// Redirect user to a login page.
location.href = "http://example.com/login";
});
}
});
```
docs/themes/coral/layout/partial/sidebar.swig
Vendored
+31 -31
View File
@@ -1,35 +1,35 @@
<aside class="sidebar">
<a class="brand" href="{{ url_for("/") }}">
<h2>
{{ image_tag('images/logo.svg', {width: 50, height: 50}) }}
<span>Talk</span>
</h2>
</a>
<ul class="sidebar__list">
{% for item in config.sidebar.side %}
{% if item.url %}
<li class="sidebar__section{% if is_current(item.url) %} active toggled{% endif %}">
<a href="{{ url_for(item.url) }}" class="sidebar__header sidebar__header__link">{{ item.title }}</a>
</li>
{% else %}
<li class="sidebar__section{% for item in item.children %}{% if is_current(item.url) %} active toggled{% endif %}{% endfor %}">
<a href="#" class="sidebar__header">{{ item.title }}</a>
<ul class="sidebar__links">
{% for item in item.children %}
<li class="{% if is_current(item.url) %}active{% endif %}">
<a href="{{ url_for(item.url) }}">{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="notice">
<p>Made by <a href="https://coralproject.net/" class="coral-link-invert" target="_blank">The Coral Project</a> by <a href="https://www.voxmedia.com/" class="coral-link-invert" target="_blank" title="Vox Media">Vox Media</a>.</p>
<a href="https://www.voxmedia.com/" target="_blank" title="Vox Media"><figure class="voxmedia" alt="Vox Media">{{ image_tag('images/coralproject.png') }}</figure></a>
<div>
<a class="brand" href="{{ url_for("/") }}">
{{ image_tag('images/coralproject.png') }}
</a>
<ul class="sidebar__list">
{% for item in config.sidebar.side %}
{% if item.url %}
<li class="sidebar__section{% if is_current(item.url) %} active toggled{% endif %}">
<a href="{{ url_for(item.url) }}" class="sidebar__header sidebar__header__link">{{ item.title }}</a>
</li>
{% else %}
<li class="sidebar__section{% for item in item.children %}{% for item in item.children %}{% if is_current(item.url) %} active toggled{% endif %}{% endfor %}{% endfor %}">
<a href="#" class="sidebar__header">{{ item.title }}</a>
<ul class="sidebar__headers">
{% for item in item.children %}
<li class="sidebar__subsection{% for item in item.children %}{% if is_current(item.url) %} active toggled{% endif %}{% endfor %}">
<a href="#" class="sidebar__header">{{ item.title }}</a>
<ul class="sidebar__links">
{% for item in item.children %}
<li class="{% if is_current(item.url) %}active{% endif %}">
<a href="{{ url_for(item.url) }}">{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</aside>
<div class="sidebar__backdrop"></div>
docs/themes/coral/source/css/_variables.scss
Vendored
+53 -15
View File
@@ -1,21 +1,59 @@
$coral_orange: #f67150;
// Palate
$coral_orange: rgb(245, 100, 85);
$coral_dark_blue: rgb(19, 28, 84);
$coral_light_blue: rgb(83, 192, 191);
$coral_light_gray: rgb(238, 238, 238);
$coral_dark_gray: rgb(46, 56, 61);
$coral_success: rgb(35, 131, 53);
$coral_error: rgb(208, 48, 53);
// Variables
// // Sidebar
$sidebar_width: 320px;
$sidebar_background: $coral_orange;
$sidebar_color: white;
$sidebar_background: white;
$sidebar_color: black;
$sidebar_gutter: 35px;
// // Layout
$content_gutter: 40px;
$header_padding_bottom: $content_gutter;
$breakpoint: 960px;
$hljs_string_color: $coral_orange;
$code_background: #F0F0F0;
$code_border: 1px solid darken($code_background, 10%);
$copy_button_background: white;
$coral_button_background: $coral_orange;
$coral_button_border: darken($coral_button_background, 5%);
$demo_border: lighten($coral_button_border, 30%);
$coral_button_border_color: $coral_orange;
// // Code
$hljs_string_color: $coral_light_blue;
$code_background: $coral_light_gray;
$code_border: 0;
$copy_button_color: white;
$copy_button_background: $coral_light_blue;
// // Call out
$callout_color: white;
$callout_background: $coral_dark_blue;
$callout_link_color: darken($callout_color, 20%);
$callout_link_hover_color: darken($callout_link_color, 5%);
// // Buttons
$coral_button_background: $coral_light_blue;
$coral_button_color: black;
$coral_button_hover_color: $coral_button_border_color;
$coral_button_invert_border_color: lighten($coral_button_border_color, 20%);
$coral_button_invert_color: white;
$coral_button_invert_hover_color: $coral_button_invert_border_color;
$coral_button_hover_color: darken($coral_button_background, 5%);
$coral_button_invert_color: $coral_dark_gray;
$coral_button_invert_hover_color: lighten($coral_button_invert_color, 20%);
// // Search
$algolia_suggestion_highlight_color: $coral_light_blue;
$algolia_suggestion_highlight_background: fade-out(
$algolia_suggestion_highlight_color,
0.9
);
// // Navigation
$header_nav_link_color: $coral_dark_gray;
$header_nav_icon_color: $coral_dark_gray;
docs/themes/coral/source/css/talk.scss
Vendored
+62 -59
View File
@@ -3,7 +3,7 @@
@import "hljs";
body {
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-variant: normal;
font-weight: 400;
@@ -58,31 +58,20 @@ h4 {
font-weight: 500;
}
.btn-coral {
color: white;
background: $coral_button_background;
border: 1px solid $coral_button_border;
&:hover {
color: white;
cursor: pointer;
background: darken($coral_button_background, 5%);
border-color: darken($coral_button_border, 5%);
}
}
.param {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
}
article.configuration {
h2, .toc {
h2,
.toc {
@extend .param;
}
}
.suggest-edits {
padding: .20rem .5rem;
padding: 0.2rem 0.5rem;
}
/**
@@ -91,14 +80,14 @@ article.configuration {
.demo {
background: $coral_orange;
border: 1px solid $demo_border;
overflow: hidden;
margin: 0 auto;
padding: 0;
margin-bottom: 1rem;
max-width: 650px;
.btn, .alert {
.btn,
.alert {
border: none;
border-radius: 0;
margin: 0;
@@ -109,7 +98,6 @@ article.configuration {
}
.mount {
border-top: 1px solid $demo_border;
display: none;
background: white;
padding: 10px;
@@ -123,6 +111,7 @@ article.configuration {
background: $copy_button_background;
padding: 3px 10px;
border: $code_border;
color: $copy_button_color;
&:hover {
background: darken($copy_button_background, 10%);
@@ -142,7 +131,6 @@ pre {
color: #212529;
position: relative;
& > code {
display: block;
overflow-x: auto;
@@ -196,8 +184,8 @@ pre {
left: 0 !important;
.algolia-docsearch-suggestion--highlight {
color: $coral_orange;
background: fade-out($coral_orange, 0.9);
color: $algolia_suggestion_highlight_color;
background: $algolia_suggestion_highlight_background;
}
.ds-dropdown-menu {
@@ -207,7 +195,7 @@ pre {
// Hide the carrot.
&:before {
display: none
display: none;
}
// Fix for smaller screens.
@@ -215,7 +203,6 @@ pre {
min-width: 200px;
}
}
}
&.header--toggled {
@@ -232,7 +219,7 @@ pre {
display: inline-block;
text-align: center;
margin-left: 15px;
color: $coral_orange;
color: $header_nav_link_color;
white-space: nowrap;
& > svg {
@@ -240,12 +227,12 @@ pre {
width: 20px;
rect {
fill: $coral_orange;
fill: $header_nav_icon_color;
}
}
&:hover {
color: darken($coral_orange, 10%);
color: darken($header_nav_icon_color, 10%);
}
}
}
@@ -262,7 +249,6 @@ pre {
}
.coral-link {
border-bottom: 1px solid $coral_button_border_color;
color: $coral_button_color;
text-decoration: none;
@@ -274,7 +260,6 @@ pre {
.coral-link-invert {
@extend .coral-link;
border-color: $coral_button_invert_border_color;
color: $coral_button_invert_color;
&:hover {
@@ -310,6 +295,7 @@ a.brand {
padding: $sidebar_gutter;
color: #fff;
text-decoration: none;
min-height: 90px;
h2 {
margin: 0;
@@ -328,15 +314,9 @@ a.brand {
font-weight: 500;
}
.logo {
img {
vertical-align: middle;
height: 50px;
width: 50px;
@include transition(all, 250ms);
&:hover {
@include transform(rotate(8deg));
}
width: 100%;
}
}
@@ -358,6 +338,9 @@ a.brand {
color: $sidebar_color;
height: 100%;
position: fixed;
display: flex;
justify-content: space-between;
flex-direction: column;
top: 0;
left: 0;
z-index: 2;
@@ -369,7 +352,7 @@ a.brand {
@media (max-width: $breakpoint) {
&.sidebar--toggled {
@include transform(translate3d(0, 0, 0));
box-shadow: 0 0 30px rgba(0,0,0,0.3);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
z-index: 3;
}
}
@@ -382,26 +365,49 @@ a.brand {
padding: 0px;
}
.notice {
padding: $sidebar_gutter $sidebar_gutter 0;
color: fade-out($sidebar_color, 0.5);
}
.sidebar__section {
list-style: none;
border-bottom: 1px solid lighten($sidebar_background, 3%);
&.active {
.sidebar__header {
background-color: darken($sidebar_background, 2%);
}
}
&.toggled {
& > .sidebar__header {
background: darken($sidebar_background, 10%);
// color: white;
}
.sidebar__subsection {
display: block;
}
.sidebar__links {
display: block;
}
}
&.active {
& > .sidebar__header {
background: darken($sidebar_background, 30%);
}
}
}
.sidebar__subsection {
display: none;
}
.sidebar__subsection {
list-style: none;
&.active {
& > .sidebar__header {
color: fade-out($sidebar_color, 0.3);
background-color: darken($sidebar_background, 2%);
}
}
}
.sidebar__headers {
padding: 0;
}
a.sidebar__header {
@@ -425,7 +431,6 @@ a.brand {
overflow-y: hidden;
& > li {
& > a {
display: block;
padding: 6px $sidebar_gutter;
@@ -438,11 +443,11 @@ a.brand {
}
&.active > a {
color: fade-out($sidebar_color, 0.3);
color: fade-out($sidebar_color, 0.2);
}
&.active {
background: darken($sidebar_background, 5%);
background: darken($sidebar_background, 1%);
}
}
}
@@ -467,20 +472,18 @@ a.brand {
}
.callout {
background-color: $coral_button_background;
color: white;
background-color: $callout_background;
color: $callout_color;
margin: 20px 0;
padding: 20px;
text-align: center;
a {
@extend .coral-link;
color: #FFF;
border-color: #FFF;
color: $callout_link_color;
&:hover {
color: #FFF;
border-color: darken(#FFF, 5%);
color: $callout_link_hover_color;
}
}
}
docs/themes/coral/source/images/coralproject.png
Vendored
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 32 KiB

docs/themes/coral/source/images/logo.svg
Vendored
-41
View File
@@ -1,41 +0,0 @@
<svg version="1.1" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<title>Artboard 1</title>
<g>
<path class="st0" d="M163.5,38.1c-2.8,12.8-2.1,21.9,2.1,26.9c5.6,6.7,18.4,5.6,25.7,0.2c5.8-4.3,7.7-12.3,8.9-19.6
c0.2-1.5,0.4-3.4,0.6-5.3c0.7-8.6,1.8-21.6,13.4-27c16.8-7.9,31.6,9.5,39.7,18.9c0.5,0.6,1.2,1.1,1.2,1.6v-8.9
c0.1-13.6-10.8-24.7-24.3-24.8c-0.1,0-0.2,0-0.3,0h-43.7C174.1,12,166.5,24.4,163.5,38.1z"/>
<path class="st0" d="M255,198.2v-38.5c-16,2.7-31.2-1.1-45.9-4.9c-7.3-2-14.7-3.6-22.1-4.8c-11.6-1.5-20.6,3.8-24.9,14.6
c-6,15.2,7,25.6,25.9,38.7c5.6,3.9,10.5,7.2,14.1,10.7c7.1-7.6,15-12.5,23.8-14.5C235.8,197.3,246,197.6,255,198.2z"/>
<path class="st0" d="M153.8,99.7c1.3,1,2.7,1.9,4.2,2.7c6,3.4,10.6,4.2,16.4,2.8c1.1-0.3,2.3-0.6,3.4-0.9c4.6-1.2,9.7-2.6,15.3-2.2
c7.8,0.4,14.4,4,20.6,7.6l0.6,0.3c4.7,2.8,9.2,5.4,13.7,6c6.3,0.9,11.2-4.9,17.5-13.1l0.5-0.7c0.6-0.8,1.2-1.8,2-2.8
c2.6-3.2,4.9-6.5,7-10.1V57.8c-1-2.2-3.4-4.5-5-6.7s-3.3-4.6-5.1-6.5c-0.7-0.8-1.4-1.7-2.2-2.6c-5.1-5.9-15.6-18.1-22.1-15.1
c-3.5,1.6-4.2,7.1-4.8,14.7c-0.2,2.2-0.4,4.4-0.7,6.4c-1.5,9.6-4.6,21.9-14.7,29.4c-6.7,4.9-14.7,7.5-23,7.6l0,0
c-9.6,0-17.8-3.8-23.2-10.3c-7.4-8.9-9.1-21.9-5.2-39.7c2.7-12.5,8.4-24,17.4-35h-33.5c-2.3,13-4.4,31.6-2.6,49.7
C132.4,73.1,140.4,89.9,153.8,99.7z"/>
<path class="st0" d="M81,130.4l3.4,0.4c1.9,0.2,4,0.6,6.2,1c8.1,1.4,19.2,3.4,22.5-1.6c2.7-4.1-0.8-12.9-5.7-18.2
c-3.5-3.8-7.9-6.9-12.5-10.2c-2.7-1.9-5.5-3.9-8.2-6.1c-6.4-5.2-13.3-12.8-9.4-25.4c1.3-3.8,3-7.4,5-10.8c1.9-3.4,3.5-6.3,4.2-9.5
c1.1-5.6-1.6-16.6-6.7-22c-2.7-2.8-4.7-2.8-6.1-2.6C62.8,27,58.7,38.5,54.1,54.6c-1.1,3.8-2.1,7.3-3.3,10.5l-0.1,0.4
c-3.2,8.8-8,22.1-20.7,25.6C19.4,94,9,89,0,82.8v32c3,6,8,11.9,14.7,17.8c5.5,4.6,11.4,8.8,17.6,12.3c3.9-6.3,9.9-11.1,16.9-13.6
C60,127.5,71.1,129,81,130.4z"/>
<path class="st0" d="M229.2,214.2c-6.6,1.5-12.5,5.4-18.1,12.1c4.9,9,8.5,18.7,10.6,28.8h8.6c13.5,0,24.6-10.9,24.6-24.4
c0-0.1,0-0.2,0-0.3v-17C246,212.7,237.5,212.3,229.2,214.2z"/>
<path class="st0" d="M26,76.6c5.2-1.4,8.3-10,10.5-16.2l0.1-0.4c1-2.8,2-6.1,3-9.6c4.5-15.5,10.6-36.8,31.8-39.9
c7-1,13.8,1.6,19.1,7.2c9,9.5,12.4,25.6,10.5,35.2c-1.1,5.4-3.6,9.9-5.8,13.8c-1.5,2.5-2.8,5.2-3.8,8c-0.9,3-0.8,5,4.6,9.3
c2.3,1.9,4.8,3.7,7.5,5.6c5,3.6,10.2,7.3,14.7,12.2c7.4,7.9,15.4,24.3,7.3,36.7c-8.8,13.3-26.2,10.2-37.7,8.1
c-2-0.4-3.9-0.7-5.5-0.9l-3.5-0.5c-8.6-1.2-17.5-2.4-24.9,0.1c-7.1,2.4-12.6,10.7-12.8,19.3c-0.1,3.8,0.8,10.5,8.3,13.5
c9.2,3.7,19.4,3.3,30.2,2.8c11.6-0.5,23.6-1,35.5,3.5c16,6.1,30.6,20.4,38,37.7c4.8,11.1,6.3,22.8,4.4,32.8h48.8
c-2-8-6.4-21.3-14.1-29.7c-2.5-2.8-7.5-6.1-12.8-9.8c-16.8-11.6-42.1-29.1-31.3-56.5c6.8-17.2,22.4-26.3,40.8-23.9
c8.3,1.1,16.1,3.1,23.8,5.1c14.5,3.7,28.2,7.2,42.2,4.1v-29.9c-5,7.5-13.8,16.5-25.8,16.5c-1.1,0-2.3-0.1-3.4-0.2
c-7.4-1-13.6-4.7-19.1-7.9l-0.6-0.3c-4.8-2.8-9.4-5.3-13.9-5.6c-3.2-0.2-6.8,0.8-10.6,1.8c-1.3,0.3-2.5,0.7-3.8,1
c-9.5,2.3-17.9,0.9-27.3-4.3c-1.9-1.1-3.8-2.3-5.6-3.6c-17-12.4-27-32.7-29.7-60.6c-1.8-18.6,0-37.2,2.3-51.2H25
C11.2,0,0.1,11.1,0,24.8v38.8C7,70,18.4,78.7,26,76.6z"/>
<path class="st0" d="M62.8,231.9c-20.2-1.1-32.2-2.7-43.4-23.9c-1.9-3.7-0.5-8.2,3.1-10.1c3.7-1.9,8.2-0.5,10.1,3.1
c7.5,14.2,12.6,14.9,31,15.9c14.4,0.8,26.2,14.1,35,38.1h43.7c2.1-8,1.2-17.6-2.8-26.9c-5.9-13.6-17.2-24.9-29.6-29.6
c-9-3.4-19-3-29.5-2.5C68.5,196.4,56.2,197,44,192c-11.4-4.6-18-15-17.6-27.9c0-1.8,0.2-3.6,0.5-5.3C17.1,153.6,8.1,147,0,139.4
v90.8C0.1,244,11.2,255.1,25,255c0,0,0,0,0,0h57.5C78.3,245,71.4,232.3,62.8,231.9z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB