https://github.com/code4recovery/tsml-ui
Embeddable recovery meeting finder
https://github.com/code4recovery/tsml-ui
Last synced: 9 months ago
JSON representation
Embeddable recovery meeting finder
- Host: GitHub
- URL: https://github.com/code4recovery/tsml-ui
- Owner: code4recovery
- License: mit
- Created: 2018-07-17T18:57:53.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2025-06-18T17:28:31.000Z (about 1 year ago)
- Last Synced: 2025-06-18T18:35:00.455Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://tsml-ui.code4recovery.org/
- Size: 43.6 MB
- Stars: 24
- Watchers: 16
- Forks: 18
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# TSML UI [](https://coveralls.io/github/code4recovery/tsml-ui?branch=main)
TSML UI (12 Step Meeting List User Interface) is an interactive meeting finder makes the [12 Step Meeting List](https://github.com/code4recovery/12-step-meeting-list) interface available for use on any web page, regardless of platform.
Here are two demos:
- [San Francisco / Marin](https://aasfmarin.org/meetings) (uses a custom database as a data source)
- [Santa Cruz](https://aasantacruz.org/meeting-guide/) (WordPress / 12 Step Meeting List data source)
To use TSML UI on your website you only need to add some HTML to your web page. To get started, use our [configuration instructions](https://tsml-ui.code4recovery.org).
## Configure
### Enable "Near Me" mode
You don't need to do anything other than enable HTTPS on your website. To ensure all users see this functionality, make sure that anyone who enters a `http://` address for your site is redirected to the `https://` address.
### Add custom types
Here is an example of extending the `tsml_react_config` object to include a definition for an additional meeting type.
```js
var tsml_react_config = {
strings: {
en: {
types: {
BEACH: 'Beach Meeting',
},
},
},
};
```
A.A. groups that wish to participate in the Meeting Guide app should be careful not to repurpose types already in use. A full list of A.A. meeting types can be found in the [Meeting Guide format spec](https://github.com/code4recovery/spec).
### Override type descriptions
A.A. meeting type descriptions are automatically applied to Open and Closed types. These can be unset or overwritten as needed.
```js
var tsml_react_config = {
strings: {
en: {
type_descriptions: {
O: 'This is a custom Open description',
C: undefined, //this type description has been unset
},
},
},
};
```
### Override type defaults
If you wanted to add a list that is pre-filtered to a single type, "Women" in this example, you can add this code:
```js
var tsml_react_config = {
defaults: { type: ['women'] },
show: {
controls: false,
title: false,
},
};
```
### Use kilometers
Distances can be calculated in miles (`mi`) or kilometers (`km`).
```js
var tsml_react_config = {
distance_unit: 'km',
};
```
### Disable Add to Calendar button
You can disable the add to calendar button if needed.
```js
var tsml_react_config = {
calendar_enabled: false,
};
```
### Change the map style
Open Street Maps can be styled by picking a different tile layer URL and attribution and adding them to the `tsml_react_config` object. There are several free and paid tile layers [listed here](https://leaflet-extras.github.io/leaflet-providers/preview/).
```js
var tsml_react_config = {
map: {
tiles: {
attribution:
'© Stadia Maps © OpenMapTiles © OpenStreetMap contributors',
url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
},
},
};
```
You can optionally specify a `tiles_dark` attribute which will be used when `prefers-color-scheme: dark`.
```js
var tsml_react_config = {
map: {
tiles_dark: {
attribution: '© ...',
url: 'https://...',
},
},
};
```
If you prefer the Mapbox map appearance (we switched away from Mapbox in May 2025), you can add this to your site (just replace `` with your Mabpox access token):
```js
var tsml_react_config = {
map: {
tiles: {
attribution: `Map data © OpenStreetMap, Imagery © Mapbox`,
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=',
},
tiles_dark: {
attribution: `Map data © OpenStreetMap, Imagery © Mapbox`,
url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v10/tiles/{z}/{x}/{y}?access_token=',
},
},
};
```
Markers can be adjusted by supplying an alternate SVG image:
```js
var tsml_react_config = {
map: {
markers: {
location: {
html: `