diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.svelte | 62 | ||||
| -rw-r--r-- | src/assets/svelte.png | bin | 0 -> 5185 bytes | |||
| -rw-r--r-- | src/lib/Counter.svelte | 12 | ||||
| -rw-r--r-- | src/lib/Tailwind.css | 3 | ||||
| -rw-r--r-- | src/lib/hmr-stores.js | 29 | ||||
| -rw-r--r-- | src/main.js | 8 | ||||
| -rw-r--r-- | src/routes/About.svelte | 37 | ||||
| -rw-r--r-- | src/routes/Blog.svelte | 236 | ||||
| -rw-r--r-- | src/routes/Home.svelte | 195 |
9 files changed, 582 insertions, 0 deletions
diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..f56f6bb --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,62 @@ +<script> + import "./lib/Tailwind.css"; + import { Router, Link, Route } from "svelte-routing"; + import Home from "./routes/Home.svelte"; + import About from "./routes/About.svelte"; + import Blog from "./routes/Blog.svelte"; + + export let url = ""; +</script> + +<Router {url}> + <header class="text-gray-600 body-font"> + <div + class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center" + > + <a + class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" + > + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" + viewBox="0 0 24 24" + > + <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /> + </svg> + <span class="ml-3 text-xl">Tailblocks</span> + </a> + <nav + class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center" + > + <Link class="mr-5 hover:text-gray-900" to="/">Home</Link> + <Link class="mr-5 hover:text-gray-900" to="about">About</Link> + <Link class="mr-5 hover:text-gray-900" to="blog">Blog</Link> + </nav> + <button + class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0" + >Button + <svg + fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + class="w-4 h-4 ml-1" + viewBox="0 0 24 24" + > + <path d="M5 12h14M12 5l7 7-7 7" /> + </svg> + </button> + </div> + </header> + <div> + <Route path="blog" component={Blog} /> + <Route path="about" component={About} /> + <Route path="/"><Home /></Route> + </div> +</Router> diff --git a/src/assets/svelte.png b/src/assets/svelte.png Binary files differnew file mode 100644 index 0000000..e673c91 --- /dev/null +++ b/src/assets/svelte.png diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte new file mode 100644 index 0000000..e417505 --- /dev/null +++ b/src/lib/Counter.svelte @@ -0,0 +1,12 @@ +<script> + import { getStore } from './hmr-stores'; + export let id; + const count = getStore(id, 0); + export const increment = () => { + $count += 1 + }; +</script> + +<button class="px-8 py-4 w-52 text-red-500 bg-red-200 rounded-full" {id} on:click={increment}> + Clicks: {$count} +</button>
\ No newline at end of file diff --git a/src/lib/Tailwind.css b/src/lib/Tailwind.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/src/lib/Tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities;
\ No newline at end of file diff --git a/src/lib/hmr-stores.js b/src/lib/hmr-stores.js new file mode 100644 index 0000000..9cd6d0e --- /dev/null +++ b/src/lib/hmr-stores.js @@ -0,0 +1,29 @@ +// Customized HMR-safe stores +// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js +import { writable } from 'svelte/store' + +/** + * @type { Record<string, import('svelte/store').Writable<any>> } + */ +let stores = {} + +/** + * @template T + * @param { string } id + * @param { T } initialValue + * @returns { import('svelte/store').Writable<T> } + */ +export function getStore(id, initialValue) { + return stores[id] || (stores[id] = writable(initialValue)) +} + +// preserve the store across HMR updates +if (import.meta.hot) { + if (import.meta.hot.data.stores) { + stores = import.meta.hot.data.stores + } + import.meta.hot.accept() + import.meta.hot.dispose(() => { + import.meta.hot.data.stores = stores + }) +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..5dbcfa9 --- /dev/null +++ b/src/main.js @@ -0,0 +1,8 @@ +import App from './App.svelte' + +const app = new App({ + target: document.body, + // hydrate: true, +}) + +export default app diff --git a/src/routes/About.svelte b/src/routes/About.svelte new file mode 100644 index 0000000..8978723 --- /dev/null +++ b/src/routes/About.svelte @@ -0,0 +1,37 @@ +<script></script> + +<section class="text-gray-600 body-font"> + <div + class="container mx-auto flex px-5 py-24 items-center justify-center flex-col" + > + <img + class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" + alt="hero" + src="https://dummyimage.com/720x600" + /> + <div class="text-center lg:w-2/3 w-full"> + <h1 + class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900" + > + Microdosing synth tattooed vexillologist + </h1> + <p class="mb-8 leading-relaxed"> + Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing + tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt + ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over + meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af + fingerstache pitchfork. + </p> + <div class="flex justify-center"> + <button + class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg" + >Button</button + > + <button + class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg" + >Button</button + > + </div> + </div> + </div> +</section> diff --git a/src/routes/Blog.svelte b/src/routes/Blog.svelte new file mode 100644 index 0000000..3a7fe84 --- /dev/null +++ b/src/routes/Blog.svelte @@ -0,0 +1,236 @@ +<script></script> + +<section class="text-gray-600 body-font"> + <div class="container px-5 py-24 mx-auto"> + <div class="flex flex-wrap -m-4"> + <div class="p-4 md:w-1/3"> + <div + class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden" + > + <img + class="lg:h-48 md:h-36 w-full object-cover object-center" + src="https://dummyimage.com/720x400" + alt="blog" + /> + <div class="p-6"> + <h2 + class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1" + > + CATEGORY + </h2> + <h1 class="title-font text-lg font-medium text-gray-900 mb-3"> + The Catalyzer + </h1> + <p class="leading-relaxed mb-3"> + Photo booth fam kinfolk cold-pressed sriracha leggings jianbing + microdosing tousled waistcoat. + </p> + <div class="flex items-center flex-wrap "> + <a + class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0" + >Learn More + <svg + class="w-4 h-4 ml-2" + viewBox="0 0 24 24" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M5 12h14" /> + <path d="M12 5l7 7-7 7" /> + </svg> + </a> + <span + class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200" + > + <svg + class="w-4 h-4 mr-1" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 24 24" + > + <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /> + <circle cx="12" cy="12" r="3" /> + </svg>1.2K + </span> + <span + class="text-gray-400 inline-flex items-center leading-none text-sm" + > + <svg + class="w-4 h-4 mr-1" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 24 24" + > + <path + d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" + /> + </svg>6 + </span> + </div> + </div> + </div> + </div> + <div class="p-4 md:w-1/3"> + <div + class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden" + > + <img + class="lg:h-48 md:h-36 w-full object-cover object-center" + src="https://dummyimage.com/721x401" + alt="blog" + /> + <div class="p-6"> + <h2 + class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1" + > + CATEGORY + </h2> + <h1 class="title-font text-lg font-medium text-gray-900 mb-3"> + The 400 Blows + </h1> + <p class="leading-relaxed mb-3"> + Photo booth fam kinfolk cold-pressed sriracha leggings jianbing + microdosing tousled waistcoat. + </p> + <div class="flex items-center flex-wrap"> + <a + class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0" + >Learn More + <svg + class="w-4 h-4 ml-2" + viewBox="0 0 24 24" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M5 12h14" /> + <path d="M12 5l7 7-7 7" /> + </svg> + </a> + <span + class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200" + > + <svg + class="w-4 h-4 mr-1" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 24 24" + > + <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /> + <circle cx="12" cy="12" r="3" /> + </svg>1.2K + </span> + <span + class="text-gray-400 inline-flex items-center leading-none text-sm" + > + <svg + class="w-4 h-4 mr-1" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 24 24" + > + <path + d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" + /> + </svg>6 + </span> + </div> + </div> + </div> + </div> + <div class="p-4 md:w-1/3"> + <div + class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden" + > + <img + class="lg:h-48 md:h-36 w-full object-cover object-center" + src="https://dummyimage.com/722x402" + alt="blog" + /> + <div class="p-6"> + <h2 + class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1" + > + CATEGORY + </h2> + <h1 class="title-font text-lg font-medium text-gray-900 mb-3"> + Shooting Stars + </h1> + <p class="leading-relaxed mb-3"> + Photo booth fam kinfolk cold-pressed sriracha leggings jianbing + microdosing tousled waistcoat. + </p> + <div class="flex items-center flex-wrap "> + <a + class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0" + >Learn More + <svg + class="w-4 h-4 ml-2" + viewBox="0 0 24 24" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M5 12h14" /> + <path d="M12 5l7 7-7 7" /> + </svg> + </a> + <span + class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200" + > + <svg + class="w-4 h-4 mr-1" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 24 24" + > + <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /> + <circle cx="12" cy="12" r="3" /> + </svg>1.2K + </span> + <span + class="text-gray-400 inline-flex items-center leading-none text-sm" + > + <svg + class="w-4 h-4 mr-1" + stroke="currentColor" + stroke-width="2" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 24 24" + > + <path + d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" + /> + </svg>6 + </span> + </div> + </div> + </div> + </div> + </div> + </div> +</section> diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte new file mode 100644 index 0000000..8092ee1 --- /dev/null +++ b/src/routes/Home.svelte @@ -0,0 +1,195 @@ +<script lang="ts"> + // interface PokemonsJson { + // count: number; + // next?: string; + // previous?: string; + // results: [{ name: string; url: string }]; + // } + const getPokemons = async () /*: Promise<PokemonsJson>*/ => { + const ps = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100").then( + (res) => res.json() + ); + console.log(ps); + const pokemons = []; + for (const poke of ps.results) { + const name = poke.name; + const pokeData = await fetch( + "https://pokeapi.co/api/v2/pokemon/" + name + ).then((res) => res.json()); + + console.log(); + pokemons.push({ name, pokeData }); + } + return pokemons; + }; + + let pokemonName = ""; + function filterPokemons(pokemons, pokeName /*: { name: string }[]*/) { + return pokemons.filter((p) => p.name.includes(pokeName)); + } +</script> + +<section class="text-gray-600 body-font"> + <div class="container px-5 py-24 mx-auto"> + <div class="flex flex-col text-center w-full mb-20"> + <h2 + class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1" + > + I ❤️ SERIES + </h2> + <h1 + class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900" + > + List of pokemons + </h1> + <p class="lg:w-2/3 mx-auto leading-relaxed text-base"> + Data is taken from pokeapi.co, so they are the one to blame for any + errors + </p> + </div> + <div class="w-full flex justify-center flex-col items-center"> + <label + for="name" + class="leading-7 text-lg text-gray-600 flex justify-center items-center mr-3" + >Name of pokemon to find</label + > + <input + type="text" + id="name" + name="name" + bind:value={pokemonName} + class="w-3/5 bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" + /> + </div> + <div class="flex flex-wrap justify-center"> + {#await getPokemons()} + <h1>Downolading pokemons</h1> + {:then pokemons} + {#each filterPokemons(pokemons, pokemonName) as pokemon} + <div class="m-5"> + <img + src={pokemon.pokeData.sprites.back_default} + width="250" + alt="{pokemon.name} image" + /> + <p class="text-4xl text-black text-center mt-3">{pokemon.name}</p> + </div> + {/each} + {/await} + + <!-- <div --> + <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" --> + <!-- > --> + <!-- <h2 --> + <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" --> + <!-- > --> + <!-- Shooting Stars --> + <!-- </h2> --> + <!-- <p class="leading-relaxed text-base mb-4"> --> + <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery --> + <!-- hexagon disrupt edison bulbche. --> + <!-- </p> --> + <!-- <a class="text-indigo-500 inline-flex items-center" --> + <!-- >Learn More --> + <!-- <svg --> + <!-- fill="none" --> + <!-- stroke="currentColor" --> + <!-- stroke-linecap="round" --> + <!-- stroke-linejoin="round" --> + <!-- stroke-width="2" --> + <!-- class="w-4 h-4 ml-2" --> + <!-- viewBox="0 0 24 24" --> + <!-- > --> + <!-- <path d="M5 12h14M12 5l7 7-7 7" /> --> + <!-- </svg> --> + <!-- </a> --> + <!-- </div> --> + <!-- <div --> + <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" --> + <!-- > --> + <!-- <h2 --> + <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" --> + <!-- > --> + <!-- The Catalyzer --> + <!-- </h2> --> + <!-- <p class="leading-relaxed text-base mb-4"> --> + <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery --> + <!-- hexagon disrupt edison bulbche. --> + <!-- </p> --> + <!-- <a class="text-indigo-500 inline-flex items-center" --> + <!-- >Learn More --> + <!-- <svg --> + <!-- fill="none" --> + <!-- stroke="currentColor" --> + <!-- stroke-linecap="round" --> + <!-- stroke-linejoin="round" --> + <!-- stroke-width="2" --> + <!-- class="w-4 h-4 ml-2" --> + <!-- viewBox="0 0 24 24" --> + <!-- > --> + <!-- <path d="M5 12h14M12 5l7 7-7 7" /> --> + <!-- </svg> --> + <!-- </a> --> + <!-- </div> --> + <!-- <div --> + <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" --> + <!-- > --> + <!-- <h2 --> + <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" --> + <!-- > --> + <!-- Neptune --> + <!-- </h2> --> + <!-- <p class="leading-relaxed text-base mb-4"> --> + <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery --> + <!-- hexagon disrupt edison bulbche. --> + <!-- </p> --> + <!-- <a class="text-indigo-500 inline-flex items-center" --> + <!-- >Learn More --> + <!-- <svg --> + <!-- fill="none" --> + <!-- stroke="currentColor" --> + <!-- stroke-linecap="round" --> + <!-- stroke-linejoin="round" --> + <!-- stroke-width="2" --> + <!-- class="w-4 h-4 ml-2" --> + <!-- viewBox="0 0 24 24" --> + <!-- > --> + <!-- <path d="M5 12h14M12 5l7 7-7 7" /> --> + <!-- </svg> --> + <!-- </a> --> + <!-- </div> --> + <!-- <div --> + <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" --> + <!-- > --> + <!-- <h2 --> + <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" --> + <!-- > --> + <!-- Melanchole --> + <!-- </h2> --> + <!-- <p class="leading-relaxed text-base mb-4"> --> + <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery --> + <!-- hexagon disrupt edison bulbche. --> + <!-- </p> --> + <!-- <a class="text-indigo-500 inline-flex items-center" --> + <!-- >Learn More --> + <!-- <svg --> + <!-- fill="none" --> + <!-- stroke="currentColor" --> + <!-- stroke-linecap="round" --> + <!-- stroke-linejoin="round" --> + <!-- stroke-width="2" --> + <!-- class="w-4 h-4 ml-2" --> + <!-- viewBox="0 0 24 24" --> + <!-- > --> + <!-- <path d="M5 12h14M12 5l7 7-7 7" /> --> + <!-- </svg> --> + <!-- </a> --> + <!-- </div> --> + <!-- </div> --> + <!-- <button --> + <!-- class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" --> + <!-- >Button</button --> + <!-- > --> + </div> + </div> +</section> |
