Skip to content

Instantly share code, notes, and snippets.

View johncarter-'s full-sized avatar

John Carter johncarter-

7 followers · 2 following
View GitHub Profile
@johncarter-
johncarter- / tw-helpers.antlers.html
Last active April 19, 2021 15:24
Tailwind Development Helpers
{{ if config.app.env !== 'production' }}
<div class="fixed top-0 left-0 z-50 px-2 py-px text-sm leading-none text-white bg-black rounded-br">
<span class="inline xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:hidden">none</span>
<span class="hidden xxs:inline xs:hidden sm:hidden md:hidden lg:hidden xl:hidden">xxs</span>
<span class="hidden xxs:hidden xs:inline sm:hidden md:hidden lg:hidden xl:hidden">xs</span>
<span class="hidden xxs:hidden xs:hidden sm:inline md:hidden lg:hidden xl:hidden">sm</span>
<span class="hidden xxs:hidden xs:hidden sm:hidden md:inline lg:hidden xl:hidden">md</span>
<span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:inline xl:hidden">lg</span>
<span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:inline">xl</span>
</div>
@johncarter-
johncarter- / statamic-bugs.md
Created March 16, 2021 09:53
Statamic Bugs

Including a partial in a nav tag breaks recursive children

Using code from here: https://statamic.dev/knowledge-base/recursive-nav-examples#footer-nav-example

<div class="flex">
    {{ nav }}
        {{ if depth == 1 }}
            <div class="mx-10">
                <h3 class="mb-2">{{ title }}{{ partial:brand-svg }}</h3>{{# this partial stops the elseif depth 2 stuff rendering #}}                
                {{ if children }}
 {{ *recursive children* }}
@johncarter-
johncarter- / ContactForm.php
Created March 10, 2021 08:22
Statamic Livewire Form
<?php
namespace App\Http\Livewire;
use Illuminate\Support\Facades\URL;
use Livewire\Component;
use Statamic\Events\SubmissionCreated;
use Statamic\Facades\Form;
use Statamic\Facades\Site;
use Statamic\Forms\SendEmails;
@johncarter-
johncarter- / breakpoints.md
Last active March 30, 2022 10:23
Tailwind CSS Breakpoint Display 
<div class="fixed top-0 left-0 z-50 px-2 py-px text-sm leading-none text-white bg-black rounded-br">
    <span class="inline xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">none</span>
    <span class="hidden xxs:inline xs:hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">xxs</span>
    <span class="hidden xxs:hidden xs:inline sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">xs</span>
    <span class="hidden xxs:hidden xs:hidden sm:inline md:hidden lg:hidden xl:hidden 2xl:hidden">sm</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:inline lg:hidden xl:hidden 2xl:hidden">md</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:inline xl:hidden 2xl:hidden">lg</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:inline 2xl:hidden">xl</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:inline">2xl</span>
@johncarter-
johncarter- / px_tailwind.md
Created February 3, 2021 08:48
Tailwind CSS sizing in pixel (px)

When I receive designs they are often provided in px. Use this to convert those px values into Tailwind CSS sizes.

Text sizes

tailwind class rem px
.text-xs 0.75 12
.text-sm 0.875 14
.text-base 1 16
.text-lg 1.125 18
@johncarter-
johncarter- / fraction_map_entity_to_string.php
Last active November 6, 2020 10:18
HTML Fraction Entities to string
<?php
$fractionStrings = [
'½' => 'half',
'⅓' => 'third',
'⅔' => 'two-thirds',
'¼' => 'quarter',
'¾' => 'three-quarters',
'⅕' => 'fifth',
'⅖' => 'two-fifths',
@johncarter-
johncarter- / gmail-smtp.md
Created July 22, 2020 10:49
Googlemail Gmail SMTP for Laravel / Statamic

Google > My Account > Security > Enable 2-Step Verification

Make a new App Password: Google > My Account > Security > App passwords

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_USERNAME=ACCOUNT@googlemail.com
@johncarter-
johncarter- / tailwind.config.js
Created July 14, 2020 13:11
John Carter Tailwind Config
module.exports = {
theme: {
extend: {
colors: {
brand: {
'blue-900': '#01295f',
},
},
fontFamily: {
'sans': [
@johncarter-
johncarter- / pagination.livewire-tailwind.blade.php
Created July 14, 2020 07:29
Laravel Livewire Tailwind Pagination
@if ($paginator->hasPages())
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
<div class="flex justify-between flex-1 sm:hidden">
@if ($paginator->onFirstPage())
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
{!! __('pagination.previous') !!}
</span>
@else
<button wire:click="previousPage" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
{!! __('pagination.previous') !!}
@johncarter-
johncarter- / gist:eeae5633c2920d0d5210cea58c6ae10f
Created March 1, 2018 18:13
<VirtualHost *>
ServerName http://www.secondary.dev
ServerAlias www.secondary.dev
DocumentRoot "C:/xampp/htdocs/www.primary.dev"
</VirtualHost>