Skip to content

Commit

Permalink
refactor: bundling strategy (saurabhdaware#1)
Browse files Browse the repository at this point in the history 
* feat: create 2 bundles

* feat: add defer for scripts

* version bump
  • Loading branch information
@saurabhdaware
saurabhdaware authored Nov 8, 2024
1 parent 8c601ec commit 506c13d
Show file tree
Hide file tree
Showing 8 changed files with 214 additions and 251 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules
dist
.DS_Store
dump
dump
static
180 changes: 4 additions & 176 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,182 +116,10 @@ <h3>In Frameworks</h3>
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<script src="./web-component/card.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://unpkg.com/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
<script>
const generateButton = document.querySelector("button.generate-button");
const handle = document.querySelector("input#handle");
const showDescriptionEl = document.querySelector("input#show-description");
const showBannerEl = document.querySelector("input#show-banner");
const code = document.querySelector("code");

const searchParams = new URLSearchParams(window.location.search);
const handleParam = searchParams.get('handle');
if (handleParam) {
handle.value = handleParam;
}

const setShare = (handle) => {
const shareText = encodeURIComponent(`I just created my Bluesky Widget Card 🦋 <br/><br/>Check it out and create yours at-<br/><br/> https://bsky-widget.saurabhdaware.in/?handle=${handle}`);
document.querySelector('#bsky-share-button').href = `https://bsky.app/intent/compose?text=${shareText}`;
}

const appendHandleParam = (handleValue) => {
// Get the current URL
const url = new URL(window.location.href);

// Set or update the 'handle' parameter
url.searchParams.set('handle', handleValue);

// Update the URL in the address bar without reloading the page
window.history.pushState({}, '', url);
}

function dedent(text) {
const lines = text.split("\n");

const indentLevel = Math.min(
...lines
.filter((line) => line.trim())
.map((line) => line.match(/^(\s*)/)[0].length)
);

// Remove the common indentation from each line
return lines
.map((line) => line.slice(indentLevel)) // Remove leading whitespace
.join("\n") // Join lines back together
.trim(); // Trim any leading or trailing whitespace
}

const setWidgetPreview = () => {
const widget = document.querySelector("bsky-widget");
widget.setAttribute("data-handle", handle.value);
widget.setAttribute("data-show-banner", showBannerEl.checked);
widget.setAttribute("data-show-description", showDescriptionEl.checked);

let additionalProps = '';
if (!showDescriptionEl.checked) {
additionalProps += `\n data-show-description="${showDescriptionEl.checked}"`
}

if (!showBannerEl.checked) {
additionalProps += `\n data-show-banner="${showBannerEl.checked}"`
}

code.innerHTML = dedent(`
&lt;!-- Paste in your CSS to avoid layout shift --&gt;
&lt;style&gt;
bsky-widget {
min-height: 400px;
width: 350px;
}
&lt;/style&gt;
&lt;!-- Paste wherever you want to render the card --&gt;
&lt;bsky-widget
data-handle="${handle.value}"${additionalProps}
&gt;
&lt;/bsky-widget&gt;
&lt;!-- Paste before end of body --&gt;
&lt;script
src="https://unpkg.com/bsky-widget@~0.0/dist/index.js"
type="module"
&gt;
&lt;/script&gt;`);
code.removeAttribute("data-highlighted");
setShare(handle.value);


const boundCheckInterval = setInterval(() => {
console.log(widget.dataset.rendered);
if (widget.dataset.rendered === 'true') {
clearInterval(boundCheckInterval);

setTimeout(() => {
const widgetBounds = widget.getClientRects()[0];
const height = Math.round(widgetBounds.height);
const width = Math.round(widgetBounds.width);
console.log(widgetBounds, height, width);
code.innerHTML = code.innerHTML.replace('400px', `${height}px`).replace('350px', `${width}px`);
code.removeAttribute("data-highlighted");
hljs.highlightBlock(document.querySelector("code"));
}, 500);
}
}, 100)

hljs.highlightBlock(document.querySelector("code"));
};

const copyCode = () => {
var copyText = document.querySelector("code");
const testIp = document.createElement('textarea');
testIp.style.position = 'fixed';
testIp.style.top = '-10000px';
document.body.append(testIp);
testIp.value = copyText.innerText.replace(/\n/g, '\r\n');
testIp.select();
testIp.setSelectionRange(0, 99999)
document.execCommand("copy");
}

document.querySelector('form#generator-form').addEventListener("submit", (e) => {
e.preventDefault();
setWidgetPreview();
appendHandleParam(handle.value);
});

document.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
checkbox.addEventListener('change', () => {
setWidgetPreview();
})
})

handle.addEventListener('blur', () => {
setWidgetPreview();
appendHandleParam(handle.value);
})

document.querySelector('button.copy-button').addEventListener('click', () => {
copyCode();
document.querySelector('button.copy-button').innerText = 'Copied';
setTimeout(() => {
document.querySelector('button.copy-button').innerText = 'Copy';
}, 2000);
})

hljs.initHighlightingOnLoad();
setWidgetPreview();


window.StackBlitzSDK.embedProjectId(
'stackblitz-vanilla-project',
'bsky-widget-vanilla-project',
{
forceEmbedLayout: true,
openFile: 'index.html',
theme: 'light',
clickToLoad: true,
hideExplorer: true,
hideNavigation: true,
}
);

window.StackBlitzSDK.embedProjectId(
'stackblitz-framework-project',
'bsky-widget-vue',
{
forceEmbedLayout: true,
openFile: 'package.json,src/App.vue',
theme: 'light',
clickToLoad: true,
hideExplorer: true,
hideNavigation: true,
}
);

</script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script defer src="https://unpkg.com/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
<script type="module" src="./web-component/index.js"></script>
<script type="module" src="./playground/playground.js"></script>
</body>

</html>
13 changes: 6 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
{
"name": "bsky-widget",
"version": "0.0.8",
"version": "0.0.9",
"description": "Profile Card / Widget for Bluesky",
"main": "dist/index.js",
"module": "dist/index.js",
"type": "module",
"homepage": "https://bsky-widget.saurabhdaware.in/",
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "vite build:lib && vite build:playground",
"build:lib": "LIB=true vite build",
"build:playground": "vite build",
"test": "echo \"Error: no test specified\" && exit 1",
"prepublishOnly": "pnpm build"
"prepublishOnly": "pnpm build:lib"
},
"files": [
"dist/index.js"
Expand All @@ -20,9 +22,6 @@
"license": "MIT",
"devDependencies": {
"abell": "1.0.0-beta.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"vite": "^5.4.10",
"vite-plugin-jsx-to-html": "^0.0.2"
"vite": "^5.4.10"
}
}
Loading

0 comments on commit 506c13d

Please sign in to comment.