cablehead

Connecting your app to Stellar for live CSS updates

Stellar is a local-first CSS generator with an interactive web editor. stellar serve serves your generated CSS and exposes a /live-refresh SSE endpoint that pushes stylesheet updates via Datastar.

stellar serve  # http://localhost:7331

derekr

Northstar Tutorial: Building Modern Web Apps with Go and Datastar

This tutorial will guide you through understanding and building features in Northstar, a modern web application stack combining Go, NATS, Datastar, and Templ. It's designed for developers new to Go or the hypermedia/reactive patterns that Datastar enables.

Table of Contents

1. Understanding the Stack
2. Core Concepts
3. Project Architecture
4. Building Your First Feature

jreviews

behavior Modal
    init
        set my focusRing to (<a, button, input:not([type=hidden]), textarea, select, details/> in me) as Array
    end
    on open
        remove .hide
        add { overflow: 'hidden' } to the <body/>
        transition <[data-backdrop], [data-content]/> in me opacity from 0 to 1 over 0.3s
        focus() the first <input/> in me

johndwells

  // Automatically bind internal links to `up-follow` behaviour
  // Unpoly will already catch and handle links with explicit `up-follow` etc,
  // so we are safe to assume that if our handler below is triggered, the link
  // doesn't already have an up- attribute.
  //
  // Scenarios to handle:
  // Hat-tip to https://github.com/instantpage/instant.page/blob/master/instantpage.js
  // ✅ cmd+click
  // ✅ empty links
  // ✅ links to another domain

tanthammar

<?php

namespace App\Http\Livewire\App\Organizers\Forms;

use App\Http\Livewire\Traits\Form;
use App\Models\Organizer;
use Livewire\Component;

class People extends Component
{

tanthammar

@push('body-styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css">
@endpush

<form x-data="form()">

<input x-ref="description" id="description" name="description" value='{{ $description }}' type="hidden" />
<div wire:ignore>
    <trix-editor input="description"></trix-editor>
</div>

marcus-at-localhost

// added check if script is loaded
// @link https://stackoverflow.com/a/49780469/814031
// usage:

/*
let script = loadScript('https://cdn.jsdelivr.net/combine/npm/leaflet@1.5.1,npm/togpx@0.5.4/togpx.min.js');
script.then( function (){
	L.map('map')
});
*/

AugustMiller

<?php
namespace Deployer;

require 'recipe/composer.php';

// Project name
set('application', 'my-project');

// Project repository
set('repository', 'git@github.com:organization/repo.git');

adamwathan

<?php

namespace App\Providers;

use Illuminate\Http\Request;
use Illuminate\Routing\Route;
use Illuminate\Support\ServiceProvider;
use App\Http\Middleware\CaptureRequestExtension;

class AppServiceProvider extends ServiceProvider

davidpiesse

// https://davidpiesse.github.io/tailwind-md-colours/
//
//Notes
//
//All colours are generated from Material Design Docs
//Colours have a base, a set of shades (50-900) accent colours
//In addition a companion set of contrast colours are included for colouring text / icons
// Example usage
// class="w-full bg-red-600 text-red-600-constrast"