Skip to content
A Discourse theme component that lets you annotate images right inside the editor 🎨
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
discourse
src
temp
.gitignore
README.md
deploy.js
marker.js.license
package.json
parcel.js
yarn.lock

README.md

Discourse Image Annotator

A Discourse plugin that lets you annotate images right inside the editor 🎨



Discourse Setup Instructions

This is designed to be used together with Discourse. Each of the following /relative/urls/ are relative to your forum's base URL, in my case it's https://labofoz.com

Install the component

Install the component by visiting /admin/customize/themes and "Import from the web" from: https://github.com/labofoz/discourse-image-annotator. Then set the branch to discourse.

https://labofoz.com/admin/customize/themes


Developers Guide

Requirements

  • Install NodeJS
  • Install the Discourse Theme CLI
  • Download this repository somewhere
  • Run npm install to install dependencies
  • Run npm run dev to begin development

File Structure

|- discourse/  # Where Discourse Theme CLI serves from
|- src/        # Your JavaScript applications source
|- parcel.js   # Injects JS into /discourse/common/body_tag.html 

Development

npm run dev will do two things:

  • It starts Parcel.js with /src/js/app.js as the entry point
  • It bundles app.js and inlines it into discourse/common/body_tag.html

Now whenever you make a change to /src/js/app.js or any of its dependencies, it'll get bundled, injected into body_tag.html, and then sent to server that the CLI is connected to.


Scripts

The following scripts are available from this projects root directory (note that you must have installed). Typically you'll just want to run npm run dev

# Watches: /src/js/app.js 
# Builds into: /discourse/common/body_tag.html
# Starts Discourse CLI on: discourse/
npm run dev

# Watches: /src/js/app.js
# Builds into: /discourse/common/body_tag.html
npm run watch:parcel

# Starts Discourse CLI on: discourse/
npm run watch:discourse

Setting Up the Discourse Theme CLI

If you're new to Discourse and would like to fork this project, the following reads might be helpful.

You can’t perform that action at this time.