samuelhorn

"use client";

import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";

import CloseIcon from "@/assets/svg/close.svg";
import { usePrismicAnalytics } from "@/lib/context/analytics";
import { asText, Content, isFilled } from "@prismicio/client";
import { PrismicNextImage } from "@prismicio/next";

samuelhorn

"use client";

import clsx from "clsx";
import { motion, useSpring, useTransform } from "framer-motion";
import { usePathname } from "next/navigation";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import Confetti from "react-dom-confetti";

import ArrowIcon from "@/assets/svg/arrow.svg";
import { Heading } from "@/components/ui/Heading";

samuelhorn

Here is the toc component

Let's break down the parts of the BlogTableOfContents component that are used to sync the scroll of the collapsed table of contents (TOC) with the scroll of the page, ensuring that the current element is always in view.

Scroll Sync Mechanism

State and References

State Variables:

• headings: Stores an array of heading objects with their ids and indexes.
• activeId: Keeps track of the currently active heading id.
• tocCollapsed: Manages the collapsed state of the TOC.

samuelhorn

<div className="px-0 container lg:px-8 flex flex-col lg:flex-row">
  <div
    className="flex flex-col lg:w-[26.6666666667%] lg:py-12 gap-3 my-6 lg:my-0"
  >
    <SliceZone
      slices="{slice.primary.sub_menu.data.slices}"
      components="{components}"
    />
  </div>
  <ColumnSeparator />

samuelhorn

<ul className="flex flex-col lg:items-center lg:flex-row lg:justify-center">
  {layout.data.slices1.map((item, index) => {
    if (item.variation === "default") {
      return (
        <MenuItem
          key={index}
          slice={item}
        />
      );
    } else {

samuelhorn

import { Heading } from "@/components/ui";
import { Content, isFilled } from "@prismicio/client";
import { BlogPostCard } from "@/components/blog";
import { createClient } from "@/prismicio";

const RelatedPosts = async ({ slice }) => {
  const client = createClient();

  // Return ids of related blog posts
  const blogIds: string[] = slice.items.map((item) => {

samuelhorn

import { createClient } from "@/prismicio";
import { filter } from "@prismicio/client";

const Author = async ({ params }: { params: { uid: string } }) => {
  const client = createClient();

  // Fetch the actual author
  const author = await client.getByUID("blog_author", params.uid)

  // Fetch all blog posts related to author

samuelhorn

"Unsplash": {
  "prefix": "unsplash",
  "body": [
    "<img src=\"https://source.unsplash.com/${1:1600}x${2:900}/?${3:nature,water}\" alt=\"${4:Placeholder image from Unsplash}\" />"
  ],
  "description": "Image from unsplash"
}

samuelhorn

.monaco-editor .cursors-layer .cursor {
  background: transparent;
  border-radius: 100%;
  width: 30px !important;
  background: conic-gradient(yellow 55deg, transparent 0 125deg, yellow 0);
  transform: rotateZ(180deg);
  animation: eat 0.5s linear infinite;
}

@keyframes eat {

samuelhorn

/*******************************************************************************
1. DEPENDENCIES
*******************************************************************************/

var gulp = require('gulp');                             // gulp core
    sass = require('gulp-sass'),                        // sass compiler
    uglify = require('gulp-uglify'),                    // uglifies the js
    jshint = require('gulp-jshint'),                    // check if js is ok
    rename = require("gulp-rename");                    // rename files
    concat = require('gulp-concat'),                    // concatinate js