~repos /website

#astro#js#html#css

git clone https://pyrossh.dev/repos/website.git
Discussions: https://groups.google.com/g/rust-embed-devs

木 Personal website of pyrossh. Built with astrojs, shiki, vite.


src/components/Commit.astro CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
- import { format } from "timeago.js";
3
- import type { Commit } from "../utils/files";
2
+ import type { Commit } from "../utils/commit";
3
+ import TimeAgo from "./TimeAgo.astro";
4
4
 
5
5
  type Props = {
6
6
  repoId: string;
@@ -22,9 +22,7 @@ const { author_name, hash, date, message, branches, tags } = commit;
22
22
  <h3>{branches}</h3>
23
23
  <h3>{tags}</h3>
24
24
  <a href={`/repos/${repoId}/logs?from=??`} rel="nofollow">
25
- <span title={date}>
25
+ <TimeAgo date={date} />
26
- {format(date)}
27
- </span>
28
26
  </a>
29
27
  </small>
30
28
  </div>
src/components/Footer.astro CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  import Wrapper from "./Wrapper.astro";
3
3
 
4
- const today = new Date();
4
+ const year = new Date().getFullYear();
5
5
  ---
6
6
 
7
7
  <footer>
@@ -9,13 +9,22 @@ const today = new Date();
9
9
  <div class="container">
10
10
  <div class="spacer"></div>
11
11
  <p class="copyright-container">
12
- Copyright © {today.getFullYear()}
12
+ Copyright © <current-year>{year}</current-year>
13
13
  <a class="link" href="https://pyrossh.dev"> pyrossh </a>
14
14
  </p>
15
15
  </div>
16
16
  </Wrapper>
17
17
  </footer>
18
18
  <div class="safe-area"></div>
19
+ <script>
20
+ class CurrentYear extends HTMLElement {
21
+ connectedCallback() {
22
+ this.innerHTML = new Date().getFullYear().toString();
23
+ }
24
+ }
25
+
26
+ customElements.define("current-year", CurrentYear);
27
+ </script>
19
28
  <style>
20
29
  footer {
21
30
  background: #131618;
src/components/TimeAgo.astro ADDED
@@ -0,0 +1,32 @@
1
+ ---
2
+ import { format } from "timeago.js";
3
+
4
+ type Props = {
5
+ date: string;
6
+ };
7
+
8
+ const { date } = Astro.props;
9
+ ---
10
+
11
+ <time-ago data-date={date}>
12
+ {format(date)}
13
+ </time-ago>
14
+
15
+ <script>
16
+ import { format } from "timeago.js";
17
+
18
+ class TimeAgo extends HTMLElement {
19
+ connectedCallback() {
20
+ const date = this.dataset.date || new Date();
21
+ this.textContent = format(date);
22
+ }
23
+ }
24
+
25
+ customElements.define("time-ago", TimeAgo);
26
+ </script>
27
+
28
+ <style>
29
+ time-ago {
30
+ display: inline;
31
+ }
32
+ </style>