~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
69bc3020 — pyrossh

4 weeks ago 
improve file tree
Files changed (3) hide show
  1. bun.lock +3 -0
  2. package.json +1 -0
  3. src/components/RecursiveList.astro +54 -55
bun.lock CHANGED
@@ -19,6 +19,7 @@
19
19
  },
20
20
  "devDependencies": {
21
21
  "@iconify-json/material-symbols": "^1.2.39",
22
+ "@iconify-json/mdi": "^1.2.3",
22
23
  "@playwright/test": "^1.52.0",
23
24
  "@tauri-apps/cli": "^2.9.1",
24
25
  "@types/node": "^22.15.3",
@@ -120,6 +121,8 @@
120
121
 
121
122
  "@iconify-json/material-symbols": ["@iconify-json/material-symbols@1.2.39", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-spjiB1I5jPi6hV5b/QyC4zO8GRYGCbb6/DaHm754NJFqNli6bsYDpN4HYVl67XhU49rYljvJyNc/6lYEf+jokA=="],
122
123
 
124
+ "@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
125
+
123
126
  "@iconify/tools": ["@iconify/tools@4.1.3", "", { "dependencies": { "@iconify/types": "^2.0.0", "@iconify/utils": "^2.3.0", "@types/tar": "^6.1.13", "axios": "^1.12.1", "cheerio": "1.0.0", "domhandler": "^5.0.3", "extract-zip": "^2.0.1", "local-pkg": "^0.5.1", "pathe": "^1.1.2", "svgo": "^3.3.2", "tar": "^6.2.1" } }, "sha512-guPw9jvkrCCGFUvPr+NgUcQIpQcIll38NQzUzrEMK/1vrDmeJ9jstsp/Dx5LIP2na9BUBLHKOKXA6cERTpnGFw=="],
124
127
 
125
128
  "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
package.json CHANGED
@@ -28,6 +28,7 @@
28
28
  "timeago.js": "^4.0.2"
29
29
  },
30
30
  "devDependencies": {
31
+ "@iconify-json/mdi": "^1.2.3",
31
32
  "@iconify-json/material-symbols": "^1.2.39",
32
33
  "@playwright/test": "^1.52.0",
33
34
  "@tauri-apps/cli": "^2.9.1",
src/components/RecursiveList.astro CHANGED
@@ -1,4 +1,5 @@
1
1
  ---
2
+ import { Icon } from "astro-icon/components";
2
3
  import prettyBytes from "pretty-bytes";
3
4
 
4
5
  interface FileNode {
@@ -27,7 +28,12 @@ const { items, repoTitle, depth = 0 } = Astro.props;
27
28
  <li class="folder" style={`padding-left: ${depth * 1}rem;`}>
28
29
  <details>
29
30
  <summary>
31
+ <Icon
32
+ name="mdi:folder"
33
+ size="24px"
34
+ color="hsl(45deg 75.37% 60%)"
35
+ />
30
- <span class="folder-name"> {item.name}/</span>
36
+ <span class="folder-name"> {item.name}</span>
31
37
  </summary>
32
38
  <ul>
33
39
  <Astro.self
@@ -43,13 +49,14 @@ const { items, repoTitle, depth = 0 } = Astro.props;
43
49
  return (
44
50
  <li class="file" style={`padding-left: ${depth * 1}rem;`}>
45
51
  <div class="file-content">
46
- <div class="name">
52
+ <div class="file-name">
53
+ <Icon name="mdi:file" size="24px" color="hsl(0deg 75% 75%)" />
47
54
  <a href={`/repos/${repoTitle}/files/${item.path}`} rel="nofollow">
48
55
  {item.name}
49
56
  </a>
50
57
  </div>
51
58
  {item.size && (
52
- <div class="size">
59
+ <div class="file-size">
53
60
  <span>{prettyBytes(item.size).replace(" ", "")}</span>
54
61
  </div>
55
62
  )}
@@ -61,68 +68,60 @@ const { items, repoTitle, depth = 0 } = Astro.props;
61
68
  }
62
69
 
63
70
  <style>
64
- .folder,
65
- .file {
71
+ svg[data-icon] {
66
- margin: 0;
72
+ margin-right: 0.3rem;
67
73
  }
68
74
 
69
- .folder details {
75
+ .folder {
76
+ margin: 0;
77
+ details {
70
- margin: 0.25rem 0;
78
+ margin: 0.25rem 0;
71
- }
79
+ }
72
-
73
- summary {
80
+ summary {
74
- display: flex;
81
+ display: flex;
75
- align-items: center;
82
+ align-items: center;
76
- cursor: pointer;
83
+ cursor: pointer;
77
- padding: 0.4rem;
84
+ padding: 0.4rem;
78
- background-color: var(--color-box-bg);
85
+ background-color: var(--color-box-bg);
79
- }
86
+ }
80
-
87
+ ul {
81
- .folder-name {
88
+ padding: 0;
82
- color: var(--color-link);
89
+ margin: 0.25rem 0 0.5rem 1rem;
83
- text-decoration: underline;
84
- }
90
+ }
85
91
 
86
- .folder ul {
92
+ .folder-name {
87
- padding: 0;
88
- margin: 0.25rem 0 0.5rem 1rem;
93
+ color: var(--color-link);
94
+ }
89
95
  }
90
96
 
91
97
  .file {
92
98
  margin: 0.25rem 0;
99
+ .file-content {
100
+ display: flex;
101
+ padding: 0.4rem;
102
+ background-color: var(--color-box-bg);
93
- }
103
+ }
94
-
95
- .file-content {
96
- display: flex;
97
- padding: 0.4rem;
98
- background-color: var(--color-box-bg);
99
- }
100
-
101
- .file-icon {
102
- display: inline-block;
103
- width: 1.2rem;
104
- margin-right: 0.5rem;
105
- }
106
104
 
107
- .name {
105
+ .file-name {
108
- flex: 1;
106
+ flex: 1;
109
- display: flex;
107
+ display: flex;
110
- align-items: center;
108
+ align-items: center;
111
- }
112
109
 
113
- .name a {
110
+ a {
114
- text-decoration: none;
111
+ text-decoration: none;
115
- }
116
112
 
117
- .name a:hover {
113
+ &:hover {
118
- /* color: var(--color-link); */
114
+ /* color: var(--color-link); */
119
- text-decoration: underline;
115
+ text-decoration: underline;
120
- text-underline-offset: 3px;
116
+ text-underline-offset: 3px;
121
- }
117
+ }
118
+ }
119
+ }
122
120
 
123
- .size {
121
+ .file-size {
124
- margin-left: auto;
122
+ margin-left: auto;
125
- padding-left: 1rem;
123
+ padding-left: 1rem;
126
- opacity: 0.7;
124
+ opacity: 0.7;
125
+ }
127
126
  }
128
127
  </style>