~repos /website

#astro#js#html#css

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

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


50fbb4ae pyrossh

3 weeks ago
update git clone with info
astro.config.mjs CHANGED
@@ -10,7 +10,4 @@ export default defineConfig({
10
10
  trailingSlash: 'never',
11
11
  output: 'static',
12
12
  integrations: [icon(), sitemap(), expressiveCode()],
13
- // experimental: { // Breaks some css for now
14
- // csp: true,
15
- // },
16
13
  });
src/components/Commit.astro CHANGED
@@ -9,7 +9,8 @@ const { title, author_name, hash, date, message, branches, tags } = Astro.props;
9
9
  <a href={`/repos/${title}/commits/${hash}`} title={hash} rel="nofollow">
10
10
  {hash.substring(0, 8)}
11
11
  </a>
12
+
12
- {author_name}
13
+ <strong>{author_name}</strong>
13
14
  <small class="pull-right">
14
15
  <h3>{branches}</h3>
15
16
  <h3>{tags}</h3>
@@ -37,6 +38,10 @@ const { title, author_name, hash, date, message, branches, tags } = Astro.props;
37
38
  color: var(--color-link);
38
39
  }
39
40
 
41
+ strong {
42
+ font-weight: 500;
43
+ }
44
+
40
45
  small {
41
46
  font-size: 85%;
42
47
  font-weight: 400;
src/layouts/BaseLayout.astro CHANGED
@@ -86,7 +86,7 @@ const image = "/favicon.png";
86
86
  <Footer />
87
87
  </body>
88
88
  </html>
89
- <style>
89
+ <style is:global>
90
90
  :root {
91
91
  --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
92
92
  --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
@@ -119,6 +119,34 @@ const image = "/favicon.png";
119
119
  }
120
120
  }
121
121
 
122
+ [data-tooltip] {
123
+ position: relative;
124
+ cursor: help;
125
+ }
126
+
127
+ [data-tooltip]::after {
128
+ position: absolute;
129
+ opacity: 0;
130
+ pointer-events: none;
131
+ content: attr(data-tooltip);
132
+ left: 0;
133
+ top: calc(100% + 10px);
134
+ border-radius: 3px;
135
+ box-shadow: 0 0 1px 1px var(--color-text);
136
+ background-color: var(--color-box-bg);
137
+ z-index: 10;
138
+ padding: 8px;
139
+ width: 300px;
140
+ transform: translateY(-20px);
141
+ transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
142
+ }
143
+
144
+ [data-tooltip]:hover::after {
145
+ opacity: 1;
146
+ transform: translateY(0);
147
+ transition-duration: 300ms;
148
+ }
149
+
122
150
  body {
123
151
  display: flex;
124
152
  flex-direction: column;
src/layouts/RepoLayout.astro CHANGED
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  import { type CollectionEntry } from "astro:content";
3
+ import { Icon } from "astro-icon/components";
3
4
  import Layout from "@/layouts/BaseLayout.astro";
4
5
 
5
6
  type Props = Pick<CollectionEntry<"repos">, "data">;
@@ -30,14 +31,21 @@ const { pathname } = Astro.url;
30
31
  {tags.map((tag) => <span class="tag">#{tag}</span>)}
31
32
  </div>
32
33
  </div>
33
- <div class="info">
34
- <h3>
34
+ <h3>
35
- <strong>git clone</strong>
35
+ <strong>git clone</strong>
36
- <span>
36
+ <span>
37
- https://pyrossh.dev/repos/{title}.git
37
+ https://pyrossh.dev/repos/{title}.git
38
- </span>
38
+ </span>
39
+ <div
40
+ data-tooltip="For features and fixes, please use git patches and send them over to my email. I will try to review them and merge them as best as I can."
41
+ >
42
+ <Icon
43
+ name="mdi:information-outline"
44
+ size="18px"
45
+ color="var(--color-text)"
46
+ />
47
+ </div>
39
- </h3>
48
+ </h3>
40
- </div>
41
49
  <div class="headerExtension">
42
50
  <h2>{description}</h2>
43
51
  </div>
@@ -105,21 +113,21 @@ const { pathname } = Astro.url;
105
113
  }
106
114
 
107
115
  h3 {
116
+ display: flex;
108
117
  flex: 1;
118
+ align-items: center;
109
119
  font-size: 1rem;
110
120
  font-weight: 400;
111
- /* padding-left: 0.3rem; */
121
+ background-color: var(--color-box-bg);
112
-
113
- &:first-child {
114
- margin-right: 1rem;
115
122
 
123
+ strong {
116
- @media (max-width: 720px) {
124
+ font-weight: 500;
117
- margin-right: 0;
125
+ margin-right: 0.25rem;
118
- }
119
126
  }
120
127
 
121
128
  span {
122
129
  color: var(--color-tag);
130
+ padding-right: 0.2rem;
123
131
  }
124
132
  }
125
133
 
@@ -172,21 +180,4 @@ const { pathname } = Astro.url;
172
180
  }
173
181
  }
174
182
  }
175
-
176
- .info {
177
- display: flex;
178
- flex: 1;
179
- font-size: 1rem;
180
- font-weight: 500;
181
- background-color: var(--color-box-bg);
182
-
183
- div {
184
- display: flex;
185
- flex-direction: column;
186
- }
187
-
188
- strong {
189
- font-weight: 500;
190
- }
191
- }
192
183
  </style>