-
Notifications
You must be signed in to change notification settings - Fork 185
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
1,107 additions
and
7 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
[ | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"author": "Filosofia Codigo", | ||
"category": "Video", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"author": "Filosofia Codigo", | ||
"category": "Tutorial", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"category": "DeFi", | ||
"author": "Filosofia Codigo", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"category": "L2 Architecture", | ||
"author": "Filosofia Codigo", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"category": "DeFi", | ||
"author": "Filosofia Codigo", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"category": "Zero-Knowledge Proofs", | ||
"author": "Filosofia Codigo", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"author": "Filosofia Codigo", | ||
"category": "DeFi", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
}, | ||
{ | ||
"title": "How to Earn on Aave from Solidity", | ||
"avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg", | ||
"author": "Filosofia Codigo", | ||
"category": "Solidity", | ||
"publishedTo": "Filosofía Código EN", | ||
"date": "Oct 4th", | ||
"url": "https://scroll.io" | ||
} | ||
] |
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,111 @@ | ||
--- | ||
import guides from "./guides.json" | ||
// import DocsCard from "../../components/DocsCard.astro" | ||
import DocsCard from "~/components/DocsCard.astro" | ||
const categories = ["All", ...new Set(guides.map((guide) => guide.category))] | ||
--- | ||
|
||
<div> | ||
<ul class="category-picker"> | ||
{ | ||
categories.map((category) => ( | ||
<li class={`item ${category === "All" ? "active" : ""}`} data-category={category} onclick="filterGuides(event)"> | ||
{category} | ||
</li> | ||
)) | ||
} | ||
</ul> | ||
<div class="guides-list" id="guides-list"> | ||
{ | ||
guides.map(({ title, avatar, author, date, publishedTo, url, category }) => ( | ||
<DocsCard | ||
title={title} | ||
avatar={avatar} | ||
author={author} | ||
date={date} | ||
publishedTo={publishedTo} | ||
url={url} | ||
category={category} | ||
/> | ||
)) | ||
} | ||
</div> | ||
</div> | ||
|
||
<script type="module"> | ||
window.filterGuides = function (event) { | ||
const selectedCategory = event.target.getAttribute("data-category") | ||
const guidesList = document.getElementById("guides-list") | ||
const guideItems = Array.from(guidesList.children) | ||
|
||
document.querySelectorAll(".category-picker .item").forEach((item) => { | ||
item.classList.remove("active") | ||
}) | ||
event.target.classList.add("active") | ||
|
||
guideItems.forEach((guide) => { | ||
const category = guide.getAttribute("data-category") | ||
if (selectedCategory === "All" || category === selectedCategory) { | ||
guide.style.display = "" | ||
} else { | ||
guide.style.display = "none" | ||
} | ||
}) | ||
} | ||
</script> | ||
|
||
<style> | ||
.category-picker { | ||
display: flex; | ||
flex-wrap: wrap; | ||
} | ||
.category-picker .item { | ||
display: inline-flex; | ||
height: 44px; | ||
padding: 0px 30px; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
flex-shrink: 0; | ||
border-radius: 100px; | ||
margin-top: 0; | ||
cursor: pointer; | ||
margin-right: 20px; | ||
margin-bottom: 20px; | ||
border-width: 1px; | ||
border-style: solid; | ||
@apply border-black dark:border-white; | ||
} | ||
.category-picker .item.active { | ||
@apply text-white bg-black dark:text-black dark:bg-white; | ||
} | ||
.guides-list { | ||
display: grid; | ||
grid-template-columns: 1fr 1fr; | ||
gap: 30px; | ||
margin-top: 30px; | ||
} | ||
|
||
.guides-list :global(.docs-item) { | ||
background: rgba(237, 237, 237, 0.6); | ||
} | ||
|
||
:global(.dark .guides-list .docs-item) { | ||
@apply bg-dark-normal; | ||
} | ||
|
||
@media screen and (max-width: 1300px) { | ||
.guides-list { | ||
grid-template-columns: 1fr; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 50em) { | ||
.category-picker .item { | ||
height: 36px; | ||
padding: 0px 20px; | ||
margin-right: 12px; | ||
margin-bottom: 12px; | ||
} | ||
} | ||
</style> |
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,129 @@ | ||
--- | ||
import LinkSvg from "~/assets/svgs/home/home-link.svg?raw" | ||
export type Props = { | ||
title: string | ||
avatar: string | ||
author: string | ||
date: string | ||
publishedTo: string | ||
url: string | ||
category?: string | ||
} | ||
const { title, avatar, author, date, publishedTo, url, category } = Astro.props as Props | ||
--- | ||
|
||
<a class="docs-item" href={url} data-category={category}> | ||
<div class="docs-item-title"> | ||
<span class="link-icon inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white"> | ||
<Fragment set:html={LinkSvg} /> | ||
</span> | ||
{title} | ||
</div> | ||
<div class="docs-info-box"> | ||
<div class="left-side"> | ||
<img class="author-avator" src={avatar} alt={title} /> | ||
<div> | ||
<div class="author">{author}</div> | ||
<div>{date}</div> | ||
</div> | ||
</div> | ||
<div class="right-side"> | ||
Published to <br /> | ||
{publishedTo} | ||
</div> | ||
</div> | ||
</a> | ||
|
||
<style> | ||
.docs-item { | ||
padding: 23px 30px 30px 30px; | ||
width: 100%; | ||
max-width: 430px; | ||
height: 182px; | ||
border-radius: 15px; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
transition: all 0.2s ease-in-out; | ||
cursor: pointer; | ||
} | ||
|
||
.docs-item:hover { | ||
/* transform: scale(1.01); */ | ||
@apply bg-normal dark:bg-dark-highlight; | ||
} | ||
|
||
.docs-item-title { | ||
font-size: 22px; | ||
font-style: normal; | ||
font-weight: 600; | ||
line-height: 30px; | ||
letter-spacing: 0.22px; | ||
width: 100%; | ||
@apply text-black dark:text-white; | ||
} | ||
.docs-info-box { | ||
display: flex; | ||
justify-content: space-between; | ||
color: #756a67; | ||
text-align: right; | ||
font-size: 16px; | ||
font-style: normal; | ||
font-weight: 400; | ||
line-height: 20px; /* 125% */ | ||
letter-spacing: 0.16px; | ||
width: 100%; | ||
} | ||
|
||
.left-side { | ||
display: flex; | ||
align-items: center; | ||
justify-content: flex-start; | ||
text-align: left; | ||
} | ||
|
||
.author-avator { | ||
width: 36px; | ||
height: 36px; | ||
margin-right: 12px; | ||
border-radius: 50%; | ||
} | ||
.author { | ||
@apply text-black dark:text-white; | ||
} | ||
|
||
.link-icon { | ||
display: inline-flex; | ||
margin-left: 33px; | ||
margin-top: 10px; | ||
float: right; | ||
} | ||
|
||
.link-icon :global(svg) { | ||
width: 15px; | ||
height: 15px; | ||
font-size: 20px; | ||
} | ||
|
||
@media screen and (max-width: 50em) { | ||
.docs-item { | ||
padding: 12px 16px 16px 16px; | ||
} | ||
.docs-item { | ||
align-items: center; | ||
gap: 8px; | ||
width: 100%; | ||
max-width: 360px; | ||
margin: 0 auto; | ||
} | ||
.docs-item-title { | ||
font-size: 20px; | ||
line-height: normal; | ||
margin-top: 13px; | ||
margin-bottom: 8px; | ||
} | ||
.docs-info-box { | ||
font-size: 14px; | ||
} | ||
} | ||
</style> |
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
Oops, something went wrong.