diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b8cb69c6..bf4690578 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -165,6 +165,9 @@ importers: gatsby: specifier: ^5.12.11 version: 5.12.11(babel-eslint@10.1.0)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) + gatsby-plugin-manifest: + specifier: ^5.12.3 + version: 5.12.3(gatsby@5.12.11)(graphql@16.8.1) react: specifier: ^18.2.0 version: 18.2.0 @@ -9598,6 +9601,22 @@ packages: '@parcel/transformer-js': 2.8.3(@parcel/core@2.8.3) '@parcel/transformer-json': 2.8.3(@parcel/core@2.8.3) + /gatsby-plugin-manifest@5.12.3(gatsby@5.12.11)(graphql@16.8.1): + resolution: {integrity: sha512-qpH0pSIIt7ggO7OnP127eKn6fhD1DKTzg9Aw8vaMCO8MMOQ5qfOn3ZrRCgH6DuaU1admZU18gFKlCKH+QHoGfQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + gatsby: ^5.0.0-next + dependencies: + '@babel/runtime': 7.23.4 + gatsby: 5.12.11(babel-eslint@10.1.0)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) + gatsby-core-utils: 4.12.1 + gatsby-plugin-utils: 4.12.3(gatsby@5.12.11)(graphql@16.8.1) + semver: 7.5.4 + sharp: 0.32.6 + transitivePeerDependencies: + - graphql + dev: false + /gatsby-plugin-page-creator@5.12.3(gatsby@5.12.11)(graphql@16.8.1): resolution: {integrity: sha512-li9jKy70h4vXNxxRrXP2DpgEx05m5E7EDOLCjAWNsm7e9EO1szixXQ0ev6Ie1SBKT6vAHAoIonet6+oFattf9w==} engines: {node: '>=18.0.0'} diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js new file mode 100644 index 000000000..e942f19b3 --- /dev/null +++ b/website/gatsby-browser.js @@ -0,0 +1 @@ +import "./src/styles/global-styles.css" diff --git a/website/gatsby-config.ts b/website/gatsby-config.ts index ecb1bd0a3..fb8e0dddb 100644 --- a/website/gatsby-config.ts +++ b/website/gatsby-config.ts @@ -2,12 +2,26 @@ import type { GatsbyConfig } from "gatsby" const config: GatsbyConfig = { siteMetadata: { - // TODO: Update the needed data when the final domain name will be ready. - siteUrl: "https://www.yourdomain.tld", + siteUrl: "https://acre.fi/", title: "Acre", }, graphqlTypegen: true, - plugins: ["gatsby-plugin-pnpm"], + plugins: [ + "gatsby-plugin-pnpm", + { + resolve: "gatsby-plugin-manifest", + options: { + name: "Acre", + short_name: "Acre", + start_url: "/", + background_color: "#F3E5C1", + theme_color: "#F3E5C1", + display: "standalone", + icon: "src/images/favicon.png", + crossOrigin: "use-credentials", + }, + }, + ], } export default config diff --git a/website/package.json b/website/package.json index 531edab47..250f7b430 100644 --- a/website/package.json +++ b/website/package.json @@ -21,6 +21,7 @@ }, "dependencies": { "gatsby": "^5.12.11", + "gatsby-plugin-manifest": "^5.12.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/website/src/images/favicon.png b/website/src/images/favicon.png new file mode 100644 index 000000000..108f98dc9 Binary files /dev/null and b/website/src/images/favicon.png differ diff --git a/website/src/images/placeholder-mobile.svg b/website/src/images/placeholder-mobile.svg new file mode 100644 index 000000000..b9189ab6c --- /dev/null +++ b/website/src/images/placeholder-mobile.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/images/placeholder.svg b/website/src/images/placeholder.svg new file mode 100644 index 000000000..04bae5360 --- /dev/null +++ b/website/src/images/placeholder.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 0003e8d76..d8fa2abd0 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -3,7 +3,9 @@ import * as React from "react" function IndexPage() { return (
-

Landing page

+
+
+
) } diff --git a/website/src/styles/global-styles.css b/website/src/styles/global-styles.css new file mode 100644 index 000000000..bdd150f7e --- /dev/null +++ b/website/src/styles/global-styles.css @@ -0,0 +1,33 @@ +body { + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + overflow: hidden; +} + +.placeholder { + width: 100vw; + height: 100vh; + padding: 10px; + box-sizing: border-box; + background-color: #F3E5C1; +} + +.placeholder_svg { + width: 100%; + height: 100%; + background: url('../images/placeholder.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +@media (max-width: 854px) { + .placeholder_svg { + background: url('../images/placeholder-mobile.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } +}