Add repos page

pnpm-lock.yaml

@@ -771,7 +771,7 @@ packages:
       is-glob: 4.0.3
       open: 9.1.0
       picocolors: 1.0.0
-      tslib: 2.5.1
+      tslib: 2.5.2
     dev: false
 
   /@polka/url@1.0.0-next.21:
@@ -1190,7 +1190,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001488
-      electron-to-chromium: 1.4.399
+      electron-to-chromium: 1.4.402
       node-releases: 2.0.10
       update-browserslist-db: 1.0.11(browserslist@4.21.5)
     dev: false
@@ -1446,8 +1446,8 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: false
 
-  /electron-to-chromium@1.4.399:
-    resolution: {integrity: sha512-+V1aNvVgoWNWYIbMOiQ1n5fRIaY4SlQ/uRlrsCjLrUwr/3OvQgiX2f5vdav4oArVT9TnttJKcPCqjwPNyZqw/A==}
+  /electron-to-chromium@1.4.402:
+    resolution: {integrity: sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==}
     dev: false
 
   /emmet@2.4.4:
@@ -3562,7 +3562,7 @@ packages:
     engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
       '@pkgr/utils': 2.4.0
-      tslib: 2.5.1
+      tslib: 2.5.2
     dev: false
 
   /titleize@3.0.0:
@@ -3605,8 +3605,8 @@ packages:
       type-fest: 0.13.1
     dev: false
 
-  /tslib@2.5.1:
-    resolution: {integrity: sha512-KaI6gPil5m9vF7DKaoXxx1ia9fxS4qG5YveErRRVknPDXXriu5M8h48YRjB6h5ZUOKuAKlSJYb0GaDe8I39fRw==}
+  /tslib@2.5.2:
+    resolution: {integrity: sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==}
     dev: false
 
   /type-fest@0.13.1:

public/static/svg/github.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

src/components/base/Header.astro

@@ -12,6 +12,11 @@ const menu: MenuItem[] = [
     name: 'Posts',
     url: '/posts/',
   },
+  {
+    identifier: 'repos',
+    name: 'Repos',
+    url: '/repos/',
+  },
   {
     identifier: 'slides',
     name: 'Slides',

src/content/config.ts

@@ -40,5 +40,14 @@ export const collections = {
         })
       )
     })
+  }),
+  repos: defineCollection({
+    type: "data",
+    schema: z.object({
+      type: z.string(),
+      url: z.string(),
+      description: z.string(),
+      icons: z.array(z.string()),
+    })
   })
 }

src/content/repos/plwordnet-rs.json

@@ -0,0 +1,6 @@
+{
+  "type": "github",
+  "url": "https://github.com/kamoshi/plwordnet-rs",
+  "description": "Native Rust library facilitating the integration of plWordNet 4.2 lexical resources.",
+  "icons": ["rust"]
+}

src/pages/repos.astro

@@ -0,0 +1,31 @@
+---
+import Base from "@layouts/Base.astro";
+import { getCollection } from 'astro:content';
+
+
+const repos = await getCollection('repos');
+---
+
+<Base>
+  <main class="l-repos">
+    <article class="l-repos__article">
+      <h2>Maintained repositories</h2>
+      <section class="repos">
+        {repos.map(repo => (
+          <a href={repo.data.url} class="repo-item">
+            <header class="repo-item__header">
+              <img class="repo-item__icon" src="/static/svg/github.svg" alt=""/>
+              <h3 class="repo-item__heading">{repo.id}</h3>
+            </header>
+            <div>{repo.data.description}</div>
+            <div class="repo-item__tech">
+              {repo.data.icons.map(icon => (
+                <img class="repo-item__icon" src={`/static/svg/tech/${icon}.svg`}/>
+              ))}
+            </div>
+          </a>
+        ))}
+      </section>
+    </article>
+  </main>
+</Base>

src/styles/layouts/_repos.scss

@@ -0,0 +1,51 @@
+.l-repos {
+  padding: 1em;
+
+  &__article {
+    margin: 1em auto 1em auto;
+    max-width: 60em;
+  }
+}
+
+.repos {
+  display: flex;
+  color: unset;
+}
+
+.repo-item {
+  max-width: 16em;
+  padding: 0.5em;
+  background: white;
+  border-radius: 0.5em;
+  color: unset;
+  text-decoration: unset;
+  box-shadow: var(--shadow-l);
+  transition: box-shadow ease-in-out 0.1s;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding-bottom: 0.25em;
+    margin-bottom: 0.25em;
+    border-bottom: 1px solid lightgray;
+  }
+
+  &__icon {
+    max-height: 1.6em;
+  }
+
+  &__heading {
+    margin: 0;
+  }
+
+  &__tech {
+    display: flex;
+    gap: 0.25em;
+  }
+
+  &:focus-within,
+  &:hover {
+    box-shadow: var(--shadow-m);
+  }
+}

src/styles/styles.scss

@@ -36,3 +36,4 @@
 @use 'layouts/pages';
 @use 'layouts/article';
 @use 'layouts/songs';
+@use 'layouts/repos';