samuelhorn

Lucca Faces Solver Improved

Original script by https://github.com/louisgeisler/LuccaFacesSolver, but improved by saving learnings to local storage and providing scripts to read

Main script

Paste this in console on the page with the GO button. When done, click replay and paste the script again.

(async (config) => {
    try {

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 {