diff --git a/astro.config.mjs b/astro.config.mjs index 5fdf49a..e847b0f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,14 +1,23 @@ // @ts-check -import remarkCodeFile from './src/plugins/remarkCodeFile'; - import mdx from '@astrojs/mdx'; import preact from '@astrojs/preact'; +import expressiveCode from 'astro-expressive-code'; import { defineConfig } from 'astro/config'; +import remarkCodeFile from './src/plugins/remarkCodeFile'; +import remarkToc from 'remark-toc'; // https://astro.build/config export default defineConfig({ - integrations: [mdx(), preact()], + integrations: [ + expressiveCode({ + themes: ["github-dark", "github-light"], + }), + preact(), + mdx({ + remarkPlugins: [remarkToc], + }), + ], markdown: { remarkPlugins: [remarkCodeFile], } diff --git a/package.json b/package.json index e0e1efe..317fe12 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "@astrojs/mdx": "^4.3.13", "@astrojs/preact": "^4.1.3", "astro": "^5.16.5", + "astro-expressive-code": "^0.41.5", "github-markdown-css": "^5.8.1", "preact": "^10.28.0", + "remark-toc": "^9.0.0", "unist-util-visit": "^5.0.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e8a66f8..4bbff9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,12 +17,18 @@ astro: specifier: ^5.16.5 version: 5.16.5(@types/node@25.0.2)(rollup@4.53.3)(typescript@5.9.3) + astro-expressive-code: + specifier: ^0.41.5 + version: 0.41.5(astro@5.16.5(@types/node@25.0.2)(rollup@4.53.3)(typescript@5.9.3)) github-markdown-css: specifier: ^5.8.1 version: 5.8.1 preact: specifier: ^10.28.0 version: 10.28.0 + remark-toc: + specifier: ^9.0.0 + version: 9.0.0 unist-util-visit: specifier: ^5.0.0 version: 5.0.0 @@ -212,6 +218,10 @@ resolution: {integrity: sha512-8XqW8xGn++Eqqbz3e9wKuK7mxryeRjs4LOHLxbh2lwKeSbuNR4NFifDZT4KzvjU6HMOPbiNTsWpniK5EJfTWkg==} engines: {node: '>=18'} + '@ctrl/tinycolor@4.2.0': + resolution: {integrity: sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==} + engines: {node: '>=14'} + '@emnapi/runtime@1.7.1': resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==} @@ -371,6 +381,18 @@ cpu: [x64] os: [win32] + '@expressive-code/core@0.41.5': + resolution: {integrity: sha512-II5TEy5eOoXiqPwqtpSqwamUd7lZS3YH3ofxR1ZyQMmygqORZn8/7SzgfF8G0kB7uKCBzFZT6RgKgCuHcJuPpA==} + + '@expressive-code/plugin-frames@0.41.5': + resolution: {integrity: sha512-qU0cvAQGfRLX7XwGf3/+hqIVmAc/mNNTlqVLR0iBfJF6EKvtP3R7/uAlPrAxnxQxn0meTazCz8D+PsPyOpHKrQ==} + + '@expressive-code/plugin-shiki@0.41.5': + resolution: {integrity: sha512-gw6OWvnmDmvcKJ5AZSzl2VkuixJMQ/zWSwPLFNzitqCa8aPfIFunb0K8IIOsE43LELgOWkie9lRFspOxwDVwrg==} + + '@expressive-code/plugin-text-markers@0.41.5': + resolution: {integrity: sha512-0DSiTsjWFEz6/iuLOGNNy2GaeCW41OwnVJMKx1tS+XKeQxAL89UkZP3egWNzxjWNHNMzEv3ZWWWYqbonEQlv/Q==} + '@img/colour@1.0.0': resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==} engines: {node: '>=18'} @@ -738,6 +760,9 @@ '@types/node@25.0.2': resolution: {integrity: sha512-gWEkeiyYE4vqjON/+Obqcoeffmk0NF15WSBwSs7zwVA2bAbTaE0SJ7P0WNGoJn8uE7fiaV5a7dKYIJriEqOrmA==} + '@types/ungap__structured-clone@1.2.0': + resolution: {integrity: sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA==} + '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -790,6 +815,11 @@ resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} hasBin: true + astro-expressive-code@0.41.5: + resolution: {integrity: sha512-6jfABbPO0fkRD1ROAPBQtJR2p7gjbmk/GjfblOpo5Z7F+gwhL7+s8bEhLz9GdW10yfbn+gJvwEf7f9Lu2clh2A==} + peerDependencies: + astro: ^4.0.0-beta || ^5.0.0-beta || ^3.3.0 + astro@5.16.5: resolution: {integrity: sha512-QeuM4xzTR0QuXFDNlGVW0BW7rcquKFIkylaPeM4ufii0/RRiPTYtwxDYVZ3KfiMRuuc+nbLD0214kMKTvz/yvQ==} engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} @@ -817,6 +847,9 @@ resolution: {integrity: sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==} hasBin: true + bcp-47-match@2.0.3: + resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==} + boolbase@1.0.0: resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} @@ -907,6 +940,9 @@ css-select@5.2.2: resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} + css-selector-parser@3.3.0: + resolution: {integrity: sha512-Y2asgMGFqJKF4fq4xHDSlFYIkeVfRsm69lQC1q9kbEsH5XtnINTMrweLkjYMeaUgiXBy/uvKeO/a1JHTNnmB2g==} + css-tree@2.2.1: resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} @@ -971,6 +1007,10 @@ resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} engines: {node: '>=0.3.1'} + direction@2.0.1: + resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==} + hasBin: true + dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} @@ -1057,6 +1097,9 @@ eventemitter3@5.0.1: resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==} + expressive-code@0.41.5: + resolution: {integrity: sha512-iXl9BgDogQgzgE/WRSrcyU8upOcRZrXPMiu6tegEHML57YLQ65S0E3/sjAXmMZy0GXoPs60s9jbwoMo/mdEQOg==} + extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} @@ -1111,6 +1154,9 @@ hast-util-from-parse5@8.0.3: resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==} + hast-util-has-property@3.0.0: + resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==} + hast-util-is-element@3.0.0: resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} @@ -1120,6 +1166,9 @@ hast-util-raw@9.1.0: resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==} + hast-util-select@6.0.4: + resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==} + hast-util-to-estree@3.1.3: resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==} @@ -1132,6 +1181,9 @@ hast-util-to-parse5@8.0.1: resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==} + hast-util-to-string@3.0.1: + resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} + hast-util-to-text@4.0.2: resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} @@ -1294,6 +1346,9 @@ mdast-util-to-string@4.0.0: resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} + mdast-util-toc@7.1.0: + resolution: {integrity: sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==} + mdn-data@2.0.28: resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} @@ -1496,6 +1551,16 @@ resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} engines: {node: '>=12'} + postcss-nested@6.2.0: + resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + + postcss-selector-parser@6.1.2: + resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} + engines: {node: '>=4'} + postcss@8.5.6: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} @@ -1549,6 +1614,9 @@ regex@6.1.0: resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==} + rehype-expressive-code@0.41.5: + resolution: {integrity: sha512-SzKJyu7heDpkt+XE/AqeWsYMSMocE/5mpJXD6CMgstqJHSE9bxGNcLp3zL9Wne3M5iBsS4GJyOD2syV77kRveA==} + rehype-parse@9.0.1: resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==} @@ -1583,6 +1651,9 @@ remark-stringify@11.0.0: resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + remark-toc@9.0.0: + resolution: {integrity: sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==} + restructure@3.0.2: resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==} @@ -1838,6 +1909,9 @@ peerDependencies: browserslist: '>= 4.21.0' + util-deprecate@1.0.2: + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + vfile-location@5.0.3: resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==} @@ -2211,6 +2285,8 @@ dependencies: fontkit: 2.0.4 + '@ctrl/tinycolor@4.2.0': {} + '@emnapi/runtime@1.7.1': dependencies: tslib: 2.8.1 @@ -2294,6 +2370,31 @@ '@esbuild/win32-x64@0.25.12': optional: true + '@expressive-code/core@0.41.5': + dependencies: + '@ctrl/tinycolor': 4.2.0 + hast-util-select: 6.0.4 + hast-util-to-html: 9.0.5 + hast-util-to-text: 4.0.2 + hastscript: 9.0.1 + postcss: 8.5.6 + postcss-nested: 6.2.0(postcss@8.5.6) + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.2 + + '@expressive-code/plugin-frames@0.41.5': + dependencies: + '@expressive-code/core': 0.41.5 + + '@expressive-code/plugin-shiki@0.41.5': + dependencies: + '@expressive-code/core': 0.41.5 + shiki: 3.20.0 + + '@expressive-code/plugin-text-markers@0.41.5': + dependencies: + '@expressive-code/core': 0.41.5 + '@img/colour@1.0.0': optional: true @@ -2635,6 +2736,8 @@ dependencies: undici-types: 7.16.0 + '@types/ungap__structured-clone@1.2.0': {} + '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -2670,6 +2773,11 @@ astring@1.9.0: {} + astro-expressive-code@0.41.5(astro@5.16.5(@types/node@25.0.2)(rollup@4.53.3)(typescript@5.9.3)): + dependencies: + astro: 5.16.5(@types/node@25.0.2)(rollup@4.53.3)(typescript@5.9.3) + rehype-expressive-code: 0.41.5 + astro@5.16.5(@types/node@25.0.2)(rollup@4.53.3)(typescript@5.9.3): dependencies: '@astrojs/compiler': 2.13.0 @@ -2786,6 +2894,8 @@ baseline-browser-mapping@2.9.7: {} + bcp-47-match@2.0.3: {} + boolbase@1.0.0: {} boxen@8.0.1: @@ -2865,6 +2975,8 @@ domutils: 3.2.2 nth-check: 2.1.1 + css-selector-parser@3.3.0: {} + css-tree@2.2.1: dependencies: mdn-data: 2.0.28 @@ -2914,6 +3026,8 @@ diff@5.2.0: {} + direction@2.0.1: {} + dlv@1.1.3: {} dom-serializer@2.0.0: @@ -3032,6 +3146,13 @@ eventemitter3@5.0.1: {} + expressive-code@0.41.5: + dependencies: + '@expressive-code/core': 0.41.5 + '@expressive-code/plugin-frames': 0.41.5 + '@expressive-code/plugin-shiki': 0.41.5 + '@expressive-code/plugin-text-markers': 0.41.5 + extend@3.0.2: {} fast-deep-equal@3.1.3: {} @@ -3102,6 +3223,10 @@ vfile-location: 5.0.3 web-namespaces: 2.0.1 + hast-util-has-property@3.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-is-element@3.0.0: dependencies: '@types/hast': 3.0.4 @@ -3126,6 +3251,24 @@ web-namespaces: 2.0.1 zwitch: 2.0.4 + hast-util-select@6.0.4: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + bcp-47-match: 2.0.3 + comma-separated-tokens: 2.0.3 + css-selector-parser: 3.3.0 + devlop: 1.1.0 + direction: 2.0.1 + hast-util-has-property: 3.0.0 + hast-util-to-string: 3.0.1 + hast-util-whitespace: 3.0.0 + nth-check: 2.1.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + unist-util-visit: 5.0.0 + zwitch: 2.0.4 + hast-util-to-estree@3.1.3: dependencies: '@types/estree': 1.0.8 @@ -3191,6 +3334,10 @@ web-namespaces: 2.0.1 zwitch: 2.0.4 + hast-util-to-string@3.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-to-text@4.0.2: dependencies: '@types/hast': 3.0.4 @@ -3454,6 +3601,16 @@ dependencies: '@types/mdast': 4.0.4 + mdast-util-toc@7.1.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/ungap__structured-clone': 1.2.0 + '@ungap/structured-clone': 1.3.0 + github-slugger: 2.0.0 + mdast-util-to-string: 4.0.0 + unist-util-is: 6.0.1 + unist-util-visit: 5.0.0 + mdn-data@2.0.28: {} mdn-data@2.12.2: {} @@ -3813,6 +3970,16 @@ picomatch@4.0.3: {} + postcss-nested@6.2.0(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-selector-parser: 6.1.2 + + postcss-selector-parser@6.1.2: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss@8.5.6: dependencies: nanoid: 3.3.11 @@ -3877,6 +4044,10 @@ dependencies: regex-utilities: 2.3.0 + rehype-expressive-code@0.41.5: + dependencies: + expressive-code: 0.41.5 + rehype-parse@9.0.1: dependencies: '@types/hast': 3.0.4 @@ -3958,6 +4129,11 @@ mdast-util-to-markdown: 2.1.2 unified: 11.0.5 + remark-toc@9.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-toc: 7.1.0 + restructure@3.0.2: {} retext-latin@4.0.0: @@ -4241,6 +4417,8 @@ escalade: 3.2.0 picocolors: 1.1.1 + util-deprecate@1.0.2: {} + vfile-location@5.0.3: dependencies: '@types/unist': 3.0.3 diff --git a/public/assets/cli/cmd.exe.jpg b/public/assets/cli/cmd.exe.jpg new file mode 100644 index 0000000..e51c340 --- /dev/null +++ b/public/assets/cli/cmd.exe.jpg Binary files differ diff --git a/public/assets/cli/powershell.jpg b/public/assets/cli/powershell.jpg new file mode 100644 index 0000000..127c0ca --- /dev/null +++ b/public/assets/cli/powershell.jpg Binary files differ diff --git a/public/assets/cli/terminal.app.png b/public/assets/cli/terminal.app.png new file mode 100644 index 0000000..01c2479 --- /dev/null +++ b/public/assets/cli/terminal.app.png Binary files differ diff --git a/src/components/Image.astro b/src/components/Image.astro new file mode 100644 index 0000000..3e64b90 --- /dev/null +++ b/src/components/Image.astro @@ -0,0 +1,67 @@ +--- +import { randomUUID } from "node:crypto"; + +interface Props { + src: string; + alt?: string; + style?: Record; +} + +const src = Astro.props.src; +const alt = Astro.props.alt || ""; + +const uuid = randomUUID(); + +const wrapperStyles = [ + "cursor: pointer;", + ...(Astro.props.style + ? Object.entries(Astro.props.style).map( + ([key, value]) => `${key}: ${value};`, + ) + : null), +]; +--- + + +
+ {alt} +
+ + + {alt} + + + + + + diff --git a/src/components/Toc.astro b/src/components/Toc.astro index 7bc5d0b..fab907b 100644 --- a/src/components/Toc.astro +++ b/src/components/Toc.astro @@ -30,7 +30,7 @@ const sections: Section[] = []; -const sectionPaths = ["html", "js", "tips"]; +const sectionPaths = ["html", "js", "cli", "tips"]; for (const path of sectionPaths) { const pages = await getSectionPages(path); diff --git a/src/pages/cli/00-introduction.mdx b/src/pages/cli/00-introduction.mdx new file mode 100644 index 0000000..c63d903 --- /dev/null +++ b/src/pages/cli/00-introduction.mdx @@ -0,0 +1,32 @@ +--- +layout: "@/layouts/MarkdownLayout.astro" +--- + +import "github-markdown-css"; +import Toc from "../../components/Toc.astro"; +import Image from "../../components/Image.astro"; + +export const title = "CLIってなに？"; + +# {title} + +あなたが今見ているこのページは、おそらくWebブラウザで表示されているでしょう。 +そこには様々なテキストや画像、リンクがあり、クリックやスクロールで操作できます。 +このような人の手によって直感的に操作ができるように設計されたものを **GUI (Graphical User Interface)** と呼びます。 + +一方で、コンピューターにはもう1つ異なる世界があります。 +このような画面を見たことがありますか？ + +cmd.exe + +cmd.exe + +cmd.exe + +馴染みのない人には、パソコンが壊れたときに仕方なく触るもの、というイメージがあるかもしれません。 +これは **CLI (Command Line Interface)** と呼ばれるもので、キーボードからコマンドを入力して操作します。 + +先ほどの画像はそれぞれ、Windowsの「コマンドプロンプト」、Windowsの「PowerShell」、Macの「ターミナル.app」です。 +これらを総称して「ターミナル」や「シェル」と呼ぶこともあります。 + +このターミナルを通して見る文字だけの世界 (CUI: Character User Interface) を、これから覗いてみましょう。 diff --git a/src/pages/cli/01-read-document.mdx b/src/pages/cli/01-read-document.mdx new file mode 100644 index 0000000..ec92f1f --- /dev/null +++ b/src/pages/cli/01-read-document.mdx @@ -0,0 +1,79 @@ +--- +layout: "@/layouts/MarkdownLayout.astro" +--- + +import "github-markdown-css"; +import Toc from "../../components/Toc.astro"; +import Image from "../../components/Image.astro"; + +export const title = "ドキュメントの読み方"; + +# {title} + +## ターミナル上で実行するプログラム + +ターミナルを開くと、1番最初に実行されるプログラムがあります。 +それは **shell (シェル)** です。 + +shellは、キーボードからのコマンド入力を受け取り、そのコマンドを実行して結果を表示する役割を持っています。 + +shellにはいくつか種類がありますが、代表的なものとして以下の3つが挙げられます。 + +- **Bash (Bourne Again SHell)**: Linuxで、現在最も一般的に使用されているシェルです。MacOSでも長らくデフォルトのシェルとして採用されてきました。 +- **Zsh (Z Shell)**: MacOSのデフォルトシェルとして採用されているシェルです。Bashに比べて、より多くの機能やカスタマイズ性を提供します。 +- **fish (Friendly Interactive SHell)**: 直感的で使いやすいインターフェースを提供するシェルです。初心者にも扱いやすい設計となっています。 + +この中でも得に`Bash`は多くの環境で利用されているため、ほとんどのドキュメントやチュートリアルでは`Bash`を前提として説明が行われています。 + +## 書かれ方のパターン + +なにを説明するにしても、まずはドキュメントの読み方を知らないことにはなにも始まりません。 +まずはここから見ていきましょう。 + +### パターン1: コマンドのみの表示 + +実行するコマンドのみを表示する場合は、以下のように表記します。 + +```bash frame=terminal +入力するコマンド +``` + +
+ +```bash frame=terminal +echo "こんにちは！" +``` + +これはターミナル上で、`echo "こんにちは！"`を入力しただけの状態を示しています。 +この状態ではまだコマンドは実行されておらず、`Enter`キーを押すことで初めて実行されます。 + +例として、Rustというプログラミング言語のインストールコマンドを見てみましょう。 +これはRustの公式ドキュメントに記載されているインストールコマンドです。 + +Rustをインストールしたいときは、ターミナルに以下のコマンドを入力して実行`Enter`してください という意味になります。 + +```bash frame=terminal +curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh +``` + +### パターン2: コマンドとその結果の表示 + +コマンドを実行すると、何かしらの結果が表示されることがあります。 +その結果も含めて説明する場合は、以下のように表記します。 + +```bash frame=terminal +$ 入力するコマンド +結果 +``` + +
+ +```bash frame=terminal +$ echo "こんにちは！" +こんにちは！ +``` + +コマンドの前に`$`がついていることに気がつきましたか？ +この`$`が、自身でコマンドを入力する(した)部分であることを示しています。 + +`echo "こんにちは！"`というコマンドを実行した結果、`こんにちは！`という文字列が表示された、という意味になります。 diff --git a/src/pages/cli/02-common-commands.mdx b/src/pages/cli/02-common-commands.mdx new file mode 100644 index 0000000..d1bab34 --- /dev/null +++ b/src/pages/cli/02-common-commands.mdx @@ -0,0 +1,162 @@ +--- +layout: "@/layouts/MarkdownLayout.astro" +--- + +import "github-markdown-css"; +import Toc from "../../components/Toc.astro"; +import Image from "../../components/Image.astro"; + +export const title = "ファイル操作の基本コマンド"; + +# {title} + +## TOC + +## ディレクトリの移動と確認 + +### pwd + +現在のディレクトリ位置を確認します。 + +WindowsではExplorer、MacではFinderなどで、表示されている場所に相当します。 + +```bash frame=terminal +$ pwd +/home/user/projects +``` + +### ls + +### cd + +## ファイル・ディレクトリの操作 + +ターミナル上では、現在のディレクトリを基準にしてファイルやディレクトリの操作を行います。 + +### touch + +### rm + +### mkdir + +### rmdir + +### mv + +### cat + +## その他 + +### echo + +## ジョークコマンド + +### sl + +### lolcat + +### figlet + +### cowsay + +## ファイル操作でよく見る記号 + +### `/` (スラッシュ) + +ディレクトリの区切りを表します。 + +なお、Windowsではバックスラッシュ (`\`) が使われます。 +また、環境によっては ¥と表示されることがあります。 +これはバックスラッシュを表す番号に、¥の文字が割り当てられていた歴史的な経緯によるものです。 + +### `.` (ドット) + +現在のディレクトリを表します。 + +```bash frame=terminal +$ pwd +/home/user/projects +$ cd . +$ pwd +/home/user/projects +``` + +### `..` (ドットドット) + +現在のディレクトリの、1つ上のディレクトリを表します。 + +```bash frame=terminal +$ pwd +/home/user/projects +$ ls /home/user # 1つ上のディレクトリの内容を、明示的に指定して確認 +projects projects2 sample.txt +$ ls .. # 1つ上のディレクトリの内容を確認 +projects projects2 sample.txt +``` + +組み合わせて使うこともできます。 + +```bash frame=terminal +$ pwd +/home/user/projects/src +$ ls ../.. # 2つ上のディレクトリの内容を確認 +projects projects2 sample.txt +$ cd ../../projects2 +$ pwd +/home/user/projects2 +``` + +### `~` (チルダ) + +ユーザーのホームディレクトリを表します。 + +```bash frame=terminal +$ pwd +/home/user/projects/path/to/somewhere +$ cat ~/sample.txt +これは、ホームディレクトリにあるsample.txtの内容です。 +$ cd ~ +$ pwd +/home/user +``` + +## 用語 + +### ルートディレクトリ (root directory) + +ファイルシステムの最上位に位置するディレクトリのことです。 +これ以上上の階層は存在しません。 + +`/`で表されます。 + +なおWindowsでは、各ドライブ (C:やD:) がそれぞれ独立したルートディレクトリを持ちます。 + +`C:\` や `D:\` のように表されます。 + +### パス (path) + +目的のファイルやディレクトリまでの道筋を示す文字列のことです。 + +### 絶対パス (absolute path) + +[ルートディレクトリ](#ルートディレクトリ-root-directory)から始まるパスのことです。 +自分の現在位置に関係なく、常に同じ場所を指し示します。 + +```bash frame=terminal +$ cat /home/user/projects/sample.txt +これは、ホームディレクトリにあるsample.txtの内容です。 +``` + +### 相対パス (relative path) + +自分の現在位置を基準にしたパスのことです。 + +[絶対パス](#絶対パス-absolute-path)ではないパス全般を指すとも言えます。 + +```bash frame=terminal +$ pwd /home +$ cat user/sample.txt +これは、ホームディレクトリにあるsample.txtの内容です。 +$ cat ./user/sample.txt +これは、ホームディレクトリにあるsample.txtの内容です。 +```