Gate Options
If you can read code, here is what we have under the hood. The GateFrameOption
type is used to define the options for a gate frame.
export type GateFrameOptionType = 'left' | 'center' | 'right'
export type GateFrameOption = {
id: string
icon: string // SVG code or icon id from lucide.dev
title: string // Gate frame title
url: string // Gate frame URL
profileKey?: string // Similar to a Chrome profile
hasRibbon?: boolean // If true, icon appears in the left sidebar
position?: GateFrameOptionType // 'left', 'center', or 'right'
userAgent?: string // User agent for the gate frame
zoomFactor?: number // Zoom factor (0.5 = 50%, 1.0 = 100%, 2.0 = 200%, etc.)
css?: string // Custom CSS for the gate frame
js?: string // Custom JavaScript for the gate frame
}
User Agent
Usually, you won't need to change the user agent. However, in some case, the website you are trying to embed may require a specific user agent to work correctly. For example, some websites may block requests from bots or crawlers. In this case, you can set the user agent to a common browser user agent to bypass this restriction.
Currently, default value is:
export default function getDefaultUserAgent() {
return `Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0/HBpt3US8-18`
}
profileKey
This property is intriguing as it allows you to embed multiple emails in your vault using the profileKey
for differentiation. The profileKey
acts as a namespace, enabling gates with the same profileKey
to share storage space. This facilitates using a single sign-on (SSO) to log into a website and maintaining the same session across all gates sharing that profileKey
.
In other words, profileKey
is like profile on Chrome.
zoomFactor
The zoomFactor
in the GateFrameOption
determines the magnification level of the content within a "Gate" frame in Obsidian. A value of 1 means 100% zoom (normal size), 0.5 means the content is reduced to 50% of its normal size, and a value of 2 means the content is enlarged to 200% of its normal size.
Css & Js Injection
css
and js
allows you to customize the appearance and functionality of embedded websites.
Example
- Use CSS to modify styles for a consistent look with Obsidian.
- Example:
html { font-family: 'Arial', sans-serif; }
changes the font.
- Example:
- Use JS to add interactivity or modify web content.
- Example:
document.body.style.backgroundColor = "lightblue";
changes the background color.
- Example:
Warning
- Incorrect CSS/JS may break the appearance/functionality of the gate.
- Be cautious with JS that interacts with external websites to avoid security risks.