~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
888f8bba — pyrossh

1 month ago 
improve design
Files changed (5) hide show
  1. README.md +1 -1
  2. src/consts.ts +8 -1
  3. src/content.config.ts +6 -0
  4. src/pages/repos/[...slug]/index.astro +25 -125
  5. src/pages/repos/[...slug]/index.module.css +144 -111
README.md CHANGED
@@ -6,7 +6,7 @@ Built with Astro Starter Kit: Blog,
6
6
  bun create astro@latest -- --template blog
7
7
  ```
8
8
 
9
- Features:
9
+ **Features:**
10
10
 
11
11
  - ✅ Minimal styling (make it your own!)
12
12
  - ✅ 100/100 Lighthouse performance
src/consts.ts CHANGED
@@ -14,7 +14,14 @@ export const REPOS = [
14
14
  {
15
15
  title: "rust-embed",
16
16
  description: "rust macro which loads files into the rust binary at compile time during release and loads the file from the fs during dev.",
17
- tags: ['rust', 'proc-macro', 'http']
17
+ tags: ['rust', 'proc-macro', 'http'],
18
+ badges: [
19
+ {
20
+ href: "https://crates.io/crates/rust-embed",
21
+ img: "https://img.shields.io/crates/v/rust-embed.svg",
22
+ alt: "crates.io",
23
+ }
24
+ ]
18
25
  },
19
26
  {
20
27
  title: "website",
src/content.config.ts CHANGED
@@ -34,6 +34,7 @@ export const collections = {
34
34
  title: r.title,
35
35
  description: r.description,
36
36
  tags: r.tags,
37
+ badges: r.badges || [],
37
38
  commits: commits.all.map((item) => ({
38
39
  hash: item.hash,
39
40
  message: item.message,
@@ -53,6 +54,11 @@ export const collections = {
53
54
  title: z.string(),
54
55
  description: z.string().max(80),
55
56
  tags: z.array(z.string()),
57
+ badges: z.array(z.object({
58
+ href: z.string(),
59
+ img: z.string(),
60
+ alt: z.string(),
61
+ })).optional(),
56
62
  commits: z.array(z.object({
57
63
  hash: z.string(),
58
64
  message: z.string(),
src/pages/repos/[...slug]/index.astro CHANGED
@@ -15,7 +15,7 @@ export async function getStaticPaths() {
15
15
  type Props = CollectionEntry<"repos">;
16
16
 
17
17
  const {
18
- data: { title, description, tags, commits },
18
+ data: { title, description, tags, badges, commits },
19
19
  } = Astro.props;
20
20
  const latestCommits = commits.slice(0, 3);
21
21
  const { Content } = await render(Astro.props);
@@ -23,35 +23,35 @@ const { Content } = await render(Astro.props);
23
23
 
24
24
  <Layout title={title} description={description}>
25
25
  <div class={styles.header}>
26
+ <h1>
26
- <h1><a href="/">~repos</a>/{title}</h1>
27
+ <a href="/">~repos</a>
28
+ /{title}
29
+ </h1>
30
+ <div class={styles.badges}>
31
+ {
32
+ badges.map((badge) => (
33
+ <a href={badge.href} target="_blank" rel="noopener noreferrer">
34
+ <img src={badge.img} alt={badge.alt} />
35
+ </a>
36
+ ))
37
+ }
38
+ </div>
27
39
  <div class={styles.tags}>
28
40
  {tags.map((tag) => <span class={styles.tag}>#{tag}</span>)}
29
41
  </div>
30
42
  </div>
31
- <hr />
32
- <div class={styles.headerExtension}>
33
- <h2 class=".expand">{description}</h2>
34
- </div>
35
43
  <div class={styles.info}>
36
- <div>
37
- <span>clone command:</span>
38
- <h3>
44
+ <h3>
39
- git clone
40
- <a href={`https://pyrossh.dev/repos/${title}.git`}>
45
+ <strong>git clone</strong>
46
+ <span>
41
- https://pyrossh.dev/repos/{title}.git
47
+ https://pyrossh.dev/repos/{title}.git
42
- </a>
48
+ </span>
43
- </h3>
49
+ </h3>
44
- </div>
50
+ </div>
45
- <div>
51
+ <div class={styles.headerExtension}>
46
- <span>download command:</span>
52
+ <h2>{description}</h2>
47
- <h3>
48
- wget
49
- <a href={`https://pyrossh.dev/repos/${title}.zip`}>
50
- https://pyrossh.dev/repos/{title}.zip
51
- </a>
52
- </h3>
53
- </div>
54
53
  </div>
54
+ <hr />
55
55
  <div class={styles.nav}>
56
56
  <div>
57
57
  <a href={`/repos/${title}/commits`}>Commits</a>
@@ -64,108 +64,8 @@ const { Content } = await render(Astro.props);
64
64
  <div class={styles.summary}>
65
65
  {latestCommits.map((commit) => <Commit {...commit} />)}
66
66
  </div>
67
+ <hr />
67
68
  <article>
68
69
  <Content />
69
70
  </article>
70
71
  </Layout>
71
- <style>
72
- article {
73
- font-size: 1.1rem;
74
- margin-top: 1rem;
75
-
76
- h1,
77
- h2 {
78
- font-size: 1.5rem;
79
- font-weight: 700;
80
- margin-top: 0.5rem;
81
- margin-bottom: 0.5rem;
82
- }
83
-
84
- h3 {
85
- font-size: 1.15rem;
86
- font-weight: 700;
87
- margin-top: 0.5rem;
88
- margin-bottom: 0.5rem;
89
- }
90
-
91
- p {
92
- font-size: 1.1rem;
93
- padding-bottom: 1rem;
94
- }
95
-
96
- p,
97
- li {
98
- font-size: 1.1rem;
99
- code {
100
- color: var(--color-code-fg) !important;
101
- background: var(--color-code-bg) !important;
102
- word-wrap: break-word;
103
- box-decoration-break: clone;
104
- padding: 2px 4px;
105
- border-radius: 0.2rem;
106
- font-weight: 400;
107
- font-size: 0.8rem;
108
- }
109
- }
110
-
111
- ol {
112
- list-style: decimal;
113
- padding-left: 1.5rem;
114
- margin-bottom: 1rem;
115
- margin-left: 1rem;
116
-
117
- a {
118
- color: var(--color-link);
119
- text-decoration: underline;
120
- }
121
- }
122
-
123
- pre {
124
- font-size: 0.8rem;
125
- font-family: "monospace";
126
- line-height: 1.6;
127
- padding: 16px;
128
- margin: 12px 0px;
129
- }
130
-
131
- blockquote {
132
- padding-left: 0.5rem;
133
- border-left: 3px solid #aaa;
134
- }
135
-
136
- table {
137
- width: 100%;
138
- max-width: 100%;
139
- margin-bottom: 1rem;
140
- border-collapse: collapse;
141
- text-indent: initial;
142
- unicode-bidi: isolate;
143
- border-spacing: 2px;
144
- font-size: 1rem;
145
-
146
- thead {
147
- th {
148
- color: var(--color-text);
149
- padding: 0.1rem 0.75rem;
150
- border: 1px solid var(--color-text);
151
- background-color: var(--color-box-bg);
152
- }
153
- }
154
-
155
- tbody {
156
- td {
157
- position: relative;
158
- background-clip: padding-box;
159
- vertical-align: middle;
160
- padding: 0.1rem 0.75rem;
161
- border: 1px solid var(--color-text);
162
- background-color: var(--color-box-bg);
163
-
164
- label {
165
- margin-bottom: 0;
166
- }
167
- }
168
- }
169
- }
170
- }
171
- </style>
src/pages/repos/[...slug]/index.module.css CHANGED
@@ -1,94 +1,73 @@
1
- h1,
2
- h2 {
1
+ .header {
2
+ display: flex;
3
- margin-top: 0;
3
+ flex-direction: row;
4
+ align-items: baseline;
4
5
 
5
- small {
6
+ @media (max-width: 720px) {
7
+ flex-direction: column;
6
- font-size: 12px;
8
+ align-items: start;
7
9
  }
8
10
  }
9
11
 
10
- /* h3 {
12
+ h1 {
11
- font-size: 1.3rem;
13
+ font-size: 1.6rem;
12
- border-bottom: 1px solid var(--color-gray-200);
14
+ font-weight: 500;
15
+ line-height: 1;
13
- padding-bottom: 0.25rem;
16
+ margin-bottom: 0.1rem;
14
-
15
- small {
16
- font-size: 1rem;
17
- margin-left: 1rem;
18
- }
19
- } */
20
-
21
- h4 {
22
- font-size: 1.1rem;
23
- border-bottom: 1px solid var(--color-gray-200);
24
- padding-bottom: 0.25rem;
25
17
 
26
- small {
18
+ a {
27
- font-size: 0.8rem;
19
+ color: var(--color-link);
28
- margin-left: 1rem;
29
20
  }
30
21
  }
31
22
 
32
- h5 {
23
+ h2 {
33
- font-size: 1rem;
34
- font-weight: bold;
35
- }
36
-
37
-
38
- .header {
39
24
  display: flex;
40
25
  flex: 1;
26
+ padding-top: 0.3rem;
41
- flex-direction: row;
27
+ font-size: 0.95rem;
42
- align-items: baseline;
28
+ }
43
29
 
30
+ h3 {
44
- @media (max-width: 720px) {
31
+ flex: 1;
45
- flex-direction: column;
32
+ font-size: 1rem;
46
- align-items: start;
33
+ font-weight: 400;
47
- }
34
+ /* padding-left: 0.3rem; */
48
35
 
49
- h1 {
50
- flex: 1;
51
- text-align: left;
52
- font-size: 1.6rem;
53
- line-height: 1;
54
- margin-top: 0.5rem;
36
+ &:first-child {
55
- margin-bottom: 0.1rem;
37
+ margin-right: 1rem;
56
38
 
57
- a {
39
+ @media (max-width: 720px) {
58
- color: #3395ff;
40
+ margin-right: 0;
59
41
  }
60
42
  }
61
43
 
62
- .tags {
63
- display: flex;
64
- flex-wrap: wrap;
65
- gap: 0.25rem;
66
- }
67
-
68
- .tag {
44
+ span {
69
45
  color: var(--color-tag);
70
- padding: 0.15rem 0.5rem 0.5rem 0rem;
71
- border-radius: 0.25rem;
72
- font-size: 0.95rem;
73
- font-weight: 500;
74
46
  }
75
47
  }
76
48
 
77
- .headerExtension {
49
+ .badges {
78
- display: flex;
79
50
  flex: 1;
80
- /* margin-bottom: 1rem; */
51
+ display: flex;
81
- padding-top: 0.3rem;
52
+ margin-left: 1rem;
82
- font-size: 0.95rem;
53
+ margin-right: 1rem;
83
54
 
84
55
  @media (max-width: 720px) {
85
- flex-direction: column;
86
- align-items: start;
56
+ margin: 0.5rem 0rem;
87
57
  }
58
+ }
88
59
 
89
- .expand {
60
+ .tags {
61
+ display: flex;
90
- flex: 1;
62
+ flex-wrap: wrap;
91
- }
63
+ }
64
+
65
+ .tag {
66
+ color: var(--color-tag);
67
+ padding: 0.15rem 0.5rem 0.5rem 0rem;
68
+ border-radius: 0.25rem;
69
+ font-size: 0.95rem;
70
+ font-weight: 500;
92
71
  }
93
72
 
94
73
  .nav {
@@ -111,71 +90,125 @@ h5 {
111
90
  }
112
91
  }
113
92
 
114
- time {
115
- text-align: left;
116
- color: rgb(var(--gray));
117
- }
118
-
119
93
  .info {
120
- margin-top: 0.5rem;
121
- margin-bottom: 0.5rem;
122
- display: grid;
94
+ display: flex;
123
- grid-template-columns: 1fr 1fr;
124
- column-gap: 1rem;
95
+ flex: 1;
125
96
  font-size: 1rem;
126
97
  font-weight: 500;
127
-
128
- @media (max-width: 720px) {
129
- display: grid;
130
- grid-template-columns: 1fr;
98
+ background-color: var(--color-box-bg);
131
- column-gap: 1rem;
132
- }
133
99
 
134
100
  div {
135
101
  display: flex;
136
102
  flex-direction: column;
137
103
  }
104
+ }
105
+
106
+ .summary {
107
+ display: grid;
108
+ grid-template-columns: auto;
109
+
110
+ @media (max-width: 720px) {
111
+ grid-template-columns: auto;
112
+ }
113
+ }
114
+
115
+ article {
116
+ font-size: 1.1rem;
117
+ margin-top: 1rem;
118
+
119
+ h1,
120
+ h2 {
121
+ font-size: 1.5rem;
122
+ font-weight: 700;
123
+ margin-top: 0.5rem;
124
+ margin-bottom: 0.5rem;
125
+ }
138
126
 
139
127
  h3 {
140
- background-color: var(--color-box-bg);
141
- padding: 0.5rem;
142
- font-size: 1rem;
128
+ font-size: 1.15rem;
143
- font-weight: 400;
129
+ font-weight: 700;
130
+ margin-top: 0.5rem;
131
+ margin-bottom: 0.5rem;
132
+ }
133
+
134
+ p {
135
+ font-size: 1.1rem;
136
+ padding-bottom: 1rem;
137
+ }
144
138
 
139
+ p,
145
- &:first-child {
140
+ li {
146
- margin-right: 1rem;
141
+ font-size: 1.1rem;
147
142
 
143
+ code {
144
+ color: var(--color-code-fg) !important;
145
+ background: var(--color-code-bg) !important;
146
+ word-wrap: break-word;
147
+ box-decoration-break: clone;
148
+ padding: 2px 4px;
148
- @media (max-width: 720px) {
149
+ border-radius: 0.2rem;
149
- margin-right: 0;
150
+ font-weight: 400;
150
- }
151
+ font-size: 0.8rem;
151
152
  }
153
+ }
154
+
155
+ ol {
156
+ list-style: decimal;
157
+ padding-left: 1.5rem;
158
+ margin-bottom: 1rem;
159
+ margin-left: 1rem;
152
160
 
153
161
  a {
154
162
  color: var(--color-link);
163
+ text-decoration: underline;
155
164
  }
156
165
  }
157
- }
158
166
 
159
- .summary {
167
+ pre {
168
+ font-size: 0.8rem;
169
+ font-family: "monospace";
170
+ line-height: 1.6;
160
- display: grid;
171
+ padding: 16px;
161
- grid-template-columns: auto;
162
- /* gap: 4px; */
172
+ margin: 12px 0px;
163
- /* margin-top: 0.5rem; */
173
+ }
164
174
 
175
+ blockquote {
165
- @media (max-width: 720px) {
176
+ padding-left: 0.5rem;
166
- grid-template-columns: auto;
177
+ border-left: 3px solid #aaa;
167
178
  }
168
- }
169
179
 
170
- .btnPrimary {
180
+ table {
171
- display: flex;
172
- justify-content: center;
173
- background: #0062cc;
174
- border: #001933 1px solid;
175
- color: #fff !important;
176
- border-radius: 0;
177
- padding: .1rem .75rem;
178
- font-size: .9rem;
179
- width: 100%;
181
+ width: 100%;
182
+ max-width: 100%;
183
+ margin-bottom: 1rem;
184
+ border-collapse: collapse;
180
- text-align: center;
185
+ text-indent: initial;
186
+ unicode-bidi: isolate;
187
+ border-spacing: 2px;
188
+ font-size: 1rem;
189
+
190
+ thead {
191
+ th {
192
+ color: var(--color-text);
193
+ padding: 0.1rem 0.75rem;
194
+ border: 1px solid var(--color-text);
195
+ background-color: var(--color-box-bg);
196
+ }
197
+ }
198
+
199
+ tbody {
200
+ td {
201
+ position: relative;
202
+ background-clip: padding-box;
203
+ vertical-align: middle;
204
+ padding: 0.1rem 0.75rem;
205
+ border: 1px solid var(--color-text);
206
+ background-color: var(--color-box-bg);
207
+
208
+ label {
209
+ margin-bottom: 0;
210
+ }
211
+ }
212
+ }
213
+ }
181
214
  }