added yml
This commit is contained in:
Xinrui Chen
parent
b62e9b96c3
commit
6142e5f49a
|
|
@ -0,0 +1,32 @@
|
|||
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
|
||||
name: Testing CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ "dev, main" ]
|
||||
pull_request:
|
||||
branches: [ "dev, main" ]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [12.x, 14.x, 16.x]
|
||||
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
cache: 'npm'
|
||||
- run: npm ci
|
||||
- run: npm run build --if-present
|
||||
- run: npm test:unit
|
||||
- run: npm test
|
||||
|
|
@ -4,55 +4,42 @@
|
|||
import Rating from './Rating/Rating.svelte';
|
||||
import PrevNext from './PrevNext/PrevNext.svelte';
|
||||
import Tag from './Tag/Tag.svelte';
|
||||
|
||||
const {
|
||||
container,
|
||||
imageView,
|
||||
subname,
|
||||
description,
|
||||
productInfo,
|
||||
date,
|
||||
tags,
|
||||
img,
|
||||
ratings
|
||||
} = {
|
||||
container: 'flex flex-col',
|
||||
imageView: 'flex m-16 gap-12 w-100',
|
||||
productInfo: 'flex flex-col gap-2',
|
||||
subname: '-mb-2 font-light text-sm',
|
||||
description: 'leading-5',
|
||||
date: 'text-xs w-2/3 mt-auto mb-4',
|
||||
tags: 'flex gap-1 mb-1',
|
||||
img: 'p-8 border w-72 h-72 min-w-36 min-h-36 border-black border-2 p-3',
|
||||
ratings: 'w-100'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class={container}>
|
||||
<div class={imageView}>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex m-16 gap-12 w-full">
|
||||
{#if $currentProduct.image}
|
||||
<img src={urlFor($currentProduct.image).url()} class={img} alt={$currentProduct.name} />
|
||||
<img
|
||||
src={urlFor($currentProduct.image).url()}
|
||||
class="min-w-36 min-h-36 w-72 h-72 border-black border-2 p-3"
|
||||
alt={$currentProduct.name}
|
||||
/>
|
||||
{/if}
|
||||
<div class={productInfo}>
|
||||
<div class="productInfo">
|
||||
{#if $currentProduct.subname}
|
||||
<span class={subname}>{$currentProduct.subname}</span>
|
||||
<span class="subname">{$currentProduct.subname}</span>
|
||||
{/if}
|
||||
<a href={$currentProduct?.url} target="_blank" class={`font-bold text-2xl title ${$currentProduct.url? 'text-sky-600':''}`}>{$currentProduct.name}</a>
|
||||
<a
|
||||
href={$currentProduct?.url}
|
||||
target="_blank"
|
||||
class={`font-bold text-2xl title ${$currentProduct.url ? 'text-sky-600' : ''}`}
|
||||
>{$currentProduct.name}</a
|
||||
>
|
||||
{#if $currentProduct.tags}
|
||||
<div class={tags}>
|
||||
<div class="tags">
|
||||
{#each $currentProduct.tags as tag (tag._ref)}
|
||||
<Tag {tag} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $currentProduct.description}
|
||||
<p class={description}>{$currentProduct.description}</p>
|
||||
<p class="description">{$currentProduct.description}</p>
|
||||
{/if}
|
||||
<p class={date}>Created on: {new Date($currentProduct._createdAt)}</p>
|
||||
<p class="date">Created on: {new Date($currentProduct._createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{#if $currentProduct.rating}
|
||||
<div class={ratings}>
|
||||
<div class="ratings">
|
||||
{#each $currentProduct.rating as rating (rating._key)}
|
||||
<Rating {rating} />
|
||||
{/each}
|
||||
|
|
@ -61,12 +48,31 @@
|
|||
<PrevNext />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="postcss">
|
||||
.productInfo {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
.subname {
|
||||
@apply -mb-2 font-light text-sm;
|
||||
}
|
||||
.description {
|
||||
@apply leading-5;
|
||||
}
|
||||
.date {
|
||||
@apply text-xs w-2/3 mt-auto mb-4;
|
||||
}
|
||||
.tags {
|
||||
@apply flex gap-1 mb-1;
|
||||
}
|
||||
.ratings {
|
||||
@apply w-full;
|
||||
}
|
||||
img {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.title:hover, img:hover{
|
||||
.title:hover,
|
||||
img:hover {
|
||||
background-image: url('dither.gif');
|
||||
background-repeat: repeat;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,20 +18,22 @@
|
|||
load();
|
||||
};
|
||||
}
|
||||
|
||||
const { container } = {
|
||||
container: 'h-screen overflow-auto w-screen'
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Rating Room</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class={container}>
|
||||
<div class="container">
|
||||
{#if Object.keys($currentProduct).length}
|
||||
<Feature />
|
||||
{:else}
|
||||
<Grid products={$productsView} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.container {
|
||||
@apply h-screen overflow-auto w-screen;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue