
This post is to test the new integrations with 

- [latex2js](https://latex2js.com/)
- [mermaidjs](https://mermaid-js.github.io/mermaid)

The content on this page is not intended to make sense! It's just to demonstrate the components. Will be using them in future posts...

# Latex2JS 

```tex
\begin{pspicture}(-2,-2)(2,2)
\psframe(-2,-2)(2,2)
\userline[linewidth=1.5 pt]{->}(0,0)(2,2)
\end{pspicture}
```

## some equations

```tex
Here is some text, can we make it look just like the other text?

It is widely known in the academic world that \TeX\ is the {\it standard de facto} language for authoring academic documents. 


\LaTeX\ is a typesetting language that evolved from \TeX.


You can do things like {\bf this} and \emph{this}.


\begin{verbatim}
You can do things like {\bf this} and \emph{this}.
\end{verbatim}



which produces

$$\int_0^\infty H(\omega)e^{i\omega x} dx$$

more info on \TeX support here (read carefully!) \href{http://docs.mathjax.org/en/latest/tex.html}{http://docs.mathjax.org/en/latest/tex.html}

```

## more diagrams

here we go:

```tex
\begin{pspicture}(-5,-5)(5,5)
\rput(0.3,3.75){ $Im$ }
\psline{->}(0,-3.75)(0,3.75)
\rput(3.75,0.3){ $Re$ }
\psline{->}(-3.75,0)(3.75,0)
\pscircle(0,0){ 3 }
\rput(2.3,1){$e^{i\omega}-\alpha$}
\userline[linewidth=1.5 pt]{->}(1.500,0.000)(2.121,2.121)
\userline[linewidth=1.5 pt,linecolor=blue]{->}(0,0.000)(2.121,2.121){(x>0) ? 3 * cos( atan(-y/x) ) : -3 * cos( atan(-y/x) ) }{ (x>0) ? -3 * sin( atan(-y/x) ) : 3 * sin( atan(-y/x) )}
\userline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121){x}{0}{x}{y}
\userline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121){0}{y}{x}{y}
\rput(-0.75,-4.25){$1+\alpha$}
\rput(2.25,-4.25){$1-\alpha$}
\psline{<->}(-3,-4)(1.5,-4)
\psline{<->}(1.5,-4)(3,-4)
\psline[linestyle=dashed](3,-4.5)(3,0)
\psline[linestyle=dashed](-3,-4.5)(-3,0)
\psline[linestyle=dashed](1.5,-4.5)(1.5,0)
\end{pspicture}
```

## mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```mermaid
graph TB
  F[Gatsby]
  F --> G
  F --> Github

  subgraph build
    S[(Sanity)]
    G{GraphQL}
    GH[(Github)]
  
    G --> GH
    G --> S
  end

  subgraph deploy
    Github-->Netlify
    Netlify-->Y{{You}}
  end
```


```tex
\begin{pspicture}(-3.5,-1)(3.75,3.5)
\slider{1}{8}{n}{$N$}{4}
\psplot[algebraic,linewidth=1.5pt,plotpoints=1000]{-3.14}{3.14}{cos(n*x/2)+1.3}
\psaxes[showorigin=false,labels=none, Dx=1.62](0,0)(-3.25,0)(3.25,2.5)
\psline[linestyle=dashed](-3.14,0.3)(3.14,0.3)
\psline[linestyle=dashed](-3.14,2.3)(3.14,2.3)
\rput(3.6,2.3){$\frac{1}{1-\alpha}$}
\rput(3.6,0.3){$\frac{1}{1+\alpha}$}
\rput(3.14, -0.35){$\pi$}
\rput(1.62, -0.35){$\pi/2$}
\rput(-1.62, -0.35){$-\pi/2$}
\rput(-3.14, -0.35){$-\pi$}
\rput(0, -0.35){$0$}
\end{pspicture}

```

Here is another!

```mermaid
graph TD
    A[AuthOneTimeToken] -->|password| B(Verify)
    B --> C{matches?}
    C -->|yes| D[return token]
    C -->|no| E[return false]
```


```mermaid
sequenceDiagram
    participant Client
    participant Auth server
    Client->>Auth server: Client credentials
    Auth server->>Auth server: Authenticate client
    Auth server->>Client: Access token
    Client->>API: Access protected API with access token
    API->>Client: Success
```


```tex

which produces $x$ such that $x = \int_0^\infty H(\omega)e^{i\omega x} dx$
```

```mermaid
sequenceDiagram
client->>auth.domain.com: loginOneTimeToken(user,pass)
auth.domain.com-->>db: login_one_time(user,pass)
db->>auth.domain.com: base32(token.ott) 
auth.domain.com->>client: base32(token.ott)
client-->>other.domain.com: getToken( ott )
other.domain.com->>db: get_one_time_token ( ott )
```

New Blog Components


First read up on [how to deploy openfaas serverlesss functions](/post/openfaas-deploy)

## 12 factor serverless functions

First build your serverless function, and similar to envalid, (which 12factor-env depends on), you can specify your environmental variables. 

The main difference is that, you separate the secrets from config vars. This enables 12factor-env to use `<SECRET_NAME>_FILE` syntax to get your secrets and verify them via envalid.

Create a `env.js` file in your app:

```js
import { str, email, host, env } from '12factor-env';

export default env(
  process.env,
  {
    // secrets
    MAILGUN_KEY: str()
  },
  {
    // configs
    MAILGUN_DOMAIN: host()
  }
);
```

Checkout the [12factor-env](https://github.com/pyramation/12factor-env) library for more information and usage.

## insert secret into kubernetes

Put your secret in the `openfaas-fn` namespace, which will ultimately create the file `/var/openfaas/secrets/mailgun_key`:

```sh
kubectl delete secret -n openfaas-fn faas-mailgun-secrets
kubectl create secret \
    generic faas-mailgun-secrets \
    --namespace openfaas-fn \
    --from-literal=mailgun_key=$MAILGUN_KEY
```

## update the OpenFAAS yaml

While OpenFAAS is great, a major downside is that [does not support k8s secrets](https://github.com/openfaas/faas-netes/issues/153). Alas, this was the inspiration for this post and the creation of 12factor-env.

OpenFAAS instead, similar to docker secrets, stores them as files. Docker defaults secrets to `/run/secrets/<secret_name>`, however, OpenFAAS stores secrets in `/var/openfaas/secrets`. The 12factor-env library handles this by allowing you set set `ENV_SECRETS_PATH`.

You can also set the secret explicitly via `MAILGUN_KEY_FILE` in this example:

```yaml
version: 1.0
provider:
  name: openfaas
  gateway: http://gateway-external.openfaas.svc.cluster.local:8080
functions:
  myfunction:
    lang: node12-graphql-private
    handler: ./functions/send-email-link
    image: docker.example.com/pyramation/myfunction:latest
    environment:
      ENV_SECRETS_PATH: /var/openfaas/secrets
      MAILGUN_KEY_FILE: /var/openfaas/secrets/mailgun_key
      scale_from_zero: true
      inactivity_duration: 1m
    secrets:
      - regcred
      - faas-mailgun-secrets
```

Deploy and now your application will get the `MAILGUN_KEY` var when you require your `env.js` file! Enjoy!

## sources

[https://github.com/pyramation/12factor-env](https://github.com/pyramation/12factor-env)

[how to deploy openfaas serverlesss functions](/post/openfaas-deploy)

secret management with 12factor-env for nodejs-based serverless functions

Secret management when deploying serverless 12-factor applications


This is a way to expose your gateway to your local machine to deploy cloud functions. There are much better ways to do this including GitOps, but this is the quick and simple way to get things done if you need it.

## setting `OPENFAAS_URL`

set your production endpoint

```sh
export OPENFAAS_URL=gateway-external.openfaas.svc.cluster.local:8080
```

if you are doing local development, you can do this:

```sh
export OPENFAAS_URL=localhost:31112
```

## port forward the production gateway

On a separate shell, expose the gateway:

```sh
kubectl port-forward -n openfaas svc/gateway-external 8080:8080
```

## build your functions

```sh
faas build -f stack.prod.yml 
```

If you are building with tokens and private npm modules:

```sh
faas build -f stack.prod.yml --build-arg NPM_TOKEN=<redacted> 
```

If all goes well, push and deploy!

```
faas push -f stack.prod.yml 
```

which really just does this:

```
docker push docker.yourdomain.com/username/yourimage:latest
```

## logging in 

Before you deploy, make sure you have authenticated with OpenFAAS. If you have, skip to the next section.


```sh
PASSWORD=$(kubectl get secret -n openfaas basic-auth -o jsonpath="{.data.basic-auth-password}" | base64 --decode; echo)

USER=$(kubectl get secret -n openfaas basic-auth -o jsonpath="{.data.basic-auth-user}" | base64 --decode; echo)

echo -n $PASSWORD | faas-cli login --username $USER --password-stdin
```

## deploying the functions

```sh
faas remove -f stack.prod.yml 
faas deploy -f stack.prod.yml 
```

## testing the function

you can test the function `hello-openfaas` or whatever the name is by using the gateway URL:

```
http://gateway-external.openfaas.svc.cluster.local:8080/function/hello-openfaas
```

Caveat, however, you may need to update your `/etc/hosts` file for this to work

```sh
127.0.0.1 gateway-external.openfaas.svc.cluster.local
```


notes for deploying your serverless functions to production

Deploy your OpenFAAS functions to production


This post covers how to setup a SSG site on AWS via S3, CloudFront, Route53, and ACM.

## S3 bucket

### Create the Bucket

First create the bucket

![Create Bucket](next-hosting/bucket-settings.png)

### Tags

Optional, but you can set tags. For tracking traffic per domain, it's a good idea to add a `domain` tag:

![Bucket Tags](next-hosting/tags.png)

### Policy

Second, edit the policy to be public

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicReadAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::yourdomain.com/*"
        }
    ]
}
```

## ACM Certificates

Before setting up CloudFront, we need SSL Certificates. You can obtain a free SSL certificate from the console [here](https://console.aws.amazon.com/acm/home?region=us-east-1#/wizard/)

### Create Domain

Enter your domain, and include `*.yourdomain.com` for wildcards, or any specific subdomains you'd like to use. 

![Create Domain](acm-certs/create-domain.png)

### DNS Validation

It's highly suggested to use Route53, and check DNS Validation for the validation method.

![Domain Name Validation](acm-certs/dns-validation.png)

Create and then choose "Create record in Route 53" to begin the DNS validation.

![Domain Name Validation](acm-certs/dns-validation-step.png)

Now just wait and the verification should be complete within a few minutes, potentially right away!

## CloudFront

### Create Distributions

Start by creating a distribution. You can create a distribution from the console [here](https://console.aws.amazon.com/cloudfront/home?region=us-east-1)

1. Choose Web
2. For "Origin Domain Name" set `yourdomain.com.s3.amazonaws.com`
3. Check "Redirect HTTP to HTTPS"
4. Decide your "Price Class"
5. Under "Alternate Domain Names (CNAMEs)" enter your domains each on separate lines (see below image)
6. Check "Custom SSL Certificate"
7. "Default Root Object" set to `index.html`

![Distribution Settings](cloudfront/distribution-settings.png)

Then click create!

### Set up Error Pages

While distribution is deploying, you can setup the error pages. Click on the distribution.

We will set this up once each for 403 and 404 errors:

1. Choose 403 or 404 for "HTTP Error Code"
2. Choose "Customize Error Response"
3. Set "Response Path Path" `/404.html`
4. Choose 200 for "HTTP Response Code"

![Error page](cloudfront/error-pages.png)

## Your Next.js Package

Update your `package.json`'s `scripts` object to contain the deploy info:

```json
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next build && next export",
    "deploy": "AWS_PROFILE=myprofile1 aws s3 sync out/ s3://yourdomain.com",
    "invalidate": "AWS_PROFILE=myprofile1 aws cloudfront create-invalidation --distribution-id EEEEEEEKJCTPFA --paths \"/*\"",
    "paths": "AWS_PROFILE=myprofile1 ./deploy/prepare.sh",
    "deploy:all": "npm run export && npm run deploy && npm run paths"
  }
```

### CloudFront routing fix

Do make sure you can route to `/some-route` and under the hood, cloudfront will be able to find the `/some-route.html`, you need to setup a script.

Make sure to have this script in your `deploy/prepare.sh` (and also `chmod +x` it)

```sh
#!/bin/bash

export S3_BUCKET=yourdomain.com

(cd out &&
  find . -type f -name '*.html' | while read HTMLFILE; do
    HTMLFILESHORT=${HTMLFILE:2}
    # HTMLFILE_WITHOUT_INDEX=${HTMLFILESHORT::${#HTMLFILESHORT}-11}

    HTMLFILE_WITHOUT_INDEX=${HTMLFILESHORT//index.html/}
    HTMLFILE_WITHOUT_HTML=${HTMLFILE_WITHOUT_INDEX//.html/}


    # cp /about/index.html to /about
    aws s3 cp s3://$S3_BUCKET/${HTMLFILESHORT} s3://$S3_BUCKET/$HTMLFILE_WITHOUT_HTML
    echo aws s3 cp s3://$S3_BUCKET/${HTMLFILESHORT} s3://$S3_BUCKET/$HTMLFILE_WITHOUT_HTML

    if [ $? -ne 0 ]; then
      echo "***** Failed renaming build to $S3_BUCKET (html)"
      exit 1
    fi
  done)
```

## Route53

### DNS Records

Setup the root record first

1. Create an "A Record" (leave name blank for the root record)
2. Choose yes for "Alias"
3. Find your CloudFront distribution and link to it

Then setup the www and cname

1. Choose "CNAME"
2. Enter "www" for the name
3. Enter "yourdomain.com" for the Value

When finished you should have these two records at a minimum:

```
yourdomain.com.
A
ALIAS d12mkko9k4qnnn.cloudfront.net. 
No
-

www.yourdomain.com.
CNAME
yourdomain.com
```

## AWS Profiles

Make use of AWS Profiles

Inside of `~/.aws/credentials`

```
[default]
aws_access_key_id = REDACTED
aws_secret_access_key = REDACTED

[myprofile1]
aws_access_key_id = REDACTED
aws_secret_access_key = REDACTED
[myprofile2]
aws_access_key_id = REDACTED
aws_secret_access_key = REDACTED
```

Inside of `~/.aws/config`

```
[default]
region = us-east-1
[profile myprofile1]
output = json
region = us-east-1
[profile myprofile2]
output = json
region = us-east-1
```

### Sources

[https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af)

[https://medium.com/@serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6](https://medium.com/@serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6)

[https://medium.com/fredwong-it/aws-cloudfront-url-return-accessdenied-in-front-of-s3-react-app-a4bad7d3e4f2](https://medium.com/fredwong-it/aws-cloudfront-url-return-accessdenied-in-front-of-s3-react-app-a4bad7d3e4f2)

[https://github.com/jariz/gatsby-plugin-s3/blob/master/recipes/with-cloudfront.md](https://github.com/jariz/gatsby-plugin-s3/blob/master/recipes/with-cloudfront.md)


Setting up static sites on AWS S3 and CloudFront

Deploy Next.js to AWS on S3 and CloudFront


## Standard 

```yaml
apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
  name: standard
provisioner: kubernetes.io/aws-ebs
reclaimPolicy: Delete
allowVolumeExpansion: true
parameters:
  type: gp2
```

## IOPS Storage

```yaml
apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
  name: iops
provisioner: kubernetes.io/aws-ebs
reclaimPolicy: Delete
allowVolumeExpansion: true
parameters:
  type: io1
```

## Cold Storage

```yaml
apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
  name: cold
provisioner: kubernetes.io/aws-ebs
reclaimPolicy: Delete
allowVolumeExpansion: true
parameters:
  type: sc1
```

## Example usage

```yaml
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  namespace: myapp
  name: myapp-data-dir-claim
spec:
  volumeMode: Filesystem
  storageClassName: iops
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 4Gi
```

Configure your persistent storage for your Kubernetes via AWS EBS Volumes

Configure AWS EBS Volumes for Kubernetes


This assumes that you are using Traefik as a load balancer and handles your SSL traffic automatically. I'll be following up with a post and will link to it for how to set up Traefik.

# add prerequisite files

First, create a folder `./generate`. Inside create a file `generate-registry-config.sh`:

```sh
#!/bin/bash

export SHA=$(head -c 16 /dev/urandom | shasum | cut -d " " -f 1)
export USERNAME=user$(head -c 16 /dev/urandom | shasum | cut -d " " -f 1)

echo $USERNAME > registry-creds.txt
echo $SHA >> registry-creds.txt

docker run --entrypoint htpasswd registry:2.7.0 -Bbn $USERNAME $SHA > ./htpasswd

# https://github.com/helm/charts/tree/master/stable/docker-registry

helm template webinc-reg stable/docker-registry \
  --namespace default \
  --set persistence.enabled=true \
  --set persistence.accessMode=ReadWriteOnce \
  --set persistence.storageClass=standard \
  --set persistence.size=24Gi \
  --set service.type=NodePort \
  --set secrets.htpasswd=$(cat ./htpasswd) \
  > registry-source-from-helm.yaml
```

# Add stable to helm repos

```
helm repo add stable https://charts.helm.sh/stable
help repo update
```

# setup registry

inside of `./generate` 

1. run `./generate-registry-config.sh`, this will generate `registry-source-from-helm.yaml`

2. I prefer to copy/paste everything out into the different pieces out, pvc, service, deployment, config...

3. Make sure you have storage configured. Read up on that [here](/post/ebs-volume-configuration)

4. now deploy the individual files via `kubectl`

## ingress

Add ingress for traefik

```yaml
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: docker-yourdomain-com-ingress
  namespace: webinc
  annotations:
    kubernetes.io/ingress.class: traefik
spec:
  rules:
    - host: docker.yourdomain.com
      http:
        paths:
          - path: /
            backend:
              serviceName: webinc-reg-docker-registry
              servicePort: registry

```

# authentication, etc.

Delete and store the registry-creds.txt ASAP, it's a secret. But get is secured first.

test it out: https://docker.yourdomain.com/v2/_catalog

cool, works.

Now, how to get this going...

## creating secrets

Caveat: you may have to do this for multiple namespaces... 

```
kubectl delete secret -n webinc regcred
kubectl create secret -n webinc \
 docker-registry regcred \
    --docker-server=$REGISTRY_DOMAIN \
    --docker-username=$REGISTRY_USER \
    --docker-password=$REGISTRY_PASSWORD
```

## logging in

```
docker login docker.yourdomain.com
```

## pushing an image up

You may need to tag first, but once you do:

```
docker push docker.yourdomain.com/username/yourimage:latest
```

## kubernetes configs

Add this to any containers

```yaml
 containers:
   - name: new-private-container
   ...
 imagePullSecrets:
   - name: regcred
```

### Sources

[https://github.com/alexellis/k8s-tls-registry](https://github.com/alexellis/k8s-tls-registry)

Build a secured private docker registry with persistent storage on your kubernetes cluster

Secured Private Docker Registry on Kubernetes


Here are some notes for managing your own 2FA secrets and generating TOTP codes. Enjoy!

## background

The technical documentation for all this: [RFC-4226 (HOTP)](https://tools.ietf.org/html/rfc4226) and [RFC-6238 (TOTP)](https://tools.ietf.org/html/rfc6238).

## manually reading QR Codes to get URLs

If you haven't yet, install `zbar` 

```sh
brew install zbar
```

and then read the QR Code into `zbarimg`

```sh
zbarimg qrcode.png
```

You should see something like this:

```sh
QR-Code:otpauth://totp/AcmeInc?secret=MFZWIZTTMRTHGYLEMZSGM4Y&issuer=AcmeInc
```

If there is no digits or interval parameters, these default to `digits=6` and `interval=30` by default per the RFC.

## manually getting temporary TOTP codes 

Learn about `oathtool` on the <a href="https://www.nongnu.org/oath-toolkit/oathtool.1.html" target="_blank">oathtool website</a>

Example usage:

```
oathtool --totp -v -d 6 -s 30s 71f6da3ddbb38cece61c
```

If you can the error 

```
oathtool: hex decoding of secret key failed
```

You probably need to add `-b` for base32

```
oathtool --totp -v -d 6 -s 30s -b MFSHGZTTMRTHGZQ
```

If for some reason you need to specify a time, you can specify `N` (for now):

```
oathtool --totp -v -N "2020-11-14 07:46:37 UTC" -d 6 -s 30s -b OH3NUPO3WOGOZZQ4
Hex secret: 71f6da3ddbb38cece61c
Base32 secret: OH3NUPO3WOGOZZQ4
Digits: 6
Window size: 0
TOTP mode: SHA1
Step size (seconds): 30
Start time: 1970-01-01 00:00:00 UTC (0)
Current time: 2020-11-14 07:46:37 UTC (1605339997)
Counter: 0x33084A5 (53511333)
```

## getting your secrets out of Authy

Once you learn that all you really need is to know 3 things

1. TOTP secret
2. number of digits
3. TOTP interval

Then you may want to back up this information (securely) from your Authy account!

Carefully read [this gist](https://gist.github.com/pyramation/78238e7c344a621e34228138f249e3fd) for how to export your authy secrets and TOTP urls.

open source 2FA and google authenticator alternatives