learndesk

A learning platform engine — build beautiful, interactive course websites with HTML, Tailwind CSS, and Eleventy.

Usage

For Course Authors

1. Create a new repo and add the framework:

npm init -y
npm install learndesk @11ty/eleventy

2. Create a minimal .eleventy.js:

module.exports = function(eleventyConfig) {
  return require('learndesk')(eleventyConfig);
};

3. Create your course structure:

my-course/
├── .eleventy.js
├── package.json
└── src/
    ├── _data/
    │   └── site.json         # Course metadata
    ├── index.njk             # Homepage (use {% include "components/home.njk" %} for default)
    ├── module-1/
    │   ├── index.md          # Module content
    │   └── module-1.11tydata.json  # Quiz data (optional)
    └── module-2/
        └── ...

4. Configure src/_data/site.json:

{
  "name": "Your Course Name",
  "description": "Course description",
  "author": "Your Name",
  "repository": "https://github.com/you/your-course",
  "themeColor": "#3399dd",
  "logo": "/assets/img/learndesk-logo.png",
  "modules": [
    {
      "name": "Module Title",
      "slug": "module-1",
      "description": "Module description",
      "topics": ["Topic 1", "Topic 2"],
      "expectedTimeForCompletion": "45 minutes",
      "tags": ["beginner", "topic"]
    }
  ]
}

5. Run:

npx eleventy --serve

Updating

When the framework releases a new version:

npm update learndesk

That's it. No manual copying, no git pulls.

Overriding Framework Templates

The framework provides default templates for the homepage, header, footer, and sidebar. To customize any of these, create a file with the same name in your src/_includes/ directory. The Nunjucks loader checks your course's _includes/ first, then falls back to the framework's.

For example, to customize the footer, create src/_includes/footer.njk in your course.

Development

Clone this repo and run the demo course:

npm install
cd demo && npm install && cd ..
npm run dev

The demo is a fully functional course you can use as a reference.

Publishing a New Version

npm version patch  # or minor / major
npm publish
git push --tags

Then courses can update with npm update @learndesk.

Release Workflow

1. Make UI/UX changes in the framework
2. Test with the demo: npm run build
3. Bump version: npm version patch
4. Publish: npm publish
5. Push: git push --tags origin main
6. All courses update with npm update @learndesks

License

MIT