11ty Membership Site

screenshot of 11ty Membership Site
scss

11ty Membership Site

An Eleventy theme for offering premium content to members. Requires Supabase and Netlify accounts.

Overview:

The 11ty Membership Site is an Eleventy theme designed for offering premium content to members. It requires Supabase and Netlify accounts to function properly. This theme allows users to authenticate with Supabase Magic Links and provides members-only content. It also offers partial content previews to unauthenticated users. The theme is built using 11ty, Netlify Edge, and Supabase. It utilizes vanilla JS, Deno on the Edge, Nunjucks, Markdown, and Sass. Additionally, it includes dark and light modes for design customization.

Features:

  • Authenticate users with Supabase Magic Links and provide members-only content
  • Offer partial content previews to unauthenticated users
  • Built using 11ty, Netlify Edge, and Supabase
  • Uses no frameworks or bundlers, just vanilla JS (+ Deno on the Edge), Nunjucks, Markdown, and Sass
  • Includes dark and light modes for design customization

Installation:

To install the theme, follow these steps:

  1. Ensure you have 11ty v2 beta+ installed (included with the theme).
  2. Create a Netlify account and install the Netlify CLI.
  3. Create a Supabase account.
  4. Update the src/_data/meta.js file with your site details.
  5. Change the theme color by updating the --primary-hue value in src/sass/_theme.scss.
  6. Replace src/posts/post-preview.md with your own content.
  7. Complete the Supabase and Netlify setup steps described next.

Supabase Setup:

  • Project settings > Auth:
    • Enable new user signups (default)
    • Change JWT expiry to 604800
  • Authentication > URL Configuration:
    • Change "Site URL" to your production (Netlify) URL
    • Add wildcards for localhost and Netlify deploys to support local and branch deploy development
  • Project settings > API:
    • Prepare to copy the URL and public key

Netlify Setup:

  • Local terminal:
    • Create new site: ntl init
    • Link to existing site: ntl link
  • Netlify dashboard:
    • Site settings > Environment variables
    • Create SUPABASE_KEY and SUPABASE_URL environment variables to hold the Supabase URL and public key respectively
    • Alternatively, set environment variables via the CLI

Summary:

The 11ty Membership Site is an Eleventy theme that allows website owners to offer premium content to members. It utilizes Supabase and Netlify for authentication and content access. The theme is built with 11ty, Netlify Edge, and Supabase, and uses a combination of vanilla JS, Nunjucks, Markdown, and Sass. It provides features such as authentication with Supabase Magic Links, members-only content, and partial content previews for unauthenticated users. The theme also includes options for customizing the design with dark and light modes.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.