feat: 🎉 Setup NextJS

.env.sample

@@ -0,0 +1,3 @@
+AIRTABLE_API_KEY=
+AIRTABLE_BASE=
+PROPOSAL_URL=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,33 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel

.nvmrc

@@ -0,0 +1 @@
+v16

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn 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.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

containers/ProjectCard/index.tsx

@@ -0,0 +1,47 @@
+import styles from "../../styles/containers/ProjectCard.module.css";
+
+type Props = {
+  project: Project;
+};
+
+const ProjectCard = (props: Props) => {
+  const { project } = props;
+
+  return (
+    <div className={styles.card}>
+      <h3>{project.fields.Name}</h3>
+      <div className={styles.content}>
+        <p>{project.fields.Description}</p>
+        <div className={styles.tags}>
+          {project.fields.Technos.map((tag, index) => (
+            <span
+              className={styles.tag}
+              key={index}
+              style={{ background: getBackgroundColor(tag) }}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+      <div className={styles.actions}>
+        <a href={project.fields.URL} target="_blank">
+          <button>Ouvrir</button>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;
+
+const getBackgroundColor = (str: string) =>
+  `hsl(${hashCode(str) % 360}, 100%, 80%)`;
+
+const hashCode = (str: string) => {
+  let hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
+};

containers/ProjectsList/index.tsx

@@ -0,0 +1,19 @@
+import ProjectCard from "../ProjectCard";
+import styles from "../../styles/containers/ProjectsList.module.css";
+
+type Props = {
+  projects: Project[];
+};
+
+const ProjectsList = (props: Props) => {
+  const { projects = [] } = props;
+  return (
+    <div className={styles.list}>
+      {projects.map(project => (
+        <ProjectCard key={project.id} project={project} />
+      ))}
+    </div>
+  );
+};
+
+export default ProjectsList;

layouts/default.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import styles from "../styles/layouts/Default.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+const DefaultLayout = (props: Props) => {
+  return (
+    <div className={styles.app}>
+      <main className={styles.content}>{props.children}</main>
+    </div>
+  );
+};
+
+export default DefaultLayout;

lib/getProjectsList.ts

@@ -0,0 +1,30 @@
+import Airtable from "airtable";
+
+const { AIRTABLE_BASE, PROPOSAL_URL = "", SUBSCRIBE_URL = "" } = process.env;
+
+export const getProjectsList = async context => {
+  let projects = [];
+  const staticProps = {
+    proposalUrl: PROPOSAL_URL,
+    subscribeUrl: SUBSCRIBE_URL,
+  };
+
+  if (!AIRTABLE_BASE) {
+    console.error(`No Airtable base defined`);
+    return { props: { projects, ...staticProps } };
+  }
+
+  try {
+    const base = Airtable.base(AIRTABLE_BASE);
+    const projectRecords = await base("Projects")
+      .select({
+        view: "Published",
+      })
+      .all();
+    projects = projectRecords.map(i => i._rawJson);
+  } catch (error) {
+    console.error(error);
+  }
+
+  return { props: { projects, ...staticProps } };
+};

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,18 @@
+/** @type {import('next').NextConfig} */
+
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [],
+    // If you use `MDXProvider`, uncomment the following line.
+    // providerImportSource: "@mdx-js/react",
+  },
+});
+
+module.exports = withMDX({
+  reactStrictMode: true,
+
+  // Append the default value with md extensions
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+});

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "geneve-open-source",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build && next export",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^2.1.1",
+    "@next/mdx": "^12.1.6",
+    "airtable": "^0.11.4",
+    "i18next": "^21.8.3",
+    "next": "12.1.6",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-i18next": "^11.16.9"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.35",
+    "@types/react": "^18.0.9",
+    "eslint": "8.15.0",
+    "eslint-config-next": "12.1.6",
+    "typescript": "^4.6.4"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,21 @@
+import Head from "next/head";
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>Genève Open Source</title>
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <meta name="title" content="Genève Open Source" />
+        <meta
+          name="description"
+          content="Site référençant les applications Open Source qui concernent Genève et sa région."
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

pages/api/hello.ts

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/index.mdx

@@ -0,0 +1,58 @@
+import Layout from "../layouts/default";
+import ProjectsList from "../containers/ProjectsList";
+import { getProjectsList } from "../lib/getProjectsList";
+
+# Genève Open Source
+
+La région de Genève est à la fois riche en données libres d’accès (Open Data) et riche en compétences techniques,
+notamment de développement. Pourtant, il existe peu de projets communautaires dans lesquels développeurs et développeuses
+de la région peuvent s’engager à la création de biens communs digitaux.
+
+Cette plateforme vise à donner de la visibilité sur les projets Open Source existants qui concerne la région de Genève et ses environs.
+
+## Les projets existants
+
+<ProjectsList projects={props.projects} />
+
+## Comment participer ?
+
+Que vous soyez senior, junior ou amateur, vous pouvez toujours donner un coup de main sur un projet.
+Vous pouvez commencer simplement en corrigeant une documentation, en repérant des bugs ou en rendant
+le lancement d’une app plus aisée. Il n’y a pas de petite contribution !
+
+Pour plus d’informations sur comment contribuer à un projet Open Source, nous vous invitons à lire
+[https://opensource.guide/fr/how-to-contribute/](https://opensource.guide/fr/how-to-contribute/).
+
+## Un projet à ajouter ?
+
+La liste des projets est encore courte. Si vous avez un projet existant ou souhaitez créer un nouveau
+projet Open Source qui concerne Genève et sa région, contactez-nous pour que l’on puisse faire grandir la liste.
+
+<div className="center">
+  <a href={props.proposalUrl} target="_blank">
+    <button className="big">Proposer un projet</button>
+  </a>
+</div>
+
+## Besoin d'inspiration ?
+
+La région de Genève, comme le reste de la Suisse, fournit une grande quantité de données en libre accès dans
+le but [“d’encourager leur réutilisation, renforcer la transparence de l’action de la municipalité, soutenir l’innovation et participer au développement de l’économie numérique”](https://www.geneve.ch/fr/actualites/dossiers-information/geneve-ville-numerique/innover/open-data).
+
+Il est possible de trouver des données de toutes sortes sur [https://opendata.swiss](https://opendata.swiss)
+et [https://ge.ch/sitg](https://ge.ch/sitg).
+
+## Restons en contact
+
+Si vous souhaitez être tenus au courant des nouvelles opportunités et des ajouts de projet sur la plateforme,
+inscrivez-vous à la newsletter. Aucun e-mail commercial ne sera envoyé, c’est juste pour rester en contact.
+
+<div className="center">
+  <a href={props.subscribeUrl} target="_blank">
+    <button className="big">S'inscrire à la newsletter</button>
+  </a>
+</div>
+
+export default ({ children }) => <Layout>{children}</Layout>;
+
+export const getStaticProps = async () => getProjectsList();

styles/containers/ProjectCard.module.css

@@ -0,0 +1,35 @@
+.card {
+    border: 1px solid var(--greyLight);
+    border-radius: var(--borderRadius);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.card h3 {
+    margin: 0;
+}
+
+.content {
+    flex-grow: 1;
+}
+
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 0.5rem;
+    row-gap: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+.tag {
+    background-color: #aaa;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--borderRadius);
+}
+
+.actions {
+    display: flex;
+    justify-content: flex-end;
+}

styles/containers/ProjectsList.module.css

@@ -0,0 +1,12 @@
+.list {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 1rem;
+    row-gap: 1rem;
+}
+
+@media screen and (max-width: 800px){
+    .list {
+        grid-template-columns: 1fr;   
+    }
+}