TheoryOfNekomata
/
piano-notes-book
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Update styles 

Add styles for print.
master
TheoryOfNekomata 2 weeks ago
parent
47eb97971a
commit
0cc94af4ca
8 changed files with 151 additions and 38 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -1
      astro.config.mjs
  2. +16
    -4
      src/components/Score/index.tsx
  3. +120
    -0
      src/layouts/Default.astro
  4. +0
    -29
      src/layouts/Layout.astro
  5. +1
    -1
      src/pages/ch01-introduction.mdx
  6. +1
    -1
      src/pages/ch20-trills.mdx
  7. +1
    -1
      src/pages/index.mdx
  8. +0
    -1
      src/pages/scores/[asset].svg.ts

+ 12
- 1
astro.config.mjs View File

@@ -6,5 +6,16 @@ import mdx from "@astrojs/mdx";

// https://astro.build/config
export default defineConfig({
integrations: [react(), tailwind(), mdx()],
trailingSlash: 'never',
output: 'static',
build: {
format: 'file',
},
integrations: [
react(),
tailwind({
applyBaseStyles: false,
}),
mdx()
],
});

+ 16
- 4
src/components/Score/index.tsx View File

@@ -10,8 +10,20 @@ export const Score: React.FC<ScoreProps> = ({
alt,
}) => {
return (
<a href={`scores/${id}.musicxml`}>
<img src={`scores/${id}.svg`} alt={alt} />
</a>
)
<div>
<a href={`scores/${id}.svg`}>
<figure>
<img className="svg" src={`scores/${id}.svg`} alt={alt} />
<figcaption>
{alt}
</figcaption>
</figure>
</a>
<div className="screen-controls">
<a href={`scores/${id}.musicxml`}>
Download MusicXML
</a>
</div>
</div>
);
};

+ 120
- 0
src/layouts/Default.astro View File

@@ -0,0 +1,120 @@
---
const { title } = Astro.props.frontmatter || Astro.props;
---

<!doctype html>
<html lang="en-PH">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<title>{title}</title>
<style is:global>
html {
@apply font-body;
}

body {
@apply w-full;
@apply mx-auto;
@apply max-w-screen-md;
@apply leading-relaxed;
@apply box-border;
}

p {
@apply my-6;
@apply indent-6;
@apply text-justify;
}

figure {
@apply m-0;
}

figcaption {
@apply text-center;
}

.screen-controls {
@apply flex;
@apply justify-center;
}

a:link {
@apply text-blue-600;
}

a:visited {
@apply text-purple-600;
}

@media only screen {
body {
@apply px-8;
@apply my-16;
}
}

@media only print {
head {
@apply block;
}

title {
@apply block;
@apply text-5xl;
@apply text-center;
@apply my-16;
}

body {
@apply max-w-full;
@apply m-0;
}

.screen-controls {
@apply hidden;
}

a:link {
@apply text-inherit;
@apply no-underline;
}

a:visited {
@apply text-inherit;
}
}

@media only screen and (prefers-color-scheme: dark) {
html {
@apply bg-black;
@apply text-white;
}

img.svg {
filter: invert(100%);
}

a:link {
@apply text-blue-400;
}

a:visited {
@apply text-purple-400;
}
}

@page {
margin: 2cm;
}
</style>
</head>
<body>
<slot />
<div class="">

</div>
</body>
</html>

+ 0
- 29
src/layouts/Layout.astro View File

@@ -1,29 +0,0 @@
---
const { title } = Astro.props.frontmatter || Astro.props;
---

<!doctype html>
<html lang="en-PH" class="font-body">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<style is:global>
@import url("https://www.verovio.org/javascript/4.1.0/data/Bravura.css");

p {
@apply my-6;
@apply indent-6;
@apply text-justify;
}
</style>
</head>
<body>
<div class="px-8 w-full mx-auto max-w-screen-md print:max-w-full print:m-0 my-16">
<slot />
</div>
</body>
</html>

+ 1
- 1
src/pages/ch01-introduction.mdx View File

@@ -1,6 +1,6 @@
---
title: Introduction
layout: ../layouts/Layout.astro
layout: ../layouts/Default.astro
---

Detail about me here

+ 1
- 1
src/pages/ch20-trills.mdx View File

@@ -1,6 +1,6 @@
---
title: Trills
layout: ../layouts/Layout.astro
layout: ../layouts/Default.astro
---

import {Score} from '../components/Score';


+ 1
- 1
src/pages/index.mdx View File

@@ -1,6 +1,6 @@
---
title: Book Name
layout: ../layouts/Layout.astro
layout: ../layouts/Default.astro
---

Hello world!


+ 0
- 1
src/pages/scores/[asset].svg.ts View File

@@ -69,7 +69,6 @@ const processOutput = (xmlData: string) => {
};

export const GET: APIRoute = async ({ params }) => {
console.log('asdfasdf');
const verovioModule = await createVerovioModule();
const score = await readFile(`public/scores/${params.asset}.musicxml`, 'utf-8');
const verovioToolkit = new VerovioToolkit(verovioModule);


Write Preview
Loading…
Cancel
Save