diff --git a/package-lock.json b/package-lock.json index 200fe80..f7e90e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,12 +8,13 @@ "@astrojs/sitemap": "^3.0.5", "@fontsource/catamaran": "^5.0.18", "@fontsource/solway": "^5.0.8", + "@fontsource/sono": "^5.0.18", "@rollup/plugin-yaml": "^4.1.2", "astro": "^4.4.0", + "highlight.js": "^11.9.0", "image-size": "^1.1.1", "marked": "^12.0.0", - "normalize.css": "^8.0.1", - "shiki": "^1.1.6" + "normalize.css": "^8.0.1" } }, "node_modules/@ampproject/remapping": { @@ -859,6 +860,12 @@ "integrity": "sha512-Ta9HjRXx2hAWHQRGpZs5KwfON0TbZB9qJVSMp5GD1ORamHuFn8zook5FlThONO1TvKU+FugyiDahqWXU3jeS7A==", "dev": true }, + "node_modules/@fontsource/sono": { + "version": "5.0.18", + "resolved": "https://registry.npmjs.org/@fontsource/sono/-/sono-5.0.18.tgz", + "integrity": "sha512-5n/pn3p6z+p3qjDQuvaNjQJ4q3o5lgheKJfkhxAEq+iXkefm80mbw8zQKUJ4BdZaeWwXjHQI7ympivHFjrWCLg==", + "dev": true + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -1161,12 +1168,6 @@ "win32" ] }, - "node_modules/@shikijs/core": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.1.6.tgz", - "integrity": "sha512-kt9hhvrWTm0EPtRDIsoAZnSsFlIDBVBBI5CQewpA/NZCPin+MOKRXg+JiWc4y+8fZ/v0HzfDhu/UC+OTZGMt7A==", - "dev": true - }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -2742,6 +2743,15 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/highlight.js": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", + "dev": true, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/html-escaper": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", @@ -5588,15 +5598,6 @@ "node": ">=8" } }, - "node_modules/shiki": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.1.6.tgz", - "integrity": "sha512-j4pcpvaQWHb42cHeV+W6P+X/VcK7Y2ctvEham6zB8wsuRQroT6cEMIkiUmBU2Nqg2qnHZDH6ZyRdVldcy0l6xw==", - "dev": true, - "dependencies": { - "@shikijs/core": "1.1.6" - } - }, "node_modules/shikiji": { "version": "0.9.19", "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.9.19.tgz", diff --git a/package.json b/package.json index 75a8334..86d5b10 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,12 @@ "@astrojs/sitemap": "^3.0.5", "@fontsource/catamaran": "^5.0.18", "@fontsource/solway": "^5.0.8", + "@fontsource/sono": "^5.0.18", "@rollup/plugin-yaml": "^4.1.2", "astro": "^4.4.0", + "highlight.js": "^11.9.0", "image-size": "^1.1.1", "marked": "^12.0.0", - "normalize.css": "^8.0.1", - "shiki": "^1.1.6" + "normalize.css": "^8.0.1" } } diff --git a/public/assets/svg/external-link-code.svg b/public/assets/svg/external-link-code.svg index 03016c3..c1e4394 100644 --- a/public/assets/svg/external-link-code.svg +++ b/public/assets/svg/external-link-code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/content_blocks/Code.astro b/src/content_blocks/Code.astro index 5af9e81..d2351af 100644 --- a/src/content_blocks/Code.astro +++ b/src/content_blocks/Code.astro @@ -1,15 +1,15 @@ --- -import { codeToHtml } from 'shiki' +import hljs from 'highlight.js'; +import 'highlight.js/styles/kimbie-light.min.css'; import ContentBlock from '../components/content_block/ContentBlock.astro'; import ContentDescription from "../components/content_block/ContentDescription.astro"; const { project, contentBlock } = Astro.props; -const code = await codeToHtml(contentBlock.properties.data, { - lang: 'javascript', - theme: 'material-theme-lighter' -}) +const code = hljs.highlightAuto( + contentBlock.properties.data +).value const contentBlockId = "code-block-" + contentBlock.index; const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : ' border-radius-full'; @@ -19,15 +19,13 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : '
-
- - {contentBlock.properties.file} - - -
+ class={"code-window hljs" + borderClass} + data-code={contentBlock.properties.data}> + + {contentBlock.properties.file} + + +
@@ -36,23 +34,24 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : ' .code-window { position: relative; width: 100%; + background: #FAFAFA; } .code-file { + font-family: 'Sono', sans-serif; position: absolute; + display: block; top: 0px; right: 0px; - background: #FAFAFAAA; - padding: 14px 20px; - } - - .code-file a { + background: #F0F0F0; + padding: 10px 18px; font-size: 16px; - color: #90A4AE; + color: #84613D; font-weight: normal; + letter-spacing: -1px; } - .code-file a:hover { + .code-file:hover { text-decoration: underline; } @@ -63,10 +62,8 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : ' @media (max-width: 776px) { .code-file { - padding: 14px 20px 0px; position: relative; background: ##FAFAFA; - /* text-align: left; */ width: 100%; box-sizing: border-box; } @@ -82,8 +79,8 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : ' overflow: auto; } - code span { + code, span { font-size: 16px; - font-family: monospace; + font-family: 'Sono', sans-serif; } \ No newline at end of file diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index cb18fbc..be716ad 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -8,6 +8,7 @@ import '@fontsource/catamaran/900.css'; import '@fontsource/solway/400.css'; import '@fontsource/solway/500.css'; import '@fontsource/solway/700.css'; +import '@fontsource/sono'; import 'normalize.css'; import '../styles/global.css'; diff --git a/src/styles/global.css b/src/styles/global.css index c193abd..c2cc338 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -57,8 +57,4 @@ hr { body { min-width: 260px; } - - * { - font-size: 18px; - } } \ No newline at end of file