Merge branch 'ktl-657-nextjs' of github.com:JetBrains/kotlin-web-site…

… into ktl-674-community-keep-in-touch-page
LiYing2010 · Apr 18, 2022 · 29cdc63 · 29cdc63
2 parents 68db35a + 8be2590
commit 29cdc63
Show file tree

Hide file tree

Showing 23 changed files with 2,046 additions and 82 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,11 +1,4 @@
 {
-  "presets":  [
-    [
-      "@jetbrains/babel-preset-jetbrains",
-      {
-        "corejs": 3,
-        "transformRuntime": true
-      }
-    ]
-  ]
-}
+  "presets": ["next/babel"],
+  "plugins": []
+}
diff --git a/README.md b/README.md
@@ -90,3 +90,7 @@ Projects Structure:
 - **Blocks**. Blocks are groups of components joined together to form a relatively complex, distinct section of an interface.
 - **Layouts**. Layouts consist mostly of groups of Blocks and Components stitched together to form pages.
 - **Pages**. Each page is associated with a route based on its file name.
+
+### Images in Next.js
+Notice that using 'next/image' is not possible because Next.js does not support importing images to HTML files (SSG).
+Use the IMG tag instead.    
diff --git a/blocks/community/community-banner/community-banner.tsx b/blocks/community/community-banner/community-banner.tsx
@@ -1,6 +1,5 @@
 import React, {FC} from "react";
 import classNames from 'classnames';
-import Image from 'next/image';
 
 import styles from './community-banner.module.css';
 import communityBanner from '../../../public/images/community-banner.png';
@@ -20,7 +19,7 @@ export const CommunityBanner: FC<CommunityBannerProps> = ({title, children}) =>
                 </div>
             </div>
             <div className={styles.image}>
-                <Image src={communityBanner} alt="Community banner image" />
+                <img src={communityBanner} alt="Community banner image" />
             </div>
         </div>
     );

diff --git a/components/favicon/favicon.tsx b/components/favicon/favicon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+//import KotlinLogo from '@jetbrains/kotlin-web-site-ui/out/svg/logo.svg';
+
+export const Favicon = () => {
+    return (
+        <>
+            <link rel="icon" href="https://kotlinlang.org/assets/images/favicon.svg?v2" type="image/svg+xml" />
+            <link rel="alternate icon" href="https://kotlinlang.org/assets/images/favicon.ico?v2" type="image/x-icon"/>
+            <link rel="apple-touch-icon" sizes="57x57" href="https://kotlinlang.org/assets/images/apple-touch-icon.png?v2"/>
+            <link rel="apple-touch-icon" sizes="72x72" href="https://kotlinlang.org/assets/images/apple-touch-icon-72x72.png?v2"/>
+            <link rel="apple-touch-icon" sizes="114x114" href="https://kotlinlang.org/assets/images/apple-touch-icon-114x114.png?v2"/>
+            <link rel="apple-touch-icon" sizes="144x144" href="https://kotlinlang.org/assets/images/apple-touch-icon-144x144.png?v2"/>
+        </>
+    );
+}
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,14 @@
+declare module '*.svg' {
+    const content: any
+    export default content
+}
+
+declare module '*.png' {
+    const content: any
+    export default content
+}
+
+declare module '*.jpeg' {
+    const content: any
+    export default content
+}
diff --git a/kotlin-website.py b/kotlin-website.py
@@ -248,9 +248,14 @@ def kotlin_docs_pdf():
     return send_file(path.join(root_folder, "assets", "kotlin-reference.pdf"))
 
 
+@app.route('/_next/<path:path>')
+def static_file(path):
+    return send_from_directory('out/_next/', path)
+
+
 @app.route('/community/')
 def community_page():
-    return render_template('pages/community.html')
+    return send_file('out/community.html')
 
 @app.route('/user-groups/user-group-list.html')
 def user_group_list():

diff --git a/layouts/community-layout.tsx b/layouts/community-layout.tsx
@@ -9,6 +9,7 @@ import CtaBlock from '@jetbrains/kotlin-web-site-ui/out/components/cta-block';
 import Button from "@rescui/button";
 import {Theme, ThemeProvider } from "@rescui/ui-contexts";
 import { useRouter } from "next/router";
+import {Favicon} from "../components/favicon/favicon";
 
 const items = [
     {
@@ -43,6 +44,8 @@ export const CommunityLayout: FC<CommunityLayoutProps> = ({title, children}) =>
         <>
             <Head>
                 <title>{title}</title>
+                <Favicon />
+                <meta name="viewport" content="viewport-fit=cover" />
             </Head>
 
             <GlobalHeader

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <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.
diff --git a/next.config.js b/next.config.js
@@ -1,16 +1,33 @@
 const packageJSON = require('./package.json');
 
+const withPlugins = require('next-compose-plugins');
 const { withGlobalCss } = require('next-global-css');
+const optimizedImages = require('next-optimized-images');
+const nextTranspileModules = require('next-transpile-modules');
 const withConfigCss = withGlobalCss();
 
 let transpiledPackages = [
   '@jetbrains/kotlin-web-site-ui',
   ...(Object.keys(packageJSON.dependencies).filter(it => it.includes('@rescui/')))
 ];
 
-const withTranspile = require('next-transpile-modules')(transpiledPackages);
+const withTranspile = nextTranspileModules(transpiledPackages);
 
-module.exports = withTranspile(withConfigCss({
+const nextConfig = {
   pageExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  inlineImageLimit: 0
-}));
+  fileExtensions: ["jpg", "jpeg", "png", "gif"],
+  inlineImageLimit: 0,
+  images: {
+    disableStaticImages: true,
+  }
+};
+
+module.exports = withPlugins([
+  [withConfigCss],
+  [withTranspile],
+  [optimizedImages, {
+    handleImages: ['jpeg', 'png'],
+    imagesFolder: 'images',
+    optimizeImagesInDev: true
+  }]
+], nextConfig);
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "@babel/core": "7.15.8",
     "@babel/register": "7.15.3",
     "@jetbrains/babel-preset-jetbrains": "^2.3.1",
-    "@jetbrains/kotlin-web-site-ui": "4.0.0-alpha.2",
+    "@jetbrains/kotlin-web-site-ui": "4.0.0-alpha.3",
     "@react-hook/resize-observer": "1.2.5",
     "@rescui/button": "0.4.0",
     "@rescui/checkbox": "0.1.0",
@@ -58,11 +58,13 @@
     "query-string": "3.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-swipeable-views": "0.14.0",
     "resolve-url-loader": "4.0.0",
     "rimraf": "2.5.2",
     "rollup": "2.47.0",
     "sass-loader": "12.1.0",
     "scrolltofixed": "1.0.6",
+    "sha.js": "^2.4.11",
     "smoothscroll-polyfill": "0.3.4",
     "svgo": "2.7.0",
     "svgo-loader": "3.0.0",
@@ -77,9 +79,14 @@
   "devDependencies": {
     "@types/react": "17.0.43",
     "glob": "7.1.1",
+    "imagemin-mozjpeg": "9.0.0",
+    "imagemin-optipng": "8.0.0",
+    "imagemin-svgo": "9.0.0",
     "minimist": "1.2.6",
     "next": "12.1.4",
+    "next-compose-plugins": "2.2.1",
     "next-global-css": "1.3.1",
+    "next-optimized-images": "2.6.2",
     "next-transpile-modules": "9.0.0",
     "typescript": "4.6.3",
     "webpack-dev-server": "4.3.1"

diff --git a/pages/global.css b/pages/global.css
@@ -2,4 +2,8 @@
     --rs-color-primary-light-theme: var(--ktl-color-primary-light-theme);
     --rs-color-primary-t-dim-light-theme: rgba(127, 82, 255, 0.8);
     --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+img {
+    max-width: 100%;
 }
diff --git a/static/js/ktl-component/courses/index.jsx b/static/js/ktl-component/courses/index.jsx
@@ -2,8 +2,8 @@ import React, {useState} from 'react';
 import {TabList, Tab} from '@rescui/tab-list';
 import {CoursesList} from './components/courses-list.jsx';
 
-import '@jetbrains/kotlin-web-site-ui/dist/typography.css';
-import '@jetbrains/kotlin-web-site-ui/dist/grid.css';
+import '@jetbrains/kotlin-web-site-ui/out/components/typography';
+import '@jetbrains/kotlin-web-site-ui/out/components/grid';
 import './index.scss';
 import {TeachCtaBlock} from '../teach/components/teach-cta-block';
 import {TeachTopMenu} from '../teach/components/teach-top-menu';

diff --git a/static/js/ktl-component/footer/index.jsx b/static/js/ktl-component/footer/index.jsx
@@ -1,6 +1,5 @@
 import React from "react";
-import GlobalFooter from '@jetbrains/kotlin-web-site-ui/dist/footer.js';
-import '@jetbrains/kotlin-web-site-ui/dist/footer.css';
+import GlobalFooter from '@jetbrains/kotlin-web-site-ui/out/components/footer';
 import { ThemeProvider } from '@rescui/ui-contexts';
 
 const Footer = (props) => {

diff --git a/static/js/ktl-component/header/index.jsx b/static/js/ktl-component/header/index.jsx
@@ -1,6 +1,5 @@
 import React from "react";
-import GlobalHeader from '@jetbrains/kotlin-web-site-ui/dist/header.js';
-import '@jetbrains/kotlin-web-site-ui/dist/header.css';
+import GlobalHeader from '@jetbrains/kotlin-web-site-ui/out/components/header';
 
 const Header = (props) => {
   return (

diff --git a/static/js/ktl-component/teach/components/subscription-form/create-marketo-submitter.js b/static/js/ktl-component/teach/components/subscription-form/create-marketo-submitter.js
@@ -1,4 +1,4 @@
-import {privacy, submitToMarketo} from '@jetbrains/kotlin-web-site-ui/dist/dataServices.js';
+import {privacy, submitToMarketo} from '@jetbrains/kotlin-web-site-ui/out/packages/data-services';
 
 const createMarketoSubmitter =
   ({onSubmitted, consentIds, formId, valuesTransformer = arg => arg}) =>

diff --git a/static/js/ktl-component/teach/components/subscription-form/index.js b/static/js/ktl-component/teach/components/subscription-form/index.js
@@ -1,8 +1,7 @@
 import React, {useState} from 'react';
-import {privacy} from '@jetbrains/kotlin-web-site-ui/dist/dataServices.js';
-import '@jetbrains/kotlin-web-site-ui/dist/typography.css';
-import '@jetbrains/kotlin-web-site-ui/dist/formikWrappers.css';
-import {FormikInput, FormikSubmitButton, FormikPrivacyCheckbox} from '@jetbrains/kotlin-web-site-ui/dist/formikWrappers.js';
+import {privacy} from '@jetbrains/kotlin-web-site-ui/out/packages/data-services';
+import '@jetbrains/kotlin-web-site-ui/out/components/typography';
+import {FormikInput, FormikSubmitButton, FormikPrivacyCheckbox} from '@jetbrains/kotlin-web-site-ui/out/blocks/formik-wrapper';
 
 import {Formik, Form} from 'formik';
 import {validateForm} from './forms-validation';

diff --git a/static/js/ktl-component/teach/components/teach-cta-block/teach-cta-block.jsx b/static/js/ktl-component/teach/components/teach-cta-block/teach-cta-block.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {CtaBlock} from '@jetbrains/kotlin-web-site-ui/dist/ctaBlock';
-import '@jetbrains/kotlin-web-site-ui/dist/ctaBlock.css';
+import CtaBlock from '@jetbrains/kotlin-web-site-ui/out/components/cta-block';
 import Button from '@rescui/button';
 import './teach-cta-block.scss';
 

diff --git a/static/js/ktl-component/teach/components/teach-quotes/teach-quotes.jsx b/static/js/ktl-component/teach/components/teach-quotes/teach-quotes.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {QuotesSlider} from '@jetbrains/kotlin-web-site-ui/dist/quotesSlider';
-import '@jetbrains/kotlin-web-site-ui/dist/quotesSlider.css';
+import QuotesSlider from '@jetbrains/kotlin-web-site-ui/out/components/quotes-slider';
 
 const quotes = [
   {

diff --git a/static/js/ktl-component/teach/components/teach-top-menu/teach-top-menu.jsx b/static/js/ktl-component/teach/components/teach-top-menu/teach-top-menu.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import TopMenu from '@jetbrains/kotlin-web-site-ui/dist/topMenu';
-import '@jetbrains/kotlin-web-site-ui/dist/topMenu.css';
+import TopMenu from '@jetbrains/kotlin-web-site-ui/out/components/top-menu';
 import Button from '@rescui/button';
 import {SlackIcon} from '@rescui/icons';
 import './teach-top-menu.scss';

diff --git a/static/js/ktl-component/teach/index.jsx b/static/js/ktl-component/teach/index.jsx
@@ -1,17 +1,14 @@
 import React from "react";
 
-import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/dist/youtubePlayer';
+import '@jetbrains/kotlin-web-site-ui/out/components/typography';
+import '@jetbrains/kotlin-web-site-ui/out/components/grid';
+import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
 
 import {TeachCtaBlock} from "./components/teach-cta-block";
 import {TeachTopMenu} from "./components/teach-top-menu";
 import {TeachNumbers} from "./components/teach-numbers";
 import {TeachQuotes} from "./components/teach-quotes";
 
-import '@jetbrains/kotlin-web-site-ui/dist/topMenu.css';
-import '@jetbrains/kotlin-web-site-ui/dist/typography.css';
-import '@jetbrains/kotlin-web-site-ui/dist/grid.css';
-import '@jetbrains/kotlin-web-site-ui/dist/youtubePlayer.css';
-
 import '@rescui/typography';
 
 import './style.scss';

diff --git a/static/js/ktl-component/why-teach/index.jsx b/static/js/ktl-component/why-teach/index.jsx
@@ -3,8 +3,7 @@ import React from 'react';
 import {TeachTopMenu} from "../teach/components/teach-top-menu";
 import {TeachCtaBlock} from "../teach/components/teach-cta-block";
 
-import {QuotesSlider} from '@jetbrains/kotlin-web-site-ui/dist/quotesSlider';
-import '@jetbrains/kotlin-web-site-ui/dist/quotesSlider.css';
+import QuotesSlider from '@jetbrains/kotlin-web-site-ui/out/components/quotes-slider';
 
 import './style.scss'
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -96,7 +96,7 @@ module.exports = (params = {}) => {
           loader: 'mustache-loader'
         },
         {
-          test: /\.svg/,
+          test: /\.svg(?:\?\w+)?$/,
           use: [
             {
               loader: 'url-loader',