merch, astro image

astro.config.mjs

@@ -1,7 +1,10 @@
 import { defineConfig } from 'astro/config';
-
 import compress from "astro-compress";
+import image from "@astrojs/image";
 
+// https://astro.build/config
 export default defineConfig({
-  integrations: [compress()]
+  integrations: [compress(), image({
+    serviceEntryPoint: '@astrojs/image/sharp'
+  })]
 });

package-lock.json

@@ -8,6 +8,7 @@
       "name": "@example/basics",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/image": "^0.11.6",
         "@svgdotjs/svg.js": "^3.1.2",
         "@tweakpane/core": "^1.1.0",
         "astro": "^1.6.0",
@@ -20,6 +21,11 @@
         "sass": "^1.56.1"
       }
     },
+    "node_modules/@altano/tiny-async-pool": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@altano/tiny-async-pool/-/tiny-async-pool-1.0.2.tgz",
+      "integrity": "sha512-qQzaI0TBUPdpjZ3qo5b2ziQY9MSNpbziH2ZrE5lvtUZL+kn9GwVuVJwoOubaoNkeDB+rqEefnpu1k+oMpOCYiw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -37,6 +43,29 @@
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.29.9.tgz",
       "integrity": "sha512-/oMQ0z3CJzGg6sv51tQTiHf/ETVsEu8ObN9OA7zs937dQx9Uo4SToYfdw3C4hf6olrLiADuDUsbkKSRe6fLSgA=="
     },
+    "node_modules/@astrojs/image": {
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/image/-/image-0.11.6.tgz",
+      "integrity": "sha512-/awb4CWvOdoBv896XZcXw+oYEYLezWiaX5Oyk2g4PQ6rEHtZVROj56CFdUbS9ldmIqp3ni7rXNf1XK3dlP5d1A==",
+      "dependencies": {
+        "@altano/tiny-async-pool": "^1.0.2",
+        "http-cache-semantics": "^4.1.0",
+        "image-size": "^1.0.2",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.25.9",
+        "mime": "^3.0.0",
+        "slash": "^4.0.0",
+        "web-streams-polyfill": "^3.2.1"
+      },
+      "peerDependencies": {
+        "sharp": ">=0.31.0"
+      },
+      "peerDependenciesMeta": {
+        "sharp": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@astrojs/language-server": {
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-0.26.2.tgz",
@@ -2803,6 +2832,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+    },
     "node_modules/human-signals": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
@@ -2830,6 +2864,20 @@
         }
       ]
     },
+    "node_modules/image-size": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz",
+      "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -4846,6 +4894,14 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6870,6 +6926,11 @@
     }
   },
   "dependencies": {
+    "@altano/tiny-async-pool": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@altano/tiny-async-pool/-/tiny-async-pool-1.0.2.tgz",
+      "integrity": "sha512-qQzaI0TBUPdpjZ3qo5b2ziQY9MSNpbziH2ZrE5lvtUZL+kn9GwVuVJwoOubaoNkeDB+rqEefnpu1k+oMpOCYiw=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -6884,6 +6945,21 @@
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.29.9.tgz",
       "integrity": "sha512-/oMQ0z3CJzGg6sv51tQTiHf/ETVsEu8ObN9OA7zs937dQx9Uo4SToYfdw3C4hf6olrLiADuDUsbkKSRe6fLSgA=="
     },
+    "@astrojs/image": {
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/image/-/image-0.11.6.tgz",
+      "integrity": "sha512-/awb4CWvOdoBv896XZcXw+oYEYLezWiaX5Oyk2g4PQ6rEHtZVROj56CFdUbS9ldmIqp3ni7rXNf1XK3dlP5d1A==",
+      "requires": {
+        "@altano/tiny-async-pool": "^1.0.2",
+        "http-cache-semantics": "^4.1.0",
+        "image-size": "^1.0.2",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.25.9",
+        "mime": "^3.0.0",
+        "slash": "^4.0.0",
+        "web-streams-polyfill": "^3.2.1"
+      }
+    },
     "@astrojs/language-server": {
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-0.26.2.tgz",
@@ -8837,6 +8913,11 @@
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
       "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A=="
     },
+    "http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+    },
     "human-signals": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
@@ -8847,6 +8928,14 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "image-size": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz",
+      "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==",
+      "requires": {
+        "queue": "6.0.2"
+      }
+    },
     "immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -10139,6 +10228,14 @@
         "once": "^1.3.1"
       }
     },
+    "queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "requires": {
+        "inherits": "~2.0.3"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/image": "^0.11.6",
     "@svgdotjs/svg.js": "^3.1.2",
     "@tweakpane/core": "^1.1.0",
     "astro": "^1.6.0",

src/env.d.ts

@@ -1 +1,2 @@
-/// <reference types="astro/client" />
+// /// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />

src/layouts/Layout.astro

@@ -24,7 +24,20 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 					</a>
 				)
 			}
-			{!title && <div />}
+			{!title && <div class='logo-placeholder' />}
+			<nav>
+				<ul>
+					<li>
+						<a href='https://pretix.hip-berlin.de/hip2022/hip2022/'
+							>Buy tickets</a
+						>
+					</li>
+					<li><a href='/merch'>Merch</a></li>
+					<li>
+						<a href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'>CfP</a>
+					</li>
+				</ul>
+			</nav>
 			<ul class='socials'>
 				<li class='mastodon'>
 					<a
@@ -101,9 +114,25 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 				justify-content: space-between;
 			}
 			.logo {
-				max-width: 12rem;
+				width: 6.4rem;
 				height: 100%;
 				margin-left: 0.75rem;
+				&-placeholder {
+					width: 6.4rem;
+				}
+			}
+			nav {
+				font-size: 1.2rem;
+				ul {
+					list-style: none;
+					padding: 0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					gap: 2rem;
+				}
+				li {
+				}
 			}
 			.socials {
 				list-style: none;

src/pages/index.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
+	<article>
 		<header>
 			<div>
 				<h1><img src='/logo.svg' alt='Hacking in Parallel ////' /></h1>
@@ -16,8 +17,8 @@ import Layout from '../layouts/Layout.astro'
 					rel='nofollower noreferrer'
 					target='_blank'
 				>
-				<div class='cfp gradient-bg'>
+					<div class='tickets gradient-bg'>
-					<h2>Call for participation &rarr;</h2>
+						<h2>Get Tickets &rarr;</h2>
 					</div>
 				</a>
 			</section>
@@ -27,46 +28,42 @@ import Layout from '../layouts/Layout.astro'
 					meeting in the rooms of "ETI Schauspielschule Berlin" at ///Hacking in
 					Parallel/// this year.
 				</p>
-
 				<p>
 					The ETI, 900m away from the bcc, is directly at the Spree, in
 					Rungestr.20, 10179 Berlin, just above c-base. HiP// is organized by
-				AfRA, Bits & Trees, xHain, Milliways, freeside, openStudio, CCCB, c-base
+					AfRA, Bits & Trees, xHain, Milliways, freeside, openStudio, CCCB,
-				and other chaos-related entities and communities, in cooperation with
+					c-base and other chaos-related entities and communities, in
-				Digitale Gesellschaft.
+					cooperation with Digitale Gesellschaft.
 				</p>
-
 				<p>
-				Why? Because we want to! We want to meet again, exchange ideas and have
+					Why? Because we want to! We want to meet again, exchange ideas and
-				fun, in presence and in compliance with a self-imposed obligation to
+					have fun, in presence and in compliance with a self-imposed obligation
-				wear a FFP2 mask inside "ETI Acting School Berlin". In addition, we
+					to wear a FFP2 mask inside "ETI Acting School Berlin". In addition, we
 					assume that you can credibly assure us that you are vaccinated or
 					recovered, no personal data will be stored.
 				</p>
-
 				<p>
 					Together with the c-base (hall H) we have up to 3 stages and several
-				rooms with space for workshops, assemblies/projects and your ideas. All
+					rooms with space for workshops, assemblies/projects and your ideas.
-				talks on the stages can be recorded and streamed via media.ccc We are
+					All talks on the stages can be recorded and streamed via media.ccc We
-				looking forward to your submission. <a
+					are looking forward to your submission. <a
 						href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'
 						rel='nofollower noreferrer'
 						target='_blank'>https://pretalx.c3voc.de/hip-berlin-2022/cfp</a
 					>
 				</p>
-
 				<p>
-				We also need and welcome support during ///Hip22///. For our ACC "Angel
+					We also need and welcome support during ///Hip22///. For our ACC
-				Coordination Center" we have on the 5th floor, on the roof, a nice big
+					"Angel Coordination Center" we have on the 5th floor, on the roof, a
-				room with terrace and view over Berlin available as Heaven. Just
+					nice big room with terrace and view over Berlin available as Heaven.
-				register in our Angel Coordination Center. <a
+					Just register in our Angel Coordination Center. <a
 						href='https://engelsystem.hip-berlin.de/'
 						>https://engelsystem.hip-berlin.de/</a
 					>
 				</p>
 				<p>
-				The presale will start this week. Regular Tickets cost 79.-€ for 4 days
+					The presale will start this week. Regular Tickets cost 79.-€ for 4
-				and can be clicced here. <a
+					days and can be clicced here. <a
 						href='https://pretix.hip-berlin.de/hip2022/hip2022/'
 						rel='nofollower noreferrer'
 						target='_blank'>https://pretix.hip-berlin.de/hip2022/hip2022/</a
@@ -84,6 +81,7 @@ import Layout from '../layouts/Layout.astro'
 				</div>
 			</section>
 		</main>
+	</article>
 </Layout>
 
 <style lang='scss'>
@@ -107,10 +105,11 @@ import Layout from '../layouts/Layout.astro'
 	section {
 		margin-bottom: 4rem;
 	}
-	.cfp {
+	.tickets {
-		max-width: 100%;
+		width: 100%;
 		@media screen and (min-width: 768px) {
 			margin: 0 -1.5rem 3rem;
+			width: calc(100% + 3rem);
 		}
 		text-align: center;
 		a {

src/pages/merch/index.astro

@@ -0,0 +1,52 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import { Image } from '@astrojs/image/components'
+---
+
+<Layout title='Merch'>
+	<main>
+		<figure>
+			<Image
+				width='1095'
+				height='821'
+				src='/merch/hoodie.jpg'
+				alt='Hacking in Parallel Berlin 2022 Hoodie with a colorful print of a geometric grid with several gradient lines going from bottom left to top right'
+			/>
+			<figcaption>Hoodie</figcaption>
+		</figure>
+		<figure>
+			<Image
+				width='1600'
+				height='1388'
+				src='/merch/zipper.jpg'
+				alt='Hacking in Parallel Berlin 2022 Zip Up Hoodie with a colorful print of a geometric grid with several gradient lines going from bottom left to top right'
+			/>
+			<figcaption>Zipper</figcaption>
+		</figure>
+		<figure>
+			<Image
+				width='1423'
+				height='1600'
+				src='/merch/stella.jpg'
+				alt='Hacking in Parallel Berlin 2022 Shirt with accented waist cut, colorful print of a geometric grid with several gradient lines going from bottom left to top right on the front of the shirt'
+			/>
+			<figcaption>Shirt - Stella (smaller waist fit)</figcaption>
+		</figure>
+		<figure>
+			<Image
+				width='1524'
+				height='1600'
+				src='/merch/stanley.jpg'
+				alt='Hacking in Parallel Berlin 2022 Shirt with a colorful print of a geometric grid with several gradient lines going from bottom left to top right on the front of the shirt'
+			/>
+			<figcaption>Shirt - Stanley</figcaption>
+		</figure>
+	</main>
+</Layout>
+
+<style>
+	img {
+		width: 100%;
+		height: auto;
+	}
+</style>

yarn.lock

@@ -5,6 +5,13 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@altano/tiny-async-pool@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@altano/tiny-async-pool@npm:1.0.2"
+  checksum: 20cb16cd1a85576bfee4b923d5efef1f1957a048268e166026e9c15304902e500147baf3ac65c3d8cfaaf6d1e78f74efd6641c0cd7ce12b97d97145f15825788
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.1.0":
   version: 2.2.0
   resolution: "@ampproject/remapping@npm:2.2.0"
@@ -29,6 +36,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@astrojs/image@npm:^0.11.6":
+  version: 0.11.6
+  resolution: "@astrojs/image@npm:0.11.6"
+  dependencies:
+    "@altano/tiny-async-pool": ^1.0.2
+    http-cache-semantics: ^4.1.0
+    image-size: ^1.0.2
+    kleur: ^4.1.5
+    magic-string: ^0.25.9
+    mime: ^3.0.0
+    slash: ^4.0.0
+    web-streams-polyfill: ^3.2.1
+  peerDependencies:
+    sharp: ">=0.31.0"
+  peerDependenciesMeta:
+    sharp:
+      optional: true
+  checksum: 1fdcd109076ad6d396732f3edd571998b72864e9b1883a08b003400c69df5f2115cc3539052a983e94bb00acf0f480ad29988452548c2704976275252c42f275
+  languageName: node
+  linkType: hard
+
 "@astrojs/language-server@npm:^0.26.2":
   version: 0.26.2
   resolution: "@astrojs/language-server@npm:0.26.2"
@@ -463,6 +491,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/basics@workspace:."
   dependencies:
+    "@astrojs/image": ^0.11.6
     "@svgdotjs/svg.js": ^3.1.2
     "@tweakpane/core": ^1.1.0
     astro: ^1.6.0
@@ -2988,6 +3017,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"image-size@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "image-size@npm:1.0.2"
+  dependencies:
+    queue: 6.0.2
+  bin:
+    image-size: bin/image-size.js
+  checksum: 01745fdb47f87cecf538e69c63f9adc5bfab30a345345c2de91105f3afbd1bfcfba1256af02bf3323077b33b0004469a837e077bf0cbb9c907e9c1e9e7547585
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^4.0.0":
   version: 4.1.0
   resolution: "immutable@npm:4.1.0"
@@ -3033,7 +3073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4":
+"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -3302,7 +3342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.0.3, kleur@npm:^4.1.4":
+"kleur@npm:^4.0.3, kleur@npm:^4.1.4, kleur@npm:^4.1.5":
   version: 4.1.5
   resolution: "kleur@npm:4.1.5"
   checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12
@@ -4752,6 +4792,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"queue@npm:6.0.2":
+  version: 6.0.2
+  resolution: "queue@npm:6.0.2"
+  dependencies:
+    inherits: ~2.0.3
+  checksum: ebc23639248e4fe40a789f713c20548e513e053b3dc4924b6cb0ad741e3f264dcff948225c8737834dd4f9ec286dbc06a1a7c13858ea382d9379f4303bcc0916
+  languageName: node
+  linkType: hard
+
 "random-seed@npm:^0.3.0":
   version: 0.3.0
   resolution: "random-seed@npm:0.3.0"
@@ -6086,7 +6135,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"web-streams-polyfill@npm:^3.0.3":
+"web-streams-polyfill@npm:^3.0.3, web-streams-polyfill@npm:^3.2.1":
   version: 3.2.1
   resolution: "web-streams-polyfill@npm:3.2.1"
   checksum: b119c78574b6d65935e35098c2afdcd752b84268e18746606af149e3c424e15621b6f1ff0b42b2676dc012fc4f0d313f964b41a4b5031e525faa03997457da02