diff --git a/components/Footer.ts b/components/Footer.ts index 22b4ede..d7f5f9b 100644 --- a/components/Footer.ts +++ b/components/Footer.ts @@ -1,12 +1,11 @@ import { html } from "@mastrojs/mastro"; -export const Footer = () => - html` - - `; +export const Footer = () => html` + +`; diff --git a/data/posts/2024-01-30-hello-world.md b/data/posts/2024-01-30-hello-world.md index 6e533bf..83e7e2b 100644 --- a/data/posts/2024-01-30-hello-world.md +++ b/data/posts/2024-01-30-hello-world.md @@ -1,28 +1,6 @@ --- title: Hello World -date: 2024-01-30 +date: 2026-02-13 --- -Markdown is just a simpler syntax for the most commonly used HTML -elements when writing body text. - -A blank line, like above, marks a new paragraph (HTML `

`). -A line starting with `##` is an HTML `

`: - -## Lists - -An example of an unordered list: - -- item one -- item two - -And an ordered list: - -1. item one -2. item two - - -## More info - -See [CommonMark](https://commonmark.org) for more -information about Markdown. +TODO... diff --git a/data/posts/2024-01-31-second-post.md b/data/posts/2024-01-31-second-post.md deleted file mode 100644 index bab6f88..0000000 --- a/data/posts/2024-01-31-second-post.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Second Post -date: 2024-01-31 ---- - -This is our second blog post. diff --git a/routes/index.server.ts b/routes/index.server.ts index 7dcff00..b102783 100644 --- a/routes/index.server.ts +++ b/routes/index.server.ts @@ -1,88 +1,32 @@ import { html, htmlToResponse } from "@mastrojs/mastro"; import { Layout } from "../components/Layout.ts"; +import { readMarkdownFiles } from "@mastrojs/markdown"; -export const GET = () => - htmlToResponse( +export const GET = async () => { + const posts = await readMarkdownFiles("data/posts/*.md"); + + return htmlToResponse( Layout({ title: "Home", children: html` - + + + -

Common HTML elements

-

- Let's go through the most important HTML elements to - structure your content: -

+

About me

+

I am a (human) developer.

-

Paragraphs

-

The p element marks a paragraph of text.

- -

Headings

-

- At the very top of the body, we have the heading of this page - in an h1 element. This is what search engines (like Google) - and screen readers (used by visually impaired readers) look for - when they want to know what the page's title is. Therefore, you - should only ever have one h1 element on any given page. -

-

- The h2 element is a sub-heading. HTML has h1 up to h6 elements, - to mark progressively deeper nested sub-headings. You should - use those to mark the structure of your page. All headings - together should act like a table of contents for your page. -

- -

Lists

-

- Let's add an ordered list - (meaning the list markers will be numbers): -

-
    -
  1. list item one
    2. -
  2. list item two
    3. -
  3. list item three
    4. -
-

- and an unordered list - (the list markers will be bullet points): -

- - -

Formatting

-

- Note how all elements introduced so far cause a line-break - before and after them? That's because they are so-called - block elements. -

-

- However, links (like the a element we just saw), - emphasis (rendered as italics), and - strong emphasis (rendered bold), - are all inline elements. That means they don't cause - any line-breaks by default. -

- -

An image

- A chair -

- We will add an image file chair.jpg later. -

-

- For now, note the alt attribute on the image. It is required - and contains "alternative text" that is read to visually - impaired readers, or shown if the image fails to load. -

-

- If the image is relevant content, the alt text should - therefore be a brief description of what's in the image. - If the image is just decoration, you should use alt="". -

+

Posts

+
+ ${posts.map( + (post) => html` + + ${post.meta.title} + + `, + )} +
`, }), ); +}; diff --git a/routes/news/[slug]/index.server.ts b/routes/posts/[slug]/index.server.ts similarity index 100% rename from routes/news/[slug]/index.server.ts rename to routes/posts/[slug]/index.server.ts diff --git a/routes/news/index.server.ts b/routes/posts/index.server.ts similarity index 65% rename from routes/news/index.server.ts rename to routes/posts/index.server.ts index 830a4db..8de0b72 100644 --- a/routes/news/index.server.ts +++ b/routes/posts/index.server.ts @@ -6,15 +6,13 @@ export const GET = async () => { const posts = await readMarkdownFiles("data/posts/*.md"); return htmlToResponse( Layout({ - title: "News", - children: posts.map((post) => - html` + title: "Posts", + children: posts.map( + (post) => html`

- - ${post.meta.title} - + ${post.meta.title}

- ` + `, ), }), ); diff --git a/routes/styles.css b/routes/styles.css index de2ad1b..f9bd756 100644 --- a/routes/styles.css +++ b/routes/styles.css @@ -80,20 +80,26 @@ h6 { body { display: grid; + color: var(--main-color); grid-template-rows: auto 1fr auto; min-height: 100vh; font-family: Helvetica, Arial, sans-serif; font-size: 18px; margin: 0 auto; - --brand-color: rebeccapurple; + + --brand-bg-color: darkslateblue; + --brand-color: lavenderblush; + + background-color: lavenderblush; + --main-color: #222; } header { - background-color: var(--brand-color); - color: whitesmoke; + background-color: var(--brand-bg-color); + color: var(--brand-color); font-weight: bold; font-size: 50px; - padding: 1.5em 1em 1em 1em; + /* padding: 1.5em 0em 0em 1em; */ } main { @@ -101,14 +107,15 @@ main { } footer { - background-color: var(--brand-color); - color: whitesmoke; - padding: 2em 1em; + background-color: var(--brand-bg-color); + color: var(--brand-color); + padding: 1em; margin-top: 3em; } p { line-height: 1.3; + margin-bottom: 1em; } header > div, @@ -119,11 +126,30 @@ footer > div { margin: 0 auto; } -header > a, -a:visited { - color: white; +header a, +footer a, +header a:visited, +footer a:visited { + color: var(--brand-color); +} + +a { + color: var(--main-color); } a:hover { text-decoration-line: none; } + +.post-list { + display: flex; + flex-direction: column; +} + +h2 { + padding-bottom: 0.5rem; +} + +@view-transition { + navigation: auto; +}