This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
The following commit(s) were added to refs/heads/main by this push:
new b28829c Update homepage (#34)
b28829c is described below
commit b28829c2eac412395b96e49a4504054d791da56b
Author: Leonard <[email protected]>
AuthorDate: Tue Jul 4 16:14:58 2023 +0200
Update homepage (#34)
* Add images
* Add copyright component
* Update features component
* Add nowrap to icon titles
---
public/images/geocoder.gif | Bin 0 -> 797719 bytes
public/images/map_eu.png | Bin 0 -> 1984349 bytes
public/images/map_styles.png | Bin 0 -> 1783656 bytes
public/images/map_vector_view.png | Bin 0 -> 2447043 bytes
src/components/Copyright/index.tsx | 32 ++++++++
src/components/Copyright/style.module.css | 16 ++++
src/components/features/index.tsx | 8 +-
src/components/features/style.module.css | 44 +++++++++-
src/components/titles/IconTitle/style.module.css | 5 ++
src/pages/index.mdx | 98 +++++++++++++++++++----
src/pages/index.module.css | 73 +++++++++++++++++
11 files changed, 257 insertions(+), 19 deletions(-)
diff --git a/public/images/geocoder.gif b/public/images/geocoder.gif
new file mode 100644
index 0000000..84d2e3f
Binary files /dev/null and b/public/images/geocoder.gif differ
diff --git a/public/images/map_eu.png b/public/images/map_eu.png
new file mode 100644
index 0000000..c359867
Binary files /dev/null and b/public/images/map_eu.png differ
diff --git a/public/images/map_styles.png b/public/images/map_styles.png
new file mode 100644
index 0000000..482ce34
Binary files /dev/null and b/public/images/map_styles.png differ
diff --git a/public/images/map_vector_view.png
b/public/images/map_vector_view.png
new file mode 100644
index 0000000..3ba4ea1
Binary files /dev/null and b/public/images/map_vector_view.png differ
diff --git a/src/components/Copyright/index.tsx
b/src/components/Copyright/index.tsx
new file mode 100644
index 0000000..84bd526
--- /dev/null
+++ b/src/components/Copyright/index.tsx
@@ -0,0 +1,32 @@
+import cn from 'clsx';
+
+import styles from './style.module.css';
+
+interface CopyrightProps {
+ copyrights: {
+ name: string;
+ url: string;
+ }[];
+}
+
+export const Copyright: React.FC<CopyrightProps> = ({ copyrights }) => {
+ return (
+ <div
+ className={cn(
+ 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner',
+ styles.copyright
+ )}
+ >
+ {copyrights.map((c, i) => {
+ return (
+ <span key={i}>
+ {'© '}
+ <a href={c.url} target="_blank" rel="noopener noreferrer">
+ {c.name}
+ </a>
+ </span>
+ );
+ })}
+ </div>
+ );
+};
diff --git a/src/components/Copyright/style.module.css
b/src/components/Copyright/style.module.css
new file mode 100644
index 0000000..58339e7
--- /dev/null
+++ b/src/components/Copyright/style.module.css
@@ -0,0 +1,16 @@
+.copyright {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ z-index: 1;
+ margin: 0.5rem;
+ padding: 0.2rem 0.4rem;
+ border-radius: 9999px;
+ background-color: white;
+ font-size: 0.75rem;
+ color: black;
+}
+
+.copyright a:hover {
+ text-decoration: underline;
+}
diff --git a/src/components/features/index.tsx
b/src/components/features/index.tsx
index 44bb0a7..24e08b8 100644
--- a/src/components/features/index.tsx
+++ b/src/components/features/index.tsx
@@ -8,6 +8,9 @@ import styles from './style.module.css';
export function Feature({
medium,
large,
+ full,
+ square,
+ squareLarge,
plain,
centered,
children,
@@ -27,6 +30,9 @@ export function Feature({
styles.feature,
medium && styles.medium,
large && styles.large,
+ full && styles.full,
+ square && styles.square,
+ squareLarge && styles['square-large'],
plain && styles.plain,
centered && styles.centered,
lightOnly && styles['light-only'],
@@ -36,7 +42,7 @@ export function Feature({
>
{children}
{href ? (
- <Link className={styles.link} href={href} target="_blank">
+ <Link className={styles.link} href={href}>
<svg
xmlns="http://www.w3.org/2000/svg";
width="1.5em"
diff --git a/src/components/features/style.module.css
b/src/components/features/style.module.css
index 76a6c17..611126c 100644
--- a/src/components/features/style.module.css
+++ b/src/components/features/style.module.css
@@ -6,18 +6,35 @@
overflow: hidden;
border-radius: 0.75em;
}
-.feature.medium {
+
+.feature.large {
grid-column: span 2;
}
-.feature.large {
+
+.feature.full {
grid-column: span 3;
}
-.feature.plain {
- padding: 0;
+
+.feature.square {
+ grid-column: span 1;
+ grid-row: span 1;
+ aspect-ratio: 1 / 1;
}
+
+.feature.square-large {
+ grid-column: span 2;
+ grid-row: span 2;
+ aspect-ratio: 1 / 1;
+}
+
.feature.centered {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
text-align: center;
}
+
.feature h3 {
position: relative;
font-size: 34px;
@@ -27,18 +44,22 @@
letter-spacing: -0.02rem;
z-index: 2;
}
+
:global(.dark) .feature:not(.light-only) {
color: #fff;
background-color: #202020;
}
+
.feature {
box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%),
0 0 0 1px rgb(0 0 0 / 3%);
transition: box-shadow 0.3s ease;
}
+
:global(.dark) .feature {
box-shadow: 0 0 0 1px rgb(82 82 82 / 60%);
}
+
.feature .link {
position: absolute;
right: 1em;
@@ -57,6 +78,7 @@
transition: all 0.2s ease;
-webkit-user-drag: none;
}
+
@media (hover: hover) {
.feature .link {
opacity: 0;
@@ -97,6 +119,13 @@
.feature.large {
grid-column: span 1;
}
+ .feature.full {
+ grid-column: span 1;
+ }
+ .feature.square-large {
+ grid-column: span 1;
+ grid-row: span 1;
+ }
.features {
grid-template-columns: 1fr;
grid-gap: 3em;
@@ -117,6 +146,13 @@
.feature.large {
grid-column: span 1;
}
+ .feature.full {
+ grid-column: span 1;
+ }
+ .feature.square-large {
+ grid-column: span 1;
+ grid-row: span 1;
+ }
.features {
grid-template-columns: 1fr;
grid-gap: 3em;
diff --git a/src/components/titles/IconTitle/style.module.css
b/src/components/titles/IconTitle/style.module.css
index 766aeec..ce2bc71 100644
--- a/src/components/titles/IconTitle/style.module.css
+++ b/src/components/titles/IconTitle/style.module.css
@@ -5,3 +5,8 @@
gap: 1.5rem;
margin-bottom: 0.75rem;
}
+
+.title-container h2,
+.title-container h3 {
+ white-space: nowrap;
+}
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index f0a322a..6148ee0 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -9,11 +9,28 @@ import {
faListCheck,
faVectorSquare,
faEarthAmericas,
- faPeopleGroup
+ faPeopleGroup,
+ faFillDrip
} from '@fortawesome/free-solid-svg-icons';
import Map from '@/components/map';
import { Features, Feature } from '@/components/features';
import { IconTitle } from '@/components/titles/IconTitle';
+import { Copyright } from '@/components/Copyright';
+
+import styles from './index.module.css';
+
+export function OSMCopyright() {
+ return (
+ <Copyright
+ copyrights={[
+ {
+ name: 'OpenStreetMap',
+ url: 'https://www.openstreetmap.org/'
+ }
+ ]}
+ />
+ );
+}
<div className="home-content">
<div className="content-container">
@@ -25,7 +42,7 @@ import { IconTitle } from '@/components/titles/IconTitle';
online maps.
</div>
<div className="subtitle">
- <Link href="/documentation">
+ <Link href="/documentation" className={styles.cta}>
Get started <span>→</span>
</Link>
</div>
@@ -33,10 +50,32 @@ import { IconTitle } from '@/components/titles/IconTitle';
<div className="features-container">
<div className="content-container">
<Features>
- <Feature index={0} plain large style={{ height: 600 }}>
- <Map styleSelect />
+ <Feature index={0} centered>
+ <IconTitle icon={faVectorSquare}>
+ <h3>Vector Tiles</h3>
+ </IconTitle>
+ <div>
+ Baremaps allows you to easily serve and publish custom vector tiles
+ from PostGIS. Whether you need to create maps for web or mobile
+ applications, Baremaps makes it simple and efficient. Additionally,
+ we are continuously working on developing a high-quality base map.
+ </div>
</Feature>
- <Feature index={0}>
+ <Feature index={1} squareLarge>
+ <Link href="/map" className={styles['demo-link']}>
+ <h3>Explore Map ↗</h3>
+ <p>Click to view the map</p>
+ </Link>
+ <OSMCopyright />
+ <Image
+ src="/images/map_eu.png"
+ alt="Baremaps Map"
+ loading="eager"
+ layout="fill"
+ objectFit="cover"
+ />
+ </Feature>
+ <Feature index={2} centered>
<IconTitle icon={faListCheck}>
<h3>Data Pipeline</h3>
</IconTitle>
@@ -48,18 +87,28 @@ import { IconTitle } from '@/components/titles/IconTitle';
workflows.
</div>
</Feature>
- <Feature index={0}>
- <IconTitle icon={faVectorSquare}>
- <h3>Vector Tiles</h3>
+ <Feature index={3} large style={{ height: 450 }} href="/map">
+ <OSMCopyright />
+ <Image
+ src="/images/map_styles.png"
+ alt="Baremaps Map Styles"
+ loading="eager"
+ layout="fill"
+ objectFit="cover"
+ />
+ </Feature>
+ <Feature index={4} centered>
+ <IconTitle icon={faFillDrip}>
+ <h3>Themes</h3>
</IconTitle>
<div>
- Baremaps allows you to easily serve and publish custom vector tiles
- from PostGIS. Whether you need to create maps for web or mobile
- applications, Baremaps makes it simple and efficient. Additionally,
- we are continuously working on developing a high-quality base map.
+ Baremaps provides a set of themes that can be used to style your
+ maps. The themes are customizable and can be easily integrated into
+ your existing applications. With hot reloading, you can quickly
+ iterate on your design and see the results in real-time.
</div>
</Feature>
- <Feature index={0}>
+ <Feature index={5} centered>
<IconTitle icon={faEarthAmericas}>
<h3>Geocoder</h3>
</IconTitle>
@@ -71,7 +120,28 @@ import { IconTitle } from '@/components/titles/IconTitle';
results.
</div>
</Feature>
- <Feature index={0}>
+ <Feature index={6} large style={{ height: 450 }} href="/map">
+ <OSMCopyright />
+ <Image
+ src="/images/geocoder.gif"
+ alt="Baremaps Geocoder Demo"
+ loading="eager"
+ layout="fill"
+ objectFit="cover"
+ objectPosition="0% 0%"
+ />
+ </Feature>
+ <Feature index={7} large style={{ height: 450 }} href="/map">
+ <OSMCopyright />
+ <Image
+ src="/images/map_vector_view.png"
+ alt="Baremaps Map Vector View"
+ loading="eager"
+ layout="fill"
+ objectFit="cover"
+ />
+ </Feature>
+ <Feature index={8} centered>
<IconTitle icon={faPeopleGroup}>
<h3>Contributing</h3>
</IconTitle>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index e69de29..213d465 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -0,0 +1,73 @@
+a.cta {
+ display: inline-block;
+ background: linear-gradient(to bottom, #238aff, #0077ff);
+ text-decoration: none;
+ border-radius: 0.75rem;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ margin-top: 0.5rem;
+ text-shadow: 0 1px 1px #00387838;
+ box-shadow: 0 1px 2px #00295738;
+ transition: all 0.2s ease;
+ -webkit-user-drag: none;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+}
+
+a.cta span {
+ display: inline-block;
+ transition: all 0.2s ease;
+}
+
+a.cta:hover span {
+ transform: translateX(3px);
+}
+
+a.cta:hover {
+ box-shadow: 0 0 0 5px rgba(0, 120, 255, 0.35);
+ filter: brightness(1.05);
+}
+
+a.cta:active {
+ box-shadow: 0 1px 3px #00295738;
+ filter: brightness(0.95);
+}
+
+a.cta:active span {
+ transform: translateX(5px);
+}
+
+a.cta:focus-visible {
+ outline: 2px solid hsl(var(--nextra-primary-hue) 100% 77%);
+ outline-offset: 2px;
+}
+
+a.cta:focus-visible span {
+ transform: translateX(3px);
+}
+
+.demo-link {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ color: white;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ padding: 2rem;
+ opacity: 0;
+ transition: opacity 0.25s ease;
+}
+
+.demo-link:hover {
+ opacity: 1;
+}
+
+.demo-link h3 {
+ text-align: start;
+ font-size: 3rem;
+}
