Merge pull request #413 from api-platform/staging

MEP

Author: ginifizz

README.md

@@ -1,50 +1,108 @@
-<h1 align="center"><a href="https://api-platform.com"><img src="https://api-platform.com/logo-250x250.png" alt="API Platform"></a></h1>
+# api-platform.com
 
-API Platform is a next-generation web framework designed to easily create API-first projects without compromising extensibility
-and flexibility:
+This repository contains the source code and documentation powering [api-platform.com](https://api-platform.com/).
 
-* Design your own data model as plain old PHP classes or [**import an existing ontology**](https://api-platform.com/docs/schema-generator).
-* **Expose in minutes a hypermedia REST or a GraphQL API** with pagination, data validation, access control, relation embedding,
-  filters and error handling...
-* Benefit from Content Negotiation: [GraphQL](https://api-platform.com/docs/core/graphql/), [JSON-LD](https://json-ld.org), [Hydra](https://hydra-cg.com),
-  [HAL](https://github.com/mikekelly/hal_specification/blob/master/hal_specification.md), [JSON:API](https://jsonapi.org/), [YAML](https://yaml.org/), [JSON](https://www.json.org/), [XML](https://www.w3.org/XML/) and [CSV](https://www.ietf.org/rfc/rfc4180.txt) are supported out of the box.
-* Enjoy the **beautiful automatically generated API documentation** ([OpenAPI](https://api-platform.com/docs/core/openapi/)).
-* Add [**a convenient Material Design administration interface**](https://api-platform.com/docs/admin) built with [React](https://reactjs.org/)
-  without writing a line of code.
-* **Scaffold fully functional Progressive-Web-Apps and mobile apps** built with [Next.js](https://api-platform.com/docs/client-generator/nextjs/) (React),
-[Nuxt.js](https://api-platform.com/docs/client-generator/nuxtjs/) (Vue.js) or [React Native](https://api-platform.com/docs/client-generator/react-native/)
-thanks to [the client generator](https://api-platform.com/docs/client-generator/) (a Vue.js generator is also available).
-* Install a development environment and deploy your project in production using **[Docker](https://api-platform.com/docs/distribution)**
-and [Kubernetes](https://api-platform.com/docs/deployment/kubernetes).
-* Easily add **[OAuth](https://oauth.net/) authentication**.
-* Create specs and tests with **[a developer friendly API testing tool](https://api-platform.com/docs/distribution/testing/)**.
+Single Page Application built with [React](https://facebook.github.io/react/) and powered by [Next.js](https://nextjs.org/).
 
-[![GitHub Actions](https://github.com/api-platform/core/workflows/CI/badge.svg)](https://github.com/api-platform/core/actions?workflow=CI)
-[![Codecov](https://codecov.io/gh/api-platform/core/branch/master/graph/badge.svg)](https://codecov.io/gh/api-platform/core/branch/master)
+[![Build Status](https://travis-ci.org/api-platform/website.svg?branch=main)](https://travis-ci.org/api-platform/website)
 
-The official project documentation is available **[on the API Platform website](https://api-platform.com)**.
 
-API Platform embraces open web standards and the
-[Linked Data](https://www.w3.org/standards/semanticweb/data) movement. Your API will automatically expose structured data.
-It means that your API Platform application is usable **out of the box** with technologies of
-the semantic web.
+## Project structure
 
-It also means that **your SEO will be improved** because **[Google leverages these formats](https://developers.google.com/search/docs/guides/intro-structured-data)**.
+The project has been created from the [API Platform distribution folder](https://api-platform.com/docs/distribution/#installing-the-framework). All next.js application code is located in the "pwa" folder. The project is made with [the Next.js new app router](https://nextjs.org/docs/app).
 
-Last but not least, the server component of API Platform is built on top of the [Symfony](https://symfony.com) framework,
-while client components leverage [React](https://reactjs.org/) ([Vue.js](https://vuejs.org/) flavors are also available).
-It means that you can:
 
-* Use **thousands of Symfony bundles and React components** with API Platform.
-* Integrate API Platform in **any existing Symfony, React or Vue application**.
-* Reuse **all your Symfony and JavaScript skills**, benefit of the incredible amount of documentation available.
-* Enjoy the popular [Doctrine ORM](https://www.doctrine-project.org/projects/orm.html) (used by default, but fully optional:
-  you can use the data provider you want, including but not limited to MongoDB and Elasticsearch)
+## 🤝 Contributors features
 
-## Install
+You need to use a valid github token to retrieve the list of contributors.
+
+1. Go to your [github developer settings](https://github.com/settings/tokens)
+
+2. Select scopes `public_repo`, `read:org` and `read:user`, generate the token and copy it.
+
+3. If you use "pnpm dev" on the folder pwa to launch the project, add a new `.env.local` file on the root of pwa folder, and set your token as an environment variable named `GITHUB_KEY`. 
+
+
+If you use docker, create a file "secret_github_key" at the root of the project with your token inside : 
+```sh
+# Create the secret_github_key file
+echo "YOUR_GITHUB_TOKEN" > secret_github_key
+
+```
+
+> **❗Core team badges restriction**: You need to be a member of API Platform organization to retrieve API Platform teams. You can still locally launch the project, but the badges of the core team members will not appear.
+
+## Installation and usage
+
+### with docker
+
+```sh
+# Checkout project
+git clone https://github.com/api-platform/website.git
+
+# Change directory
+cd website
+
+# Create the github_key file
+echo YOUR_GITHUB_TOKEN > secret_github_key
+
+# Install and run the project locally
+docker compose up -d
+> Go to http://localhost
+
+```
+
+### without docker
+
+```sh
+# Checkout project
+git clone https://github.com/api-platform/website.git
+
+# Change directory
+cd website/pwa
+
+# Install dependencies
+pnpm install
+
+# Launch prebuild script (necessary to create some images variants like wallpapers or logos)
+pnpm prebuild
+
+# Run project locally (for development)
+pnpm dev
+> Go to http://localhost:3000/
+
+
+```
+
+## Build the project locally
+
+### with docker
+
+```sh
+
+# TO COMPLETE
+
+```
+
+
+### without docker
+
+```sh
+
+# Build the project (for production) from the pwa folder
+pnpm build
+
+# Test the built project locally
+pnpm start
+> Go to http://localhost:3000
+
+```
+
+## Publishing Docs For New Versions
+
+1. Create a branch for the new version [in the `api-platform/docs` repository](https://github.com/api-platform/docs).
+2. Update [`consts.ts`](./pwa/consts.ts)
+3. Update [Algolia crawler configuration](https://crawler.algolia.com/admin/crawlers/23316da5-88e8-4a30-ab16-d5ec5bd9133f/configuration/edit)
 
-[Read the official "Getting Started" guide](https://api-platform.com/docs/distribution).
 
-## Credits
 
-Created by [Kévin Dunglas](https://dunglas.fr). Commercial support available at [Les-Tilleuls.coop](https://les-tilleuls.coop).

docker-compose.yml

@@ -95,4 +95,4 @@ volumes:
 
 secrets:
   GITHUB_KEY:
-    file: ./secret_github_key
+    file: ./secret_github_key

pwa/.env

@@ -2,4 +2,5 @@ NEXT_PUBLIC_EVENT_BRITE_ID=483719928327
 NEXT_PUBLIC_DOCSEARCH_API_KEY = 52043128794330355240504c03762281
 NEXT_PUBLIC_DOCSEARCH_INDEX_NAME = api-platform
 NEXT_PUBLIC_DOCSEARCH_APP_ID = ZQ00U6B6ML
-NEXT_PUBLIC_MAPBOX_KEY=pk.eyJ1IjoiZ2luaWZpenoiLCJhIjoiY2tsZ2c3d3Z1MWs1MDJvbWpvdjM2MGg4ZSJ9.5jBAlLJbO-gf2_BQGzfZ0Q
+NEXT_PUBLIC_MAPBOX_KEY=pk.eyJ1IjoiZ2luaWZpenoiLCJhIjoiY2tsZ2c3d3Z1MWs1MDJvbWpvdjM2MGg4ZSJ9.5jBAlLJbO-gf2_BQGzfZ0Q
+

pwa/api/doc/index.ts

@@ -12,7 +12,6 @@ import { cache } from "react";
 import { current } from "consts";
 import { load as parseHtml } from "cheerio";
 import { Chapters } from "types";
-import { notFound } from "next/navigation";
 
 export const MyOctokit = Octokit.plugin(throttling);
 const sidebarMemoryCache = new Map();
@@ -182,6 +181,9 @@ export const getDocContentFromSlug = async (
 const codeInside = /\[codeSelector\]([\s\S]+?)(?=\[\/codeSelector])/gm;
 const codeBlock = /```[a-z]([\s\S]+?)(?=```)/gm;
 const codeLanguage = /```([a-z]+)/;
+const absoluteImgRegex = /src="\/docs\/(.*?\.(jpg|jpeg|png|gif|svg))"/gm;
+const blankLinkRegex =
+  /<a\s+([^>]*\s+)?href="http[^"]*"(?![^>]*\starget=[^>]*>)/gm;
 
 function getLang(block: string): string {
   const language = block.match(codeLanguage);
@@ -193,13 +195,11 @@ function getLang(block: string): string {
   return language[1];
 }
 
-export const getHtmlFromGithubContent = async ({
-  data,
-  path: githubPath,
-}: {
-  data: any;
-  path: string;
-}) => {
+export const getHtmlFromGithubContent = async (
+  data: any,
+  githubPath: string,
+  version: string
+) => {
   const result = Buffer.from(data.content, "base64").toString();
 
   marked.setOptions({ mangle: false, headerIds: false });
@@ -251,7 +251,6 @@ export const getHtmlFromGithubContent = async ({
         $("img").map(function (i, elem) {
           const el = $(this);
           const src = el.attr("src");
-
           if (src) {
             el.attr("src", toAbsoluteUrl(src, githubPath));
           }
@@ -316,5 +315,11 @@ export const getHtmlFromGithubContent = async ({
     },
   });
 
-  return marked.parse(result);
+  return marked
+    .parse(result)
+    .replace(
+      absoluteImgRegex,
+      `src="https://raw.githubusercontent.com/api-platform/docs/${version}/$1"`
+    )
+    .replace(blankLinkRegex, '$& target="_blank"');
 };

pwa/app/(common)/community/contributors/[slug]/page.tsx

@@ -5,7 +5,7 @@ import {
 } from "api/contributors";
 import Heading from "components/common/typography/Heading";
 import RepoLink from "./components/RepoLink";
-import Link from "next/link";
+import Link from "components/common/Link";
 import ContributorRepositories from "./components/ContributorRepositories";
 import ContributorProfileCard from "./components/ContributorProfileCard";
 import { Fragment } from "react";
@@ -145,6 +145,7 @@ export default async function Page({
             <Link
               className="uppercase font-semibold text-sm mb-2 opacity-80"
               href="/community/contributors"
+              prefetch={false}
             >
               Our contributors
             </Link>

pwa/app/(common)/community/contributors/components/ContributorItem.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { Contributor } from "types";
 import classNames from "classnames";
-import Link from "next/link";
+import Link from "components/common/Link";
 import Heading from "components/common/typography/Heading";
 
 interface ContributorItemProps {

pwa/app/(common)/community/contributors/components/ContributorSmallItem.tsx

@@ -1,6 +1,6 @@
 import Heading from "components/common/typography/Heading";
 import Image from "next/image";
-import Link from "next/link";
+import Link from "components/common/Link";
 import { Contributor } from "types";
 
 interface ContributorSmallItemProps {

pwa/app/(common)/components/Admin.tsx

@@ -2,6 +2,7 @@ import Button from "components/common/Button";
 import Heading from "components/common/typography/Heading";
 import Image from "next/image";
 import ListPoint from "./AdminListPoint";
+import Link from "components/common/Link";
 
 export default function Admin() {
   return (
@@ -13,20 +14,28 @@ export default function Admin() {
         <p className="text-text-secondary dark:text-white text-xl font-light mt-8">
           API Platform Admin exposes your data trough a beautiful UI.
         </p>
-        <div className="flex flex-col w-full justify-between items-start py-8 gap-y-8 | sm:flex-row sm:max-w-xl sm:gap-x-24 sm:gap-y-0 sm:mt-8 | md:max-w-none | xl:min-h-[450px]">
-          <div className="flex flex-col items-center text-center w-full | lg:text-left lg:w-1/4">
+        <div className="flex flex-col w-full justify-between items-center py-8 gap-y-8 | sm:flex-row sm:max-w-xl sm:gap-x-24 sm:gap-y-0 sm:mt-8 | md:max-w-none | xl:min-h-[450px]">
+          <div className="flex flex-col items-center text-center w-full | sm:items-start sm:text-left | lg:w-1/4">
             <ListPoint direction="left">
               Entirely <strong>customizable</strong>
             </ListPoint>
             <ListPoint direction="left">
-              <strong>Hydra</strong> and <strong>OpenAPI</strong> compatible
+              <strong>Hydra</strong> and{" "}
+              <Link
+                href="/docs/admin/openapi/"
+                prefetch={false}
+                className="link"
+              >
+                <strong>OpenAPI</strong>
+              </Link>{" "}
+              compatible
             </ListPoint>
             <ListPoint direction="left">
               Built on top of <strong>Material UI</strong> and{" "}
               <strong>React Admin</strong>
             </ListPoint>
           </div>
-          <div className="flex flex-col items-center text-center w-full | lg:text-left lg:w-1/4">
+          <div className="flex flex-col items-center text-center w-full | sm:items-start sm:text-left | lg:w-1/4">
             <ListPoint direction="right">
               100% <strong>no code</strong>
             </ListPoint>
@@ -50,7 +59,7 @@ export default function Admin() {
           empty
           className="relative dark:border-blue-extralight dark:text-blue-extralight"
           color="white"
-          href="/docs"
+          href="/docs/admin/"
           ariaLabel="See admin interface"
         >
           Learn more