Merge pull request #330 from tidalcycles/my-patterns

my-patterns: fix paths + update readme
This commit is contained in:
Felix Roos 2022-12-28 17:35:35 +01:00 committed by GitHub
commit cee8bda676
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 4 deletions

View File

@ -11,5 +11,6 @@ This directory can be used to save your own patterns.
1. in your fork, go to settings -> pages and select "Github Actions" as source 1. in your fork, go to settings -> pages and select "Github Actions" as source
2. edit `website/public/CNAME` to contain `<your-username>.github.io/strudel` 2. edit `website/public/CNAME` to contain `<your-username>.github.io/strudel`
3. go to Actions -> "Build and Deploy" and click "Run workflow" 3. edit `website/astro.config.mjs` to use site: `<your-username>.github.io/strudel` and base `/strudel`
4. view your patterns at `<your-username>.github.io/strudel/my-patterns` 4. go to Actions -> "Build and Deploy" and click "Run workflow"
5. view your patterns at `<your-username>.github.io/strudel/my-patterns`

View File

@ -31,6 +31,7 @@ export default defineConfig({
tailwind(), tailwind(),
], ],
site: `https://strudel.tidalcycles.org`, site: `https://strudel.tidalcycles.org`,
base: '',
}); });
/* /*

View File

@ -19,12 +19,12 @@ const myPatterns = await getMyPatterns();
Object.entries(myPatterns).map(([name, tune]) => ( Object.entries(myPatterns).map(([name, tune]) => (
<a <a
class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
href={`/#${btoa(tune as string)}`} href={`../#${btoa(tune as string)}`}
> >
<div class="absolute w-full h-full flex justify-center items-center"> <div class="absolute w-full h-full flex justify-center items-center">
<span class="bg-slate-800 p-2 rounded-md text-white">{name}</span> <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
</div> </div>
<img src={`/my-patterns/${name}.png`} /> <img src={`./${name}.png`} />
</a> </a>
)) ))
} }