@geckou/ui-vue 0.3.0

package/dist/components/ArticleList/Card/Simple.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type {
+  Article,
+  Category,
+  PostConfig,
+} from '../../../types'
+import CardContainer from '../../../components/ArticleList/Parts/CardContainer.vue'
+import ThumbnailImage from '../../../components/ArticleList/Parts/ThumbnailImage.vue'
+import AuthorInfo from '../../../components/ArticleList/Parts/AuthorInfo.vue'
+import CardHeading from '../../../components/ArticleList/Parts/CardHeading.vue'
+import CategoryList from '../../../components/ArticleList/Parts/CategoryList.vue'
+import TagList from '../../../components/ArticleList/Parts/TagList.vue'
+import PostedDate from '../../../components/ArticleList/Parts/PostedDate.vue'
+import ExcerptText from '../../../components/ArticleList/Parts/ExcerptText.vue'
+
+defineProps<{
+  article: Article
+  path: string
+  isPickUpItem: boolean
+  postConfig: PostConfig
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <CardContainer
+    v-if="article"
+    :class="[$style.container, { [$style.pickup]: isPickUpItem} ]"
+    :path="path"
+  >
+    <ThumbnailImage
+      :article="article"
+      :aspectRatio="{
+        desktop: isPickUpItem ? '21/9' : '4/3',
+        tablet : isPickUpItem ? '21/9' : '4/3',
+        mobile : '4/3',
+      }"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+    <CardHeading
+      :heading="article.title.rendered"
+      :class="$style.heading"
+      color="var(--text-color)"
+      style="grid-area: heading;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :name="article._embedded.author[0].name"
+      :class="$style.author"
+      :text="{
+        color : 'var(--gray)',
+        preposition: 'by',
+      }"
+      style="grid-area: author;"
+    />
+    <CategoryList
+      v-if="postConfig.category && article.categories"
+      :categoryIds="article.categories"
+      :categoryData="categories"
+      :label="{
+        color : 'var(--gray)',
+        fontSize : 'small',
+        fontWeight: 'bold',
+      }"
+      :class="$style.category"
+      style="grid-area: category;"
+    />
+    <TagList
+      v-if="postConfig.tag"
+      :article="article"
+      :label="{
+        color : 'var(--gray)',
+        fontSize : 'small',
+        fontWeight: 'bold',
+      }"
+      :class="$style.tag"
+      style="grid-area: tag;"
+    />
+    <PostedDate
+      :date="article.date"
+      formatString="yy.M.d"
+      color="var(--gray)"
+      :class="$style.date"
+      style="grid-area: date;"
+    />
+    <ExcerptText
+      :excerpt="article.excerpt.rendered"
+      :class="$style.excerpt"
+      style="grid-area: excerpt;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  grid-template-columns: auto 1fr;
+  grid-template-rows   : fit-content(62%) auto auto auto 1fr auto;
+  grid-template-areas  :
+    'thumbnail thumbnail'
+    'category tag'
+    'heading heading'
+    'excerpt excerpt'
+    'author date';
+  gap   : var(--sp-small);
+  height: 100%;
+
+  &:hover {
+    .thumbnail {
+      img {
+        filter: grayscale(20%);
+      }
+    }
+  }
+
+  &.pickup {
+    @include media('tablet') {
+      grid-template-columns: 1fr;
+      grid-template-rows   : 0 1fr auto;
+      grid-template-areas  : 
+        'thumbnail'
+        'heading'
+        'date';
+      gap         : 0;
+      aspect-ratio: 21/9;
+
+      .thumbnail {
+        position: absolute;
+        top     : 0;
+        left    : 0;
+
+        &::before {
+          content         : '';
+          display         : block;
+          width           : 100%;
+          height          : 100%;
+          background-color: var(--gray);
+          mix-blend-mode  : multiply;
+          position        : absolute;
+          top             : 0;
+          left            : 0;
+          z-index         : 1;
+          transition      : opacity var(--animation-duration);
+          opacity         : .3;
+          pointer-events  : none;
+        }
+      }
+
+      &:hover {
+        .thumbnail {
+
+          &::before {
+            opacity: .1;
+          }
+        }
+      }
+
+      .heading,
+      .date {
+        position: relative;
+        z-index : 2;
+      }
+
+      .heading {
+        display           : flex;
+        justify-content   : flex-start;
+        align-items       : flex-end;
+        margin-block-start: var(--sp-medium);
+        margin-inline     : var(--sp-large);
+        font-size         : xx-large;
+      }
+
+      .date {
+        display        : flex;
+        justify-content: flex-start;
+        align-items    : flex-end;
+        margin-block   : var(--sp-medium) var(--sp-large);
+        margin-inline  : var(--sp-large);
+        font-size      : medium;
+        color          : var(--text-color);
+      }
+
+      .excerpt,
+      .category,
+      .tag,
+      .author {
+        display: none;
+      }
+    }
+  }
+
+  .thumbnail {
+    img {
+      transition: filter var(--animation-duration);
+      filter    : grayscale(90%);
+    }
+  }
+
+  .tag {
+    grid-column       : 1 / 3;
+    margin-block-start: var(--sp-small);
+  }
+
+  .category {
+    margin-block-start: var(--sp-small);
+
+    & + .tag {
+      grid-column: 2 / 3;
+
+      &::before {
+        content  : '/';
+        color    : var(--gray);
+        font-size: small;
+      }
+    }
+  }
+
+  .heading {
+    margin-block-start: var(--sp-small);
+  }
+
+  .excerpt {
+    margin-block-end: var(--sp-small);
+  }
+
+  .date {
+    justify-content: flex-end;
+  }
+}
+</style>

package/dist/components/ArticleList/Card/Standard.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type {
+  Article,
+  Category,
+  PostConfig,
+} from '../../../types'
+import CardContainer from '../../../components/ArticleList/Parts/CardContainer.vue'
+import ThumbnailImage from '../../../components/ArticleList/Parts/ThumbnailImage.vue'
+import AuthorInfo from '../../../components/ArticleList/Parts/AuthorInfo.vue'
+import CardHeading from '../../../components/ArticleList/Parts/CardHeading.vue'
+import CategoryList from '../../../components/ArticleList/Parts/CategoryList.vue'
+import TagList from '../../../components/ArticleList/Parts/TagList.vue'
+import PostedDate from '../../../components/ArticleList/Parts/PostedDate.vue'
+import ExcerptText from '../../../components/ArticleList/Parts/ExcerptText.vue'
+
+defineProps<{
+  article: Article
+  path: string
+  isPickUpItem: boolean
+  postConfig: PostConfig
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <CardContainer
+    v-if="article"
+    :class="[$style.container, { [$style.pickup]: isPickUpItem} ]"
+    :path="path"
+  >
+    <ThumbnailImage
+      :article="article"
+      :aspectRatio="{
+        desktop: isPickUpItem ? '2.85/1' : '4/3',
+        tablet : isPickUpItem ? '2.85/1' : '4/3',
+        mobile : '4/3',
+      }"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+    <CardHeading
+      :heading="article.title.rendered"
+      :class="$style.heading"
+      style="grid-area: heading;"
+    />
+    <TagList
+      v-if="postConfig.tag"
+      :article="article"
+      :label="{
+        color : 'var(--gray)',
+        fontSize: 'smaller',
+      }"
+      :class="$style.tag"
+      style="grid-area: tag;"
+    />
+    <ExcerptText
+      :excerpt="article.excerpt.rendered"
+      :class="$style.excerpt"
+      style="grid-area: excerpt;"
+    />
+    <PostedDate
+      :date="article.date"
+      :class="$style.date"
+      formatString="yy.M.d"
+      color="var(--gray)"
+      style="grid-area: date;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :avatarUrls="article._embedded.author[0].avatar_urls"
+      :name="article._embedded.author[0].name"
+      :class="$style.author"
+      style="grid-area: author;"
+    />
+    <CategoryList
+      v-if="postConfig.category && article.categories"
+      :categoryIds="article.categories"
+      :categoryData="categories"
+      :label="{
+        backgroundColor: 'var(--main-color)',
+        color : 'var(--white)',
+        fontSize : 'small',
+      }"
+      :class="$style.category"
+      style="grid-area: category;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows   : 0 auto auto auto 1fr auto auto;
+  grid-template-areas  :
+    'category category'
+    'thumbnail thumbnail'
+    'heading heading'
+    'tag tag'
+    'excerpt excerpt'
+    'date author';
+    
+  &:hover {
+    .thumbnail {
+      opacity: .8;
+    }
+  }
+
+  &.pickup {
+    @include media('tablet') {
+      grid-template-rows: auto 0 1fr auto auto auto auto;
+      aspect-ratio      : 2.85/1;
+      position          : relative;
+
+      > * {
+        &:not(.thumbnail):not(.category) {
+          position      : relative;
+          padding-inline: var(--sp-medium);
+        }
+      }
+
+      .date,
+      .author {
+        padding-block-end: var(--sp-medium);
+      }
+
+      .thumbnail {
+        width   : 100%;
+        position: absolute;
+        top     : 0;
+        left    : 0;
+        margin  : 0;
+
+        &::after {
+          content         : '';
+          display         : block;
+          width           : 100%;
+          height          : 100%;
+          position        : absolute;
+          top             : 0;
+          left            : 0;
+          mix-blend-mode  : screen;
+          background-image: linear-gradient(
+            to bottom,
+            rgba(255, 255, 255, 0) 38%,
+            rgba(255, 255, 255, .9) 100%
+          );
+        }
+      }
+
+      .heading {
+        align-self: end;
+        font-size : xx-large;
+      }
+    }
+  }
+}
+
+.thumbnail {
+  margin-block-end: var(--sp-medium);
+  transition      : opacity var(--animation-duration);
+}
+
+.category {
+  position: absolute;
+  top     : 0;
+  left    : 0;
+}
+
+.heading {
+  margin-block-end: var(--sp-min);
+}
+
+.excerpt {
+  margin-block-start: var(--sp-medium);
+}
+
+.author {
+  justify-content: flex-end;
+}
+
+.date,
+.author {
+  margin-block-start: var(--sp-medium);
+}
+</style>

package/dist/components/ArticleList/Card/Tile.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type {
+  Article,
+  Category,
+  PostConfig,
+} from '../../../types'
+import CardContainer from '../../../components/ArticleList/Parts/CardContainer.vue'
+import ThumbnailImage from '../../../components/ArticleList/Parts/ThumbnailImage.vue'
+import AuthorInfo from '../../../components/ArticleList/Parts/AuthorInfo.vue'
+import CardHeading from '../../../components/ArticleList/Parts/CardHeading.vue'
+import CategoryList from '../../../components/ArticleList/Parts/CategoryList.vue'
+import TagList from '../../../components/ArticleList/Parts/TagList.vue'
+import PostedDate from '../../../components/ArticleList/Parts/PostedDate.vue'
+import ExcerptText from '../../../components/ArticleList/Parts/ExcerptText.vue'
+
+defineProps<{
+  article: Article
+  path: string
+  isPickUpItem: boolean
+  postConfig: PostConfig
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <CardContainer
+    v-if="article"
+    :class="[$style.container, { [$style.pickup]: isPickUpItem} ]"
+    :path="path"
+  >
+    <ThumbnailImage
+      :article="article"
+      :aspectRatio="{
+        desktop: isPickUpItem ? '21/9' : '4/3',
+        tablet : '4/3',
+        mobile : '4/3',
+      }"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+    <PostedDate
+      :date="article.date"
+      formatString="yy.M.d"
+      :class="$style.date"
+      style="grid-area: date;"
+    />
+    <CategoryList
+      v-if="postConfig.category && article.categories"
+      :categoryIds="article.categories"
+      :categoryData="categories"
+      :label="{
+        color : 'var(--main-color)',
+        fontSize: 'small',
+      }"
+      :class="$style.category"
+      style="grid-area: category;"
+    />
+    <CardHeading
+      :heading="article.title.rendered"
+      :class="$style.heading"
+      style="grid-area: heading;"
+    />
+    <ExcerptText
+      :excerpt="article.excerpt.rendered"
+      :class="$style.excerpt"
+      style="grid-area: excerpt;"
+    />
+    <TagList
+      v-if="postConfig.tag"
+      :article="article"
+      :label="{
+        color : 'var(--gray)',
+        fontSize: 'small',
+      }"
+      :class="$style.tag"
+      delimiter="/"
+      style="grid-area: tag;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :name="article._embedded.author[0].name"
+      :class="$style.author"
+      :text="{
+        color : 'var(--gray)',
+        fontWeight : 'bold',
+        preposition: 'by',
+      }"
+      style="grid-area: author;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  grid-template-columns: auto 1fr;
+  grid-template-rows   : fit-content(55%) auto auto 1fr auto auto;
+  grid-template-areas  :
+    'thumbnail thumbnail'
+    'date category'
+    'heading heading'
+    'excerpt excerpt'
+    'tag tag'
+    'author author';
+  box-shadow: 0 0 1px 0 rgba(var(--black-rgb), .4);
+  height    : 100%;
+  transition: box-shadow var(--animation-duration);
+
+  &:hover {
+    box-shadow: 0 0 var(--sp-medium) 2px rgba(var(--black-rgb), .2);
+
+    .thumbnail {
+      opacity: .8;
+    }
+  }
+
+  &.pickup {
+    @include media('tablet') {
+      grid-template-rows   : auto auto 1fr auto auto;
+      grid-template-columns: fit-content(50%) auto 1fr;
+      grid-template-areas  :
+        'thumbnail date category'
+        'thumbnail heading heading'
+        'thumbnail excerpt excerpt'
+        'thumbnail tag tag'
+        'thumbnail author author';
+    }
+
+    @include media('desktop') {
+      grid-template-columns: calc(66.666% - 2 * var(--sp-small)) auto 1fr;
+    }
+  }
+}
+
+.thumbnail {
+  transition: opacity var(--animation-duration);
+}
+
+.heading,
+.tag,
+.excerpt,
+.author {
+  margin-block  : var(--sp-small);
+  padding-inline: var(--sp-large);
+}
+
+.date,
+.category {
+  padding       : var(--sp-large);
+  padding-bottom: 0;
+}
+
+.date {
+  padding-right: var(--sp-min);
+}
+
+.category {
+  padding-left: var(--sp-min);
+
+  &::before {
+    content  : '/';
+    color    : var(--gray);
+    font-size: small;
+  }
+}
+
+.author {
+  padding-bottom: var(--sp-large);
+}
+</style>