IntelMatrix Technical Specification v1.

0
Mobile-First Client-Side Intelligence Engine for Blogger, WordPress, and GitHub Pages

Author & Publisher: Marie-Soleil Seshat Landry

[Link]

August 2026

1 System Overview
An IntelMatrix is a lightweight, asynchronous, zero-dependency client-side RSS aggregation dash-
board designed to run in site footers. Created and published by Marie-Soleil Seshat Landry
([Link]), it ingests 100 domain-specific RSS/Atom feeds via client-side cross-origin
proxying (rss2json), rendering real-time headline streams organized into 8 thematic pillars.

1.1 Core Architectural Guardrails

• Core Web Vitals Integrity: Execution is gated by an IntersectionObserver (200px bottom
threshold) to eliminate unneeded API calls on initial page load.

• Mobile Viewport Strict Containment: Prevents horizontal overflow blowout and iOS Safari
auto-zoom via CSS containment (max-width: 100% !important, flex-wrap: wrap, font-size:
16px on inputs).

• SEO Link Equity Preservation: External hyperlinking enforces rel="nofollow noopener

noreferrer".

2 Universal Code Template (Blogger, GitHub Pages & Static Web)

This single-file solution embeds directly into Blogger HTML/JavaScript gadgets, static sites, or GitHub
Pages ([Link]).
1 <! -- UNIVERSAL INTELMATRIX CONTAINER -- >
2 <! -- AUTHOR & PUBLISHER : Marie - Soleil Seshat Landry ( ma ri el an dr ysp ys ho p . com ) -- >
3 < style >
4 : root {
5 --im - bg : #090 a0f ;
6 --im - card : #121520;
7 --im - border : #1 e2638 ;
8 --im - accent : #3 b82f6 ;
9 --im - text : # f8fafc ;
10 --im - sub : #94 a3b8 ;
11 }
12
13 # intelmatrix - app , # intelmatrix - app * {
14 box - sizing : border - box ! important ;
15 max - width : 100% ! important ;
16 }
17
18 # intelmatrix - app {
19 background : var ( - - im - bg ) ;
20 color : var ( - - im - text ) ;
21 font - family : - apple - system , BlinkMacSystemFont , " Segoe UI " , Roboto , sans - serif ;

1
22 padding : 12 px ;
23 border - radius : 8 px ;
24 border : 1 px solid var ( - - im - border ) ;
25 width : 100% ! important ;
26 margin : 16 px 0;
27 overflow : hidden ! important ;
28 }
29
30 . im - header {
31 display : flex ;
32 justify - content : space - between ;
33 align - items : center ;
34 border - bottom : 1 px solid var ( - - im - border ) ;
35 padding - bottom : 8 px ;
36 margin - bottom : 10 px ;
37 }
38
39 . im - title {
40 font - size : clamp (0.75 rem , 3.5 vw , 1 rem ) ;
41 font - weight : 700;
42 margin : 0;
43 display : flex ;
44 align - items : center ;
45 gap : 6 px ;
46 }
47
48 . im - dot {
49 width : 8 px ;
50 height : 8 px ;
51 background : var ( - - im - accent ) ;
52 border - radius : 50%;
53 box - shadow : 0 0 6 px var ( - - im - accent ) ;
54 }
55
56 . im - controls { display : flex ; flex - direction : column ; gap : 8 px ; margin - bottom : 10 px ;
}
57
58 . im - search {
59 width : 100% ! important ;
60 background : var ( - - im - card ) ;
61 border : 1 px solid var ( - - im - border ) ;
62 color : var ( - - im - text ) ;
63 padding : 8 px 10 px ;
64 border - radius : 6 px ;
65 font - size : 16 px ! important ; /* Disables iOS auto - zoom */
66 min - height : 40 px ;
67 }
68
69 . im - pillars { display : flex ! important ; flex - wrap : wrap ! important ; gap : 5 px !
important ; }
70
71 . im - pill {
72 background : var ( - - im - card ) ;
73 border : 1 px solid var ( - - im - border ) ;
74 color : var ( - - im - sub ) ;
75 padding : 5 px 9 px ;
76 border - radius : 12 px ;
77 font - size : 0.7 rem ;
78 cursor : pointer ;
79 flex - grow : 1;
80 text - align : center ;
81 }
82
83 . im - pill . active { background : var ( - - im - accent ) ; color : # fff ; font - weight : 700; }
84
85 . im - scroll - area { max - height : 55 vh ; overflow - y : auto ; overflow - x : hidden ; }

2
 86
87 . im - grid { display : grid ! important ; grid - template - columns : 100% ! important ; gap : 8
px ; }
88
89 . im - card {
90 background : var ( - - im - card ) ;
91 border : 1 px solid var ( - - im - border ) ;
92 border - radius : 6 px ;
93 padding : 10 px ;
94 display : flex ;
95 flex - direction : column ;
96 justify - content : space - between ;
97 }
98
99 . im - tag { font - size : 0.6 rem ; color : var ( - - im - accent ) ; text - transform : uppercase ;
margin - bottom : 4 px ; }
100 . im - card - title {
101 font - size : 0.82 rem ;
102 color : var ( - - im - text ) ;
103 text - decoration : none ;
104 font - weight : 600;
105 line - height : 1.3;
106 display : - webkit - box ;
107 - webkit - line - clamp : 2;
108 - webkit - box - orient : vertical ;
109 overflow : hidden ;
110 }
111
112 . im - meta {
113 font - size : 0.65 rem ;
114 color : var ( - - im - sub ) ;
115 display : flex ;
116 justify - content : space - between ;
117 margin - top : 8 px ;
118 padding - top : 6 px ;
119 border - top : 1 px solid rgba (255 ,255 ,255 ,0.05) ;
120 }
121
122 @media ( min - width : 640 px ) {
123 . im - pill { flex - grow : 0; }
124 . im - grid { grid - template - columns : repeat ( auto - fill , minmax (260 px , 1 fr ) ) ! important
; gap : 12 px ; }
125 }
126 </ style >
127
128 < div id = " intelmatrix - app " >
129 < div class = " im - header " >
130 < h2 class = " im - title " > < span class = " im - dot " > </ span > INTELMATRIX // LIVE STREAM </ h2 >
131 </ div >
132 < div class = " im - controls " >
133 < input type = " text " id = " im - search " class = " im - search " placeholder = " Search 100 feeds
by keyword ... " >
134 < div class = " im - pillars " id = " im - pillars " >
135 < button class = " im - pill active " data - pillar = " ALL " > ALL PILLARS </ button >
136 < button class = " im - pill " data - pillar = " PILLAR_1 " > PILLAR ONE </ button >
137 < button class = " im - pill " data - pillar = " PILLAR_2 " > PILLAR TWO </ button >
138 < button class = " im - pill " data - pillar = " PILLAR_3 " > PILLAR THREE </ button >
139 < button class = " im - pill " data - pillar = " PILLAR_4 " > PILLAR FOUR </ button >
140 < button class = " im - pill " data - pillar = " PILLAR_5 " > PILLAR FIVE </ button >
141 < button class = " im - pill " data - pillar = " PILLAR_6 " > PILLAR SIX </ button >
142 < button class = " im - pill " data - pillar = " PILLAR_7 " > PILLAR SEVEN </ button >
143 < button class = " im - pill " data - pillar = " PILLAR_8 " > PILLAR EIGHT </ button >
144 </ div >
145 </ div >
146 < div class = " im - scroll - area " >
147 < div class = " im - grid " id = " im - grid " >

3
148 < div style = " text - align : center ; padding : 16 px ; " id = " im - status " > Scroll to footer
to connect live feeds ... </ div >
149 </ div >
150 </ div >
151 </ div >
152
153 < script >
154 ( function () {
155 // 100 FEED ENDPOINTS ARRAY PLACEHOLDER
156 const FEED_SOURCES = [
157 { name : " Source 001 " , url : " https :// example . com / feed1 . xml " , category : " PILLAR_1 "
},
158 { name : " Source 002 " , url : " https :// example . com / feed2 . xml " , category : " PILLAR_2 "
},
159 { name : " Source 100 " , url : " https :// example . com / feed100 . xml " , category : " PILLAR_8 "
}
160 ];
161
162 let articlesAcc = [];
163 let currentPillar = " ALL " ;
164 let initialized = false ;
165
166 const grid = document . getElementById ( ’ im - grid ’) ;
167 const searchInput = document . getElementById ( ’ im - search ’) ;
168 const status = document . getElementById ( ’ im - status ’) ;
169 const app = document . getElementById ( ’ intelmatrix - app ’) ;
170
171 async function fetchFeed ( src ) {
172 try {
173 const r = await fetch ( ‘ https :// api . rss2json . com / v1 / api . json ? rss_url = $ {
en co de UR IComponent ( src . url ) } ‘) ;
174 const d = await r . json () ;
175 if ( d . status === ’ok ’) {
176 return d . items . map ( i = > ({
177 title : i . title , link : i . link , pubDate : new Date ( i . pubDate ) , source : src . name
, category : src . category
178 }) ) ;
179 }
180 } catch ( e ) {}
181 return [];
182 }
183
184 async function streamAll () {
185 const BATCH_SIZE = 4;
186 for ( let i = 0; i < FEED_SOURCES . length ; i += BATCH_SIZE ) {
187 const batch = FEED_SOURCES . slice (i , i + BATCH_SIZE ) ;
188 const res = await Promise . all ( batch . map ( s = > fetchFeed ( s ) ) ) ;
189 articlesAcc = [... articlesAcc , ... res . flat () ]. sort (( a , b ) = > b . pubDate - a .
pubDate ) ;
190 if ( status ) status . innerText = ‘ Streaming ... ( $ { Math . min ( i + BATCH_SIZE ,
FEED_SOURCES . length ) }/ $ { FEED_SOURCES . length }) ‘;
191 render () ;
192 }
193 if ( status ) status . style . display = ’ none ’;
194 }
195
196 function render () {
197 const q = searchInput . value . toLowerCase () ;
198 const filtered = articlesAcc . filter ( a = >
199 ( currentPillar === " ALL " || a . category === currentPillar ) &&
200 ( a . title . toLowerCase () . includes ( q ) || a . source . toLowerCase () . includes ( q ) )
201 );
202
203 grid . innerHTML = ’ ’;
204 filtered . forEach ( a = > {
205 const card = document . createElement ( ’ div ’) ;

4
206 card . className = ’im - card ’;
207 const dt = isNaN ( a . pubDate ) ? ’ Recent ’ : a . pubDate . toLocaleDateString ( undefined ,
{ month : ’ short ’ , day : ’ numeric ’}) ;
208 card . innerHTML = ‘
209 < div >
210 < div class = " im - tag " >$ { a . category } // $ { a . source } </ div >
211 <a href = " $ { a . link } " class = " im - card - title " target = " _blank " rel = " nofollow
noopener noreferrer " >$ { a . title } </ a >
212 </ div >
213 < div class = " im - meta " > < span >$ { dt } </ span > < span > Read & rarr ; </ span > </ div >
214 ‘;
215 grid . appendChild ( card ) ;
216 }) ;
217 }
218
219 const observer = new I n t e r s e c t i o n Observer (( entries ) = > {
220 if ( entries [0]. isIntersecting && ! initialized ) {
221 initialized = true ;
222 streamAll () ;
223 }
224 } , { rootMargin : " 200 px " }) ;
225
226 observer . observe ( app ) ;
227
228 document . getElementById ( ’ im - pillars ’) . addEventListener ( ’ click ’ , ( e ) = > {
229 if ( e . target . classList . contains ( ’ im - pill ’) ) {
230 document . querySelectorAll ( ’. im - pill ’) . forEach ( b = > b . classList . remove ( ’ active ’) )
;
231 e . target . classList . add ( ’ active ’) ;
232 currentPillar = e . target . getAttribute ( ’ data - pillar ’) ;
233 render () ;
234 }
235 }) ;
236
237 searchInput . addEventListener ( ’ input ’ , render ) ;
238 }) () ;
239 </ script >
Listing 1: Universal IntelMatrix Implementation Template

3 WordPress Deployment Architecture

To deploy an IntelMatrix seamlessly on WordPress without third-party plugins, register a custom
shortcode in the active theme’s [Link] file.
1 // Register [ intelmatrix ] Shortcode for WordPress
2 // Author : Marie - Soleil Seshat Landry ( ma ri el an dr ys pys ho p . com )
3 function r e n d e r _ i n t e l m a t r i x _ s h o r t c o d e () {
4 ob_start () ;
5 ?>
6 <! - - Paste Universal IntelMatrix HTML / CSS / JS Code Here -->
7 < div id = " intelmatrix - app " >... </ div >
8 <? php
9 return ob_get_clean () ;
10 }
11 add_shortcode ( ’ intelmatrix ’ , ’ r e n d e r _ i n t e l m a t r i x _ s h o r t c o d e ’) ;
Listing 2: WordPress Shortcode Implementation ([Link])

3.1 WordPress Usage

1. Paste the shortcode code block into your theme’s [Link] or a snippet plugin.

5
 2. Insert [intelmatrix] into any Gutenberg Custom HTML Block, Footer Widget, or Elementor
container.

4 GitHub Pages Standalone Deployment

IntelMatrix dashboards can be hosted on GitHub Pages as standalone widget endpoints or iFrames.

1. Create a new repository (e.g., username/intelmatrix-dashboard).

2. Save the Universal IntelMatrix code as [Link].

3. Enable GitHub Pages via Settings → Pages → Branch: main / root.

4. Embed the hosted URL anywhere via a responsive iFrame:

1 < iframe
2 src = " https :// username . github . io / intelmatrix - dashboard / "
3 style = " width : 100%; height : 600 px ; border : none ; overflow : hidden ; "
4 scrolling = " no "
5 loading = " lazy " >
6 </ iframe >
Listing 3: iFrame Embed Specification for External Sites

5 Prompt Engineering Blueprint: Automated IntelMatrix Genera-

tion via Gemini
To generate a fully populated, 100-source IntelMatrix tailored to any specific blog URL using Gemini’s
live web search capabilities, execute the prompt below.

5.1 Copy-Pasteable Gemini Prompt Specification

1 ACT AS AN EXPERT FRONT - END DEVELOPER AND OSINT RESEARCHER .

2
3 CREDIT :
4 Framework Created by Marie - Soleil Seshat Landry ( marielandryspyshop . com )
5
6 TASK :
7 1. Perform web searches to thoroughly analyze the target blog URL : [
I N S E R T _ B L O G _ U R L _ H E R E ].
8 2. Identify the core niche , target audience , and 8 distinct thematic pillars relevant
to this site .
9 3. Conduct web searches to discover 100 ACTIVE , HIGH - AUTHORITY RSS / ATOM FEED URLs
across these 8 pillars ( approx . 12 -13 working feed endpoints per pillar ) .
10 4. Output a single , complete , production - ready IntelMatrix code block ( HTML + CSS + JS
) based on the IntelMatrix Specification .
11
12 STRICT CODE CONSTRAINTS :
13 - CSS Containment : Set max - width : 100% ! important , box - sizing : border - box ! important
on all elements .
14 - Input Zoom Fix : Search inputs must have font - size : 16 px ! important to prevent iOS
Safari auto - zoom .
15 - Mobile Wrapping : Category buttons (. im - pillars ) MUST use flex - wrap : wrap ! important
to prevent horizontal page overflow .
16 - Core Web Vitals : Wrap execution in an I n t e r s e c t i o n O b s e r v e r with lazy - loading .
17 - Link Equity Protection : External links MUST use rel = " nofollow noopener noreferrer " .

6
18 - Data Array : Populate the FEED_SOURCES JavaScript array with all 100 verified RSS
sources categorized accurately under the 8 pillars .
19
20 OUTPUT FORMAT :
21 Provide the full , un - truncated , self - contained HTML / CSS / JS block ready to paste
directly into Blogger HTML / JS gadget or WordPress Gutenberg HTML block .
Listing 4: Master AI Prompt Template