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 on any website platform.
Here's a demo of what the meeting finder can look like embedded in a random website design.
Advantanges:
- faster 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 webmasters)
- 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.
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 (takes one minute 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 your meetings to show up. There are some tools that can help.
See src/settings.jsx for options that can be set by defining a window.config object. You can customize many of the behaviors and all of the text strings that the app uses. Only include the values you wish to override.
window.config = {
strings: {
en: {
region: 'City',
},
},
};
window.config = {
strings: {
en: {
types: {
BE: 'Beginner',
},
},
},
};
A full list of meeting types can be found on the Meeting Guide format spec page. These can be overridden by specifying the code and preferred nomenclature as demonstrated above.
- Error message when no data specified, or error loading data
- Display day in list when multiple
- Hide map and proximity features if no coordinates in data
- Hide filters if not present in data
- Inside page
- Isolate CSS so it doesn't interfere with overall site layout
- Mobile list view
- Multilingual support
- Day query string: don't automatically specify day, support for
anyvalue - Scroll issue on inside page
- Mapbox
- Google Sheet support
- Near me mode
- Near location mode with geocoding
- Upcoming time filter
- Sortable columns
- Hierarchical regions support
- Better internationalization for title
- Slugs (eg
sun) in query string instead of day IDs - Slugs (eg
mountain-view) in query string instead of region IDs - Select multiple dropdown items on mobile
- Condition-clearing buttons when no results
- Reduce memory by forgetting unneeded meeting data, eg URLs
- Display group names and Venmo links on inside page
- Feedback form on inside page
- Auto-suggest locations as you type a location search
- Possible to do a custom tag? eg
<meetings src="/path/to/meetings"/> - How to handle email transport?
- What will the impact be on SEO?
Pull requests are welcome. To get started, clone this repository, do an npm install, and point your web root at the public folder.
This project uses React JS and Bootstrap CSS.
While developing, run the npm run watch terminal command to compile assets as you edit them. When you're ready to commit, run npm run prod to prepare them for production.