How to use Netlify identity widget in R blogdown

chenx2018 commented 2 years ago

R blogdown is super convenient to publish Rmarkdown report using netlify.

In order to build a private blog and control access, I found netlify identity widget could be a solution. Useful reference are:

From the README file in netlify identity widget

"You can add controls for the widget with HTML:

<!DOCTYPE html>
<html>
<head>
  <title>A static website</title>

  <!-- include the widget -->
  <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Add a menu:
   Log in / Sign up - when the user is not logged in
   Username / Log out - when the user is logged in
  -->
  <div data-netlify-identity-menu></div>

  <!-- Add a simpler button:
    Simple button that will open the modal.
  -->
  <div data-netlify-identity-button>Login with Netlify Identity</div>
</body>
</html>

You can use this global object like this:

// Open the modal
netlifyIdentity.open();

// Get the current user:
// Available after on('init') is invoked
const user = netlifyIdentity.currentUser();

// Bind to events
netlifyIdentity.on('init', user => console.log('init', user));
netlifyIdentity.on('login', user => console.log('login', user));
netlifyIdentity.on('logout', () => console.log('Logged out'));
netlifyIdentity.on('error', err => console.error('Error', err));
netlifyIdentity.on('open', () => console.log('Widget opened'));
netlifyIdentity.on('close', () => console.log('Widget closed'));

// Unbind from events
netlifyIdentity.off('login'); // to unbind all registered handlers
netlifyIdentity.off('login', handler); // to unbind a single handler

// Close the modal
netlifyIdentity.close();

// Log out the user
netlifyIdentity.logout();

// Refresh the user's JWT
// Call in on('login') handler to ensure token refreshed after it expires (1hr)  
// Note: this method returns a promise.
netlifyIdentity.refresh().then((jwt)=>console.log(jwt))

// Change language
netlifyIdentity.setLocale('en');

Which blogdown file should I add above code into?

How to integrate netlify identity widget into R blogdown?

Thanks a lot!

yihui commented 2 years ago

Please do not ignore the issue guide, which asked you to mention cross-posting if you did: https://stackoverflow.com/q/70620858/559676

This question is out of the scope of blogdown but a question purely on Hugo and Netlify. If no one replies you on Stack Overflow, you may try the Hugo forum, but please do include a reproducible example (which is also what the issue guide required but you didn't provide). The short answer is that you add these code to a certain Hugo template file. Without you providing an example, it's hard to tell you which file.

chenx2018 commented 2 years ago

Thanks for your suggestion! 感谢谢大大回复～

chenx2018 commented 2 years ago

UPDATE:

I found two approaches might be helpful:

netlify-plugin-password-protection, which applies staticrypt.
Another tutorial: Password-protected pages on Netlify.

For a reproducible example, the Hugo Theme I used in blogdown is pulp, the file structure is the following:

.
└── pulp
    ├── .editorconfig
    ├── .eslintrc.json
    ├── .gitignore
    ├── LICENSE.md
    ├── README.md
    ├── archetypes
    │   └── default.md
    ├── assets
    │   ├── css
    │   │   ├── markdown-dark.css
    │   │   ├── markdown.css
    │   │   ├── style-dark.css
    │   │   ├── style.css
    │   │   └── syntax-highlight.css
    │   └── js
    │       ├── jquery-3.3.1.min.js
    │       ├── jquery.mark.es6.min.js
    │       ├── lunr.js
    │       └── search.js
    ├── exampleSite
    │   ├── .gitignore
    │   ├── config.toml
    │   ├── content
    │   │   └── blog
    │   │       ├── emoji-support.md
    │   │       ├── markdown-syntax.md
    │   │       ├── math-typesetting.mmark
    │   │       ├── placeholder-text.md
    │   │       └── rich-content.md
    │   └── static
    │       ├── css
    │       │   └── custom.css
    │       ├── img
    │       │   ├── avatar.jpg
    │       │   └── favicon.ico
    │       └── js
    │           └── custom.js
    ├── images
    │   ├── logo.png
    │   ├── screenshot.png
    │   └── tn.png
    ├── layouts
    │   ├── 404.html
    │   ├── _default
    │   │   ├── baseof.html
    │   │   ├── list.html
    │   │   ├── list.json
    │   │   ├── single.html
    │   │   └── terms.html
    │   ├── index.html
    │   └── partials
    │       ├── footer.html
    │       ├── head.html
    │       └── header.html
    ├── package.json
    ├── resources
    │   └── _gen
    │       └── assets
    │           ├── css
    │           │   ├── style0.css_d11fe7b62c27961c87ecd0f2490357b9.content
    │           │   └── style0.css_d11fe7b62c27961c87ecd0f2490357b9.json
    │           └── js
    │               ├── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.content
    │               └── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.json
    ├── static
    │   ├── .DS_Store
    │   ├── categories
    │   │   └── img
    │   │       ├── avatar.png
    │   │       ├── clear.png
    │   │       ├── favicon.ico
    │   │       └── search.png
    │   └── img
    │       ├── avatar-border.svg
    │       ├── avatar.jpg
    │       ├── bu.png
    │       ├── clear.png
    │       ├── favicon.ico
    │       └── search.png
    ├── theme.toml
    └── yarn.lock

rstudio / blogdown

How to use Netlify identity widget in R blogdown #682