Skip to content

Commit e138649

Browse files
Copilotrubensworks
Copilot
and
rubensworks
committed
Implement modernized index page with new features and animations
Co-authored-by: rubensworks <440384+rubensworks@users.noreply.github.com>
1 parent 5e46a45 commit e138649

2 files changed

Lines changed: 712 additions & 42 deletions

File tree

‎pages/index.js‎

Lines changed: 197 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,222 @@
11
import Head from '../components/Head';
2+
import { useEffect } from 'react';
23

34
export default function Home() {
5+
useEffect(() => {
6+
// Rotate SPARQL queries
7+
const queries = document.querySelectorAll('.sparql-query');
8+
let currentQuery = 0;
9+
10+
const rotateQueries = () => {
11+
queries[currentQuery].classList.remove('active');
12+
currentQuery = (currentQuery + 1) % queries.length;
13+
queries[currentQuery].classList.add('active');
14+
};
15+
16+
const intervalId = setInterval(rotateQueries, 4000);
17+
18+
return () => clearInterval(intervalId);
19+
}, []);
20+
421
return (
522
<div className="container">
623
<Head
724
title={'A knowledge graph querying framework'}
8-
description={'Flexible SPARQL and GraphQL over decentralized RDF on the Web.'}
25+
description={'Query-driven integration of heterogeneous Knowledge Graphs. Execute SPARQL queries over decentralized data sources.'}
926
/>
1027

1128
<main id="software">
12-
<div className={"intro"}>
13-
<img src="/img/comunica_red_no_fill.svg" alt="Comunica" className="comunica-logo" />
14-
<h1 className="title">A knowledge graph querying framework</h1>
29+
<div className="hero">
30+
<img src="/img/comunica_red_no_fill.svg" alt="Comunica" className="hero-logo" />
31+
<h1 className="hero-title">A knowledge graph querying framework</h1>
32+
<p className="hero-subtitle">
33+
Query-driven integration of heterogeneous Knowledge Graphs
34+
</p>
35+
<div className="hero-buttons">
36+
<a href="docs/query/" className="button-primary">Get Started</a>
37+
<a href="https://query.comunica.dev/" className="button-secondary">Try Live</a>
38+
</div>
1539
</div>
1640

17-
<p className="description">
18-
Flexible SPARQL and GraphQL over decentralized RDF on the Web.
19-
</p>
20-
21-
<div className="grid-wide">
22-
<div className="card-info">
23-
<img src="/img/web.svg" alt="Web" className="feature-icon" />
24-
<h3>For the Web</h3>
25-
<p>
26-
Powered by Web technologies, execute queries via JavaScript on server or client.
41+
<div className="features-section">
42+
<div className="feature-item">
43+
<div className="feature-icon-large">🔗</div>
44+
<h2>Query Decentralized Knowledge Graphs</h2>
45+
<p className="feature-description">
46+
Query decentralized Knowledge Graphs as if they were centralized.<br/>
47+
Stop worrying about how and where your data is published.
2748
</p>
49+
<div className="source-types-scroll">
50+
<div className="source-types-track">
51+
<span>SPARQL endpoints</span>
52+
<span>Linked Data documents</span>
53+
<span>HDT files</span>
54+
<span>Triple Pattern Fragments</span>
55+
<span>Quad Pattern Fragments</span>
56+
<span>JSON-LD</span>
57+
<span>RDF/XML</span>
58+
<span>Turtle</span>
59+
<span>SPARQL endpoints</span>
60+
<span>Linked Data documents</span>
61+
<span>HDT files</span>
62+
</div>
63+
</div>
2864
</div>
29-
<div className="card-info">
30-
<img src="/img/ldf.svg" alt="Web" className="feature-icon" />
31-
<h3>Heterogeneous</h3>
32-
<p>
33-
Execute queries over multiple federated data sources of different types.
65+
66+
<div className="feature-item">
67+
<div className="feature-icon-large">🌐</div>
68+
<h2>Built for the Web</h2>
69+
<p className="feature-description">
70+
Execute queries client-side or server-side, via TypeScript/JavaScript
3471
</p>
72+
<div className="platform-icons">
73+
<div className="platform-icon" title="Chrome">
74+
<svg viewBox="0 0 24 24" width="48" height="48">
75+
<circle cx="12" cy="12" r="10" fill="#4285F4"/>
76+
<circle cx="12" cy="12" r="6" fill="white"/>
77+
<circle cx="12" cy="12" r="4" fill="#4285F4"/>
78+
</svg>
79+
<span>Chrome</span>
80+
</div>
81+
<div className="platform-icon" title="Firefox">
82+
<svg viewBox="0 0 24 24" width="48" height="48">
83+
<circle cx="12" cy="12" r="10" fill="#FF7139"/>
84+
<circle cx="12" cy="12" r="6" fill="#FFCB00"/>
85+
</svg>
86+
<span>Firefox</span>
87+
</div>
88+
<div className="platform-icon" title="Node.js">
89+
<svg viewBox="0 0 24 24" width="48" height="48">
90+
<path d="M12 2L2 7v10l10 5 10-5V7z" fill="#339933"/>
91+
</svg>
92+
<span>Node.js</span>
93+
</div>
94+
<div className="platform-icon" title="Deno">
95+
<svg viewBox="0 0 24 24" width="48" height="48">
96+
<circle cx="12" cy="12" r="10" fill="#000"/>
97+
<circle cx="12" cy="12" r="6" fill="white"/>
98+
</svg>
99+
<span>Deno</span>
100+
</div>
101+
<div className="platform-icon" title="Bun">
102+
<svg viewBox="0 0 24 24" width="48" height="48">
103+
<circle cx="12" cy="12" r="10" fill="#FBF0DF"/>
104+
<circle cx="12" cy="12" r="6" fill="#F9DBBB"/>
105+
</svg>
106+
<span>Bun</span>
107+
</div>
108+
</div>
35109
</div>
36-
<div className="card-info">
37-
<img src="/img/modular.svg" alt="Web" className="feature-icon" />
38-
<h3>Modular</h3>
39-
<p>
40-
A collection of modules that can be combined to achieve a certain task.
110+
111+
<div className="feature-item">
112+
<div className="feature-icon-large">⚙️</div>
113+
<h2>Modular and Flexible</h2>
114+
<p className="feature-description">
115+
Build custom query engines for specific querying needs, or use a pre-built engine
41116
</p>
117+
<div className="config-example">
118+
<pre><code>{`{
119+
"@context": [...],
120+
"@id": "urn:comunica:my",
121+
"actors": [
122+
{
123+
"@id": "ex:rdfParse",
124+
"@type": "ActorRdfParseJsonLd"
125+
},
126+
{
127+
"@id": "ex:rdfResolve",
128+
"@type": "ActorRdfResolveQuadPattern"
129+
},
130+
{
131+
"@id": "ex:optimize",
132+
"@type": "ActorOptimizeQueryOperation"
133+
}
134+
]
135+
}`}</code></pre>
136+
</div>
42137
</div>
43-
</div>
44138

45-
<div className="grid">
46-
<a href="docs/query/" className="card">
47-
<h3>Query with Comunica &rarr;</h3>
48-
<p>Learn how to execute queries</p>
49-
</a>
139+
<div className="feature-item">
140+
<div className="feature-icon-large">✨</div>
141+
<h2>Fully SPARQL 1.2 Compliant</h2>
142+
<p className="feature-description">
143+
Make use of the most modern SPARQL features
144+
</p>
145+
<div className="sparql-carousel">
146+
<div className="sparql-query active">
147+
<pre><code>{`SELECT ?person ?name WHERE {
148+
?person foaf:name ?name .
149+
FILTER(lang(?name) = "en")
150+
}`}</code></pre>
151+
</div>
152+
<div className="sparql-query">
153+
<pre><code>{`CONSTRUCT {
154+
?s ?p ?o
155+
} WHERE {
156+
SERVICE <https://dbpedia.org/sparql> {
157+
?s ?p ?o
158+
}
159+
}`}</code></pre>
160+
</div>
161+
<div className="sparql-query">
162+
<pre><code>{`SELECT * WHERE {
163+
?s ?p ?o .
164+
OPTIONAL { ?s rdfs:label ?label }
165+
} LIMIT 100`}</code></pre>
166+
</div>
167+
</div>
168+
</div>
50169

51-
<a href="docs/modify/" className="card">
52-
<h3>Modify Comunica &rarr;</h3>
53-
<p>Learn how to configure or extend</p>
54-
</a>
170+
<div className="feature-item">
171+
<div className="feature-icon-large">📖</div>
172+
<h2>Free and Open Source</h2>
173+
<p className="feature-description">
174+
Use in any project, open or commercial
175+
</p>
176+
<div className="github-badge">
177+
<svg viewBox="0 0 16 16" width="32" height="32" fill="currentColor">
178+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
179+
</svg>
180+
<div>
181+
<strong>MIT Licensed</strong>
182+
<p>Available on <a href="https://github.com/comunica/comunica">GitHub</a></p>
183+
</div>
184+
</div>
185+
</div>
55186

56-
<a href="https://opencollective.com/comunica-association" className="card">
57-
<h3>Donate &rarr;</h3>
58-
<p>Sponsor via Open Collective</p>
59-
</a>
187+
<div className="feature-item ai-ready">
188+
<div className="feature-icon-large">🤖</div>
189+
<h2>AI and MCP-Ready</h2>
190+
<p className="feature-description">
191+
Integrate with AI systems and Model Context Protocol for intelligent knowledge graph querying
192+
</p>
193+
</div>
194+
</div>
60195

61-
<a href="contribute/" className="card">
62-
<h3>Contribute &rarr;</h3>
63-
<p>Contribute to the development</p>
64-
</a>
196+
<div className="getting-started">
197+
<h2>Getting Started</h2>
198+
<div className="getting-started-grid">
199+
<a href="docs/query/" className="card-getting-started">
200+
<h3>Query with Comunica</h3>
201+
<p>Learn how to execute SPARQL queries over knowledge graphs</p>
202+
<span className="card-arrow">→</span>
203+
</a>
204+
<a href="docs/modify/" className="card-getting-started">
205+
<h3>Modify Comunica</h3>
206+
<p>Configure and extend Comunica for your needs</p>
207+
<span className="card-arrow">→</span>
208+
</a>
209+
<a href="contribute/" className="card-getting-started">
210+
<h3>Contribute</h3>
211+
<p>Join the community and contribute to development</p>
212+
<span className="card-arrow">→</span>
213+
</a>
214+
<a href="https://opencollective.com/comunica-association" className="card-getting-started">
215+
<h3>Donate</h3>
216+
<p>Support the project via Open Collective</p>
217+
<span className="card-arrow">→</span>
218+
</a>
219+
</div>
65220
</div>
66221

67222
<div className="container-page sponsors">

0 commit comments

Comments
 (0)