🖋️
Posts tagged with :lower_left_fountain_pen:
next build
• After that, I wrote the confetti code and implement it on a React :react: component but I also don't know any react so it didn't work :eggsdee:
• So I added the confetti code into the already existing PhotoGallery component! :yay: Everything looked good, but then I got this error: ReferenceError: document is not defined :errors:
• To fix that, I run my code client side after watching a small tutorial and it ended up like this:
import Masonry from 'react-masonry-css'
import styles from './PhotoGallery.module.scss'
import { Nunito } from 'next/font/google'
import { useEffect } from 'react'
const nunito = Nunito({
weight: ['400', '800'],
subsets: ['latin']
})
export function Button({ children, fontSize = '7rem', ...props }) {
const handleClick = () => {
import('js-confetti').then(({ default: Confetti }) => {
const confetti = new Confetti()
confetti.addConfetti({
emojis: ['🎮', '👾', '🕹️', '💻', '📸', '🎧', '🎨', '🪽']
})
})
}
return (
<button className={styles.button} onClick={handleClick} {...props}>
<span className={styles.shadow} />
<span className={styles.edge} />
<span
style={{ fontSize }}
className={`${styles.front} ${nunito.className}`}>
{children}
</span>
</button>
)
}
function Image({ src, text }) {
return (
<div className={styles.photo}>
<img src={src} width="auto" />
<p>{text}</p>
</div>
)
}
export default function PhotoGallery() {
useEffect(() => {}, [])
return (
<div className={styles.photoGallery}>
<div className={styles.photos}>
This was very fun to work with, and definitely I need to properly learn Next.js on the future. :salute:
highlight.js component
#public to any note.
Today I finished the filter-and-sync.sh script that filters the public files out of my private Obsidian repo and copies them to a public repo that will be rendered by the new static site I’m building for zachlatta.com. I also got it running in Docker, and wrote a timer script to repeatedly run the sync process every 15 seconds.
Once this is deployed, I’ll be able to add #public to any file in my Obsidian notes, and that file will be pushed and deployed to my website within 15 seconds! So if the file in my Obsidian repo is called “Test.md”, the URL it will be publicly available at will be zachlatta.com/test
Excited to see the progress everyone else makes today! You can see the work I did today and my progress here: github.com/zachlatta/zachlatta.com/tree/80001986425894a8948b2a7d044b410978d56a94/public-notes-sync
