Skip to content
Permalink
Browse files

add copy to code block, following https://www.dannyguo.com/blog/how-t…

  • Loading branch information...
nguyenkims committed Aug 20, 2019
1 parent 2bb8a5f commit 1b81629f867f74089564ea3e0005f5da251bc412
@@ -6,4 +6,45 @@ figcaption {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.7rem;
}
}

// Styling for copy button
// https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-block
.copy-code-button {
color: #272822;
background-color: #FFF;
border-color: #272822;
border: 2px solid;
border-radius: 3px 3px 0px 0px;

/* right-align */
display: block;
margin-left: auto;
margin-right: 0;

margin-bottom: -2px;
padding: 3px 8px;
font-size: 0.8em;
}

.copy-code-button:hover {
cursor: pointer;
background-color: #F2F2F2;
}

.copy-code-button:focus {
/* Avoid an ugly focus outline on click in Chrome,
but darken the button for accessibility.
See https://stackoverflow.com/a/25298082/1481479 */
background-color: #E6E6E6;
outline: 0;
}

.copy-code-button:active {
background-color: #D9D9D9;
}

.highlight pre {
/* Avoid pushing up the copy buttons. */
margin: 0;
}
@@ -16,7 +16,7 @@ Let's start by a quick example using SimpleLogin SDK.

a. Create a `index.html` file that has a "Login with SimpleLogin" button

{{< highlight html "linenos=table,hl_lines=8 12 17" >}}
```html
<button id="btn-simplelogin">
Login with SimpleLogin
</button>
@@ -44,7 +44,7 @@ document.getElementById("btn-simplelogin").onclick = function(e) {
})
}
</script>
{{< / highlight >}}
```

b. Run a local server, you can use any static server:

@@ -39,7 +39,7 @@ os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

When user clicks on **Login with SimpleLogin**, user gets redirected to the SimpleLogin authorization page. This is done using the `/login` endpoint. The `state` is necessary to defend against [CSRF attack](https://www.shellvoide.com/hacks/cross-site-request-forgery-attack-on-oauth2-protocol/).

{{< highlight python "linenos=table,hl_lines=11-13 16" >}}
```python
import requests_oauthlib, os, flask
@app.route("/login")
@@ -58,13 +58,13 @@ def login():
flask.session["oauth_state"] = state
return flask.redirect(redirect_url)
{{< / highlight >}}
```

## Callback endpoint

When user approves sharing data with your app, they get redirected back to the `redirect_uri` in the previous step. This route is handled by an endpoint that receives the `code` and exchanges for `access token`. The `access token` is then used to exchange for user info:

{{< highlight python "linenos=table,hl_lines=7-11 13" >}}
```python
@app.route("/callback")
def callback():
sl = requests_oauthlib.OAuth2Session(
@@ -86,8 +86,7 @@ def callback():
Your email is {user_info["email"]} <br>
And your avatar: <img src="{user_info['avatar_url']}">
"""
{{< / highlight >}}

```

## Run the App and enjoy!

@@ -2,7 +2,7 @@
headless: true
---

- [Introduction]({{< relref "/introduction.md" >}})
- [Introduction]({{< relref "/" >}})
- [App]({{< relref "/docs/app.md" >}})
- *Guides*
- [Frontend-JS]({{< relref "/docs/frontend-js.md" >}})
@@ -0,0 +1,52 @@
// For copy button
// https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-block
<script>
function addCopyButtons(clipboard) {
document.querySelectorAll('pre > code').forEach(function (codeBlock) {
var button = document.createElement('button');
button.className = 'copy-code-button';
button.type = 'button';
button.innerText = 'Copy';
button.addEventListener('click', function () {
clipboard.writeText(codeBlock.innerText).then(function () {
/* Chrome doesn't seem to blur automatically,
leaving the button in a focused state. */
button.blur();
button.innerText = 'Copied!';
setTimeout(function () {
button.innerText = 'Copy';
}, 2000);
}, function (error) {
button.innerText = 'Error';
});
});
var pre = codeBlock.parentNode;
if (pre.parentNode.classList.contains('highlight')) {
var highlight = pre.parentNode;
highlight.parentNode.insertBefore(button, highlight);
} else {
pre.parentNode.insertBefore(button, pre);
}
});
}
if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard);
} else {
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js';
script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=';
script.crossOrigin = 'anonymous';
script.onload = function () {
addCopyButtons(clipboard);
};
document.body.appendChild(script);
}
</script>

1 comment on commit 1b81629

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.