Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<h1 class="text-center">Example</h1>
<div class="list">
    {{#each results as result @id}}
      <Card result={{result}} />
    {{/each}}
</div>

<script>
	import Card from './Card.html';
	
	const SEARCH = '//api.github.com/search/repositories';
	
	export default {
		async oncreate() {
			let res = await fetch(`${SEARCH}?q=svelte`),
			json = await res.json();

			this.set({results: json && json.items || []});
		},
		data() {
			return {
				results: ''
			}
		},
		components: {
			Card
		}
	}
</script>

<style>
	.text-center {
		text-align: center;
	}
</style>

Card.html

<div class="card">
    <a href={{result.html_url}} target="_blank">
      {{result.full_name}}
    </a>
    🌟<strong>{{result.stargazers_count}}</strong>
		<p>{{result.description}}</p>
	</div>

<style>
	.card {
		padding: 10px; 
		margin: 10px; 
		background: white; 
		box-shadow: 0 1px 5px rgba(0,0,0,0.5);
	}
</style>

data.json

{
  "name": "world"
}