feat: New home page (#14)

src/build.js

@@ -26,20 +26,23 @@ getFilesRecursively(staticSrcPath)
  const destinationPath = Path.join(staticDestPath, relativePath);
  const destinationDir = Path.dirname(destinationPath);
  const ext = Path.extname(file).toLowerCase();
+ if (/^.*\/\.[^/]+$/.test(file)) return;
  fs.mkdirsSync(destinationDir);
  switch (ext) {
  case '.html':
  case '.js':
  return minify(file)
  .then(content => fs.writeFile(destinationPath, content));
  case '.css':
- return fs.readFile(file, 'utf-8')
- .then(str => minify.css(str, {
+ const content = minify.css(`@import "${Path.relative(process.cwd(), file)}";`, {
  css: {
- inline: "none"
+ rebase: false
+ },
+ img: {
+ maxSize: 1
  }
- }))
- .then(content => fs.writeFile(destinationPath, content));
+ });
+ return fs.writeFile(destinationPath, content);
  default:
  return fs.copyFile(file, destinationPath);
  }
@@ -73,7 +76,7 @@ Translations.loadTranslations()
  }))
  .map(({file, pugFile}) => ({
  file, 
- html: pug.renderFile(Path.join(viewsDirPath, pugFile), { ...props, currentPage: props.page[file] })
+ html: pug.renderFile(Path.join(viewsDirPath, pugFile), { ...props, currentPage: { ...props.page[file], path: file }})
  }))
  .map(async ({file, html}) => {
  const filePath = Path.join(wwwPath, lang, `${file}.html`);
@@ -120,7 +123,7 @@ server {
  charset_types text/css application/javascript;
 
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
- add_header Content-Security-Policy "default-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self';";
+ add_header Content-Security-Policy "default-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; frame-src 'self' *.youtube-nocookie.com;";
  add_header Vary "Accept-Encoding";
  add_header X-Content-Type-Options "nosniff";
  add_header X-Frame-Options "DENY";
@@ -156,6 +159,13 @@ server {
 }
 `;
  fs.writeFile(Path.join(buildPath, `nginx.conf`), conf);
+
+ // generate the sitemap.txt file
+ // fs.writeFile(Path.join(staticDestPath, `sitemap.txt`),
+ // pages.flatMap(getPagesToGenerate)
+ // .map(page => `!BASE_URL!${page.path}`)
+ // .join('\n')
+ // );
 });
 
 /**

src/config.json

@@ -1,3 +1,3 @@
 {
- "languagePriority": ["en", "fr"]
+ "languagePriority": ["en"]
 }

src/i18n/en.json

@@ -5,10 +5,9 @@
  "contact_us": "Contact us", 
  "page": {
  "index": {
- "description": "Speed ​​up the creation of your apps and host them easily",
- "accelerate_creation": "Speed ​​up your app creation by focusing on what you love: development.",
- "easy_deployment": "We make your life easier on infrastructure management and on cross-platform related issues.",
- "illustration_alt": "An illustration of the application creation speed up. The application is usable on mobile, desktop and smatwatch, and it is directly linked to the server management."
+ "name": "Lenra",
+ "title": "Speed ​​up the creation of your apps and host them easily !",
+ "description": "The Lenra platform is made to accelerate the creation of your applications and simplify its hosting while preserving your users' personal data."
  }
  }
 }

src/server.js

@@ -25,10 +25,10 @@ app.get('/(*.html)?', async (req, res) => {
  }
  const languages = await pLanguages;
  const props = utils.mergeDeep({}, common, await pTranslation, {language: lang, languages: languages, otherLanguages: languages.filter(l => l!=lang)});
- res.send(pug.renderFile(file, { ...props, currentPage: props.page[path] }));
+ res.send(pug.renderFile(file, { ...props, currentPage: { ...props.page[path], path }}));
 })
 
-app.use(express.static(staticPath));
+app.use(express.static(staticPath, {dotfiles: 'allow'}));
 
 app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);

src/static/css/.components.css

@@ -0,0 +1,3 @@
+@import 'components/.header.css';
+@import 'components/.footer.css';
+@import 'components/.button.css';

src/static/css/.design.css

@@ -0,0 +1,194 @@
+:root {
+ --body-height: 100vh;
+ --green: #57C0B3;
+ --blue: #70CBF2;
+ --yellow: #F6C28B;
+ --red: #F27A86;
+ --unit: 1px;
+ --base-value: 8;
+ --base: calc(var(--base-value) * var(--unit));
+ --primary-color: #1269ED;
+ --primary-color-hover: #0D4DAE;
+ --disabled-opacity: 0.3;
+ --dark-grey-opacity: 0.7;
+ --grey-opacity: 0.5;
+ --light-grey-opacity: 0.3;
+ --white-primary-color-disabled: #D0E1FB;
+ --black-primary-color-disabled: #1c2f50;
+ --light-primary-color-disabled: #D0E1FB;
+ --dark-primary-color-disabled: #1c2f50;
+ --black: #1E232C;
+ --white: white;
+ --text-color: var(--black);
+ --background-color: var(--white);
+ --primary-color-disabled: var(--light-primary-color-disabled);
+ --invert-primary-color-disabled: var(--dark-primary-color-disabled);
+ --background-color-hover: var(--primary-color-disabled);
+ --background-image: url("../img/fond.svg");
+ --logo-horizontal-image-black: url("../img/logo.svg");
+ --logo-vertical-image-black: url("../img/logo-vertical.svg");
+ --logo-horizontal-image-white: url("../img/logo-white.svg");
+ --logo-vertical-image-white: url("../img/logo-vertical-white.svg");
+ --logo-horizontal-image: var(--logo-horizontal-image-black);
+ --logo-vertical-image: var(--logo-vertical-image-black);
+ --logo-image: var(--logo-horizontal-image);
+ --logo-position: left;
+ --logo-horizontal-ratio: 3.646153846153846;
+ --font-size-value: 16;
+ --font-size: calc(1px * var(--font-size-value));
+ --line-height-value: 20;
+ --line-height: calc(var(--line-height-value) * var(--unit));
+ --line-height-multiplier: calc(var(--line-height-value) / var(--font-size-value));
+ --title-font-size-multiplier: 2.5;
+ --title-font-size: calc(var(--font-size) * var(--title-font-size-multiplier));
+ --title-size: calc(var(--title-font-size) / var(--base));
+ --title-max-width-multiplier: 16;
+ --text-max-width-multiplier: 18;
+ --title-max-width: calc(var(--title-max-width-multiplier) * var(--title-font-size));
+ --text-max-width: calc(var(--text-max-width-multiplier) * var(--title-font-size));
+ --image-space: calc(16 * var(--base));
+ --button-size: 4;
+ --seprataion-size: 2;
+ --nav-seprataion-size: 4;
+ --padding-small-multiplier: 0.5;
+ --padding-small: calc(var(--padding-small-multiplier) * var(--base));
+ --padding-medium-multiplier: 1;
+ --padding-medium: calc(var(--padding-medium-multiplier) * var(--base));
+ --padding-big-multiplier: 1.5;
+ --padding-big: calc(var(--padding-big-multiplier) * var(--base));
+ --button-height: calc(var(--line-height) + var(--padding-medium) * 2);
+ --logo-height: var(--button-height);
+ --top-padding: 6;
+ --bottom-padding: 5;
+ --top-reduction: var(--base) * (var(--top-padding) + var(--button-size));
+ --bottom-reduction: var(--base) * var(--bottom-padding);
+ --height-reduction: var(--top-reduction) + var(--bottom-reduction);
+ --section-padding-top: 4;
+ --section-padding-bottom: 8;
+}
+
+body {
+ height: 100%;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ font-family: 'Source Sans Pro';
+ font-size: var(--font-size);
+ line-height: var(--line-height-multiplier);
+}
+
+h1, h2, h3, h4 {
+ font-size: calc(var(--font-size) * var(--font-size-multiplier));
+ font-weight: bold;
+}
+
+h1 {
+ --font-size-multiplier: 2;
+}
+
+h2 {
+ --font-size-multiplier: calc(5 / 3);
+}
+
+h3 {
+ --font-size-multiplier: calc(4 / 3);
+}
+
+h4 {
+ --font-size-multiplier: 1;
+}
+
+p {
+ padding-bottom: var(--base);
+}
+
+.invert-colors {
+ --text-color: var(--white);
+ --background-color: var(--black);
+ --logo-horizontal-image: var(--logo-horizontal-image-white);
+ --logo-vertical-image: var(--logo-vertical-image-white);
+ --logo-image: var(--logo-horizontal-image);
+ position: relative;
+ color: var(--text-color);
+}
+
+.invert-colors::before {
+ content: " ";
+ position: absolute;
+ background-color: var(--background-color);
+ top: 0;
+ left: 50%;
+ height: 100%;
+ width: 100vw;
+ transform: translateX(-50%);
+ z-index: -1;
+}
+
+body > main,
+body > header,
+body > footer {
+ margin: auto;
+ width: 90%;
+ max-width: 1200px;
+}
+
+body > header,
+body > footer {
+ padding: calc(var(--base) * var(--top-padding)) 0;
+}
+
+body > header > nav > a[href="/"],
+body > footer > nav > h2 > a[href="/"] {
+ position: relative;
+ display: inline-block;
+ width: calc(var(--logo-height) * var(--logo-horizontal-ratio));
+ height: var(--logo-height);
+ text-align: left; 
+ text-indent: -200px;
+ overflow: hidden;
+ transition-property: none;
+}
+
+a[href="/"]::before {
+ content: " ";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-image: var(--logo-image);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: var(--logo-position);
+}
+
+
+/* @media (prefers-color-scheme: dark) {
+ :root {
+ --white: #1E232C;
+ --primary-color-disabled: var(--dark-primary-color-disabled);
+ --invert-primary-color-disabled: var(--light-primary-color-disabled);
+ --black: white;
+ --logo-horizontal-image-black: url("../img/logo-white.svg");
+ --logo-horizontal-image-white: url("../img/logo.svg");
+ --logo-vertical-image-black: url("../img/logo-vertical-white.svg");
+ --logo-vertical-image-white: url("../img/logo-vertical.svg");
+ --logo-image: var(--logo-horizontal-image);
+ }
+} */
+
+@media (max-width: 550px) {
+ :root {
+ --logo-height: calc(var(--base) * 10);
+ --logo-image: var(--logo-vertical-image);
+ }
+
+ .invert-colors {
+ --logo-image: var(--logo-vertical-image);
+ }
+
+ body > header > nav > a[href="/"],
+ body > footer > nav > h2 > a[href="/"] {
+ width: var(--logo-height);
+ height: var(--logo-height);
+ }
+}

src/static/css/.icons.css

@@ -0,0 +1,65 @@
+@font-face {
+ font-family: 'Lenra-icons';
+ src:
+ url('../fonts/Lenra-icons.ttf?dsghqz') format('truetype'),
+ url('../fonts/Lenra-icons.woff?dsghqz') format('woff'),
+ url('../fonts/Lenra-icons.svg?dsghqz#Lenra-icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+[class^="lenra-icon-"]::before, [class*=" lenra-icon-"]::before {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: 'Lenra-icons' !important;
+ speak: never;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.lenra-icon-zap:before {
+ content: "\e900";
+}
+.lenra-icon-upload-cloud:before {
+ content: "\e901";
+}
+.lenra-icon-shield:before {
+ content: "\e902";
+}
+.lenra-icon-medium:before {
+ content: "\e909";
+}
+.lenra-icon-reddit:before {
+ content: "\e90a";
+ color: #ff4500;
+}
+.lenra-icon-facebook:before {
+ content: "\e903";
+ color: #1877f2;
+}
+.lenra-icon-github:before {
+ content: "\e904";
+}
+.lenra-icon-instagram:before {
+ content: "\e905";
+ color: #e4405f;
+}
+.lenra-icon-linkedin:before {
+ content: "\e906";
+ color: #0077b5;
+}
+.lenra-icon-twitter:before {
+ content: "\e907";
+ color: #1da1f2;
+}
+.lenra-icon-youtube:before {
+ content: "\e908";
+ color: #f00;
+}

src/static/css/.reset.css

@@ -0,0 +1,15 @@
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ color: inherit;
+ text-decoration: none;
+ list-style: none;
+ transition-duration: 300ms;
+ transition-property: none;
+}
+
+html {
+ height: 100%;
+ overflow-x: hidden;
+}