Updating website

flosell · Jun 30, 2024 · ec852db · ec852db
commit ec852db
Show file tree

Hide file tree

Showing 5 changed files with 363 additions and 0 deletions.
diff --git a/app.css b/app.css
@@ -0,0 +1,155 @@
+:root {
+    --main-bg-color: #000000;
+    --title-text-color: #FFFFFF;
+    --info-bg-color: #844FBA;
+    --error-bg-color: #FF8484;
+    --display-font-family: 'Open Sans', sans-serif;
+    --code-font-family: 'Source Code Pro', monospace;
+}
+
+h1 {
+    font-family: var(--display-font-family);
+    font-weight: 700;
+}
+.wrapper {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: auto 1fr 1fr;
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-areas:
+            "title . infos"
+            "details details details"
+            "main main main"
+            "footer footer footer";;
+    width: 100vw;
+    height: 100vh;
+}
+
+.title {
+    background: var(--main-bg-color);
+    color: var(--title-text-color);
+    grid-area: title;
+}
+
+.footer {
+    background: var(--main-bg-color);
+    grid-area: footer;
+}
+.footer a {
+    font-family: var(--display-font-family);
+    font-weight: 300;
+    color: var(--title-text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer img {
+    padding-right: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.infos {
+    background: var(--info-bg-color);
+    color: var(--title-text-color);
+    grid-area: infos;
+    justify-self: end;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.details {
+    background: var(--main-bg-color);
+    grid-area: details;
+    font-family: var(--display-font-family);
+    font-weight: 300;
+    color: var(--title-text-color);
+}
+
+.details summary {
+    display: none;
+}
+
+.details dd {
+    margin-bottom: 1em;
+}
+
+.details dt {
+    font-weight: 500;
+}
+
+.details a {
+    color: white;
+}
+
+.main {
+    background: var(--main-bg-color);
+    grid-area: main;
+    display: grid;
+    grid-gap: 0;
+    grid-template-columns: 1fr 0.2fr 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas:
+            "json-editor arrow hcl-editor"
+            "json-error arrow hcl-error"
+;
+
+    padding: 40px;
+    min-height: 0;
+}
+
+.main > * {
+    background-color: white;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.editor {
+    height: auto;
+    font-family: var(--code-font-family);
+    font-weight: 400;
+    font-size: 14px;
+}
+.json-editor {
+    grid-area: json-editor;
+
+}
+.json-error {
+    grid-area: json-error;
+}
+
+.hcl-editor {
+    grid-area: hcl-editor;
+}
+.hcl-error {
+    grid-area: hcl-error;
+}
+.error {
+    background-color: var(--error-bg-color);
+    text-align: center;
+    display: none;
+}
+
+.arrow {
+    grid-area: arrow;
+
+    background-color: var(--main-bg-color);
+    color: var(--info-bg-color);
+
+    justify-self: center;
+    align-self: center;
+
+    font-size: 10vw;
+    font-family: var(--display-font-family);
+    font-weight: 900;
+}
+
+.title,.infos {
+    margin: 0;
+}
+
+/* Align PrismJS theme to our styling */
+pre[class*=language-] {
+    background-color: white;
+    margin: 0;
+}
diff --git a/app.js b/app.js
@@ -0,0 +1,64 @@
+let inputTextBox = document.getElementById("input")
+let outputTextBox = document.getElementById("output")
+
+let errorTextBox = document.getElementById("json-error")
+
+let infoToggleButton = document.getElementById("info-toggle");
+let infoExpander = document.getElementById("info-expander");
+
+function convertToHcl() {
+
+    let output
+    try {
+        output = convert("hello", inputTextBox.value)
+        errorTextBox.textContent = ""
+        errorTextBox.style.display = null
+    } catch (e) {
+        output = "Error: " + e.message
+        errorTextBox.textContent = output
+        errorTextBox.style.display = "block"
+
+        if (e.message && e.message.includes("looks like CloudFormation code")) {
+            window.goatcounter.count({
+                path: 'error-trying-to-convert-cloudformation',
+                title: 'User is trying to convert CloudFormation code and its not supported',
+                event: true,
+            })
+        }
+
+        return
+    }
+    errorTextBox.value = ""
+
+    outputTextBox.textContent = output
+    Prism.highlightElement(outputTextBox)
+
+    window.goatcounter.count({
+        path: 'convert-button-clicked',
+        title: 'Convert-button was clicked',
+        event: true,
+    })
+
+}
+inputTextBox.addEventListener("input", convertToHcl)
+let h = document.location.hash
+let r = /content=(.+)/
+let m = r.exec(h)
+if (m) {
+    inputTextBox.value = decodeURIComponent(m[1])
+    window.goatcounter.count({
+        path: 'bookmarklet-used',
+        title: 'Page was loaded using the bookmarklet',
+        event: true,
+    })
+
+}
+convertToHcl()
+infoToggleButton.addEventListener("click",() => {
+    infoExpander.toggleAttribute("open")
+    window.goatcounter.count({
+        path: 'info-toggle-clicked',
+        title: 'Info-Toggle-button was clicked',
+        event: true,
+    })
+})
diff --git a/img/GitHub-Mark-Light-32px.png b/img/GitHub-Mark-Light-32px.png
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>iam-policy-json-to-terraform - Easily convert AWS IAM policies to Terraform HCL</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="This tool converts standard IAM policies in JSON format (like what you'd find in the AWS docs) into more terraform native aws_iam_policy_document data source code">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&family=Source+Code+Pro:wght@400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css"
+        referrerpolicy="no-referrer"
+        crossorigin="anonymous"
+    integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" />
+    <link href="app.css" rel="stylesheet"/>
+</head>
+<body>
+<section class="wrapper">
+    <h1 class="title">IAM JSON to Terraform HCL</h1>
+    <h1 id="info-toggle" class="infos">?</h1>
+    <details id="info-expander" class="details" open>
+        <summary>Learn more about this tool</summary>
+        <dl>
+            <dt>What is this?</dt>
+            <dd>This tool converts standard IAM policies in JSON format (like what you'd find in the AWS docs) into Terraform native aws_iam_policy_document data source code</dd>
+
+            <dt>I'm not a fan of the web or have a lot of files to convert, can I use this on the command line?</dt>
+            <dd>Yes you can! The tool exists as a <a href="https://github.com/flosell/iam-policy-json-to-terraform">CLI version</a> as well as a web version</dd>
+
+            <dt>I often copy-paste policies from documentation on the Web, is there an easier way to do this?</dt>
+            <dd>Yes! Drag this <a href="javascript:if(document.getSelection){s=document.getSelection();}else{s= '{}';};document.location='https://flosell.github.io/iam-policy-json-to-terraform/#content='+encodeURIComponent(s)">
+                bookmarklet
+            </a>to your bookmark bar to convert in one click, on any page</dd>
+        </dl>
+    </details>
+    <div class="main">
+        <textarea id="input" autofocus class="editor json-editor">
+{
+  "Version": "2012-10-17",
+  "Statement": []
+}</textarea>
+        <div id="json-error" class="error json-error"></div>
+        <span class="arrow">&gt</span>
+        <pre id="output" class="editor hcl-editor language-hcl" ></pre>
+        <div class="error hcl-error"></div>
+    </div>
+    <div class="footer">
+        <a href="https://github.com/flosell/iam-policy-json-to-terraform">
+            <img src="img/GitHub-Mark-Light-32px.png" alt="GitHub Logo"/> flosell/iam-policy-json-to-terraform
+        </a>
+    </div>
+</section>
+<script type="application/javascript">
+    window.Prism = window.Prism || {};
+    Prism.manual = true;
+</script>
+<script data-goatcounter="https://flosell.goatcounter.com/count"
+        src="https://gc.zgo.at/count.v2.js"
+        crossorigin="anonymous"
+        integrity="sha384-PeYXrhTyEaBBz91ANMgpSbfN1kjioQNPHNDbMvevUVLJoWrVEjDCpKb71TehNAlj"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js"
+        referrerpolicy="no-referrer"
+        crossorigin="anonymous"
+        integrity="sha512-TbHaMJHEmRBDf9W3P7VcRGwEmVEJu7MO6roAE0C4yqoNHeIVo3otIX3zj1DOLtn7YCD+U8Oy1T9eMtG/M9lxRw=="></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-hcl.min.js"
+        referrerpolicy="no-referrer"
+        crossorigin="anonymous"
+        integrity="sha512-swbu7APQjzOJzQrot5PC5xlX+6Q45sZZpjbnUeabv/mjhF35bcYOWnaIHN6N7cxZjSVM/8kH2Vg+4vBsOnNxKw=="></script>
+<script src="web.js"></script>
+<script type="application/javascript" src="app.js"></script>
+</body>
+</html>
diff --git a/web.js b/web.js