Cosmin Popovici cossssmin

How to create an HTTPS certificate for localhost domains

This focuses on generating the certificates for loading local virtual hosts hosted on your computer, for development only.

Do not use self-signed certificates in production ! For online certificates, use Let's Encrypt instead (tutorial).

	<!DOCTYPE html>
	<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
	<head>
	<meta charset="utf-8">
	<meta name="x-apple-disable-message-reformatting">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
	<!--[if mso]>
	<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>

	<!-- src/layouts/master.html -->
	<!DOCTYPE {{{ page.doctype \|\| 'html' }}}>
	<html lang="{{ page.language \|\| 'en' }}">
	<head>
	<meta charset="{{ page.charset \|\| 'utf-8' }}">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="x-apple-disable-message-reformatting">
	<!--[if mso]>
	<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>

	Windows Registry Editor Version 5.00

	[HKEY_CURRENT_USER\Directory\shell\wt]
	@="Windows Terminal Here"
	"Icon"="C:\\Users\\{YOUR_USER_NAME}\\AppData\\Local\\terminal\\terminal.ico"

	[HKEY_CURRENT_USER\Directory\shell\wt\command]
	@="C:\\Users\\{YOUR_USER_NAME}\\AppData\\Local\\Microsoft\\WindowsApps\\wt.exe new-tab -d \"%V\" -p \"Pengwin\""

	[HKEY_CURRENT_USER\Directory\Background\shell\wt]

	<div id="app">
	<div class="flex flex-wrap h-screen">
	<editor target="preview" class="w-full lg:w-2/5 p-4 font-mono bg-grey-lightest outline-none resize-none"></editor>
	<iframe id="preview" class="w-full lg:w-3/5 bg-graph-paper"></iframe>
	</div>
	</div>
	</body>

	const _ = require('lodash');

	module.exports = ({e, addUtilities, config}) => {
	const gradients = config('gradients', [])
	const variants = config('modules.gradients')

	const gradientUtilities = _.map(gradients, (colors, name) => {
	if (!_.isArray(colors)) {
	colors = ['transparent', colors];
	}

	function ({ addVariant }) {
	addVariant('rtl', ({ modifySelectors, separator }) => {
	modifySelectors(({ className }) => {
	return `[dir="rtl"] .rtl${separator}${className}`
	})
	})
	}

	.bg-graph-paper {
	background-color: #fff;
	background-image: linear-gradient(rgba(244,244,250,.8) 1px,transparent 0),
	linear-gradient(#f4f4fa 1px,transparent 0),
	linear-gradient(90deg,rgba(244,244,250,.8) 1px,transparent 0),
	linear-gradient(90deg,#f4f4fa 1px,transparent 0),
	linear-gradient(transparent 3px,#fff 0,#fff 94px,transparent 0),
	linear-gradient(90deg,#f4f4fa 3px,transparent 0,transparent 94px,#f4f4fa 0);
	background-size: 24px 24px,96px 96px,24px 24px,96px 96px,96px 96px,96px 96px;
	}