@hortonstudio/main 1.2.5 → 1.2.6

package/attributes-master/packages/autovideo/src/init.ts

@@ -0,0 +1,52 @@
+import {
+  addListener,
+  type FinsweetAttributeInit,
+  isHTMLVideoElement,
+  waitWebflowReady,
+} from '@finsweet/attributes-utils';
+
+import type { VideoStore } from './types';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const videos = document.querySelectorAll('video');
+  if (!videos.length) return;
+
+  const videoStore: VideoStore = new Map();
+
+  const observer = new IntersectionObserver((entries) => {
+    for (const { target, isIntersecting } of entries) {
+      if (!isHTMLVideoElement(target)) continue;
+
+      if (isIntersecting) target.play();
+      else target.pause();
+
+      videoStore.set(target, isIntersecting);
+    }
+  }, {});
+
+  for (const video of videos) {
+    video.autoplay = false;
+    videoStore.set(video, null);
+    observer.observe(video);
+  }
+
+  const visibilityChangeCleanup = addListener(document, 'visibilitychange', () => {
+    for (const [video, playState] of videoStore) {
+      if (document.hidden || !playState) video.pause();
+      else video.play();
+    }
+  });
+
+  return {
+    result: videoStore,
+    destroy() {
+      observer.disconnect();
+      visibilityChangeCleanup();
+    },
+  };
+};

package/attributes-master/packages/autovideo/src/types.ts

@@ -0,0 +1,5 @@
+/**
+ * Key value store.
+ * [The element video, The current play state].
+ */
+export type VideoStore = Map<HTMLVideoElement, boolean | null>;

package/attributes-master/packages/autovideo/src/utils/constants.ts

@@ -0,0 +1,4 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [] as const satisfies AttributeElements;
+export const SETTINGS = {} as const satisfies AttributeSettings;

package/attributes-master/packages/autovideo/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package/attributes-master/packages/codehighlight/CHANGELOG.md

@@ -0,0 +1,185 @@
+# @finsweet/attributes-codehighlight
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 2.0.4
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 2.0.2
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- 9578ee9: codehighlight: prepare for v2 release
+
+## 1.5.2
+
+### Patch Changes
+
+- d8668014: chore: updated `highlight.js` dependency
+
+## 1.5.1
+
+### Patch Changes
+
+- 2930a679: Added copy/paste examples.
+
+## 1.5.0
+
+### Minor Changes
+
+- e4b3b680: Created new `window.fsAttributes.destroy()` method to support SPA environments.
+  This new method allows users to destroy all Attributes instances, cleaning up event listeners, observers, states, global variables, etc.
+
+  Websites that use a client-side router that simulates an SPA environment like [barba.js](https://barba.js.org/) or [Swup](https://swup.js.org/) can now properly init and destroy Attributes.
+  After destroying, Attributes can be manually re-initted by calling `window.fsAttribute[ATTRIBUTE_KEY].init()`.
+
+  Updated changesets system, now all updates will be correctly reflected in [the official updates page](https://www.finsweet.com/attributes/updates).
+
+## 1.4.1
+
+### Patch Changes
+
+- Updated dependencies [4792998a]
+  - @global/constants@1.2.0
+  - @global/factory@1.1.5
+
+## 1.4.0
+
+### Minor Changes
+
+- 07f32375: Created `fs-cmsattribute` Attribute
+
+### Patch Changes
+
+- Updated dependencies [07f32375]
+  - @global/constants@1.1.0
+  - @global/factory@1.1.4
+
+## 1.3.5
+
+### Patch Changes
+
+- Updated dependencies [7542dcdb]
+  - @global/constants@1.0.2
+  - @global/factory@1.1.3
+
+## 1.3.4
+
+### Patch Changes
+
+- Updated dependencies [bdd1a78]
+  - @global/constants@1.0.1
+  - @global/factory@1.1.2
+
+## 1.3.3
+
+### Patch Changes
+
+- Updated dependencies [13c3e23]
+  - @global/factory@1.1.1
+  - @finsweet/attributes-richtext@1.7.2
+
+## 1.3.2
+
+### Patch Changes
+
+- Updated dependencies [627bf25]
+  - @global/factory@1.1.0
+  - @finsweet/attributes-richtext@1.7.1
+
+## 1.3.1
+
+### Patch Changes
+
+- Updated dependencies [2040479]
+  - @finsweet/attributes-richtext@1.7.0
+
+## 1.3.0
+
+### Minor Changes
+
+- Added support wizard and publishing new schema version
+
+## 1.2.1
+
+### Patch Changes
+
+- Tweaked the `webflow.css` theme styles.
+
+## 1.2.0
+
+### Minor Changes
+
+- Added support to use the `fs-codehighlight-element="code"` and `fs-codehighlight-theme` attributes on a single parent wrapper.
+  All `<code>` children of this wrapper will be highlighted without having to add the attributes to each one of them.
+
+## 1.1.2
+
+### Patch Changes
+
+- Improved library load speed by asynchronously loading `HighlightJS` before the DOM is ready.
+  Now the package script will be loaded using `async` instead of `defer`.
+
+## 1.1.1
+
+### Patch Changes
+
+- Added support to use the `webflow` theme in the `fs-codehighlight-theme="webflow"` attribute.
+
+## 1.1.0
+
+### Minor Changes
+
+- Added `webflow` theme.
+
+## 1.0.0
+
+### Major Changes
+
+- Created the attribute package.

package/attributes-master/packages/codehighlight/README.md

@@ -0,0 +1,27 @@
+# `codehighlight` Attribute
+
+Syntax highlighting for your Webflow sites.
+
+## Getting Started
+
+Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
+
+## Accessing the API
+
+To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
+
+```javascript
+window.FinsweetAttributes ||= [];
+window.FinsweetAttributes.push([
+  'codehighlight',
+  (codeElements) => {
+    // Your code goes here.
+  },
+]);
+```
+
+The `result` object contains the cde elements that are highlighted on the page.
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/codehighlight/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@finsweet/attributes-codehighlight",
+  "version": "2.0.7",
+  "description": "Syntax highlighting for your Webflow sites.",
+  "private": true,
+  "type": "module",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@finsweet/attributes-utils": "workspace:*",
+    "highlight.js": "^11.11.1"
+  }
+}

package/attributes-master/packages/codehighlight/src/actions/import.ts

@@ -0,0 +1,50 @@
+import { HIGHLIGHTJS_THEME_URL } from '../utils/constants';
+import { WEBFLOW_THEME } from '../utils/themes';
+
+type StyleTag = HTMLStyleElement | HTMLLinkElement;
+
+let hljsThemeImport: Promise<StyleTag> | undefined;
+
+/**
+ * Dynamically imports a highlightJS theme.
+ * @param theme The theme name.
+ * @returns A callback to remove the currently imported theme.
+ */
+export const importHighlightJSTheme = async (theme?: string): Promise<(() => void) | undefined> => {
+  if (!theme) return;
+
+  if (hljsThemeImport) {
+    const tag = await hljsThemeImport;
+
+    return () => {
+      tag.remove();
+      hljsThemeImport = undefined;
+    };
+  }
+
+  let tag!: StyleTag;
+
+  if (theme === 'webflow') {
+    tag = document.createElement('style');
+    tag.setAttribute('type', 'text/css');
+    tag.innerHTML = WEBFLOW_THEME;
+  } else {
+    const themeURL = HIGHLIGHTJS_THEME_URL(theme);
+    tag = document.createElement('link');
+    tag.setAttribute('rel', 'stylesheet');
+    tag.setAttribute('href', themeURL);
+  }
+
+  hljsThemeImport = new Promise<StyleTag>((resolve) => {
+    tag.onload = () => resolve(tag);
+  });
+
+  document.head.append(tag);
+
+  await hljsThemeImport;
+
+  return () => {
+    tag.remove();
+    hljsThemeImport = undefined;
+  };
+};

package/attributes-master/packages/codehighlight/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/codehighlight/src/init.ts

@@ -0,0 +1,53 @@
+import { type FinsweetAttributeInit, waitAttributeLoaded, waitWebflowReady } from '@finsweet/attributes-utils';
+import hljs from 'highlight.js/lib/common';
+
+import { importHighlightJSTheme } from './actions/import';
+import { getAttribute, queryAllElements } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+  await waitAttributeLoaded('inject');
+
+  const referenceElements = queryAllElements('code');
+
+  const theme = referenceElements.reduce<string | undefined>((theme, referenceElement) => {
+    theme ||= getAttribute(referenceElement, 'theme');
+    return theme;
+  }, undefined);
+
+  const destroyHighlightJSThemeImport = await importHighlightJSTheme(theme);
+
+  const codeElements = initHighlight(referenceElements);
+
+  return {
+    result: codeElements,
+    destroy() {
+      destroyHighlightJSThemeImport?.();
+    },
+  };
+};
+
+/**
+ * Inits the code highlighting.
+ * @param referenceElements The reference elements that hold the `<code>` tags.
+ * @returns The highlighted `<code>` elements.
+ */
+const initHighlight = (referenceElements: HTMLElement[]) => {
+  const codeElements = referenceElements.reduce<HTMLElement[]>((acc, referenceElement) => {
+    const elements =
+      referenceElement.tagName === 'CODE' ? [referenceElement] : referenceElement.querySelectorAll('code');
+
+    acc.push(...elements);
+
+    return acc;
+  }, []);
+
+  for (const codeElement of codeElements) {
+    hljs.highlightElement(codeElement);
+  }
+
+  return codeElements;
+};

package/attributes-master/packages/codehighlight/src/utils/constants.ts

@@ -0,0 +1,24 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+import { dependencies } from '../../package.json';
+
+export const ELEMENTS = [
+  /**
+   * Defines a `<code>` element that holds the code to be highlighted.
+   */
+  'code',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the highlighting theme.
+   */
+  theme: {
+    key: 'theme',
+  },
+} as const satisfies AttributeSettings;
+
+export const HIGHLIGHTJS_VERISON = dependencies['highlight.js'].replace('^', '');
+
+export const HIGHLIGHTJS_THEME_URL = (theme: string) =>
+  `//cdn.jsdelivr.net/gh/highlightjs/cdn-release@${HIGHLIGHTJS_VERISON}/build/styles/${theme}.min.css`;

package/attributes-master/packages/codehighlight/src/utils/selectors.ts

@@ -0,0 +1,5 @@
+import { CODE_HIGHLIGHT_ATTRIBUTE, generateSelectors } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { queryAllElements, getAttribute } = generateSelectors(CODE_HIGHLIGHT_ATTRIBUTE, ELEMENTS, SETTINGS);

package/attributes-master/packages/codehighlight/src/utils/themes.ts

@@ -0,0 +1,202 @@
+export const WEBFLOW_THEME = /* css */ `
+pre {
+    display: block;
+    position: relative;
+    background-color: #404040;
+    color: #d2d2d2;
+    font-family: monospace !important;
+    font-weight: 400;
+    font-size: 0.875rem;
+    padding: 1rem 1rem 1rem;
+    border-radius: 0.375rem;
+    margin: 0;
+  }
+  .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1rem;
+    background-color: #2b2b2b;
+  }
+  .hljs::-webkit-scrollbar {
+    height: 0.9375rem;
+    background-color: transparent;
+    border-top: 0.0625rem solid black;
+  }
+  .hljs::-webkit-scrollbar-thumb {
+    background-color: #4d4d4d;
+  }
+  .hljs::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  .hljs-keyword {
+    color: #c792ea;
+  }
+  .hljs-built_in {
+    color: #82b1ff;
+    font-style: italic;
+  }
+  .hljs-type {
+    color: #82aaff;
+  }
+  .hljs-literal {
+    color: #ff5874;
+  }
+  .hljs-number {
+    color: #f77669;
+  }
+  .hljs-regexp {
+    color: #5ca7e4;
+  }
+  .hljs-string {
+    color: #c3e88d;
+  }
+  .hljs-subst {
+    color: #d3423e;
+  }
+  .hljs-symbol {
+    color: #82aaff;
+  }
+  .hljs-class {
+    color: #ffcb8b;
+  }
+  .hljs-function {
+    color: #82aaff;
+  }
+  .hljs-title {
+    color: #80cbae;
+  }
+  .hljs-params {
+    color: #e9eded;
+  }
+  .hljs-comment {
+    color: #546e7a;
+  }
+  .hljs-doctag {
+    color: #7fdbca;
+  }
+  .hljs-meta {
+    color: #c792ea;
+  }
+  .hljs-meta-keyword {
+    color: #82aaff;
+  }
+  .hljs-meta-string {
+    color: #ecc48d;
+  }
+  .hljs-section {
+    color: #82b1ff;
+  }
+  .hljs-builtin-name,
+  .hljs-name,
+  .hljs-tag {
+    color: #80cbc4;
+  }
+  .hljs-attr {
+    color: #ffcb6b;
+  }
+  .hljs-attribute {
+    color: #ffcb6b;
+  }
+  .hljs-variable {
+    color: #82b1ff;
+  }
+  .hljs-bullet {
+    color: #d9f5dd;
+  }
+  .hljs-code {
+    color: #80cbc4;
+  }
+  .hljs-emphasis {
+    color: #c792ea;
+    font-style: italic;
+  }
+  .hljs-strong {
+    color: #addb67;
+    font-weight: 700;
+  }
+  .hljs-formula {
+    color: #c792ea;
+  }
+  .hljs-link {
+    color: #ff869a;
+  }
+  .hljs-quote {
+    color: #697098;
+    font-style: italic;
+  }
+  .hljs-selector-tag {
+    color: #ff6363;
+  }
+  .hljs-selector-id {
+    color: #fad430;
+  }
+  .hljs-selector-class {
+    color: #decb6b;
+  }
+  .hljs-selector-attr,
+  .hljs-selector-pseudo {
+    color: #c792ea;
+    font-style: italic;
+  }
+  .hljs-template-tag {
+    color: #c792ea;
+  }
+  .hljs-template-variable {
+    color: #addb67;
+  }
+  .hljs-addition {
+    color: #addb67ff;
+    font-style: italic;
+  }
+  .hljs-deletion {
+    color: #ef535090;
+    font-style: italic;
+  }
+  .hljs-property {
+    color: #80cbae;
+  }
+  
+  /* Header */
+  .snippetHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+  
+  /* Copy Button */
+  .copyCodeBtn {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    background: #2b2b2b;
+    color: #fff;
+    border: 0.0625rem solid #636363;
+    border-radius: 0rem;
+    padding: 0.625rem 0.875rem;
+    font-family: monospace;
+    font-size: 1rem;
+    line-height: 1.25;
+    outline: none;
+    transition: all 0.15s ease;
+  }
+  .copyCodeBtn:hover {
+    background: #000;
+    cursor: pointer;
+  }
+  .copyCodeBtn:active {
+    transform: scale(0.98);
+    background: #2b2b2b;
+  }
+  
+  /* Code Title */
+  .codeTitle {
+    font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
+      Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+    font-size: 1rem;
+    font-weight: normal;
+    color: #d9d9d9;
+    line-height: 1.25;
+  }  
+`;

package/attributes-master/packages/codehighlight/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}