From 94f1d7a0fe02443726b849d6432d96ffd77efb7f Mon Sep 17 00:00:00 2001 From: Cassidy Williams Date: Tue, 18 Oct 2022 17:09:54 -0500 Subject: [PATCH 1/4] Update tag and post styling --- src/components/Post.astro | 12 ++++++------ src/global.css | 35 ++++++++++++++++++++++++++++++++++- src/pages/tag/[tag].astro | 3 --- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/components/Post.astro b/src/components/Post.astro index 20c19e7..993b61a 100644 --- a/src/components/Post.astro +++ b/src/components/Post.astro @@ -3,7 +3,7 @@ const { slug, title, tags, description, date } = Astro.props; --- -
  • +
  • {title}
    {description && {description}} - +
    • \ No newline at end of file diff --git a/src/global.css b/src/global.css index 43dc352..70634ea 100644 --- a/src/global.css +++ b/src/global.css @@ -19,8 +19,8 @@ background-color: var(--highlight); color: var(--black); } +html, body { - font-family: 'Roboto Mono', monospace; margin: auto; padding: 20px; max-width: 65ch; @@ -30,6 +30,11 @@ body { line-height: 1.8; color: var(--black); } +html, +body, +button { + font-family: "Roboto Mono", monospace; +} h1, h2, h3, @@ -40,6 +45,16 @@ strong, b { color: var(--black); } + +body.dark-mode, +body.dark-mode button, +body.dark-mode .go-home, +button.dark-mode, +button.dark-mode button { + background: var(--black); + color: var(--white); +} + a { color: var(--pink); } @@ -54,6 +69,24 @@ nav a:not(:last-child) { padding: 0 12px 0 0; } +.post { + margin: 0 0 30px 0; +} + +.post .title { + font-size: 1.3em; +} + +.tag { + margin-right: 20px; + color: var(--gray); + font-size: 0.8rem; +} +.tag:hover { + cursor: pointer; + font-weight: bold; +} + textarea { width: 100%; font-size: 16px; diff --git a/src/pages/tag/[tag].astro b/src/pages/tag/[tag].astro index c368432..6fa578c 100644 --- a/src/pages/tag/[tag].astro +++ b/src/pages/tag/[tag].astro @@ -47,9 +47,6 @@ const { tag: currentTag } = Astro.params; ul li { display: flex; } - ul li a:visited { - color: #8e32dc; - } From fe83c6b7a4079815697433a689fd301cd76454ae Mon Sep 17 00:00:00 2001 From: Cassidy Williams Date: Tue, 18 Oct 2022 18:08:48 -0500 Subject: [PATCH 2/4] Add random posts to homepage with tags --- src/components/RandomPosts.astro | 16 ++++++++++++++++ src/pages/index.astro | 32 +++++++++++++++++++++++++++++--- 2 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 src/components/RandomPosts.astro diff --git a/src/components/RandomPosts.astro b/src/components/RandomPosts.astro new file mode 100644 index 0000000..9149bc1 --- /dev/null +++ b/src/components/RandomPosts.astro @@ -0,0 +1,16 @@ +--- +import Post from '../components/Post.astro'; + +const { allPosts } = Astro.props; + +let posts = allPosts.sort(() => 0.5 - Math.random()).slice(0, 3) +--- + + +
      + {posts.map( + ({url, frontmatter: { description, slug, title, tags, added: date }}) => ( + + ))} +
    +     \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 007bf2d..e5aaf85 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,9 +2,31 @@ import BaseHead from '../components/BaseHead.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; +import RandomPosts from '../components/RandomPosts.astro'; import ColorScript from '../components/ColorScript.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; -import {Content as About} from './about.md'; +import { Content as About } from './about.md'; + +const posts = (await Astro.glob('../posts/*.{md,mdx}')); + +// Get tags from all posts +const getTags = posts.map((post) => { + const postTags = post.frontmatter.tags; + let allTags = [] + + if (postTags.length > 0) { + postTags.forEach((tag) => { + if (allTags.indexOf(tag) === -1) { + allTags.push(tag); + } + }); + } + return allTags; +}).flat(1); +// Make the tags unique +let tags = [...new Set(getTags)]; + + --- @@ -18,10 +40,14 @@ import {Content as About} from './about.md';

    Here's a sampler of some posts

    -

    hello blah blah blah

    +

    View posts by tag

    -

    hello blah blah blah

    +

    + {tags && tags.map(tag => ( + <>#{tag}{` `} + ))} +