SeeThruHead

Exposing Homelab Services via Cloudflare Tunnel with Authelia SSO

This guide covers setting up external access to your homelab services through Cloudflare Tunnels, with Authelia providing single sign-on protection. The end result: you can access sonarr.yourdomain.com from anywhere, protected by 2FA, without opening any ports on your router.

The Traffic Flow

Internet → Cloudflare → cloudflared container → Traefik → Authelia check → Your service

SeeThruHead

import React, { useState, useEffect, useRef, createContext, useContext } from 'react';

// Wizard Context
const WizardContext = createContext();

// Wizard Root Component
const WizardRoot = ({ children, onPageChange }) => {
  const [currentPage, setCurrentPage] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const formRef = useRef(null);

SeeThruHead

require('babel-polyfill');
var uuid = require('uuid');
var faker = require('faker');
var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
var chunkify = require('chunkify');

const createFakeArray = range => {
  const arr = [];
  for (let i = 0; i < range; i ++) {

SeeThruHead

import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';
  
export default (state = 0, action) => ({
  [actions.increment]: (state )=> state + 1,
  [actions.decrement]: (state) => state - 1,
  default: state => state
}[action.type || 'default'](state, action.payload))

SeeThruHead

#Recompose Workshop

##Stateless Function Components

Review stateless function components

• best way to code markup
• they take an object props, as their first arg, and context as second
• they return jsx
• they have no state...

SeeThruHead

var durations = ["12:38", "6:36", "9:03", "8:34", "5:02", "6:54", "13:22", "4:41", "8:36", "21:58", "3:06", "10:46", "10:13", "12:54", "14:00", "11:03", "16:03", "10:52", "24:53", "10:03", "11:49", "15:47", "3:19", "2:06", "5:47", "1:03", "5:29", "5:47", "26:39"];

// write a function that will take the above array of string durations and convert it hours/mins/seconds
// You can use any JS you want - loops/map/reduce/etc...

function addDurations(acc, curr) {
  const [ seconds = 0, minutes = 0, hours = 0] = curr.split(':')
    .reverse().map((x) => parseInt(x, 10));
  return acc += hours * 3600 + minutes * 60 + seconds;
}

SeeThruHead

const check = (char, ind, word) => ~word.slice(0, ind).indexOf(char) 
  || ~word.slice(ind + 1).indexOf(char) ? ')' : '(';

function duplicateEncode(word) {
	return word
  	.toLowerCase()
    .split('')
    .map(check)
    .join('');
}

SeeThruHead

function isInt(x) {
  return (typeof x === 'number') && (x % 1 === 0);
}

function flatten(ar) {
  return ar.reduce(function(prev, curr) {
    return prev.concat((Array.isArray(curr) ? flatten(curr) : curr));
  }, []);
}

SeeThruHead

function biggestGap(values) {
  
  function diff(curr, before) {
    return curr - Math.min.apply(null, before);
  }
  
  function diffs(values) {
    return values.map(function(x, i, ar) {
      return diff(x, ar.slice(0, i));
    });

SeeThruHead

String.prototype.repeatify = function(x) {
  // Array.apply(null, {length: x}) creates an array of undefined values with length x
  return Array.apply(null, {length: x}).map(() => this).join('');
};
// or a better but less fun solution
String.prototype.repeatify = function(x) {
  return Array(x + 1).join(this);
};
console.log('hi'.repeatify(10));