Using Rangeable RFC as an example, this records how AI participates in deeper technical research and design, from problem abstraction, algorithm selection, semantic definition to Ruby / Swift reference implementation.

Background

A few weeks ago, to redesign my personal website, I upgraded to Claude Code Max and later used AI with Google Apps Script to create a personal desktop Dashboard Deck, turning an old iPhone from junk into treasure. This week, I shifted my focus to a previous open-source project, using AI to refactor the original handcrafted code, optimize efficiency, add documentation, and complete tests.

TL;DR

First, I used AI to refactor the application layers of several open-source projects, which inspired me to dive deeper into foundational data structure design.

Linkyee— Your Own Link Page

A fully customized, 100% free, open-source LinkTree alternative — deployed straight to GitHub Pages.

The first optimization was for the previously made Linktree-like free open-source self-hosted version. I used AI to restructure the architecture, design several new themes, add more built-in plugins, introduce a Design AI Skill for easy user customization, and enhance the local testing environment.

ZMediumToMarkdown

Download Medium posts as clean Markdown, preserving structure, images, links, code blocks, and common embeds for plain Markdown or Jekyll workflows.

I will download all the article content, including images, embedded code, and YouTube links, and convert them into Markdown format. The images will be saved together in the ./assets folder.

The second is a project I have been using and maintaining for over four years — a tool to download and convert Medium articles into Markdown format. Since later on, I mostly treat Medium as a backend editor, the main use is to download and convert the original text with this tool and then upload it to my self-hosted website.

This project is a crucial bridge between my website and Medium that cannot be broken; the first version took me a lot of time and effort to develop. Over the years, I’ve been fixing minor issues, but it has been a long time since I thoroughly reviewed and optimized the design.

Starting with AI optimization for the application, besides asking it to refactor and add tests for the original manually written rendering logic, it also improved the Medium Cloudflare Anti-bot process. This allows users to gracefully log in through Chrome and automatically obtain cookies when Medium blocks the crawler, then execute automatically.

mcp-medium-reader

Finally, AI also built the Medium.com article Reader MCP service.

The basic conversion service ZMediumToMarkdown is already completed. MCP is just a wrapper that calls it to get the job done.

The problem solved is that AI like ChatGPT, Codex, Claude, and Claude Code are often blocked by Medium’s Cloudflare Anti-bot when trying to scrape content from Medium articles. As a result, AI cannot directly read the articles, and even if it can, it only reads HTML, which is not AI-friendly Markdown.

mcp-medium-reader Allows your AI to bypass blocks and read the Markdown version of Medium articles, saving tokens while improving AI comprehension.

Labeled Interval Set Problem

Back when I was working on ZMediumToMarkdown, I encountered this Foundation data structure design (algorithm) problem. At that time, I didn’t have the extra energy or ability to solve it, but now with AI, I thought I could try to use AI to solve this problem.

Case 1 — Medium Rendering Issue

The article content data returned by Medium.com’s GraphQL API is in the following format:

{
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "markups": [
    {
      "type": "A",
      "start": 169,
      "end": 207,
      "href": "https://zhgchg.li/posts/f6713ba3fee3/",
      "anchorType": "LINK",
      "userId": null,
      "linkMetadata": null,
      "__typename": "Markup"
    },
    {
      "type": "STRONG",
      "start": 0,
      "end": 29,
      "href": null,
      "anchorType": null,
      "userId": null,
      "linkMetadata": null,
      "__typename": "Markup"
    },
    {
      "type": "EM",
      "start": 15,
      "end": 55,
      "href": null,
      "anchorType": null,
      "userId": null,
      "linkMetadata": null,
      "__typename": "Markup"
    },
    {
      "type": "STRONG",
      "start": 69,
      "end": 88,
      "href": null,
      "anchorType": null,
      "userId": null,
      "linkMetadata": null,
      "__typename": "Markup"
    }
  ]
}

Plain Language Translation:

[0,14]    STRONG       = Lorem ipsum dol
[15,29]   STRONG + EM  = or sit amet, co
[30,55]   EM           = nsectetur adipiscing elit,
[56,68]   normal       =  sed do eiusm
[69,88]   STRONG       = od tempor incididunt
[89,168]  normal       =  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit
[169,207] A            = ation ullamco laboris nisi ut aliquip e

Expected Rendering Result:

Note: The meaning of “end” in the original Medium data should be converted according to the actual API definition; this article will use the closed interval meaning defined by the Rangeable RFC for explanation.

Problem

• Range Overlapping
  The same range can have multiple overlapping states, for example [15,29] is STRONG + EM

• Range Overlapping
  In extreme cases, users may set overlapping styles, such as [0,29] being STRONG and [15,55] being EM.

• Continuous Interval Merging
  Data may provide [0,12] as STRONG / [12,29] as STRONG and need to be merged into [0,29] as STRONG

Overlapping intervals and continuous merging are relatively easy to handle. The most troublesome part is managing intersecting and closing intervals. You can’t render them directly by index, as it would become **AA_AA**BBB_. You need to handle the open and close markers yourself to get **AA_AA_**_BBB_, which is the correct Markdown.

iOS developers who have used NSAttributedString attributes face the same issue, except Apple Foundation handles the interval merging and overlay for us.

At that time, I spent a long time thinking about it. I regretted not having studied more since I rarely practiced problems and had no tools when I actually needed them. I ended up using the most brute-force walkthrough solution, which was correct but had terrible performance and code quality.

Related LeetCode Problems

• Merge Intervals

56. Merge Intervals
57. Insert Interval

Usage: Merge STRONG [0,12], STRONG [13,29] -> STRONG [0,29].

• Sweep Line

253. Meeting Rooms II
731. My Calendar II
732. My Calendar III
1094. Car Pooling
1851. Minimum Interval to Include Each Query

Purpose:

STRONG [0,29]
EM     [15,55]
A      [169,207]

to

0    open STRONG
15   open EM
30   close STRONG
56   close EM
169  open A
208  close A

• Difference Array, but not just numeric differences

370. Range Addition
1109. Corporate Flight Bookings
1094. Car Pooling

Purpose: Maintain active markup set

• Interval Split / Segment Construction

Purpose:

STRONG [0,29]
EM     [15,55]

to

[0,14]   STRONG
[15,29]  STRONG + EM
[30,55]  EM

Other Used Problem Types and Data Structures:

• Event Sorting

• Interval Partition / Segment Split

• Stack / Parentheses Matching

• Binary Search

• Ordered Set / LinkedHashSet

• Canonicalization

Case 2 — AVPlayer Cache Segment Issue

The interval problem encountered above on Medium is actually similar to one I faced before, during the development of “AVPlayer local playback with caching”.

Because streaming data is discontinuous, AVPlayer may request discontinuous or overlapping data ranges such as [0,100] [300–500] [150, 200]… from a Data of Size: 1000.

As shown in the above diagram, assuming the current data segments are: [250,566] [850,959], ideally:

• When AVPlayer requests [0,300]: [0,249] fetched from remote, [250,300] fetched locally

• When AVPlayer queries [350, 920]: [350,566] fetched locally, [567,849] fetched remotely, [850,920] fetched locally

At that time, I encountered the interval calculation problem — Covered / Uncovered Interval Query — but it was simpler than the Medium problem because it only involved distinguishing between binary data 0 and 1, requiring just the calculation of results.

At that time, the issue was temporarily unresolved because developing the AVPlayer’s simultaneous playback and caching feature took most of the time; plus, the scenario involved audio files, which were not large; so we directly used the approach of fetching and overwriting the entire range if data was missing — for details, please refer to the original article “AVPlayer Local Cache Implementation Guide｜Using AVAssetResourceLoaderDelegate to Save iOS Music Streaming Data“.

Overall Collaboration Process

Implementing Foundation Data Structure Design with AI

Tools

• Claude Code Max

• Effort: Max

• Model: Opus 4.7

Process

• First, Have AI Plan Mode Draft the Research RFC Writing Proposal

• Please have the AI start the research with two agent roles: one is a graduate student responsible for researching and writing the RFC, and the other is a professor who focuses solely on reviewing the algorithm’s efficiency and validity. (Review until approval)

• The graduate student can start by experimenting with the Medium case and try developing it using Ruby.

• Final Output RFC.md File

• Delegating implementation to other Agents in various languages (I handle ZMediumToMarkdown in Ruby / AVPlayer in iOS Swift)

1. AI Research and Design of Data Structure RFC — Rangeable RFC

Prompt (Plan Mode):

/plan

Please use English and refer to academic papers to draft an RFC implementation document. This document will later be delivered for other languages to follow when implementing. During drafting, you can use Ruby as the experimental language.
You need to study all data structures and algorithms to find a balanced solution in terms of time and space efficiency to meet the requirements.
Tool name: Rangeable
Function: Calculate continuous and discontinuous sets of generic object combinations.
Example:
var strings:Rangeable<String> = []
strings.insert(Strong(), start: 2, end: 5) // 2-5 Strong
strings.insert(Strong(), start: 3, end: 7) // 3-7 Strong
strings.insert(Strong(), start: 9, end: 11) // 9-11 Strong
strings.insert(Italic(), start: 3, end: 8 ) // 3-8 Italic

// Usage:
Strong().getRange(from: strings) -> [{2,7},{9-11}]
Italic().getRange(from strings) -> [{3,8}]
// 
strings[4].objs -> [Strong(), Italic()]
strings[8].objs -> [Italic()]
strings[10].objs -> [Strong()]
// 
Please note Strong and Italic themselves are generic; this is just an example
//

During the actual RFC drafting, use sub-agents: one as a graduate student responsible for researching implementation methods and writing the RFC, and another as a professor focusing on academic or deeper algorithms to review the graduate student's output. If rejected by the professor agent, research and rewrite the RFC.
You can first create ./RubyRangeable for the Ruby implementation and ./SwiftRangeable for the Swift implementation.
Feel free to consume tokens and resources for research.
//
Provide a real-world use case: ../ZMediumToMarkdown in MarkupStyleRender.rb
Currently parses Medium GraphQL returned Paragraphs
{"id": "f30dc1c4fe6c_19", "name": "b2ba", "type": "BQ", "href": null, "layout": null, "metadata": null, "text": "A notification webhook is an endpoint you create on your server.\n通知型 Webhook 是你在自己伺服器上建立的一個端點(endpoint)。", "hasDropCap": null, "dropCapImage": null, "markups": [{"type": "EM", "start": 0, "end": 104, "href": null, "anchorType": null, "userId": null, "linkMetadata": null, "__typename": "Markup"}], "__typename": "Paragraph", "codeBlockMetadata": null, "iframe": null, "mixtapeMetadata": null},
{"id": "f30dc1c4fe6c_20", "name": "f2e8", "type": "BQ", "href": null, "layout": null, "metadata": null, "text": "This webhook endpoint receives HTTP POST requests from App Store Connect.\n這個 Webhook 端點會接收來自 App Store Connect 的 HTTP POST 請求。", "hasDropCap": null, "dropCapImage": null, "markups": [{"type": "EM", "start": 0, "end": 126, "href": null, "anchorType": null, "userId": null, "linkMetadata": null, "__typename": "Markup"}], "__typename": "Paragraph", "codeBlockMetadata": null, "iframe": null, "mixtapeMetadata": null},
{"id": "f30dc1c4fe6c_21", "name": "1725", "type": "BQ", "href": null, "layout": null, "metadata": null, "text": "The POST requests describe important events about your app.\n這些 POST 請求會描述與你的 App 相關的重要事件。", "hasDropCap": null, "dropCapImage": null, "markups": [{"type": "EM", "start": 0, "end": 89, "href": null, "anchorType": null, "userId": null, "linkMetadata": null, "__typename": "Markup"}], "__typename": "Paragraph", "codeBlockMetadata": null, "iframe": null, "mixtapeMetadata": null},
{"id": "f30dc1c4fe6c_22", "name": "3e9d", "type": "BQ", "href": null, "layout": null, "metadata": null, "text": "Use the webhooks notifications endpoint to configure the notifications for events happening to your apps.\n你可以使用 Webhook 通知端點，來設定當你的 App 發生各種事件時所要接收的通知。", "hasDropCap": null, "dropCapImage": null, "markups": [{"type": "EM", "start": 0, "end": 151, "href": null, "anchorType": null, "userId": null, "linkMetadata": null, "__typename": "Markup"}], "__typename": "Paragraph", "codeBlockMetadata": null, "iframe": null, "mixtapeMetadata": null},
Then render Markdown according to start and end, but currently no algorithm exists so a loop filling method is used.

2. After the plan is confirmed, the graduate student Agent starts research -> produces the first version of the RFC

3. Professor Agent Starts Review -> REJECTED

The main reason is that the professor found 6 MUST-FIX issues in the RFC, meaning specification/algorithm correctness problems that must be fixed to pass.

4. Graduate Student Agent Revisits Research and Revisions -> Produces Second Version of RFC

5. Professor Agent Re-Review -> APPROVED

6. Done

• Time spent: About 1 hr 30 mins

• Token usage: 178K (about 30% of Claude Code Max 5 hr quota)

Rangeable RFC

TL;DR

Rangeable<Element> is a generic data structure for managing “which elements are active within which integer closed intervals.” It automatically merges overlapping or adjacent intervals of the same element and supports querying which elements are active at a given index, as well as outputting open/close transition events within a range. It was originally designed to solve Medium Markdown markup rendering issues, such as determining which styles like STRONG, EM, or LINK are applied to a character. However, it can also be applied to calendars, game states, genome annotation, AVPlayer byte-range cache, and more. Its core value is abstracting “interval merging, active set querying, and boundary event generation” into a deterministic, cross-language consistent specification suitable for Ruby and Swift implementations.

The following RFC details can be skipped unless you are very interested. This section is also directly translated and summarized by AI.

Rangeable<Element> is a generic data structure that maps elements to multiple integer closed intervals and allows fast queries of which elements are active at a given position.

It doesn’t just solve a simple Range problem, but gives me many (element, start, end) tuples, and I need to be able to:

1. Find which merged ranges contain a specific element

2. Check which elements are active at a specific index

3. Find which open/close boundary events occur within a certain range

The RFC clearly defines Rangeable as a language-neutral, generic, integer-coordinate, closed-interval set container. Elements must be hashable and compared by value equality. It supports three types of queries: getRange, r[i].objs, and transitions.

Main Motivation

This RFC originated from the Medium markup rendering issue in ZMediumToMarkdown.

Inside Medium paragraphs, there will be markups like this:

STRONG: [2, 5]
STRONG: [3, 7]
EM:     [4, 10]

Currently, rendering requires scanning each character to determine which tags are active, such as bold, italic, link, code, etc. The RFC mentions that the original approach converts markups into TagChar, sorts them by startIndex, and then scans all tags linearly for each character, with a worst-case complexity of O(L · m). Rangeable aims to abstract this into a general container, allowing the renderer to simply insert markups and then query using r[i].objs or transitions.

The RFC also extends this problem to other scenarios, such as:

The RFC clearly states the common problem: given many (eᵢ, lᵢ, hᵢ), when querying a position i, return all elements satisfying l ≤ i ≤ h.

Core Concept Translation

1. Rangeable<Element>

It can be thought of as:

Element -> [ClosedRange<Int>]

But it is not an ordinary Dictionary, because it can:

1. Automatically merge overlapping intervals of the same element

2. Automatically merge adjacent intervals

3. Preserve the order of elements based on their first insertion

4. Support fast queries of active elements at a specific index

5. Support output of open/close transition events

For example:

insert(STRONG, 2, 5)
insert(STRONG, 3, 7)

Finally, it will become:

STRONG -> [(2, 7)]

Because [2,5] and [3,7] overlap.

API Highlights

The main APIs defined by the RFC are as follows.

insert(e, start, end)

insert(e: Element, start: Int, end: Int)

The effect is:

R(e) = canonicalize(R(e) ∪ [start, end])

That is, add a new interval with element e to the existing set of intervals, then canonicalize: merge all overlapping or adjacent intervals and sort them. start > end must throw an InvalidIntervalError; inserting the same content repeatedly is idempotent, should not change the result, nor increase the version.

r[i].objs / activeAt(index:)

r[i] -> Slot
r.activeAt(index: i) -> Slot

Return the active elements at a given index.

For example:

insert(Strong, 2, 5)
insert(Italic, 3, 7)

Query:

r[3].objs

The result is:

[Strong, Italic]

The query complexity goal is:

O(log M + r)

Here, M is the total number of intervals after merging all elements, and r is the actual number of elements returned at that position.

getRange(of:)

getRange(of e) -> [(Int, Int)]

Return the canonical ranges currently merged for a given element.

For example:

insert(Strong, 2, 4)
insert(Strong, 5, 7)

Because [2,4] and [5,7] are adjacent on the integer coordinates, the result is:

[(2, 7)]

The RFC explicitly requires that the returned intervals must be sorted, non-overlapping, and non-adjacent.

transitions(over:)

transitions(over: ClosedRange<Int>) -> [TransitionEvent]

Return the open/close boundary events within a range.

For example:

insert(Strong, 2, 5)
insert(Italic, 3, 7)

Then the transitions will be:

[
  (2, open,  Strong),
  (3, open,  Italic),
  (6, close, Strong),
  (8, close, Italic)
]

Note that the close event position is hi + 1 because the external semantics use a closed interval [lo, hi], but the sweep-line internally uses the “first position no longer active” as the close coordinate. The RFC clearly states that transitions(over: lo..hi) will include the close event at hi + 1, making it easier to handle the right boundary.

Interval Semantics

1. end is inclusive

This RFC is very clear: insert(e, start: a, end: b) represents a closed interval [a, b], where b itself is also included in the active range.

That is to say:

insert(Strong, 2, 5)

Representative:

2, 3, 4, 5 are all active

Not [2, 5).

The reasons for choosing inclusive in the RFC include:

1. Historical Data Model Compatible with Medium Markup / ZMediumToMarkdown

2. More aligned with the human intuition of “whether this character is active”

3. Integer adjacency merge can be written as hi + 1 == lo

4. A single-point range [k, k] can naturally represent a valid position.

2. Adjacent intervals should be merged

On integer coordinates:

[2, 4] + [5, 7] => [2, 7]

Because there is no integer position between 4 and 5 to represent “not active,” the RFC requires that adjacent integer intervals of the same element must be merged.

But:

[2, 4] + [6, 7] => [(2, 4), (6, 7)]

Because there is a gap of 5 in the middle.

3. start == end is a valid singleton interval

insert(e, 5, 5)

It means only index 5 is active. The RFC requires this to be a valid and non-empty range.

4. start > end must throw an error

insert(e, 10, 5)

Cannot automatically reverse to [5,10] nor silently normalize. The RFC requires throwing InvalidIntervalError, and the container state must not change.

Element equality semantics

Rangeable determines whether two elements are the same by using the language’s native value equality.

Ruby:

eql? + hash

Swift:

Hashable / Equatable

So:

Link("a") and Link("a") are considered the same element, intervals will merge
Link("a") and Link("b") are different elements, will not merge
Strong() and Strong() will merge if equality matches

The RFC requires equality to satisfy reflexive, symmetric, transitive, and hash consistency properties, and elements should not be externally mutated to break hash/equality after insertion.

Sorting Rules

This is a very important part of the RFC.

Active set sorting

The order of r[i].objs is not based on hash, alphabetical order, or range length, but rather:

The order in which elements are first inserted

For example:

insert(Strong, 1, 10)
insert(Italic, 1, 10)
insert(Code, 1, 10)

Then:

r[5].objs == [Strong, Italic, Code]

The RFC states that this approach ensures determinism, cross-language consistency, and aligns with Markdown nesting: styles that appear earlier are usually outer layers.

Merge does not change insertion order

For example:

insert(Strong, 1, 5)   // Strong ord = 1
insert(Italic, 3, 7)   // Italic ord = 2
insert(Strong, 4, 8)   // Strong ranges merge into [1,8], but ord remains 1

Query:

r[6].objs

The result is:

[Strong, Italic]

Although Strong extends to index 6 only in the third step, its first-insert order is still earlier than Italic. The RFC uses this case to fix “the order of an element’s first appearance” as the sorting criterion.

Transitions Sorting

At the same coordinate:

1. .open comes before .close

2. Multiple .open: ascending by insertion order

3. Multiple .close: in descending insertion order, which is LIFO

This complies with Markdown stack discipline:

** open
_ open
_ close
** close

The RFC clearly defines this tie-breaking to avoid inconsistent Ruby / Swift hash order causing different cross-language outputs.

Internal Data Structures

The core design chosen for the RFC is:

Map<Element, SortedList<Interval>>
+ insertion_order
+ lazy boundary-event index
+ version counter

1. Per-element sorted disjoint list

Each element has its own interval list:

intervals: Map<Element, SortedList<Interval>>

And it must maintain the canonical form:

1. Sort in ascending order by lo

2. Non-overlapping with each other

3. Non-adjacent to each other

4. Each interval satisfies lo <= hi

The RFC calls this the I1 invariant.

2. Lazy boundary-event index

Rangeable does not rebuild the query index on every insert; it only builds it at the first query.

version: Int
event_index: EventIndex?

event_index contains:

events: SortedArray<Event>
segments: SortedArray<Segment>
version: Int

This design is meant to fit the “build-once-then-query-densely” workload: a large number of inserts followed by dense queries at each position. The RFC clearly states that a lazy index suits this pattern because the build phase does not require constant index rebuilding, and the query phase pays the O(M log M) cost only once.

Algorithm Highlights

Core Process of insert

The pseudocode of the RFC is roughly:

function insert(r, e, start, end):
  if start > end:
    raise InvalidIntervalError

  e_frozen = freeze_for_insert(e)

  if e not in intervals:
    intervals[e] = []
    insertion_order.append(e)
    ord[e] = insertion_order.length

  list = intervals[e]
  lo = start
  hi = end

  Find the first interval that may overlap or be adjacent to [lo, hi]

  while interval overlaps or is adjacent to [lo, hi]:
    lo = min(lo, interval.lo)
    hi = max(hi, interval.hi)
    Remove the old interval

  Insert the merged new [lo, hi]

  If there is a real change:
    version += 1
    event_index = nil

Note that the RFC warns against using lo - 1 for checks because it can underflow when lo == Int.min; instead, use hi + 1 >= lo or an equivalent successor model.

Complexity

The reference structure chosen for the RFC is:

per-element sorted disjoint list + lazy event index

The complexity is roughly as follows:

Among them:

m_e = The number of merged intervals of a certain element itself
k = The number of old intervals absorbed/merged in this insert
M = The total number of merged intervals of all elements
r = The actual number of active elements at the query position

The RFC also points out that if there are truly m active elements at the same position, the output itself requires Ω(m), so O(log M + m) is already a reasonable output-sensitive bound.

Why not use Interval Tree / Segment Tree / Roaring Bitmap?

The RFC has a whole section comparing alternative solutions and ultimately chooses (a) Per-element sorted disjoint list + lazy event index.

Key points:

Three reasons for choosing the main structure in the RFC summary:

1. The term “per-element merge” is natural, and getRange can directly return R(e).

2. deterministic, cross-language reproducible

3. lazy index is well suited for build-once-then-query workloads

Features not included in v1

RFC clearly lists what v1 will not do:

remove(e, start, end)
remove(e)
clear
union / intersect / difference
persistent immutable snapshot
floating-point coordinates
multi-dimensional rectangle stabbing
r[lo...hi].objs range slot query like this

Please also have AI handle deletion and intersection in the RFC V2 implementation.

Ask AI to implement language versions based on Rangeable RFC

Process

1. Start with /plan Plan Mode, ask AI to carefully read the RFC and plan the implementation.

2. Split the roles as developer/reviewer, one writes and the other reviews, until there are no issues.

3. Write Readme Documentation and Push to GitHub

The most difficult RFC specification research has been completed. As long as AI implements according to this specification, there will hardly be any issues in the later implementation.

Currently implemented languages are as follows

• Ruby 3.2+ github.com/ZhgChgLi/RubyRangeable

• Swift 5.7+ github.com/ZhgChgLi/SwiftRangeable

• Python 3.10+ github.com/ZhgChgLi/PythonRangeable

• TypeScript / JS (Node 18+) github.com/ZhgChgLi/JSRangeable

• Kotlin / JVM 11+ github.com/ZhgChgLi/KotlinRangeable

• Go 1.22+ github.com/ZhgChgLi/GoRangeable

Practical AI-Designed Development — Rangeable Foundation

After everything is ready, return to the original algorithm issue in the open-source project ZMediumToMarkdown. Have the AI apply this Lib to replace and remove the original complex walkthrough approach, optimizing the architecture + adding validation tests before and after application.

ZMediumToMarkdown 3.6.0

Performance

• Micro-benchmark: 5.5× faster on the markup render hot path.

• End-to-end on a real Medium article: 2.23× faster
  (2073 µs → 930 µs per paragraph on average).

AVPlayer Local Cache Implementation Guide

The article also adds more examples of applying SwiftRangeable.

Admiring AI

Previously, AI was only used for application tasks, such as redesigning websites, personal dashboards, or fixing product issues at work; this was the first time it was asked to deeply research algorithm solutions and underlying data design.

The results exceeded my expectations. After roughly reading the RFC he wrote, both the format and content are as good as those produced by real researchers (at least definitely better than what I write). I observed what he was doing: he used Web Search to find public related papers or technical documents, then integrated and assessed the feasibility of the implementation. Splitting the roles into doer and reviewer was also very effective—the doer tends to focus too much on implementation, while the reviewer can take a broader and higher-level view to check if the doer’s work has any side effects. Finally, after the RFC was finalized, the AI implemented based on the document with almost 100% accuracy.

Reflections on AI Usage

However, there is no need to fear being replaced by AI. The key is problem-solving thinking, which AI is still weak at; for example, if you directly ask it to optimize ZMediumToMarkdown, it may only focus on the Medium scenario and the original code style. But humans know to abstract it into a Foundation, study the RFC first, and then implement it, which works much better. Of course, we can do it ourselves, but it takes time. AI helps us speed up this process, not replace us.

Unboxing the IQUNIX MG75 Pro: Aluminum Build and Light Typing Feel for MacOS

MG75 Pro Unboxing Experience

Introduction

It’s been a long time since I wrote an unboxing post, and I didn’t have anything special to unbox. Recently, my second-hand mechanical keyboard that I’ve used for two years finally died (actually, I spilled water on it). It was a high-profile keyboard assembled by a colleague (based on the DUKHARO — VN66), probably with yellow/white switches.

Old Keyboard

Before getting into mechanical keyboards, my favorite was the Apple Magic Keyboard. I prefer low-profile switches and, as an Apple user, this one is the perfect choice.

Apple Magic Keyboard

But the feel is just like a pure chocolate keyboard—flat and without any tactile feedback.

IQUNIX MG65/75/96 Pro Low-Profile Light Feather Switch Tri-Mode Aluminum Mechanical Keyboard

https://iqunix.com/products/iqunix-magi75-96-aluminum-low-profile-mechanical-keyboard?variant=50355797590322

This keyboard caught my attention because a colleague bought it shortly after I got my previous one. I tried pressing a few keys myself and confirmed it was my dream keyboard. The low-profile switches match my preference for chocolate-style keys combined with the “Light Feather Switch,” offering good tactile feedback without being too noisy. It also has a sleek appearance and a multifunction control panel. Most importantly, it comes with official MacOS keycaps. Now, I finally have the chance to get it.

Image taken from Official Product Image

Switch — Custom Made Light Feather Switch (official marketing term), Gold Red Switch (spec sheet)

• Actuation Force: 40 ± 10 Ggf

• Total travel (full distance): 2.8 mm ± 0.25

• Actuation travel (the distance the key is pressed down from the top until the “signal is triggered”): 1.2 mm ± 0.30

• Lifespan: 50 million keystrokes

Keycaps

• High-content PBT + Anti-stain Coating

• Skin-like texture

Case

• CNC Machined Full Aluminum Alloy

• Height: 11 mm (lowest point) — 25.5 mm (highest point)

• LE-Tray structure, Poron sandwich foam, PET bottom pad, IXPE pad under switches, Poron bottom foam, IXPE bottom pad

Usage Parameters

• Type-C

• Supports hot-swappable switches and VIA software

• Supported connections: Wired, Bluetooth 5.1, 2.4 GHz wireless

• Supports colorful RGB backlight control

• Support: Windows / macOS / iOS / Android
  Includes replaceable Windows / macOS keycaps

Models MG65 / MG75 / MG96 / MG65 Pro / MG75 Pro / MG96 Pro

The main difference is the keyboard layout (65/75/96) and the Pro version has a multimedia control panel on the right (+5 keys).

• MG65: 68 keys, 3,000mAh battery
  900g / MG65 Pro 1030g

• MG75: 84 keys, 4,000mAh battery
  947g / MG75 Pro 1110g

• MG96: 100 keys, 4,000mAh battery
  1144g / MG96 Pro 1296g

Multimedia Control Panel Functions:

At the bottom is the storage compartment for the 2.4G USB receiver, which has no other function.

Appearance:

• Mist White

• Night Tour Black

Price

According to Taobao (Tmall — IQUNIX Official Store), the price as of 2026/05 is:

• MG65: RMB $699

• MG75: RMB $899

• MG96: RMB $899

• MG65 Pro: RMB $899

• MG75 Pro: RMB $999

• MG96 Pro: RMB ¥1,099

Choice

MG65 does not have F-row keys, so it was not considered. The base model starts from MG75, while MG96 feels too large. The Pro features are optional, but since the price difference is small, I upgraded. The final choice — MG75 Pro.

Purchase Channels

• No official distributor in Taiwan or the distributor has stopped restocking.

• Official international website https://iqunix.com/, but the price (MG75Pro) plus shipping is close to NT$6,200.

• Taobao Official IQUNIX Flagship Store MG75PRO total cost including shipping and tax: NT$4,798

White is even more popular than black. I noticed it sells out every week from Monday to the weekend; I bought the black MG75 PRO.

Taobao Official IQUNIX Flagship Store

I have to say, buying from Taobao is super convenient now. You don’t need to figure out consolidated shipping or have a Chinese account or credit card; you can pay directly online using Jkopay, Apple Pay, or credit cards. Then, the official consolidated or direct shipping delivers to your home, or you can even pick up at convenience stores.

• Order placed after midnight on 05/03, shipped in the morning

• 05/05 Shipment departed

• 05/06 Arrived in Taiwan

• Received the package at noon on 05/08

If you have no experience buying items from overseas, be sure to complete EZWay real-name verification by downloading the EZWay App, registering, and completing the verification; a few days after shipping, you will be notified of a customs declaration record—just open the app and confirm it.

IQUNIX MG75 Pro Low-Profile Light Feather Switch Tri-Mode Aluminum Mechanical Keyboard Night Black Unboxing

The packaging is very simple, just a cardboard box the same size as the keyboard… I was a bit worried it might get damaged, but luckily the keyboard case is hard.

Opening it reveals the keyboard storage pouch; the packaging is simply placing it directly into a cardboard box.

The official product page says it’s a new packaging that directly replaces the keyboard box with a carrying pouch (which means you get an extra case for free).

Inside the keyboard bag, you will find the keyboard itself, a manual, and accessories.

Accessories include: 2.4GHz receiver, USB-A to USB-C cable, extra keycaps, and a keycap puller.

The default keycaps are macOS style, and you can choose to replace them with the extra X aluminum keycaps for a more premium feel. The included data cable is a coiled cable that can stretch longer and is easy to store, which is a nice touch.

The back of the keyboard also has a metallic texture; the only drawback is the lack of built-in stands to adjust the tilt angle.

Key height compared to the original keyboard.

I directly replaced it with X.

Body Details

I didn’t notice when buying it, but there is actually a light strip on the panel that lights up.

The keycaps have a calm black matte texture, and the keyboard body is made of matte aluminum alloy, giving it a premium feel. It feels solid and practical when held.

Manual

Basically, it’s similar to all mechanical keyboards, mainly just adjusting the lighting and connection settings.

Startup Process

• Plug the cable into the computer

• Press and hold FN + ESC for more than 3 seconds to power on the keyboard (Tab backlight will flash)

• Switch to macOS key layout: FN + Tab (Must set for macOS, otherwise CMD will require pressing CTRL)

• Set backlight: FN + [ / FN + ] / FN + Shift / FN + Enter

Actual Key Sound

Please focus on relative volume levels, as the iPhone’s microphone tends to amplify the actual volume.

Typing Feel

The sound is much deeper and quieter than before, yet it still retains the tactile feedback of a mechanical keyboard. It feels quite comfortable to use so far. The downside might be that the keys on the right side are too densely packed, which takes some getting used to and can easily cause mistakes, such as pressing the Home key when intending to press Delete.

Turning Waste into Treasure with AI — Using Claude Design & Claude Code to Build Your Personal Desktop Dashboard as an Example.

Finished Product Demo

Turn an iPhone 8 Plus that has been sitting unused in a drawer for years into a personal desktop Dashboard Deck, fully customized and completely free.

Introduction

TL;DR If you only care about how to use AI to build your personal desktop Dashboard, please skip this section.

I started using Google Apps Script around 2021 to develop small tools for automating and optimizing workflows. Back then, AI and RPA automation were rarely discussed. The goal was simply to improve team collaboration efficiency or enhance personal comfort. All scripts were hand-coded line by line (which now seems like an old-fashioned way of programming). But the hardest part wasn’t the coding itself; it was whether and how to integrate with other services, and how to think outside the box for integration.

Previous Projects

1. Goal — When the public-facing email inbox receives a message, forward it to the Slack work channel.
   Technically, Google Apps Script does not have an event triggered when Gmail receives an email, so we use a different approach with a scheduled trigger running every minute (or longer): check unread emails ➡️ read content ➡️ strip HTML and forward to Slack ➡️ mark as read.
   If you only want to target specific emails (by sender or subject), set up a Label Filter in Gmail, then change the check from unread emails to unread emails with that Label to achieve this.
   ref: 「 Using Google Apps Script to Forward Gmail Messages to Slack 」

2. Goal — Automatically query GA traffic/Crash-free rate and send it to the Slack work channel.
   Google Apps Script already has built-in AnalyticsData / AdSense Libraries. You just need to import and set the parameters to use them directly, making integration almost painless.
   If the app wants to query crash issue details or the Top 10, you just need an extra step: Firebase to BigQuery, then import the BigQuery Library in Google Apps Script and run SQL queries to achieve this.
   ref: 「 Crashlytics + Google Analytics Auto Query App Crash-Free Users Rate 」、「 Crashlytics + Big Query Build More Real-Time Convenient Crash Tracking Tool 」

3. Goal — Automatically consolidate operational data into Google Sheet.
   Following the previous approach, a Web App was created so the entire operational data could be clearly displayed on the team’s TV wall; the technical issue at that time was that some data was internal, inaccessible from the external network. Fortunately, the solution was to switch to an internal scheduled task that sends data daily to the Google Apps Script Web App, which then processes and writes it back to Google Sheet.
   ref:「 Using Google Apps Script to Automate Daily Data Reports with RPA 」

4. Goal — Build a Simple App Packaging Platform Using Existing Resources
   The background was that the app packaging service moved to GitHub Actions, but non-engineering teams also needed app packaging, which was previously handled manually. A service was needed within the company team to connect to GitHub Actions for packaging.
   Using Google Apps Script Web App as the platform, access was restricted to organization accounts only. Users filled in packaging info on a form, which triggered GitHub Actions (via GitHub API) and sent packaging notifications to Slack.
   The packaged app was uploaded to Firebase App Distribution. However, Google Apps Script has no built-in library, but after some research, it can be done directly with googleapis, and it was smoothly integrated in the end.
   ref: “Using Google Apps Script Web App to Connect GitHub Actions and Build a Free, Easy Packaging Tool Platform”

There are also some smaller cases not listed here. In short, the point is “there are always more solutions than problems.” Actually writing the code is the easiest part; the real challenge is overcoming various obstacles to integrate everything together.

Technical Limitations

The premise of “there are more solutions than difficulties” is that it must be technically feasible and reasonable; in other words, “if the direction is wrong, effort is in vain.” We may not need to actually write code, but we must know when to “choose” to use Google Apps Script to develop small tools.

• User-Agent Cannot Be Customized: For security and abuse prevention reasons, Google Apps Script User-Agent cannot be specified by the user. (However, other header fields can be set.)
  Impact: Some rare APIs require data in the User-Agent, or target websites/APIs block the Google Apps Script User-Agent. Both cases are hard limits and cannot be bypassed.
  Workaround: If you really need to use it, you can proxy through a Cloudflare Worker.

• Maximum Execution Time 6 Minutes: Each run can last up to 6 minutes. For large or numerous tasks, it is recommended to split them into segments.
  Additionally, there is a total quota limit, such as Triggers running up to 90 minutes per day. (However, this seems to be a soft limit; many of my scripts exceed this limit without being blocked.)

• Single execution mainly uses synchronous blocking: You cannot dispatch multiple threads to run tasks concurrently within a single execution; if tasks are time-consuming or require extensive parallel processing, it is recommended to split them into multiple executions and use scheduled triggers.

• Cold Start: A common issue with Faas services is that when a task hasn’t been triggered for a long time, it goes to sleep, causing a longer wait time when triggered again.
  This problem, combined with the requirement for synchronous (blocking) execution, means that if deployed as a Webhook for other services to call, it can easily be judged as a failed request, leading to repeated requests, repeated receptions, and repeated executions.
  For example, Slack strictly requires the Webhook server to respond within 3 seconds, and this issue has often been encountered in past experience.

• Web App API will redirect: For security reasons, the Content service response will redirect to a one-time script.googleusercontent.com URL; HTTP clients need to support following redirects.
  Some webhook services will fail if they do not automatically follow 302 redirects (e.g., Jira Webhook).

• Web App HTML: The webpage header includes an anti-abuse notice. True RWD is not achievable (the page is actually an iframe inside Google’s framework). The URL is ugly and cannot be customized. Full-screen PWA pages are not possible.

• Service Limits: There are some usage limits for services, but under normal use, you usually won’t hit them. However, if you need high-frequency checks or real-time responses, it’s easy to reach those limits.

https://developers.google.com/apps-script/guides/services/quotas?hl=zh-tw

Advantages and Features

After understanding the limitations, let’s look at the advantages and features.

The biggest advantage is the seamless integration with Google’s native services. The Web App access can be set to the script owner, organization members, signed-in Google accounts, or anyone, without the need to handle complex OAuth flows yourself—just one click to set up, one click to complete, and one click to start running:

Built-in Services:
Can be used without referencing in GAS services.

• DocumentApp → Google Docs

• SpreadsheetApp → Google Sheets

• SlidesApp → Google Slides

• FormApp → Google Forms

• GmailApp → Gmail

• CalendarApp → Google Calendar

• DriveApp → Google Drive

• SitesApp → Google Sites

• Maps → Maps / Distance / Routes

• Translate → Translation

Advanced Services: Must be enabled in the GAS services to use.

• Sheets API

• Drive API

• Calendar API

• Gmail API

• Analytics API / Analytics Data API

• BigQuery API

• Adsense API

• YouTube Data API

• Tasks API

• Googleapis (Other/GCP)

Tools / System Services:

• UrlFetchApp → Calling External APIs

• PropertiesService → Key-Value Storage

• CacheService → Cache

• LockService → Concurrency Control Prevention

• Utilities → Date / Hash / Base64

• Logger → Log Output

• HtmlService → Build Web UI, support Ajax asynchronous content updates

• ContentService → Creating an API endpoint

• Trigger → Scheduled Automatic Execution

Basically, everything needed for development is already available. In practice, you just need to connect and combine these services to achieve process automation, for example:

• Automatically Query GA Traffic/Crash-free Rate and Send to Slack Work Channel:
  Use Analytics Data API to fetch data, PropertiesService to store Slack Bot Token, and UrlFetchApp to call Slack Send Message API.

• Automatically aggregate operational data into Google Sheet and data Dashboard Web:
  Trigger scheduled execution of functions, use LockService to ensure only I run it, fetch data with Analytics Data API, get external service data via UrlFetchApp, write to Google Sheet with SpreadsheetApp, output Web App interface using HtmlService, output JSON data with ContentService plus data caching via CacheService.

Differences from FAAS like Cloud Function / Lambda

Google Apps Script can be seen as a FAAS scripting tool centered around Google services. It has more limitations but is currently completely free and seamlessly integrates with Google services; other FAAS services usually require payment, though some offer free tiers, and integrating with Google services involves formal IAM or OAuth processes that are more complex and cumbersome.

Unsuitable Scenarios

• Not part of the Google ecosystem, such as wanting to connect with Microsoft Office or OneNote…

• Hybrid local and cloud setup is more suitable for n8n or AI Agent.

• Complex calculations or large data processing may not complete within the 6-minute maximum execution time per run.

• Large-scale web scraping or ticket-snatching programs are out of the question. Google Apps Script is easily blocked or stopped by Cloudflare’s anti-scraping measures.

Suitable Scenarios

For personal or team workflow integration, I have many scripts managing my daily routines. For example, I get daily notifications of zhgchg.li website traffic overview, GitHub Repo Issues, and even update the current stock prices in a Google Sheet. For teams, the app release process can integrate with Google Calendar to check events and trigger the corresponding CI/CD process (calling GitHub Actions), then send messages to the team Slack channel and forward app review failure emails to Slack.

The above is a human perspective review of my experiences developing Google Apps Script over the years. Next, I will share my recent experience using AI Agents to develop GAS from scratch — a personal desktop Dashboard Deck — along with practical examples.

Let AI Agent Handle Google Apps Script Integration and Development for You Directly

Recently, I started trying to develop Google Apps Script directly from scratch using AI, combined with the basic knowledge above (even without it, AI proficiency is very high); the completion and accuracy are almost 100%, marking the end of the era of “AI coding from zero.”

Practical — Turning Waste into Treasure with AI — Build Your Personal Desktop Dashboard Using Claude Design & Claude Code

Problem

I have an old iPhone 8 Plus (iOS 16.7) that I replaced and left unused in a drawer. I thought I could turn it into a desktop dashboard to display real-time information I want to see.

Infrastructure

To enable an AI Agent to help you develop Google Apps Script, we need to complete some basic infrastructure.

Even if you’re not developing with AI, it’s highly recommended to use Clasp when working on medium to large scripts. The Web Editor can sometimes crash or accidentally overwrite new code with old code when multiple tabs are open. Clasp makes writing and managing source code more convenient and secure.

Other use cases: Upload Google Apps Script projects to Git Repo for version control (excluding .clasprc.json and .clasp.json), add CI to automatically run Jest JS unit tests, use Clasp Token for CD to pull the latest code, and use .claspignore to exclude files that should not be uploaded to the Google Apps Script project.

1. Install clasp Google Apps Script CLI ( official local development toolkit)

• Node.js >= 20.0.0 ( If you haven’t installed the Node.js environment, please install it first )

• npm i @google/clasp -g

1. Run clasp login to sign in and generate an authorization token ( choose the Google Apps Script corresponding account )

2. Save clasprc (Clasp Token) to Keychain to allow AI Agent secure access

security add-generic-password \
  -U \
  -s "com.google.clasp" \
  -a "$USER" \
  -w "$(cat ~/.clasprc.json)"

If you want to copy the Clasp Token to put into CI/CD Secrets for running tasks, you can use cat ~/.clasprc.json \\| base64 \\| pbcopy (remember to add base64 encode). When using it, run echo "$CLASPRC" \\| base64 --decode > ~/.clasprc.json && chmod 600 ~/.clasprc.json.

1. Create Project Directory

You must create a project directory and then enter it.

1. Create a Google Apps Script Project in the directory (using clasp)

clasp create

Will directly use the folder name as the project name.

The current project is empty, containing only the appsscript.json configuration file.

My Design

If you want to save tokens, you can directly git clone my GAS Web App to reuse my design and the developed GAS code.

Designing Dashboard with Claude Design or Design Agent Skill

Method 1 — Claude Design
In the previous article “Jekyll Blog Custom Theme Design｜Quickly Create a Unique Style with Claude Design + Claude Code,” the same steps were introduced: adjust the design until satisfied, then export the Project and unzip it into the project’s ./Design directory.

Method 2 — Design Agent Skill
Use a third-party Design Skill to complete the design. My prompt is roughly as follows:

/huashu-design
Design a web dashboard that can be viewed in landscape mode on an iPhone 8 Plus, and save the design results in the ./Design directory
- It will be deployed later as a Google Apps Script Web App
- The top area fixedly displays the date, weekday, and a flipping clock
- The bottom tabs switch periodically and show a timed progress bar
- The bottom tabs include:
-- Weather conditions
-- Calendar: current events or upcoming events of the day, showing remaining events
-- Countdown/Count-up days

I use Model: Opus 4.7 (1M context) / Effort: Medium

⏺ I first grasped the context: iPhone 8 Plus landscape = 736×414 CSS px, the content data structure (weather / calendar / countdown) is clearly defined in CLAUDE.md.  
  You haven't specified the style yet, so as your "design direction consultant," I'll give you 3 distinctly different style options. Please choose one (or mix and match, e.g., "font from A + colors from C"), then I'll create the full hi-fi design.  
  ---  
  🅐 Option 1 · Massimo Vignelli Style Swiss Grid (Information Architecture)  
  ▎ Vignelli’s grid aesthetics for NYC subway — Helvetica + strict columns + red, black, white. The information itself is decoration, no illustrations, icons, or gradients.  
  - Fonts: Neue Haas Grotesk / Inter Tight (display) + IBM Plex Mono (clock/numbers)  
  - Colors: pure white background #FAFAFA · pure black ink #0A0A0A · single vermilion accent #E63946 (used for progress bar and current tab)  
  - Layout: 12-column baseline grid, all elements aligned; flip clock with black background, white large text + thin horizontal separators; tabs are square color blocks  
  - Keywords: rational / restrained / print-like / information density / timeless  
  - Suitable for: you want a dashboard that won’t go out of style, like a high-quality newspaper front page  
  ---  
  🅑 Option 2 · Dieter Rams × Braun Industrial Instruments (Minimalist Industrial)  
  ▎ Rams’ aesthetics for Braun ET66 calculator and audio systems — light beige-gray background + rounded hardware panels + single orange accent +  
  ▎ tactile physical buttons. Each section looks like an independent instrument panel.  
  - Fonts: Söhne / Inter (labels) + JetBrains Mono (clock styled as LCD seven-segment)  
  - Colors: warm beige-gray #E5E1DA · deep charcoal #2B2B2B · Braun orange #E85D2C accent · flip clock LCD yellow-green #A8B547 vintage LCD style  
  - Layout: each card has subtle inner shadow and 1px hairline border for a recessed physical instrument feel; tab switching looks like button press  
  - Keywords: industrial design / tactile / 1970s Braun / calm / engineer aesthetics  
  - Suitable for: you like hardware feel and want comfort for long viewing  
  ---  
  🅒 Option 3 · Teenage Engineering OP-1 / Terminal (Sporty Poetics)  
  ▎ TE’s OP-1 synth panel and vintage OLED terminal aesthetics — dark charcoal background + OLED teal glow + mono fonts + fine grid background. Flip clock is a large OLED  
  ▎ flip display, progress bar resembles sequencer step lights.  
  - Fonts: JetBrains Mono / IBM Plex Mono (all) + Berkeley Mono (display large text)  
  - Colors: background #0E0F0D · main text #E8E5DA off-white · OLED teal #9DEF8F accent · warning orange #FFB454  
  - Layout: very faint 8px dot grid background; flip clock large text occupies 1/3 width with subtle scanlines; tab progress bar uses LED stepping; weather uses ASCII-style icons  
  - Keywords: OLED / cyberdeck / analog synth / hacker chic / hacker culture  
  - Suitable for: you want it to feel like a “device” on your desk, not just a “webpage”  
  ---  
  Please tell me which one you choose (or which elements to mix), then I’ll proceed with the full hi-fi design into ./Design/. You can also say “none fit, show me more,” and I’ll suggest another style.

You can choose your preferred style or tell the AI the style you want, for example, “paper texture style, off-white rice paper + red seal stamp aesthetics.”

Waiting for AI to complete the design… AI might use Playwright to take a screenshot for verification after finishing. If you want to save tokens and verify the result yourself, you can add that instruction to the prompt.

Click the .html file directly in the directory to view the design result:

Adjust until satisfied before moving on to the next development step.

Create the Countdown Data Source Google Sheet:

Finally, create a countdown data source Google Sheet. In the future, just add data to this Sheet when needed.

title,date,repeat
Birthday,1994-07-18,yes
Japan Trip,2026-12-12,

repeat=yes: Annual recurring event

Note the Sheet Id: the red-highlighted part in the URL above / Gid: 0 (the first Sheet).

Register for the Central Weather Bureau API Key:

• Register/Login: https://opendata.cwa.gov.tw/userLogin

• Obtain Authorization Code

Developing and Implementing the Dashboard with Claude Code

First, Init Claude Code Memory Markdown:

/init
⏺ Created CLAUDE.md, focusing on the current state of this repo:
  - Project stage: Early GAS project, currently only has appsscript.json / .clasp.json / Design/Paper Dashboard.html, no .gs code yet.
  - File purpose: manifest settings (V8, America/New_York, Stackdriver), clasp-bound scriptId, and a React+CDN visual prototype (without google.script.run).
  - Common commands: mainly clasp (push / pull / open / logs / deploy), no lint or test runner yet.
  - Notes before push: skipSubdirectories: false will upload Design/Paper Dashboard.html; manifest lacks oauthScopes declaration; timezone setting location.
  - Scope: Strictly use only this repo’s content, no reference to other projects (following your memory rules)

Execute the plan and schedule development tasks:

/plan
Implement the Dashboard web page features and design from ./Design, deploy to Google Apps Script Web App.
- Use the Central Weather Bureau API from the Ministry of Transportation and Communications for weather https://opendata.cwa.gov.tw/api/v1/rest/datastore/F-C0032-00
- Display the weather for Taipei City, show all available fields
- During development, you can generate a Token yourself and deploy the Web App to trigger necessary methods and test; be sure to remove this open access after development is complete
- Deploy the Web App so everyone can access it, but protect it with a custom Token; first-time users can enter the Token or pass it via URL
- Default calendar to read: primary
- Countdown days read from the Google Sheet I gave you, with title, date, repeat; if repeat is yes, it means an annual recurring countdown, also show how many years and months have passed (rounded down)
- API Key, Google Sheet ID/GID, etc. all stored in PropertiesService settings
- Use clasp push & deploy for me, clasprc login token stored in keychain security add-generic-password \ -U \ -s "com.google.clasp" \ -a "$USER"
- If manual steps are needed from me, please tell me each step in Traditional Chinese
- "oauthScopes": [ "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/calendar", "https://www.googleapis.com/auth/spreadsheets", "https://www.googleapis.com/auth/script.scriptapp" ]
- Double-check if the google.script.run integration call format is correct
- The live GAS Web App HTML is rendered inside an iframe wrapper.
- Files like ./Design that do not need to be uploaded to Google Apps Script should be added to .claspignore

• Web Apps have four access levels: anyone, only yourself, only signed-in users, and signed-in users within the organization.

• The design in the above example is simple: everyone can access it but must enter the correct random Token to view the data. The weather can be changed to your own location, and multiple locations are also supported.

• The calendar defaults to handling only the primary calendar. If you have other calendars, you can get the Calendar ID from Calendar Settings and Sharing -> Integrate calendar -> Calendar ID.

• Added a lazy development section here, directly asking AI to deploy and test the Web App entry so it can develop, test, and fix simultaneously, then notify me when it’s done

If there are any issues with the plan, ask the AI; if not, you can start implementation!

Making coffee while waiting for AI development…

AI Agent Question:

  Action needed from you (one-time):

  1. Open the editor: https://script.google.com/d/1KEWgIql-gqTNI_Tv_w2-5t7VE_R0eBtjAtd3iqLqabYLOnzJZ8Ga8N4s/edit
  2. Top-right "Deploy" → "Manage deployments"
  3. Delete both existing deployments (the bare @HEAD and dev v1 — the pencil-icon edit doesn't let you change access type)
  4. Then "New deployment" → Type: Web app → Execute as: Me (your account) → Who has access: Anyone → Deploy
  5. Grant OAuth on the consent screen (calendar.readonly, spreadsheets.readonly, external_request)
  6. Copy the new web app URL (looks like https://script.google.com/macros/s/AKfycb.../exec) and paste it here

  Also paste:
  - CWA API Key (Central Weather Bureau Open Data Authorization)
  - Countdown Sheet ID (the long part in the Sheet URL between /d/ and /edit)
  - Sheet GID (the number after gid= in the URL — defaults to 0 for the first tab)

  Once I have the URL + secrets, I'll seed Properties via the dev endpoint, mint the access token, verify each handler, and wire you in.

(1.) The first run still requires our authorization; afterward, the AI Agent can run on its own. Go to the Script Editor URL:

Randomly select a file with functions, then choose a function to debug:

• Authorization is only required during the first run or when new permissions are added

If AI keeps saying there is a permission issue, but no authorization window appears during execution, you can first go to the project settings and check “Show ‘appsscript.json’ manifest file in the editor.” Then return to the editor, edit appsscript.json, change the oauthScopes content, run once, and then change it back and run again. This should trigger the authorization process.

Only 1. needs to be handled by yourself; others can be done by AI:

1. OK, please deploy it for me directly
  CWA API Key: CWA-XXXX-XXXX-XXXX-XXXX-XXXX
  Countdown Sheet ID: XXXX / GID: 0

Assist AI in Setting Up Google Apps Script..

⏺ Scope is updated and pushed but the deployer's OAuth grant needs to be re-authorized for the new scope. The web app runs under your account — newly added
  scopes require you to re-grant.

  Please do this once:

  1. Open the editor: https://script.google.com/d/1KEWgIql-gqTNI_Tv_w2-5t7VE_R0eBtjAtd3iqLqabYLOnzJZ8Ga8N4s/edit
  2. From the function dropdown at the top, pick setupConfig (or any function)
  3. Click Run — Google will pop an "Authorization required" dialog
  4. Allow → grants the upgraded auth/spreadsheets scope
  5. Tell me when done and I'll re-test the countdown handler

Although we have agreed with the AI, it may still get stuck in some places and need manual help, such as the message above; we just simply follow its steps to click and run the function once, then tell it OK, just like helping out. (If the method it mentioned doesn’t appear, just refresh the page)

AI Development Complete, Acceptance!

If any issues are found, you can ask the AI to fix them again.

Build Your Personal Desktop Dashboard with AI — Results

Desktop Version

iPhone Mobile Version

GAS Web App cannot achieve full-screen PWA with hidden address bar. For a 100% experience, please refer to the advanced content.

Final Code

Follow-up Tasks

• [required] Tell the AI: Remove all development-stage interfaces/endpoints after development is complete

• [optional] Google Apps Script Project -> Project Settings -> Script Properties -> ACCESS_TOKEN -> regenerate a random string, and replace the ?token= in the URL with this string
  On macOS, you can generate a random string with this command: openssl rand -hex 32

• [optional] Regenerate the Central Weather Bureau API Key and enter it into Google Apps Script Project -> Project Settings -> Script Properties -> CWA_API_KEY

⚠️ According to Claude Code warning: All tokens exposed in the conversation content may be leaked and should be considered compromised. For development convenience, tokens are entered directly first. After verification, they need to be regenerated and replaced.

If you are familiar with GAS, you can also set up the script properties yourself at the beginning and then instruct the AI to use them directly.

Extension

If this article sparks your creativity, consider integrating other data sources to display, such as connecting to Yahoo Finance to get real-time stock prices of your watched stocks, or linking AnalyticsData / AdSense to monitor your website traffic and ad performance.

Advanced

Because GAS Web App cannot achieve true RWD or full-screen PWA (hiding the address bar), I use the GAS Web App as an API service that only returns JSON data, and implement the frontend separately with GitHub Pages, deploying it as an official website; this way, a complete user experience can be achieved.

iOS Full-Screen PWA Web Setup -> Open URL in Safari -> Share -> Add to Home Screen

This approach is a bit more complex. You can tell the AI during the /plan stage:

- GAS Web App only serves as the backend, outputting JSON for frontend use
- Frontend uses GitHub Pages for design, presentation, and deployment, handling all development and deployment tasks
- A custom random string token protects communication between frontend and backend

Summary

This concludes the introduction to using AI Agents directly for Google Apps Script development. Recently, I have also been using AI to refactor medium to large GAS projects I developed before, with great results. I can even ask it to add function unit tests locally (using Jest, MOCK Google APIs) to improve stability (running on CI/CD, combined with clasp pull & backup GAS Project); the AI’s mastery and accuracy in producing GAS code are nearly 100%.

If it were 2021…

If it were the pre-AI era, manually handling everything from design, slicing, programming logic development to deployment would take me about 30 hours; now with AI, it can be done within 3 hours.

Basically, I probably won’t develop GAS from scratch anymore, nor write AI code from zero. Instead, I’ll have AI build the complete product for me from the start (code? IDGAF).

Case (2) — Personal Stock Portfolio Management

Another recent AI case I tried was directly handling Google Apps Script. I asked it to convert my Google Sheet stock portfolio into a visual Web App, integrating Yahoo Finance to fetch the latest stock prices and display them in a table. Below the table, there’s a quick input area for buy/sell records, which then syncs back to the Google Sheet.

Further Reading

TL;DR These are all previously hand-coded GAS services and tools

• Automate Daily Data Reports with Google Apps Script RPA

• Google Apps Script x Google APIs Quick Integration Method

• Using Google Apps Script Web App to Connect with GitHub Actions for Building a Free and Easy Packaging Tool Platform

• Simple 3 Steps — Create a Free GA4 Automated Data Notification Bot

• Using Google Apps Script to Forward Gmail Emails to Slack

• Slack Builds a Fully Automated WFH Employee Health Status Reporting System

• Crashlytics + Big Query: Building a More Real-Time and Convenient Crash Tracking Tool

• Crashlytics + Google Analytics Automatic Query for App Crash-Free Users Rate

• Use Google Apps Script in 3 Steps to Create a Free GitHub Repo Star Notifier

• 10-Minute Quick Migration from Line Notify to Telegram Bot Notifications

Create Your Own Jekyll Theme Blog Using Claude Design + Claude Code

https://zhgchg.li/ 2.0!

https://zhgchg.li/

Spent a weekend afternoon designing my preferred Blog style and features with Claude Design, then implemented and applied them back to my Jekyll Blog using Claude Code, perfectly replacing the 5-year-old Chirpy Theme interface with my ideal personal Blog style.

Technology

• Blog Structure: Jekyll Static Website

• Original Article File: Markdown file

• Server/Web Hosting: GitHub Pages (free and reliable)

• Engineering: Claude Code Max ($100 USD, 5-hour quota finished before fully used)

• Design: Claude Design (The blog pages are few, so 2 hours of usage is enough)

Cost

• Claude Code Max $100 USD

• Server/Web Hosting: $0 USD

• Jekyll Theme: $0 USD

• Time: One weekend afternoon

Implementation Steps

1. Create a clean Jekyll Blog locally

jekyll new blog

2. Collect Theme Page Examples and Upload to Claude Design

[2026/05/06 Update] 2–1 Design Agent Skill Using Third-Party Design Skill to Complete Design

For details, please refer to this article: “Stop Starting from Scratch with AI Programming: Let AI Agents Handle Google Apps Script Integration and Development Directly”

2–2 Claude Design

I directly go to the current Blog and right-click “Save as” on each page, such as Home, Post, Page, PostList, Archives, Tags…

Create a Theme directory and put all pages and additional files inside:

Go to Claude Design to create a project:

https://claude.ai/design

Upload the Theme page example to Claude Design and select “Attach codebase”:

Select the Theme directory you just organized:

After making your selection, enter a prompt to ask Claude Design to create the page for you:

Redesign my Blog, communicate with me in Traditional Chinese.

3. Redesign Using Claude Design

After submitting the conversation, Claude Design will ask you questions about the design you want:

• Want to see several visual style variants? AI will generate multiple options for you to choose from

• Which tweaks would you like to adjust in real time?
  What toggle features do you want for the debug widget in the bottom right corner?

• Fill in the rest according to your own preferences.

4. Claude Design Cooking…

It takes about 3–5 minutes for the AI to build a complete Design System (.css) and display the results using React.js/HTML.

The blog redesign is completed and saved in Blog Redesign.html.

Design System

Fonts: Noto Serif TC (Song typeface) + Inter + JetBrains Mono
Color scheme: Warm paper off-white + Red clay primary color (oklch warm tone)
Three category axes: Technology / Travel / Sharing, all using real Chinese sample content
Two directions, total 7 artboards (double-click to preview full screen)

Direction A · Magazine Style

Homepage — Header title + Featured story + Three-column secondary articles + Numbered list + Newsletter
Article page — Full single post with table of contents, drop cap, introduction, code blocks, comments, related posts
Category page — 2×2 large image index
Tag page — Visual bar statistics + tag cloud
Archive page — Timeline by year + month
About page — Personal introduction + Now section + Subscription
Direction B · Modern Publication (Substack Style) 7. Homepage — Large hero image + card grid + sidebar subscription wall

Tweaks panel (open at bottom right) allows instant switching of:

Title font (Noto Serif / Source Han Serif)
Wide layout / Standard layout
Primary color and paper color (includes 4 preset palettes: Red clay, Deep blue, Dark green, Wine red)

5. Adjusting Claude Design Results

• You can click the Tweak button at the bottom right to quickly adjust parameters and see the results.

• You can click the top right corner of the page to enlarge and view the full webpage; if there are interactive features, you can also operate the mockup directly.

• If clicks are unresponsive, scrolling is disabled, the page displays incompletely, or content is cut off, you can ask the AI to make adjustments.

You can continue the conversation with the AI to add the features you want or adjust existing ones. For example, if I want to add a “buy me a coffee” donation link and comments at the end of the article, I can tell it:

Result:

Keep interacting with AI to design the features and pages exactly as you want.

6. Claude Design Completion

After finalizing the design, click the “Share” button at the top right → “Download project as .zip” to download the original design files:

After downloading and extracting, place the folder into the Jekyll Blog directory:

7. Ask Claude Code to Implement the Claude Design Mockup

Remember to run /init once in the Jekyll Blog directory to let the AI recognize this is a Jekyll Blog structure.

Apply the theme design from ./MyBlogTheme to my blog

8. Claude Code baking…

• The initial build took about 20K Tokens (Opus 4.7 / effort: medium)

Results:

Run bundle exec jekyll serve and open http://127.0.0.1:4000/ to see the result:

Continue to have the AI optimize and fix issues, but the basic completion level is already very high!

Implementation Tips

• You can tell the AI: Your Blog will be deployed to GitHub Pages or another platform, because each platform may have different features. For example, GitHub Pages only allows certain Jekyll Plugins, and plugins not on the allowed list won’t work after deployment.

• You can tell the AI: Prioritize using native Jekyll features, Jekyll Plugins, and free open-source projects to implement functionality.

• You can tell the AI: Website design must prioritize SEO structure and RWD user experience.

• You can tell the AI: Design a new Theme to replace the existing one.

• The CI/CD YAML for deploying to GitHub Pages can also be written by AI, and it will guide you through the steps as well.

• If you want to adjust the new page design, it is recommended to go back to Claude Design to modify the design draft. After adjusting, download it again and place it back in the directory; it is not recommended to ask Claude Code to do visual design directly, as it is not very good at aesthetics.

Plugins or Features I Used

Jekyll Plugins:

• jekyll 4.3 + kramdown (GFM) + kramdown-parser-gfm

• rouge — code highlight

• jekyll-feed — Atom feed (/feed.xml)

• jekyll-sitemap — /sitemap.xml

• jekyll-paginate-v2 — Article Pagination Feature

• jekyll-archives — Archive Pages

• jekyll-seo-tag — SEO Meta Tag / OG / Twitter Card meta

• jekyll-redirect-from — Short URL redirect

CSS / Frontend Resources:

• GLightbox v3 (CDN, MIT) — Image click to enlarge lightbox

• SCSS: assets/css/main.scss

• Font Awesome icon svg

JavaScript Features:

• Drawer Menu (topbar menu / overlay / ESC to close)

• LQIP hydrator & Lazy Load — Article Image Placeholder & Lazy Loading

• Reading progress bar

• Client-side TOC

• Search: /search.json build-time + pure JS substring filter (no lunr)

Third-Party Services:

• giscus — Comments (GitHub Discussions)

Background

Since 2018, I have been writing articles on Medium to document programming and life. Later, I developed a small tool ZMediumToMarkdown that can download Medium articles and convert them into Markdown files for backup. I also built an independent Blog website using Jekyll + Chirpy theme, deployed on the free GitHub Pages.

Jekyll is a convenient static site generator that converts Markdown and templates into HTML, which can then be uploaded to a hosting service to publish content online.

• I also created my own Linktree using Jekyll: https://link.zhgchg.li

• jekyll new blog quickly creates a default Blog project

The default Jekyll Blog project style is very basic:

However, finding a satisfactory Jekyll Blog Theme is not easy. Some have beautiful homepages, some offer great article page experiences, and others have good list pages. Even paid themes rarely meet all expectations. Sometimes, after installing and setting everything up, you realize a feature or page is missing, forcing you to abandon it and start over, which is very frustrating.

After several rounds of searching back and forth, I finally found a theme with a decent layout, responsive design, and complete blog features — Theme Chirpy :

Live Demo

I have been using it for 5 years. There were times when I got tired of it and wanted to switch; but after going through a cycle of searching, I always ended up coming back to Theme Chirpy, as mentioned before, I couldn’t find a better-looking and more practical theme.

Until Claude Design + Claude Code appeared, I finally took the plunge and asked AI to design the Blog style I wanted and implement the functional pages.

Complete Record of Walking in Sapporo City, Soaking in Jozankei, and Illuminations at Furano Fairy Hill and Biei Blue Pond

I have been working at my new job for almost half a year and just finished a project. Since I have never been to snowy Japan, I decided to take a trip to Hokkaido in mid-March.

Preparation Before Departure

Plan

• Day 1: After arriving in Sapporo, head straight to Jozankei Onsen for an overnight stay

• Day 2: Return to Sapporo City for sightseeing

• Day 3: Otaru, Otaru Aquarium

• Day 4: KKday Hokkaido Illumination Tour ｜ Furano Fairy Platform & Biei Blue Pond & Shirahige Falls One-Day Tour ｜ Departure from Sapporo

• Day 5: Shopping and Hokkaido Shrine

• Day 6: Head to the airport for departure

Line

Flight — China Airlines

• 🛫 03/15 Departure CI130: TPE Taoyuan International Airport T2 08:35 (actual delay 3 minutes) -> CTS New Chitose Airport, Hokkaido 13:15 (actual delay 7 minutes)

• 🛬 03/20 Return Flight CI131: CTS New Chitose Airport 14:20 (actual delay 8 minutes) -> TPE Taoyuan International Airport 18:15 (actual arrival 3 minutes early)

Price: NT $24,356 per person

*Because the snow season is not over yet, prices are still high. Returning on Friday is better since weekends are even more expensive…

Sapporo Station <-> Jozankei Round-Trip Bus Ticket

https://jozankei.jp/tw/news/newaccess/

There are many JR trains from New Chitose Airport to Sapporo Station, and since the flight arrival time is uncertain, I didn’t buy tickets in advance. To get to Jozankei Onsen, you can only take a bus. According to the latest transportation information as of December 2025, there are three routes to choose from:

1. [Reservation required][About 60 minutes] Sapporo Station → Take the Kappa Liner bus → Jozankei Onsen.
   Click here to view the timetable

2. [No reservation needed][About 70 minutes] Sapporo Station → Makomanai Station → Bus → Jozankei Onsen.

3. [No reservation required][About 120 minutes] New Chitose Airport → Airport Bus (Hokuto Kotsu) → Makomanai Station → Jozankei Onsen.

Route (1) — かっぱライナー号 / Kappa Liner is the most direct and convenient option, I checked the schedule and found that after the plane lands, clearing customs, and taking the JR to Sapporo Station, the 4:00 PM departure (winter season only) is more than enough time. So I booked it online in advance (foreigners can book too!).

Outbound: Sapporo Station -> Jozankei:

https://www.jotetsu.co.jp/bus/kappa_liner/index.html

• Note that the trips marked in red only operate in autumn and winter, and the departures from Sapporo Station at 16:00 and 17:00 only go as far as the Jozankei Bus Garage.

Return Trip Jozankei -> Sapporo Station:

https://www.jotetsu.co.jp/bus/kappa_liner/index.html

• For the return trip, I planned to check out at 11:00 and stroll around the hot spring street before leaving, so I booked the 13:15 departure bus (boarding at Shiraito Falls at 13:31).

Reservation Method:

1. Register as a member on the official reservation website

• Email / Taiwan phone number OK.

• Be sure to remember your account and password, as the e-ticket is activated online directly for the driver to verify.

1. Choose to purchase かっぱライナー号 / Kappa Liner round-trip or one-way tickets

1. Select Number of People

1. Select the departure date and flight/train (times are shown as departure from Sapporo)

1. Choose the boarding and alighting locations for the outbound trip

Boarding and alighting stations can be referred to in the chart below:

https://www.jotetsu.co.jp/bus/kappa_liner/index.html

Our hotel is closer to (2) Shiraito Falls/白糸の滝/Shiraitonotaki, so we booked to get off at this stop.

Later, I found out you can continue riding the loop and get off at (7) Jozankei Onsen Higashi 2 Chome / 定山渓温泉東2丁目 stop, which is right at the hotel entrance.

1. Select the return date and departure time (times are based on the departure station), as well as the boarding and alighting locations

2. Complete payment online with credit card

Price: ¥2,920 JPY/adult.

You will receive an email notification once your reservation is confirmed. No need to exchange tickets in person; simply activate them online at the ticket website and show it to the driver.

eSIM

Also purchased the 5G unlimited eSIM on KKday. This time in Hokkaido, the signal was only lost once in the remote mountains of Biei; otherwise, it worked fine. This time, I specifically chose a plan that supports ChatGPT for easy information lookup.

• KKday Purchase: Japan eSIM｜Docomo / KDDI / SoftBank / Rakuten｜ Supports ChatGPT and Gemini

• The eSIM must be activated while connected to the internet, preferably before boarding the plane at the airport in Taiwan.

Price: NT $343/6 days, unlimited data (subject to fair usage policy)

Visit Japan

Please refer to the previous article and complete the registration in advance. Now, the immigration inspection and customs inspection use the same QR Code.

Stay

03/15–16 (1 night) — Jozankei Yurakusoan ゆらく草庵 Japanese Onsen Hotel

3 Chome-228–1 Jozankeionsenhigashi, Minami Ward, Sapporo, Hokkaido 061–2301 Japan

Located at the entrance of Jozankei Onsen Street.

Price: ¥52,150 JPY — 1 night double room / includes hearty Japanese breakfast / private hot spring bath / non-smoking (Hollywood Twin Room with Tatami — Non-Smoking)

03/16–20 (4 nights) — Keio Prelia Hotel Sapporo / 京王プレリアホテル札幌 / Sapporo Keio Prelia Hotel

4 Chome-11–1 Kita 8 Jonishi, Kita Ward, Sapporo, Hokkaido 060–0808 Japan

Located about a 5-minute walk from the back exit of Sapporo Station.

Price: ¥58,389 JPY — 4 nights in a comfortable queen room/non-smoking.

Fun

KKday One-Day Tour: Hokkaido Illumination Trip ｜ Furano Fairy Hill & Biei Blue Pond & Shirahige Falls One-Day Tour ｜ Departure from Sapporo

Hokkaido Illumination Tour ｜ Furano Fairy Platform & Biei Blue Pond & Shirahige Falls One-Day Tour ｜ Departure from Sapporo

• [Relaxed 11:50 Departure Plan B] March & April 2026 \| Daytime Furano Fairy Hill & Christmas Tree & Shirahige Falls & Nighttime Blue Pond Illumination (No Shikisai-no-oka)

Price: NT $1,807 TWD per person.

KKday — 【 Official Sale】Otaru Aquarium Admission Ticket, Hokkaido (Instant Use/Valid Within 30 Days of Purchase)

【Official Sale】Hokkaido Otaru Aquarium Ticket (Instant Use / Valid for 30 Days After Purchase)

• Features include outdoor port enclosures, many performances, and a penguin walking tour during winter.

Ready! Set! Go!

Seat selection and online check-in can be completed three days before departure to speed up the process.

Day 1 (03/15) — Arrival in Sapporo, Hokkaido, Jozankei Onsen Hotel

05:00 Airport Transfer Departure

05:35 Airport Transfer Arrive at TPE Taoyuan International Airport Terminal 2 (T2)

Assigned to the far corners, the counter opens only at 06:10.

Activate the Japan eSIM during your free time.

06:40 Completed Check-in + Baggage Drop + Immigration Security Check

Check-in and baggage drop likely took little time because we arrived early. There were many people at immigration, but the process moved quickly. We cleared immigration around 06:40.

Enjoying a leisurely breakfast Zzzzz.

07:30 Waiting at the gate — D6 Boarding Gate

There is still some time before boarding, so first go to D1 to use a free massage chair (tokens can be requested from nearby shops).

07:50 Preparing to Board

08:38 Plane Departure TPE -> CTS

The flight was on a newer China Airlines aircraft, the Airbus A330–300, which has a spacious cabin and well-equipped in-flight entertainment system.

The food was just… so-so.

Flight time: about 3 hours 50 minutes, snacks will also be provided.

13:22 Plane lands TPE -> CTS

14:10 Completed immigration and baggage claim

Immigration was quite fast, but the luggage took a long time to arrive. Not sure if it was because there were too many people (all seats were sold out).

Follow the signs for “Domestic Flights, JR Line” all the way from the airport.

After reaching the other building’s lobby, go down to B1F to find the JR station. (If using the escalator, you need to take a little detour.)

Timetable

14:29 Take the Rapid Service from New Chitose Airport Station to Sapporo Station

https://www.jrhokkaido.co.jp/global/chinese/travel/airport.html

• Sapporo <-> New Chitose Airport takes about 33 - 41 minutes; IC cards like Kitaca, Suica, PASMO can be used, no need to queue at ticket machines, with 163 trips per day, very frequent.

• 5 Non-reserved Cars, 1 Reserved Car

You can enter the station directly with a Suica card, but I wanted to break some bills, so I still bought a ticket with coins.

15:06 Arrive at Sapporo Station

• Used the restroom and bought some food, then continued walking to bus stop 27.

15:15 Head to Sapporo Station Bus Stop No. 27 (Kappa Line Boarding Point)

15:25 Arrive at Sapporo Station Bus Stop No.27 (Kappa Line Boarding Point) Waiting for the bus

Exit Sapporo Station Front Exit, turn left, then turn right at the next intersection. You will see it, with a red building behind it.

• Japanese service is reliable; here, staff will also confirm that you are going to Jozankei and have a reservation.

16:00 Departure to Jozankei Onsen

• Show the mobile login reservation ticket activation to the staff, and you can board directly.

• Since this is a sightseeing bus, you can hand your suitcase directly to the staff to store it in the luggage compartment.

• The drive takes about 50 minutes. By mid-March, there is little snow in the city, but some snow remains in the outskirts.

16:50 Arrive at Jozankei Onsen (2) Shiraito Falls / 白糸の滝 Stop

• The Kappa Line bus design features the mascot of Jozankei Onsen — the kappa.

• Show the electronic ticket to the driver when getting off and inform them that you need to collect your luggage

• Get off the bus and walk straight across the street to reach the hot spring hotel where we will stay today!

17:00 Arrive at Jozankei Yurakusoan ゆらく草庵 Japanese Onsen Hotel

Very traditional Japanese style, the entire hotel is made of wood. Upon entering the lobby, there is tatami flooring where you need to change shoes and put them in the shoe cabinet.

• 房間很大有獨立的廁所、私人衛浴/湯屋、客廳跟床；厲害的是雖然是傳統木造榻榻米但是整體維護的非常好， 沒有任何髒髒舊舊或是霉味的感覺 。
• 也有公共的私人湯屋可以使用 (有好幾間，沒人就可以進去)

18:00 Head out for dinner

The hotel offers half board, but we booked a plan with only breakfast; we went out to find food for other meals.

18:10 Kita no Kuni｜Jozankei Manseikaku Hotel Milione 3rd Floor

The hot spring street mostly offers lodging with meals, so there are few restaurants outside; finally, we walked to the izakaya on the 3rd floor of another hotel, 万世閣, for dinner.

• First Drink: Draft — Sapporo Draft Beer

• Ate pork cutlet rice and the specialty fried crucian carp (very delicious).

19:30 Return to the hotel for hot spring bath and rest

• Fortunately, there were many convenience stores along the way, so I stopped by FamilyMart to buy a late-night snack.

Although it stopped snowing, it still gets very cold after sunset. After a long day of traveling, I returned to the hotel early to soak in the hot spring and rest.

Day 2 (03/16 Mon) — Jozankei Onsen Street, Sapporo City Attractions

09:00 Breakfast

I happened to get a window seat, and the view outside was very beautiful.

Breakfast was very hearty: mainly rice/vegetable rice, miso soup, (1) steamed pork with vegetables in the center, (2) cold salmon — can be heated using the alcohol lamp and aluminum foil in the center, (3) tamagoyaki.

11:00 Checkout, Store Luggage, Walk Around Jozankei Onsen Street Nearby

There was still some time before boarding the return bus at 13:31, so I took a walk around the entire Jozankei Onsen area.

11:10 Jozankei Shrine

The entire shrine was frozen under heavy snow and ice.

11:30 Kappa Family’s Wishing Hand Bath

Wash your hands briefly.

The slope beside leads down to the hot spring park.

11:40 Jozankei Gensen Park

The park has a public footbath and a hot spring outlet where you can boil eggs.

If you want to try cooking onsen eggs, you can cross the bridge to the opposite side at ㈱Jozankei Bussankan Central Store to buy onsen eggs, cook them, and then bring them back to the shop to eat.

12:00 Passing by ふる川果日 J.glacée

Continuing uphill, I passed a bakery that had freshly baked apple croissants. I bought one to try, and it tasted good.

12:15 Passing by Iwato Kannon Hall

After passing here, go forward and then down to return to the starting hotel.

You can imagine how heavy the snowfall was before—the suspension bridge over the stream was completely frozen with snow and ice!

12:30 Walk back to the hotel

With some time left, we continued to visit the nearby Shiraito Falls.

I had to take a detour downhill; unfortunately, it was also closed due to being frozen by snow and ice.

13:10 Return to the hotel to pick up luggage

13:15 Arrive at (2) Shiraito Falls Bus Stop (opposite side from arrival)

Our bus departs from the starting station at 13:15 and is expected to arrive at Shiraito Falls station at 13:31. The waiting time is boring, so we stepped on the snow.

13:40 Board the bus back to Sapporo Station

• Show the electronic ticket to the driver once when boarding and once when alighting.

14:50 Return to Sapporo, check in at Keio Prelia Hotel Sapporo : 京王プレリアホテル札幌 : 札幌京王普雷利亞飯店

• 飯店很新、設備齊全，房間算大。
• 地點在後站比較不熱鬧，要走一小段、札幌站也沒藥妝店； 相較之下大通站周邊比較熱鬧。

Around 15:20, got ready and set off again. Didn’t have lunch, planning to have dinner near Odori Park earlier.

15:30 Yodobashi

On the way from the hotel to the JR/subway station, there is a Yodobashi (with a McDonald’s nearby). I went to check out the capsule toy machines.

16:10 Arrive at Susukino Station

Take the train to Susukino Station to enjoy the famous “lamb” barbecue in Sapporo.

16:15 Genghis Khan Daruma Main Store Start Eating

• Ordered two signature dishes, one regular meat, white rice, and draft beer (large size… a bit too large).

• The meat was very delicious, with no gamey taste at all, and the texture was very tender.

• The cost for this amount was about 700 TWD per person.

The restaurant is small, and there are other branches nearby. By the time we finished eating close to 5 PM, there were already many people lining up outside.

17:00 Susukino Station Intersection

After eating, we slowly walked back to Odori Station, intending to visit the Sapporo TV Tower. On the way, we passed by Sapporo’s most famous intersection.

17:15 Passing by Tanukikoji for some gacha and Don Quijote shopping

There is a whole building MEGA Don Quijote here.

17:41 Sapporo TV Tower

18:30 Sapporo TV Tower Night View

Stayed at Sapporo Tower until about 18:30 and came down after enjoying the night view.

You can also collect stamps while gathering postcards.

18:40 PARCO Sapporo Shopping

Right after exiting the TV Tower, the next intersection is Parco Sapporo store. Let’s go shopping.

20:30 Buy late-night snacks at the convenience store and return to the hotel to rest

Dinner was early, so I had to eat more for a late-night snack; I bought convenience store instant noodles, skewers, fried chicken, and strawberry fruit wine (delicious), plus Hokkaido The Sapporo Bar collaboration whiskey chocolate ice cream (it really has alcohol flavor and tastes quite good).

Day 3 (03/17 Tue) — Otaru, Otaru Aquarium

09:30 Leave the house

Bought a McDonald’s breakfast to eat in the car.

10:00 Board at Sapporo Station to Otaru Station

The train was a local train, very crowded, so I had to stand, there was no way to eat on the train.

10:42 Arrive at Otaru Station

You can tell many people come to Otaru by looking at the crowd.

10:45 Otaru Station

Exit Otaru Station from the front, cross the street, and the bus stop is on the right. Wait at platform 3 for the 10 Otaru Aquarium Line:

Image source: Google Map - K T (torute)

• 10 Otaru Aquarium Line: It is almost direct and takes about 20 minutes to reach Otaru Aquarium.

• 11 Shukutsu Line: Not direct, but it goes there; takes about 30 minutes.

11:10 Arrive at Otaru Aquarium

Simply show the QR code of the online purchased 【Official Sale】Hokkaido Otaru Aquarium Admission Ticket (Instant Use/Valid Within 30 Days After Purchase) at the counter to enter directly.

Otaru Aquarium Homemade Map

• The Ferris wheel is closed in winter. It is outside the aquarium area and requires a separate ticket.

• Although Otaru Aquarium is small, it has a rich variety of species and is well maintained; there are many shows, making the overall experience quite enjoyable.

• The red line marks the penguin walking route.

Opening hours may vary by season. Please refer to the official website.

Turn right after entering and walk down — Marine Mammal Park

There is only an escalator going uphill here; the downhill is quite shaky.

All outdoor performances are here:

• Seal Activity: At 11:20 when we arrived, a show was in progress

• Sea Lion Show (Giant Sea Lion): 11:40

• Penguin Picnic: 12:00

• Penguin activity: Not seen

• Walrus feeding explanation: Not seen

11:40 Sea Lion Show

Arrived early and stood in the front row. The sea lions are really huge!

Seals

Next to the show is the seal pool, where each seal looks very relaxed.

You can buy fish to feed the seals and sea lions for interaction. There is a limited quantity, and some pools do not allow feeding, so please check the signs.

12:00 Penguin Walk

The complete route is shown by the red line in the above image, ending at the penguin pool for a splash.

After watching the sea lions, I went to the penguin walking route. There is a white line on the floor; stand outside the line and wait for the penguins to pass by. I stood at the corner here (where the person is in the photo above).

They are little penguins, somewhat like the ones in Nankan.

Finally, we will walk to the penguin pond to splash some water:

Also go see other indoor animals: (seals, walruses)

After watching, head towards the dolphinarium:

Outside the dolphinarium, there is also a small penguin pool:

12:40 Sea Lion + Dolphin Show

After the visit, return to the main building to explore the marine life in the city:

The species are also quite diverse.

Japan’s Oldest Asian Small-Clawed Otter:

This otter is elderly and moves slowly and unsteadily. Please do not disturb it as it enjoys its later years.

After visiting the souvenir shop, we returned to the bus stop where we arrived to wait for the bus.

14:00 Take the bus back to Otaru Station

14:20 Return to Otaru Station

Walk along Ekimae Avenue toward the Otaru Canal.

Near the end of the street, you can see LeTAO Canal Shop:

Here, they sell souvenirs, ice cream desserts, and also have a deli café ルタオ小樽運河店 三番庫カフェ.

The cookies were quite tasty, but the other tin box with dried strawberry chocolate was a bit too sweet.

14:40 LeTAO Otaru Canal Store Third Warehouse Cafe Lunch

I casually ordered a cooked Italian pasta to fill my stomach, along with a dessert set (the cake was delicious).

16:00 Stroll along Otaru Canal

After eating, continue walking along the Otaru Canal, heading towards the Otaru Steam Clock.

There are many small shops, souvenir stores, and glassware shops around the Otaru Steam Clock.

Bought many cookie souvenirs here, especially the exclusive Hokkaido brand — Rokkatei.

Must-buy at Rokkatei — Rum cookies (short shelf life, taste better chilled), liqueur chocolates (contain real alcohol)

There is a Kitaichi Glass Outlet on the way that sells Hokkaido local sake with free tasting.

Bought a bottle of muskmelon liquor to enjoy later.

Has a thick texture with Hami melon pulp, and a strong Hami melon flavor. It’s better to drink with ice cubes and sparkling water.

17:10 Walk to the end of the street to Otaru Steam Clock

It’s getting close to evening, so we started heading back.

18:10 Return to Otaru Station

Missed the 18:00 express airport bus to Sapporo, so took a random slower bus back.

19:00 Return to Sapporo Station

19:30 Savoy Sapporo Station Kitaguchi Hokkaido Soup Curry

There is a highly-rated soup curry place near the hotel that offers takeout (too tired to dine out), so we bought it back to the hotel to eat.

The ingredients are very fresh, and the curry flavor does not overpower them. It is light and delicious.

Late-night snack was a convenience store hot dog + melon liqueur (not bad) + Yakult 1000 reduced sugar version, to replenish probiotics (actually drink it every day, just too lazy to take photos).

Day 4 (03/18 Wed) — KKday Hokkaido Illumination Tour ｜ Furano Fairy Hill & Biei Blue Pond & Shirahige Waterfall One-Day Tour｜Departing from Sapporo

We chose the Relaxed 11:50 Departure Plan B, but it will be a late night, expected to return to Sapporo Odori Station at 21:40.

Meeting point: Odori Subway Station Exit 31. You will receive a pre-trip notification email the day before with contact details for the guide/driver.

• 11:50 is the departure time, please arrive by 11:40

• 11:50 is the departure time, please arrive by 11:40

• 11:50 is the departure time, please arrive by 11:40

10:00 Leave to Odori Station

10:30 Go to the nearby Komeda Coffee Odori Nishi 2-chome Branch for breakfast

• Order a drink and get a free meal bun + a la carte fried shrimp burger

Because the trip is long, I wanted to save more energy.

Arrive around 11:30 at Odori Subway Station Exit 31 to wait for the bus at the park

Almost all day tours gather around this park. Make sure to confirm with the guide that you are in the right group, or you might get on the wrong bus.

11:40 Tour guide arrives, board the bus

Last time, I joined a large group tour with a bus driver and guide for the KKDAY Takachiho One-Day Tour, Takachiho Shrine, Takachiho Gorge, Amano-Iwato Shrine, Amano-Yasugawara. This time, I joined a small group of 6 people with only a driver-guide. The advantage is that with fewer people, moving around is faster.

First the highway, then entering the mountain road deep in the forest—it’s really quite far.

Travel time to the first attraction: about 1 hour 50 minutes.

13:30 Furano Forest Elf Terrace - Daytime

There is a tourist center here with restrooms, and right behind it is the Furano Ski Resort.

Furano Forest Fairy Terrace is a wooden boardwalk in the forest with many small cabins selling handmade goods. The area is small, and it takes less than 10 minutes to walk around. In winter, you can enjoy the snowy scenery during the day and illuminated night views in the evening.

Photography is prohibited at the store entrance and inside the store.

Bought a wooden moon-shaped handmade souvenir

Because we arrived early, we stayed here for 50 minutes.

14:20 Depart for Herb Garden Furano (HERB GARDEN FURANO)

Drive time: about 30 minutes.

Rest stop (shopping area) itinerary, no forced sales, the ice cream inside is delicious!

Stay for about 30 minutes.

15:40 Arrive at Biei Station

Biei Station Very small and quite remote nearby, mainly for taking photos, using the restroom, and buying some food nearby to bring as dinner on the road.

There is a 7–11 and a bakery nearby to choose from.

Bought a bread and convenience store ready-to-eat meal for dinner on the road.

Stay for about 50 minutes.

16:30 Depart for Biei Christmas Tree

About a 10-minute drive, roadside attraction.

16:40 Arrive at Biei Christmas Tree

Each season offers different scenery. Today features a snowy landscape with the sunset faintly visible.

Stay for about 20 minutes.

17:00 Depart for Shirahige Falls

About a 30-minute drive, a bridge sightseeing spot.

17:30 Arrive at Shirahige Falls

Looking down from this pedestrian iron bridge is the frozen Shirahige Waterfall.

Stay for about 20 minutes.

As evening approaches, the weather is cold; the bridge surface is icy, so walk carefully.

17:50 Depart for Shirogane Blue Pond

About a 5-minute drive.

17:55 Arrive at the final spot Shirogane Blue Pond

Stay for about 30 minutes, there is a visitor center restroom.

Walk up from the parking lot to see the Blue Pond.

is a tranquil spot where the frozen, silent pond shows a hint of life through shifting light and shadows.

18:30 Return Odori Subway Station Exit 31

Drive time: about 2 hours 30 minutes, with a rest stop around 20:00 for everyone to use the restroom.

20:55 Arrive at Odori Subway Station Exit 31

Overall, it was similar to my previous experience with “KKDAY Takachiho One-Day Tour: Takachiho Shrine, Takachiho Gorge, Ama-no-Iwato Shrine, Amano-Yasugawara”: it’s mostly a quick bus tour. Visiting these spots on your own is quite troublesome since half the route is highway and the other half is mountain roads through unpopulated areas (which feel like bear country). This time, we were in a small group and the driver sped aggressively, so we returned to the city earlier than expected.

21:30 Return to Sapporo Station

After walking around near Odori Station, we returned to Sapporo Station. Most of the food places were already closed.

Sapporo Tsunagu Yokomachi

I checked and found there was a night market still open near the station, so I decided to walk over and take a look. Anything would do, just to grab a bite.

Randomly picked a place with grilled skewers (mainly grilled eel) to have a quick bite.

This place is only open until March. I originally wanted to eat chicken wings but ended up choosing the wrong restaurant.

22:30 Return to the hotel

Still a bit hungry after eating, went to a nearby convenience store to buy some late-night snacks to eat back at the hotel.

S eicomart sells some items that Lawson, 7-Eleven, and FamilyMart do not have.

Day 5 (03/19 Thu) — Shopping and Hokkaido Shrine

10:00 Head out for breakfast at McDonald’s

• McGriddles Pancake Sandwich (not sold in Taiwan) — Bacon, cheese, and egg with a sweet and salty honey flavor

• Strawberry Cheesecake Pie (also later sold in Taiwan) — strawberry jam + cheese

10:00 Odori and Tanukikoji continue exploring capsule toy machines and shopping at Don Quijote

There’s not much to shop at Sapporo Station; there are more things to explore here.

Twisted a fire alarm and some interesting capsule toys.

13:30 Return to Sapporo Station hotel to drop off items, continue shopping and eating at department stores

For lunch, I casually had chirashi sushi and soba noodles at the department store.

LE LABO Le Labo Sapporo Daimaru Store

Quick glance at Le Labo 2026 / Sapporo prices:

• 50ml ¥31,350 same as 2025 Tokyo price

Shopping and strolling, then depart around 15:00 to Hokkaido Shrine.

From Sapporo, take the Namboku Line to Odori Station, then transfer to the Tozai Line to Maruyama Park Station. The ride takes about 30 minutes.

15:40 Arrive at Maruyama Park Station

If you go early, you can first take a seat at the nearby famous Hokkaido seafood conveyor belt sushi Toriton.

Exit Maruyama Koen Station at Exit 3, then walk straight into the park towards Hokkaido Shrine.

Distance: about 850 meters / 15 minutes

Just cross the street, and you’ll reach the park entrance:

When you meet your friends at Maruyama…

Me: Maruyama Park 💁

First, pass through Maruyama Park (there is still a lot of snow here), and you will see the entrance to the Jingu Torii gate:

15:50 Jingu Chaya

Continue walking and you will pass Jingu Chaya, where you can first enjoy some Hokkaido milk ice cream.

Rich and delicious.

Eating is not allowed inside the shrine; please finish eating at the teahouse before leaving.

16:15 Hokkaido Shrine

Worship: Throw a 5-yen coin (symbolizing good luck) -> Bow twice -> Clap twice -> Make a wish -> Finish with one bow

Bought two omamori charms. The special one is the traffic safety charm, which can be hung inside a car, and it comes with a sticker that can be placed on a motorcycle, bicycle, or helmet.

16:30 Leave Hokkaido Shrine

Walked slowly back from the shrine and park to the subway station, preparing to return near Sapporo Station for dinner.

17:20 Passing by Sapporo Hokkaido Government Office Red Brick Building

Just passing by, mainly heading to the neighboring Sapporo Mitsui for yakiniku:

17:30 Yakiniku Bar Tamura Yakiniku (Grilled Meat)

Let’s try Hokkaido Wagyu beef.

Ordered the Hokkaido beef set + salad + beer + drink + cold noodles, totaling about NT$3,100; the wagyu beef was fatty and melted in the mouth, the steak was also very good, and the most impressive was the beef tongue, which was very chewy and tasty.

19:00 Sapporo Tokyu Department Store

After eating, we took a final stroll to Tokyu Department Store.

There are also toys and capsule toys upstairs here.

20:00 Return to Sapporo Station

The department store is about to close, so let’s take one last look around.

Sapporo Station — Sandwich Workshop Sandria

On the way back to the hotel, I bought sandwiches from a vending machine near the JR station that had a long line of people every day.

Limited to two per person. I bought one pork cutlet for a late-night snack and a potato egg salad for tomorrow’s breakfast.

22:30 Late-night snack on the last night in Sapporo

Had strawberry wine and Hokkaido milk ice cream on the first day.

Day 6 (03/20 Fri) — New Chitose Airport, Return Trip

10:00 Wake up and have breakfast in the room

After eating and packing up, we checked out and headed straight to the airport.

11:05 Waiting for the bus at Sapporo Station

11:19 Take the train from Sapporo Station to New Chitose Airport

Rapid Airport 68 Rapid New Chitose Airport, 38 minutes

12:00 Arrive at New Chitose Airport

JR New Chitose Airport, Domestic Terminal Lobby

Take the subway up to the 1st floor lobby, where there are many food options and souvenirs. If you haven’t bought enough, you can find more here.

Time to head back… retracing the route we came from

12:17 Arrive at the International Terminal Hall

Assigned to the check-in counter at the far end, and you have to walk 165 meters to reach it:

Hokkaido Varied Tit:

12:22 Arrive at the check-in counter

The site is crowded, but online check-in is less busy. Therefore, be sure to complete seat selection and online check-in at least three days before the return trip to save queuing time.

There is also a Don Quijote nearby for last-minute shopping before check-in:

13:03 Check-in and luggage drop-off completed

13:17 Completed Security Check and Immigration Inspection

Airport security in Japan is stricter; if you wear boots, you must take them off for the X-ray.

13:20 Browse While Waiting for the Flight

There is a food street where you can eat. I only bought bread, fried chicken, and melon ice cream as light snacks.

The first floor has a whole row of souvenir shops where you can buy almost anything; however, there are fewer boutique stores.

There are also some souvenirs on the second floor.

14:30 Boarding completed

Same as the flight here, it’s a new Airbus plane with spacious seats and updated entertainment systems.

15:00 Departure, Goodbye — Sapporo

The airplane meal was just so-so:

18:15 Landed at Taiwan Taoyuan International Airport

19:15 Immigration + Baggage Claim, Go Home and Rest

This time, the luggage took forever to arrive…

Thank you for reading

Thank you for reading this far and experiencing the various sights of Hokkaido with me. See you at the next destination!

Free WiFi on the Plane

This flight offers full in-flight WiFi service through China Airlines, allowing you to chat and message with friends.

If your phone has AdGuard DNS or a similar DNS ad-blocking service installed, you need to go to Settings -> General -> VPN & Device Management -> Restrictions and Proxy Servers -> DNS -> change back to Automatic.

Otherwise, you won’t be able to connect to the onboard WiFi.

Souvenirs

• Sapporo Agricultural School (milk cookies) and roasted corn crackers (puffed) are also good.

Toys

• Twisted railroad crossing, signboard lights, car keys, fire alarm, Don Quijote figurine, Japan team jersey

• Wooden handmade musical instrument bought at Furano Fairy Hill

Introduction to the Relationship Between Certificates, Identifiers & Profiles and Using Fastlane Match to Centralize Certificate Issuance Management and Integrate into CI/CD Workflows

Photo by marcos mayer

Preface

In mid-2025, a series of articles was written about building a complete App CI/CD process from scratch using GitHub Actions:

• CI/CD Practical Guide (Part 1): What is CI/CD? How to Build a Stable and Efficient Development Team with CI/CD? Tool Selection?

• CI/CD Practical Guide (Part 2): Complete Guide to Using and Building GitHub Actions with Self-hosted Runner

• CI/CD Practical Guide (3): Implementing CI and CD Workflows for App Projects with GitHub Actions

• CI/CD Practical Guide (Part 4): Using Google Apps Script Web App to Connect GitHub Actions and Build a Free, Easy-to-Use Packaging Tool Platform

Recently, I set up a new environment and went through the process again. Each time, I learn something new. This time, I focused on iOS Codesigning: the relationship between Certificates, Profiles, and Devices, and how I use Fastlane Match to connect certificate management with CI/CD.

What are Certificates, Identifiers & Profiles, and Devices?

In the Apple ecosystem, app development is based on managing certificates and provisioning profiles, unlike Android where having the .apk file is enough to install and use. Apple enforces strict certificate matching rules; if these are not met, the app cannot be installed or used.

Main Components and Their Functions:

Certificates: The identity used to sign the App (Signing Identity)

• Development — Used on physical devices during development (no certificates needed for simulators), associated with a person or API Key (with quantity limits).

• Distribution — Packaging for App Store, TestFlight, or Ad Hoc internal testing (limited to registered devices), with quantity limits, belonging to the Team.

• Enterprise — Apps for internal use within the company.

Format : Requires both Private Key and Certificate .cer to use, or exporting from the original creating computer’s Keychain as a .p12 file will include both.

Identifiers: Which App/Extension (Bundle ID)

App’s Bundle ID registration and the required Capabilities to enable (such as Push Notifications, App Groups…), App Services.

Extensions also have their own Identifier.

Devices: Registered Devices (iPhone/iPad..)

Development running on physical devices and Distribution Ad Hoc internal testing can only be used on registered devices.

Limit: 100; including cancellations, the quota will only refresh after each annual billing cycle.

Provisioning Profile (hereafter Profile): Description File

Combination of Certificates + Identifiers + Devices Relationships.

• Development — Provisioning profiles used during the development phase. Required for testing on physical devices. Profiles include the relationship between Certificates, Identifiers, and Devices.

• Ad Hoc — A provisioning profile for internal testing (e.g., Deploy to Firebase App Distribution), which includes the relationship between Certificates, Identifiers, and Devices.

• App Store — Provisioning profiles used for packaging and uploading to the App Store / TestFlight, containing the relationship between Certificates and Identifiers.

Format: .mobileprovision

Note: A Profile is simply a description file that defines relationships; it does not contain the actual certificate.

Summary

In summary, to build for a physical device (Development Certificate) or perform Archive packaging (Distribution Certificate) on a clean machine without logging into the Xcode Apple Account, you must have two files:

• .mobileprovision Provisioning Profile: Describes the relationship between Certificates, Identifiers, and Devices.

• .p12 Certificate: The actual certificate file (exported from the original machine where the certificate was created).

Also, starting from macOS ≥ 15, the Keychain has moved to:

open /System/Library/CoreServices/Applications/Keychain\ Access.app

Looked for it for a long time..

Common Errors

⚠️⚠️⚠️ Certificates and Profiles are confirmed correct but errors still occur:

Most likely, you still have leftover old certificates or multiple certificates, causing Xcode to get confused.

This issue is very common!

1. Close Xcode

2. Open macOS keychain: open /System/Library/CoreServices/Applications/Keychain\ Access.app

3. login keychain -> All items -> Search apple development -> Delete all Certificates

4. Finder -> Go -> Go to -> ~/Library/MobileDevice/Provisioning\ Profiles -> Delete all Profiles files

5. Re-pull Certificates

6. Restarting Xcode should fix the issue.

No signing certificate “iOS Distribution” found / No signing certificate “iOS Development” found:

No "iOS Distribution" signing certificate matching team ID "" with a private key was found.
No "iOS Development" signing certificate matching team ID "" with a private key was found.

Reason:

• Missing iOS Distribution/iOS Development Certificate

• Have an iOS Distribution/iOS Development Certificate but no corresponding Private Key

Solution:

• Delete all old Certificates and Profiles in the Keychain

• Find the certificate in the Keychain of the computer where the Certificate was originally created, export it as a .p12 file, and install it on the problematic computer.

• Go to Certificates, Identifiers & Profiles to revoke the old Certificate and generate a new one
  (Don’t worry, this won’t affect the live App; it only impacts development and packaging stages)

Provisioning profile “” doesn’t include signing certificate “Apple Development: XXX”. / Provisioning profile “” doesn’t include signing certificate “Apple Distribution: XXX”.:

Reason:

• The currently selected Provisioning Profile does not match the current Certificate.

Solution:

• Delete all old Certificates and Profiles in the Keychain

• Go to Certificates, Identifiers & Profiles Profiles to confirm that the provisioning profile has the corresponding certificate checked or recreate the profile for use.

No profile for team ‘’ matching ‘’ found: Xcode couldn’t find any provisioning profiles matching ‘’.:

Reason:

• Provisioning profile not found

Solution:

• Delete all old Certificates and Profiles in the Keychain

• Go to Certificates, Identifiers & Profiles to download the corresponding Profile for use.

Provisioning profile “” has app ID “”, which does not match the bundle ID “”. / Provisioning profile doesn’t match the bundle identifier:

Reason:

• Provisioning profile does not include the current Bundle Identifier

Solution:

• Delete all old Certificates and Profiles in the Keychain

• Go to Certificates, Identifiers & Profiles Identifiers to confirm the Bundle Identifier is registered.

• Go to Certificates, Identifiers & Profiles to download the corresponding Profile for use.

Provisioning profile “” doesn’t include the currently selected device “” (identifier ).:

Reason:

• Provisioning profile does not include the selected physical device’s Device Identifier

Solution:

• Go to Certificates, Identifiers & Profiles Devices to verify that the physical device’s Identifier is registered.

• Go to Certificates, Identifiers & Profiles and make sure the corresponding Profile has the physical device enabled.

• Re-download the Profile for use

Could not create another Development/Distribution certificate, reached the maximum number of available Development/Distribution certificates. :

Reason:

Indicates that the created Development/Distribution Certificates have reached the maximum limit.

Solution:

• Go to Certificates, Identifiers & Profiles to delete unused certificates.

Xcode certificates are correct and packaging works fine, but signing errors occur when running packaging commands via CLI (Fastlane):

Reason:

Here I also ran into another issue because I carelessly placed the project in the iCloud sync folder. For some reason, Fastlane kept showing certificate problems (suspected keychain access issues).

Solution:

Simply remove it from the iCloud sync directory.

Common Daily Usage Scenarios

Development Certificate

• Before adopting Match for unified certificate management, each developer creates their own Development Certificate and Development Profile; if there are 1,000+ developers in the organization, the backend of Certificates, Identifiers & Profiles, Devices becomes extremely chaotic and unmanageable.

• If there is an outsourced team responsible only for development, they still need to be added to the Apple Developer Program portal to generate their own development certificates and profiles.

Distribution Certificate

• Distribution Certificates are created by the Team, so each development plan’s Team can only create a limited number of distribution certificates.

• A common practice is for one engineer to create the Distribution Certificate and then export the .p12 file to other developers who need to publish the app or to use it on the CI/CD machines.

• When the team is large and there are many apps, sending files back and forth becomes very troublesome, and they need to be renewed every year.

• When packaging Ad Hoc builds, if a new device is registered, everyone and the CI/CD must re-download the Profile for the new device to take effect.

Fastlane Match

To address the above issues, we want a platform to manage everything related to certificates on our behalf. All developers and CI/CD services will pull and update data uniformly from this platform. The storage of this platform must be secure, and that is — Fastlane Match .

Easily sync your certificates and profiles across your team

A new approach to iOS and macOS code signing: Share one code signing identity across your development team to simplify your code signing setup and prevent code signing issues.

match is the implementation of the codesigning.guide concept. match creates all required certificates & provisioning profiles and stores them in a separate git repository, Google Cloud, or Amazon S3. Every team member with access to the selected storage can use those credentials for code signing. match also automatically repairs broken and expired credentials. It’s the easiest way to share signing credentials across teams

Fastlane Match:

• Interact with App Store Connect (via App Store Connect API or Apple Developer Login Session) to generate or update certificates

• Encrypt and upload the three certificate files (.mobileprovision Profiles, .p12 Certificate, .cer Certificate) to the Git Repo (or other storage).
  The .cer Certificate is also stored separately to verify the certificate’s validity.

• If you want to separate permissions, you can use two Repos: one to manage Development certificates and another to manage Distribution certificates.

Folder structure:

• The certs folder contains all certificates along with their private keys

• The profiles folder contains all provisioning profiles

https://docs.fastlane.tools/actions/match/

Encryption Algorithm: AES-256-GCM

Developers, CI/CD Services:

• Use the Fastlane match command consistently to manage certificates.

• Fastlane Match will first retrieve the certificate files from the Git Repo and decrypt them for use. If it detects any expired or invalid certificates and has Create/Write permissions, it will automatically regenerate and push them back to the Repo; if it only has Read permission, it will report an error.

Create/Write:

• Only the person responsible for managing certificates can generate, update, and push certificates.

• It is best to store important Distribution Certificates in a separate repo accessible only to CI/CD services or administrators

Read:

• Other developers and CI/CD services have read-only permission to pull certificates.

• The CI/CD service pulls the latest certificates before each task execution.

• Everyone shares the same Development & Distribution Certificate.

• After personnel changes, access to the Match Repo will be lost. You can revoke the old certificates and regenerate them; others just need to pull again (it’s even smoother if integrated into the make project script).

Fastlane Match Setup and Usage

Let’s take Git Storage as an example for all certificates.

1. Create an Empty Git Private Match Repo to Store Certificates
Although all Certificates and Profiles are stored encrypted, you still need to set proper access permissions for the repo.

1. Confirm that Git SSH access is set up locally by running git clone git@github.com:xxx/certificates.git

It is recommended to consistently use SSH Git Clone Repo, as CI/CD will also use the same method.

If running fastlane match gets stuck at If cloning the repo takes too long, you can use the clone_branch_directly option in match., it is most likely an SSH permission issue.

1. Run bundle exec fastlane match init in the project directory to complete the setup

[21:54:32]: fastlane match supports multiple storage modes, please select the one you want to use:
1. git
2. google_cloud
3. s3
4. gitlab_secure_files
# Enter 1 to use git
?   1

[22:04:40]: Please create a new, private git repository to store the certificates and profiles there
[22:04:40]: URL of the Git Repo: git@github.com:xxx/certificates.git
# Enter the SSH URL of your created Git Private Match Repo

[22:04:47]: Successfully created './fastlane/Matchfile'. You can open the file using a code editor.
[22:04:47]: You can now run `fastlane match development`, `fastlane match adhoc`, `fastlane match enterprise` and `fastlane match appstore`
[22:04:47]: On the first run for each environment it will create the provisioning profiles and
[22:04:47]: certificates for you. From then on, it will automatically import the existing profiles.
[22:04:47]: For more information visit https://docs.fastlane.tools/actions/match/

1. After completion, a fastlane/Matchfile : will be generated.

# Your Git Private Match Repo SSH URL
git_url("git@github.com:xxxx/certificates.git")

storage_mode("git")

type("development") # The default type, can be: appstore, adhoc, enterprise or development

# app_identifier(["tools.fastlane.app", "tools.fastlane.app2"])
# username("user@fastlane.tools") # Your Apple Developer Portal username

# For all available options run `fastlane match --help`
# Remove the # at the beginning of the line to enable the other options

# The docs are available on https://docs.fastlane.tools/actions/match

5. Generate the App Store Connect API .p8 Key, and use the API Key uniformly to create certificates:

⚠️️️️ App Store Connect API .p8 Key has extensive permissions, enabling management of certificates, app submissions, reviews, users, and financial reports.

Whether to include it in the team’s .git for everyone to access can be decided based on the team’s situation.

A higher security approach is to allow only authorized personnel to manage the certificates, while storing them encrypted for use in the CI/CD system (which will be introduced later in the article).

For demo convenience, it is placed directly under the fastlane directory for access.

Additionally, the Fastlane script in this article is simplified for demonstration purposes, without considering code repetition or structure.

Certificate Management

platform :ios do
  lane :match_development do \\|options\\|
    # Replace with your App Identifier ID
    app_identifier = "li.zhgchg.myApp"

    type = options.fetch(:type, "development")
    isRead = options.fetch(:isRead, true)
    if isRead 
      readonly = true
      force = false
    else
      readonly = false
      force = true

      # App Store Connect API Key is required to manage certificates on Apple's backend
      # Assuming the App Store Connect API .p8 Key is in the ./fastlane/ directory
      app_store_connect_api_key(
        key_id: "XXXXXX",
        issuer_id: "XXXXXX-XXXXXX-XXXXXX-XXXXXX-XXXXXX",
        key_filepath: "./fastlane/AuthKey_XXXXXX.p8",
      )
    end

    # Fetch Development certificates for the app_identifier
    match(
      type: type,
      app_identifier: app_identifier, 
      readonly: readonly, # Whether to update/upload cert/profile when needed
      force: force # Whether to forcibly recreate the provisioning profile
    )
  end
end

Create Development Certificate & Profile and Upload to Match Repo:

bundle exec fastlane match_development type:development isRead:false
[22:22:38]: Creating new provisioning profile for 'li.zhgchg.myApp' with name 'match Development li.zhgchg.myApp' for 'ios' platform
[22:22:39]: Downloading provisioning profile...
[22:22:39]: Successfully downloaded provisioning profile...
[22:22:39]: Installing provisioning profile...
/var/folders/pk/978f3gws7ml0bkmrw245cg_c0000gn/T/d20260103-5010-v6r6w2/profiles/development/Development_li.zhgchg.myApp.mobileprovision
[22:22:39]: Installing provisioning profile...
[22:22:39]: 🔒  Successfully encrypted certificates repo
[22:22:39]: Pushing changes to remote git repo...
[22:22:42]: Finished uploading files to Git Repo [git@github.com:xxxx/certificates.git]

• No errors mean the Development Certificate & Profile were successfully created, installed, and pushed to the Match Repo.

The first time you set it up, you will need to configure a Passphrase:

[23:29:12]: Enter the passphrase that should be used to encrypt/decrypt your certificates
[23:29:12]: This passphrase is specific per repository and will be stored in your local keychain
[23:29:12]: Make sure to remember the password, as you'll need it when you run match on a different machine
[23:29:12]: Passphrase for Match storage:

• This value is used as a reference to encrypt all the files in your Match Repo (passphrase + random salt).

• It is recommended to generate a random string, then set and record it.

• In future updates or when others pull the Match Repo certificates, this string is required to decrypt back to the original files.

Other team members uniformly pull Development Certificate & Profile from Match Repo:

bundle exec fastlane match_development type:development

The first time you use it, you will be asked for your login keychain password because the certificate needs to be installed into the keychain. Enter it twice to confirm:

[16:52:59]: Installing certificate...
[16:53:00]: There are no local code signing identities found.
You can run security find-identity -v -p codesigning to get this output.
This Stack Overflow thread has more information: https://stackoverflow.com/q/35390072/774.
(Check in Keychain Access for an expired WWDR certificate: https://stackoverflow.com/a/35409835/774 has more info.)
[16:53:00]: Enter the password for /Users/zhgchgli/Library/Keychains/login.keychain-db
[16:53:00]: This passphrase will be stored in your local keychain with the name fastlane_keychain_login and used in future runs
[16:53:00]: This prompt can be avoided by specifying the 'keychain_password' option or 'MATCH_KEYCHAIN_PASSWORD' environment variable
[16:53:00]: Password for login keychain: ********
[16:53:24]: Type password for login keychain again: ********

If Match Development finishes pulling certificates, but Xcode keeps showing errors or invalid status:

You can refer to the common errors mentioned earlier. Most are caused by old, corrupted certificates. Clearing all certificates and re-downloading them should resolve the issue.

—

Create AdHoc Distribution Certificate & Profile and Upload to Match Repo:

bundle exec fastlane match_development type:adhoc isRead:false

Create AppStore Distribution Certificate & Profile and Upload to Match Repo:

bundle exec fastlane match_development type:appstore isRead:false

CI/CD services uniformly pull Distribution Certificate & Profile ( isRead:true ) from the Match Repo, then execute the build and release tasks.

Register a New Device

platform :ios do  
  desc "Register a new device and refresh profiles"
  lane :registerDevice do \\|options\\|
    # Replace with your App Identifier ID
    app_identifier = "li.zhgchg.myApp"

    # App Store Connect API Key is required to manage certificates on Apple backend
    # Assume the App Store Connect API .p8 Key is in the ./fastlane/ directory
    app_store_connect_api_key(
      key_id: "XXXXXX",
      issuer_id: "XXXXXX-XXXXXX-XXXXXX-XXXXXX-XXXXXX",
      key_filepath: "./fastlane/AuthKey_XXXXXX.p8",
    )
    # Input: UDID and device name
    udid = options[:udid] \\|\\| UI.input("Enter device UDID:")
    device_name = options[:name] \\|\\| UI.input("Enter device name:")
    UI.message("📱 Registering device #{device_name} (#{udid})")
    register_device(
      name: device_name,
      udid: udid,
      platform: 'ios'
    )

    # Update Development certificates for app_identifier
    match(
      type: "development",
      app_identifier: app_identifier, 
      readonly: false, # Update/upload cert/profile if needed
      force_for_new_devices: true # Recreate provisioning profile for new devices
    )

    # Update AdHoc certificates for app_identifier
    match(
      type: "adhoc",
      app_identifier: app_identifier, 
      readonly: false, # Update/upload cert/profile if needed
      force_for_new_devices: true # Recreate provisioning profile for new devices
    )
  end
end

After registration, other developers or CI/CD services pulling the Profile (Development or AdHoc) from the Match Repo will include the new devices.

Fastlane Match x CI/CD Workflow Integration

After a general introduction to how Fastlane Match generates and pulls certificates, next is to explain how to integrate it into the CI/CD process.

Question 1 — How to Clone Private Match Repo

The most common issue is how to clone the Private Match Repo project on CI/CD. During local development, we use ssh git clone with our own account’s ssh key, so there is no problem. However, CI/CD does not have this key. Although you can use a personal key, it is not secure.

GitHub — Repo Deploy Key:

1. First, generate the private/public key locally: ssh-keygen -t rsa -b 4096 -f ./id_rsa ( do NOT enter a passphrase )

2. Go to Match Private Repo -> Settings -> Security -> Deploy keys -> Add deploy key:

1. Open id_rsa.pub with a text editor, copy the content, and paste it into Key -> “Add key”

1. Go back to the main Repo -> Settings -> Security -> Secrets and variables

1. Add SSH Private Key Content to Secret:

• Name: MATCH_REPO_DEPLOY_PRIVATE_KEY

1. Return to the main Repo’s GitHub Actions to set up the SSH Key:

name: CI - Deploy

on:
  push:
    branches: [ main ]
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout current repo (Repo A)
        uses: actions/checkout@v4

      - name: Setup SSH for Deploy Key
        run: \\|
          mkdir -p ~/.ssh
          echo "${{ secrets.MATCH_REPO_DEPLOY_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan github.com >> ~/.ssh/known_hosts

      - name: Test Clone
        run: \\|
          git clone git@github.com:xxxx/match-certificates.git
# Success!
# .. do deploy job...

1. Setup Successful!

Issue 2 — Secure Storage and Use of App Store Connect API .p8 Key

Because GitHub Actions cannot store files directly, you must first save it as a string and then write it to a file.

1. For the same issue 1 step, add an APP_STORE_CONNECT_API_KEY_CONTENT Secret in the main Repo.

2. Open the AuthKey_XXXXXX.p8 file with a text editor, then copy and paste its content.

3. Add a step in the main repo’s GitHub Actions to read content and write to a file:

name: CI - Deploy
on:
  push:
    branches: [ main ]
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout current repo (Repo A)
        uses: actions/checkout@v4

      - name: Setup SSH for Deploy Key
        run: \\|
          mkdir -p ~/.ssh
          echo "${{ secrets.MATCH_REPO_DEPLOY_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan github.com >> ~/.ssh/known_hosts  
      
      - name: Write Secret Key to File
        env:
          APP_STORE_CONNECT_API_KEY_CONTENT: ${{ secrets.APP_STORE_CONNECT_API_KEY_CONTENT }}
        run: \\|
          # ensure fastlane directory exists
          mkdir -p ./fastlane
      
          # create file path
          APP_STORE_CONNECT_API_KEY_PATH=./fastlane/AuthKey_XXXXXX.p8
      
          # write content to file (keep newline)
          echo "$APP_STORE_CONNECT_API_KEY_CONTENT" > "$APP_STORE_CONNECT_API_KEY_PATH"
      
          # (optional) restrict permissions
          chmod 600 "$APP_STORE_CONNECT_API_KEY_PATH"

      - name: Deploy to Firebase
        env:
          MATCH_PASSWORD: "${{ secrets.MATCH_PASSWORD }}"
        run: bundle exec fastlane deploy_to_firebase

Issue 3 — Setting a Passphrase for the Private Match Repo to Prevent Prompt Interruptions During Match

1. For Step 1 of the same issue, add MATCH_PASSWORD to Secrets in the main repo.

2. Enter the Passphrase for the Fastlane Match Repo you configured.

3. Add env: secret.MATCH_PASSWORD to the main Repo’s GitHub Actions:

name: CI - Deploy
on:
  push:
    branches: [ main ]
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout current repo (Repo A)
        uses: actions/checkout@v4

      - name: Setup SSH for Deploy Key
        run: \\|
          mkdir -p ~/.ssh
          echo "${{ secrets.MATCH_REPO_DEPLOY_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan github.com >> ~/.ssh/known_hosts  
      
      - name: Write Secret Key to File
        env:
          APP_STORE_CONNECT_API_KEY_CONTENT: ${{ secrets.APP_STORE_CONNECT_API_KEY_CONTENT }}
        run: \\|
          # ensure fastlane directory exists
          mkdir -p ./fastlane
      
          # create file path
          APP_STORE_CONNECT_API_KEY_PATH=./fastlane/AuthKey_XXXXXX.p8
      
          # write content to file (keep newline)
          echo "$APP_STORE_CONNECT_API_KEY_CONTENT" > "$APP_STORE_CONNECT_API_KEY_PATH"
      
          # (optional) restrict permissions
          chmod 600 "$APP_STORE_CONNECT_API_KEY_PATH"

      - name: Deploy to Firebase
        env:
          MATCH_PASSWORD: "${{ secrets.MATCH_PASSWORD }}"
        run: bundle exec fastlane deploy_to_firebase

Question 4 — Keychain Handling on Self-hosted Runner

Unlike cloud machines that are always clean and new each time, with Self-hosted Runners we can specify derived_data_path, output_directory, buildlog_path, and reinstall_app in Fastlane to ensure a clean environment for each run; but since Certificates and Profiles are installed into the system Keychain, how should we handle them?

Fastlane actually considers this for us and allows creating a clean Keychain before running Match:

name: CI - Deploy
on:
  push:
    branches: [ main ]
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout current repo (Repo A)
        uses: actions/checkout@v4

      - name: Setup SSH for Deploy Key
        run: \\|
          mkdir -p ~/.ssh
          echo "${{ secrets.MATCH_REPO_DEPLOY_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan github.com >> ~/.ssh/known_hosts  
      
      - name: Write Secret Key to File
        env:
          APP_STORE_CONNECT_API_KEY_CONTENT: ${{ secrets.APP_STORE_CONNECT_API_KEY_CONTENT }}
        run: \\|
          # ensure fastlane directory exists
          mkdir -p ./fastlane
      
          # create file path
          APP_STORE_CONNECT_API_KEY_PATH=./fastlane/AuthKey_XXXXXX.p8
      
          # write content to file (keep newline)
          echo "$APP_STORE_CONNECT_API_KEY_CONTENT" > "$APP_STORE_CONNECT_API_KEY_PATH"
      
          # (optional) restrict permissions
          chmod 600 "$APP_STORE_CONNECT_API_KEY_PATH"

      - name: Create fastlane keychain
        env:
          KEYCHAIN_NAME: "${{ runner.name }}"
          MATCH_PASSWORD: "${{ secrets.MATCH_PASSWORD }}"
        run: \\|
          bundle exec fastlane run create_keychain \
            name:"$KEYCHAIN_NAME" \
            password:"$MATCH_PASSWORD" \
            unlock:true \
            timeout:0 \
            lock_when_sleeps:false
      
      - name: Deploy to Firebase
        env:
          MATCH_PASSWORD: "${{ secrets.MATCH_PASSWORD }}"
          KEYCHAIN_NAME: "${{ runner.name }}"
        run: bundle exec fastlane deploy_to_firebase

      # 🔥 This will run regardless of previous success or failure
      - name: Delete fastlane keychain
        if: always()
        env:
          KEYCHAIN_NAME: ${{ runner.name }}
        run: \\|
          bundle exec fastlane run delete_keychain \
            name:"$KEYCHAIN_NAME"

• Each Runner only executes one task at a time, so we use the Runner Name as the Keychain Name. Each Runner will have its own Keychain.

• Deleted after execution regardless of success or failure.

• I didn’t set a separate keychain_password; I just used MATCH_PASSWORD uniformly.

Add keychain parameters to the match method in Fastlane/Fastfile:

#...
    match(
      type: "adhoc",
      app_identifier: app_identifier, 
      readonly: false, # Update/upload cert/profile if needed
      force_for_new_devices: true, # Recreate provisioning profile for new devices
      keychain_name: ENV['KEYCHAIN_NAME'], # default value: nil
      keychain_password: ENV['MATCH_PASSWORD'] # default value: nil
    )
#...

This way, Match will save the pulled certificates to the specified Keychain instead of the shared login keychain.

Conclusion

The scope of Fastlane is very broad, so here I will only document the process of using Fastlane Match. Other lanes for testing, packaging, publishing, etc., will be covered in a new supplementary article when there’s a chance. If I think of any other Match-related cases, I will add them later! Feel free to leave questions or comments!

Further Reading

• CI/CD Practical Guide (Part 1): What is CI/CD? How to Build a Stable and Efficient Development Team with CI/CD? Tool Selection?

• CI/CD Practical Guide (Part 2): Complete Guide to Using and Building GitHub Actions with Self-hosted Runner

• CI/CD Practical Guide (3): Implementing CI and CD Workflows for App Projects with GitHub Actions

• CI/CD Practical Guide (Part 4): Using Google Apps Script Web App to Connect GitHub Actions and Build a Free, Easy-to-Use Packaging Tool Platform

Please kindly proceed to read. 🤞🏻

Using Medium Graphql Private API to Crawl Data, Backup Articles, and Bypass Cloudflare Verification Blocks.

Background

Since I started writing on Medium in 2018, by around 2022 I had accumulated over 50 articles, nearly 60,000 words, and about 3 GB of article images (by 2025, over 120 articles/100,000+ words/6 GB+ images); no backups! no backups! no backups! Because I always wrote directly on Medium (the editor is really good), I published immediately after writing without any local backups.

At that time, a sense of unease arose—what if one day Medium shuts down and my articles disappear? (And Medium had been struggling for years, not making money.) Or what if my account suddenly gets suspended, would all my hard work be lost?

So that year, I started researching how to scrape Medium data, especially article content and how to download backups.

Medium HTML ❌

The structure is very complex, prone to changes, and slow to crawl. Directly scraping content via the browser is the worst approach.

Medium Official API ❌

Warning The Medium API is no longer supported. We do not recommend using it.

Medium once provided an official API, but it was likely discontinued shortly after its launch. It is presumed that this was due to different product goals—Medium aims to keep content within its own platform rather than allowing external access through APIs.

Medium Unofficial API 🤔

Because the official API is not provided, some skilled developers have created external API interfaces for users in need; however, I suspect these also call the Medium Private API, just adding a layer of encapsulation to bridge and convert requests into the Private API to fetch the original data.

The fee is not cheap, about $5 USD per 2,500 requests ; this service has been running for quite a while, but since it ultimately calls the Medium Private API, I might as well sniff and call it myself.

Medium Private API ✅

What is a Private API? It is an API interface not intended for external use, undocumented, may be disabled at any time, and could pose legal risks; essentially, it means observing the website/App behavior to find the corresponding API calls and writing your own code to reuse this API to fetch data for your own service.

https://medium.com/_/graphql

By sniffing network requests, we found that all Medium APIs use the https://medium.com/_/graphql endpoint. As long as we can call this endpoint in our own program and get the same data, this approach will work.

Medium Private API — Sniffing Medium Graphql (Example: Getting Follower Count)

My first application was to crawl my follower count and display it on my portal website.

link.zhgchg.li :

Therefore, I had to scrape the follower count of my account on Medium.

• First, open the browser’s “Developer Mode” (Chrome -> Right-click -> Inspect), switch to the “Network” tab, check “Preserve log,” and enter “graphql” in the search box.

• Go to the Medium account followers page: https://medium.com/@YOUR_USER_NAME/followers
  Only this follower URL format can be sniffed; the format https://YOUR_USER_NAME.medium.com/followers does not call the Followers API.

• Check each “graphql” request on the left, search for the keyword “followerCount” in the “Response” data, and find the one where the username matches the webpage’s username and the follower count matches the number shown on the page. This is the target request.

• After finding the target API, switch to Payload -> View Source -> copy all the content below

Now that we have obtained the Medium followers API & payload, let’s test it using Postman!

Medium Follower Count Endpoint — Request & Response

Endpoint:

POST https://medium.com/_/graphql

Authorization: No authorization required (No need to include Token or set cookies)

Payload:

[
    {
        "operationName": "UserFollowers",
        "variables": {
            "id": null,
            "username": "zhgchgli"
        },
        "query": "query UserFollowers($username: ID, $id: ID, $paging: PagingOptions) {\n  userResult(username: $username, id: $id) {\n    __typename\n    ... on User {\n      id\n      followersUserConnection(paging: $paging) {\n        pagingInfo {\n          next {\n            from\n            limit\n            __typename\n          }\n          __typename\n        }\n        users {\n          ...FollowList_publisher\n          __typename\n        }\n        __typename\n      }\n      ...UserCanonicalizer_user\n      ...FollowersHeader_publisher\n      ...NoFollows_publisher\n      __typename\n    }\n  }\n}\n\nfragment collectionUrl_collection on Collection {\n  id\n  domain\n  slug\n  __typename\n}\n\nfragment CollectionAvatar_collection on Collection {\n  name\n  avatar {\n    id\n    __typename\n  }\n  ...collectionUrl_collection\n  __typename\n  id\n}\n\nfragment SignInOptions_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment SignUpOptions_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment SusiModal_collection on Collection {\n  name\n  ...SignInOptions_collection\n  ...SignUpOptions_collection\n  __typename\n  id\n}\n\nfragment PublicationFollowButton_collection on Collection {\n  id\n  slug\n  name\n  ...SusiModal_collection\n  __typename\n}\n\nfragment PublicationFollowRow_collection on Collection {\n  __typename\n  id\n  name\n  description\n  ...CollectionAvatar_collection\n  ...PublicationFollowButton_collection\n}\n\nfragment userUrl_user on User {\n  __typename\n  id\n  customDomainState {\n    live {\n      domain\n      __typename\n    }\n    __typename\n  }\n  hasSubdomain\n  username\n}\n\nfragment UserAvatar_user on User {\n  __typename\n  id\n  imageId\n  membership {\n    tier\n    __typename\n    id\n  }\n  name\n  username\n  ...userUrl_user\n}\n\nfragment isUserVerifiedBookAuthor_user on User {\n  verifications {\n    isBookAuthor\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment SignInOptions_user on User {\n  id\n  name\n  imageId\n  __typename\n}\n\nfragment SignUpOptions_user on User {\n  id\n  name\n  imageId\n  __typename\n}\n\nfragment SusiModal_user on User {\n  ...SignInOptions_user\n  ...SignUpOptions_user\n  __typename\n  id\n}\n\nfragment useNewsletterV3Subscription_newsletterV3 on NewsletterV3 {\n  id\n  type\n  slug\n  name\n  collection {\n    slug\n    __typename\n    id\n  }\n  user {\n    id\n    name\n    username\n    newsletterV3 {\n      id\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment useNewsletterV3Subscription_user on User {\n  id\n  username\n  newsletterV3 {\n    ...useNewsletterV3Subscription_newsletterV3\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment useAuthorFollowSubscribeButton_user on User {\n  id\n  name\n  ...useNewsletterV3Subscription_user\n  __typename\n}\n\nfragment useAuthorFollowSubscribeButton_newsletterV3 on NewsletterV3 {\n  id\n  name\n  ...useNewsletterV3Subscription_newsletterV3\n  __typename\n}\n\nfragment AuthorFollowSubscribeButton_user on User {\n  id\n  name\n  imageId\n  ...SusiModal_user\n  ...useAuthorFollowSubscribeButton_user\n  newsletterV3 {\n    id\n    ...useAuthorFollowSubscribeButton_newsletterV3\n    __typename\n  }\n  __typename\n}\n\nfragment UserFollowRow_user on User {\n  __typename\n  id\n  name\n  bio\n  ...UserAvatar_user\n  ...isUserVerifiedBookAuthor_user\n  ...AuthorFollowSubscribeButton_user\n}\n\nfragment FollowsHeader_publisher on Publisher {\n  __typename\n  id\n  name\n  ... on Collection {\n    ...collectionUrl_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...userUrl_user\n    __typename\n    id\n  }\n}\n\nfragment FollowList_publisher on Publisher {\n  id\n  ... on Collection {\n    ...PublicationFollowRow_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...UserFollowRow_user\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment UserCanonicalizer_user on User {\n  id\n  username\n  hasSubdomain\n  customDomainState {\n    live {\n      domain\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment FollowersHeader_publisher on Publisher {\n  ...FollowsHeader_publisher\n  ... on Collection {\n    subscriberCount\n    __typename\n    id\n  }\n  ... on User {\n    socialStats {\n      followerCount\n      __typename\n    }\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment NoFollows_publisher on Publisher {\n  id\n  name\n  __typename\n}\n"
    }
]

username : Replace with the username you want to query.

Postman :

• POST https://medium.com/_/graphql

• Body -> raw -> JSON

Response:

[
    {
        "data": {
            "userResult": {
                "__typename": "User",
                "id": "8854784154b8",
                "followersUserConnection": {
                    "pagingInfo": {
                        "next": {
                            "from": "1140babdfef7",
                            "limit": 8,
                            "__typename": "PageParams"
                        },
                        "__typename": "Paging"
                    },
                    "users": [
                        ///.. omitted
                    ],
                    "__typename": "UserConnection"
                },
                "username": "zhgchgli",
                "hasSubdomain": true,
                "customDomainState": {
                    "live": {
                        "domain": "zhgchgli.medium.com",
                        "__typename": "CustomDomain"
                    },
                    "__typename": "CustomDomainState"
                },
                "name": "ZhgChgLi",
                "socialStats": {
                    "followerCount": 1050,
                    "__typename": "SocialStats"
                }
            }
        }
    }
]

Key info: response[0]["data"]["userResult"]["socialStats"]["followerCount"] is the target follower count!

Ruby Demo Code:

def load_medium_followers(username)
    begin
        url = "https://medium.com/_/graphql"
        uri = URI.parse(url)

        payload = [
            {
            "operationName": "UserFollowers",
            "variables": {
                "id": nil,
                "username": username,
                "paging": nil
            },
            "query": "query UserFollowers($username: ID, $id: ID, $paging: PagingOptions) {\n  userResult(username: $username, id: $id) {\n    __typename\n    ... on User {\n      id\n      followersUserConnection(paging: $paging) {\n        pagingInfo {\n          next {\n            from\n            limit\n            __typename\n          }\n          __typename\n        }\n        users {\n          ...FollowList_publisher\n          __typename\n        }\n        __typename\n      }\n      ...UserCanonicalizer_user\n      ...FollowersHeader_publisher\n      ...NoFollows_publisher\n      __typename\n    }\n  }\n}\n\nfragment collectionUrl_collection on Collection {\n  id\n  domain\n  slug\n  __typename\n}\n\nfragment CollectionAvatar_collection on Collection {\n  name\n  avatar {\n    id\n    __typename\n  }\n  ...collectionUrl_collection\n  __typename\n  id\n}\n\nfragment SignInOptions_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment SignUpOptions_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment SusiModal_collection on Collection {\n  name\n  ...SignInOptions_collection\n  ...SignUpOptions_collection\n  __typename\n  id\n}\n\nfragment PublicationFollowButton_collection on Collection {\n  id\n  slug\n  name\n  ...SusiModal_collection\n  __typename\n}\n\nfragment PublicationFollowRow_collection on Collection {\n  __typename\n  id\n  name\n  description\n  ...CollectionAvatar_collection\n  ...PublicationFollowButton_collection\n}\n\nfragment userUrl_user on User {\n  __typename\n  id\n  customDomainState {\n    live {\n      domain\n      __typename\n    }\n    __typename\n  }\n  hasSubdomain\n  username\n}\n\nfragment UserAvatar_user on User {\n  __typename\n  id\n  imageId\n  membership {\n    tier\n    __typename\n    id\n  }\n  name\n  username\n  ...userUrl_user\n}\n\nfragment isUserVerifiedBookAuthor_user on User {\n  verifications {\n    isBookAuthor\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment SignInOptions_user on User {\n  id\n  name\n  imageId\n  __typename\n}\n\nfragment SignUpOptions_user on User {\n  id\n  name\n  imageId\n  __typename\n}\n\nfragment SusiModal_user on User {\n  ...SignInOptions_user\n  ...SignUpOptions_user\n  __typename\n  id\n}\n\nfragment useNewsletterV3Subscription_newsletterV3 on NewsletterV3 {\n  id\n  type\n  slug\n  name\n  collection {\n    slug\n    __typename\n    id\n  }\n  user {\n    id\n    name\n    username\n    newsletterV3 {\n      id\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment useNewsletterV3Subscription_user on User {\n  id\n  username\n  newsletterV3 {\n    ...useNewsletterV3Subscription_newsletterV3\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment useAuthorFollowSubscribeButton_user on User {\n  id\n  name\n  ...useNewsletterV3Subscription_user\n  __typename\n}\n\nfragment useAuthorFollowSubscribeButton_newsletterV3 on NewsletterV3 {\n  id\n  name\n  ...useNewsletterV3Subscription_newsletterV3\n  __typename\n}\n\nfragment AuthorFollowSubscribeButton_user on User {\n  id\n  name\n  imageId\n  ...SusiModal_user\n  ...useAuthorFollowSubscribeButton_user\n  newsletterV3 {\n    id\n    ...useAuthorFollowSubscribeButton_newsletterV3\n    __typename\n  }\n  __typename\n}\n\nfragment UserFollowRow_user on User {\n  __typename\n  id\n  name\n  bio\n  ...UserAvatar_user\n  ...isUserVerifiedBookAuthor_user\n  ...AuthorFollowSubscribeButton_user\n}\n\nfragment FollowsHeader_publisher on Publisher {\n  __typename\n  id\n  name\n  ... on Collection {\n    ...collectionUrl_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...userUrl_user\n    __typename\n    id\n  }\n}\n\nfragment FollowList_publisher on Publisher {\n  id\n  ... on Collection {\n    ...PublicationFollowRow_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...UserFollowRow_user\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment UserCanonicalizer_user on User {\n  id\n  username\n  hasSubdomain\n  customDomainState {\n    live {\n      domain\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment FollowersHeader_publisher on Publisher {\n  ...FollowsHeader_publisher\n  ... on Collection {\n    subscriberCount\n    __typename\n    id\n  }\n  ... on User {\n    socialStats {\n      followerCount\n      __typename\n    }\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment NoFollows_publisher on Publisher {\n  id\n  name\n  __typename\n}\n"
            }
        ];

        headers = {
            "User-Agent" => "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0",
            "Content-Type" => "application/json"
        }

        https = Net::HTTP.new(uri.host, uri.port)
        https.read_timeout = 30
        https.open_timeout = 10
        https.use_ssl = true

        # --- TLS / Certificate verification setup ---
        # Some OpenSSL builds/configs enable CRL checking, which can fail with:
        # "certificate verify failed (unable to get certificate CRL)".
        # Net::HTTP/OpenSSL does not automatically fetch CRLs, so we use a default
        # cert store and clear CRL-related flags to avoid hard failures while still
        # verifying the peer certificate.
        https.verify_mode = OpenSSL::SSL::VERIFY_PEER

        store = OpenSSL::X509::Store.new
        store.set_default_paths
        # Ensure no CRL-check flags are enabled by default
        store.flags = 0
        https.cert_store = store

        # Allow overriding CA bundle paths via environment variables if needed.
        if ENV['SSL_CERT_FILE'] && !ENV['SSL_CERT_FILE'].empty?
        https.ca_file = ENV['SSL_CERT_FILE']
        end
        if ENV['SSL_CERT_DIR'] && !ENV['SSL_CERT_DIR'].empty?
        https.ca_path = ENV['SSL_CERT_DIR']
        end

        # (Optional) timeouts to avoid hanging on network issues
        https.open_timeout = 10
        https.read_timeout = 30
        # --- end TLS setup ---


        req = Net::HTTP::Post.new(uri.request_uri, headers)
        req.body = JSON.dump(payload)

        res = https.request(req)

        json = JSON.parse(res.body)
        count = json&.dig(0, "data", "userResult", "socialStats", "followerCount")
        count ? count.to_i : 0
        return "1K+" unless count.to_i > 0
        return "#{count.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse}+"
    rescue => e
        "1K+"
    end
end

Medium Private API — Fetch All Articles of an Account

In the same way, we can also get the target account’s article list.

Graphql Query Body:

[
      {
        "operationName": "UserProfileQuery",
        "variables": {
          "homepagePostsFrom": null,
          "includeDistributedResponses": true,
          "id": "8854784154b8",
          "homepagePostsLimit": 10
        },
        "query": "query UserProfileQuery($id: ID, $username: ID, $homepagePostsLimit: PaginationLimit, $homepagePostsFrom: String = null, $includeDistributedResponses: Boolean = true) {\n  userResult(id: $id, username: $username) {\n    __typename\n    ... on User {\n      id\n      name\n      viewerIsUser\n      viewerEdge {\n        id\n        isFollowing\n        __typename\n      }\n      homePostsPublished: homepagePostsConnection(paging: {limit: 1}) {\n        posts {\n          id\n          __typename\n        }\n        __typename\n      }\n      ...UserCanonicalizer_user\n      ...UserProfileScreen_user\n      ...EntityDrivenSubscriptionLandingPageScreen_writer\n      ...useShouldShowEntityDrivenSubscription_creator\n      __typename\n    }\n  }\n}\n\nfragment UserCanonicalizer_user on User {\n  id\n  username\n  hasSubdomain\n  customDomainState {\n    live {\n      domain\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment UserProfileScreen_user on User {\n  __typename\n  id\n  viewerIsUser\n  ...PublisherHeader_publisher\n  ...PublisherHomePosts_publisher\n  ...UserSubdomainFlow_user\n  ...UserProfileMetadata_user\n  ...SuspendedBannerLoader_user\n  ...ExpandablePost_user\n  ...useAnalytics_user\n}\n\nfragment PublisherHeader_publisher on Publisher {\n  id\n  ...PublisherHeaderBackground_publisher\n  ...PublisherHeaderNameplate_publisher\n  ...PublisherHeaderActions_publisher\n  ...PublisherHeaderNav_publisher\n  __typename\n}\n\nfragment PublisherHeaderBackground_publisher on Publisher {\n  __typename\n  id\n  customStyleSheet {\n    ...PublisherHeaderBackground_customStyleSheet\n    __typename\n    id\n  }\n  ... on Collection {\n    colorPalette {\n      tintBackgroundSpectrum {\n        backgroundColor\n        __typename\n      }\n      __typename\n    }\n    isAuroraVisible\n    legacyHeaderBackgroundImage {\n      id\n      originalWidth\n      focusPercentX\n      focusPercentY\n      __typename\n    }\n    ...collectionTintBackgroundTheme_collection\n    __typename\n    id\n  }\n  ...publisherUrl_publisher\n}\n\nfragment PublisherHeaderBackground_customStyleSheet on CustomStyleSheet {\n  id\n  global {\n    colorPalette {\n      background {\n        rgb\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  header {\n    headerScale\n    backgroundImageDisplayMode\n    backgroundImageVerticalAlignment\n    backgroundColorDisplayMode\n    backgroundColor {\n      alpha\n      rgb\n      ...getHexFromColorValue_colorValue\n      ...getOpaqueHexFromColorValue_colorValue\n      __typename\n    }\n    secondaryBackgroundColor {\n      ...getHexFromColorValue_colorValue\n      __typename\n    }\n    postBackgroundColor {\n      ...getHexFromColorValue_colorValue\n      __typename\n    }\n    backgroundImage {\n      ...MetaHeaderBackground_imageMetadata\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment getHexFromColorValue_colorValue on ColorValue {\n  rgb\n  alpha\n  __typename\n}\n\nfragment getOpaqueHexFromColorValue_colorValue on ColorValue {\n  rgb\n  __typename\n}\n\nfragment MetaHeaderBackground_imageMetadata on ImageMetadata {\n  id\n  originalWidth\n  __typename\n}\n\nfragment collectionTintBackgroundTheme_collection on Collection {\n  colorPalette {\n    ...collectionTintBackgroundTheme_colorPalette\n    __typename\n  }\n  customStyleSheet {\n    id\n    ...collectionTintBackgroundTheme_customStyleSheet\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment collectionTintBackgroundTheme_colorPalette on ColorPalette {\n  ...customTintBackgroundTheme_colorPalette\n  __typename\n}\n\nfragment customTintBackgroundTheme_colorPalette on ColorPalette {\n  tintBackgroundSpectrum {\n    ...ThemeUtil_colorSpectrum\n    __typename\n  }\n  __typename\n}\n\nfragment ThemeUtil_colorSpectrum on ColorSpectrum {\n  backgroundColor\n  ...ThemeUtilInterpolateHelpers_colorSpectrum\n  __typename\n}\n\nfragment ThemeUtilInterpolateHelpers_colorSpectrum on ColorSpectrum {\n  colorPoints {\n    ...ThemeUtil_colorPoint\n    __typename\n  }\n  __typename\n}\n\nfragment ThemeUtil_colorPoint on ColorPoint {\n  color\n  point\n  __typename\n}\n\nfragment collectionTintBackgroundTheme_customStyleSheet on CustomStyleSheet {\n  id\n  ...customTintBackgroundTheme_customStyleSheet\n  __typename\n}\n\nfragment customTintBackgroundTheme_customStyleSheet on CustomStyleSheet {\n  id\n  global {\n    colorPalette {\n      primary {\n        colorPalette {\n          ...customTintBackgroundTheme_colorPalette\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment publisherUrl_publisher on Publisher {\n  id\n  __typename\n  ... on Collection {\n    ...collectionUrl_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...userUrl_user\n    __typename\n    id\n  }\n}\n\nfragment collectionUrl_collection on Collection {\n  id\n  domain\n  slug\n  __typename\n}\n\nfragment userUrl_user on User {\n  __typename\n  id\n  customDomainState {\n    live {\n      domain\n      __typename\n    }\n    __typename\n  }\n  hasSubdomain\n  username\n}\n\nfragment PublisherHeaderNameplate_publisher on Publisher {\n  ...PublisherAvatar_publisher\n  ...PublisherHeaderLogo_publisher\n  ...PublisherFollowerCount_publisher\n  __typename\n}\n\nfragment PublisherAvatar_publisher on Publisher {\n  __typename\n  ... on Collection {\n    id\n    ...CollectionAvatar_collection\n    __typename\n  }\n  ... on User {\n    id\n    ...UserAvatar_user\n    __typename\n  }\n}\n\nfragment CollectionAvatar_collection on Collection {\n  name\n  avatar {\n    id\n    __typename\n  }\n  ...collectionUrl_collection\n  __typename\n  id\n}\n\nfragment UserAvatar_user on User {\n  __typename\n  id\n  imageId\n  mediumMemberAt\n  name\n  username\n  ...userUrl_user\n}\n\nfragment PublisherHeaderLogo_publisher on Publisher {\n  __typename\n  id\n  customStyleSheet {\n    id\n    header {\n      logoImage {\n        id\n        originalHeight\n        originalWidth\n        __typename\n      }\n      appNameColor {\n        ...getHexFromColorValue_colorValue\n        __typename\n      }\n      appNameTreatment\n      __typename\n    }\n    __typename\n  }\n  name\n  ... on Collection {\n    isAuroraVisible\n    logo {\n      id\n      originalHeight\n      originalWidth\n      __typename\n    }\n    __typename\n    id\n  }\n  ...CustomHeaderTooltip_publisher\n  ...publisherUrl_publisher\n}\n\nfragment CustomHeaderTooltip_publisher on Publisher {\n  __typename\n  id\n  customStyleSheet {\n    id\n    header {\n      appNameTreatment\n      nameTreatment\n      __typename\n    }\n    __typename\n  }\n  ... on Collection {\n    isAuroraVisible\n    slug\n    __typename\n    id\n  }\n}\n\nfragment PublisherFollowerCount_publisher on Publisher {\n  __typename\n  id\n  ... on Collection {\n    slug\n    subscriberCount\n    __typename\n    id\n  }\n  ... on User {\n    socialStats {\n      followerCount\n      __typename\n    }\n    username\n    __typename\n    id\n  }\n}\n\nfragment PublisherHeaderActions_publisher on Publisher {\n  __typename\n  ...MetaHeaderPubMenu_publisher\n  ... on Collection {\n    ...CollectionFollowButton_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...FollowAndSubscribeButtons_user\n    __typename\n    id\n  }\n}\n\nfragment MetaHeaderPubMenu_publisher on Publisher {\n  __typename\n  ... on Collection {\n    ...MetaHeaderPubMenu_publisher_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...MetaHeaderPubMenu_publisher_user\n    __typename\n    id\n  }\n}\n\nfragment MetaHeaderPubMenu_publisher_collection on Collection {\n  id\n  slug\n  name\n  domain\n  newsletterV3 {\n    slug\n    __typename\n    id\n  }\n  ...MutePopoverOptions_collection\n  __typename\n}\n\nfragment MutePopoverOptions_collection on Collection {\n  id\n  __typename\n}\n\nfragment MetaHeaderPubMenu_publisher_user on User {\n  id\n  username\n  ...MutePopoverOptions_creator\n  __typename\n}\n\nfragment MutePopoverOptions_creator on User {\n  id\n  __typename\n}\n\nfragment CollectionFollowButton_collection on Collection {\n  __typename\n  id\n  name\n  slug\n  ...collectionUrl_collection\n  ...SusiClickable_collection\n}\n\nfragment SusiClickable_collection on Collection {\n  ...SusiContainer_collection\n  __typename\n  id\n}\n\nfragment SusiContainer_collection on Collection {\n  name\n  ...SignInOptions_collection\n  ...SignUpOptions_collection\n  __typename\n  id\n}\n\nfragment SignInOptions_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment SignUpOptions_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment FollowAndSubscribeButtons_user on User {\n  ...UserFollowButton_user\n  ...UserSubscribeButton_user\n  __typename\n  id\n}\n\nfragment UserFollowButton_user on User {\n  ...UserFollowButtonSignedIn_user\n  ...UserFollowButtonSignedOut_user\n  __typename\n  id\n}\n\nfragment UserFollowButtonSignedIn_user on User {\n  id\n  __typename\n}\n\nfragment UserFollowButtonSignedOut_user on User {\n  id\n  ...SusiClickable_user\n  __typename\n}\n\nfragment SusiClickable_user on User {\n  ...SusiContainer_user\n  __typename\n  id\n}\n\nfragment SusiContainer_user on User {\n  ...SignInOptions_user\n  ...SignUpOptions_user\n  __typename\n  id\n}\n\nfragment SignInOptions_user on User {\n  id\n  name\n  __typename\n}\n\nfragment SignUpOptions_user on User {\n  id\n  name\n  __typename\n}\n\nfragment UserSubscribeButton_user on User {\n  id\n  isPartnerProgramEnrolled\n  name\n  viewerEdge {\n    id\n    isFollowing\n    isUser\n    __typename\n  }\n  viewerIsUser\n  newsletterV3 {\n    id\n    ...useNewsletterV3Subscription_newsletterV3\n    __typename\n  }\n  ...useNewsletterV3Subscription_user\n  ...MembershipUpsellModal_user\n  __typename\n}\n\nfragment useNewsletterV3Subscription_newsletterV3 on NewsletterV3 {\n  id\n  type\n  slug\n  name\n  collection {\n    slug\n    __typename\n    id\n  }\n  user {\n    id\n    name\n    username\n    newsletterV3 {\n      id\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment useNewsletterV3Subscription_user on User {\n  id\n  username\n  newsletterV3 {\n    ...useNewsletterV3Subscription_newsletterV3\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment MembershipUpsellModal_user on User {\n  id\n  name\n  imageId\n  postSubscribeMembershipUpsellShownAt\n  newsletterV3 {\n    id\n    __typename\n  }\n  __typename\n}\n\nfragment PublisherHeaderNav_publisher on Publisher {\n  __typename\n  id\n  customStyleSheet {\n    navigation {\n      navItems {\n        name\n        ...PublisherHeaderNavLink_headerNavigationItem\n        __typename\n      }\n      __typename\n    }\n    __typename\n    id\n  }\n  ...PublisherHeaderNavLink_publisher\n  ... on Collection {\n    domain\n    isAuroraVisible\n    slug\n    navItems {\n      tagSlug\n      title\n      url\n      __typename\n    }\n    __typename\n    id\n  }\n  ... on User {\n    customDomainState {\n      live {\n        domain\n        __typename\n      }\n      __typename\n    }\n    hasSubdomain\n    username\n    about\n    homePostsPublished: homepagePostsConnection(paging: {limit: 1}) {\n      posts {\n        id\n        __typename\n      }\n      __typename\n    }\n    __typename\n    id\n  }\n}\n\nfragment PublisherHeaderNavLink_headerNavigationItem on HeaderNavigationItem {\n  href\n  name\n  tags {\n    id\n    normalizedTagSlug\n    __typename\n  }\n  type\n  __typename\n}\n\nfragment PublisherHeaderNavLink_publisher on Publisher {\n  __typename\n  id\n  ... on Collection {\n    slug\n    __typename\n    id\n  }\n}\n\nfragment PublisherHomePosts_publisher on Publisher {\n  __typename\n  id\n  homepagePostsConnection(\n    paging: {limit: $homepagePostsLimit, from: $homepagePostsFrom}\n    includeDistributedResponses: $includeDistributedResponses\n  ) {\n    posts {\n      ...PublisherHomePosts_post\n      __typename\n    }\n    pagingInfo {\n      next {\n        from\n        limit\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  ...CardByline_publisher\n  ...NewsletterV3Promo_publisher\n  ...PublisherHomePosts_user\n}\n\nfragment PublisherHomePosts_post on Post {\n  id\n  collection {\n    id\n    name\n    ...collectionUrl_collection\n    __typename\n  }\n  ...ExpandablePost_post\n  __typename\n}\n\nfragment ExpandablePost_post on Post {\n  id\n  creator {\n    ...ExpandablePost_user\n    __typename\n    id\n  }\n  collection {\n    ...CardByline_collection\n    __typename\n    id\n  }\n  ...InteractivePostBody_postPreview\n  firstPublishedAt\n  isLocked\n  isSeries\n  isShortform\n  latestPublishedAt\n  inResponseToCatalogResult {\n    __typename\n  }\n  mediumUrl\n  postResponses {\n    count\n    __typename\n  }\n  previewImage {\n    id\n    focusPercentX\n    focusPercentY\n    __typename\n  }\n  readingTime\n  sequence {\n    slug\n    __typename\n  }\n  title\n  uniqueSlug\n  visibility\n  ...CardByline_post\n  ...ExpandablePostFooter_post\n  ...InResponseToEntityPreview_post\n  ...PostScrollTracker_post\n  ...ReadMore_post\n  ...HighDensityPreview_post\n  __typename\n}\n\nfragment ExpandablePost_user on User {\n  __typename\n  name\n  username\n  ...CardByline_user\n  id\n}\n\nfragment CardByline_user on User {\n  __typename\n  id\n  name\n  username\n  mediumMemberAt\n  socialStats {\n    followerCount\n    __typename\n  }\n  ...userUrl_user\n  ...UserMentionTooltip_user\n}\n\nfragment UserMentionTooltip_user on User {\n  id\n  name\n  username\n  bio\n  imageId\n  mediumMemberAt\n  ...UserAvatar_user\n  ...UserFollowButton_user\n  __typename\n}\n\nfragment CardByline_collection on Collection {\n  __typename\n  id\n  name\n  ...collectionUrl_collection\n}\n\nfragment InteractivePostBody_postPreview on Post {\n  extendedPreviewContent(\n    truncationConfig: {previewParagraphsWordCountThreshold: 400, minimumWordLengthForTruncation: 150, truncateAtEndOfSentence: true, showFullImageCaptions: true, shortformPreviewParagraphsWordCountThreshold: 30, shortformMinimumWordLengthForTruncation: 30}\n  ) {\n    bodyModel {\n      ...PostBody_bodyModel\n      __typename\n    }\n    isFullContent\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment PostBody_bodyModel on RichText {\n  sections {\n    name\n    startIndex\n    textLayout\n    imageLayout\n    backgroundImage {\n      id\n      originalHeight\n      originalWidth\n      __typename\n    }\n    videoLayout\n    backgroundVideo {\n      videoId\n      originalHeight\n      originalWidth\n      previewImageId\n      __typename\n    }\n    __typename\n  }\n  paragraphs {\n    id\n    ...PostBodySection_paragraph\n    __typename\n  }\n  ...normalizedBodyModel_richText\n  __typename\n}\n\nfragment PostBodySection_paragraph on Paragraph {\n  name\n  ...PostBodyParagraph_paragraph\n  __typename\n  id\n}\n\nfragment PostBodyParagraph_paragraph on Paragraph {\n  name\n  type\n  ...ImageParagraph_paragraph\n  ...TextParagraph_paragraph\n  ...IframeParagraph_paragraph\n  ...MixtapeParagraph_paragraph\n  __typename\n  id\n}\n\nfragment ImageParagraph_paragraph on Paragraph {\n  href\n  layout\n  metadata {\n    id\n    originalHeight\n    originalWidth\n    focusPercentX\n    focusPercentY\n    alt\n    __typename\n  }\n  ...Markups_paragraph\n  ...ParagraphRefsMapContext_paragraph\n  ...PostAnnotationsMarker_paragraph\n  __typename\n  id\n}\n\nfragment Markups_paragraph on Paragraph {\n  name\n  text\n  hasDropCap\n  dropCapImage {\n    ...MarkupNode_data_dropCapImage\n    __typename\n    id\n  }\n  markups {\n    type\n    start\n    end\n    href\n    anchorType\n    userId\n    linkMetadata {\n      httpStatus\n      __typename\n    }\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment MarkupNode_data_dropCapImage on ImageMetadata {\n  ...DropCap_image\n  __typename\n  id\n}\n\nfragment DropCap_image on ImageMetadata {\n  id\n  originalHeight\n  originalWidth\n  __typename\n}\n\nfragment ParagraphRefsMapContext_paragraph on Paragraph {\n  id\n  name\n  text\n  __typename\n}\n\nfragment PostAnnotationsMarker_paragraph on Paragraph {\n  ...PostViewNoteCard_paragraph\n  __typename\n  id\n}\n\nfragment PostViewNoteCard_paragraph on Paragraph {\n  name\n  __typename\n  id\n}\n\nfragment TextParagraph_paragraph on Paragraph {\n  type\n  hasDropCap\n  ...Markups_paragraph\n  ...ParagraphRefsMapContext_paragraph\n  __typename\n  id\n}\n\nfragment IframeParagraph_paragraph on Paragraph {\n  iframe {\n    mediaResource {\n      id\n      iframeSrc\n      iframeHeight\n      iframeWidth\n      title\n      __typename\n    }\n    __typename\n  }\n  layout\n  ...getEmbedlyCardUrlParams_paragraph\n  ...Markups_paragraph\n  __typename\n  id\n}\n\nfragment getEmbedlyCardUrlParams_paragraph on Paragraph {\n  type\n  iframe {\n    mediaResource {\n      iframeSrc\n      __typename\n    }\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment MixtapeParagraph_paragraph on Paragraph {\n  type\n  mixtapeMetadata {\n    href\n    mediaResource {\n      mediumCatalog {\n        id\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  ...GenericMixtapeParagraph_paragraph\n  __typename\n  id\n}\n\nfragment GenericMixtapeParagraph_paragraph on Paragraph {\n  text\n  mixtapeMetadata {\n    href\n    thumbnailImageId\n    __typename\n  }\n  markups {\n    start\n    end\n    type\n    href\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment normalizedBodyModel_richText on RichText {\n  paragraphs {\n    markups {\n      type\n      __typename\n    }\n    ...getParagraphHighlights_paragraph\n    ...getParagraphPrivateNotes_paragraph\n    __typename\n  }\n  sections {\n    startIndex\n    ...getSectionEndIndex_section\n    __typename\n  }\n  ...getParagraphStyles_richText\n  ...getParagraphSpaces_richText\n  __typename\n}\n\nfragment getParagraphHighlights_paragraph on Paragraph {\n  name\n  __typename\n  id\n}\n\nfragment getParagraphPrivateNotes_paragraph on Paragraph {\n  name\n  __typename\n  id\n}\n\nfragment getSectionEndIndex_section on Section {\n  startIndex\n  __typename\n}\n\nfragment getParagraphStyles_richText on RichText {\n  paragraphs {\n    text\n    type\n    __typename\n  }\n  sections {\n    ...getSectionEndIndex_section\n    __typename\n  }\n  __typename\n}\n\nfragment getParagraphSpaces_richText on RichText {\n  paragraphs {\n    layout\n    metadata {\n      originalHeight\n      originalWidth\n      __typename\n    }\n    type\n    ...paragraphExtendsImageGrid_paragraph\n    __typename\n  }\n  ...getSeriesParagraphTopSpacings_richText\n  ...getPostParagraphTopSpacings_richText\n  __typename\n}\n\nfragment paragraphExtendsImageGrid_paragraph on Paragraph {\n  layout\n  type\n  __typename\n  id\n}\n\nfragment getSeriesParagraphTopSpacings_richText on RichText {\n  paragraphs {\n    id\n    __typename\n  }\n  sections {\n    startIndex\n    __typename\n  }\n  __typename\n}\n\nfragment getPostParagraphTopSpacings_richText on RichText {\n  paragraphs {\n    layout\n    text\n    __typename\n  }\n  sections {\n    startIndex\n    __typename\n  }\n  __typename\n}\n\nfragment CardByline_post on Post {\n  ...DraftStatus_post\n  __typename\n  id\n}\n\nfragment DraftStatus_post on Post {\n  id\n  pendingCollection {\n    id\n    creator {\n      id\n      __typename\n    }\n    ...BoldCollectionName_collection\n    __typename\n  }\n  statusForCollection\n  creator {\n    id\n    __typename\n  }\n  isPublished\n  __typename\n}\n\nfragment BoldCollectionName_collection on Collection {\n  id\n  name\n  __typename\n}\n\nfragment ExpandablePostFooter_post on Post {\n  id\n  allowResponses\n  postResponses {\n    count\n    __typename\n  }\n  isLimitedState\n  ...ExpandablePostCardOverflowButton_post\n  ...BookmarkButton_post\n  ...PostFooterSocialPopover_post\n  ...MultiVote_post\n  ...OverflowMenuButtonWithNegativeSignal_post\n  __typename\n}\n\nfragment ExpandablePostCardOverflowButton_post on Post {\n  creator {\n    id\n    __typename\n  }\n  ...ExpandablePostCardEditorWriterButton_post\n  ...ExpandablePostCardReaderButton_post\n  __typename\n  id\n}\n\nfragment ExpandablePostCardEditorWriterButton_post on Post {\n  id\n  collection {\n    id\n    name\n    slug\n    __typename\n  }\n  allowResponses\n  clapCount\n  visibility\n  mediumUrl\n  responseDistribution\n  ...useIsPinnedInContext_post\n  ...CopyFriendLinkMenuItem_post\n  ...NewsletterV3EmailToSubscribersMenuItem_post\n  ...OverflowMenuItemUndoClaps_post\n  __typename\n}\n\nfragment useIsPinnedInContext_post on Post {\n  id\n  collection {\n    id\n    __typename\n  }\n  pendingCollection {\n    id\n    __typename\n  }\n  pinnedAt\n  pinnedByCreatorAt\n  __typename\n}\n\nfragment CopyFriendLinkMenuItem_post on Post {\n  id\n  __typename\n}\n\nfragment NewsletterV3EmailToSubscribersMenuItem_post on Post {\n  id\n  creator {\n    id\n    newsletterV3 {\n      id\n      subscribersCount\n      __typename\n    }\n    __typename\n  }\n  isNewsletter\n  isAuthorNewsletter\n  __typename\n}\n\nfragment OverflowMenuItemUndoClaps_post on Post {\n  id\n  clapCount\n  ...ClapMutation_post\n  __typename\n}\n\nfragment ClapMutation_post on Post {\n  __typename\n  id\n  clapCount\n  ...MultiVoteCount_post\n}\n\nfragment MultiVoteCount_post on Post {\n  id\n  ...PostVotersNetwork_post\n  __typename\n}\n\nfragment PostVotersNetwork_post on Post {\n  id\n  voterCount\n  recommenders {\n    name\n    __typename\n  }\n  __typename\n}\n\nfragment ExpandablePostCardReaderButton_post on Post {\n  id\n  collection {\n    id\n    __typename\n  }\n  creator {\n    id\n    __typename\n  }\n  clapCount\n  ...ClapMutation_post\n  __typename\n}\n\nfragment BookmarkButton_post on Post {\n  visibility\n  ...SusiClickable_post\n  ...AddToCatalogBookmarkButton_post\n  __typename\n  id\n}\n\nfragment SusiClickable_post on Post {\n  id\n  mediumUrl\n  ...SusiContainer_post\n  __typename\n}\n\nfragment SusiContainer_post on Post {\n  id\n  __typename\n}\n\nfragment AddToCatalogBookmarkButton_post on Post {\n  ...AddToCatalogBase_post\n  __typename\n  id\n}\n\nfragment AddToCatalogBase_post on Post {\n  id\n  __typename\n}\n\nfragment PostFooterSocialPopover_post on Post {\n  id\n  mediumUrl\n  title\n  ...SharePostButton_post\n  __typename\n}\n\nfragment SharePostButton_post on Post {\n  id\n  __typename\n}\n\nfragment MultiVote_post on Post {\n  id\n  clapCount\n  creator {\n    id\n    ...SusiClickable_user\n    __typename\n  }\n  isPublished\n  ...SusiClickable_post\n  collection {\n    id\n    slug\n    __typename\n  }\n  isLimitedState\n  ...MultiVoteCount_post\n  __typename\n}\n\nfragment OverflowMenuButtonWithNegativeSignal_post on Post {\n  id\n  ...OverflowMenuWithNegativeSignal_post\n  ...CreatorActionOverflowPopover_post\n  __typename\n}\n\nfragment OverflowMenuWithNegativeSignal_post on Post {\n  id\n  creator {\n    id\n    __typename\n  }\n  collection {\n    id\n    __typename\n  }\n  ...OverflowMenuItemUndoClaps_post\n  __typename\n}\n\nfragment CreatorActionOverflowPopover_post on Post {\n  allowResponses\n  id\n  statusForCollection\n  isLocked\n  isPublished\n  clapCount\n  mediumUrl\n  pinnedAt\n  pinnedByCreatorAt\n  curationEligibleAt\n  mediumUrl\n  responseDistribution\n  visibility\n  inResponseToPostResult {\n    __typename\n  }\n  inResponseToCatalogResult {\n    __typename\n  }\n  pendingCollection {\n    id\n    name\n    creator {\n      id\n      __typename\n    }\n    avatar {\n      id\n      __typename\n    }\n    domain\n    slug\n    __typename\n  }\n  creator {\n    id\n    ...MutePopoverOptions_creator\n    ...auroraHooks_publisher\n    __typename\n  }\n  collection {\n    id\n    name\n    creator {\n      id\n      __typename\n    }\n    avatar {\n      id\n      __typename\n    }\n    domain\n    slug\n    ...MutePopoverOptions_collection\n    ...auroraHooks_publisher\n    __typename\n  }\n  ...useIsPinnedInContext_post\n  ...NewsletterV3EmailToSubscribersMenuItem_post\n  ...OverflowMenuItemUndoClaps_post\n  __typename\n}\n\nfragment auroraHooks_publisher on Publisher {\n  __typename\n  ... on Collection {\n    isAuroraEligible\n    isAuroraVisible\n    viewerEdge {\n      id\n      isEditor\n      __typename\n    }\n    __typename\n    id\n  }\n  ... on User {\n    isAuroraVisible\n    __typename\n    id\n  }\n}\n\nfragment InResponseToEntityPreview_post on Post {\n  id\n  inResponseToEntityType\n  __typename\n}\n\nfragment PostScrollTracker_post on Post {\n  id\n  collection {\n    id\n    __typename\n  }\n  sequence {\n    sequenceId\n    __typename\n  }\n  __typename\n}\n\nfragment ReadMore_post on Post {\n  mediumUrl\n  readingTime\n  ...usePostUrl_post\n  __typename\n  id\n}\n\nfragment usePostUrl_post on Post {\n  id\n  creator {\n    ...userUrl_user\n    __typename\n    id\n  }\n  collection {\n    id\n    domain\n    slug\n    __typename\n  }\n  isSeries\n  mediumUrl\n  sequence {\n    slug\n    __typename\n  }\n  uniqueSlug\n  __typename\n}\n\nfragment HighDensityPreview_post on Post {\n  id\n  title\n  previewImage {\n    id\n    focusPercentX\n    focusPercentY\n    __typename\n  }\n  extendedPreviewContent(\n    truncationConfig: {previewParagraphsWordCountThreshold: 400, minimumWordLengthForTruncation: 150, truncateAtEndOfSentence: true, showFullImageCaptions: true, shortformPreviewParagraphsWordCountThreshold: 30, shortformMinimumWordLengthForTruncation: 30}\n  ) {\n    subtitle\n    __typename\n  }\n  ...HighDensityFooter_post\n  __typename\n}\n\nfragment HighDensityFooter_post on Post {\n  id\n  readingTime\n  tags {\n    ...TopicPill_tag\n    __typename\n  }\n  ...BookmarkButton_post\n  ...ExpandablePostCardOverflowButton_post\n  ...OverflowMenuButtonWithNegativeSignal_post\n  __typename\n}\n\nfragment TopicPill_tag on Tag {\n  __typename\n  id\n  displayTitle\n}\n\nfragment CardByline_publisher on Publisher {\n  __typename\n  ... on User {\n    id\n    ...CardByline_user\n    __typename\n  }\n  ... on Collection {\n    id\n    ...CardByline_collection\n    __typename\n  }\n}\n\nfragment NewsletterV3Promo_publisher on Publisher {\n  __typename\n  ... on User {\n    ...NewsletterV3Promo_publisher_User\n    __typename\n    id\n  }\n  ... on Collection {\n    ...NewsletterV3Promo_publisher_Collection\n    __typename\n    id\n  }\n}\n\nfragment NewsletterV3Promo_publisher_User on User {\n  id\n  username\n  name\n  viewerIsUser\n  newsletterV3 {\n    id\n    ...NewsletterV3Promo_newsletterV3\n    __typename\n  }\n  __typename\n}\n\nfragment NewsletterV3Promo_newsletterV3 on NewsletterV3 {\n  slug\n  name\n  description\n  promoHeadline\n  promoBody\n  ...NewsletterV3AmpButton_newsletterV3\n  ...NewsletterV3SubscribeButton_newsletterV3\n  ...NewsletterV3SubscribeByEmail_newsletterV3\n  __typename\n  id\n}\n\nfragment NewsletterV3AmpButton_newsletterV3 on NewsletterV3 {\n  id\n  collection {\n    ...collectionDefaultBackgroundTheme_collection\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment collectionDefaultBackgroundTheme_collection on Collection {\n  colorPalette {\n    ...collectionDefaultBackgroundTheme_colorPalette\n    __typename\n  }\n  customStyleSheet {\n    id\n    ...collectionDefaultBackgroundTheme_customStyleSheet\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment collectionDefaultBackgroundTheme_colorPalette on ColorPalette {\n  ...customDefaultBackgroundTheme_colorPalette\n  __typename\n}\n\nfragment customDefaultBackgroundTheme_colorPalette on ColorPalette {\n  highlightSpectrum {\n    ...ThemeUtil_colorSpectrum\n    __typename\n  }\n  defaultBackgroundSpectrum {\n    ...ThemeUtil_colorSpectrum\n    __typename\n  }\n  tintBackgroundSpectrum {\n    ...ThemeUtil_colorSpectrum\n    __typename\n  }\n  __typename\n}\n\nfragment collectionDefaultBackgroundTheme_customStyleSheet on CustomStyleSheet {\n  id\n  ...customDefaultBackgroundTheme_customStyleSheet\n  __typename\n}\n\nfragment customDefaultBackgroundTheme_customStyleSheet on CustomStyleSheet {\n  id\n  global {\n    colorPalette {\n      primary {\n        colorPalette {\n          ...customDefaultBackgroundTheme_colorPalette\n          __typename\n        }\n        __typename\n      }\n      background {\n        colorPalette {\n          ...customDefaultBackgroundTheme_colorPalette\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment NewsletterV3SubscribeButton_newsletterV3 on NewsletterV3 {\n  id\n  name\n  slug\n  type\n  user {\n    id\n    name\n    username\n    __typename\n  }\n  collection {\n    slug\n    ...SusiClickable_collection\n    ...collectionDefaultBackgroundTheme_collection\n    __typename\n    id\n  }\n  ...SusiClickable_newsletterV3\n  ...useNewsletterV3Subscription_newsletterV3\n  __typename\n}\n\nfragment SusiClickable_newsletterV3 on NewsletterV3 {\n  ...SusiContainer_newsletterV3\n  __typename\n  id\n}\n\nfragment SusiContainer_newsletterV3 on NewsletterV3 {\n  ...SignInOptions_newsletterV3\n  ...SignUpOptions_newsletterV3\n  __typename\n  id\n}\n\nfragment SignInOptions_newsletterV3 on NewsletterV3 {\n  id\n  name\n  __typename\n}\n\nfragment SignUpOptions_newsletterV3 on NewsletterV3 {\n  id\n  name\n  __typename\n}\n\nfragment NewsletterV3SubscribeByEmail_newsletterV3 on NewsletterV3 {\n  id\n  slug\n  type\n  user {\n    id\n    name\n    username\n    __typename\n  }\n  collection {\n    ...collectionDefaultBackgroundTheme_collection\n    ...collectionUrl_collection\n    __typename\n    id\n  }\n  __typename\n}\n\nfragment NewsletterV3Promo_publisher_Collection on Collection {\n  id\n  slug\n  domain\n  name\n  newsletterV3 {\n    id\n    ...NewsletterV3Promo_newsletterV3\n    __typename\n  }\n  __typename\n}\n\nfragment PublisherHomePosts_user on User {\n  id\n  ...useShowAuthorNewsletterV3Promo_user\n  __typename\n}\n\nfragment useShowAuthorNewsletterV3Promo_user on User {\n  id\n  username\n  newsletterV3 {\n    id\n    showPromo\n    slug\n    __typename\n  }\n  __typename\n}\n\nfragment UserSubdomainFlow_user on User {\n  id\n  hasCompletedProfile\n  name\n  bio\n  imageId\n  ...UserCompleteProfileDialog_user\n  ...UserSubdomainOnboardingDialog_user\n  __typename\n}\n\nfragment UserCompleteProfileDialog_user on User {\n  id\n  name\n  bio\n  imageId\n  hasCompletedProfile\n  __typename\n}\n\nfragment UserSubdomainOnboardingDialog_user on User {\n  id\n  customDomainState {\n    pending {\n      status\n      __typename\n    }\n    live {\n      status\n      __typename\n    }\n    __typename\n  }\n  username\n  __typename\n}\n\nfragment UserProfileMetadata_user on User {\n  id\n  username\n  name\n  bio\n  socialStats {\n    followerCount\n    followingCount\n    __typename\n  }\n  ...userUrl_user\n  ...UserProfileMetadataHelmet_user\n  __typename\n}\n\nfragment UserProfileMetadataHelmet_user on User {\n  username\n  name\n  imageId\n  twitterScreenName\n  navItems {\n    title\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment SuspendedBannerLoader_user on User {\n  id\n  isSuspended\n  __typename\n}\n\nfragment useAnalytics_user on User {\n  id\n  imageId\n  name\n  username\n  __typename\n}\n\nfragment EntityDrivenSubscriptionLandingPageScreen_writer on User {\n  name\n  imageId\n  id\n  username\n  isPartnerProgramEnrolled\n  customStyleSheet {\n    ...CustomThemeProvider_customStyleSheet\n    ...CustomBackgroundWrapper_customStyleSheet\n    ...MetaHeader_customStyleSheet\n    __typename\n    id\n  }\n  ...MetaHeader_publisher\n  ...userUrl_user\n  __typename\n}\n\nfragment CustomThemeProvider_customStyleSheet on CustomStyleSheet {\n  id\n  ...customDefaultBackgroundTheme_customStyleSheet\n  ...customStyleSheetFontTheme_customStyleSheet\n  __typename\n}\n\nfragment customStyleSheetFontTheme_customStyleSheet on CustomStyleSheet {\n  id\n  global {\n    fonts {\n      font1 {\n        name\n        __typename\n      }\n      font2 {\n        name\n        __typename\n      }\n      font3 {\n        name\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment CustomBackgroundWrapper_customStyleSheet on CustomStyleSheet {\n  id\n  global {\n    colorPalette {\n      background {\n        ...getHexFromColorValue_colorValue\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment MetaHeader_customStyleSheet on CustomStyleSheet {\n  id\n  header {\n    headerScale\n    horizontalAlignment\n    __typename\n  }\n  ...MetaHeaderBackground_customStyleSheet\n  ...MetaHeaderEngagement_customStyleSheet\n  ...MetaHeaderLogo_customStyleSheet\n  ...MetaHeaderNavVertical_customStyleSheet\n  ...MetaHeaderTagline_customStyleSheet\n  ...MetaHeaderThemeProvider_customStyleSheet\n  __typename\n}\n\nfragment MetaHeaderBackground_customStyleSheet on CustomStyleSheet {\n  id\n  header {\n    headerScale\n    backgroundImageDisplayMode\n    backgroundImageVerticalAlignment\n    backgroundColorDisplayMode\n    backgroundColor {\n      ...getHexFromColorValue_colorValue\n      ...getOpaqueHexFromColorValue_colorValue\n      __typename\n    }\n    secondaryBackgroundColor {\n      ...getHexFromColorValue_colorValue\n      __typename\n    }\n    postBackgroundColor {\n      ...getHexFromColorValue_colorValue\n      __typename\n    }\n    backgroundImage {\n      ...MetaHeaderBackground_imageMetadata\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment MetaHeaderEngagement_customStyleSheet on CustomStyleSheet {\n  ...MetaHeaderNav_customStyleSheet\n  __typename\n  id\n}\n\nfragment MetaHeaderNav_customStyleSheet on CustomStyleSheet {\n  id\n  navigation {\n    navItems {\n      ...MetaHeaderNav_headerNavigationItem\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment MetaHeaderNav_headerNavigationItem on HeaderNavigationItem {\n  name\n  tagSlugs\n  ...MetaHeaderNavLink_headerNavigationItem\n  __typename\n}\n\nfragment MetaHeaderNavLink_headerNavigationItem on HeaderNavigationItem {\n  name\n  ...getNavItemHref_headerNavigationItem\n  __typename\n}\n\nfragment getNavItemHref_headerNavigationItem on HeaderNavigationItem {\n  href\n  type\n  tags {\n    id\n    normalizedTagSlug\n    __typename\n  }\n  __typename\n}\n\nfragment MetaHeaderLogo_customStyleSheet on CustomStyleSheet {\n  id\n  header {\n    nameColor {\n      ...getHexFromColorValue_colorValue\n      __typename\n    }\n    nameTreatment\n    postNameTreatment\n    logoImage {\n      ...MetaHeaderLogo_imageMetadata\n      __typename\n    }\n    logoScale\n    __typename\n  }\n  __typename\n}\n\nfragment MetaHeaderLogo_imageMetadata on ImageMetadata {\n  id\n  originalWidth\n  originalHeight\n  ...PublisherLogo_image\n  __typename\n}\n\nfragment PublisherLogo_image on ImageMetadata {\n  id\n  originalHeight\n  originalWidth\n  __typename\n}\n\nfragment MetaHeaderNavVertical_customStyleSheet on CustomStyleSheet {\n  id\n  navigation {\n    navItems {\n      ...MetaHeaderNavLink_headerNavigationItem\n      __typename\n    }\n    __typename\n  }\n  ...MetaHeaderNav_customStyleSheet\n  __typename\n}\n\nfragment MetaHeaderTagline_customStyleSheet on CustomStyleSheet {\n  id\n  header {\n    taglineColor {\n      ...getHexFromColorValue_colorValue\n      __typename\n    }\n    taglineTreatment\n    __typename\n  }\n  __typename\n}\n\nfragment MetaHeaderThemeProvider_customStyleSheet on CustomStyleSheet {\n  id\n  ...useMetaHeaderTheme_customStyleSheet\n  __typename\n}\n\nfragment useMetaHeaderTheme_customStyleSheet on CustomStyleSheet {\n  ...customDefaultBackgroundTheme_customStyleSheet\n  global {\n    colorPalette {\n      primary {\n        colorPalette {\n          tintBackgroundSpectrum {\n            ...ThemeUtil_colorSpectrum\n            __typename\n          }\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  header {\n    backgroundColor {\n      colorPalette {\n        tintBackgroundSpectrum {\n          ...ThemeUtil_colorSpectrum\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    postBackgroundColor {\n      colorPalette {\n        tintBackgroundSpectrum {\n          ...ThemeUtil_colorSpectrum\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    backgroundImage {\n      id\n      __typename\n    }\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment MetaHeader_publisher on Publisher {\n  __typename\n  name\n  ...MetaHeaderEngagement_publisher\n  ...MetaHeaderLogo_publisher\n  ...MetaHeaderNavVertical_publisher\n  ...MetaHeaderTagline_publisher\n  ...MetaHeaderThemeProvider_publisher\n  ...MetaHeaderActions_publisher\n  ...MetaHeaderTop_publisher\n  ...MetaHeaderNavLink_publisher\n  ... on Collection {\n    id\n    favicon {\n      id\n      __typename\n    }\n    tagline\n    ...CollectionNavigationContextProvider_collection\n    __typename\n  }\n  ... on User {\n    id\n    bio\n    ...UserProfileCatalogsLink_publisher\n    __typename\n  }\n}\n\nfragment MetaHeaderEngagement_publisher on Publisher {\n  __typename\n  ...MetaHeaderNav_publisher\n  ...PublisherAboutLink_publisher\n  ...PublisherFollowButton_publisher\n  ...PublisherFollowerCount_publisher\n  ... on Collection {\n    creator {\n      id\n      __typename\n    }\n    customStyleSheet {\n      id\n      ...CustomThemeProvider_customStyleSheet\n      __typename\n    }\n    __typename\n    id\n  }\n  ... on User {\n    ...UserProfileCatalogsLink_publisher\n    ...UserSubscribeButton_user\n    customStyleSheet {\n      id\n      ...CustomThemeProvider_customStyleSheet\n      __typename\n    }\n    __typename\n    id\n  }\n}\n\nfragment MetaHeaderNav_publisher on Publisher {\n  id\n  ...MetaHeaderNavLink_publisher\n  __typename\n}\n\nfragment MetaHeaderNavLink_publisher on Publisher {\n  id\n  ...getNavItemHref_publisher\n  __typename\n}\n\nfragment getNavItemHref_publisher on Publisher {\n  id\n  ...publisherUrl_publisher\n  __typename\n}\n\nfragment PublisherAboutLink_publisher on Publisher {\n  __typename\n  id\n  ... on Collection {\n    slug\n    __typename\n    id\n  }\n  ... on User {\n    ...userUrl_user\n    __typename\n    id\n  }\n}\n\nfragment PublisherFollowButton_publisher on Publisher {\n  __typename\n  ... on Collection {\n    ...CollectionFollowButton_collection\n    __typename\n    id\n  }\n  ... on User {\n    ...UserFollowButton_user\n    __typename\n    id\n  }\n}\n\nfragment UserProfileCatalogsLink_publisher on Publisher {\n  __typename\n  id\n  ... on User {\n    ...userUrl_user\n    homePostsPublished: homepagePostsConnection(paging: {limit: 1}) {\n      posts {\n        id\n        __typename\n      }\n      __typename\n    }\n    __typename\n    id\n  }\n}\n\nfragment MetaHeaderLogo_publisher on Publisher {\n  __typename\n  id\n  name\n  ... on Collection {\n    logo {\n      ...MetaHeaderLogo_imageMetadata\n      ...PublisherLogo_image\n      __typename\n      id\n    }\n    __typename\n    id\n  }\n  ...auroraHooks_publisher\n}\n\nfragment MetaHeaderNavVertical_publisher on Publisher {\n  id\n  ...PublisherAboutLink_publisher\n  ...MetaHeaderNav_publisher\n  ...MetaHeaderNavLink_publisher\n  __typename\n}\n\nfragment MetaHeaderTagline_publisher on Publisher {\n  __typename\n  ... on Collection {\n    tagline\n    __typename\n    id\n  }\n  ... on User {\n    bio\n    __typename\n    id\n  }\n}\n\nfragment MetaHeaderThemeProvider_publisher on Publisher {\n  __typename\n  customStyleSheet {\n    ...MetaHeaderThemeProvider_customStyleSheet\n    __typename\n    id\n  }\n  ... on Collection {\n    colorPalette {\n      ...customDefaultBackgroundTheme_colorPalette\n      __typename\n    }\n    __typename\n    id\n  }\n}\n\nfragment MetaHeaderActions_publisher on Publisher {\n  __typename\n  ...MetaHeaderPubMenu_publisher\n  ...SearchWidget_publisher\n  ... on Collection {\n    id\n    creator {\n      id\n      __typename\n    }\n    customStyleSheet {\n      navigation {\n        navItems {\n          name\n          __typename\n        }\n        __typename\n      }\n      __typename\n      id\n    }\n    ...CollectionAvatar_collection\n    ...CollectionMetabarActionsPopover_collection\n    ...MetaHeaderActions_collection_common\n    __typename\n  }\n  ... on User {\n    id\n    ...UserAvatar_user\n    __typename\n  }\n}\n\nfragment SearchWidget_publisher on Publisher {\n  __typename\n  ... on Collection {\n    id\n    slug\n    name\n    domain\n    __typename\n  }\n  ... on User {\n    id\n    name\n    __typename\n  }\n  ...algoliaSearch_publisher\n}\n\nfragment algoliaSearch_publisher on Publisher {\n  __typename\n  id\n}\n\nfragment CollectionMetabarActionsPopover_collection on Collection {\n  id\n  slug\n  isAuroraEligible\n  isAuroraVisible\n  newsletterV3 {\n    id\n    slug\n    __typename\n  }\n  ...collectionUrl_collection\n  __typename\n}\n\nfragment MetaHeaderActions_collection_common on Collection {\n  creator {\n    id\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment MetaHeaderTop_publisher on Publisher {\n  __typename\n  ... on Collection {\n    slug\n    ...CollectionMetabarActionsPopover_collection\n    ...CollectionAvatar_collection\n    ...MetaHeaderTop_collection\n    __typename\n    id\n  }\n  ... on User {\n    username\n    id\n    __typename\n  }\n}\n\nfragment MetaHeaderTop_collection on Collection {\n  id\n  creator {\n    id\n    __typename\n  }\n  __typename\n}\n\nfragment CollectionNavigationContextProvider_collection on Collection {\n  id\n  domain\n  slug\n  isAuroraVisible\n  __typename\n}\n\nfragment useShouldShowEntityDrivenSubscription_creator on User {\n  id\n  __typename\n}\n"
      }
]