You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@baremaps.apache.org by le...@apache.org on 2023/07/04 13:51:56 UTC
[incubator-baremaps-site] branch feature/homepage created (now a057e6c)
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a change to branch feature/homepage
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
at a057e6c Update homepage
This branch includes the following new commits:
new 0d07323 Add images
new 521e1f1 Add copyright component
new f3df4c3 Update features component
new 138c021 Add nowrap to icon titles
new a057e6c Update homepage
The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-baremaps-site] 02/05: Add copyright component
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/homepage
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 521e1f10adcffb8577b5013d8b823d5e0c27bcb6
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 15:51:00 2023 +0200
Add copyright component
---
src/components/Copyright/index.tsx | 32 +++++++++++++++++++++++++++++++
src/components/Copyright/style.module.css | 16 ++++++++++++++++
2 files changed, 48 insertions(+)
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;
+}
[incubator-baremaps-site] 01/05: Add images
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/homepage
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 0d073232b4eacee9a19bc577fac31dd616773166
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 15:50:47 2023 +0200
Add images
---
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
4 files changed, 0 insertions(+), 0 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
[incubator-baremaps-site] 03/05: Update features component
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/homepage
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit f3df4c3d03f62e345b5c68aa956ce7fd506ec811
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 15:51:22 2023 +0200
Update features component
---
src/components/features/index.tsx | 8 +++++-
src/components/features/style.module.css | 44 +++++++++++++++++++++++++++++---
2 files changed, 47 insertions(+), 5 deletions(-)
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;
[incubator-baremaps-site] 05/05: Update homepage
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/homepage
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit a057e6c0b531d9209f085fae577f23d2c9fd096f
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 15:51:48 2023 +0200
Update homepage
---
src/pages/index.mdx | 98 +++++++++++++++++++++++++++++++++++++++-------
src/pages/index.module.css | 73 ++++++++++++++++++++++++++++++++++
2 files changed, 157 insertions(+), 14 deletions(-)
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index f0a322a..5f0f5a9 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="Background"
+ 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="Background"
+ 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="Background"
+ 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="Background"
+ 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;
+}
[incubator-baremaps-site] 04/05: Add nowrap to icon titles
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/homepage
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 138c02109c268eb143f09eca986af361b7c0c600
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 15:51:40 2023 +0200
Add nowrap to icon titles
---
src/components/titles/IconTitle/style.module.css | 5 +++++
1 file changed, 5 insertions(+)
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;
+}