Bladeren bron

load lesspass.min.js after body in rendered

pull/700/head
Guillaume Vincent 2 jaren geleden
bovenliggende
commit
d10c5053d9
3 gewijzigde bestanden met toevoegingen van 29 en 10 verwijderingen
  1. +3
    -2
      sandbox/lesspass-website/package.json
  2. +1
    -1
      sandbox/lesspass-website/postcss.config.js
  3. +25
    -7
      sandbox/lesspass-website/src/pages/index.tsx

+ 3
- 2
sandbox/lesspass-website/package.json Bestand weergeven

@@ -30,11 +30,12 @@
"lesspass"
],
"scripts": {
"no-analytics": "gatsby telemetry --disable",
"build:static": "cp -r node_modules/lesspass-pure/dist/* static/",
"build": "gatsby build",
"build": "yarn no-analytics && gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "gatsby telemetry --disable && npm run develop",
"start": "yarn no-analytics && yarn develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"


+ 1
- 1
sandbox/lesspass-website/postcss.config.js Bestand weergeven

@@ -1,3 +1,3 @@
module.exports = () => ({
plugins: [require("tailwindcss")],
})
});

+ 25
- 7
sandbox/lesspass-website/src/pages/index.tsx Bestand weergeven

@@ -1,5 +1,5 @@
import React from "react";
import { PageProps } from "gatsby";
import React, { useEffect } from "react";
import { withPrefix } from "gatsby";
import Helmet from "react-helmet";
import GooglePlayBadge from "../images/google-play-badge.png";
import ApplePlayBadge from "../images/download-on-the-App-Store.png";
@@ -9,14 +9,23 @@ import AMOBadge from "../images/get-amo-badge.png";
import CLIBadge from "../images/cli-badge.png";
import HowItWorks from "../images/HowItWorks.png";

export default function IndexPage(props: PageProps) {
export default function IndexPage() {
const currentYear = new Date().getFullYear();

useEffect(() => {
const script = document.createElement("script");
script.src = withPrefix("lesspass.min.js");
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);

return (
<>
<div className="relative bg-gray-800 overflow-hidden">
<Helmet>
<script src="lesspass.min.js" type="text/javascript" />
<link href="lesspass.min.css" rel="stylesheet" />
</Helmet>
<div className="relative pt-6 pb-16 sm:pb-24">
@@ -40,7 +49,10 @@ export default function IndexPage(props: PageProps) {
</div>
<div className="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
<div className="bg-white sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden">
<div className="lesspass--unbordered lesspass--full-width">
<div
style={{ minHeight: "449px" }}
className="lesspass--unbordered lesspass--full-width"
>
<div id="lesspass"></div>
</div>
</div>
@@ -263,13 +275,19 @@ export default function IndexPage(props: PageProps) {
<footer className="bg-white">
<div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
<div className="mt-8 flex justify-center space-x-6">
<a href="https://twitter.com/guillaume20100" className="text-gray-400 hover:text-gray-500">
<a
href="https://twitter.com/guillaume20100"
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">Twitter</span>
<svg fill="currentColor" viewBox="0 0 24 24" className="h-6 w-6">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="https://github.com/lesspass/lesspass/" className="text-gray-400 hover:text-gray-500">
<a
href="https://github.com/lesspass/lesspass/"
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">Github</span>
<svg fill="currentColor" viewBox="0 0 24 24" className="h-6 w-6">
<path


Laden…
Annuleren
Opslaan