webring

loading…

Member Sites

Loading sites…

Embed & Integrate

Drop this anywhere in your HTML. The widget auto-detects your site from window.location.origin, or you can pass it explicitly via ?site=.

HTML

      

    


    

      
Use data-* attributes on the script tag to configure the widget without touching the URL.

      

        
        
HTML

        

      

    


    

      
Load the script with data-noauto and call WebRing.init() yourself for full control.

      

        
        
HTML + JS

        

      

    


    

      
Render into an existing element in your layout using data-target (any CSS selector) or by pre-creating a #webring-widget div.

      

        
        
HTML

        

      

    


    
    

      
Widget Preview

      

        
      

    

  


  
  

    
Per-Site Theming


    

      The widget is styled entirely through CSS custom properties. Override any variable on #webring-widget in your own stylesheet — no build step, no config file, no API needed.
    


    

      
        

          Variable
          Default (dark)
          Default (light)
          Controls
        

      
      
        

          --wr-bg
          #111
          #f8f8f5
          Background fill
        

        

          --wr-text
          #e0e0e0
          #1a1a1a
          Primary text color
        

        

          --wr-muted
          #666
          #999
          Label, counter text
        

        

          --wr-accent
          #c8f542
          #1a6b1a
          Link / nav arrow color
        

        

          --wr-border
          #2a2a2a
          #ddd
          Container border, separator
        

        

          --wr-radius
          8px
          8px
          Corner rounding
        

        

          --wr-font
          'DM Mono', 'Courier New', monospace
          Widget typeface
        

        

          --wr-font-size
          12px
          Base font size
        

      
    


    

      

        
        
CSS Override Example

        

      

    

  


  
  

    
.env Configuration


    

      All sites are configured in a single .env file. No database, no admin UI, no restarts needed — just edit and redeploy. The WEBRING_SITES value is a comma-separated list of URL:Display Name pairs.
    


    

      
# .env — Add or remove sites freely. Minimum 2 required.

PORT=3000

# Format: https://site.com:Display Name,https://other.com:Other Name
# Name is optional — falls back to hostname if omitted.
WEBRING_SITES="https://alice.example.com:Alice's Corner,\
https://bob.example.com:Bob's Workshop,\
https://carol.example.com:Carol's Studio,\
https://dave.example.com:Dave's Notes"