New Blog Components


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 )
```


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