With only a Meeting Guide format JSON file or a Google Sheet, web servants can have the same meeting finder found in the 12 Step Meeting List WordPress plugin, but without WordPress.
Here's a demo of what the meeting finder looks like with no styling. Here's a demo of what it can look like embedded in a random website design.
Advantanges:
- better performance for users
- reduced strain on servers
- can be used on any web platform
- can be embedded in any layout
- wider pool of potential project contributors (not just WordPress developers)
- simplifies WordPress plugin (separation of concerns)
You don't need to download anything. Simply add the following code to your page:
-
In your
<head>add:<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://react.meetingguide.org/style.css"> -
In your
<body>add:<meetings src="/path/to/meetings.json"/> <script src="https://react.meetingguide.org/app.js" async></script> -
Edit
/path/to/meetings.jsonin the code above to point to your JSON file.
If you're using the 12 Step Meeting List plugin for WordPress, you may use the shortcode [tsml_react]. There is no need to follow the installation instructions above.
To use a Google Sheet as your backend:
- Publish a Google Sheet that looks like this example.
- Use this blog post to determine what the JSON URL of your sheet is.
- Use that JSON URL as the
srcfor yourmeetingstag.
To add a free map to your site:
-
Sign up for Mapbox (very easy and doesn't require a credit card)
-
Copy your Public Access Token
-
Use it in a
mapboxparameter on yourmeetingstag, eg<meetings src="/path/to/meetings.json" mapbox="pk.aaaaabbbbbcccccdddddeeeeefffffgggg"/>
If you're using a Google Sheet, you will have to add Latitude and Longitude columns for the map to appear. There are some tools that can help.
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.
See src/helpers/settings.js for options that can be set by defining a tsml_react_config object. You can customize many of the behaviors and any text string that the app uses. It's only necessary to specify those values you wish to override.
America/New_York is the default. To change it, add this code inside a <script> tag.
var tsml_react_config = {
timezone: 'America/Los_Angeles'
};
Here is another example with two strings overridden.
var tsml_react_config = {
strings: {
en: {
region: 'City',
types: {
BE: 'Beginner',
},
},
},
};
A complete list of meeting types can be found in the Meeting Guide format spec.
- Hierarchical region dropdown
- Alternate appearance of
TCmeetings (hide directions and cross out address) - Alternate appearance of approximate addresses (no location list group, zoom out map, no popup)
- Display group info on inside page
- Distance dropdown instead of regions when in near me or location mode
- Spanish
- French
- Near location mode with geocoding
- Filter-clearing buttons when no results
- Accessibility improvements
- Select multiple dropdown items on mobile
- Proper
hrefattributes (instead of#) in controls for SEO
Pull requests are welcome. To get started, clone this repository, run yarn, and point your web root at the public folder.
This project uses React JS and Bootstrap CSS.
While developing, run yarn watch to compile assets as you edit them. When you're ready to commit, run yarn prod to prepare them for production.