Fetch Gist API, parse the Gist description for titles and tags (via Lepton Snippet Manager) and save it to sessionStorage to not hit the API too often.
Forked from vsamaru/alpine-js-fetch-data-on-x-init.markdown
Created
March 15, 2023 18:37
-
-
Save pablojimeno/a8fca0dd0209841670a6b43c2829858f to your computer and use it in GitHub Desktop.
Alpine.js fetch data on `x-init`
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div | |
class="h-full bg-gray-200 text-gray-800 p-4 lg:p-8" | |
x-data="gistsData()" | |
x-init="init()" | |
> | |
<header class="flex items-center mb-3"> | |
<h1 class="flex-grow" x-text="title"></h1> | |
<button | |
class="py-2 px-4 rounded bg-blue-500 text-white flex-grow-0" | |
type="button" | |
x-on:click="reload()" | |
> | |
Reload | |
</button> | |
</header> | |
<ul class="list-reset flex flex-col"> | |
<template x-for="gist in gists" :key="gist.id"> | |
<li class="relative -mb-px block border p-4 border-grey"> | |
<a x-bind:href="gist.html_url" x-text="gist.parsed.title" class="font-bold"></a><br> | |
<small x-text="gist.parsed.description"></small> | |
</li> | |
</template> | |
</ul> | |
<p class="mt-3 text-xs"> | |
<a href="https://developer.github.com/v3/gists/" target="_blank">API</a> · | |
<a href="https://github.com/alpinejs/alpine" target="_blank">Alpine.js</a> · | |
<a href="https://tailwindcss.com/docs" target="_blank">Tailwind</a> · | |
<a href="https://tailwindcomponents.com/component/bootstrap-4-list-group-clone" target="_blank">Tailwind Components</a> · | |
<a href="https://github.com/hackjutsu/Lepton" target="_blank">Lepton Snipped Management</a> | |
</p> | |
</div> | |
<div | |
class="h-full bg-gray-200 text-gray-800 p-4 lg:p-8" | |
x-data="gistsData()" | |
x-init="init()" | |
> | |
<header class="flex items-center mb-3"> | |
<h1 class="flex-grow" x-text="title"></h1> | |
<button | |
class="py-2 px-4 rounded bg-blue-500 text-white flex-grow-0" | |
type="button" | |
x-on:click="reload()" | |
> | |
Reload | |
</button> | |
</header> | |
<ul class="list-reset flex flex-col"> | |
<template x-for="gist in gists" :key="gist.id"> | |
<li class="relative -mb-px block border p-4 border-grey"> | |
<a x-bind:href="gist.html_url" x-text="gist.parsed.title" class="font-bold"></a><br> | |
<small x-text="gist.parsed.description"></small> | |
</li> | |
</template> | |
</ul> | |
<p class="mt-3 text-xs"> | |
<a href="https://developer.github.com/v3/gists/" target="_blank">API</a> · | |
<a href="https://github.com/alpinejs/alpine" target="_blank">Alpine.js</a> · | |
<a href="https://tailwindcss.com/docs" target="_blank">Tailwind</a> · | |
<a href="https://tailwindcomponents.com/component/bootstrap-4-list-group-clone" target="_blank">Tailwind Components</a> · | |
<a href="https://github.com/hackjutsu/Lepton" target="_blank">Lepton Snipped Management</a> | |
</p> | |
</div> | |
<script> | |
function gistsData() { | |
return { | |
title: 'Latest Gists', | |
gists: [], | |
reload() { | |
sessionStorage.removeItem("gists"); | |
this.gists = []; | |
this.init(); | |
}, | |
init() { | |
// Testdata, in case I hit my 60 calls per hour | |
/*let gists = [ | |
{ | |
"id": "8f6af49ffe693c15faca67a7f3bf1a31", | |
"html_url": "https://gist.github.com/8f6af49ffe693c15faca67a7f3bf1a31", | |
"description": "Test" | |
} | |
];*/ | |
// Check if sessionData holds anything, so we don't need to hit the api | |
const gists = JSON.parse(sessionStorage.getItem("gists")); | |
if(gists){ | |
// make it accessible to x-data | |
this.gists = gists; | |
console.log('sessionStorage', gists); | |
return; | |
} | |
console.log(new leptonParser().parse('[bla] #blub')) | |
// get gists and parse the description field | |
fetch('https://api.github.com/users/marcus-at-localhost/gists') | |
.then(response => response.json()) | |
.then(response => { | |
console.log('fetched',response); | |
// I could use collect.js to manipulate the response further. | |
let gists = response.map((item) => { | |
// parser: https://codepen.io/localhorst/pen/ZEbqVZd | |
item.parsed = new leptonParser().parse(item.description); | |
return item; | |
}); | |
this.gists = gists; | |
sessionStorage.setItem("gists",JSON.stringify(gists)); | |
//console.log(this,response) | |
}); | |
} | |
}; | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://codepen.io/localhorst/pen/ZEbqVZd"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/collect.js/4.25.0/collect.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.3.5/dist/alpine.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment