{"id":15423222,"url":"https://github.com/5t3ph/11ty-membership-site","last_synced_at":"2025-07-14T15:38:09.145Z","repository":{"id":84151465,"uuid":"586340680","full_name":"5t3ph/11ty-membership-site","owner":"5t3ph","description":"An Eleventy theme for offering premium content to members. Requires Supabase and Netlify accounts.","archived":false,"fork":false,"pushed_at":"2023-01-26T21:38:05.000Z","size":582,"stargazers_count":28,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T15:56:11.217Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/5t3ph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-07T19:36:03.000Z","updated_at":"2025-01-25T18:39:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"927bc536-9fd0-437e-9081-401cb700ec10","html_url":"https://github.com/5t3ph/11ty-membership-site","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/5t3ph/11ty-membership-site","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-membership-site","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-membership-site/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-membership-site/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-membership-site/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5t3ph","download_url":"https://codeload.github.com/5t3ph/11ty-membership-site/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-membership-site/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265313341,"owners_count":23745189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T17:40:57.715Z","updated_at":"2025-07-14T15:38:09.119Z","avatar_url":"https://github.com/5t3ph.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](./readme/theme-preview.png)\n\n# 11ty Membership Site\n\n\u003e An Eleventy theme for offering premium content to members. Requires Supabase and Netlify accounts.\n\n**[Review this post](https://11ty.rocks/posts/building-a-membership-site-with-11ty/) on the high-level concepts** of how this theme and the members-only content works.\n\n## About this theme\n\n- Authenticate users with Supabase Magic Links and provide members-only content\n- Offer partial content previews to unauthenticated users\n- Built using 11ty, Netlify Edge, and Supabase\n- Uses no frameworks or bundlers, just vanilla JS (+ Deno on the Edge), Nunjucks, Markdown, and Sass\n- Dark and light modes\n\n## Prerequisites\n\n- 11ty v2 beta+ (included)\n- [Netlify account](https://netlify.com)\n- [Netlify CLI](https://docs.netlify.com/cli/get-started/)\n- [Supabase account](https://supabase.io)\n\n## Setup\n\n1. Update `src/_data/meta.js` with your site details.\n2. Change the theme color by updating the `--primary-hue` value in `src/sass/_theme.scss`.\n3. Replace `src/posts/post-preview.md` with your own content.\n4. Complete the Supabase and Netlify steps described next.\n\n### Supabase\n\n1. Project settings \u003e Auth\n\n   - Ensure new user signups are enabled (default)\n   - change JWT expiry to 604800\n\n2. Authentication \u003e URL Configuration\n\n   - Change \"Site URL\" to your production (Netlify) URL\n   - [Add wildcards for localhost and Netlify deploys](https://supabase.com/docs/guides/auth/overview#redirect-urls-and-wildcards) to support local and branch deploy development\n\n3. Project settings \u003e API\n\n   - Prepare to copy the URL and public key\n\n### Netlify\n\n1. **Local terminal**:\n   - Create new site: `ntl init`\n   - Link to existing site: `ntl link`\n2. **Netlify dashboard**: Site settings \u003e Environment variables\n\n   - Create `SUPABASE_KEY` and `SUPABASE_URL` to hold those values\n   - _Alternatively_ [set environment variables via the CLI](https://www.netlify.com/blog/2021/07/12/managing-environment-variables-from-your-terminal-with-netlify-cli/)\n\n## Development\n\nUse the Netlify CLI for local development by running `ntl dev`. This allows running the Edge functions, and also will retrieve the environment variables from your site.\n\n## Authentication Flow\n\n![Authentication flow as described following the image](./readme/authentication-flow.png)\n\n1. User enters email and triggers magic link login from either the index or a post\n2. Supabase auth sends a magic link to user's email\n3. User returns through magic link and arrives at `/session/` where:\n   - Supabase saves session data to localStorage\n   - `session.js` picks up the session variables and redirects to `/access/`\n4. `/access/` route loads the `netlify/edge-functions/login.js` Edge function which saves the `_access_token` cookie\\*\n5. User redirected to the login-originating page (either the index or a specific post)\n\n\u003e - **Why a cookie?** Edge functions can read cookies from page headers, so it's used to validate sessions across page loads.\n\n## Members-Only Content Flow\n\n![Members-only content flow, as described following the image](./readme/gated-content-flow.png)\n\n1. The author determines which content (if any) will be gated by setting the `premium` variable\n   - See `posts/post-preview.md` for an example\n2. When a user visits a gated post, the 11ty Edge function (`netlify/edge-functions/eleventy-edge.js`) checks their authenticated status with Supabase, and sets `isUser` as global data for access within the `{% edge %}` shortcode\n   - If `isUser: true` - user sees the premium content\n   - If `isUser: false` - user sees partial content and the login form\n\n## Opportunities for enhancements\n\n- Create user dashboard\n- Persist user profile data to Supabase\n- Add in payment processing\n- Use [WebC](https://11ty.rocks/posts/introduction-webc/) to save content bookmarks or perform other client-side interactions\n\n## Resources\n\n- Learn more about all kinds of 11ty topics on [11ty Rocks!](https://11ty.rocks)\n- [Article about this using this theme](https://11ty.rocks/posts/building-a-membership-site-with-11ty/)\n- [11ty Edge docs](https://www.11ty.dev/docs/plugins/edge/)\n- [Supabase authentication docs](https://supabase.com/docs/guides/auth/overview)\n- [Netlify Edge docs](https://docs.netlify.com/edge-functions/overview/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2F11ty-membership-site","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5t3ph%2F11ty-membership-site","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2F11ty-membership-site/lists"}