@berlysia/vertical-writing-slide-system 0.0.18 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/cli.js +14 -46
  2. package/package.json +1 -1
  3. package/src/App.tsx +31 -6
  4. package/src/index.css +6 -6
package/cli.js CHANGED
@@ -1,61 +1,22 @@
1
1
  #!/usr/bin/env node
2
2
  // @ts-check
3
3
 
4
- import { writeFile, access } from "node:fs/promises";
5
4
  import { resolve } from "node:path";
6
5
  import { parseArgs } from "node:util";
7
6
  import { build, createServer } from "vite";
8
7
 
9
- async function ensureIndexHtml() {
10
- const indexHtmlPath = resolve(process.cwd(), "index.html");
11
- try {
12
- await access(indexHtmlPath);
13
- // index.html already exists
14
- return;
15
- } catch {
16
- // index.html doesn't exist, create it
17
- // Use absolute paths from the library location for external projects
18
- const libPath = import.meta.dirname;
19
- const libSrcPath = resolve(libPath, "src");
20
-
21
- // Convert to relative paths from project root that Vite can resolve
22
- const relativeSrcPath = `/@fs${libSrcPath}`;
23
-
24
- const indexHtmlContent = `<!doctype html>
25
- <html lang="ja">
26
- <head>
27
- <meta charset="UTF-8" />
28
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
29
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
30
- <title>Vertical Writing Slides</title>
31
- <link rel="preconnect" href="https://fonts.googleapis.com">
32
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
33
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
34
- <link rel="stylesheet" href="${relativeSrcPath}/index.css" />
35
- <link rel="stylesheet" media="screen" href="${relativeSrcPath}/screen.css" />
36
- <link rel="stylesheet" media="print" href="${relativeSrcPath}/print.css" />
37
- </head>
38
- <body>
39
- <div id="root"></div>
40
- <script type="module" src="${relativeSrcPath}/main.tsx"></script>
41
- </body>
42
- </html>`;
43
-
44
- await writeFile(indexHtmlPath, indexHtmlContent);
45
- console.log("Generated index.html for external project");
46
- }
47
- }
48
-
49
8
  async function runDev() {
50
9
  try {
51
10
  const libPath = import.meta.dirname;
52
11
  const projectPath = process.cwd();
53
12
 
54
- // Ensure index.html exists for external projects
55
- await ensureIndexHtml();
13
+ // Set environment variables for external project
14
+ if (!process.env.SLIDES_DIR) {
15
+ process.env.SLIDES_DIR = resolve(projectPath, "./slides");
16
+ }
56
17
 
57
18
  const server = await createServer({
58
- root: projectPath, // Use project as root for proper file watching
19
+ root: libPath, // Use library as root to serve its index.html
59
20
  configFile: resolve(libPath, "vite.config.ts"),
60
21
  server: {
61
22
  fs: {
@@ -98,13 +59,20 @@ async function runBuildAll() {
98
59
 
99
60
  async function runBuild() {
100
61
  try {
62
+ const projectPath = process.cwd();
63
+
64
+ // Set environment variables for external project
65
+ if (!process.env.SLIDES_DIR) {
66
+ process.env.SLIDES_DIR = resolve(projectPath, "./slides");
67
+ }
68
+
101
69
  await build({
102
- root: process.cwd(),
70
+ root: import.meta.dirname, // Use library as root like dev mode
103
71
  configFile: resolve(import.meta.dirname, "vite.config.ts"),
104
72
  build: {
105
73
  outDir: resolve(process.cwd(), "pages"),
106
74
  rollupOptions: {
107
- input: resolve(import.meta.dirname, "src/main.tsx"),
75
+ input: resolve(import.meta.dirname, "index.html"),
108
76
  output: {
109
77
  assetFileNames: "assets/[name]-[hash][extname]",
110
78
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@berlysia/vertical-writing-slide-system",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "vertical-slides": "./cli.js"
package/src/App.tsx CHANGED
@@ -1,13 +1,38 @@
1
- import { useState, useRef, useEffect } from "react";
1
+ import { useState, useRef, useEffect, useCallback } from "react";
2
2
  import slidesContent from "virtual:slides.js";
3
3
 
4
4
  function App() {
5
- const [writingMode, setWritingMode] = useState("vertical-rl");
5
+ const [writingMode, setWritingMode] = useState(() => {
6
+ const saved = sessionStorage.getItem("slide-writing-mode");
7
+ return saved ?? "vertical-rl";
8
+ });
6
9
  const isVertical = writingMode !== "horizontal-tb";
7
10
  const slidesRef = useRef<HTMLDivElement>(null);
8
11
 
9
- const [fontSize, setFontSize] = useState(42);
10
- const [withAbsoluteFontSize, setWithAbsoluteFontSize] = useState(false);
12
+ const [fontSize, setFontSize] = useState(() => {
13
+ const saved = sessionStorage.getItem("slide-font-size");
14
+ return saved ? Number(saved) : 42;
15
+ });
16
+ const [withAbsoluteFontSize, setWithAbsoluteFontSize] = useState(() => {
17
+ const saved = sessionStorage.getItem("slide-with-absolute-font-size");
18
+ return saved === "true";
19
+ });
20
+
21
+ // 状態変更時にsessionStorageに保存
22
+ useEffect(() => {
23
+ sessionStorage.setItem("slide-writing-mode", writingMode);
24
+ }, [writingMode]);
25
+
26
+ useEffect(() => {
27
+ sessionStorage.setItem("slide-font-size", fontSize.toString());
28
+ }, [fontSize]);
29
+
30
+ useEffect(() => {
31
+ sessionStorage.setItem(
32
+ "slide-with-absolute-font-size",
33
+ withAbsoluteFontSize.toString(),
34
+ );
35
+ }, [withAbsoluteFontSize]);
11
36
 
12
37
  // ロード時にハッシュが入ってたらそのページにスクロール
13
38
  useEffect(() => {
@@ -44,7 +69,7 @@ function App() {
44
69
  };
45
70
  }, []);
46
71
 
47
- function gotoNextSlide(forward = true) {
72
+ const gotoNextSlide = useCallback((forward = true) => {
48
73
  const currentHash = location.hash;
49
74
  const currentIndex = parseInt(currentHash.replace("#page-", ""));
50
75
  const nextIndex = forward ? currentIndex + 1 : currentIndex - 1;
@@ -52,7 +77,7 @@ function App() {
52
77
  return;
53
78
  }
54
79
  location.hash = `#page-${nextIndex}`;
55
- }
80
+ }, []);
56
81
 
57
82
  // keydownイベントでページ送り
58
83
  useEffect(() => {
package/src/index.css CHANGED
@@ -40,7 +40,7 @@ code {
40
40
  .wrapper {
41
41
  width: 100%;
42
42
  height: 100%;
43
- padding: 1.2em 1.2em;
43
+ padding: 1.2rem 1.2rem;
44
44
 
45
45
  position: relative;
46
46
 
@@ -60,20 +60,20 @@ code {
60
60
  }
61
61
 
62
62
  h1 {
63
- font-size: 1.4em;
63
+ font-size: 1.4rem;
64
64
  font-weight: bold;
65
65
  margin: 0;
66
- margin-block-end: 0.2em;
66
+ margin-block-end: 0.2rem;
67
67
  }
68
68
  ul,
69
69
  ol {
70
70
  list-style-position: outside;
71
71
  margin: 0;
72
- margin-block-end: 1em;
72
+ margin-block-end: 1rem;
73
73
  }
74
74
  ul ul,
75
75
  ol ol {
76
- margin-block-end: 1em;
76
+ margin-block-end: 1rem;
77
77
  }
78
78
  ul ul ul,
79
79
  ol ol ol {
@@ -81,7 +81,7 @@ code {
81
81
  }
82
82
  p {
83
83
  margin: 0;
84
- margin-block-end: 0.5em;
84
+ margin-block-end: 0.5rem;
85
85
  }
86
86
 
87
87
  .wm-toggle {