@ox-content/vite-plugin 2.90.0 → 3.0.0-alpha.10

package/dist/styles/twitter-full.css

@@ -0,0 +1,452 @@
+/*
+ * Opt-in full-card chrome for Twitter/X embeds.
+ * Loaded only when a page has .ox-tweet--full.
+ *
+ * Visual tokens and control icons follow the theme contract of:
+ *
+ *   react-tweet — https://github.com/vercel/react-tweet
+ *   Copyright (c) 2023 Luis Alvarez
+ *
+ *   sveltweet — https://github.com/ryoppippi/sveltweet
+ *   Copyright (c) 2024 ryoppippi
+ *
+ * Both are MIT-licensed. The permission notice is included because this
+ * stylesheet is a substantial portion of that visual contract. Ox Content
+ * does not vendor their JavaScript, React, or Svelte components.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included
+ * in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * X, Twitter, and related marks are trademarks of their respective owners.
+ */
+
+.ox-tweet--full {
+  --ox-tweet-container-margin: 1.5rem 0;
+  --ox-tweet-header-font-size: 0.9375rem;
+  --ox-tweet-body-font-size: 1.25rem;
+  --ox-tweet-body-line-height: 1.5rem;
+  --ox-tweet-quoted-body-font-size: 0.938rem;
+  --ox-tweet-info-font-size: 0.9375rem;
+  --ox-tweet-actions-font-size: 0.875rem;
+  --ox-tweet-icon-size: 1.25em;
+  --ox-tweet-border: 1px solid rgb(207, 217, 222);
+  --ox-tweet-font-color: rgb(15, 20, 25);
+  --ox-tweet-font-color-secondary: rgb(83, 100, 113);
+  --ox-tweet-bg: #fff;
+  --ox-tweet-bg-hover: rgb(247, 249, 249);
+  --ox-tweet-quote-hover: rgba(0, 0, 0, 0.03);
+  --ox-tweet-color-blue: rgb(29, 155, 240);
+  --ox-tweet-color-blue-text: rgb(0, 111, 214);
+  --ox-tweet-color-blue-hover: rgba(0, 111, 214, 0.1);
+  --ox-tweet-color-red: rgb(249, 24, 128);
+  --ox-tweet-color-red-hover: rgba(249, 24, 128, 0.1);
+  --ox-tweet-color-green: rgb(0, 186, 124);
+  --ox-tweet-color-green-hover: rgba(0, 186, 124, 0.1);
+  --ox-tweet-verified-blue: var(--ox-tweet-color-blue);
+  --ox-tweet-verified-gold: rgb(226, 179, 64);
+  --ox-tweet-verified-gray: rgb(130, 154, 171);
+  --ox-tweet-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.727-8.83L1.254 2.25H8.08l4.257 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-like: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81C17.04 14.42 18.25 12.37 18.25 10.14c0-3.39-2.744-6.13-6.129-6.13H9.756z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7.75A2.75 2.75 0 0 1 9.75 5h8.5A2.75 2.75 0 0 1 21 7.75v8.5A2.75 2.75 0 0 1 18.25 19h-8.5A2.75 2.75 0 0 1 7 16.25v-8.5zM9.75 7A.75.75 0 0 0 9 7.75v8.5c0 .41.34.75.75.75h8.5c.41 0 .75-.34.75-.75v-8.5a.75.75 0 0 0-.75-.75h-8.5zM3 4.75A2.75 2.75 0 0 1 5.75 2h8.5a1 1 0 1 1 0 2h-8.5a.75.75 0 0 0-.75.75v8.5a1 1 0 1 1-2 0v-8.5z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 8.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5S11.17 7 12 7s1.5.67 1.5 1.5zM13 17v-5h-2v5h2zm-1 5.25c5.66 0 10.25-4.59 10.25-10.25S17.66 1.75 12 1.75 1.75 6.34 1.75 12 6.34 22.25 12 22.25zM20.25 12c0 4.56-3.69 8.25-8.25 8.25S3.75 16.56 3.75 12 7.44 3.75 12 3.75s8.25 3.69 8.25 8.25z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.4-.46-2.91-.2-3.91.81s-1.27 2.52-.81 3.91c-1.31.67-2.19 1.91-2.19 3.34s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.4.46 2.91.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/%3E%3C/svg%3E");
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 550px;
+  min-width: 0;
+  margin: var(--ox-tweet-container-margin);
+  padding: 0.75rem 1rem;
+  overflow: hidden;
+  color: var(--ox-tweet-font-color);
+  border: var(--ox-tweet-border);
+  border-radius: 12px;
+  background: var(--ox-tweet-bg);
+}
+
+[data-theme="dark"] .ox-tweet--full {
+  --ox-tweet-border: 1px solid rgb(66, 83, 100);
+  --ox-tweet-font-color: rgb(247, 249, 249);
+  --ox-tweet-font-color-secondary: rgb(139, 152, 165);
+  --ox-tweet-bg: rgb(21, 32, 43);
+  --ox-tweet-bg-hover: rgb(30, 39, 50);
+  --ox-tweet-quote-hover: rgba(255, 255, 255, 0.03);
+  --ox-tweet-color-blue-text: rgb(107, 201, 251);
+  --ox-tweet-color-blue-hover: rgba(107, 201, 251, 0.1);
+  --ox-tweet-verified-blue: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .ox-tweet--full {
+    --ox-tweet-border: 1px solid rgb(66, 83, 100);
+    --ox-tweet-font-color: rgb(247, 249, 249);
+    --ox-tweet-font-color-secondary: rgb(139, 152, 165);
+    --ox-tweet-bg: rgb(21, 32, 43);
+    --ox-tweet-bg-hover: rgb(30, 39, 50);
+    --ox-tweet-quote-hover: rgba(255, 255, 255, 0.03);
+    --ox-tweet-color-blue-text: rgb(107, 201, 251);
+    --ox-tweet-color-blue-hover: rgba(107, 201, 251, 0.1);
+    --ox-tweet-verified-blue: #fff;
+  }
+}
+
+.ox-tweet--full .ox-tweet__header {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin: 0 0 0.75rem;
+  overflow: hidden;
+  font-size: var(--ox-tweet-header-font-size);
+  line-height: 1.25rem;
+  white-space: nowrap;
+}
+
+.ox-tweet--full .ox-tweet__avatar-link {
+  flex: 0 0 48px;
+}
+
+.ox-tweet--full .ox-tweet__avatar {
+  width: 48px;
+  height: 48px;
+}
+
+.ox-tweet--full .ox-tweet__author {
+  min-width: 0;
+  margin: 0 0.5rem;
+}
+
+.ox-tweet--full .ox-tweet__author-name,
+.ox-tweet--full .ox-tweet__author-handle,
+.ox-tweet--full .ox-tweet__follow {
+  text-decoration: none;
+}
+
+.ox-tweet--full .ox-tweet__author-name {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  overflow: hidden;
+  font-weight: 700;
+  color: inherit;
+  text-overflow: ellipsis;
+}
+
+.ox-tweet--full .ox-tweet__author-name:hover,
+.ox-tweet--full .ox-tweet__follow:hover {
+  text-decoration: underline;
+}
+
+.ox-tweet--full .ox-tweet__author-meta {
+  display: flex;
+  min-width: 0;
+}
+
+.ox-tweet--full .ox-tweet__author-handle {
+  overflow: hidden;
+  color: var(--ox-tweet-font-color-secondary);
+  text-overflow: ellipsis;
+}
+
+.ox-tweet--full .ox-tweet__sep {
+  padding: 0 0.25rem;
+  color: var(--ox-tweet-font-color-secondary);
+}
+
+.ox-tweet--full .ox-tweet__follow {
+  font-weight: 700;
+  color: var(--ox-tweet-color-blue-text);
+}
+
+.ox-tweet--full .ox-tweet__brand {
+  margin-inline-start: auto;
+  color: inherit;
+}
+
+.ox-tweet--full .ox-tweet__badge,
+.ox-tweet--full .ox-tweet__icon {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 1.125em;
+  height: 1.125em;
+  background: currentColor;
+  -webkit-mask: var(--ox-tweet-icon-badge) center / contain no-repeat;
+  mask: var(--ox-tweet-icon-badge) center / contain no-repeat;
+}
+
+.ox-tweet--full .ox-tweet__icon {
+  width: var(--ox-tweet-icon-size);
+  height: var(--ox-tweet-icon-size);
+}
+
+.ox-tweet--full .ox-tweet__badge--blue {
+  color: var(--ox-tweet-verified-blue);
+}
+
+.ox-tweet--full .ox-tweet__badge--gold {
+  color: var(--ox-tweet-verified-gold);
+}
+
+.ox-tweet--full .ox-tweet__badge--gray {
+  color: var(--ox-tweet-verified-gray);
+}
+
+.ox-tweet--full .ox-tweet__icon--x {
+  -webkit-mask-image: var(--ox-tweet-icon-x);
+  mask-image: var(--ox-tweet-icon-x);
+}
+
+.ox-tweet--full .ox-tweet__icon--like {
+  color: var(--ox-tweet-color-red);
+  -webkit-mask-image: var(--ox-tweet-icon-like);
+  mask-image: var(--ox-tweet-icon-like);
+}
+
+.ox-tweet--full .ox-tweet__icon--reply {
+  color: var(--ox-tweet-color-blue);
+  -webkit-mask-image: var(--ox-tweet-icon-reply);
+  mask-image: var(--ox-tweet-icon-reply);
+}
+
+.ox-tweet--full .ox-tweet__icon--copy {
+  -webkit-mask-image: var(--ox-tweet-icon-copy);
+  mask-image: var(--ox-tweet-icon-copy);
+}
+
+.ox-tweet--full .ox-tweet__icon--info {
+  -webkit-mask-image: var(--ox-tweet-icon-info);
+  mask-image: var(--ox-tweet-icon-info);
+}
+
+.ox-tweet--full .ox-tweet__reply {
+  margin: 0 0 0.25rem;
+  font-size: var(--ox-tweet-header-font-size);
+  line-height: 1.25rem;
+}
+
+.ox-tweet--full .ox-tweet__body {
+  margin: 0;
+  font-size: var(--ox-tweet-body-font-size);
+  font-weight: 400;
+  line-height: var(--ox-tweet-body-line-height);
+  overflow-wrap: break-word;
+}
+
+.ox-tweet--full .ox-tweet__body a,
+.ox-tweet--full .ox-tweet__quote-body a {
+  color: var(--ox-tweet-color-blue-text);
+  text-decoration: none;
+}
+.ox-tweet--full .ox-tweet__media {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  margin: 0.75rem 0 0;
+  overflow: hidden;
+  border: var(--ox-tweet-border);
+  border-radius: 12px;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="2"],
+.ox-tweet--full .ox-tweet__media[data-count="3"],
+.ox-tweet--full .ox-tweet__media[data-count="4"] {
+  grid-template-columns: 1fr 1fr;
+  aspect-ratio: 16 / 9;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="3"],
+.ox-tweet--full .ox-tweet__media[data-count="4"] {
+  grid-template-rows: 1fr 1fr;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="3"] > :first-child {
+  grid-row: span 2;
+}
+
+.ox-tweet--full .ox-tweet__media-item {
+  width: 100%;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="2"] .ox-tweet__media-item,
+.ox-tweet--full .ox-tweet__media[data-count="3"] .ox-tweet__media-item,
+.ox-tweet--full .ox-tweet__media[data-count="4"] .ox-tweet__media-item {
+  height: 100%;
+  object-fit: cover;
+}
+
+.ox-tweet--full .ox-tweet__media-fallback {
+  position: relative;
+}
+
+.ox-tweet--full .ox-tweet__watch {
+  margin-top: 0.375rem;
+  font-size: 0.8125rem;
+}
+
+.ox-tweet--full .ox-tweet__quote {
+  margin: 0.75rem 0 0;
+  padding: 0.75rem;
+  overflow: hidden;
+  border: var(--ox-tweet-border);
+  border-radius: 12px;
+}
+
+.ox-tweet--full .ox-tweet__quote-header {
+  margin: 0;
+}
+
+.ox-tweet--full .ox-tweet__quote .ox-tweet__avatar {
+  width: 20px;
+  height: 20px;
+}
+
+.ox-tweet--full .ox-tweet__quote-body {
+  margin: 0.25rem 0 0;
+  font-size: var(--ox-tweet-quoted-body-font-size);
+  line-height: 1.25rem;
+}
+
+.ox-tweet--full .ox-tweet__quote .ox-tweet__media {
+  margin-top: 0.75rem;
+}
+
+.ox-tweet--full .ox-tweet__info,
+.ox-tweet--full .ox-tweet__metrics,
+.ox-tweet--full .ox-tweet__actions {
+  display: flex;
+  align-items: center;
+  margin-top: 0.125rem;
+  overflow: hidden;
+  color: var(--ox-tweet-font-color-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ox-tweet--full .ox-tweet__actions {
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+  border-top: var(--ox-tweet-border);
+}
+
+.ox-tweet--full .ox-tweet__metrics {
+  gap: 0.75rem;
+  font-size: var(--ox-tweet-actions-font-size);
+}
+
+.ox-tweet--full .ox-tweet__permalink,
+.ox-tweet--full .ox-tweet__info-help,
+.ox-tweet--full .ox-tweet__action,
+.ox-tweet--full .ox-tweet__replies-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ox-tweet--full .ox-tweet__permalink {
+  font-size: var(--ox-tweet-info-font-size);
+  line-height: 1.25rem;
+}
+
+.ox-tweet--full .ox-tweet__permalink:hover {
+  text-decoration: underline;
+}
+
+.ox-tweet--full .ox-tweet__info-help {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+  height: 2em;
+  margin-left: auto;
+  border-radius: 9999px;
+}
+
+.ox-tweet--full .ox-tweet__action {
+  display: flex;
+  align-items: center;
+  margin-right: 1.25rem;
+  font-size: var(--ox-tweet-actions-font-size);
+  font-weight: 700;
+  line-height: 1rem;
+}
+
+.ox-tweet--full .ox-tweet__action .ox-tweet__icon {
+  margin-right: 0.25rem;
+}
+
+.ox-tweet--full .ox-tweet__action--like:hover {
+  color: var(--ox-tweet-color-red);
+}
+
+.ox-tweet--full .ox-tweet__action--reply:hover {
+  color: var(--ox-tweet-color-blue-text);
+}
+
+.ox-tweet--full .ox-tweet__action--copy:hover,
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] {
+  color: var(--ox-tweet-color-green);
+}
+
+.ox-tweet--full .ox-tweet__copied-text {
+  display: none;
+}
+
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__copy-text {
+  display: none;
+}
+
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__copied-text {
+  display: inline;
+}
+
+.ox-tweet--full .ox-tweet__replies {
+  padding: 0.25rem 0;
+  margin: 0.5rem 0 0;
+}
+
+.ox-tweet--full .ox-tweet__replies-link {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--ox-tweet-color-blue-text);
+  border: var(--ox-tweet-border);
+  border-radius: 9999px;
+}
+
+.ox-tweet--full .ox-tweet__replies-link:hover {
+  background-color: var(--ox-tweet-color-blue-hover);
+}
+
+@media (max-width: 400px) {
+  .ox-tweet--full {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .ox-tweet--full .ox-tweet__follow,
+  .ox-tweet--full .ox-tweet__sep {
+    display: none;
+  }
+}

package/dist/styles/youtube.css

@@ -0,0 +1,77 @@
+/* ox-content YouTube Plugin - iframe styles */
+
+.ox-youtube {
+  margin: 1.5rem 0;
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Placeholder when iframe hasn't loaded */
+.ox-youtube::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, var(--octc-color-bg-alt) 0%, var(--octc-color-border) 100%);
+  z-index: -1;
+}
+
+/* Play button placeholder */
+.ox-youtube-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-size: cover;
+  background-position: center;
+}
+
+.ox-youtube-placeholder::after {
+  content: "";
+  width: 68px;
+  height: 48px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z'/%3E%3Cpath fill='%23fff' d='M45 24L27 14v20'/%3E%3C/svg%3E")
+    center/contain no-repeat;
+  transition: transform 0.2s ease;
+}
+
+.ox-youtube-placeholder:hover::after {
+  transform: scale(1.1);
+}
+
+/* Title overlay */
+.ox-youtube-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ox-youtube {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    border-radius: 0;
+    width: calc(100% + 1.5rem);
+  }
+}