piouc

このプロジェクトはReact, styled-componentsで書かれた内容をrenderToStaticMarkupでphpファイルに書き出しています。

• 静的に出力されるためuseState, useEffectなどReactの状態を管理する関数は使えません。<script>タグを出力するためのコンポーネント<Script>がsrc/js/components/script.tsxにあります。fnに関数を渡すとDOMContentLoaded後に実行されます。scriptタグとしてfn内の内容のみ書き出されるため外側の関数や変数にアクセスすることはできません。argsを使用してReact側から引数を渡すことは可能です。
• ループなどを行う際はreact内でphpで記述してください。src/js/components/php-template-parts.tsxに頻繁に利用する記述を出力するためのコンポーネントがまとまっています。
• phpとして出力すればwordpressの変数、関数が利用可能です
• Reactからphpへの出力はscripts/render-worker.tsで行っています。

この後の指示については上の内容を前提としてください

piouc

const waitForLoad = fn => {
  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', fn)
  } else {
    fn()
  }
}

piouc

(() => {
    let points = []

    const handleClick = (event) => {
      const section = event.target.closest('section')
      if (!section) return
  
      const rect = section.getBoundingClientRect()
      const sectionWidth = rect.width
      const x = (event.clientX - rect.left) / sectionWidth * 100

piouc

find . -type f \( -iname "*.jpg" -o -iname "*.png" \) -exec sh -c 'cwebp -q 75 "$0" -o "${0%.*}.webp"' {} \;

piouc

const { writeFile } = require('fs')
const fsp = require('fs/promises')
const { parse } = require('path')

;(async () => {
  const files = await fsp.readdir('./', {recursive: true})
  for(const file of files){
    if(['.js', '.json', '.css', '.liquid', '.html'].includes(parse(file).ext)){
      const data = await fsp.readFile(file, 'utf8')
      const replaced = data.replace(/(\d+(\.\d+)?|\.?\d+|0)rem/g, match => {

piouc

find . -type f -name '*.png' -print0 | xargs -0 -n 1 bash -c 'cwebp "$0" -o "${0%.png}.webp"'

piouc

let point = null
window.addEventListener('mousedown', e => {
  if(point){
    console.log(`x="${point.x / window.innerWidth * 100}vw" y="${point.y / window.innerWidth * 100}vw" width="${(e.clientX + window.scrollX - point.x) / window.innerWidth * 100}vw" height="${(e.clientY + window.scrollY - point.y) / window.innerWidth * 100}vw"`)
    point = null
  } else {
    point = {
      x: e.clientX + window.scrollX,
      y: e.clientY + window.scrollY
    }

piouc

// ==UserScript==
// @name Remove outlook ads
// @include https://outlook.live.com/mail/*
// @version 1.0.2
// @updateURL https://gist.githubusercontent.com/piouc/053352df3e29357240d767a51b0e2e6b/raw/remove-outlook-ads.user.js
// @downloadURL https://gist.githubusercontent.com/piouc/053352df3e29357240d767a51b0e2e6b/raw/remove-outlook-ads.user.js
// @grant    none
// ==/UserScript==

const style = document.createElement('style')

piouc

(async (from) => {
  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
  const modalLinks = Array.from(document.querySelectorAll('a.link-to-detail'))
  const fromIndex = modalLinks.findIndex(a => a.dataset.id === from.toString()) ?? 0
  for(const a of modalLinks.slice(fromIndex)){
    const id = a.dataset.id
    a.click()
    let link
    while(!link){
      await wait(250)

piouc

#EXTM3U
#EXTVLCOPT:network-caching=1000

#EXTINF:-1,地上波 - NHK総合
http://ubuntu.lan:40772/api/channels/GR/27/services/1024/stream/
#EXTINF:-1,地上波 - NHK Eテレ
http://ubuntu.lan:40772/api/channels/GR/26/services/1032/stream/
#EXTINF:-1,地上波 - 日本テレビ
http://ubuntu.lan:40772/api/channels/GR/25/services/1040/stream/
#EXTINF:-1,地上波 - テレビ朝日