JCJang

// see image: https://jang.digital/_ipx/_/media/the-modest-inquisitor/screenshot1.jpg
// see case study: https://jang.digital/work/the-modest-inquisitor

<script setup lang="ts">
// javascript - vue 3 setup
import Fuse from 'fuse.js'; // Import the Fuse.js library for fuzzy searching
import WordHighlighter from 'vue-word-highlighter'; // Import a Vue component for highlighting words
// Get a collection of data using Firebase and Vuefire
const collection = useCollection(...);
// Create a reactive variable for the search query

JCJang

// website https://dofa.netlify.app/services/mep/mechanical
// case study https://jang.digital/work/department-of-approvals

<script setup lang="ts">
//layouts/header.vue
import { routes } from "/assets/routes.ts";
import { useWindowSize } from "@vueuse/core";
import { useElementSize } from "@vueuse/core";
const headers = ref(null);
const { width: windowW } = useWindowSize();

JCJang

// for https://plugsandmugs.com/map/
// see case study for illustration details https://jang.digital/work/plugs-and-mugs#illustration-and-color-choice

// composite.js
import jimp from "jimp";
import imagemin from "imagemin";
import imageminPngquant from "imagemin-pngquant";
import fs from "fs";
import path from "path";
// Function to create composite image

JCJang

//translationZHTW.json

{
  "Navbar":{
    "trekinn":"《 美崙遊記 》",
    "about":"簡介",
    "destinations+map":"觀光指南及地圖",
    "rooms":"訂房",
    "contact":"聯絡資訊",
    "changeTo":"English",

JCJang

import i18n from './../../i18n.js'
import { useTranslation } from 'react-i18next'
import NavLink from './NavLink.js'

const Navbar = () => {

const {t, i18n} = useTranslation();
 
return (
   <nav>

JCJang

/* Headers: Rufina - English, Genwan - Chinese */

.h1{
  @apply text-4xl tracking-wider font-medium;
  font-family: "Rufina","Genwan";
}

/* Body Text: Roboto - English, Genseki - Chinese */

.body{

JCJang

//combining and referencing code from 'react-zoom-pan-pinch' by Maciej Pyrc, 'react-image-fade-in' by Patrick Tran, react portal tutorial by Kyle Cook (WebDevSimplified)

import ImageFadeIn from '../../../../../customHooks/imageFadeIn';
import React from 'react'
import ReactDom from 'react-dom'
import {TransformWrapper, TransformComponent} from "react-zoom-pan-pinch";

import {VscZoomIn as ZoomInIcon} from "react-icons/vsc";
import {VscZoomOut as ZoomOutIcon} from "react-icons/vsc";
import {IoResizeOutline as ResetIcon} from "react-icons/io5";

JCJang

//simple Carousel setup using CSS position and custom hooks by Kyle Cook (WebDevSimplified)

import ImageFadeIn from '../../../../../customHooks/imageFadeIn'
import useTimeout from '../../../../../customHooks/useTimeout'
import useDebounce from '../../../../../customHooks/useDebounce'
import useClickOutside from '../../../../../customHooks/useClickOutside';
import ImageModal from './ImageModal'

import {useEffect, useState, useRef} from 'react'

JCJang

//timeline object consists of simple key-value pairs, but some keys have dates while others do not.
//"Timeline of ..." : {"1990 May 2":"Event description for 1990 May 2", "1992" : "Event description for 1992"}


//get array of [year, key, value]

const getKeyValueArr = (obj)=>{
  const keys = Object.keys(obj);
  const values = Object.values(obj);
  const keyValueArr=[]

JCJang

{
  "_id": ".....",
  "shelfSubjects": [
    "0 Ancient and Modern Languages",
    "1 Literature",
    "4 Anthropology",
    "5 Human Geography"
  ],
  "editions": [
    {