-
-
Notifications
You must be signed in to change notification settings - Fork 46
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
1 parent
c890b90
commit 9152b1c
Showing
1 changed file
with
155 additions
and
0 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,155 @@ | ||
| --- | ||
| import { Picture } from "@astrojs/image/components"; | ||
| import Container from "@components/container.astro"; | ||
| import Sectionhead from "@components/sectionhead.astro"; | ||
| import Layout from "@layouts/Layout.astro"; | ||
| import { getFormattedDate } from "@utils/all"; | ||
| import Card from "../components/card.astro"; | ||
| import { log } from "astro/dist/core/logger/core"; | ||
| import { Tweet, Vimeo, YouTube } from "astro-embed"; | ||
| // Use Astro.glob() to fetch all posts, and then sort them by date. | ||
| const posts = (await Astro.glob("./cybersecurity/*.{md,mdx}")).sort( | ||
| (a, b) => | ||
| new Date(b.frontmatter.publishDate).valueOf() - | ||
| new Date(a.frontmatter.publishDate).valueOf() | ||
| ); | ||
| console.log(posts[0].frontmatter.image); | ||
| --- | ||
|
|
||
| <!-- <Layout title="Blog"> | ||
| <Container> | ||
| <Sectionhead> | ||
| <Fragment slot="title">Open Source Resources</Fragment> | ||
| <Fragment slot="desc" | ||
| >We write about building startups and thoughts going on our mind.</Fragment | ||
| > | ||
| </Sectionhead> --> | ||
| <Layout title="Cyber Security"> | ||
| <main> | ||
| <h1> | ||
| Resource Gallery - <span class="text-gradient">Cyber Security</span> | ||
| </h1> | ||
| <p class="instructions"> | ||
| To contribute, open the directory | ||
| <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages/opensource">src/pages/cybersecurity</a></code> | ||
| on GitHub.<br /> | ||
| <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> | ||
| Improve the "Resource Gallery" and earn credits as an early contributor🎉 | ||
| </p> | ||
|
|
||
|
|
||
| <main class="mt-16"> | ||
| <ul class="grid gap-16 max-w-4xl mx-auto"> | ||
| { | ||
| posts.map((post, index) => ( | ||
| <li> | ||
| <a href={post.url}> | ||
| <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> | ||
| <Picture | ||
| src={post.frontmatter.image} | ||
| widths={[200, 400, 800]} | ||
| sizes="(max-width: 800px) 100vw, 800px" | ||
| aspectRatio="16:9" | ||
| alt="Thumbnail" | ||
| loading={index === 0 ? "eager" : "lazy"} | ||
| class="w-full rounded-md aspect-video" | ||
| /> | ||
| <div> | ||
| <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> | ||
| {post.frontmatter.category} | ||
| </span> | ||
|
|
||
| <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 "> | ||
| {post.frontmatter.title} | ||
| </h2> | ||
|
|
||
| <div class="flex gap-2 mt-3"> | ||
| <span class="text-gray-400"> | ||
| {post.frontmatter.author} | ||
| </span> | ||
| <span class="text-gray-400"> | ||
| •{" "} | ||
| </span> | ||
| <time | ||
| class="text-gray-400" | ||
| datetime={ | ||
| post.frontmatter.publishDate | ||
| }> | ||
| {getFormattedDate( | ||
| post.frontmatter.publishDate | ||
| )} | ||
| </time> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| )) | ||
| } | ||
| </ul> | ||
| </main> | ||
| </main> | ||
| </Layout> | ||
|
|
||
| <style> | ||
| main { | ||
| margin: auto; | ||
| padding: 1.5rem; | ||
| max-width: 120ch; | ||
| } | ||
| h1 { | ||
| font-size: 3rem; | ||
| font-weight: 800; | ||
| margin: 0; | ||
| } | ||
| .text-gradient { | ||
| background-image: var(--accent-gradient); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-size: 400%; | ||
| background-position: 0%; | ||
| } | ||
| .instructions { | ||
| line-height: 1.6; | ||
| margin: 1rem 0; | ||
| border: 1px solid rgba(var(--accent), 25%); | ||
| background-color: white; | ||
| padding: 1rem; | ||
| border-radius: 0.4rem; | ||
| } | ||
| .instructions code { | ||
| font-size: 0.875em; | ||
| font-weight: bold; | ||
| background: rgba(var(--accent), 12%); | ||
| color: rgb(var(--accent)); | ||
| border-radius: 4px; | ||
| padding: 0.3em 0.45em; | ||
| } | ||
| .instructions strong { | ||
| color: rgb(var(--accent)); | ||
| } | ||
| .link-card-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); | ||
| gap: 1rem; | ||
| padding: 0; | ||
| } | ||
|
|
||
| :root { | ||
| --accent: 124, 58, 237; | ||
| --accent-gradient: linear-gradient( | ||
| 45deg, | ||
| rgb(var(--accent)), | ||
| #000000 30%, | ||
| rgb(255, 255, 255) 60% | ||
| ); | ||
| } | ||
| /* html { | ||
| font-family: system-ui, sans-serif; | ||
| background-color: #F6F6F6; | ||
| } */ | ||
| code { | ||
| font-family: Menlo, Monaco, Lucida Console, Liberation Mono, | ||
| DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; | ||
| } | ||
| </style> |