-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Make the Article List an Custom Component, remove other fallback
That was due to the fact that it broke any installation from NPM (not PNPM). I had to sacrifce it)
- Loading branch information
Showing
10 changed files
with
179 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| .article-list { | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .post-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); | ||
| gap: 15px; | ||
|
|
||
| @media screen and (max-width: 600px) { | ||
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | ||
| } | ||
|
|
||
| .post { | ||
| transition: transform 0.3s ease; | ||
| border-radius: 8px; | ||
| background-color: var(--color-background-second); | ||
| padding: 20px; | ||
|
|
||
| &:first-child { | ||
| background-color: var(--color-background-mute); | ||
| } | ||
|
|
||
| h3 { | ||
| margin: 0 !important; | ||
| font-size: 24px; | ||
|
|
||
| a { | ||
| font-weight: 900; | ||
| } | ||
| } | ||
|
|
||
| p { | ||
| margin: 0; | ||
| color: var(--color-text); | ||
| font-weight: 500; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .date { | ||
| font-feature-settings: "zero", "tnum", "cv03", "cv02"; | ||
| margin: 5px 0; | ||
| color: var(--color-text-secondary); | ||
| font-weight: 600; | ||
| font-size: 0.9rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .filter-tags { | ||
| margin-bottom: 20px; | ||
|
|
||
| #all-tags { | ||
| background-color: var(--color-accent-alpha); | ||
| color: var(--color-accent); | ||
| } | ||
|
|
||
| button { | ||
| transition: all 0.3s ease; | ||
| cursor: pointer; | ||
| margin-right: 10px; | ||
| margin-bottom: 3px; | ||
| border-radius: 20px; | ||
| background-color: var(--color-background-second); | ||
| padding: 0.25rem 0.75rem; | ||
| font-size: 0.8rem; | ||
|
|
||
| &:hover { | ||
| background-color: var(--color-accent-alpha); | ||
| color: var(--color-accent); | ||
| } | ||
|
|
||
| &:active { | ||
| transform: scale(0.8); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .tags { | ||
| margin-top: 10px; | ||
| text-align: right; | ||
|
|
||
| span { | ||
| margin-right: 5px; | ||
| border-radius: 20px; | ||
| background-color: var(--color-background); | ||
| padding: 0.15rem 0.45rem; | ||
| color: var(--color-text-accent); | ||
| font-weight: 500; | ||
| font-size: 12px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <div class="article-list"> | ||
| <noscript> | ||
| <small>To use the filter you need JavaScript to be enabled.</small> | ||
| </noscript> | ||
| <div class="filter-tags"> | ||
| <button @click="filterPosts('')" id="all-tags">All</button> | ||
| <button v-for="tag in uniqueTags" :key="tag" @click="filterPosts(tag)"> | ||
| <span class="hashtag">#</span>{{ tag }} | ||
| </button> | ||
| </div> | ||
| <div class="post-container"> | ||
| <article v-for="post in filteredPosts" :key="post.title" class="post"> | ||
| <h3> | ||
| <a | ||
| :href="`posts/${post.title | ||
| .toLowerCase() | ||
| .replace(/\s+/g, '-')}.html`" | ||
| >{{ post.title }}</a | ||
| > | ||
| </h3> | ||
| <p class="date">{{ post.date }}</p> | ||
| <p>{{ post.description }}</p> | ||
| <div class="tags"> | ||
| <span v-if="typeof post.tags === 'string'" :key="post.tags" | ||
| >#{{ post.tags }}</span | ||
| > | ||
| <span v-else v-for="tag in post.tags" :key="tag">#{{ tag }}</span> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import "aplos/custom/ArticleList.scss"; | ||
| import { data as posts } from "./posts.data"; | ||
| import { computed, ref } from "vue"; | ||
|
|
||
| const selectedTag = ref(null); | ||
|
|
||
| const allTags = computed(() => { | ||
| return posts.reduce((tags, post) => { | ||
| return tags.concat(Array.isArray(post.tags) ? post.tags : [post.tags]); | ||
| }, []); | ||
| }); | ||
|
|
||
| const uniqueTags = computed(() => { | ||
| const tags = [...new Set(allTags.value)]; | ||
| return tags.filter((tag) => tag !== ""); | ||
| }); | ||
|
|
||
| const filteredPosts = computed(() => { | ||
| return selectedTag.value === null | ||
| ? posts | ||
| : posts.filter((post) => | ||
| Array.isArray(post.tags) | ||
| ? post.tags.includes(selectedTag.value) | ||
| : post.tags === selectedTag.value | ||
| ); | ||
| }); | ||
|
|
||
| function filterPosts(tag: string) { | ||
| selectedTag.value = tag === "" ? null : tag; | ||
| } | ||
| </script> |
Oops, something went wrong.