Add the Interlinked page.

Add the InterlinkedImage component.
Move custom properties to the base style.
2024-03-08 14:34:34 +01:00 · 2024-03-08 14:34:23 +01:00 · 2024-03-08 14:32:33 +01:00 · 2024-03-08 14:32:14 +01:00 · 2024-03-08 14:32:03 +01:00 · 2024-03-06 15:21:04 +01:00
84 changed files with 319 additions and 4 deletions
--- a/Makefile.toml
+++ b/Makefile.toml
@ -1,6 +1,11 @@
+[tasks.build]
+clear = true
+command = "bun"
+args = ["--bun", "astro", "build"]
+
 [tasks.dev]
 clear = true
-command = "bunx"
+command = "bun"
 args = ["--bun", "astro", "dev"]

 [tasks.lint]
@ -9,10 +14,10 @@ dependencies = ["lint-ts", "lint-scss"]

 [tasks.lint-ts]
 clear = true
-command = "bunx"
+command = "bun"
 args = ["xo"]

 [tasks.lint-scss]
 clear = true
-command = "bunx"
+command = "bun"
 args = ["--bun", "stylelint", "source/**/*.scss"]
--- a/bun.lockb
+++ b/bun.lockb
--- a/source/components/interlinked-image.astro
+++ b/source/components/interlinked-image.astro
@ -0,0 +1,37 @@
+---
+import sources from "../public/interlinked/sources.json";
+import "./interlinked-image.scss";
+
+/** Properties for the InterlinkedImage component. */
+export interface Props {
+  collection: "interlinked" | "numbered";
+  file: string;
+}
+
+const {collection, file} = Astro.props;
+
+const imageDirectory = collection === "interlinked" ? "/" : "/numbered";
+const imagePath = `/interlinked${imageDirectory}/${file}`;
+const name = file.slice(0, file.indexOf("."));
+
+let source: string | undefined;
+if (collection === "interlinked" && name in sources.interlinked) {
+  const location = (sources.interlinked as Record<string, string>)[name];
+  source = `${sources.interlinked.baseUrl}${location}`;
+}
+---
+
+<div class="interlinked-image">
+  <h3 class="heading">
+    {
+      source === undefined ? (
+        name
+      ) : (
+        <a class="source-link" href={source}>
+          {name}
+        </a>
+      )
+    }
+  </h3>
+  <img class="image" src={imagePath} />
+</div>
--- a/source/components/interlinked-image.scss
+++ b/source/components/interlinked-image.scss
@ -0,0 +1,17 @@
+.interlinked-image {
+  background-color: #111;
+
+  .heading {
+    padding: var(--spacing-2);
+  }
+
+  .image {
+    border: 2px solid white;
+    display: block;
+    max-width: 100%;
+  }
+
+  .source-link {
+    color: #f0f;
+  }
+}
--- a/source/layouts/base.astro
+++ b/source/layouts/base.astro
@ -18,6 +18,11 @@ const {frontmatter} = Astro.props;
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{frontmatter.pageTitle}</title>
+    <link
+      rel="shortcut icon"
+      href="/driftingnebula-logo-shadowed.png"
+      type="image/x-icon"
+    />
  </head>
  <body>
    <slot />
--- a/source/pages/index.astro
+++ b/source/pages/index.astro
@ -1,5 +1,6 @@
 ---
 import BaseLayout, {type Props as BaseProps} from "../layouts/base.astro";
+import "../scss/index.scss";

 const props: BaseProps = {
  frontmatter: {
@ -9,5 +10,31 @@ const props: BaseProps = {
 ---

 <BaseLayout {...props}>
-  <h1>driftingnebula</h1>
+  <header class="page-header">
+    <h1 title="driftingnebula">
+      <img
+        class="big"
+        src="/driftingnebula-shadowed.png"
+        alt="driftingnebula"
+      />
+      <img
+        class="small"
+        src="/driftingnebula-logo-shadowed.png"
+        alt="driftingnebula"
+      />
+    </h1>
+  </header>
+
+  <main class="page-main">
+    <div class="project" data-project-name="interlinked">
+      <header>
+        <div class="border-wrap">
+          <a href="/interlinked">
+            <h2>Interlinked</h2>
+            <p>Generative art with GIMP, GEGL and ImageMagick.</p>
+          </a>
+        </div>
+      </header>
+    </div>
+  </main>
 </BaseLayout>
--- a/source/pages/interlinked.astro
+++ b/source/pages/interlinked.astro
@ -0,0 +1,36 @@
+---
+import BaseLayout, {type Props as BaseProps} from "../layouts/base.astro";
+import InterlinkedImage from "../components/interlinked-image.astro";
+import "../scss/interlinked.scss";
+import interlinkedImages from "../public/interlinked/images.json";
+
+const props: BaseProps = {
+  frontmatter: {
+    pageTitle: "Interlinked - driftingnebula",
+  },
+};
+---
+
+<BaseLayout {...props}>
+  <header class="page-header">
+    <h1>driftingnebula</h1>
+  </header>
+
+  <main class="page-main">
+    <h2>Interlinked</h2>
+    <p>Fully reproducible images with all the operations available.</p>
+    {
+      interlinkedImages.interlinked.map((file) => (
+        <InterlinkedImage collection="interlinked" file={file} />
+      ))
+    }
+
+    <h2>Numbered</h2>
+    <p>Old images I didn't write the operations down for.</p>
+    {
+      interlinkedImages.numbered.map((file) => (
+        <InterlinkedImage collection="numbered" file={file} />
+      ))
+    }
+  </main>
+</BaseLayout>
--- a/source/public/driftingnebula-logo-shadowed.png
+++ b/source/public/driftingnebula-logo-shadowed.png
--- a/source/public/driftingnebula-shadowed.png
+++ b/source/public/driftingnebula-shadowed.png
--- a/source/public/interlinked/2022-03-06.jpg
+++ b/source/public/interlinked/2022-03-06.jpg
--- a/source/public/interlinked/2022-03-07.jpg
+++ b/source/public/interlinked/2022-03-07.jpg
--- a/source/public/interlinked/2022-03-08.jpg
+++ b/source/public/interlinked/2022-03-08.jpg
--- a/source/public/interlinked/2022-03-09.jpg
+++ b/source/public/interlinked/2022-03-09.jpg
--- a/source/public/interlinked/2022-03-10.jpg
+++ b/source/public/interlinked/2022-03-10.jpg
--- a/source/public/interlinked/2022-03-11.jpg
+++ b/source/public/interlinked/2022-03-11.jpg
--- a/source/public/interlinked/2022-03-12.jpg
+++ b/source/public/interlinked/2022-03-12.jpg
--- a/source/public/interlinked/2022-03-13.jpg
+++ b/source/public/interlinked/2022-03-13.jpg
--- a/source/public/interlinked/2022-03-14.jpg
+++ b/source/public/interlinked/2022-03-14.jpg
--- a/source/public/interlinked/2022-03-15.jpg
+++ b/source/public/interlinked/2022-03-15.jpg
--- a/source/public/interlinked/2022-03-29.jpg
+++ b/source/public/interlinked/2022-03-29.jpg
--- a/source/public/interlinked/images.json
+++ b/source/public/interlinked/images.json
@ -0,0 +1,76 @@
+{
+  "interlinked": [
+    "2022-03-06.jpg",
+    "2022-03-07.jpg",
+    "2022-03-08.jpg",
+    "2022-03-09.jpg",
+    "2022-03-10.jpg",
+    "2022-03-11.jpg",
+    "2022-03-12.jpg",
+    "2022-03-13.jpg",
+    "2022-03-14.jpg",
+    "2022-03-15.jpg",
+    "2022-03-29.jpg"
+  ],
+  "numbered": [
+    "1.png",
+    "2.png",
+    "3.png",
+    "4.png",
+    "5-1.png",
+    "5-2.png",
+    "6.png",
+    "7-1.png",
+    "7-2.png",
+    "8-1.png",
+    "8-2.png",
+    "9.png",
+    "10.png",
+    "11-1.png",
+    "11-2.png",
+    "11-3.png",
+    "11-4.png",
+    "12.png",
+    "13.png",
+    "14.png",
+    "15.png",
+    "16.png",
+    "17.png",
+    "18-1.png",
+    "18-2.png",
+    "19.png",
+    "20.png",
+    "21.png",
+    "22.png",
+    "23-1.png",
+    "23-2.png",
+    "24.png",
+    "25.png",
+    "26.png",
+    "27.png",
+    "28.png",
+    "29.png",
+    "30-1.png",
+    "30-2.png",
+    "31.png",
+    "32.png",
+    "33.png",
+    "34.png",
+    "35.png",
+    "36-1.png",
+    "36-2.png",
+    "37.png",
+    "38.png",
+    "39-1.png",
+    "39-2.png",
+    "40.png",
+    "41.png",
+    "42.png",
+    "43.png",
+    "44.png",
+    "45.png",
+    "46.png",
+    "47.png",
+    "48.png"
+  ]
+}
--- a/source/public/interlinked/numbered/1.png
+++ b/source/public/interlinked/numbered/1.png
--- a/source/public/interlinked/numbered/10.png
+++ b/source/public/interlinked/numbered/10.png
--- a/source/public/interlinked/numbered/11-1.png
+++ b/source/public/interlinked/numbered/11-1.png
--- a/source/public/interlinked/numbered/11-2.png
+++ b/source/public/interlinked/numbered/11-2.png
--- a/source/public/interlinked/numbered/11-3.png
+++ b/source/public/interlinked/numbered/11-3.png
--- a/source/public/interlinked/numbered/11-4.png
+++ b/source/public/interlinked/numbered/11-4.png
--- a/source/public/interlinked/numbered/12.png
+++ b/source/public/interlinked/numbered/12.png
--- a/source/public/interlinked/numbered/13.png
+++ b/source/public/interlinked/numbered/13.png
--- a/source/public/interlinked/numbered/14.png
+++ b/source/public/interlinked/numbered/14.png
--- a/source/public/interlinked/numbered/15.png
+++ b/source/public/interlinked/numbered/15.png
--- a/source/public/interlinked/numbered/16.png
+++ b/source/public/interlinked/numbered/16.png
--- a/source/public/interlinked/numbered/17.png
+++ b/source/public/interlinked/numbered/17.png
--- a/source/public/interlinked/numbered/18-1.png
+++ b/source/public/interlinked/numbered/18-1.png
--- a/source/public/interlinked/numbered/18-2.png
+++ b/source/public/interlinked/numbered/18-2.png
--- a/source/public/interlinked/numbered/19.png
+++ b/source/public/interlinked/numbered/19.png
--- a/source/public/interlinked/numbered/2.png
+++ b/source/public/interlinked/numbered/2.png
--- a/source/public/interlinked/numbered/20.png
+++ b/source/public/interlinked/numbered/20.png
--- a/source/public/interlinked/numbered/21.png
+++ b/source/public/interlinked/numbered/21.png
--- a/source/public/interlinked/numbered/22.png
+++ b/source/public/interlinked/numbered/22.png
--- a/source/public/interlinked/numbered/23-1.png
+++ b/source/public/interlinked/numbered/23-1.png
--- a/source/public/interlinked/numbered/23-2.png
+++ b/source/public/interlinked/numbered/23-2.png
--- a/source/public/interlinked/numbered/24.png
+++ b/source/public/interlinked/numbered/24.png
--- a/source/public/interlinked/numbered/25.png
+++ b/source/public/interlinked/numbered/25.png
--- a/source/public/interlinked/numbered/26.png
+++ b/source/public/interlinked/numbered/26.png
--- a/source/public/interlinked/numbered/27.png
+++ b/source/public/interlinked/numbered/27.png
--- a/source/public/interlinked/numbered/28.png
+++ b/source/public/interlinked/numbered/28.png
--- a/source/public/interlinked/numbered/29.png
+++ b/source/public/interlinked/numbered/29.png
--- a/source/public/interlinked/numbered/3.png
+++ b/source/public/interlinked/numbered/3.png
--- a/source/public/interlinked/numbered/30-1.png
+++ b/source/public/interlinked/numbered/30-1.png
--- a/source/public/interlinked/numbered/30-2.png
+++ b/source/public/interlinked/numbered/30-2.png
--- a/source/public/interlinked/numbered/31.png
+++ b/source/public/interlinked/numbered/31.png
--- a/source/public/interlinked/numbered/32.png
+++ b/source/public/interlinked/numbered/32.png
--- a/source/public/interlinked/numbered/33.png
+++ b/source/public/interlinked/numbered/33.png
--- a/source/public/interlinked/numbered/34.png
+++ b/source/public/interlinked/numbered/34.png
--- a/source/public/interlinked/numbered/35.png
+++ b/source/public/interlinked/numbered/35.png
--- a/source/public/interlinked/numbered/36-1.png
+++ b/source/public/interlinked/numbered/36-1.png
--- a/source/public/interlinked/numbered/36-2.png
+++ b/source/public/interlinked/numbered/36-2.png
--- a/source/public/interlinked/numbered/37.png
+++ b/source/public/interlinked/numbered/37.png
--- a/source/public/interlinked/numbered/38.png
+++ b/source/public/interlinked/numbered/38.png
--- a/source/public/interlinked/numbered/39-1.png
+++ b/source/public/interlinked/numbered/39-1.png
--- a/source/public/interlinked/numbered/39-2.png
+++ b/source/public/interlinked/numbered/39-2.png
--- a/source/public/interlinked/numbered/4.png
+++ b/source/public/interlinked/numbered/4.png
--- a/source/public/interlinked/numbered/40.png
+++ b/source/public/interlinked/numbered/40.png
--- a/source/public/interlinked/numbered/41.png
+++ b/source/public/interlinked/numbered/41.png
--- a/source/public/interlinked/numbered/42.png
+++ b/source/public/interlinked/numbered/42.png
--- a/source/public/interlinked/numbered/43.png
+++ b/source/public/interlinked/numbered/43.png
--- a/source/public/interlinked/numbered/44.png
+++ b/source/public/interlinked/numbered/44.png
--- a/source/public/interlinked/numbered/45.png
+++ b/source/public/interlinked/numbered/45.png
--- a/source/public/interlinked/numbered/46.png
+++ b/source/public/interlinked/numbered/46.png
--- a/source/public/interlinked/numbered/47.png
+++ b/source/public/interlinked/numbered/47.png
--- a/source/public/interlinked/numbered/48.png
+++ b/source/public/interlinked/numbered/48.png
--- a/source/public/interlinked/numbered/5-1.png
+++ b/source/public/interlinked/numbered/5-1.png
--- a/source/public/interlinked/numbered/5-2.png
+++ b/source/public/interlinked/numbered/5-2.png
--- a/source/public/interlinked/numbered/6.png
+++ b/source/public/interlinked/numbered/6.png
--- a/source/public/interlinked/numbered/7-1.png
+++ b/source/public/interlinked/numbered/7-1.png
--- a/source/public/interlinked/numbered/7-2.png
+++ b/source/public/interlinked/numbered/7-2.png
--- a/source/public/interlinked/numbered/8-1.png
+++ b/source/public/interlinked/numbered/8-1.png
--- a/source/public/interlinked/numbered/8-2.png
+++ b/source/public/interlinked/numbered/8-2.png
--- a/source/public/interlinked/numbered/9.png
+++ b/source/public/interlinked/numbered/9.png
--- a/source/public/interlinked/sources.json
+++ b/source/public/interlinked/sources.json
@ -0,0 +1,16 @@
+{
+  "interlinked": {
+    "baseUrl": "https://git.bauke.xyz/driftingnebula/interlinked/src/commit/b27237f709b55a103c33b65c0222a2affe26c2e6/interlinked/source/projects",
+    "2022-03-06": "/year_2022/mod.rs#L6",
+    "2022-03-07": "/year_2022/mod.rs#L62",
+    "2022-03-08": "/year_2022/mod.rs#L116",
+    "2022-03-09": "/year_2022/mod.rs#L146",
+    "2022-03-10": "/year_2022/mod.rs#L187",
+    "2022-03-11": "/year_2022/mod.rs#L228",
+    "2022-03-12": "/year_2022/mod.rs#L271",
+    "2022-03-13": "/year_2022/mod.rs#L305",
+    "2022-03-14": "/year_2022/mod.rs#L337",
+    "2022-03-15": "/year_2022/mod.rs#L372",
+    "2022-03-29": "/year_2022/mod.rs#L443"
+  }
+}
--- a/source/scss/base.scss
+++ b/source/scss/base.scss
@ -14,5 +14,11 @@ html {
 }

 body {
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 16px;
+
+  background-color: black;
+  color: white;
  font-size: 2rem;
 }
--- a/source/scss/index.scss
+++ b/source/scss/index.scss
@ -0,0 +1,79 @@
+.page-header {
+  align-items: center;
+  background: center url("/interlinked/numbered/12.png");
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  min-height: 400px;
+  height: 50vh;
+  padding: var(--spacing-3);
+
+  h1 {
+    display: flex;
+  }
+
+  img {
+    height: 10rem;
+
+    &.big {
+      display: unset;
+    }
+
+    &.small {
+      display: none;
+    }
+
+    @media (width <= 600px) {
+      &.big {
+        display: none;
+      }
+
+      &.small {
+        display: unset;
+      }
+    }
+  }
+}
+
+.project {
+  align-items: center;
+  background-color: #303030;
+  display: flex;
+  min-height: 400px;
+  height: 50vh;
+  padding: var(--spacing-3);
+
+  &[data-project-name="interlinked"] {
+    background: center url("/interlinked/numbered/15.png");
+    background-size: cover;
+  }
+
+  a {
+    background-color: #220575;
+    border: 1px solid black;
+    display: block;
+    padding: var(--spacing-3);
+    text-decoration: none;
+  }
+
+  h2,
+  p {
+    color: white;
+    text-shadow: 2px 2px 2px black;
+  }
+
+  .border-wrap {
+    background: conic-gradient(#ca0600, #7b68c1, #ad8f1e, #ca0600);
+    border: 1px solid black;
+    padding: var(--spacing-1);
+
+    &:hover {
+      background: white;
+      border-color: white;
+
+      a {
+        border-color: white;
+      }
+    }
+  }
+}
--- a/source/scss/interlinked.scss
+++ b/source/scss/interlinked.scss
@ -0,0 +1,11 @@
+.page-header {
+  border-bottom: 4px solid white;
+  padding: var(--spacing-3);
+}
+
+.page-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+}
Author	SHA1	Message	Date
Bauke	ec0df6f341	Add the Interlinked page.	2024-03-08 14:34:34 +01:00
Bauke	b2d5c85bcc	Add the InterlinkedImage component.	2024-03-08 14:34:23 +01:00
Bauke	5b59b7bacb	Move custom properties to the base style.	2024-03-08 14:32:33 +01:00
Bauke	e2fc2ac6e8	Add a build task.	2024-03-08 14:32:14 +01:00
Bauke	07e9a0b6b2	Add image path and source location files.	2024-03-08 14:32:03 +01:00
Bauke	e64aac603a	Add the favicon.	2024-03-06 15:21:04 +01:00
Bauke	c3735ae205	Add homepage styling and logos.	2024-03-06 15:19:01 +01:00
Bauke	02fc799d6f	Update Bun lockfile.	2024-03-06 14:39:15 +01:00
Bauke	12a93a85a6	Add existing images.	2024-03-06 14:22:18 +01:00
Bauke	1261562043	Use bun directly.	2024-03-02 13:57:37 +01:00