Added TypeScript, misc fixes

pull/12/head^2
Nilesh 2022-06-01 20:52:43 +01:00
rodzic 0469096f8a
commit 3a85ccd96e
9 zmienionych plików z 1329 dodań i 168 usunięć

1297
package-lock.json wygenerowano

Plik diff jest za duży Load Diff

Wyświetl plik

@ -13,12 +13,18 @@
"@rgossiaux/svelte-heroicons": "^0.1.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@tsconfig/svelte": "^3.0.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0"
"rollup-plugin-typescript2": "^0.31.2",
"svelte": "^3.0.0",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.6",
"tslib": "^2.4.0",
"typescript": "^4.7.2"
},
"dependencies": {
"@svelte-parts/zoom": "^0.0.23",

Wyświetl plik

@ -5,6 +5,9 @@ import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
import autoPreprocess from 'svelte-preprocess';
import typescript from 'rollup-plugin-typescript2';
const production = !process.env.ROLLUP_WATCH;
function serve() {
@ -38,11 +41,13 @@ export default {
},
plugins: [
svelte({
preprocess: autoPreprocess(),
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
typescript({ sourceMap: !production }),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),

Wyświetl plik

@ -1,6 +1,5 @@
<script>
import Icon from "./tailwindui/Icon.svelte"
export let item;
<script lang="ts">
export let item: {name: string, creators: string};
</script>
<a class="flex flex-wrap p-8 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">

Wyświetl plik

@ -2,6 +2,7 @@
import ButtonGroup from "./ButtonGroup.svelte";
import { bookmarks } from "./stores.js"
import Icon from "./tailwindui/Icon.svelte"
import Review from "./Review.svelte"
export let itemid;
let item;
@ -206,7 +207,7 @@
</div>
<hr />
<!-- review -->
{#if item.review}
{#if reviews}
<section class="my-8">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold text-gray-100">Reviews</h2>
@ -214,167 +215,12 @@
<div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2 scroll">
{#each reviews as review}
<article class="px-3 py-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 rounded-lg text-xs w-48 max-w-sm shrink-0">
<h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
<p class="mt-2 line-clamp">{review.blurb}</p>
<div class="mt-3">
<sl-rating value={review.rating}></sl-rating>
<span class="ml-2">...{review.by}</span>
</div>
</article>
<Review {review}/>
{/each}
</div>
</section>
{/if}
<!-- more books by same author -->
<!-- <section class="my-8 overflow-hidden">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold">More Books by Priyanka Trivedi</h2>
<button class="float-right text-xs hover:underline">See All</button>
</div>
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-auto">
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
</div>
</section>
<hr /> -->
<!-- Also bought -->
<!-- <section class="my-8 overflow-hidden">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold">Other items on the same topics</h2>
<button class="text-xs hover:underline">See All</button>
</div>
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
</div>
</section> -->
</div>
{:else}
<p class="loading">loading...</p>

Wyświetl plik

@ -1,5 +1,12 @@
<script>
<script lang="ts">
export let review: any;
</script>
review
<article class="px-3 py-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 rounded-lg text-xs w-48 max-w-sm shrink-0">
<h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
<p class="mt-2 line-clamp">{review.blurb}</p>
<div class="mt-3">
<sl-rating value={review.rating}></sl-rating>
<span class="ml-2">...{review.by}</span>
</div>
</article>

Wyświetl plik

@ -1,3 +0,0 @@
<script>
</script>

Wyświetl plik

@ -0,0 +1 @@
export {};

5
tsconfig.json 100644
Wyświetl plik

@ -0,0 +1,5 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "public/*"],
}