From 2a1fa68e0604339ffa4a920d6a1424ce206cedb5 Mon Sep 17 00:00:00 2001 From: kalecream Date: Tue, 20 Aug 2024 13:16:11 -0500 Subject: [PATCH 1/4] build: remove codehike as code highlighter --- frontend/package.json | 1 - frontend/src/app/components/mdx.tsx | 2 - frontend/src/app/placeholder.jpg | Bin 4670 -> 0 bytes frontend/src/pages/_app.tsx | 1 - .../src/posts/obsidian-garden-tracker.mdx | 48 +++++++++++------- 5 files changed, 29 insertions(+), 23 deletions(-) delete mode 100644 frontend/src/app/placeholder.jpg diff --git a/frontend/package.json b/frontend/package.json index feab158fb..14ccb9f75 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,7 +20,6 @@ "not ie <= 11" ], "dependencies": { - "@code-hike/mdx": "^0.9.0", "@codesandbox/sandpack-react": "^2.13.10", "@googleapis/youtube": "^16.1.0", "@mdx-js/loader": "^3.0.1", diff --git a/frontend/src/app/components/mdx.tsx b/frontend/src/app/components/mdx.tsx index 77a853b34..22430b7db 100644 --- a/frontend/src/app/components/mdx.tsx +++ b/frontend/src/app/components/mdx.tsx @@ -5,7 +5,6 @@ import { TweetComponent } from './tweet'; import { highlight } from 'sugar-high'; import React from 'react'; import { LiveCode } from './sandpack'; -import { CH } from '@code-hike/mdx/components'; function Table({ data }) { let headers = data.headers.map((header, index) => {header}); @@ -156,7 +155,6 @@ let components = { code: Code, Table, LiveCode, - CH, }; export function CustomMDX(props) { diff --git a/frontend/src/app/placeholder.jpg b/frontend/src/app/placeholder.jpg deleted file mode 100644 index 6a38de2eb13acd77cebbd743f9c4130921dfa7e3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4670 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 uyqC Date: Tue, 20 Aug 2024 16:38:05 -0500 Subject: [PATCH 2/4] feat: add code highlighter --- frontend/package.json | 3 +- frontend/src/app/components/mdx.tsx | 26 ++++++++--- .../src/posts/obsidian-garden-tracker.mdx | 45 +++++++++---------- frontend/src/styles/global.scss | 43 +++++++++++++++--- 4 files changed, 82 insertions(+), 35 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 14ccb9f75..6e31cd1aa 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -74,13 +74,13 @@ "remark-gfm": "^4.0.0", "rss": "^1.2.2", "sharp": "^0.33.4", - "sugar-high": "^0.6.1", "three": "^0.164.1", "vercel": "^34.2.0", "webpack": "5.76.0" }, "devDependencies": { "@babel/core": "^7.20.12", + "@shikijs/transformers": "^1.14.1", "@types/webpack-env": "^1.18.0", "@typescript-eslint/eslint-plugin": "^5.50.0", "@typescript-eslint/parser": "^5.50.0", @@ -89,6 +89,7 @@ "eslint-plugin-react": "^7.32.2", "prisma": "^5.2.0", "sass": "^1.66.1", + "shiki": "^1.14.1", "types": "^0.1.1", "typescript": "^5.4.5" } diff --git a/frontend/src/app/components/mdx.tsx b/frontend/src/app/components/mdx.tsx index 22430b7db..8d6a406f6 100644 --- a/frontend/src/app/components/mdx.tsx +++ b/frontend/src/app/components/mdx.tsx @@ -2,9 +2,11 @@ import Link from 'next/link'; import Image from 'next/image'; import { MDXRemote } from 'next-mdx-remote/rsc'; import { TweetComponent } from './tweet'; -import { highlight } from 'sugar-high'; import React from 'react'; import { LiveCode } from './sandpack'; +import { codeToHtml } from 'shiki'; +import type { BundledLanguage, BundledTheme } from 'shiki'; +import { transformerNotationHighlight } from '@shikijs/transformers'; function Table({ data }) { let headers = data.headers.map((header, index) => {header}); @@ -105,10 +107,24 @@ function ConsCard({ title, cons }) { ); } -function Code({ children, ...props }) { - let codeHTML = highlight(children); - return ; -} +type Props = { + children: string; + lang?: BundledLanguage; + theme?: BundledTheme; + filename?: string; +}; + +const Code = async ({ children, lang = 'javascript', theme = 'nord', filename = '.txt' }: Props) => { + let codeHTML = await codeToHtml(children, { lang, theme }); + return ( +
+
+ {filename && {filename}} +
+ +
+ ); +}; function slugify(str) { return str diff --git a/frontend/src/posts/obsidian-garden-tracker.mdx b/frontend/src/posts/obsidian-garden-tracker.mdx index 71701179f..1b6eaec79 100644 --- a/frontend/src/posts/obsidian-garden-tracker.mdx +++ b/frontend/src/posts/obsidian-garden-tracker.mdx @@ -10,17 +10,34 @@ Between the different types of plants, planting dates, watering schedules, and p -## Plant Template +## Plants Page Firstly, we need to create a new note in [Obsidian](https://obsidian.md/). We'll call it [Plants.md](). This note will be the main hub for all of our garden tracking information. We'll use the [Dataview ](https://github.com/blacksmithgu/obsidian-dataview) to create a table of all the plants we're growing, and I used it with Minimal Theme. -```md +````md --- cssclass: cards, cards-cover, cards-1-1 --- + +```dataview +TABLE WITHOUT ID image, +file.link, +":luc_droplet: " + water, +":luc_droplets: " + date(reverse(sort(file.inlinks))[0]) + " (" + (date(today) - date(reverse(sort(file.inlinks))[0])) + ")" / +AS "Last watered", +":luc_sun: " + sun, +":fas_spray_can_sparkles: " + fertilizer, +":fas_spray_can: " + last_fertilized, +":fas_seedling: " + (date(today) - date(sprouted) ) + " (" + sprouted + ")", +":luc_flask_conical:" + pH, +":luc_moon: " + harvest + +FROM [[Plants]] and #apartment ``` +```` -Then, we need to create a new note called `New_Plant.md`. This note will be a template for all of our plants. +## Plant Template +Then, we need to create a new note called "New_Plant.md". This note will be a template for all of our plants. ```md Plants.md @@ -48,27 +65,7 @@ type note(New Plant) template action NewPlant ``` -## Plant Table - -```dataview -TABLE WITHOUT ID image, -file.link, -":luc_droplet: " + water, -":luc_droplets: " + date(reverse(sort(file.inlinks))[0]) + " (" + (date(today) - date(reverse(sort(file.inlinks))[0])) + ")" / -AS "Last watered", -":luc_sun: " + sun, -":fas_spray_can_sparkles: " + fertilizer, -":fas_spray_can: " + last_fertilized, -":fas_seedling: " + (date(today) - date(sprouted) ) + " (" + sprouted + ")", -":luc_flask_conical:" + pH, -":luc_moon: " + harvest - -FROM [[Plants]] and #apartment -``` - -```` - - +## Daily Note ```md DailyNote.md ![[Plants.md]] diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index 7702ad653..259ba65a1 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -223,7 +223,7 @@ header { @include breakpoint-range($from: desktopSmall) { flex-direction: row; justify-content: space-between; - padding: 0 1rem; + padding: 0 1rem; } } } @@ -505,7 +505,7 @@ h6 { h1 { font-size: clamp(2.5rem, 2vw, 5rem); - margin-bottom:0.5rem; + margin-bottom: 0.5rem; max-width: 40rem; } @@ -555,7 +555,8 @@ li { font-size: clamp(1.2rem, -0.8750rem + 8.3333vw, 1.6rem); } -p > a, li > a { +p > a, +li > a { color: var(--secondary); &:hover { @@ -774,7 +775,10 @@ article { article h1, article h2, -article h3, article h4, article h5, article h6 { +article h3, +article h4, +article h5, +article h6 { text-align: center; } @@ -805,7 +809,7 @@ article .info { } article p { - + @include breakpoint-range($from: mobile) { margin: 1rem 1.5rem; } @@ -823,6 +827,35 @@ code { font-family: 'Fira Code', monospace; } +.code { + & .filename { + margin: 0.5rem 0; + padding: 0.5em 3rem; + border-radius: var(--borderRadius); + width: fit-content; + background-color: var(--primary); + color: var(--backgroundColor); + } + +} + +.shiki { + width: 100%; + padding: 1rem; + border-radius: var(--borderRadius); + counter-reset: step; + counter-increment: step 0; + + .line { + &::before { + counter-increment: step; + margin-right: 6rem; + display: inline-block; + text-align: right; + } + } +} + article ul, article ol { From b5879a53bf5fe0422639b833615e87052478b8ab Mon Sep 17 00:00:00 2001 From: kalecream Date: Tue, 20 Aug 2024 16:38:27 -0500 Subject: [PATCH 3/4] chore: add credits to button --- frontend/src/app/colophon/page.tsx | 58 +++++++++++++++---- .../images/baldurs-gate-3-border-inverted.svg | 1 + .../assets/images/baldurs-gate-3-border.svg | 4 ++ .../src/components/navigation/socialmedia.ts | 16 +---- frontend/src/styles/_normalize.scss | 4 +- .../src/styles/modules/Button.module.scss | 6 +- frontend/src/styles/modules/Index.module.scss | 5 +- .../src/styles/modules/heroName.module.scss | 10 +++- 8 files changed, 69 insertions(+), 35 deletions(-) create mode 100644 frontend/src/assets/images/baldurs-gate-3-border-inverted.svg create mode 100644 frontend/src/assets/images/baldurs-gate-3-border.svg diff --git a/frontend/src/app/colophon/page.tsx b/frontend/src/app/colophon/page.tsx index 1d9e1378b..fdfd56b89 100644 --- a/frontend/src/app/colophon/page.tsx +++ b/frontend/src/app/colophon/page.tsx @@ -1,23 +1,59 @@ -import Link from "next/link"; +import Link from 'next/link'; const ColophonPage = () => { return (

Colophon

-

- A colophon is a publishing term that describes how a book was made. This is that, but for a website.{' '} -

-

This website is made using Next.js 14, stored on Github and deployed using Vercel.

- +
+

A colophon is a publishing term that describes how a book was made. This is that, but for a website.

+

+ This website is made using React Typescript on the Next.js 14 framework, stored on Github and deployed using + Vercel. +

+
+ +

Acknowledgement

-

The theme within this website is based on the Caribbean folklore of the Soucouyant or Ole Higue. She is the Caribbean's version of a Vampire, a werewolf and is combined with West African witch mythos.

- +

+ The theme within this website is based on the Caribbean folklore of the{' '} + Soucouyant or Ole Higue. She is the Caribbean's + version of a Vampire, a werewolf and is combined with West African witch mythos. +

+
+

Credits

+

+ I don't think I could have made my vision come to life without standing on the shoulders of the coders who + came before me. For individuals, I will attempt to find their donation links to post alongside their credit. +

    -
  • Vampire Post Divider found on a roleplaying forum discussing The Vampire Diaries/The Originals.
    • -
  • CSS Filter Generator to change colors from Black to a specific Hex. This is used to change the blog title when hovering (on non-index pages.)
    • -
  • (Temp) Vampire GIF Sticker to complement the hero section.
    • +
  • + + Vampire Post Divider + {' '} + found on a roleplaying forum discussing The Vampire Diaries/The Originals. +
    • +
  • + + CSS Filter Generator + {' '} + to change colors from Black to a specific Hex. This is used to change the blog title when hovering (on + non-index pages.) +
    • +
  • + + (Temp) Vampire GIF Sticker + {' '} + to complement the hero section. +
    • +
  • + Cool 3D Button 13 for the Index Hero. Taken from + CSSPro.com and apparently inspired by Balder's Gate 3. +
diff --git a/frontend/src/assets/images/baldurs-gate-3-border-inverted.svg b/frontend/src/assets/images/baldurs-gate-3-border-inverted.svg new file mode 100644 index 000000000..2134e2a2e --- /dev/null +++ b/frontend/src/assets/images/baldurs-gate-3-border-inverted.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/images/baldurs-gate-3-border.svg b/frontend/src/assets/images/baldurs-gate-3-border.svg new file mode 100644 index 000000000..751a8a331 --- /dev/null +++ b/frontend/src/assets/images/baldurs-gate-3-border.svg @@ -0,0 +1,4 @@ + + + diff --git a/frontend/src/components/navigation/socialmedia.ts b/frontend/src/components/navigation/socialmedia.ts index dd36f78a5..631204875 100644 --- a/frontend/src/components/navigation/socialmedia.ts +++ b/frontend/src/components/navigation/socialmedia.ts @@ -2,20 +2,10 @@ import { FaCoffee } from 'react-icons/fa'; import { FaTwitter, FaGithub, FaLinkedin, FaCodepen, FaRss, FaEnvelope } from 'react-icons/fa6'; export const MediaProfiles = [ - // { - // name: 'LinkedIn', - // url: 'https://www.linkedin.com/in/medwinter/', - // icon: FaLinkedin - // }, { - name: 'Github', - url: 'https://github.com/kalecream', - icon: FaGithub, - }, - { - name: 'Codepen', - url: 'https://codepen.io/medwinter', - icon: FaCodepen, + name: 'LinkedIn', + url: 'https://www.linkedin.com/in/medwinter/', + icon: FaLinkedin }, { name: 'Twitter', diff --git a/frontend/src/styles/_normalize.scss b/frontend/src/styles/_normalize.scss index 1accd1af0..b78a9b504 100644 --- a/frontend/src/styles/_normalize.scss +++ b/frontend/src/styles/_normalize.scss @@ -61,7 +61,9 @@ hr { */ pre { - font-family: monospace, monospace; /* 1 */ + // font-family: monospace, monospace; /* 1 */ + width: 100%; + margin: auto; font-size: 1em; /* 2 */ } diff --git a/frontend/src/styles/modules/Button.module.scss b/frontend/src/styles/modules/Button.module.scss index a598b544e..963f14ae8 100644 --- a/frontend/src/styles/modules/Button.module.scss +++ b/frontend/src/styles/modules/Button.module.scss @@ -240,11 +240,11 @@ @supports (-webkit-mask-box-image: inherit) or (mask-border: inherit) { .vamp-border { background-image: linear-gradient(to bottom, #adadac 50%, #8b8b8a 50%); - -webkit-mask-box-image-source: url("https://csspro.com/css-3d-buttons/buttons-img/baldurs-gate-3-border.svg"); + -webkit-mask-box-image-source: url("../../assets/images/baldurs-gate-3-border.svg"); -webkit-mask-box-image-slice: 15 23; -webkit-mask-box-image-width: 15px 23px; -webkit-mask-box-image-repeat: repeat; - mask-border-source: url("https://csspro.com/css-3d-buttons/buttons-img/baldurs-gate-3-border.svg"); + mask-border-source: url("../../assets/images/baldurs-gate-3-border.svg"); mask-border-slice: 15 23; mask-border-width: 15px 23px; mask-border-repeat: repeat; @@ -256,7 +256,7 @@ border-width: 15px 23px; border-style: solid; border-color: transparent; - border-image-source: url("https://csspro.com/css-3d-buttons/buttons-img/baldurs-gate-3-border-inverted.svg"); + border-image-source: url("../../assets/images/baldurs-gate-3-border-inverted.svg"); border-image-slice: 15 23; border-image-width: 15px 23px; border-image-repeat: repeat; diff --git a/frontend/src/styles/modules/Index.module.scss b/frontend/src/styles/modules/Index.module.scss index ca8059975..3e2c7c0cd 100644 --- a/frontend/src/styles/modules/Index.module.scss +++ b/frontend/src/styles/modules/Index.module.scss @@ -69,11 +69,8 @@ display: none; } - @include breakpoint-range($from: tablet) { - display: flex; - } - @include breakpoint-range($from: desktop) { + display: flex; position: absolute; bottom: 15%; right: 10%; diff --git a/frontend/src/styles/modules/heroName.module.scss b/frontend/src/styles/modules/heroName.module.scss index f8d9e680f..497303379 100644 --- a/frontend/src/styles/modules/heroName.module.scss +++ b/frontend/src/styles/modules/heroName.module.scss @@ -9,6 +9,7 @@ width: 100vw; max-width: 480px; height: 200px; + user-select: none; // @include breakpoint-range($from: mobile, $to: tablet) { // display: none; @@ -30,7 +31,7 @@ position: absolute; top: 50%; color: var(--primary); - font-size: clamp(1rem, 25vw, 11rem); + font-size: clamp(1rem, 25vw, 12rem); font-family: var(--accentFont), sans-serif; text-transform: capitalize; -webkit-text-stroke: 2px solid var(--border); @@ -79,6 +80,7 @@ animation: upDown 2000ms ease-in-out infinite; animation-delay: calc(0s + (0.1s * 1)); z-index: -1; + user-select: none; // color: var(--textColor); } .container .text__container .text:nth-child(2) { @@ -88,14 +90,16 @@ animation: upDown 2000ms ease-in-out infinite; animation-delay: calc(0s + (0.1s * 1.3)); z-index: -2; + user-select: none; } .container .text__container .text:nth-child(3) { opacity: 0; left: 45%; transform: translate(-45%, -50%); animation: upDown 2000ms ease-in-out infinite; - // animation-delay: calc(0s + (0.1s * 1.8)); + animation-delay: calc(0s + (0.1s * 1.8)); z-index: -3; + user-select: none; } @keyframes upDown { @@ -105,7 +109,7 @@ transform: translate(-45%, -40%); } 50% { - transform: translate(-45%, -30%); + transform: translate(-45%, -35%); } } @keyframes scaleUpdown { From e1119da0dc98e9731c6024f6fc2fb699bcd24865 Mon Sep 17 00:00:00 2001 From: kalecream Date: Tue, 20 Aug 2024 19:16:42 -0500 Subject: [PATCH 4/4] build: remove deleted dependency --- frontend/next.config.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/frontend/next.config.js b/frontend/next.config.js index 9f8a40d96..80755656f 100644 --- a/frontend/next.config.js +++ b/frontend/next.config.js @@ -1,5 +1,3 @@ -const { remarkCodeHike, recmaCodeHike } = require('@code-hike/mdx'); - /** @type {import('next').NextConfig} */ const withMDX = require('@next/mdx')({ extension: /\.mdx?$/, @@ -7,19 +5,10 @@ const withMDX = require('@next/mdx')({ options: { remarkPlugins: [ [ - remarkCodeHike, - { - autoImport: false, - // @todo make a custom theme - theme: 'github-dark-dimmed', - lineNumbers: true, - showCopyButton: true, - autoLink: true, - staticMediaQuery: 'not screen, (max-width: 768px)', - }, + ], ], - recmaPlugins: [[recmaCodeHike]], + recmaPlugins: [], }, });