src/pages/index.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

---
import MicroBlog from "@components/templates/MicroBlog.astro";
import SimplePostList from "@components/templates/SimplePostList.astro";
import Base from "@layouts/Base.astro";
import {
  fromPosts,
  isMicro,
  isOriginal,
  sortLastUpdated,
} from "@lib/collection/helpers";
import { env } from "@lib/environment";

const { PUBLIC_SITE_TITLE } = env;

const originals = await fromPosts(
  isOriginal,
  (originals) => originals.sort(sortLastUpdated).slice(0, 10),
);
const micro = await fromPosts(
  isMicro,
  (originals) => originals.sort(sortLastUpdated)?.[0],
);
---

<Base title={PUBLIC_SITE_TITLE}>
  <main>
    <article>
      <h2>Viva abril!</h2>
      <figure>
        <blockquote lang="es-VE" translate="no">
          <i>«Los que le cierran el camino a la revolución pacífica le abren al
            mismo tiempo el camino a la revolución violenta.»</i>
        </blockquote>
        <figcaption>
          &mdash; Hugo Chávez.
          <p>
            <small>Tradução: &ldquo;Aqueles que fecham o caminho para a
              revolução pacífica abrem, ao mesmo tempo, o caminho para a
              revolução violenta&rdquo;.</small>
          </p>
        </figcaption>
      </figure>
      <p class="lead"><em>Portugal <em>fez</em> diferente!</em></p>
    </article>
    {
      (originals.length > 0 || micro) && (
        <section id="posts">
          <h2>Últimas aplicações atualizadas</h2>
          {micro && <div id="last-micro"><MicroBlog {...micro} /></div>}
          <div id="last-originals"><SimplePostList posts={originals} /></div>
        </section>
      )
    }
  </main>
</Base>

<style>
  figure:has(blockquote) {
    border-inline-start: 2px solid var(--color-active);
    padding-inline-start: calc(var(--size-7) * 1em);

    & > blockquote {
      margin-block-start: calc(var(--size-7) * 1em);
      margin-inline-start: 0;
      border-inline-start: 2px solid var(--color-light);
      padding-inline-start: calc(var(--size-7) * 1em);
    }
  }

  #posts {
    position: relative;

    & > h2 {
      float: inline-start;
    }
  }

  #last-micro {
    clear: inline-start;
    max-width: 40ch;
    margin-inline: auto;
  }

  #last-originals {
    clear: inline-start;
  }

  @media (width >= 30rem) {
    #posts {
      & > h2 {
        float: inline-start;
        max-width: calc(
          100svw
            - calc(
            50svw
              + calc(
              calc(2 * calc(var(--size-4) * 1em)) + calc(var(--size-2) * 1em)
            )
          )
        );
      }
    }

    #last-micro {
      clear: none;
      float: inline-end;
      width: 50svw;
      margin-inline-start: calc(var(--size-2) * 1em);
      margin-block-end: calc(var(--size-2) * 1em);
    }
  }
</style>