Ben Rogerson ben-rogerson

## twin.code-snippets
{
  // Snippits that make working with Twin a little easier
  // https://github.com/ben-rogerson/twin.macro
  "Add react import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "react",
    "body": "import React from 'react'",
    "description": "Add react import"
  },
  "Add twin imports": {

## App.js
import React from 'react';
import { useMinScreen } from './minScreen';

const App = () => {
  const { min } = useMinScreen();

  return (
    <>
      {min`md` && <div>I'll show at md and up</div>}
      {!min`lg` && <div>I'll show at up to lg</div>}

## babel-plugin-macros.config.js
module.exports = {
  twin: {
    styled: 'styled-components'
  }
}

## readme.md

      
              2 files
            
          
              0 forks
            
          
              6 comments
            
          
              4 stars
            
          
                ben-rogerson
                / readme.md
            
            
              Last active
              April 29, 2021 12:53
            
              
                Using Emotion Styled Components with Tailwind
              
          
              We couldn’t find that file to show.
              
            
## image.html
<picture>
    <source
        srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
                /some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
                /some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
                /some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
        sizes="100vw"
        type="image/webp"
    />
    <source

## base.twig
{# This is the base twig layout file #}

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">


## mapping.scss

// Helper: Get a map item from an object that is a few levels deep
@function map-deep-get($map, $keys...) {
	@each $key in $keys {
		$map: map-get($map, $key);
	}
	@return $map;
}

// Define the theme within your project palette

## search.js

import Vue from 'vue/dist/vue.esm';
import axios from 'axios';

Vue.config.productionTip = false

// Information needed for connecting to our CraftQL endpoint
const apiToken = '[ADD KEY HERE]';
const apiUrl = '/api';

## search.twig
{% set activeQuery = craft.app.request.getParam('q')|default('') %}

{% set searchResults = activeQuery ?
        craft.products({
            search: {
                query: activeQuery,
                subRight: true,
            },
            order: 'score',
    })|merge(

## base.twig
{#

# Craft 3 Templates: Experimenting with Twig Objects as HTML building blocks

Ben Rogerson <info@benrogerson.com.au> 2018

This Gist explores a way to create HTML from a formatted TWIG object.
I found it encourages a different way of thinking when writing HTML.

Here's an example that uses the emmet shorthand to create a `<button>` with a `<main>` parent.
	{
	// Snippits that make working with Twin a little easier
	// https://github.com/ben-rogerson/twin.macro
	"Add react import": {
	"scope": "javascript,typescript,typescriptreact",
	"prefix": "react",
	"body": "import React from 'react'",
	"description": "Add react import"
	},
	"Add twin imports": {
	import React from 'react';
	import { useMinScreen } from './minScreen';

	const App = () => {
	const { min } = useMinScreen();

	return (
	<>
	{min`md` && <div>I'll show at md and up</div>}
	{!min`lg` && <div>I'll show at up to lg</div>}
	<picture>
	<source
	srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
	/some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
	/some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
	/some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
	sizes="100vw"
	type="image/webp"
	/>
	<source
	{# This is the base twig layout file #}

	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	// Helper: Get a map item from an object that is a few levels deep
	@function map-deep-get($map, $keys...) {
	@each $key in $keys {
	$map: map-get($map, $key);
	}
	@return $map;
	}

	// Define the theme within your project palette

	import Vue from 'vue/dist/vue.esm';
	import axios from 'axios';

	Vue.config.productionTip = false

	// Information needed for connecting to our CraftQL endpoint
	const apiToken = '[ADD KEY HERE]';
	const apiUrl = '/api';
	{% set activeQuery = craft.app.request.getParam('q')\|default('') %}

	{% set searchResults = activeQuery ?
	craft.products({
	search: {
	query: activeQuery,
	subRight: true,
	},
	order: 'score',
	})\|merge(
	{#

	# Craft 3 Templates: Experimenting with Twig Objects as HTML building blocks

	Ben Rogerson <info@benrogerson.com.au> 2018

	This Gist explores a way to create HTML from a formatted TWIG object.
	I found it encourages a different way of thinking when writing HTML.

	Here's an example that uses the emmet shorthand to create a `<button>` with a `<main>` parent.