Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jackhowa/mbsr-template-11ty
This is for practicing the Mindfulness-Based Stress Reduction curriculum, using 11ty, tailwindcss 🧘♂️
https://github.com/jackhowa/mbsr-template-11ty
eleventail eleventy mindfulness netlify serverless stress-reduction-curriculum tailwindcss
Last synced: about 1 month ago
JSON representation
This is for practicing the Mindfulness-Based Stress Reduction curriculum, using 11ty, tailwindcss 🧘♂️
- Host: GitHub
- URL: https://github.com/jackhowa/mbsr-template-11ty
- Owner: JackHowa
- Created: 2020-03-25T22:09:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T08:07:56.000Z (almost 2 years ago)
- Last Synced: 2023-08-18T23:01:26.550Z (over 1 year ago)
- Topics: eleventail, eleventy, mindfulness, netlify, serverless, stress-reduction-curriculum, tailwindcss
- Language: JavaScript
- Homepage: https://mbsr.netlify.com/
- Size: 1.13 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MBSR Template
This is for people who are signed up for Mindfullness-based Stress Reduction curriculum. The goal is for this to be a calm, informed and trustworthy tool to help people practice mindfulness.
# Status
[](https://app.netlify.com/sites/mbsr/deploys)
# Roadmap
## MVP
- [ ] List of all readings available
- [ ] Readings Split By Week
- [ ] Readings styled in calm and readable way
- [ ] Minimal typos and formatting issues
- [ ] All audio available published
- [ ] Able to stream on website
- [ ] Split up links to streams or podcast by week
- [ ] Week breakdowns (show readings and audio assignments for each week)
# Design
- [UI and colors via Figma](https://www.figma.com/file/2y476nV5FdF8NI4QdEa0Ns/mbsr-2?node-id=1%3A127)
# Features
- [ ] Dark mode to reduce eye strain
- [ ] Offline storage of meditations and yoga audio for uninterrupted experience
- [ ] Payment processing with apple pay integration for seamless sign-up
- [ ] Big, accessible buttons and text for participants with limited vision or dexterity
- [ ] Native tasteful notifications of updates for daily practice notifications
- [ ] Progress meter showing week and day, remembering that
- [ ] Also, limitations on looking ahead for mindful, in-the-moment experience
- [ ] Login and user memory
- [ ] Possibly sign-in with apple for privacy with patient
- [ ] Doodle calendar for scheduling when people would like to meet live
- [ ] Would be cool to use eleventy or other static site generator for serverless architecture
- Good for iteration and performance and fun
# Credit: ElevenTail
A project scaffold for quickly starting a site build with:
- [Eleventy](https://11ty.dev) for templates and site generation
- [Tailwindcss](https://tailwindcss.com) for a utility first CSS workflow
- [PurgeCSS](https://www.purgecss.com/) for optimizing CSS output
- [UglifyJS](https://www.npmjs.com/package/uglify-js) for a simple JS build pipeline
- [Netlify CLI](https://www.npmjs.com/package/netlify-cli) for Netlify dev pipeline and local replication of prod environment
## Prerequisites
- [Node and NPM](https://nodejs.org/)
- [Netlify CLI](https://www.npmjs.com/package/netlify-cli)
## Running locally
```bash
# install Netlify CLI globally
npm install netlify-cli -g
# install the project dependencies
npm install
# run the build and server locally
netlify dev
```
## Previewing the production build
When building for production, an extra build step will strip out all CSS classes not used in the site. This step is not performed during the automatic rebuilds which take place during dev.
```bash
# run the production build
npm run build
```
## Styling with TailwindCSS
This site uses TailwindCSS to offer utility CSS classes and provide a rapid means to styling the site. This means that most styling can be done without writing any additional CSS. Instead, utility classes can be added directly to the HTML. This may not be to everyone's tastes, but it can provide some very rapid development and also offer surprising levels of familiarity for those used to working in this way (since the conventions and classes are not _per site_.)
While running/developing locally, the `npm run start` command will recompile the site as files are saved and this includes the CSS pipeline from Tailwind.
### Global CSS utilities.
A small number of bespoke CSS rules are provided for efficiency of repeated or global classes. These reside in `src/site/_includes/css/tailwind.css`