indiepen
indiepen copied to clipboard
yetanother-blog
Not independent?
It says it's independent. When using the code generator it's like below:
<iframe class="indiepen" src="https://indiepen.tech/embed/?url=https%3A%2F%2Fexample.com%2Fasdasdsa&tab=html" style="width: 100%; overflow: hidden; display: block; border: 0;" title="Indiepen Embed" loading="lazy" width="100%" height="450"></iframe>
You use https://indiepen.tech. So if you suddenly don't want to maintain it anymore and remove the domain you will kill all the projects that depends on it in an instance.
Also you may add a purchase subscription because this way you really lock people in with a dependency that should not really be needed.
Fair point, for us it's independent because it's open-source, we share what we do and how we implement things. This approach is different to other solutions on the market.
But I agree, we have to do a better job in providing documentation for self-hosting or maybe even provide Indiepen as a web component or something like this so you don't rely on our hosting.
So far, we developed Indiepen for our own blog and did the extra mile to provide a code snippet generator so more people can benefit from a cookieless embed.
Feel free to host Indiepen on your own domain, fork it or do whatever you want. We are here to assist you.
Have a nice day 🙂
I love the initiative! 👍
I'm running a simple Jekyll blog where I wanted to use it, and took a stab at making it "independent". With only some minor changes it's possible to build a single static HTML file which can easily be included in any project (i.e. no need to host the entire app):
- Snowpack build: disable generating source maps:
--- a/snowpack.config.js +++ b/snowpack.config.js @@ -10,6 +10,7 @@ module.exports = { bundle: true, minify: true, target: 'es2018', + sourcemap: false, }, plugins: ['snowpack-plugin-relative-css-urls'], }; - Replace the custom font-face with Arial Black:
--- a/src/embed/styles.css +++ b/src/embed/styles.css @@ -1,19 +1,11 @@ @import '/assets/prismjs/prism-tomorrow.css'; @import './navigation/navigation.css'; -@font-face { - font-family: 'Inter'; - font-style: normal; - font-display: swap; - font-weight: 900; - src: url(/embed/font/inter-latin-900-normal-subset.woff2) format('woff2'); - unicode-range: U+43-45, U+48-4A, U+4C-4E, U+50, U+52-55; -} :root { --grey-900: rgb(38, 38, 38); --grey-700: rgb(88, 88, 88); - font-family: Inter, sans-serif; + font-family: Arial Black, sans-serif; line-height: 1.5; font-size: 1rem; } - Inline the CSS and JS directly in
embed/index.html:--- a/src/embed/index.html +++ b/src/embed/index.html @@ -3,10 +3,12 @@ <head> <meta charset="utf-8" /> <title>Indiepen Embed</title> - <link rel="stylesheet" href="/embed/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> + <style> + @import "/embed/styles.css"; + </style> <nav class="navigation"> <strong role="banner"> <a href="https://indiepen.tech" target="_blank" rel="noopener"> @@ -131,6 +133,8 @@ </ul> </div> </div> - <script type="module" src="/embed/main.js"></script> + <script type="module"> + import '/embed/main.js'; + </script> </body> </html> - Build it (
npm run build) and copy the generatedbuild/embed/index.htmlto your project. - To use it:
<iframe src="<path to the copied Indiepen index.html>?url=<path to your example>" loading="lazy" width="100%" height="450"></iframe>
Would be awesome if such a static single-file HTML page could be generated and published for download as part of the build process in this repo.
