~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
ecf582d7 — pyrossh

1 month ago 
add tags
Files changed (7) hide show
  1. src/consts.ts +28 -14
  2. src/content.config.ts +2 -0
  3. src/layouts/Base.css +1 -0
  4. src/pages/index.astro +5 -0
  5. src/pages/index.module.css +15 -0
  6. src/pages/repos/[...slug]/index.astro +4 -1
  7. src/pages/repos/[...slug]/index.module.css +15 -0
src/consts.ts CHANGED
@@ -13,59 +13,73 @@ export const SITE_DESCRIPTION = 'Welcome to my website!';
13
13
  export const REPOS = [
14
14
  {
15
15
  title: "rust-embed",
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."
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
18
  },
18
19
  {
19
20
  title: "website",
20
- description: "木 Personal website of pyrossh. Built with astrojs, shiki, vite."
21
+ description: "木 Personal website of pyrossh. Built with astrojs, shiki, vite.",
22
+ tags: ['astro', 'js', 'html', 'css']
21
23
  },
22
24
  {
23
25
  title: "plum",
24
- description: "A statically typed, imperative programming language inspired by rust, python"
26
+ description: "A statically typed, imperative programming language inspired by rust, python",
27
+ tags: ['treesitter', 'compiler', 'wasm']
25
28
  },
26
29
  {
27
30
  title: "edge-city",
28
- description: "edge-city is a next level meta-framework for react that runs only on edge runtimes"
31
+ description: "edge-city is a next level meta-framework for react that runs only on edge runtimes",
32
+ tags: ['react', 'js', 'ssr']
29
33
  },
30
34
  {
31
35
  title: "gromer",
32
- description: "gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs."
36
+ description: "gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs.",
37
+ tags: ['golang', 'htmx', 'ssr']
33
38
  },
34
39
  {
35
40
  title: "atoms-element",
36
- description: "A simple web component library for defining your custom elements. It works on both client and server."
41
+ description: "A simple web component library for defining your custom elements. It works on both client and server.",
42
+ tags: ['js']
37
43
  },
38
44
  {
39
45
  title: "atoms-state",
40
- description: "Simple State management for react"
46
+ description: "Simple State management for react",
47
+ tags: ['js', 'react', 'flux']
41
48
  },
42
49
  {
43
50
  title: "remote-monitor",
44
- description: "Remote Monitoring and Control using GSM-SMS"
51
+ description: "Remote Monitoring and Control using GSM-SMS",
52
+ tags: ['c++', 'teensy', 'arduino']
45
53
  },
46
54
  {
47
55
  title: "only-bible-app",
48
- description: "The only bible app you will ever need. No ads. No in-app purchases. No distractions."
56
+ description: "The only bible app you will ever need. No ads. No in-app purchases. No distractions.",
57
+ tags: ['kotlin', 'android', 'ios']
49
58
  },
50
59
  {
51
60
  title: "gdx-studio",
52
- description: "An IDE for creating Games using libgdx and Java supported on all platforms Android, iOS, Desktop"
61
+ description: "An IDE for creating Games using libgdx and Java supported on all platforms Android, iOS, Desktop",
62
+ tags: ['libgdx', 'java', 'desktop']
53
63
  },
54
64
  {
55
65
  title: "rp2350",
56
- description: "code to drive rp2350"
66
+ description: "code to drive rp2350",
67
+ tags: ['zig', 'raspberry-pi']
57
68
  },
58
69
  {
59
70
  title: "config",
60
- description: "Common configuration"
71
+ description: "Common configuration",
72
+ tags: ['brew', 'nushell']
61
73
  },
62
74
  {
63
75
  title: "sabel-ide",
64
- description: "sabel-ide"
76
+ description: "sabel-ide",
77
+ tags: ['python', 'qt']
65
78
  },
66
79
  {
67
80
  title: "tide-jsx",
68
- description: "Tide + JSX"
81
+ description: "Tide + JSX",
82
+ tags: ['rust', 'proc-macro', 'jsx']
69
83
  },
70
84
  ]
71
85
  export const TOOLS = [
src/content.config.ts CHANGED
@@ -33,6 +33,7 @@ export const collections = {
33
33
  data: {
34
34
  title: r.title,
35
35
  description: r.description,
36
+ tags: r.tags,
36
37
  commits: commits.all.map((item) => ({
37
38
  hash: item.hash,
38
39
  message: item.message,
@@ -51,6 +52,7 @@ export const collections = {
51
52
  schema: z.object({
52
53
  title: z.string(),
53
54
  description: z.string().max(80),
55
+ tags: z.array(z.string()),
54
56
  commits: z.array(z.object({
55
57
  hash: z.string(),
56
58
  message: z.string(),
src/layouts/Base.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
12
12
  --color-code-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
13
13
  --color-pre-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
14
+ --color-tag: light-dark(hsl(152, 95%, 25%), hsl(152, 96%, 44%));
14
15
  --btn-light: none;
15
16
  --btn-dark: block;
16
17
  .astro-code, .astro-code span {
src/pages/index.astro CHANGED
@@ -101,6 +101,11 @@ import styles from "./index.module.css";
101
101
  <a href={`/repos/${repo.title}`}>{repo.title}</a>
102
102
  </h4>
103
103
  <p>{repo.description}</p>
104
+ <div class={styles.tags}>
105
+ {repo.tags.map((tag) => (
106
+ <span class={styles.tag}>#{tag}</span>
107
+ ))}
108
+ </div>
104
109
  </div>
105
110
  ))
106
111
  }
src/pages/index.module.css CHANGED
@@ -100,6 +100,21 @@ section {
100
100
  margin-bottom: 0;
101
101
  padding: 0;
102
102
  }
103
+
104
+ .tags {
105
+ margin-top: 0.5rem;
106
+ display: flex;
107
+ flex-wrap: wrap;
108
+ gap: 0.25rem;
109
+ }
110
+
111
+ .tag {
112
+ color: var(--color-tag);
113
+ padding: 0.15rem 0.5rem 0.5rem 0rem;
114
+ border-radius: 0.25rem;
115
+ font-size: 0.95rem;
116
+ font-weight: 500;
117
+ }
103
118
  }
104
119
 
105
120
  .interests {
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, commits },
18
+ data: { title, description, tags, commits },
19
19
  } = Astro.props;
20
20
  const latestCommits = commits.slice(0, 3);
21
21
  const { Content } = await render(Astro.props);
@@ -24,6 +24,9 @@ const { Content } = await render(Astro.props);
24
24
  <Layout title={title} description={description}>
25
25
  <div class={styles.header}>
26
26
  <h1><a href="/">~repos</a>/{title}</h1>
27
+ <div class={styles.tags}>
28
+ {tags.map((tag) => <span class={styles.tag}>#{tag}</span>)}
29
+ </div>
27
30
  </div>
28
31
  <hr />
29
32
  <div class={styles.headerExtension}>
src/pages/repos/[...slug]/index.module.css CHANGED
@@ -47,6 +47,7 @@ h5 {
47
47
  }
48
48
 
49
49
  h1 {
50
+ flex: 1;
50
51
  text-align: left;
51
52
  font-size: 1.6rem;
52
53
  line-height: 1;
@@ -57,6 +58,20 @@ h5 {
57
58
  color: #3395ff;
58
59
  }
59
60
  }
61
+
62
+ .tags {
63
+ display: flex;
64
+ flex-wrap: wrap;
65
+ gap: 0.25rem;
66
+ }
67
+
68
+ .tag {
69
+ 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
+ }
60
75
  }
61
76
 
62
77
  .headerExtension {