initial config 🐸

t0t · May 25, 2020 · 7e95cba · 7e95cba
1 parent f488ce8
commit 7e95cba
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 90 deletions.
diff --git a/src/Nav.svelte b/src/Nav.svelte
@@ -5,6 +5,7 @@
         ["./home", "home"],
         ["./about", "about"],
         ["./blog", "blog"],
+        ["./products", "products"],
     ];
 </script>
 <style>

diff --git a/src/pages/blog/Post.svelte b/src/pages/blog/Post.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let post;
+  const { title, thumb, content } = post;
+</script>
+
+<div>
+  <h3>{post.title}</h3>
+  <img src="{post.thumb}" alt="Poster for {post.title}" />
+  <p>{@html post.content}</p>
+</div>
diff --git a/src/pages/blog/[slug].svelte b/src/pages/blog/[slug].svelte
@@ -1,19 +1,16 @@
 <script>
-    import data from "./blog.json";
-    const posts = data.posts;
     import { url } from "@sveltech/routify";
     export let slug;
-    export let title;
-    export let content;
+    import data from "./blog.json";
+    const posts = data.posts;
 </script>
 
+{#each posts as post}
+    {#if (post.slug === slug)}
+        <h1>{post.title}</h1>
+        <img src="/{post.imagen}" alt="{post.title}">
+        <p>{@html post.content}</p>
+    {/if}
+{/each}
 
-<h1>{title}</h1>
-<p>Blog article: {slug}</p>
-<p style="color:red;">{content}</p>
-
-<a href={$url(`../${slug}/delete`)}>Delete</a>
-{#each posts as i}
-
-<p> {i.id} for {slug}</p>
-{/each}
+<a href={$url(`${slug}/delete`)}>Delete</a>
diff --git a/src/pages/blog/blog.json b/src/pages/blog/blog.json
@@ -1,60 +1,54 @@
 {
-    "posts": [
-      {
-        "id": "0",
-        "slug": "yeaaaaahhhhh",
-        "excerpt": "post 1",
-        "title": "Title post 1",
-        "slug": "post1",
-        "imagen": "img/img8.jpg",
-        "thumb": "img/th-img8.jpg",
-        "description": "Arena negra del desierto y latex. 100cm ø 2019",
-        "content": "<strong>Strong text</strong> derv erv erv <br>eve <em>Lo más importante en la vida es que lo más  sea lo más importante</em> werv e verv <a href='/' alt='alternatve text'>importante</a> verwv  werv werv <italic>vewr</italic>"
-      },
-      {
-        "id": "1",
-        "slug": "post2",
-        "excerpt": "post 2",
-        "title": "Title post 2",
-        "slug": "post2",
-        "imagen": "img/img9.jpg",
-        "thumb": "img/th-img9.jpg",
-        "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
-        "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
-      },
-      {
-        "id": "2",
-        "slug": "prototipado-holistico",
-        "excerpt": "prototipado-holistico",
-        "title": "Prototipado Holístico",
-        "slug": "post3",
-        "imagen": "img/img10.jpg",
-        "thumb": "img/th-img10.jpg",
-        "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
-        "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
-      },
-      {
-        "id": "3",
-        "slug": "cuartopost",
-        "excerpt": "Cuarto post excerpt wejc weroicje ",
-        "title": "Cuarto post",
-        "slug": "post4",
-        "imagen": "img/img11.jpg",
-        "thumb": "img/th-img11.jpg",
-        "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
-        "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
-      },
-      {
-        "id": "4",
-        "slug": "cinco",
-        "excerpt": "Cuarto post excerpt wejc weroicje ",
-        "title": "Cuarto post",
-        "slug": "post5",
-        "imagen": "img/img12.jpg",
-        "thumb": "img/th-img12.jpg",
-        "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
-        "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
-      }
-    ]
-  }
-
+  "posts": [
+    {
+      "id": 0,
+      "excerpt": "post 1",
+      "title": "Title post 1",
+      "thumb": "img/th-img8.jpg",
+      "slug": "post1",
+      "imagen": "img/img8.jpg",
+      "description": "Arena negra del desierto y latex. 100cm ø 2019",
+      "content": "<strong>Strong text</strong> derv erv erv <br>eve <em>Lo más importante en la vida es que lo más  sea lo más importante</em> werv e verv <a href='/' alt='alternatve text'>importante</a> verwv  werv werv <italic>vewr</italic>"
+    },
+    {
+      "id": 1,
+      "slug": "post2",
+      "excerpt": "post 2",
+      "title": "Title post 2",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "imagen": "img/img9.jpg",
+      "thumb": "img/th-img9.jpg",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    },
+    {
+      "id": 2,
+      "excerpt": "prototipado-holistico",
+      "title": "Prototipado Holístico",
+      "thumb": "img/th-img10.jpg",
+      "slug": "post3",
+      "imagen": "img/img10.jpg",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    },
+    {
+      "id": 3,
+      "excerpt": "Cuarto post excerpt wejc weroicje ",
+      "title": "Cuarto post",
+      "thumb": "img/th-img11.jpg",
+      "slug": "post4",
+      "imagen": "img/img11.jpg",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    },
+    {
+      "id": 4,
+      "excerpt": "Cuarto post excerpt wejc weroicje ",
+      "title": "Cuarto post",
+      "thumb": "img/th-img12.jpg",
+      "slug": "post5",
+      "imagen": "img/img12.jpg",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    }
+  ]
+}
diff --git a/src/pages/blog/index.svelte b/src/pages/blog/index.svelte
@@ -1,30 +1,17 @@
 <script>
     import data from "./blog.json";
+    import Post from "./Post.svelte";
     const posts = data.posts;
     
     import { url, isActive } from "@sveltech/routify";
-    const links = [
-        ["blog/foo", "Foo"],
-        ["blog/bar", "Bar"],
-        ["blog/lum", "lum"],
-    ];
 </script>
 
 <h1>Blog page</h1>
-
 <ul>
     {#each posts as post}
-    <li>
-        <img src="{post.thumb}" alt="">
-        <button><a href=blog/{$url(post.slug)}>{post.title}</a></button>
-      <p>{post.excerpt}</p>
-    </li>
-    {/each}
-</ul>
-<ul>
-    {#each links as [path, name]}
-    <li>
-      <a href={$url(path)} class:selected={$isActive(path)}>{name}</a>
-    </li>
+        <Post {post} />
+        <button class:selected={$isActive(post.slug)}>
+            <a href="blog/{$url(post.slug)}">{post.title}</a>
+        </button>
     {/each}
 </ul>
diff --git a/src/pages/products/Product.svelte b/src/pages/products/Product.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let product;
+  const { title, thumb, content } = product;
+</script>
+
+<div>
+  <h3>{product.title}</h3>
+  <img src="{product.thumb}" alt="product {product.title}" />
+  <p>{@html product.content}</p>
+</div>
diff --git a/src/pages/products/[slug].svelte b/src/pages/products/[slug].svelte
@@ -0,0 +1,16 @@
+<script>
+    import { url } from "@sveltech/routify";
+    export let slug;
+    import data from "./products.json";
+    const products = data.products;
+</script>
+
+{#each products as product}
+    {#if (product.slug === slug)}
+        <h1>{product.title}</h1>
+        <img src="/{product.imagen}" alt="{product.title}">
+        <p>{@html product.content}</p>
+    {/if}
+{/each}
+
+<a href={$url(`${slug}/delete`)}>Delete</a>
diff --git a/src/pages/products/index.svelte b/src/pages/products/index.svelte
@@ -0,0 +1,17 @@
+<script>
+    import data from "./products.json";
+    import Product from "./Product.svelte";
+    const products = data.products;
+    
+    import { url, isActive } from "@sveltech/routify";
+</script>
+
+<h1>Products</h1>
+<ul>
+    {#each products as product}
+        <Product {product} />
+        <button class:selected={$isActive(product.slug)}>
+            <a href="products/{$url(product.slug)}">{product.title}</a>
+        </button>
+    {/each}
+</ul>
diff --git a/src/pages/products/products.json b/src/pages/products/products.json
@@ -0,0 +1,54 @@
+{
+  "products": [
+    {
+      "id": 0,
+      "slug": "product0",
+      "excerpt": "product 1",
+      "title": "Title product 1",
+      "thumb": "img/th-img8.jpg",
+      "imagen": "img/img8.jpg",
+      "description": "Arena negra del desierto y latex. 100cm ø 2019",
+      "content": "<strong>Strong text</strong> derv erv erv <br>eve <em>Lo más importante en la vida es que lo más  sea lo más importante</em> werv e verv <a href='/' alt='alternatve text'>importante</a> verwv  werv werv <italic>vewr</italic>"
+    },
+    {
+      "id": 1,
+      "slug": "product1",
+      "excerpt": "product 2",
+      "title": "Title product 2",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "imagen": "img/img9.jpg",
+      "thumb": "img/th-img9.jpg",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    },
+    {
+      "id": 2,
+      "slug": "product3",
+      "excerpt": "prototipado-holistico",
+      "title": "Prototipado Holístico",
+      "thumb": "img/th-img10.jpg",
+      "imagen": "img/img10.jpg",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    },
+    {
+      "id": 3,
+      "excerpt": "Cuarto product excerpt wejc weroicje ",
+      "title": "Cuarto product",
+      "thumb": "img/th-img11.jpg",
+      "slug": "product4",
+      "imagen": "img/img11.jpg",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    },
+    {
+      "id": 4,
+      "excerpt": "Cuarto product excerpt wejc weroicje ",
+      "title": "Cuarto product",
+      "thumb": "img/th-img12.jpg",
+      "slug": "product5",
+      "imagen": "img/img12.jpg",
+      "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti.",
+      "content": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis exercitationem rem aliquam voluptas! Laboriosam obcaecati tenetur quae animi? Nemo labore exercitationem totam cupiditate temporibus eaque accusamus sequi. Ullam, laborum. Deleniti."
+    }
+  ]
+}