Repository: colbyfayock/next-leaflet-starter
Branch: main
Commit: 5f5cb8014561
Files: 35
Total size: 13.2 KB

Directory structure:
gitextract_30qpdn3z/

├── .gitignore
├── .nvmrc
├── README.md
├── jsconfig.json
├── next.config.js
├── package.json
└── src/
    ├── components/
    │   ├── Button/
    │   │   ├── Button.js
    │   │   ├── Button.module.scss
    │   │   └── index.js
    │   ├── Container/
    │   │   ├── Container.js
    │   │   ├── Container.module.scss
    │   │   └── index.js
    │   ├── Footer/
    │   │   ├── Footer.js
    │   │   ├── Footer.module.scss
    │   │   └── index.js
    │   ├── Header/
    │   │   ├── Header.js
    │   │   ├── Header.module.scss
    │   │   └── index.js
    │   ├── Layout/
    │   │   ├── Layout.js
    │   │   ├── Layout.module.scss
    │   │   └── index.js
    │   ├── Map/
    │   │   ├── DynamicMap.js
    │   │   ├── Map.js
    │   │   ├── Map.module.scss
    │   │   └── index.js
    │   └── Section/
    │       ├── Section.js
    │       ├── Section.module.scss
    │       └── index.js
    ├── pages/
    │   ├── _app.js
    │   ├── api/
    │   │   └── hello.js
    │   └── index.js
    └── styles/
        ├── Home.module.scss
        ├── globals.scss
        └── settings/
            ├── __colors.scss
            └── _settings.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: .nvmrc
================================================
v18.17.0


================================================
FILE: README.md
================================================
# 🍃 Next.js Leaflet Starter

Jumpstart your new Next.js mapping project with Leaflet!

## ⚡ Quick Deploy
[![Deploy with Vercel Now](https://zeit.co/button)](https://vercel.com/import/project?template=https://github.com/colbyfayock/next-leaflet-starter) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/colbyfayock/next-leaflet-starter)


## 🧰 What This Includes
* [Next.js](https://nextjs.org/)
* [Leaflet](https://leafletjs.com/)
* [React Leaflet](https://react-leaflet.js.org)

## 🚀 Getting Started

### Requirements

### Quick Start

```
npx create-next-app -e https://github.com/colbyfayock/next-leaflet-starter
```

### Running the Project
First, run the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.


================================================
FILE: jsconfig.json
================================================
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": [ "src/components/*" ],
      "@styles/*": [ "src/styles/*" ]
    }
  }
}

================================================
FILE: next.config.js
================================================
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: 'node_modules/leaflet/dist/images',
            to: path.resolve(__dirname, 'public', 'leaflet', 'images')
          },
        ],
      }),
    )
    return config
  }
}

module.exports = nextConfig;

================================================
FILE: package.json
================================================
{
  "name": "next-leaflet-starter",
  "homepage": "https://next-leaflet-starter.netlify.app",
  "version": "0.1.0",
  "license": "MIT",
  "author": "Colby Fayock <hello@colbyfayock.com>",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/colbyfayock/next-leaflet-starter"
  },
  "bugs": {
    "url": "https://github.com/colbyfayock/next-leaflet-starter/issues"
  },
  "dependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "leaflet": "^1.9.4",
    "next": "^14.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.11.0",
    "react-leaflet": "^4.2.1",
    "sass": "^1.69.5"
  }
}


================================================
FILE: src/components/Button/Button.js
================================================
import Link from 'next/link';
import styles from './Button.module.scss';

const Button = ({children, href, className, ...rest}) => {
  let buttonClassName = styles.button;

  if (className) {
    buttonClassName = `${buttonClassName} ${className}`;
  }

  const buttonProps = {
    className: buttonClassName,
    ...rest,
  };

  if (href) {
    if ( href.startsWith('/') ) {
      return (
        <Link href={href} {...buttonProps}>
          {children}
        </Link>
      );
    }
    return (
      <a href={href} {...buttonProps}>
        {children}
      </a>
    );
  }

  return (
    <button {...buttonProps}>
      {children}
    </button>
  );
};

export default Button;


================================================
FILE: src/components/Button/Button.module.scss
================================================
@import "@styles/settings/_settings";

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1em;
  font-weight: bold;
  font-family: inherit;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background-color: $color-green;
  padding: 1em 1.4em;
  border: 0;
  border-radius: .2em;
  cursor: pointer;

  &:hover {
    background-color: lighten($color-green, 10);
  }

  &:disabled {
    color: rgba(white, 0.5);
    background-color: lighten($color-green, 10);
    cursor: default;
    opacity: .6;
  }
}

================================================
FILE: src/components/Button/index.js
================================================
export { default } from './Button';


================================================
FILE: src/components/Container/Container.js
================================================
import styles from './Container.module.scss';

const Container = ({ children, className, ...rest }) => {
  let containerClassName = styles.container;

  if (className) {
    containerClassName = `${containerClassName} ${className}`;
  }

  return (
    <div className={containerClassName} {...rest}>
      {children}
    </div>
  );
};

export default Container;


================================================
FILE: src/components/Container/Container.module.scss
================================================
.container {
  width: 100%;
  max-width: 1024px;
  padding: 0 2em;
  margin: 0 auto;

  @media (max-width: 720px) {
    padding: 0 1em;
  }

  h2,
  h3,
  h4,
  p,
  ul {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}


================================================
FILE: src/components/Container/index.js
================================================
export { default } from './Container';


================================================
FILE: src/components/Footer/Footer.js
================================================
import Container from '@components/Container';

import styles from './Footer.module.scss';

const Footer = ({ ...rest }) => {
  return (
    <footer className={styles.footer} {...rest}>
      <Container className={`${styles.footerContainer} ${styles.footerLegal}`}>
        <p>
          &copy; <a href="https://spacejelly.dev">Next.js Leaflet Starter</a>, {new Date().getFullYear()}
        </p>
      </Container>
    </footer>
  );
};

export default Footer;


================================================
FILE: src/components/Footer/Footer.module.scss
================================================
@import "@styles/settings/_settings";

.footer {
  width: 100%;
  color: white;
  background-color: black;
  padding: 1.2em 0;

  a {
    color: inherit;
  }

  p {

    margin: 0 0 .5em;

    &:last-child {
      margin-bottom: 0;
    }

  }
}

.footerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 0.4em;

  @media (max-width: 720px) {
    flex-wrap: wrap;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.footerLinks {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 2em;

  @media (max-width: 720px) {
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  li {
    margin: 0 0.8em;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    svg {
      margin-right: 0.4em;
    }
  }
}

.footerLegal {
  a {
    text-decoration: underline;
  }
}


================================================
FILE: src/components/Footer/index.js
================================================
export { default } from './Footer';


================================================
FILE: src/components/Header/Header.js
================================================
import Link from 'next/link';
import { FaGithub } from 'react-icons/fa';

import Container from '@components/Container';

import styles from './Header.module.scss';

const Header = () => {
  return (
    <header className={styles.header}>
      <Container className={styles.headerContainer}>
        <p className={styles.headerTitle}>
          <Link href="/">
            Next.js Leaflet Starter
          </Link>
        </p>
        <ul className={styles.headerLinks}>
          <li>
            <a href="https://github.com/colbyfayock/next-leaflet-starter" rel="noreferrer">
              <FaGithub />
            </a>
          </li>
        </ul>
      </Container>
    </header>
  );
};

export default Header;


================================================
FILE: src/components/Header/Header.module.scss
================================================
@import "@styles/settings/_settings";

.header {
  width: 100%;
  font-size: 1em;
  color: white;
  background-color: black;
  padding: 1em 0;
  margin: 0;
}

.headerContainer {

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}

.headerTitle {
  font-size: 1.6em;
  font-weight: bold;
  margin: 0;
}

.headerLogo {
  height: 1.6em;
}

.headerLinks {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    margin: 0 0.8em;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
      margin-right: 0.4em;
    }
  }
}


================================================
FILE: src/components/Header/index.js
================================================
export { default } from './Header';


================================================
FILE: src/components/Layout/Layout.js
================================================
import Head from 'next/head';

import Header from '@components/Header';
import Footer from '@components/Footer';

import styles from './Layout.module.scss';

const Layout = ({ children, className, ...rest }) => {
  return (
    <div className={styles.layout}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <main className={styles.main}>{children}</main>
      <Footer />
    </div>
  );
};

export default Layout;


================================================
FILE: src/components/Layout/Layout.module.scss
================================================
.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  min-height: 100vh;
}

.main {
  padding: 0 0 3em;
}


================================================
FILE: src/components/Layout/index.js
================================================
export { default } from './Layout';


================================================
FILE: src/components/Map/DynamicMap.js
================================================
import { useEffect } from 'react';
import Leaflet from 'leaflet';
import * as ReactLeaflet from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

import styles from './Map.module.scss';

const { MapContainer } = ReactLeaflet;

const Map = ({ children, className, width, height, ...rest }) => {
  let mapClassName = styles.map;

  if ( className ) {
    mapClassName = `${mapClassName} ${className}`;
  }

  useEffect(() => {
    (async function init() {
      delete Leaflet.Icon.Default.prototype._getIconUrl;
      Leaflet.Icon.Default.mergeOptions({
        iconRetinaUrl: 'leaflet/images/marker-icon-2x.png',
        iconUrl: 'leaflet/images/marker-icon.png',
        shadowUrl: 'leaflet/images/marker-shadow.png',
      });
    })();
  }, []);

  return (
    <MapContainer className={mapClassName} {...rest}>
      {children(ReactLeaflet, Leaflet)}
    </MapContainer>
  )
}

export default Map;


================================================
FILE: src/components/Map/Map.js
================================================
import dynamic from 'next/dynamic';

const DynamicMap = dynamic(() => import('./DynamicMap'), {
  ssr: false
});

// Set default sizing to control aspect ratio which will scale responsively
// but also help avoid layout shift

const DEFAULT_WIDTH = 600;
const DEFAULT_HEIGHT = 600;

const Map = (props) => {
  const { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT } = props;
  return (
    <div style={{ aspectRatio: width / height }}>
      <DynamicMap {...props} />
    </div>
  )
}

export default Map;

================================================
FILE: src/components/Map/Map.module.scss
================================================
.map {
  width: 100%;
  height: 100%;
}

================================================
FILE: src/components/Map/index.js
================================================
export { default } from './Map';

================================================
FILE: src/components/Section/Section.js
================================================
import { forwardRef } from 'react';

import styles from './Section.module.scss';

const Section = forwardRef(function Section(props, ref) {
  const { children, className, backgroundColor, ...rest } = props;

  let sectionClassName = styles.section;

  if (className) {
    sectionClassName = `${sectionClassName} ${className}`;
  }

  return (
    <section ref={ref} className={sectionClassName} data-background-color={backgroundColor} {...rest}>
      {children}
    </section>
  );
});

export default Section;


================================================
FILE: src/components/Section/Section.module.scss
================================================
.section {
  padding: 1em 0;
  margin: 1em 0;

  @media (min-width: 720px) {
    padding: 2em 0;
    margin: 3em 0;
  }
}


================================================
FILE: src/components/Section/index.js
================================================
export { default } from './Section';


================================================
FILE: src/pages/_app.js
================================================
import '@styles/globals.scss'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: src/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default (req, res) => {
  res.statusCode = 200
  res.json({ name: 'John Doe' })
}


================================================
FILE: src/pages/index.js
================================================
import Head from 'next/head';

import Layout from '@components/Layout';
import Section from '@components/Section';
import Container from '@components/Container';
import Map from '@components/Map';
import Button from '@components/Button';

import styles from '@styles/Home.module.scss';

const DEFAULT_CENTER = [38.907132, -77.036546]

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>Next.js Leaflet Starter</title>
        <meta name="description" content="Create mapping apps with Next.js Leaflet Starter" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Section>
        <Container>
          <h1 className={styles.title}>
            Next.js Leaflet Starter
          </h1>

          <Map className={styles.homeMap} width="800" height="400" center={DEFAULT_CENTER} zoom={12}>
            {({ TileLayer, Marker, Popup }) => (
              <>
                <TileLayer
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                />
                <Marker position={DEFAULT_CENTER}>
                  <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                  </Popup>
                </Marker>
              </>
            )}
          </Map>

          <p className={styles.description}>
            <code className={styles.code}>npx create-next-app -e https://github.com/colbyfayock/next-leaflet-starter</code>
          </p>

          <p className={styles.view}>
            <Button href="https://github.com/colbyfayock/next-leaflet-starter">Vew on GitHub</Button>
          </p>
        </Container>
      </Section>
    </Layout>
  )
}


================================================
FILE: src/styles/Home.module.scss
================================================
.title {
  font-size: 3rem;
  line-height: 1.15;
  text-align: center;
  margin: 0 0 1em;
}

.description {
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

.view {
  text-align: center;
  margin-top: 3em;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;
}

================================================
FILE: src/styles/globals.scss
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

================================================
FILE: src/styles/settings/__colors.scss
================================================
$color-green: #5fbb9d;

================================================
FILE: src/styles/settings/_settings.scss
================================================
@import "_colors";