A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1---
2/**
3 * Shared reading-page footer — used on single posts and on the publication
4 * index so both end the same way: the publication name + its RSS feed on the
5 * left, a quiet "Powered by SkyPress" attribution on the right.
6 *
7 * Read-path component: data is passed in as props, and it pulls in none of the
8 * browser-only editor packages (see AGENTS.md).
9 */
10interface Props {
11 /** Publication name, shown as the left-hand link. */
12 name: string;
13 /** Link to the publication page (e.g. `/@handle/slug`). */
14 pubUrl: string;
15 /** That publication's RSS feed URL. */
16 feedHref: string;
17}
18
19const { name, pubUrl, feedHref } = Astro.props;
20---
21
22<footer class="pub-footer">
23 <span class="pub-footer__left">
24 <a class="pub-footer__pub" href={pubUrl}>{name}</a>
25 <a class="pub-footer__feed" href={feedHref} aria-label={`${ name } RSS feed`}>
26 <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
27 <circle cx="4.5" cy="19.5" r="2.5" />
28 <path d="M2 10.5v3.2a7.3 7.3 0 0 1 7.3 7.3h3.2A10.5 10.5 0 0 0 2 10.5Z" />
29 <path d="M2 3.6v3.2A14.2 14.2 0 0 1 16.2 21h3.2A17.4 17.4 0 0 0 2 3.6Z" />
30 </svg>
31 </a>
32 </span>
33 <a class="pub-footer__powered" href="/">Powered by SkyPress</a>
34</footer>
35
36<style>
37 .pub-footer {
38 display: flex;
39 align-items: center;
40 justify-content: space-between;
41 flex-wrap: wrap;
42 gap: 0.5rem 1.5rem;
43 margin-top: 3.5rem;
44 padding-top: 1.5rem;
45 border-top: 1px solid var(--line);
46 }
47 .pub-footer__left {
48 display: inline-flex;
49 align-items: center;
50 gap: 0.5rem;
51 }
52 .pub-footer__pub {
53 color: var(--sun);
54 text-decoration: none;
55 }
56 .pub-footer__pub:hover {
57 text-decoration: underline;
58 text-underline-offset: 0.2em;
59 }
60 .pub-footer__feed {
61 display: inline-flex;
62 align-items: center;
63 color: var(--muted);
64 transition: color 0.12s ease;
65 }
66 .pub-footer__feed:hover {
67 color: var(--sun);
68 }
69 .pub-footer__powered {
70 color: var(--muted);
71 font-family: var(--font-mono);
72 font-size: 0.72rem;
73 letter-spacing: 0.04em;
74 text-decoration: none;
75 }
76 .pub-footer__powered:hover {
77 color: var(--sun);
78 }
79</style>