<!-- thumbnail: https://example.com/some-image.png -->
<!-- version: 1.0 -->
<!-- tag: website -->
<!-- excerpt: Demo of Obsidian Digital Garden plus Eleventy Serverless OAuth -->

## Screenshot / Code Snippet

[![Stack Overflow user infortion displayed on Obisidian Digital Garden plugin plus Eleventy Serverless generated webpage][1]][1]

## About

This is a *proof of concept* / "minimal, complete, verifiable example" of adding the Eleventy Serverless plugin to an instance of Obisidian Digital Garden's (ODG) template repo for using a Stack Overflow account to **log in**.

ODG is a community plugin for [Obsidian](https://obsidian.md), a cross-platform note-taking app that uses markdown for note files.

### License

TBD

### Download

- Website: https://demo-dg-oauth.netlify.app
- GitHub Repository: https://github.com/rubenrivera/demo-dg-oauth

### Platform

Web Browsers: Chrome, Firefox, Safari. Other web browsers like Brave and Edge might work too.

## Contact

I created this app using several tools.

## Code

- GitHub
- Netlify
- Eleventy
- Node.js
- Nunjucks
- JavaScript
- HTML
- SCSS
- CSS

## Highlights

1. Deploy a site using the **Deploy to Netlify** button from the **Obsidian Digital Garden** community plugin documentation. If you want to run this from anywhwere, grab the site URL.
2. Register the app on stackapps.com. Get the **client ID**, **client secret**, and **key**. For local development/testing, set **localhost** as the OAuth domain.
3. Add the **client id**, **client secret** and **key** from the previous step as environment variables to the site settings on Netlify.
4. Add the Eleventy Serverless plugin to `userSetup.js`
5. Add the authentication files from the Eleventy Serverless OAuth demo (`Netlify/functions/dynamic/index.js`, `Netlify/functions/Utils/*`, `Netlify/functions/auth-before.js` and `Netlify/functions/auth-callback.js`)
6. Add `index.njk` and `secure.njk` from the Eleventy Serverless OAuth demo to `/src/site/`.
7. Edit the files from the previous steps.
8. Edit `.gitignore` and `netlify.toml`.
9. Install the modules required by the Eleventy Serverles  OAuth demo (cookie, simple-outh2 and node-fetch). Tip use  `npm ci` instead of `npm install` / `npm i`.
10. To run locally, install `netlify-cli`, then run once `netlify link` to run the serverless functions on Netlify servers, then run `netlify dev` on the project root directory to build and run a local web hosting server. Wait for the **Netlify CLI** to give a message including the  URL to be used, i.e., `http://localhost:8888`.
11. [Workaround] Edit `/src/site/_includes/components/pageheader.njk` to add a condition to "favicons" run only on the build phase (not when generating pages by the Serverless functions).


# Related

- https://stackapps.com/q/10533/105187
- https://stackapps.com/q/10534/105187


  [1]: https://i.sstatic.net/O4QXL.png