Nicolas Gallagher necolas

## Composite-Link.js
import NextLink from 'next/link';
import React from 'react';
import { Text } from 'react-native-web';

// https://github.com/zeit/next.js#with-link
// Combines the Next.js <Link> with React Native's <Text> component.
// Enables use like this:
//
//    <Link
//      href={href}

## README.md

      
              2 files
            
          
              51 forks
            
          
              21 comments
            
          
              355 stars
            
          
                necolas
                / README.md
            
            
              Last active
              March 28, 2024 20:34
            
              
                Experimenting with component-based HTML/CSS naming and patterns
              
          
    NOTE I now use the conventions detailed in the SUIT framework
Template Components

Used to provide structural templates.
Pattern
t-template-name


## snippet.js
/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */

(function(doc, script) {
    var js,
        fjs = doc.getElementsByTagName(script)[0],

## Hoverable.js
import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';

const hover = createHoverMonitor();

/**
 * Use:
 * <Hoverable>
 *   {(hover) => <View style={hover && styles.hovered} />}

## react-native-shim.js
/**
 * This module is aliased to 'react-native' in our webpack config.

 * RNW currently uses inline styles. Our existing CSS – written using `css-modules`
 * and processed by `post-css` – needs to override RNW's default component styles
 * when RNW is being used to render the app. A postcss transform was added to our
 * webpack config to append `!important` to (almost) every CSS declaration.
 */

import findNodeHandle from 'react-native-web/dist/modules/findNodeHandle';

## rsync_backup
#!/bin/sh

PROG=$0
RSYNC="/usr/bin/rsync"
SRC="/"
DST="/Volumes/Backup/"

# rsync options
# -v increase verbosity
# -a turns on archive mode (recursive copy + retain attributes)

## .htaccess
# Filename-based cache busting
# taken from https://github.com/h5bp/html5-boilerplate/

# This rewrites file names of the form `name.123456.js` to `name.js`
# so that the browser doesn't use the cached version when you have
# updated (but not manually renamed) the file.

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On

## css-responsive-images.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS responsive images</title>
        <style>
            /* Doesn't stop original source image being
               downloaded too */

            @media (min-device-width:600px) {

## stylesheet-injector.js
(function() {
    var css = [
        '/css/default.css',
        '/css/section.css',
        '/css/custom.css'
    ],
    i = 0,
    link = document.createElement('link'),
    head = document.getElementsByTagName('head')[0],
    tmp;

## AppText.js
import i18n from './i18n';
import theme from './theme';
import { bool, string } from 'prop-types';
import { I18nManager, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';

/**
 * React Component
 */
class AppText extends Component {
	import NextLink from 'next/link';
	import React from 'react';
	import { Text } from 'react-native-web';

	// https://github.com/zeit/next.js#with-link
	// Combines the Next.js <Link> with React Native's <Text> component.
	// Enables use like this:
	//
	// <Link
	// href={href}
	/*
	* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
	* Better handling of scripts without supplied ids.
	*
	* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
	*/

	(function(doc, script) {
	var js,
	fjs = doc.getElementsByTagName(script)[0],
	import createHoverMonitor from './createHoverMonitor';
	import { element, func, oneOfType } from 'prop-types';
	import React, { Component } from 'react';

	const hover = createHoverMonitor();

	/**
	* Use:
	* <Hoverable>
	* {(hover) => <View style={hover && styles.hovered} />}
	/**
	* This module is aliased to 'react-native' in our webpack config.

	* RNW currently uses inline styles. Our existing CSS – written using `css-modules`
	* and processed by `post-css` – needs to override RNW's default component styles
	* when RNW is being used to render the app. A postcss transform was added to our
	* webpack config to append `!important` to (almost) every CSS declaration.
	*/

	import findNodeHandle from 'react-native-web/dist/modules/findNodeHandle';
	#!/bin/sh

	PROG=$0
	RSYNC="/usr/bin/rsync"
	SRC="/"
	DST="/Volumes/Backup/"

	# rsync options
	# -v increase verbosity
	# -a turns on archive mode (recursive copy + retain attributes)
	# Filename-based cache busting
	# taken from https://github.com/h5bp/html5-boilerplate/

	# This rewrites file names of the form `name.123456.js` to `name.js`
	# so that the browser doesn't use the cached version when you have
	# updated (but not manually renamed) the file.

	<IfModule mod_rewrite.c>
	Options +FollowSymlinks
	RewriteEngine On
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CSS responsive images</title>
	<style>
	/* Doesn't stop original source image being
	downloaded too */

	@media (min-device-width:600px) {
	(function() {
	var css = [
	'/css/default.css',
	'/css/section.css',
	'/css/custom.css'
	],
	i = 0,
	link = document.createElement('link'),
	head = document.getElementsByTagName('head')[0],
	tmp;
	import i18n from './i18n';
	import theme from './theme';
	import { bool, string } from 'prop-types';
	import { I18nManager, StyleSheet, Text } from 'react-native';
	import React, { Component } from 'react';

	/**
	* React Component
	*/
	class AppText extends Component {