Compare commits
3 Commits
3a59f45e58
...
post-siden
| Author | SHA1 | Date | |
|---|---|---|---|
| b4a1097845 | |||
| adc582116b | |||
| 7d5c696fa7 |
390
package-lock.json
generated
390
package-lock.json
generated
@ -10,14 +10,10 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-static": "^1.0.0-next.21",
|
"@sveltejs/adapter-static": "^1.0.0-next.21",
|
||||||
"@sveltejs/kit": "next",
|
"@sveltejs/kit": "next",
|
||||||
"hast-util-to-text": "^3.1.2",
|
|
||||||
"mdast-util-to-string": "^4.0.0",
|
|
||||||
"mdsvex": "^0.9.8",
|
"mdsvex": "^0.9.8",
|
||||||
"node-sass": "^6.0.1",
|
"node-sass": "^6.0.1",
|
||||||
"svelte": "^3.42.6",
|
"svelte": "^3.42.6",
|
||||||
"svelte-preprocess": "^4.9.8",
|
"svelte-preprocess": "^4.9.8"
|
||||||
"unist-util-find": "^2.0.0",
|
|
||||||
"unist-util-visit": "^5.0.0"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/code-frame": {
|
"node_modules/@babel/code-frame": {
|
||||||
@ -163,24 +159,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/hast": {
|
|
||||||
"version": "2.3.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.5.tgz",
|
|
||||||
"integrity": "sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@types/mdast": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@types/minimist": {
|
"node_modules/@types/minimist": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
|
||||||
@ -1455,36 +1433,6 @@
|
|||||||
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
|
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/hast-util-is-element": {
|
|
||||||
"version": "2.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
|
|
||||||
"integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/hast": "^2.0.0",
|
|
||||||
"@types/unist": "^2.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/hast-util-to-text": {
|
|
||||||
"version": "3.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
|
|
||||||
"integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/hast": "^2.0.0",
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"hast-util-is-element": "^2.0.0",
|
|
||||||
"unist-util-find-after": "^4.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/hosted-git-info": {
|
"node_modules/hosted-git-info": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
|
||||||
@ -1741,12 +1689,6 @@
|
|||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/lodash.iteratee": {
|
|
||||||
"version": "4.7.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
|
|
||||||
"integrity": "sha512-yv3cSQZmfpbIKo4Yo45B1taEvxjNvcpF1CEOc0Y6dEyvhPIfEJE3twDwPgWTPQubcSgXyBwBKG6wpQvWMDOf6Q==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/lru-cache": {
|
"node_modules/lru-cache": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||||
@ -1783,19 +1725,6 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/mdast-util-to-string": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/mdast": "^4.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/mdsvex": {
|
"node_modules/mdsvex": {
|
||||||
"version": "0.9.8",
|
"version": "0.9.8",
|
||||||
"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.9.8.tgz",
|
"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.9.8.tgz",
|
||||||
@ -3015,109 +2944,6 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/unist-util-find": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-find/-/unist-util-find-2.0.0.tgz",
|
|
||||||
"integrity": "sha512-I4NH8M2r7B9pGNXl41fftwCCi/WhG50RUdZDYcpEmiQEgHUYtfWpcCX4/R6s4XtK0ztxUSwC6u9sztlnDQAoaA==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"lodash.iteratee": "^4.0.0",
|
|
||||||
"unist-util-visit": "^4.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-find-after": {
|
|
||||||
"version": "4.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
|
|
||||||
"integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"unist-util-is": "^5.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-find-after/node_modules/unist-util-is": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-find/node_modules/unist-util-is": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-find/node_modules/unist-util-visit": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"unist-util-is": "^5.0.0",
|
|
||||||
"unist-util-visit-parents": "^5.1.1"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-find/node_modules/unist-util-visit-parents": {
|
|
||||||
"version": "5.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
|
|
||||||
"integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"unist-util-is": "^5.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-is": {
|
|
||||||
"version": "6.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
|
|
||||||
"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^3.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-is/node_modules/@types/unist": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-stringify-position": {
|
"node_modules/unist-util-stringify-position": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
|
||||||
@ -3131,47 +2957,6 @@
|
|||||||
"url": "https://opencollective.com/unified"
|
"url": "https://opencollective.com/unified"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/unist-util-visit": {
|
|
||||||
"version": "5.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
|
|
||||||
"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^3.0.0",
|
|
||||||
"unist-util-is": "^6.0.0",
|
|
||||||
"unist-util-visit-parents": "^6.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-visit-parents": {
|
|
||||||
"version": "6.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
|
|
||||||
"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": "^3.0.0",
|
|
||||||
"unist-util-is": "^6.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/unified"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-visit-parents/node_modules/@types/unist": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/unist-util-visit/node_modules/@types/unist": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/uri-js": {
|
"node_modules/uri-js": {
|
||||||
"version": "4.4.1",
|
"version": "4.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
||||||
@ -3627,24 +3412,6 @@
|
|||||||
"svelte-hmr": "^0.14.11"
|
"svelte-hmr": "^0.14.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@types/hast": {
|
|
||||||
"version": "2.3.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.5.tgz",
|
|
||||||
"integrity": "sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@types/mdast": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@types/minimist": {
|
"@types/minimist": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
|
||||||
@ -4545,28 +4312,6 @@
|
|||||||
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
|
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"hast-util-is-element": {
|
|
||||||
"version": "2.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
|
|
||||||
"integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/hast": "^2.0.0",
|
|
||||||
"@types/unist": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"hast-util-to-text": {
|
|
||||||
"version": "3.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
|
|
||||||
"integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/hast": "^2.0.0",
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"hast-util-is-element": "^2.0.0",
|
|
||||||
"unist-util-find-after": "^4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"hosted-git-info": {
|
"hosted-git-info": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
|
||||||
@ -4780,12 +4525,6 @@
|
|||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"lodash.iteratee": {
|
|
||||||
"version": "4.7.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
|
|
||||||
"integrity": "sha512-yv3cSQZmfpbIKo4Yo45B1taEvxjNvcpF1CEOc0Y6dEyvhPIfEJE3twDwPgWTPQubcSgXyBwBKG6wpQvWMDOf6Q==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"lru-cache": {
|
"lru-cache": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||||
@ -4810,15 +4549,6 @@
|
|||||||
"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
|
"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"mdast-util-to-string": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/mdast": "^4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"mdsvex": {
|
"mdsvex": {
|
||||||
"version": "0.9.8",
|
"version": "0.9.8",
|
||||||
"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.9.8.tgz",
|
"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.9.8.tgz",
|
||||||
@ -5722,87 +5452,6 @@
|
|||||||
"integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
|
"integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"unist-util-find": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-find/-/unist-util-find-2.0.0.tgz",
|
|
||||||
"integrity": "sha512-I4NH8M2r7B9pGNXl41fftwCCi/WhG50RUdZDYcpEmiQEgHUYtfWpcCX4/R6s4XtK0ztxUSwC6u9sztlnDQAoaA==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"lodash.iteratee": "^4.0.0",
|
|
||||||
"unist-util-visit": "^4.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"unist-util-is": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unist-util-visit": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"unist-util-is": "^5.0.0",
|
|
||||||
"unist-util-visit-parents": "^5.1.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unist-util-visit-parents": {
|
|
||||||
"version": "5.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
|
|
||||||
"integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"unist-util-is": "^5.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unist-util-find-after": {
|
|
||||||
"version": "4.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
|
|
||||||
"integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2.0.0",
|
|
||||||
"unist-util-is": "^5.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"unist-util-is": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^2.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unist-util-is": {
|
|
||||||
"version": "6.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
|
|
||||||
"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^3.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
|
|
||||||
"dev": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unist-util-stringify-position": {
|
"unist-util-stringify-position": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
|
||||||
@ -5812,43 +5461,6 @@
|
|||||||
"@types/unist": "^2.0.2"
|
"@types/unist": "^2.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"unist-util-visit": {
|
|
||||||
"version": "5.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
|
|
||||||
"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^3.0.0",
|
|
||||||
"unist-util-is": "^6.0.0",
|
|
||||||
"unist-util-visit-parents": "^6.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
|
|
||||||
"dev": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unist-util-visit-parents": {
|
|
||||||
"version": "6.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
|
|
||||||
"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/unist": "^3.0.0",
|
|
||||||
"unist-util-is": "^6.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@types/unist": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
|
|
||||||
"dev": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"uri-js": {
|
"uri-js": {
|
||||||
"version": "4.4.1",
|
"version": "4.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
||||||
|
|||||||
@ -12,11 +12,7 @@
|
|||||||
"mdsvex": "^0.9.8",
|
"mdsvex": "^0.9.8",
|
||||||
"node-sass": "^6.0.1",
|
"node-sass": "^6.0.1",
|
||||||
"svelte": "^3.42.6",
|
"svelte": "^3.42.6",
|
||||||
"svelte-preprocess": "^4.9.8",
|
"svelte-preprocess": "^4.9.8"
|
||||||
"unist-util-visit": "^5.0.0",
|
|
||||||
"unist-util-find": "^2.0.0",
|
|
||||||
"hast-util-to-text": "^3.1.2",
|
|
||||||
"mdast-util-to-string": "^4.0.0"
|
|
||||||
},
|
},
|
||||||
"type": "module"
|
"type": "module"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,8 +34,9 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<p>
|
||||||
<span class="drop-cap">{initial}</span>
|
<span class="drop-cap">{initial}</span>
|
||||||
{#if remainder.length}
|
|
||||||
<span class="first-word" style:--shift={shift}>{remainder}</span>
|
<span class="first-word" style:--shift={shift}>{remainder}</span>
|
||||||
{/if}
|
<slot></slot>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|||||||
@ -1,67 +0,0 @@
|
|||||||
<script>
|
|
||||||
export let level;
|
|
||||||
export let id = '';
|
|
||||||
|
|
||||||
const tag = `h${level}`;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
a {
|
|
||||||
/* Works better to set the size here for line-height reasons */
|
|
||||||
font-size: 0.9em;
|
|
||||||
/* color: hsl(0, 0%, 25%); */
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
border-bottom: 0.05em solid currentcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 1em;
|
|
||||||
/* tiny tweak for optical alignment */
|
|
||||||
transform: translateY(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.before {
|
|
||||||
display: none;
|
|
||||||
padding-right: 0.25em;
|
|
||||||
margin-left: -1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width: 58rem) {
|
|
||||||
.before {
|
|
||||||
display: inline;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 150ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h:hover .before, .before:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h:hover {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<svelte:element this={tag} {id} class="h">
|
|
||||||
<span class="before">
|
|
||||||
<a href="#{id}">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
||||||
</svg></a></span><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
|
|
||||||
<slot></slot>
|
|
||||||
</span>
|
|
||||||
<!-- Icon from https://heroicons.com/ -->
|
|
||||||
<a href="#{id}" class="after">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</svelte:element>
|
|
||||||
@ -1,9 +1,8 @@
|
|||||||
<script context="module">
|
<script context="module">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { formatDate } from './datefmt.js';
|
import { formatDate } from './datefmt.js';
|
||||||
import { makeSlug } from '$lib/utils.js';
|
import { makeSlug } from '$lib/slug.js';
|
||||||
|
|
||||||
import Toc from './Toc.svelte';
|
|
||||||
import Link from './Link.svelte';
|
import Link from './Link.svelte';
|
||||||
export { Link as a };
|
export { Link as a };
|
||||||
</script>
|
</script>
|
||||||
@ -12,71 +11,14 @@
|
|||||||
export let title, date;
|
export let title, date;
|
||||||
export const description = '';
|
export const description = '';
|
||||||
export const draft = false;
|
export const draft = false;
|
||||||
export let toc = null;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.page {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
|
|
||||||
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
grid-column: 2 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-gutter {
|
|
||||||
grid-column: 1 / 2;
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-top: -0.5rem;
|
margin-top: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post {
|
|
||||||
grid-column: 2 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
grid-column: 2 / 3;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
grid-column: 2 / 3;
|
|
||||||
width: 100%;
|
|
||||||
border-top: 1px solid hsl(0 0% 75%);
|
|
||||||
border-bottom: none;
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--content-color-faded);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
transition: 150ms;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
.footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer svg {
|
|
||||||
width: 1.5em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@ -84,35 +26,8 @@
|
|||||||
<link rel="stylesheet" href="/prism-dracula.css" />
|
<link rel="stylesheet" href="/prism-dracula.css" />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="page">
|
<div id="post">
|
||||||
<div class="title">
|
<h1 id="{makeSlug(title)}">{title}</h1>
|
||||||
<h1 id="{makeSlug(title)}">{title}</h1>
|
<p class="subtitle">{formatDate(date)}</p>
|
||||||
<p class="subtitle">{formatDate(date)}</p>
|
<slot></slot>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="left-gutter">
|
|
||||||
<Toc items={toc} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<a href="#">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
|
||||||
</svg>
|
|
||||||
Previous
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="#">
|
|
||||||
Next
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<style>
|
<style lang="scss">
|
||||||
/* always applicable */
|
/* always applicable */
|
||||||
:global(body) {
|
:global(body) {
|
||||||
counter-reset: sidenote;
|
counter-reset: sidenote;
|
||||||
@ -8,30 +8,30 @@
|
|||||||
counter-increment: sidenote;
|
counter-increment: sidenote;
|
||||||
color: #444;
|
color: #444;
|
||||||
margin-left: 0.05rem;
|
margin-left: 0.05rem;
|
||||||
}
|
|
||||||
|
|
||||||
.counter:after {
|
&:after {
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: 0.3rem;
|
bottom: 0.3rem;
|
||||||
color: #8c0606;
|
color: #8c0606;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenote {
|
.sidenote {
|
||||||
color: #555;
|
color: #555;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
|
||||||
|
|
||||||
.sidenote:before {
|
&:before {
|
||||||
content: counter(sidenote) " ";
|
content: counter(sidenote) " ";
|
||||||
/* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
|
/* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
|
||||||
(because the sidenote is floated it counts as a positioned parent, I think) */
|
(because the sidenote is floated it counts as a positioned parent, I think) */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* translate moves it out to the left (and just a touch up to mimic the superscript efect)
|
/* translate moves it out to the left (and just a touch up to mimic the superscript efect)
|
||||||
-100% refers to the width of the element, so it pushes it out further if necessary (i.e. two digits instead of one) */
|
-100% refers to the width of the element, so it pushes it out further if necessary (i.e. two digits instead of one) */
|
||||||
transform: translate(calc(-100% - 0.2rem), -0.15rem);
|
transform: translate(calc(-100% - 0.2rem), -0.15rem);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #8c0606;
|
color: #8c0606;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenote-toggle {
|
.sidenote-toggle {
|
||||||
@ -52,22 +52,10 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
clear: right;
|
clear: right;
|
||||||
margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); /* gives us 2rem of space between content and sidenote */
|
margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote
|
||||||
margin-bottom: 0.7rem;
|
margin-bottom: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fade-in animation */
|
|
||||||
.sidenote {
|
|
||||||
opacity: 0;
|
|
||||||
animation: fade-in 600ms ease-out;
|
|
||||||
animation-delay: 500ms;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
@keyframes fade-in {
|
|
||||||
from {opacity: 0;}
|
|
||||||
to {opacity: 1;}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nested.sidenote {
|
.nested.sidenote {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-top: 0.7rem;
|
margin-top: 0.7rem;
|
||||||
@ -119,13 +107,26 @@
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color: #8c0606;
|
color: #8c0606;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
|
||||||
.dismiss:hover {
|
&:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// /* slight tweaks for in between state */
|
||||||
|
// @media (min-width: 52.5em) and (max-width: 70em) {
|
||||||
|
// .sidenote {
|
||||||
|
// padding-left: calc(50vw - 19rem);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// @media (max-width: 52.5em) {
|
||||||
|
// .sidenote {
|
||||||
|
// padding-left: 2rem;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script context="module">
|
<script context="module">
|
||||||
|
|||||||
@ -1,146 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { makeSlug } from '$lib/utils.js';
|
|
||||||
|
|
||||||
export let items;
|
|
||||||
|
|
||||||
items.forEach(i => i.slug = makeSlug(i.text));
|
|
||||||
|
|
||||||
let headings = [];
|
|
||||||
let currentHeadingSlug = null;
|
|
||||||
let currentSubheadingSlug = null;
|
|
||||||
|
|
||||||
function setCurrentHeading() {
|
|
||||||
const start = performance.now();
|
|
||||||
for (const h of headings) {
|
|
||||||
const yPos = h.getBoundingClientRect().y;
|
|
||||||
if (yPos > (window.innerHeight / 3)) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (h.tagName === 'H2') {
|
|
||||||
currentHeadingSlug = h.id;
|
|
||||||
currentSubheadingSlug = null;
|
|
||||||
}
|
|
||||||
if (h.tagName === 'H3') {
|
|
||||||
currentSubheadingSlug = h.id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const end = performance.now();
|
|
||||||
console.log(`Elapsed: ${end - start}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount (() => {
|
|
||||||
// These shouldn't change over the life of the page, so we can cache them
|
|
||||||
headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
|
|
||||||
setCurrentHeading();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window on:scroll={setCurrentHeading} />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#toc {
|
|
||||||
position: sticky;
|
|
||||||
top: 1.5rem;
|
|
||||||
margin-right: 2rem;
|
|
||||||
|
|
||||||
max-width: 14rem;
|
|
||||||
color: var(--content-color-faded);
|
|
||||||
opacity: 0;
|
|
||||||
animation: fade-in 600ms ease-out;
|
|
||||||
animation-delay: 500ms;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
from {opacity: 0}
|
|
||||||
to {opacity: 1}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* margin-left is to match the padding on the top-level list items,
|
|
||||||
but here it needs to be margin so that the border is also shifted */
|
|
||||||
h5 {
|
|
||||||
font-variant: petite-caps;
|
|
||||||
font-weight: 500;
|
|
||||||
max-width: fit-content;
|
|
||||||
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
|
|
||||||
padding-bottom: 0.25em;
|
|
||||||
border-bottom: 1px solid currentcolor;
|
|
||||||
/* make the border stretch beyond the text just a bit, because I like the effect */
|
|
||||||
padding-right: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
li.depth-2 {
|
|
||||||
align-items: stretch;
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
}
|
|
||||||
li.depth-3 {
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.05rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marker {
|
|
||||||
position: absolute;
|
|
||||||
left: -0.6rem;
|
|
||||||
}
|
|
||||||
.bar {
|
|
||||||
width: 0.1rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dot {
|
|
||||||
width: 0.15rem;
|
|
||||||
height: 0.15rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
/* vertically center within its containing block */
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin: auto 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.current, li:hover {
|
|
||||||
color: var(--content-color);
|
|
||||||
}
|
|
||||||
.current .marker, li:hover .marker {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="toc">
|
|
||||||
<h5>
|
|
||||||
<span class="heading">Contents</span>
|
|
||||||
</h5>
|
|
||||||
<ul>
|
|
||||||
{#each items as item}
|
|
||||||
{#if item.depth === 2}
|
|
||||||
<li class="depth-2" class:current={item.slug === currentHeadingSlug} style:align-items="stretch">
|
|
||||||
<span class="marker bar"></span>
|
|
||||||
<a href="#{item.slug}">{item.text}</a>
|
|
||||||
</li>
|
|
||||||
{:else if item.depth === 3}
|
|
||||||
<li class="depth-3" class:current={item.slug === currentSubheadingSlug} style:align-items="center" style:margin-left="0.75em">
|
|
||||||
<span class="marker dot"></span>
|
|
||||||
<a href="#{item.slug}">{item.text}</a>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
20
src/lib/projects/sidenotes/Frame.svelte
Normal file
20
src/lib/projects/sidenotes/Frame.svelte
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
import Step from './Step.svelte';
|
||||||
|
import {onMount} from 'svelte';
|
||||||
|
|
||||||
|
let frame;
|
||||||
|
onMount(() => {
|
||||||
|
frame.setAttribute('srcdoc', frame.innerHTML);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<iframe bind:this={frame}>
|
||||||
|
<html>
|
||||||
|
<head></head>
|
||||||
|
<body>
|
||||||
|
<Step />
|
||||||
|
<p>Goodbye world!</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</iframe>
|
||||||
7
src/lib/projects/sidenotes/Step.svelte
Normal file
7
src/lib/projects/sidenotes/Step.svelte
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let count = 0;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>hello world!</p>
|
||||||
|
<button on:click={() => count++}>Increment</button>
|
||||||
|
<p>The count is: {count}</p>
|
||||||
50
src/lib/slug.js
Normal file
50
src/lib/slug.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
const nonAlphaNum = /[^A-Za-z0-9\-]/g;
|
||||||
|
const space = /\s/g
|
||||||
|
|
||||||
|
export function makeSlug(text) {
|
||||||
|
return text
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(space, '-')
|
||||||
|
.replace(nonAlphaNum, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
function apply(node, types, fn) {
|
||||||
|
if (typeof types === 'string') {
|
||||||
|
types = new Set([types]);
|
||||||
|
}
|
||||||
|
else if (!(types instanceof Set)) {
|
||||||
|
types = new Set(types)
|
||||||
|
console.log(types)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (types.has(node.type)) {
|
||||||
|
fn(node);
|
||||||
|
}
|
||||||
|
if ('children' in node) {
|
||||||
|
for (let child of node.children) {
|
||||||
|
apply(child, types, fn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTextContent(node) {
|
||||||
|
let segments = [];
|
||||||
|
apply(node, 'text', textNode => {
|
||||||
|
// skip all-whitespace strings
|
||||||
|
if (textNode.value.match(/^\s+$/)) return;
|
||||||
|
segments.push(textNode.value.trim());
|
||||||
|
});
|
||||||
|
|
||||||
|
return segments.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function slug() {
|
||||||
|
return (tree) => {
|
||||||
|
apply(tree, 'element', e => {
|
||||||
|
if (e.tagName.match(/h[1-6]/)) {
|
||||||
|
let text = getTextContent(e);
|
||||||
|
e.properties.id = makeSlug(text);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
const nonAlphaNum = /[^A-Za-z0-9\-]/g;
|
|
||||||
const space = /\s+/g;
|
|
||||||
export function makeSlug(text) {
|
|
||||||
return text
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(space, '-')
|
|
||||||
.replace(nonAlphaNum, '');
|
|
||||||
}
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
import { visit, CONTINUE, EXIT, SKIP, } from 'unist-util-visit';
|
|
||||||
import { find } from 'unist-util-find';
|
|
||||||
import { toText } from 'hast-util-to-text';
|
|
||||||
import { makeSlug } from '../lib/utils.js';
|
|
||||||
|
|
||||||
|
|
||||||
export function localRehype() {
|
|
||||||
let printed = false;
|
|
||||||
|
|
||||||
return (tree, vfile) => {
|
|
||||||
const needsDropcap = vfile.data.fm.dropcap !== false
|
|
||||||
let dropcapAdded = false;
|
|
||||||
|
|
||||||
let moduleScript;
|
|
||||||
let imports = new Set();
|
|
||||||
if (needsDropcap) {
|
|
||||||
imports.add("import Dropcap from '$lib/Dropcap.svelte';");
|
|
||||||
}
|
|
||||||
|
|
||||||
visit(tree, node => {
|
|
||||||
// add slugs to headings
|
|
||||||
if (isHeading(node)) {
|
|
||||||
processHeading(node);
|
|
||||||
imports.add("import Heading from '$lib/Heading.svelte';");
|
|
||||||
return SKIP;
|
|
||||||
}
|
|
||||||
|
|
||||||
// mdsvex adds a <script context="module"> so we just hijack that for our own purposes
|
|
||||||
if (isModuleScript(node)) {
|
|
||||||
moduleScript = node;
|
|
||||||
}
|
|
||||||
|
|
||||||
// convert first letter/word of first paragraph to <Dropcap word="{whatever}">
|
|
||||||
if (needsDropcap && !dropcapAdded && isParagraph(node)) {
|
|
||||||
addDropcap(node);
|
|
||||||
dropcapAdded = true;
|
|
||||||
return SKIP;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// insert our imports at the top of the `<script context="module">` tag
|
|
||||||
if (imports.size > 0) {
|
|
||||||
const script = moduleScript.value;
|
|
||||||
// split the script where the opening tag ends
|
|
||||||
const i = script.indexOf('>');
|
|
||||||
const openingTag = script.slice(0, i + 1);
|
|
||||||
const remainder = script.slice(i + 1);
|
|
||||||
|
|
||||||
// mdvsex uses tabs so we will as well
|
|
||||||
const importScript = Array.from(imports).join('\n\t');
|
|
||||||
|
|
||||||
moduleScript.value = `${openingTag}\n\t${importScript}${remainder}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function processHeading(node) {
|
|
||||||
const level = node.tagName.slice(1);
|
|
||||||
node.tagName = 'Heading';
|
|
||||||
node.properties.level = level;
|
|
||||||
node.properties.id = makeSlug(toText(node));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function addDropcap(par) {
|
|
||||||
let txtNode = find(par, {type: 'text'});
|
|
||||||
const i = txtNode.value.search(/\s/);
|
|
||||||
const firstWord = txtNode.value.slice(0, i);
|
|
||||||
const remainder = txtNode.value.slice(i);
|
|
||||||
|
|
||||||
par.children.unshift({
|
|
||||||
type: 'raw',
|
|
||||||
value: `<Dropcap word="${firstWord}" />`,
|
|
||||||
});
|
|
||||||
txtNode.value = remainder;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function isHeading(node) {
|
|
||||||
return node.type === 'element' && node.tagName.match(/h[1-6]/);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isModuleScript(node) {
|
|
||||||
return node.type === 'raw' && node.value.match(/^<script context="module">/);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isParagraph(node) {
|
|
||||||
return node.type === 'element' && node.tagName === 'p';
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { visit } from 'unist-util-visit';
|
|
||||||
import { toString } from 'mdast-util-to-string';
|
|
||||||
|
|
||||||
|
|
||||||
// build table of contents and inject into frontmatter
|
|
||||||
export function localRemark() {
|
|
||||||
return (tree, vfile) => {
|
|
||||||
let toc = [];
|
|
||||||
|
|
||||||
visit(tree, 'heading', node => {
|
|
||||||
toc.push({
|
|
||||||
text: toString(node),
|
|
||||||
depth: node.depth,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
vfile.data.fm.toc = toc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,43 +1,39 @@
|
|||||||
<script>
|
|
||||||
import Toc from '$lib/Toc.svelte';
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{depth: 2, text: 'The Suboptimal Solution: Absolute Positioning'},
|
|
||||||
{depth: 2, text: 'CSS Wizardry'},
|
|
||||||
{depth: 2, text: 'Implementation'},
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.header {
|
:global(main) {
|
||||||
grid-column-start: 1;
|
--content-width: 42rem;
|
||||||
grid-column-end: 4;
|
box-sizing: border-box;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
background-color: #4f5f68;
|
background-color: #4f5f68;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
#nav-main {
|
||||||
max-width: 30rem;
|
max-width: 30rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: grid;
|
||||||
justify-content: space-around;
|
grid-template-columns: repeat(3, minmax(6rem, 8rem));
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
#nav-main a {
|
||||||
width: 8rem;
|
|
||||||
min-width: 6rem;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.25rem 0;
|
padding: 0.25rem 0;
|
||||||
}
|
}
|
||||||
nav a:hover {
|
|
||||||
|
#nav-main a:hover {
|
||||||
background-color: #00000025;
|
background-color: #00000025;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="header">
|
<div id="header">
|
||||||
<nav>
|
<nav id="nav-main">
|
||||||
<a sveltekit:prefetch href="/">Home</a>
|
<a sveltekit:prefetch href="/">Home</a>
|
||||||
<a sveltekit:prefetch href="/posts">Posts</a>
|
<a sveltekit:prefetch href="/posts">Posts</a>
|
||||||
<a sveltekit:prefetch href="/">About</a>
|
<a sveltekit:prefetch href="/">About</a>
|
||||||
|
|||||||
@ -3,7 +3,6 @@ title: Imagining A Passwordless Future
|
|||||||
description: Can we replace passwords with something more user-friendly?
|
description: Can we replace passwords with something more user-friendly?
|
||||||
date: 2021-04-30
|
date: 2021-04-30
|
||||||
draft: true
|
draft: true
|
||||||
dropcap: false
|
|
||||||
---
|
---
|
||||||
<script>
|
<script>
|
||||||
import Sidenote from '$lib/Sidenote.svelte';
|
import Sidenote from '$lib/Sidenote.svelte';
|
||||||
|
|||||||
@ -4,8 +4,10 @@ description: An entirely-too-detailed dive into how I implemented sidenotes for
|
|||||||
date: 2023-08-14
|
date: 2023-08-14
|
||||||
---
|
---
|
||||||
<script>
|
<script>
|
||||||
|
import Dropcap from '$lib/Dropcap.svelte';
|
||||||
import Sidenote from '$lib/Sidenote.svelte';
|
import Sidenote from '$lib/Sidenote.svelte';
|
||||||
import UnstyledSidenote from '$lib/UnstyledSidenote.svelte';
|
import UnstyledSidenote from '$lib/UnstyledSidenote.svelte';
|
||||||
|
import Frame from '$lib/projects/sidenotes/Frame.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -62,7 +64,7 @@ date: 2023-08-14
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
One of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote>
|
<Dropcap word="One">of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote></Dropcap>
|
||||||
|
|
||||||
Footnotes don't really work on the web the way they do on paper, since the web doesn't have page breaks. You _can_ stick your footnotes in a floating box at the bottom of the page, so they're visible at the bottom of the text just like they would be on a printed page, but this sacrifices precious vertical space.<Sidenote>On mobile, it's _horizontal_ space that's at a premium, so I do use this approach there. Although I'm a pretty heavy user of sidenotes, so I have to make them toggleable as well or they'd fill up the entire screen.</Sidenote> Plus, you usually end up with the notes further away from the point of divergence than they would be as sidenotes anyway.
|
Footnotes don't really work on the web the way they do on paper, since the web doesn't have page breaks. You _can_ stick your footnotes in a floating box at the bottom of the page, so they're visible at the bottom of the text just like they would be on a printed page, but this sacrifices precious vertical space.<Sidenote>On mobile, it's _horizontal_ space that's at a premium, so I do use this approach there. Although I'm a pretty heavy user of sidenotes, so I have to make them toggleable as well or they'd fill up the entire screen.</Sidenote> Plus, you usually end up with the notes further away from the point of divergence than they would be as sidenotes anyway.
|
||||||
|
|
||||||
|
|||||||
@ -4,11 +4,12 @@ description: They're more similar than they are different, but they say the most
|
|||||||
date: 2023-06-29
|
date: 2023-06-29
|
||||||
---
|
---
|
||||||
<script>
|
<script>
|
||||||
|
import Dropcap from '$lib/Dropcap.svelte';
|
||||||
import Sidenote from '$lib/Sidenote.svelte';
|
import Sidenote from '$lib/Sidenote.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
Recently I've had a chance to get to know Vue a bit. Since my frontend framework of choice has previously been Svelte (this blog is built in Svelte, for instance) I was naturally interested in how they compared.
|
<Dropcap word="Recently">I've had a chance to get to know Vue a bit. Since my frontend framework of choice has previously been Svelte (this blog is built in Svelte, for instance) I was naturally interested in how they compared.</Dropcap>
|
||||||
|
|
||||||
Of course, this is only possible because Vue and Svelte are really much more similar than they are different. Even among frontend frameworks, they share a lot of the same basic ideas and high-level concepts, which means that we get to dive right into the nitpicky details and have fun debating `bind:attr={value}` versus `:attr="value"`. In the meantime, a lot of the building blocks are basically the same or at least have equivalents, such as:
|
Of course, this is only possible because Vue and Svelte are really much more similar than they are different. Even among frontend frameworks, they share a lot of the same basic ideas and high-level concepts, which means that we get to dive right into the nitpicky details and have fun debating `bind:attr={value}` versus `:attr="value"`. In the meantime, a lot of the building blocks are basically the same or at least have equivalents, such as:
|
||||||
* Single-file components with separate sections for markup, style, and logic
|
* Single-file components with separate sections for markup, style, and logic
|
||||||
|
|||||||
@ -29,12 +29,10 @@ html {
|
|||||||
line-height: var(--content-line-height);
|
line-height: var(--content-line-height);
|
||||||
letter-spacing: -0.005em;
|
letter-spacing: -0.005em;
|
||||||
color: var(--content-color);
|
color: var(--content-color);
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
--content-width: 42rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
import { mdsvex } from 'mdsvex';
|
import { mdsvex } from 'mdsvex';
|
||||||
import staticAdapter from '@sveltejs/adapter-static';
|
import staticAdapter from '@sveltejs/adapter-static';
|
||||||
import svp from 'svelte-preprocess';
|
import svp from 'svelte-preprocess';
|
||||||
|
import slug from './src/lib/slug.js';
|
||||||
import { localRemark } from './src/plugins/remark.js';
|
|
||||||
import { localRehype } from './src/plugins/rehype.js';
|
|
||||||
|
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
@ -11,8 +9,7 @@ const config = {
|
|||||||
preprocess: [
|
preprocess: [
|
||||||
mdsvex({
|
mdsvex({
|
||||||
layout: './src/lib/Post.svelte',
|
layout: './src/lib/Post.svelte',
|
||||||
remarkPlugins: [localRemark],
|
rehypePlugins: [slug],
|
||||||
rehypePlugins: [localRehype],
|
|
||||||
}),
|
}),
|
||||||
svp.scss(),
|
svp.scss(),
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user