@contentgrowth/content-widget 1.3.3 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -2
- package/dist/astro/ContentCard.astro +170 -0
- package/dist/astro/ContentList.astro +30 -47
- package/dist/astro/FeaturedCard.astro +64 -21
- package/dist/react/ContentCard.d.ts +59 -0
- package/dist/react/ContentCard.d.ts.map +1 -0
- package/dist/react/ContentCard.js +84 -0
- package/dist/react/ContentList.d.ts.map +1 -1
- package/dist/react/ContentList.js +12 -21
- package/dist/react/FeaturedCard.d.ts +14 -2
- package/dist/react/FeaturedCard.d.ts.map +1 -1
- package/dist/react/FeaturedCard.js +38 -13
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +1 -0
- package/dist/styles.css +17 -0
- package/dist/types/index.d.ts +13 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/vue/ContentCard.vue +148 -0
- package/dist/vue/ContentList.vue +35 -33
- package/dist/vue/FeaturedCard.vue +90 -38
- package/dist/widget/widget.css +1 -1
- package/dist/widget/widget.dev.css +17 -0
- package/dist/widget/widget.dev.js +3 -3
- package/dist/widget/widget.js +1 -1
- package/package.json +1 -1
|
@@ -1,80 +1,131 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { ref, onMounted, computed } from 'vue';
|
|
2
|
+
import { ref, onMounted, computed, watch } from 'vue';
|
|
3
3
|
import { marked } from 'marked';
|
|
4
4
|
import { ContentGrowthClient } from '../core/client';
|
|
5
|
-
import type { ArticleWithContent } from '../types';
|
|
5
|
+
import type { ArticleWithContent, Article } from '../types';
|
|
6
6
|
|
|
7
7
|
const props = withDefaults(defineProps<{
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
// Pre-loaded article data (bypasses API fetch)
|
|
9
|
+
article?: Article | ArticleWithContent;
|
|
10
|
+
// Load specific article by slug
|
|
11
|
+
slug?: string;
|
|
12
|
+
// Load specific article by UUID
|
|
13
|
+
uuid?: string;
|
|
14
|
+
// API config (required if fetching)
|
|
15
|
+
apiKey?: string;
|
|
16
|
+
baseUrl?: string;
|
|
10
17
|
tags?: string[];
|
|
11
18
|
category?: string;
|
|
12
19
|
excludeTags?: string[];
|
|
13
20
|
showCategory?: boolean;
|
|
14
21
|
showReadingTime?: boolean;
|
|
22
|
+
showAuthor?: boolean;
|
|
15
23
|
linkPattern?: string;
|
|
16
24
|
linkTarget?: string;
|
|
25
|
+
ctaText?: string;
|
|
26
|
+
layout?: 'vertical' | 'horizontal';
|
|
17
27
|
className?: string;
|
|
18
28
|
}>(), {
|
|
19
29
|
tags: () => [],
|
|
20
30
|
excludeTags: () => [],
|
|
21
31
|
showCategory: true,
|
|
22
|
-
showReadingTime:
|
|
32
|
+
showReadingTime: false,
|
|
33
|
+
showAuthor: false,
|
|
23
34
|
linkPattern: '/articles/{slug}',
|
|
24
35
|
className: ''
|
|
25
36
|
});
|
|
26
37
|
|
|
27
|
-
const
|
|
28
|
-
const loading = ref(
|
|
38
|
+
const loadedArticle = ref<Article | ArticleWithContent | null>(props.article || null);
|
|
39
|
+
const loading = ref(!props.article);
|
|
29
40
|
const error = ref<string | null>(null);
|
|
30
41
|
|
|
42
|
+
// Watch for provided article prop changes
|
|
43
|
+
watch(() => props.article, (newArticle) => {
|
|
44
|
+
if (newArticle) {
|
|
45
|
+
loadedArticle.value = newArticle;
|
|
46
|
+
loading.value = false;
|
|
47
|
+
}
|
|
48
|
+
}, { immediate: true });
|
|
49
|
+
|
|
31
50
|
// Generate article URL
|
|
32
51
|
const articleUrl = computed(() => {
|
|
33
|
-
if (!
|
|
52
|
+
if (!loadedArticle.value) return '#';
|
|
34
53
|
return props.linkPattern
|
|
35
|
-
.replace('{uuid}',
|
|
36
|
-
.replace('{slug}',
|
|
37
|
-
.replace('{category}',
|
|
54
|
+
.replace('{uuid}', loadedArticle.value.uuid || '')
|
|
55
|
+
.replace('{slug}', loadedArticle.value.slug || loadedArticle.value.uuid || '')
|
|
56
|
+
.replace('{category}', loadedArticle.value.category || 'uncategorized');
|
|
38
57
|
});
|
|
39
58
|
|
|
40
59
|
// Render featured summary (or fallback to regular summary) as HTML
|
|
41
60
|
const summaryHtml = computed(() => {
|
|
42
|
-
if (!
|
|
43
|
-
const summaryText = (
|
|
61
|
+
if (!loadedArticle.value) return '';
|
|
62
|
+
const summaryText = (loadedArticle.value as any).featuredSummary || loadedArticle.value.summary;
|
|
44
63
|
if (!summaryText) return '';
|
|
45
64
|
return marked.parse(summaryText, { async: false }) as string;
|
|
46
65
|
});
|
|
47
66
|
|
|
48
67
|
const readingTime = computed(() => {
|
|
49
|
-
if (!
|
|
50
|
-
return Math.ceil(
|
|
68
|
+
if (!loadedArticle.value) return 0;
|
|
69
|
+
return Math.ceil(loadedArticle.value.wordCount / 200);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
// Generate layout class
|
|
73
|
+
const layoutClass = computed(() => {
|
|
74
|
+
if (!loadedArticle.value) return '';
|
|
75
|
+
const layout = props.layout || (loadedArticle.value as any).featuredSummaryLayout || 'vertical';
|
|
76
|
+
return layout !== 'vertical' ? `cg-layout-${layout}` : '';
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
// Compute CTA text from prop or article data
|
|
80
|
+
const ctaText = computed(() => {
|
|
81
|
+
return props.ctaText || (loadedArticle.value as any)?.featuredCtaText || 'Read full story';
|
|
51
82
|
});
|
|
52
83
|
|
|
53
84
|
onMounted(async () => {
|
|
85
|
+
// If article is already provided, no need to fetch
|
|
86
|
+
if (props.article) {
|
|
87
|
+
loadedArticle.value = props.article;
|
|
88
|
+
loading.value = false;
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Need API key to fetch
|
|
93
|
+
if (!props.apiKey) {
|
|
94
|
+
loading.value = false;
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
|
|
54
98
|
loading.value = true;
|
|
55
99
|
try {
|
|
56
100
|
const client = new ContentGrowthClient({
|
|
57
101
|
apiKey: props.apiKey,
|
|
58
102
|
baseUrl: props.baseUrl
|
|
59
103
|
});
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
104
|
+
|
|
105
|
+
let fetchedArticle: ArticleWithContent;
|
|
106
|
+
|
|
107
|
+
if (props.uuid) {
|
|
108
|
+
// Mode 2: Load by UUID
|
|
109
|
+
fetchedArticle = await client.getArticle(props.uuid, { excludeTags: props.excludeTags });
|
|
110
|
+
} else if (props.slug) {
|
|
111
|
+
// Mode 3: Load by slug
|
|
112
|
+
fetchedArticle = await client.getArticleBySlug(props.slug, { excludeTags: props.excludeTags });
|
|
113
|
+
} else {
|
|
114
|
+
// Mode 4: Find featured article by category/tags
|
|
115
|
+
fetchedArticle = await client.getFeaturedArticle({
|
|
116
|
+
tags: props.tags,
|
|
117
|
+
category: props.category,
|
|
118
|
+
excludeTags: props.excludeTags
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
loadedArticle.value = fetchedArticle;
|
|
66
123
|
} catch (err) {
|
|
67
|
-
error.value = err instanceof Error ? err.message : 'Failed to load
|
|
124
|
+
error.value = err instanceof Error ? err.message : 'Failed to load article';
|
|
68
125
|
} finally {
|
|
69
126
|
loading.value = false;
|
|
70
127
|
}
|
|
71
128
|
});
|
|
72
|
-
// Generate layout class
|
|
73
|
-
const layoutClass = computed(() => {
|
|
74
|
-
if (!article.value) return '';
|
|
75
|
-
const layout = (article.value as any).featuredSummaryLayout || 'standard';
|
|
76
|
-
return layout !== 'standard' ? `cg-layout-${layout}` : '';
|
|
77
|
-
});
|
|
78
129
|
</script>
|
|
79
130
|
|
|
80
131
|
<template>
|
|
@@ -82,14 +133,14 @@ const layoutClass = computed(() => {
|
|
|
82
133
|
<div class="cg-spinner"></div>
|
|
83
134
|
</div>
|
|
84
135
|
|
|
85
|
-
<div v-else-if="error || !
|
|
136
|
+
<div v-else-if="error || !loadedArticle" class="cg-widget cg-error" :class="className">
|
|
86
137
|
{{ error || 'No featured content found' }}
|
|
87
138
|
</div>
|
|
88
139
|
|
|
89
140
|
<a
|
|
90
141
|
v-else
|
|
91
142
|
:href="articleUrl"
|
|
92
|
-
class="cg-featured-card"
|
|
143
|
+
class="cg-widget cg-featured-card"
|
|
93
144
|
:class="[className, layoutClass]"
|
|
94
145
|
data-cg-widget="featured-card"
|
|
95
146
|
:target="linkTarget"
|
|
@@ -97,12 +148,12 @@ const layoutClass = computed(() => {
|
|
|
97
148
|
>
|
|
98
149
|
<article class="cg-featured-card-inner">
|
|
99
150
|
<!-- Header with category badge -->
|
|
100
|
-
<div v-if="showCategory &&
|
|
101
|
-
<span class="cg-category-badge">{{
|
|
151
|
+
<div v-if="showCategory && loadedArticle.category" class="cg-featured-card-category">
|
|
152
|
+
<span class="cg-category-badge">{{ loadedArticle.category }}</span>
|
|
102
153
|
</div>
|
|
103
154
|
|
|
104
155
|
<!-- Title -->
|
|
105
|
-
<h3 class="cg-featured-card-title">{{
|
|
156
|
+
<h3 class="cg-featured-card-title">{{ loadedArticle.title }}</h3>
|
|
106
157
|
|
|
107
158
|
<!-- Featured Summary -->
|
|
108
159
|
<div
|
|
@@ -112,17 +163,17 @@ const layoutClass = computed(() => {
|
|
|
112
163
|
></div>
|
|
113
164
|
|
|
114
165
|
<!-- Footer with meta info -->
|
|
115
|
-
<div class="cg-featured-card-footer">
|
|
116
|
-
<span class="cg-featured-card-author">{{
|
|
117
|
-
<template v-if="showReadingTime">
|
|
166
|
+
<div v-if="showAuthor || showReadingTime" class="cg-featured-card-footer">
|
|
167
|
+
<span v-if="showAuthor" class="cg-featured-card-author">{{ loadedArticle.authorName }}</span>
|
|
168
|
+
<template v-if="showAuthor && showReadingTime">
|
|
118
169
|
<span class="cg-featured-card-separator">•</span>
|
|
119
|
-
<span class="cg-featured-card-reading-time">{{ readingTime }} min read</span>
|
|
120
170
|
</template>
|
|
171
|
+
<span v-if="showReadingTime" class="cg-featured-card-reading-time">{{ readingTime }} min read</span>
|
|
121
172
|
</div>
|
|
122
173
|
|
|
123
174
|
<!-- Read more indicator -->
|
|
124
175
|
<div class="cg-featured-card-cta">
|
|
125
|
-
<span>
|
|
176
|
+
<span>{{ ctaText }}</span>
|
|
126
177
|
<svg class="cg-featured-card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
|
|
127
178
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
128
179
|
</svg>
|
|
@@ -130,3 +181,4 @@ const layoutClass = computed(() => {
|
|
|
130
181
|
</article>
|
|
131
182
|
</a>
|
|
132
183
|
</template>
|
|
184
|
+
|
package/dist/widget/widget.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cg-content-list,.cg-content-viewer,.cg-widget{--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--cg-text)}.cg-content-list.cg-theme-dark,.cg-content-viewer.cg-theme-dark,.cg-widget[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-content-list *,.cg-content-viewer *,.cg-widget *{box-sizing:border-box;margin:0;padding:0}.cg-content-list,.cg-content-viewer,.cg-widget{width:100%;max-width:100%}.cg-content-list{width:100%}.cg-list-header{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.cg-display-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);font-size:0.875rem}.cg-display-toggle:hover{background:var(--cg-bg);border-color:var(--cg-primary)}.cg-display-toggle svg{width:20px;height:20px}.cg-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}@media (max-width:768px){.cg-content-grid{grid-template-columns:1fr}}.cg-content-rows{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-content-rows .cg-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0.75rem 1.5rem;align-items:start}.cg-content-rows .cg-card-header{grid-column:1 / 2;grid-row:1;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0}.cg-content-rows .cg-card-meta{grid-column:1 / 2;grid-row:2;margin-top:0}.cg-content-rows .cg-expand-btn{grid-column:2 / 3;grid-row:1;flex-shrink:0}.cg-content-rows .cg-card-title{margin:0;flex:1}.cg-content-rows .cg-card--compact,.cg-content-rows .cg-card--comfortable,.cg-content-rows .cg-card--spacious{width:100%}@media (max-width:768px){.cg-content-rows .cg-card{grid-template-columns:1fr;grid-template-rows:auto auto}.cg-content-rows .cg-expand-btn{grid-column:1;grid-row:1;justify-self:end}}.cg-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);padding:1.5rem;cursor:pointer;transition:var(--cg-transition);display:block}a.cg-card{text-decoration:none;color:inherit}.cg-card--compact{padding:1rem}.cg-card--compact .cg-card-title{font-size:1rem;line-height:1.4}.cg-card--compact .cg-card-meta{font-size:0.75rem}.cg-card--comfortable{padding:1.5rem}.cg-card--comfortable .cg-card-title{font-size:1.125rem;line-height:1.5}.cg-card--comfortable .cg-card-meta{font-size:0.875rem}.cg-card--spacious{padding:2rem}.cg-card--spacious .cg-card-title{font-size:1.25rem;line-height:1.6}.cg-card--spacious .cg-card-meta{font-size:0.875rem;margin-top:0.75rem}.cg-card:hover{box-shadow:var(--cg-shadow-lg);border-color:var(--cg-primary)}.cg-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.cg-card-title{font-size:1.25rem;font-weight:600;color:var(--cg-text);line-height:1.4;flex:1}.cg-expand-btn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;color:var(--cg-text-secondary);cursor:pointer;transition:var(--cg-transition)}.cg-expand-btn:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-card-summary{margin-bottom:1rem;padding:1rem;background:var(--cg-bg-secondary);border-radius:8px}.cg-card-summary p{color:var(--cg-text-secondary);font-size:0.9375rem;line-height:1.6}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.cg-tag{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:999px;font-size:0.75rem;font-weight:500}.cg-card-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-meta-item{display:flex;align-items:center;gap:0.375rem}.cg-meta-item svg{width:14px;height:14px;flex-shrink:0}.cg-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 0}.cg-btn-prev,.cg-btn-next{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-btn-prev:hover:not(:disabled),.cg-btn-next:hover:not(:disabled){background:var(--cg-primary-hover);box-shadow:var(--cg-shadow-lg)}.cg-btn-prev:disabled,.cg-btn-next:disabled{opacity:0.5;cursor:not-allowed}.cg-page-info{color:var(--cg-text-secondary);font-size:0.875rem}.cg-content-viewer{width:100%;background:var(--cg-bg);min-height:400px}.cg-viewer-header{margin-bottom:2rem;background:var(--cg-bg)}.cg-back-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-viewer-content{max-width:800px;margin:0 auto;background:var(--cg-bg);padding:1rem}.cg-content-header{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1.5rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-meta{display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--cg-text-secondary);font-size:0.9375rem}.cg-content-body{color:var(--cg-text);line-height:1.75}.cg-content-body h2{font-size:1.875rem;font-weight:700;margin:2rem 0 1rem;color:var(--cg-text)}.cg-content-body h3{font-size:1.5rem;font-weight:600;margin:1.5rem 0 0.75rem;color:var(--cg-text)}.cg-content-body p{margin-bottom:1.25rem}.cg-content-body ul,.cg-content-body ol{margin-bottom:1.25rem;padding-left:1.5rem}.cg-content-body li{margin-bottom:0.5rem}.cg-content-body a{color:var(--cg-primary);text-decoration:underline}.cg-content-body a:hover{color:var(--cg-primary-hover)}.cg-content-body code{padding:0.125rem 0.375rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:4px;font-size:0.875em;font-family:'Courier New',monospace}.cg-content-body pre{padding:1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;overflow-x:auto;margin-bottom:1.25rem}.cg-content-body pre code{padding:0;background:none;border:none}.cg-content-body blockquote{padding-left:1rem;border-left:4px solid var(--cg-primary);margin:1.25rem 0;font-style:italic;color:var(--cg-text-secondary)}.cg-content-body img{max-width:100%;height:auto;border-radius:8px;margin:1.25rem 0}.cg-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s ease;--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}.cg-modal--active{opacity:1;pointer-events:auto}.cg-modal[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);cursor:pointer}.cg-modal-content{position:relative;max-width:900px;max-height:90vh;margin:5vh auto;background:var(--cg-bg);border-radius:var(--cg-radius);overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);z-index:10;opacity:1 !important}.cg-modal-close{position:sticky;top:1rem;right:1rem;float:right;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:50%;color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);z-index:10}.cg-modal-close:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-modal-body{padding:2rem;background:var(--cg-bg);min-height:200px}.cg-loading,.cg-viewer-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-spinner{width:48px;height:48px;border:4px solid var(--cg-border);border-top-color:var(--cg-primary);border-radius:50%;animation:cg-spin 0.8s linear infinite;margin-bottom:1rem}@keyframes cg-spin{to{transform:rotate(360deg)}}.cg-loading p,.cg-viewer-loading p{color:var(--cg-text-secondary)}.cg-error,.cg-viewer-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-error svg,.cg-viewer-error svg{color:#ef4444;margin-bottom:1rem}.cg-error p,.cg-viewer-error p{color:var(--cg-text);margin-bottom:1.5rem}.cg-retry-btn{padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-retry-btn:hover{background:var(--cg-primary-hover)}.cg-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-empty-state svg{color:var(--cg-text-secondary);margin-bottom:1rem}.cg-empty-state p{color:var(--cg-text-secondary);margin-top:1rem}.cg-articles-grid.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.cg-articles-grid.cg-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}@media (max-width:768px){.cg-articles-grid.cg-grid{grid-template-columns:1fr}}.cg-article-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);overflow:hidden;transition:var(--cg-transition)}.cg-article-card:hover{box-shadow:var(--cg-shadow-lg);transform:translateY(-2px)}.cg-card-link{display:block;text-decoration:none;color:inherit}.cg-card-content{padding:1.5rem}.cg-display-compact .cg-card-content{padding:1rem}.cg-display-spacious .cg-card-content{padding:2rem}.cg-card-category{margin-bottom:0.75rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:9999px;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.cg-card-title{font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:0.75rem;color:var(--cg-text)}.cg-display-compact .cg-card-title{font-size:1.1rem}.cg-display-spacious .cg-card-title{font-size:1.5rem}.cg-card-summary{color:var(--cg-text-secondary);line-height:1.6;margin-bottom:1rem;font-size:0.95rem}.cg-card-meta{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-meta-separator{color:var(--cg-border)}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem}.cg-tag{padding:0.25rem 0.75rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:9999px;font-size:0.75rem;color:var(--cg-text-secondary)}.cg-content-header-back{margin-bottom:2rem}.cg-back-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);text-decoration:none;font-size:0.875rem;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-back-btn svg{width:20px;height:20px}.cg-content-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-category{margin-bottom:1rem}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-summary{font-size:1.125rem;line-height:1.6;color:var(--cg-text-secondary);margin-bottom:1.5rem}.cg-ai-summary{background:linear-gradient(to right,#eff6ff,#dbeafe);border-left:4px solid #3b82f6;border-radius:0 var(--cg-radius) var(--cg-radius) 0;padding:1rem 1.25rem;margin-bottom:1.5rem}.cg-theme-dark .cg-ai-summary{background:linear-gradient(to right,#1e3a5f,#1e40af);border-left-color:#60a5fa}.cg-ai-summary-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}.cg-ai-summary-icon{width:1rem;height:1rem;color:#2563eb}.cg-theme-dark .cg-ai-summary-icon{color:#60a5fa}.cg-ai-summary-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#1d4ed8}.cg-theme-dark .cg-ai-summary-label{color:#93c5fd}.cg-ai-summary-text{font-size:0.875rem;font-style:italic;line-height:1.6;color:#374151}.cg-theme-dark .cg-ai-summary-text{color:#d1d5db}.cg-content-meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-info-separator{color:var(--cg-border)}.cg-content-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}.cg-content-body{max-width:100%;color:var(--cg-text)}.cg-empty-state p{color:var(--cg-text-secondary);font-size:1.125rem}.cg-featured-card{--cg-card-border-color:#e5e7eb;--cg-card-bg:transparent;--cg-items-bg:#f3f4f6;display:block;text-decoration:none;color:inherit;border-radius:12px;background:var(--cg-card-bg);border:none;transition:all 0.2s ease;overflow:hidden}.cg-featured-card.cg-border-line{border:1px solid var(--cg-card-border-color)}.cg-featured-card.cg-border-dashed{border:2px dashed var(--cg-card-border-color)}.cg-featured-card:hover{border-color:var(--cg-primary)}.cg-featured-card-inner{padding:2rem 2.5rem;height:100%;display:flex;flex-direction:column}.cg-featured-card-category{margin-bottom:1.25rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:#eff6ff;color:var(--cg-primary);border-radius:4px;font-size:0.75rem;font-weight:600}.cg-featured-card-title{margin:0 0 1rem;font-size:1.625rem;font-weight:800;line-height:1.25;color:var(--cg-text);letter-spacing:-0.02em}.cg-featured-card-summary{font-size:1rem;line-height:1.7;color:var(--cg-text-secondary);margin-bottom:1.5rem;flex-grow:1}.cg-featured-card-summary p{margin:0 0 1rem}.cg-featured-card-summary p:last-child{margin:0}.cg-featured-card-summary strong,.cg-featured-card-summary b{font-weight:700;color:var(--cg-text)}.cg-featured-card-footer{display:flex;align-items:center;font-size:0.875rem;font-weight:500;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-featured-card-separator{margin:0 0.5rem;opacity:0.4}.cg-featured-card-cta{display:inline-flex;align-items:center;gap:0.375rem;font-size:1rem;font-weight:600;color:var(--cg-primary);text-decoration:none;transition:all 0.2s ease;align-self:flex-start}.cg-featured-card:hover .cg-featured-card-cta{gap:0.625rem;text-decoration:underline}.cg-featured-card-arrow{transition:transform 0.2s ease}.cg-featured-card:hover .cg-featured-card-arrow{transform:translateX(3px)}.cg-featured-card-summary>p:first-child{font-size:1rem;line-height:1.7}.cg-featured-card-summary ul,.cg-featured-card-summary ol{margin:0;padding:1.25rem 1.5rem;padding-left:1.5rem;list-style:none;background:var(--cg-items-bg);border-radius:8px}.cg-featured-card-summary li{margin-bottom:1.25rem;padding-left:2.5rem;line-height:1.5;position:relative}.cg-featured-card-summary li:last-child{margin-bottom:0}.cg-featured-card-summary ul li::before{content:'';position:absolute;left:0.5rem;top:0.5rem;width:6px;height:6px;background:var(--cg-primary);border-radius:50%}.cg-featured-card-summary ol{counter-reset:item}.cg-featured-card-summary ol li::before{content:counter(item);counter-increment:item;position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;background:var(--cg-primary);color:white;border-radius:4px;font-size:0.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}.cg-featured-card-summary li strong{display:block;font-size:0.9375rem;font-weight:700;color:var(--cg-text);margin-bottom:0.125rem}.cg-featured-card-summary blockquote{margin:0;padding:1rem 1.25rem;border-left:3px solid var(--cg-primary);background:var(--cg-bg-secondary);border-radius:0 8px 8px 0;font-style:italic;font-size:1rem;color:var(--cg-text)}@media (min-width:768px){.cg-layout-horizontal .cg-featured-card-inner{padding:2.5rem 3rem}.cg-layout-horizontal .cg-featured-card-title{font-size:1.875rem}.cg-layout-horizontal .cg-featured-card-summary{display:grid;grid-template-columns:1fr 1.25fr;gap:2.5rem;align-items:stretch}.cg-layout-horizontal .cg-featured-card-summary>p:first-child{grid-column:1;grid-row:1;margin:0;font-size:1.0625rem;line-height:1.8;color:var(--cg-text-secondary);display:flex;flex-direction:column;justify-content:center}.cg-layout-horizontal .cg-featured-card-summary ul,.cg-layout-horizontal .cg-featured-card-summary ol,.cg-layout-horizontal .cg-featured-card-summary blockquote{grid-column:2;grid-row:1;margin:0}.cg-layout-horizontal .cg-featured-card-summary>p:not(:first-child){grid-column:2;margin:0 0 0.75rem}}
|
|
1
|
+
.cg-content-list,.cg-content-viewer,.cg-widget{--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--cg-text)}.cg-content-list.cg-theme-dark,.cg-content-viewer.cg-theme-dark,.cg-widget[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-content-list *,.cg-content-viewer *,.cg-widget *{box-sizing:border-box;margin:0;padding:0}.cg-content-list,.cg-content-viewer,.cg-widget{width:100%;max-width:100%}.cg-content-list{width:100%}.cg-list-header{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.cg-display-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);font-size:0.875rem}.cg-display-toggle:hover{background:var(--cg-bg);border-color:var(--cg-primary)}.cg-display-toggle svg{width:20px;height:20px}.cg-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}@media (max-width:768px){.cg-content-grid{grid-template-columns:1fr}}.cg-content-rows{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-content-rows .cg-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0.75rem 1.5rem;align-items:start}.cg-content-rows .cg-card-header{grid-column:1 / 2;grid-row:1;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0}.cg-content-rows .cg-card-meta{grid-column:1 / 2;grid-row:2;margin-top:0}.cg-content-rows .cg-expand-btn{grid-column:2 / 3;grid-row:1;flex-shrink:0}.cg-content-rows .cg-card-title{margin:0;flex:1}.cg-content-rows .cg-card--compact,.cg-content-rows .cg-card--comfortable,.cg-content-rows .cg-card--spacious{width:100%}@media (max-width:768px){.cg-content-rows .cg-card{grid-template-columns:1fr;grid-template-rows:auto auto}.cg-content-rows .cg-expand-btn{grid-column:1;grid-row:1;justify-self:end}}.cg-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);padding:1.5rem;cursor:pointer;transition:var(--cg-transition);display:block}a.cg-card{text-decoration:none;color:inherit}.cg-card--compact{padding:1rem}.cg-card--compact .cg-card-title{font-size:1rem;line-height:1.4}.cg-card--compact .cg-card-meta{font-size:0.75rem}.cg-card--comfortable{padding:1.5rem}.cg-card--comfortable .cg-card-title{font-size:1.125rem;line-height:1.5}.cg-card--comfortable .cg-card-meta{font-size:0.875rem}.cg-card--spacious{padding:2rem}.cg-card--spacious .cg-card-title{font-size:1.25rem;line-height:1.6}.cg-card--spacious .cg-card-meta{font-size:0.875rem;margin-top:0.75rem}.cg-card:hover{box-shadow:var(--cg-shadow-lg);border-color:var(--cg-primary)}.cg-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.cg-card-title{font-size:1.25rem;font-weight:600;color:var(--cg-text);line-height:1.4;flex:1}.cg-expand-btn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;color:var(--cg-text-secondary);cursor:pointer;transition:var(--cg-transition)}.cg-expand-btn:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-card-summary{margin-bottom:1rem;padding:1rem;background:var(--cg-bg-secondary);border-radius:8px}.cg-card-summary p{color:var(--cg-text-secondary);font-size:0.9375rem;line-height:1.6}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.cg-tag{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:999px;font-size:0.75rem;font-weight:500}.cg-card-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-meta-item{display:flex;align-items:center;gap:0.375rem}.cg-meta-item svg{width:14px;height:14px;flex-shrink:0}.cg-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 0}.cg-btn-prev,.cg-btn-next{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-btn-prev:hover:not(:disabled),.cg-btn-next:hover:not(:disabled){background:var(--cg-primary-hover);box-shadow:var(--cg-shadow-lg)}.cg-btn-prev:disabled,.cg-btn-next:disabled{opacity:0.5;cursor:not-allowed}.cg-page-info{color:var(--cg-text-secondary);font-size:0.875rem}.cg-content-viewer{width:100%;background:var(--cg-bg);min-height:400px}.cg-viewer-header{margin-bottom:2rem;background:var(--cg-bg)}.cg-back-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-viewer-content{max-width:800px;margin:0 auto;background:var(--cg-bg);padding:1rem}.cg-content-header{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1.5rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-meta{display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--cg-text-secondary);font-size:0.9375rem}.cg-content-body{color:var(--cg-text);line-height:1.75}.cg-content-body h2{font-size:1.875rem;font-weight:700;margin:2rem 0 1rem;color:var(--cg-text)}.cg-content-body h3{font-size:1.5rem;font-weight:600;margin:1.5rem 0 0.75rem;color:var(--cg-text)}.cg-content-body p{margin-bottom:1.25rem}.cg-content-body ul,.cg-content-body ol{margin-bottom:1.25rem;padding-left:1.5rem}.cg-content-body li{margin-bottom:0.5rem}.cg-content-body a{color:var(--cg-primary);text-decoration:underline}.cg-content-body a:hover{color:var(--cg-primary-hover)}.cg-content-body code{padding:0.125rem 0.375rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:4px;font-size:0.875em;font-family:'Courier New',monospace}.cg-content-body pre{padding:1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;overflow-x:auto;margin-bottom:1.25rem}.cg-content-body pre code{padding:0;background:none;border:none}.cg-content-body blockquote{padding-left:1rem;border-left:4px solid var(--cg-primary);margin:1.25rem 0;font-style:italic;color:var(--cg-text-secondary)}.cg-content-body img{max-width:100%;height:auto;border-radius:8px;margin:1.25rem 0}.cg-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s ease;--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}.cg-modal--active{opacity:1;pointer-events:auto}.cg-modal[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);cursor:pointer}.cg-modal-content{position:relative;max-width:900px;max-height:90vh;margin:5vh auto;background:var(--cg-bg);border-radius:var(--cg-radius);overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);z-index:10;opacity:1 !important}.cg-modal-close{position:sticky;top:1rem;right:1rem;float:right;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:50%;color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);z-index:10}.cg-modal-close:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-modal-body{padding:2rem;background:var(--cg-bg);min-height:200px}.cg-loading,.cg-viewer-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-spinner{width:48px;height:48px;border:4px solid var(--cg-border);border-top-color:var(--cg-primary);border-radius:50%;animation:cg-spin 0.8s linear infinite;margin-bottom:1rem}@keyframes cg-spin{to{transform:rotate(360deg)}}.cg-loading p,.cg-viewer-loading p{color:var(--cg-text-secondary)}.cg-error,.cg-viewer-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-error svg,.cg-viewer-error svg{color:#ef4444;margin-bottom:1rem}.cg-error p,.cg-viewer-error p{color:var(--cg-text);margin-bottom:1.5rem}.cg-retry-btn{padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-retry-btn:hover{background:var(--cg-primary-hover)}.cg-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-empty-state svg{color:var(--cg-text-secondary);margin-bottom:1rem}.cg-empty-state p{color:var(--cg-text-secondary);margin-top:1rem}.cg-articles-grid.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.cg-articles-grid.cg-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-articles-grid.cg-featured-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.cg-articles-grid.cg-featured-cards-grid .cg-featured-card{height:100%}@media (max-width:768px){.cg-articles-grid.cg-grid{grid-template-columns:1fr}.cg-articles-grid.cg-featured-cards-grid{grid-template-columns:1fr;gap:1.5rem}}.cg-article-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);overflow:hidden;transition:var(--cg-transition)}.cg-article-card:hover{box-shadow:var(--cg-shadow-lg);transform:translateY(-2px)}.cg-card-link{display:block;text-decoration:none;color:inherit}.cg-card-content{padding:1.5rem}.cg-display-compact .cg-card-content{padding:1rem}.cg-display-spacious .cg-card-content{padding:2rem}.cg-card-category{margin-bottom:0.75rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:9999px;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.cg-card-title{font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:0.75rem;color:var(--cg-text)}.cg-display-compact .cg-card-title{font-size:1.1rem}.cg-display-spacious .cg-card-title{font-size:1.5rem}.cg-card-summary{color:var(--cg-text-secondary);line-height:1.6;margin-bottom:1rem;font-size:0.95rem}.cg-card-meta{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-meta-separator{color:var(--cg-border)}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem}.cg-tag{padding:0.25rem 0.75rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:9999px;font-size:0.75rem;color:var(--cg-text-secondary)}.cg-content-header-back{margin-bottom:2rem}.cg-back-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);text-decoration:none;font-size:0.875rem;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-back-btn svg{width:20px;height:20px}.cg-content-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-category{margin-bottom:1rem}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-summary{font-size:1.125rem;line-height:1.6;color:var(--cg-text-secondary);margin-bottom:1.5rem}.cg-ai-summary{background:linear-gradient(to right,#eff6ff,#dbeafe);border-left:4px solid #3b82f6;border-radius:0 var(--cg-radius) var(--cg-radius) 0;padding:1rem 1.25rem;margin-bottom:1.5rem}.cg-theme-dark .cg-ai-summary{background:linear-gradient(to right,#1e3a5f,#1e40af);border-left-color:#60a5fa}.cg-ai-summary-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}.cg-ai-summary-icon{width:1rem;height:1rem;color:#2563eb}.cg-theme-dark .cg-ai-summary-icon{color:#60a5fa}.cg-ai-summary-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#1d4ed8}.cg-theme-dark .cg-ai-summary-label{color:#93c5fd}.cg-ai-summary-text{font-size:0.875rem;font-style:italic;line-height:1.6;color:#374151}.cg-theme-dark .cg-ai-summary-text{color:#d1d5db}.cg-content-meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-info-separator{color:var(--cg-border)}.cg-content-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}.cg-content-body{max-width:100%;color:var(--cg-text)}.cg-empty-state p{color:var(--cg-text-secondary);font-size:1.125rem}.cg-featured-card{--cg-card-border-color:#e5e7eb;--cg-card-bg:transparent;--cg-items-bg:#f3f4f6;display:block;text-decoration:none;color:inherit;border-radius:12px;background:var(--cg-card-bg);border:none;transition:all 0.2s ease;overflow:hidden}.cg-featured-card.cg-border-line{border:1px solid var(--cg-card-border-color)}.cg-featured-card.cg-border-dashed{border:2px dashed var(--cg-card-border-color)}.cg-featured-card:hover{border-color:var(--cg-primary)}.cg-featured-card-inner{padding:2rem 2.5rem;height:100%;display:flex;flex-direction:column}.cg-featured-card-category{margin-bottom:1.25rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:#eff6ff;color:var(--cg-primary);border-radius:4px;font-size:0.75rem;font-weight:600}.cg-featured-card-title{margin:0 0 1rem;font-size:1.625rem;font-weight:800;line-height:1.25;color:var(--cg-text);letter-spacing:-0.02em}.cg-featured-card-summary{font-size:1rem;line-height:1.7;color:var(--cg-text-secondary);margin-bottom:1.5rem;flex-grow:1}.cg-featured-card-summary p{margin:0 0 1rem}.cg-featured-card-summary p:last-child{margin:0}.cg-featured-card-summary strong,.cg-featured-card-summary b{font-weight:700;color:var(--cg-text)}.cg-featured-card-footer{display:flex;align-items:center;font-size:0.875rem;font-weight:500;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-featured-card-separator{margin:0 0.5rem;opacity:0.4}.cg-featured-card-cta{display:inline-flex;align-items:center;gap:0.375rem;font-size:1rem;font-weight:600;color:var(--cg-primary);text-decoration:none;transition:all 0.2s ease;align-self:flex-start}.cg-featured-card:hover .cg-featured-card-cta{gap:0.625rem;text-decoration:underline}.cg-featured-card-arrow{transition:transform 0.2s ease}.cg-featured-card:hover .cg-featured-card-arrow{transform:translateX(3px)}.cg-featured-card-summary>p:first-child{font-size:1rem;line-height:1.7}.cg-featured-card-summary ul,.cg-featured-card-summary ol{margin:0;padding:1.25rem 1.5rem;padding-left:1.5rem;list-style:none;background:var(--cg-items-bg);border-radius:8px}.cg-featured-card-summary li{margin-bottom:1.25rem;padding-left:2.5rem;line-height:1.5;position:relative}.cg-featured-card-summary li:last-child{margin-bottom:0}.cg-featured-card-summary ul li::before{content:'';position:absolute;left:0.5rem;top:0.5rem;width:6px;height:6px;background:var(--cg-primary);border-radius:50%}.cg-featured-card-summary ol{counter-reset:item}.cg-featured-card-summary ol li::before{content:counter(item);counter-increment:item;position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;background:var(--cg-primary);color:white;border-radius:4px;font-size:0.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}.cg-featured-card-summary li strong{display:block;font-size:0.9375rem;font-weight:700;color:var(--cg-text);margin-bottom:0.125rem}.cg-featured-card-summary blockquote{margin:0;padding:1rem 1.25rem;border-left:3px solid var(--cg-primary);background:var(--cg-bg-secondary);border-radius:0 8px 8px 0;font-style:italic;font-size:1rem;color:var(--cg-text)}@media (min-width:768px){.cg-layout-horizontal .cg-featured-card-inner{padding:2.5rem 3rem}.cg-layout-horizontal .cg-featured-card-title{font-size:1.875rem}.cg-layout-horizontal .cg-featured-card-summary{display:grid;grid-template-columns:1fr 1.25fr;gap:2.5rem;align-items:stretch}.cg-layout-horizontal .cg-featured-card-summary>p:first-child{grid-column:1;grid-row:1;margin:0;font-size:1.0625rem;line-height:1.8;color:var(--cg-text-secondary);display:flex;flex-direction:column;justify-content:center}.cg-layout-horizontal .cg-featured-card-summary ul,.cg-layout-horizontal .cg-featured-card-summary ol,.cg-layout-horizontal .cg-featured-card-summary blockquote{grid-column:2;grid-row:1;margin:0}.cg-layout-horizontal .cg-featured-card-summary>p:not(:first-child){grid-column:2;margin:0 0 0.75rem}}
|
|
@@ -720,10 +720,27 @@ a.cg-card {
|
|
|
720
720
|
margin-bottom: 2rem;
|
|
721
721
|
}
|
|
722
722
|
|
|
723
|
+
/* Featured Cards Grid for displayAs="featured-cards" */
|
|
724
|
+
.cg-articles-grid.cg-featured-cards-grid {
|
|
725
|
+
display: grid;
|
|
726
|
+
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
727
|
+
gap: 2rem;
|
|
728
|
+
margin-bottom: 2rem;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.cg-articles-grid.cg-featured-cards-grid .cg-featured-card {
|
|
732
|
+
height: 100%;
|
|
733
|
+
}
|
|
734
|
+
|
|
723
735
|
@media (max-width: 768px) {
|
|
724
736
|
.cg-articles-grid.cg-grid {
|
|
725
737
|
grid-template-columns: 1fr;
|
|
726
738
|
}
|
|
739
|
+
|
|
740
|
+
.cg-articles-grid.cg-featured-cards-grid {
|
|
741
|
+
grid-template-columns: 1fr;
|
|
742
|
+
gap: 1.5rem;
|
|
743
|
+
}
|
|
727
744
|
}
|
|
728
745
|
|
|
729
746
|
/* Article Card */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Content Growth Widget - Standalone Bundle
|
|
3
|
-
* Version: 1.3.
|
|
3
|
+
* Version: 1.3.5
|
|
4
4
|
* https://www.content-growth.com
|
|
5
5
|
*/
|
|
6
6
|
(function(window) {
|
|
@@ -3514,7 +3514,7 @@ class ContentViewer {
|
|
|
3514
3514
|
|
|
3515
3515
|
class ContentGrowthWidget {
|
|
3516
3516
|
// Version will be injected during build from package.json
|
|
3517
|
-
static version = '1.3.
|
|
3517
|
+
static version = '1.3.5';
|
|
3518
3518
|
|
|
3519
3519
|
constructor(container, config) {
|
|
3520
3520
|
|
|
@@ -3826,6 +3826,6 @@ window.ContentGrowthWidget = ContentGrowthWidget;
|
|
|
3826
3826
|
// ===== Expose to window =====
|
|
3827
3827
|
window.ContentGrowthWidget = ContentGrowthWidget;
|
|
3828
3828
|
|
|
3829
|
-
console.log('[ContentGrowthWidget] Loaded successfully v1.3.
|
|
3829
|
+
console.log('[ContentGrowthWidget] Loaded successfully v1.3.5');
|
|
3830
3830
|
|
|
3831
3831
|
})(window);
|