~repos /website

#astro#js#html#css

git clone https://pyrossh.dev/repos/website.git

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

Readme
|
Commits
|
Files
8cff5481 — pyrossh

6 months ago 
improve repos
Files changed (17) hide show
  1. bun.lock +3 -3
  2. package.json +2 -2
  3. src/assets/logos/bruno.png +0 -0
  4. src/assets/logos/inkscape.png +0 -0
  5. src/assets/logos/onlybible.png +0 -0
  6. src/assets/logos/pika.png +0 -0
  7. src/assets/logos/void.png +0 -0
  8. src/assets/logos/zen.svg +20 -0
  9. src/components/Commit.astro +44 -0
  10. src/consts.ts +53 -0
  11. src/content.config.ts +8 -3
  12. src/pages/index.astro +11 -81
  13. src/pages/index.module.css +4 -0
  14. src/pages/repos/[...slug]/branches/index.astro +21 -0
  15. src/pages/repos/[...slug]/commits/index.astro +3 -29
  16. src/pages/repos/[...slug]/index.astro +13 -26
  17. src/pages/repos/[...slug]/index.module.css +7 -22
bun.lock CHANGED
@@ -10,9 +10,9 @@
10
10
  "@effective/css-reset": "^3.2.0",
11
11
  "@tailwindcss/vite": "^4.1.4",
12
12
  "astro": "^5.7.5",
13
- "date-fns": "^4.1.0",
14
13
  "simple-git": "^3.27.0",
15
14
  "tailwindcss": "^4.1.4",
15
+ "timeago.js": "^4.0.2",
16
16
  },
17
17
  "devDependencies": {
18
18
  "@playwright/test": "^1.52.0",
@@ -351,8 +351,6 @@
351
351
 
352
352
  "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
353
353
 
354
- "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
355
-
356
354
  "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
357
355
 
358
356
  "decode-named-character-reference": ["decode-named-character-reference@1.1.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w=="],
@@ -787,6 +785,8 @@
787
785
 
788
786
  "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
789
787
 
788
+ "timeago.js": ["timeago.js@4.0.2", "", {}, "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w=="],
789
+
790
790
  "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
791
791
 
792
792
  "tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
package.json CHANGED
@@ -14,9 +14,9 @@
14
14
  "@effective/css-reset": "^3.2.0",
15
15
  "@tailwindcss/vite": "^4.1.4",
16
16
  "astro": "^5.7.5",
17
- "date-fns": "^4.1.0",
18
17
  "simple-git": "^3.27.0",
19
- "tailwindcss": "^4.1.4"
18
+ "tailwindcss": "^4.1.4",
19
+ "timeago.js": "^4.0.2"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@playwright/test": "^1.52.0",
src/assets/logos/bruno.png ADDED
Binary file
src/assets/logos/inkscape.png DELETED
Binary file
src/assets/logos/onlybible.png DELETED
Binary file
src/assets/logos/pika.png ADDED
Binary file
src/assets/logos/void.png ADDED
Binary file
src/assets/logos/zen.svg ADDED
@@ -0,0 +1,20 @@
1
+ <svg width="1058" height="1058" viewBox="0 0 1058 1058" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g filter="url(#filter0_d_9_47)">
3
+ <rect x="17" y="3" width="1024" height="1024" rx="225" fill="#202020"/>
4
+ <circle cx="529" cy="515" r="340" stroke="#F2F0E3" stroke-width="70"/>
5
+ <circle cx="529" cy="515" r="224.915" stroke="#F2F0E3" stroke-width="51"/>
6
+ <circle cx="529" cy="515" r="129.018" stroke="#F2F0E3" stroke-width="31"/>
7
+ </g>
8
+ <defs>
9
+ <filter id="filter0_d_9_47" x="0.6" y="0.6" width="1056.8" height="1056.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
10
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
11
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
12
+ <feOffset dy="14"/>
13
+ <feGaussianBlur stdDeviation="8.2"/>
14
+ <feComposite in2="hardAlpha" operator="out"/>
15
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
16
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9_47"/>
17
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9_47" result="shape"/>
18
+ </filter>
19
+ </defs>
20
+ </svg>
src/components/Commit.astro ADDED
@@ -0,0 +1,44 @@
1
+ ---
2
+ import { format } from "timeago.js";
3
+
4
+ const { title, author_name, hash, date, message } = Astro.props;
5
+ ---
6
+
7
+ <div class="event">
8
+ <div>
9
+ <a href={`/repos/${title}/commits/${hash}`} title={hash} rel="nofollow">
10
+ {hash.substring(0, 8)}
11
+ </a>
12
+ — {author_name}
13
+ <small class="pull-right">
14
+ <a href={`/repos/${title}/logs?from=??`} rel="nofollow">
15
+ <span title={date}>
16
+ {format(date)}
17
+ </span>
18
+ </a>
19
+ </small>
20
+ </div>
21
+ <pre class="commit">{message}</pre>
22
+ </div>
23
+
24
+ <style>
25
+ .event {
26
+ background: #131618;
27
+ color: #fff;
28
+ text-overflow: ellipsis;
29
+ overflow: hidden;
30
+ padding: 0.5rem;
31
+ margin: 0.5rem 0;
32
+ font-size: 11pt;
33
+
34
+ a {
35
+ color: #3395ff;
36
+ }
37
+
38
+ small {
39
+ font-size: 85%;
40
+ font-weight: 400;
41
+ float: right;
42
+ }
43
+ }
44
+ </style>
src/consts.ts CHANGED
@@ -57,4 +57,57 @@ export const REPOS = [
57
57
  title: "tide-jsx",
58
58
  description: "Tide + JSX"
59
59
  },
60
+ ]
61
+ export const TOOLS = [
62
+ {
63
+ name: "Stats",
64
+ link: "https://github.com/exelban/stats",
65
+ image: import("@/assets/logos/stats.png"),
66
+ },
67
+ {
68
+ name: "Void",
69
+ link: "https://github.com/voideditor/void",
70
+ image: import("@/assets/logos/void.png"),
71
+ },
72
+ {
73
+ name: "Helix",
74
+ link: "https://github.com/helix-editor/helix",
75
+ image: import("@/assets/logos/helix.png"),
76
+ },
77
+ {
78
+ name: "Nushell",
79
+ link: "https://github.com/nushell/nushell",
80
+ image: import("@/assets/logos/nu.png"),
81
+ },
82
+ {
83
+ name: "Ghostty",
84
+ link: "https://github.com/ghostty-org/ghostty",
85
+ image: import("@/assets/logos/ghostty.png"),
86
+ },
87
+ {
88
+ name: "Zellij",
89
+ link: "https://zellij.dev/",
90
+ image: import("@/assets/logos/zellij.png"),
91
+ },
92
+ {
93
+ name: "Zen",
94
+ link: "https://github.com/zen-browser/desktop",
95
+ image: import("@/assets/logos/zen.svg"),
96
+ },
97
+ {
98
+ name: "Bruno",
99
+ link: "https://github.com/usebruno/bruno",
100
+ image: import("@/assets/logos/bruno.png"),
101
+ },
102
+ {
103
+ name: "Secretive",
104
+ link: "https://github.com/maxgoedjen/secretive",
105
+ image: null,
106
+ }
107
+ // TODO: check if this is useful as well
108
+ // {
109
+ // name: "Hyvector",
110
+ // link: "https://www.hyvector.com/",
111
+ // image: import("@/assets/logos/hyvector.png"),
112
+ // },
60
113
  ]
src/content.config.ts CHANGED
@@ -13,21 +13,24 @@ export const collections = {
13
13
  const repoPath = process.cwd() + "/../" + r.title;
14
14
  const readmePath = repoPath + "/README.md";
15
15
  console.log("loading repo " + repoPath)
16
- const res = await simpleGit(repoPath).log();
16
+ const git = simpleGit(repoPath)
17
+ const commits = await git.log();
17
18
  ctx.store.set({
18
19
  id: r.title,
19
20
  data: {
20
21
  title: r.title,
21
22
  description: r.description,
22
- commits: res.all.map((item) => ({
23
+ commits: commits.all.map((item) => ({
23
24
  hash: item.hash,
24
25
  message: item.message,
26
+ body: `${item.message}\n\n${item.body}`,
25
27
  author_name: item.author_name,
26
28
  date: item.date,
29
+ refs: item.refs,
27
30
  })),
28
31
  },
29
32
  rendered: {
30
- html: fs.existsSync(readmePath) ? await (await import(readmePath)).compiledContent() : "",
33
+ html: fs.existsSync(readmePath) ? await (await import(/* @vite-ignore */readmePath)).compiledContent() : "",
31
34
  }
32
35
  });
33
36
  }
@@ -39,8 +42,10 @@ export const collections = {
39
42
  commits: z.array(z.object({
40
43
  hash: z.string(),
41
44
  message: z.string(),
45
+ body: z.string(),
42
46
  author_name: z.string(),
43
47
  date: z.string(),
48
+ refs: z.string(),
44
49
  // diff: z.string(),
45
50
  })),
46
51
  }),
src/pages/index.astro CHANGED
@@ -1,15 +1,7 @@
1
1
  ---
2
2
  import { Image } from "astro:assets";
3
3
  import Layout from "@/layouts/Base.astro";
4
- import stats from "@/assets/logos/stats.png";
5
- import code from "@/assets/logos/code.png";
6
- import helix from "@/assets/logos/helix.png";
7
- import nu from "@/assets/logos/nu.png";
8
- import zellij from "@/assets/logos/zellij.png";
9
- import inkscape from "@/assets/logos/inkscape.png";
10
- import ghostty from "@/assets/logos/ghostty.png";
11
- import { REPOS } from "@/consts";
4
+ import { REPOS, TOOLS } from "@/consts";
12
- import Log from "@/containers/Log.astro";
13
5
  import styles from "./index.module.css";
14
6
  ---
15
7
 
@@ -87,77 +79,16 @@ import styles from "./index.module.css";
87
79
  <section class={styles.tools}>
88
80
  <h2>Tools</h2>
89
81
  <ul>
82
+ {
83
+ TOOLS.map((tool) => (
90
- <li>
84
+ <li>
91
- <a
92
- href="https://github.com/exelban/stats"
93
- target="_blank"
94
- rel="noopener noreferrer"
85
+ <a href={tool.link} target="_blank" rel="noopener noreferrer">
95
- >
96
- <div>Stats</div>
86
+ <div>{tool.name}</div>
97
- <Image src={stats} alt="Stats" />
87
+ {tool.image && <Image src={tool.image} alt={tool.name} />}
98
- </a>
88
+ </a>
99
- </li>
89
+ </li>
100
- <li>
101
- <a
102
- href="https://github.com/microsoft/vscode"
103
- target="_blank"
104
- rel="noopener noreferrer"
105
- >
90
+ ))
106
- <div>VS Code</div>
107
- <Image src={code} alt="VS Code" />
108
- </a>
109
- </li>
110
- <li>
111
- <a
112
- href="https://github.com/helix-editor/helix"
113
- target="_blank"
114
- rel="noopener noreferrer"
115
- >
91
+ }
116
- <div>Helix</div>
117
- <Image src={helix} alt="Helix" />
118
- </a>
119
- </li>
120
- <li>
121
- <a
122
- href="https://github.com/nushell/nushell"
123
- target="_blank"
124
- rel="noopener noreferrer"
125
- >
126
- <div>Nushell</div>
127
- <Image class="p-0.5 rounded-md" src={nu} alt="nu-shell" />
128
- </a>
129
- </li>
130
- <li>
131
- <a
132
- href="https://github.com/ghostty-org/ghostty"
133
- target="_blank"
134
- rel="noopener noreferrer"
135
- >
136
- <div>Ghostty</div>
137
- <Image src={ghostty} alt="ghostty" />
138
- </a>
139
- </li>
140
- <li>
141
- <a
142
- href="https://zellij.dev/"
143
- target="_blank"
144
- rel="noopener noreferrer"
145
- >
146
- <div>Zellij</div>
147
- <Image class="w-7 p-0.5" src={zellij} alt="zellij" />
148
- </a>
149
- </li>
150
-
151
- <li>
152
- <a
153
- href="https://inkscape.org/"
154
- target="_blank"
155
- rel="noopener noreferrer"
156
- >
157
- <div>Inkscape</div>
158
- <Image src={inkscape} alt="inkscape" />
159
- </a>
160
- </li>
161
92
  </ul>
162
93
  </section>
163
94
  <section>
@@ -177,5 +108,4 @@ import styles from "./index.module.css";
177
108
  </section>
178
109
  </div>
179
110
  </div>
180
- <!-- <Log /> -->
181
111
  </Layout>
src/pages/index.module.css CHANGED
@@ -99,6 +99,7 @@ section {
99
99
  .tools {
100
100
  img {
101
101
  width: 36px;
102
+ height: 36px;
102
103
  }
103
104
 
104
105
  ul {
@@ -113,11 +114,14 @@ section {
113
114
  }
114
115
 
115
116
  li {
117
+ display: flex;
118
+ align-items: center;
116
119
  background-color: var(--color-box-bg);
117
120
  padding: 0.25rem;
118
121
 
119
122
  a {
120
123
  display: flex;
124
+ flex: 1;
121
125
  flex-direction: row;
122
126
  align-items: center;
123
127
  text-align: left;
src/pages/repos/[...slug]/branches/index.astro ADDED
@@ -0,0 +1,21 @@
1
+ ---
2
+ import { type CollectionEntry, getCollection } from "astro:content";
3
+ import Layout from "@/layouts/Base.astro";
4
+ import Commit from "@/components/Commit.astro";
5
+
6
+ export async function getStaticPaths() {
7
+ const repos = await getCollection("repos");
8
+ return repos.map((repo) => ({
9
+ params: { slug: repo.id },
10
+ props: repo,
11
+ }));
12
+ }
13
+ type Props = CollectionEntry<"repos">;
14
+ const {
15
+ data: { title, description, branches },
16
+ } = Astro.props;
17
+ ---
18
+
19
+ <Layout title={title} description={description}>
20
+ {branches.map((branch) => <Commit {...branch} />)}
21
+ </Layout>
src/pages/repos/[...slug]/commits/index.astro CHANGED
@@ -1,9 +1,7 @@
1
1
  ---
2
2
  import { type CollectionEntry, getCollection } from "astro:content";
3
- import { render } from "astro:content";
4
3
  import Layout from "@/layouts/Base.astro";
5
- import { intlFormatDistance } from "date-fns";
6
- import styles from "./slug.module.css";
4
+ import Commit from "@/components/Commit.astro";
7
5
 
8
6
  export async function getStaticPaths() {
9
7
  const repos = await getCollection("repos");
@@ -16,33 +14,9 @@ type Props = CollectionEntry<"repos">;
16
14
  const {
17
15
  data: { title, description, commits },
18
16
  } = Astro.props;
17
+ console.log("commits", commits);
19
18
  ---
20
19
 
21
20
  <Layout title={title} description={description}>
22
- <div class="event-list mb-2">
23
- {
24
- commits.map((commit) => (
25
- <div class={styles.event}>
26
- <div>
27
- <a
28
- href={`/repos/${title}/commits/${commit.hash}`}
29
- title={commit.hash}
30
- rel="nofollow"
31
- >
32
- {commit.hash.substring(0, 8)}
33
- </a>
34
- — {commit.author_name}
35
- <small class="pull-right">
36
- <a href={`/repos/${title}/logs?from=??`} rel="nofollow">
37
- <span title={commit.date}>
38
- {intlFormatDistance(commit.date, new Date())}
39
- </span>
40
- </a>
41
- </small>
42
- </div>
43
- <pre class="commit">{commit.message}</pre>
21
+ {commits.map((commit) => <Commit {...commit} message={commit.body} />)}
44
- </div>
45
- ))
46
- }
47
- </div>
48
22
  </Layout>
src/pages/repos/[...slug]/index.astro CHANGED
@@ -3,6 +3,7 @@ import { type CollectionEntry, getCollection } from "astro:content";
3
3
  import { render } from "astro:content";
4
4
  import Layout from "@/layouts/Base.astro";
5
5
  import { intlFormatDistance } from "date-fns";
6
+ import Commit from "@/components/Commit.astro";
6
7
  import styles from "./index.module.css";
7
8
 
8
9
  export async function getStaticPaths() {
@@ -23,7 +24,7 @@ const { Content } = await render(Astro.props);
23
24
 
24
25
  <Layout title={title} description={description}>
25
26
  <div class={styles.header}>
26
- <h1>{title}</h1>
27
+ <h1><a href="/">~repos</a>/{title}</h1>
27
28
  </div>
28
29
  <hr />
29
30
  <div class={styles.headerExtension}>
@@ -33,30 +34,7 @@ const { Content } = await render(Astro.props);
33
34
  <div class={styles.summary}>
34
35
  <div>
35
36
  <div class="event-list mb-2">
36
- {
37
- latestCommits.map((commit) => (
38
- <div class={styles.event}>
39
- <div>
40
- <a
41
- href={`/repos/${title}/commits/${commit.hash}`}
42
- title={commit.hash}
43
- rel="nofollow"
44
- >
45
- {commit.hash.substring(0, 8)}
46
- </a>
47
- — {commit.author_name}
48
- <small class="pull-right">
49
- <a href={`/repos/${title}/logs?from=??`} rel="nofollow">
50
- <span title={commit.date}>
51
- {intlFormatDistance(commit.date, new Date())}
52
- </span>
53
- </a>
54
- </small>
55
- </div>
56
- <pre class="commit">{commit.message}</pre>
37
+ {latestCommits.map((commit) => <Commit {...commit} />)}
57
- </div>
58
- ))
59
- }
60
38
  </div>
61
39
  </div>
62
40
  <div class={styles.sectionRight}>
@@ -107,7 +85,7 @@ const { Content } = await render(Astro.props);
107
85
  </a>
108
86
  </dd>
109
87
  <dt>read/write</dt>
110
- <dd>git@pyrossh.dev:~repos/website.git</dd>
88
+ <dd>git@pyrossh.dev:~repos/{title}.git</dd>
111
89
  </dl>
112
90
  <div class={styles.bottom}>
113
91
  <a href="/~pyrossh/website/send-email" class={styles.btnPrimary}
@@ -202,6 +180,15 @@ const { Content } = await render(Astro.props);
202
180
  .markdown {
203
181
  font-size: 12pt;
204
182
 
183
+ h1 {
184
+ text-align: left;
185
+ font-size: 24pt;
186
+ /* font-weight: 500; */
187
+ line-height: 1;
188
+ margin-top: 0.5rem;
189
+ margin-bottom: 0.1rem;
190
+ }
191
+
205
192
  table {
206
193
  width: 100%;
207
194
  max-width: 100%;
src/pages/repos/[...slug]/index.module.css CHANGED
@@ -11,11 +11,15 @@
11
11
 
12
12
  h1 {
13
13
  text-align: left;
14
- font-size: 27pt;
14
+ font-size: 24pt;
15
- font-weight: bold;
15
+ /* font-weight: 500; */
16
16
  line-height: 1;
17
17
  margin-top: 0.5rem;
18
18
  margin-bottom: 0.1rem;
19
+
20
+ a {
21
+ color: #3395ff;
22
+ }
19
23
  }
20
24
  }
21
25
 
@@ -72,32 +76,13 @@ time {
72
76
  display: grid;
73
77
  grid-template-columns: auto auto;
74
78
  gap: 12px;
79
+ margin-top: 0.5rem;
75
80
 
76
81
  @media (max-width: 720px) {
77
82
  grid-template-columns: auto;
78
83
  }
79
84
  }
80
85
 
81
- .event {
82
- background: #131618;
83
- color: #fff;
84
- text-overflow: ellipsis;
85
- overflow: hidden;
86
- padding: 0.5rem;
87
- margin: 0.5rem 0;
88
- font-size: 11pt;
89
-
90
- a {
91
- color: #3395ff;
92
- }
93
-
94
- small {
95
- font-size: 85%;
96
- font-weight: 400;
97
- float: right;
98
- }
99
- }
100
-
101
86
  .sectionRight {
102
87
  display: grid;
103
88
  grid-template-columns: auto;