Bläddra i källkod

Merge branch 'feature/first-site' of bajdev/mpckit-site into main

bajdev 1 dag sedan
förälder
incheckning
84ac49f185

+ 1 - 1
LICENSE

@@ -1,5 +1,5 @@
 MIT License
-Copyright (c) <year> <copyright holders>
+Copyright (c) 2026 bajdev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

+ 19 - 1
README.md

@@ -1,3 +1,21 @@
 # mpckit-site
 
-Website for MPCKit tool for MPC Sample
+Website for mpckit, the kit editor for the Akai MPC Sample: https://mpckit.monoexp.com/
+
+A single static page in `public/` (HTML, one stylesheet, no build step), styled after [monoexp.com](https://monoexp.com/). The app itself lives in its own repository.
+
+## Preview locally
+
+```
+python3 -m http.server 18010 --bind 127.0.0.1 --directory public
+```
+
+Then open http://127.0.0.1:18010/.
+
+## Deploy
+
+Merges into `main` publish `public/` to the server (deploy pipeline, `static` kind). The nginx site file is in `nginx/`.
+
+## Licence
+
+MIT. See [LICENSE](LICENSE). mpckit is not affiliated with Akai Professional or inMusic Brands.

+ 23 - 0
nginx/mpckit.monoexp.com.conf

@@ -0,0 +1,23 @@
+# /etc/nginx/vhosts.d/mpckit.monoexp.com.conf
+#
+# Static site for mpckit, published from public/ by the deploy pipeline.
+# Port 80 (ACME challenges and the HTTP->HTTPS redirect) is handled by the
+# `.monoexp.com` block in 00-default.conf.
+#
+# Certificate: sudo /usr/local/sbin/issue-cert mpckit.monoexp.com
+
+server {
+    listen 443 ssl; listen [::]:443 ssl;
+    server_name mpckit.monoexp.com;
+    ssl_certificate     /etc/letsencrypt/live/mpckit.monoexp.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/mpckit.monoexp.com/privkey.pem;
+    include snippets/tls-common.conf;
+
+    root /srv/www/vhosts/mpckit.monoexp.com;
+    index index.html;
+
+    location / { try_files $uri $uri/ =404; }
+
+    # Short cache for the stylesheet, icon and screenshots; HTML keeps nginx's defaults.
+    location ~* \.(css|svg|png|webp)$ { expires 1h; }
+}

+ 11 - 0
public/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- The app icon: a 4x4 pad grid with pad 1 (bottom left) lit. -->
+  <rect width="64" height="64" rx="14" fill="#15171a"/>
+  <g fill="#333842">
+    <rect x="8" y="8" width="10" height="10" rx="2"/><rect x="21" y="8" width="10" height="10" rx="2"/><rect x="34" y="8" width="10" height="10" rx="2"/><rect x="47" y="8" width="10" height="10" rx="2"/>
+    <rect x="8" y="21" width="10" height="10" rx="2"/><rect x="21" y="21" width="10" height="10" rx="2"/><rect x="34" y="21" width="10" height="10" rx="2"/><rect x="47" y="21" width="10" height="10" rx="2"/>
+    <rect x="8" y="34" width="10" height="10" rx="2"/><rect x="21" y="34" width="10" height="10" rx="2"/><rect x="34" y="34" width="10" height="10" rx="2"/><rect x="47" y="34" width="10" height="10" rx="2"/>
+    <rect x="21" y="47" width="10" height="10" rx="2"/><rect x="34" y="47" width="10" height="10" rx="2"/><rect x="47" y="47" width="10" height="10" rx="2"/>
+  </g>
+  <rect x="8" y="47" width="10" height="10" rx="2" fill="#f5a524"/>
+</svg>

BIN
public/images/pads.png


BIN
public/images/sequences.png


+ 122 - 0
public/index.html

@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>mpckit: kit editor for the Akai MPC Sample</title>
+  <meta name="description" content="mpckit builds Akai MPC Sample projects on your computer: assign WAVs to pads, tune them, set mute groups and sequences, then export to the device. Windows, macOS and Linux.">
+  <meta name="color-scheme" content="light dark">
+  <link rel="canonical" href="https://mpckit.monoexp.com/">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <header class="site-header">
+    <div class="wrap header-inner">
+      <a class="wordmark" href="/">mpc<span>kit</span></a>
+      <nav aria-label="Main">
+        <a href="#features">Features</a>
+        <a href="#download">Download</a>
+        <a href="https://git.monoexp.com/bajdev/mpckit">Source</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="wrap">
+    <section class="about" aria-labelledby="about-title">
+      <p class="eyebrow"><span class="badge">Beta</span> Version 0.5.0</p>
+      <h1 id="about-title">mpckit</h1>
+      <p class="lede">
+        Build Akai MPC Sample projects on your computer.
+      </p>
+      <p>
+        Drop WAV files onto pads, tune them, set mute groups and sequences,
+        then export a project the device opens as it is. mpckit can also load
+        a project saved on the device, so you can change it on a bigger screen
+        and send it back.
+      </p>
+      <div class="actions">
+        <a class="button" href="#download">Download</a>
+        <a class="button secondary" href="https://git.monoexp.com/bajdev/mpckit">Source</a>
+      </div>
+    </section>
+
+    <figure class="shot">
+      <img src="/images/pads.png" width="1182" height="867"
+           alt="The mpckit window on the Pads tab: bank A's 16 pads, ten of them holding drum samples, with the settings for pad A03 (Closed Hat) on the right: play, tuning sliders and mute group.">
+      <figcaption>Pads: eight banks of 16, with the selected pad's settings on the right.</figcaption>
+    </figure>
+
+    <section id="features" aria-labelledby="features-title">
+      <h2 id="features-title" class="section-title">Features</h2>
+      <ul class="cards">
+        <li class="card">
+          <h3>Pads and banks</h3>
+          <p>All 128 pads in eight banks of 16. Drop a WAV on a pad to assign it, click to hear it, and drag pads to move, swap or copy them.</p>
+        </li>
+        <li class="card">
+          <h3>Tuning and mute groups</h3>
+          <p>Tune each pad by &plusmn;24 semitones and &plusmn;90 cents, and put pads in mute groups so they cut each other off, as on the device.</p>
+        </li>
+        <li class="card">
+          <h3>Sequences</h3>
+          <p>Up to 128 sequence slots, each with a name, tempo (20&ndash;999 BPM) and length in bars. Notes are recorded on the device.</p>
+        </li>
+        <li class="card">
+          <h3>Load and export</h3>
+          <p>Open a project saved on the device, edit it, and export to a folder (for example straight onto the card) or a zip.</p>
+        </li>
+      </ul>
+      <figure class="shot">
+        <img src="/images/sequences.png" width="1182" height="867" loading="lazy"
+             alt="The mpckit window on the Sequences tab: six sequences in bank A (Intro, Verse 1, Verse 2, Outro, Chorus, Bridge), with the name, BPM and length of A01 on the right.">
+        <figcaption>Sequences: one slot per pad, with name, tempo and length.</figcaption>
+      </figure>
+    </section>
+
+    <section id="download" aria-labelledby="download-title">
+      <h2 id="download-title" class="section-title">Download</h2>
+      <p class="note">
+        <strong>0.5.0 is a beta for testing.</strong> Expect rough edges, and keep
+        copies of projects you care about. Downloads will be listed here;
+        until then, mpckit can be built from source.
+      </p>
+      <ul class="cards">
+        <li class="card">
+          <div class="card-head"><h3>Windows</h3><span class="tag">10 &middot; 11</span></div>
+          <p>Run <code>mpckit.exe</code>. If SmartScreen says &ldquo;Windows protected your PC&rdquo;, choose <strong>More info</strong>, then <strong>Run anyway</strong>. Uses the WebView2 runtime, which current Windows includes.</p>
+        </li>
+        <li class="card">
+          <div class="card-head"><h3>macOS</h3><span class="tag">.app</span></div>
+          <p>Move <code>mpckit.app</code> to Applications and open it. When macOS says it can't check the app, open <strong>System Settings &rarr; Privacy &amp; Security</strong> and choose <strong>Open Anyway</strong>.</p>
+        </li>
+        <li class="card">
+          <div class="card-head"><h3>Linux</h3><span class="tag">GTK 4</span></div>
+          <p>Make the file executable (<code>chmod +x mpckit</code>) and run it. Needs the GTK 4 and WebKitGTK 6.0 libraries from your distribution.</p>
+        </li>
+        <li class="card">
+          <div class="card-head"><h3>From source</h3><span class="tag">Go &middot; Wails</span></div>
+          <p>Go 1.26, Node.js and the Wails v3 CLI. The <a href="https://git.monoexp.com/bajdev/mpckit">README</a> has the steps.</p>
+        </li>
+      </ul>
+      <p class="small">Builds aren't signed yet, which is why each system warns the first time you open mpckit.</p>
+    </section>
+
+    <section id="disclaimer" aria-labelledby="disclaimer-title">
+      <h2 id="disclaimer-title" class="section-title">Disclaimer</h2>
+      <p class="small">
+        mpckit is an independent project. It is not affiliated with, endorsed by
+        or supported by Akai Professional or inMusic Brands. Akai, MPC and MPC
+        Sample are trademarks of their respective owners and are used here only
+        to describe the device mpckit works with.
+      </p>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>mpckit is MIT licensed &middot; A <a href="https://monoexp.com/">Mono Experiments</a> project &middot; <a href="https://git.monoexp.com/bajdev/mpckit-site">Source for this site</a></p>
+    </div>
+  </footer>
+</body>
+</html>

+ 211 - 0
public/style.css

@@ -0,0 +1,211 @@
+/* mpckit.monoexp.com — one stylesheet, no framework.
+   Based on monoexp.com's; the amber accent is the app's. */
+
+:root {
+  --bg: #fafaf9;
+  --surface: #ffffff;
+  --text: #1c1c1a;
+  --muted: #5f5f5a;
+  --border: #e4e4e0;
+  --accent: #1c1c1a;
+  --tag-bg: #f0f0ed;
+  --focus: #2f6fdb;
+  --amber: #b86e00;
+  --amber-bg: #fdf1dc;
+
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --radius: 10px;
+  --max: 760px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #121211;
+    --surface: #1a1a19;
+    --text: #ececea;
+    --muted: #a3a39e;
+    --border: #2c2c2a;
+    --accent: #ececea;
+    --tag-bg: #252524;
+    --focus: #7aa7f5;
+    --amber: #f5a524;
+    --amber-bg: #2e2412;
+  }
+}
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 17px/1.6 var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-underline-offset: 3px; }
+a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
+
+.wrap {
+  max-width: var(--max);
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* Header */
+.site-header { border-bottom: 1px solid var(--border); }
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+}
+.wordmark {
+  font: 600 18px/1 var(--mono);
+  letter-spacing: -0.02em;
+  text-decoration: none;
+}
+.wordmark span { color: var(--amber); }
+nav { display: flex; gap: 20px; }
+nav a {
+  font-size: 15px;
+  color: var(--muted);
+  text-decoration: none;
+}
+nav a:hover { color: var(--text); }
+
+/* About */
+.about { padding: 56px 0 40px; }
+.about h1 { font-family: var(--mono); }
+.about h1 {
+  margin: 0 0 12px;
+  font-size: clamp(30px, 6vw, 42px);
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+.about p { margin: 0 0 14px; color: var(--muted); max-width: 62ch; }
+.about .lede { font-size: 20px; color: var(--text); }
+
+/* Hero extras */
+.eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 14px !important;
+  font: 13px/1 var(--mono);
+  color: var(--muted);
+}
+.badge {
+  font: 600 12px/1 var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--amber);
+  background: var(--amber-bg);
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
+.button {
+  display: inline-block;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  background: var(--text);
+  color: var(--bg);
+  border: 1px solid var(--text);
+}
+.button:hover { opacity: 0.85; }
+.button.secondary { background: transparent; color: var(--text); border-color: var(--border); }
+.button.secondary:hover { opacity: 1; border-color: var(--accent); }
+
+/* Screenshot */
+.shot {
+  margin: 0 0 48px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--surface);
+}
+.shot img { display: block; width: 100%; height: auto; background: #15171a; }
+.shot figcaption {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  font-size: 14px;
+  color: var(--muted);
+}
+#features .shot { margin: 16px 0 0; }
+
+/* Sections */
+main section:not(.about) { padding-bottom: 48px; scroll-margin-top: 16px; }
+.section-title {
+  margin: 0 0 16px;
+  font: 600 13px/1 var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+.note { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; }
+.note strong { color: var(--text); }
+.small { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
+#disclaimer .small { margin-top: 0; max-width: 62ch; }
+code {
+  font: 0.88em var(--mono);
+  background: var(--tag-bg);
+  padding: 2px 5px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+/* Cards */
+.cards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 640px) {
+  .cards { grid-template-columns: 1fr 1fr; }
+}
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
+.card-head h3 { margin: 0; }
+.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
+.card strong { color: var(--text); font-weight: 600; }
+.tag {
+  flex-shrink: 0;
+  font: 12px/1 var(--mono);
+  color: var(--muted);
+  background: var(--tag-bg);
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
+/* Footer */
+.site-footer { border-top: 1px solid var(--border); }
+.site-footer p { margin: 0; padding: 24px 0 32px; font-size: 14px; color: var(--muted); }

+ 19 - 0
pull-releases/001-first-site/README.md

@@ -0,0 +1,19 @@
+First version of the site
+
+## What changed
+
+- `public/`: a single page for mpckit (intro, app screenshots, features, download and install notes per system, disclaimer). Styled after monoexp.com: the same stylesheet tokens, light and dark themes, with the app's amber as the only accent.
+- `public/images/`: screenshots of the Pads and Sequences tabs from the Windows build. The local export path in the status bar was painted out.
+- `public/favicon.svg`: the app icon (4x4 pad grid, pad 1 lit), redrawn as SVG.
+- `nginx/mpckit.monoexp.com.conf`: the site file for the server.
+- `LICENSE`: filled in the copyright line (2026 bajdev).
+- `README.md`, `pull-releases/`: how to preview and deploy; this record.
+
+## Notes
+
+- No download links yet: builds come with the app's new repository. Until then the page says downloads will be listed there and points to the source.
+- Source links point to git.monoexp.com/bajdev/mpckit until the app repository moves.
+
+## Testing
+
+- Served `public/` locally and checked desktop, mobile, light and dark screenshots.

+ 7 - 0
pull-releases/README.md

@@ -0,0 +1,7 @@
+# Pull releases
+
+One folder per pull request, with a README whose first line is the PR title.
+
+| # | PR | Branch |
+|---|----|--------|
+| 001 | [First version of the site](001-first-site/README.md) | feature/first-site |