From c6b1712ba1a051659a28ad677ddaf7f0bbe112fe Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Fri, 3 May 2024 01:24:14 +1000 Subject: [PATCH] porting old jekyll homepage to nextjs --- apps/homepage2/.eslintrc.js | 6 + apps/homepage2/.gitignore | 38 ++ apps/homepage2/CHANGELOG.md | 8 + apps/homepage2/README.md | 6 + apps/homepage2/next.config.js | 20 + apps/homepage2/package.json | 60 +++ apps/homepage2/pages/_app.js | 6 + apps/homepage2/pages/_document.js | 139 +++++++ apps/homepage2/pages/getting-started.js | 203 +++++++++ apps/homepage2/pages/index.js | 71 ++++ apps/homepage2/pages/projects.js | 203 +++++++++ apps/homepage2/pages/schema.js | 169 ++++++++ apps/homepage2/pages/styles.css | 521 ++++++++++++++++++++++++ apps/homepage2/playwright.config.js | 76 ++++ apps/homepage2/tests/render.spec.js | 9 + 15 files changed, 1535 insertions(+) create mode 100644 apps/homepage2/.eslintrc.js create mode 100644 apps/homepage2/.gitignore create mode 100644 apps/homepage2/CHANGELOG.md create mode 100644 apps/homepage2/README.md create mode 100644 apps/homepage2/next.config.js create mode 100644 apps/homepage2/package.json create mode 100644 apps/homepage2/pages/_app.js create mode 100644 apps/homepage2/pages/_document.js create mode 100644 apps/homepage2/pages/getting-started.js create mode 100644 apps/homepage2/pages/index.js create mode 100644 apps/homepage2/pages/projects.js create mode 100644 apps/homepage2/pages/schema.js create mode 100644 apps/homepage2/pages/styles.css create mode 100644 apps/homepage2/playwright.config.js create mode 100644 apps/homepage2/tests/render.spec.js diff --git a/apps/homepage2/.eslintrc.js b/apps/homepage2/.eslintrc.js new file mode 100644 index 00000000..196f66be --- /dev/null +++ b/apps/homepage2/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: ['custom', 'next'], + rules: { + '@next/next/no-html-link-for-pages': 'off', + }, +}; diff --git a/apps/homepage2/.gitignore b/apps/homepage2/.gitignore new file mode 100644 index 00000000..30dbebad --- /dev/null +++ b/apps/homepage2/.gitignore @@ -0,0 +1,38 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/apps/homepage2/CHANGELOG.md b/apps/homepage2/CHANGELOG.md new file mode 100644 index 00000000..ce50b420 --- /dev/null +++ b/apps/homepage2/CHANGELOG.md @@ -0,0 +1,8 @@ +# registry + +## 1.0.1 + +### Patch Changes + +- Updated dependencies [b20e0e3] + - @jsonresume/theme-stackoverflow@2.1.1 diff --git a/apps/homepage2/README.md b/apps/homepage2/README.md new file mode 100644 index 00000000..c220c315 --- /dev/null +++ b/apps/homepage2/README.md @@ -0,0 +1,6 @@ +This is the homepage rewritten from jekyll into nextjs + +- finish it +- make an integrations page +- fix all the weird white space around links and stuff +- fix the head to make it like jekyll \ No newline at end of file diff --git a/apps/homepage2/next.config.js b/apps/homepage2/next.config.js new file mode 100644 index 00000000..c8cfc5cd --- /dev/null +++ b/apps/homepage2/next.config.js @@ -0,0 +1,20 @@ +module.exports = { + reactStrictMode: true, + transpilePackages: ['ui'], + async rewrites() { + return []; + }, + compiler: { + styledComponents: true, + }, + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'in.getclicky.com', + port: '', + pathname: '/*', + }, + ], + }, +}; diff --git a/apps/homepage2/package.json b/apps/homepage2/package.json new file mode 100644 index 00000000..c60aebfa --- /dev/null +++ b/apps/homepage2/package.json @@ -0,0 +1,60 @@ +{ + "name": "homepage2", + "version": "1.0.1", + "private": true, + "scripts": { + "dev": "next dev --port 3002", + "build": "prisma generate && next build", + "start": "next start", + "lint": "next lint --max-warnings=0", + "postinstall": "prisma generate --data-proxy", + "db:generate": "prisma generate", + "test:e2e": "playwright test" + }, + "dependencies": { + "@faker-js/faker": "^8.0.2", + "@jsonresume/theme-papirus": "workspace:*", + "@jsonresume/theme-stackoverflow": "workspace:*", + "@pinecone-database/pinecone": "^0.1.6", + "@prisma/client": "^4.15.0", + "@supabase/supabase-js": "^2.39.6", + "async": "^3.2.4", + "axios": "^1.3.6", + "chatgpt": "^5.2.4", + "dotenv-cli": "^7.2.1", + "eventsource-parser": "^1.0.0", + "express": "^4.18.2", + "faker": "^6.6.6", + "gravatar": "^1.8.2", + "handlebars": "^4.7.8", + "json-to-pretty-yaml": "^1.2.2", + "jsonschema": "^1.4.1", + "lodash": "^4.17.21", + "next": "^13.4.4", + "node-html-markdown": "^1.3.0", + "object-hash": "^3.0.0", + "openai": "^3.2.1", + "pg": "^8.11.0", + "pinecone-client": "^1.1.0", + "prisma": "^4.15.0", + "qr-image": "^3.2.0", + "react": "^18.2.0", + "react-autocomplete": "^1.8.1", + "react-dom": "^18.2.0", + "react-markdown": "^8.0.7", + "resume-schema": "^1.0.0", + "styled-components": "^6", + "ui": "workspace:*", + "uuid": "^9.0.0" + }, + "devDependencies": { + "@playwright/test": "^1.40.0", + "@types/node": "^20.10.0", + "caniuse-lite": "^1.0.30001566", + "eslint": "^8.55.0", + "eslint-config-custom": "workspace:*", + "eslint-config-next": "^14.0.3", + "playwright": "^1.40.0", + "typescript": "^5.3.2" + } +} diff --git a/apps/homepage2/pages/_app.js b/apps/homepage2/pages/_app.js new file mode 100644 index 00000000..0c0b5ead --- /dev/null +++ b/apps/homepage2/pages/_app.js @@ -0,0 +1,6 @@ +import './styles.css'; + +// This default export is required in a new `pages/_app.js` file. +export default function MyApp({ Component, pageProps }) { + return ; +} diff --git a/apps/homepage2/pages/_document.js b/apps/homepage2/pages/_document.js new file mode 100644 index 00000000..3ff92282 --- /dev/null +++ b/apps/homepage2/pages/_document.js @@ -0,0 +1,139 @@ +// pages/_document.tsx file +import Document, { Html, Head, Main, NextScript } from 'next/document'; +import { ServerStyleSheet } from 'styled-components'; +export default class MyDocument extends Document { + render() { + return ( + + + + + + + + + + + + + + + asdasd + + + + + + + + + + + +
+
+ +
+ +
+ + +
+
+
+ + + + + ); + } + static async getInitialProps(ctx) { + const sheet = new ServerStyleSheet(); + const originalRenderPage = ctx.renderPage; + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => + sheet.collectStyles(), //gets the styles from all the components inside + }); + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ), + }; + } finally { + sheet.seal(); + } + } +} diff --git a/apps/homepage2/pages/getting-started.js b/apps/homepage2/pages/getting-started.js new file mode 100644 index 00000000..ce93cefc --- /dev/null +++ b/apps/homepage2/pages/getting-started.js @@ -0,0 +1,203 @@ +export default function GettingStarted() { + return ( + <> + +
+
+
+
+

Command Line Tool

+

+ We've built a CLI (Command Line Interface) which is supported by + OSX, Linux and Windows. To create your own resume, install + resume-cli from npm: +

+

+ npm install -g resume-cli +

+

+ Note: The official CLI tool isn't that actively + maintained. There is an alternative that you might have more + success with + + @rbardini/resumed + +

+

Exporting

+

+ The command line tool uses an ecosystem of modules that we've + open sourced to convert your resume to different formats: +

+

+ resume export resume.pdf +

+

+ resume export resume.html +

+

Import from LinkedIn

+

+ One of our community members wrote a great Chrome extension to + import your LinkedIn Profile. +
+
+ + Download here + +

+
+
+
+
+

Hosting

+

+ JSON Resume offers a hosting service that renders your + resume.json to any theme you would like.
+
+ e.g. + + https://registry.jsonresume.org/thomasdavis + +

+

+ All you have to do is create a Gist on GitHub named + resume.json.
+
+ e.g. + + https://gist.github.com/thomasdavis/c9dcfa1b37dec07fb2ee7f36d7278105 + +

+

+ Our hosting service will automatically detect this when you + access + + https://registry.jsonresume.org/your_github_username + +

+

+ To set a theme, just add to your resume.json;
+ + { "meta": { "theme": + "elegant" } } + +

+
+

+ Use your own repository (instead of a gist) +
+
+ Basically, you can just make a Github Action, that publishes + your gist when you push to your own repo. Example below; +
+
+ EXAMPLE - + + https://github.com/thomasdavis/resume + +

+
+

+ Raw Formats +
+
+ You can access more raw formats of your resume too! +
+
+ JSON - + + https://registry.jsonresume.org/thomasdavis.json + +
+ YAML - + + https://registry.jsonresume.org/thomasdavis.yaml + +
+ TEXT - + + https://registry.jsonresume.org/thomasdavis.txt + +

+
+

+ AI (completely experimental) +
+
+ These urls are integrated with OpenAI ChatGPT, and will pass + your resume to them with a predefined prompt to get a new + response generated each time. (they take over 10 seconds to run + so be paitience) +
+
+ Interview Yourself or Be Interviewed (using + OpenAI GPT-3 your resume.json gets inserted in the prompt and + you can talk to or at yourself) - + + https://registry.jsonresume.org/thomasdavis/interview + +
+
+ Recommended Jobs (tries to match your resume to + recent Who is Hiring? hn posts) - + + https://registry.jsonresume.org/thomasdavis/jobs + +
+
+ Cover Letter (attempts to write a cover letter + that matches your resume) - + + https://registry.jsonresume.org/thomasdavis/letter + +
+
+ Resume Suggestions (it asks ChatGPT to give + precise feedback for improvements you could make to your resume) + - + + https://registry.jsonresume.org/thomasdavis/suggestions + +

+
+

+ QR Service +
+
+ If you want to generate a QR code that links to your hosted + resume, use + + https://registry.jsonresume.org/thomasdavis.qr + + e.g.
+ +

+
+ +
+
+
+
+ + ); +} diff --git a/apps/homepage2/pages/index.js b/apps/homepage2/pages/index.js new file mode 100644 index 00000000..730dba75 --- /dev/null +++ b/apps/homepage2/pages/index.js @@ -0,0 +1,71 @@ +export default function Homepage() { + return ( +
+ +
+
+
+
+

What is this?

+

JSON Resume is a standard created to empower developers.

+ + Get started + +
+
+

Themes

+

Browse our gallery of resume themes made by the community.

+ + View themes + +
+
+

Open Source

+

Every part of JSON Resume is open source on GitHub.

+ + View on GitHub + +
+
+
+
+ +
+ ); +} diff --git a/apps/homepage2/pages/projects.js b/apps/homepage2/pages/projects.js new file mode 100644 index 00000000..ce93cefc --- /dev/null +++ b/apps/homepage2/pages/projects.js @@ -0,0 +1,203 @@ +export default function GettingStarted() { + return ( + <> + +
+
+
+
+

Command Line Tool

+

+ We've built a CLI (Command Line Interface) which is supported by + OSX, Linux and Windows. To create your own resume, install + resume-cli from npm: +

+

+ npm install -g resume-cli +

+

+ Note: The official CLI tool isn't that actively + maintained. There is an alternative that you might have more + success with + + @rbardini/resumed + +

+

Exporting

+

+ The command line tool uses an ecosystem of modules that we've + open sourced to convert your resume to different formats: +

+

+ resume export resume.pdf +

+

+ resume export resume.html +

+

Import from LinkedIn

+

+ One of our community members wrote a great Chrome extension to + import your LinkedIn Profile. +
+
+ + Download here + +

+
+
+
+
+

Hosting

+

+ JSON Resume offers a hosting service that renders your + resume.json to any theme you would like.
+
+ e.g. + + https://registry.jsonresume.org/thomasdavis + +

+

+ All you have to do is create a Gist on GitHub named + resume.json.
+
+ e.g. + + https://gist.github.com/thomasdavis/c9dcfa1b37dec07fb2ee7f36d7278105 + +

+

+ Our hosting service will automatically detect this when you + access + + https://registry.jsonresume.org/your_github_username + +

+

+ To set a theme, just add to your resume.json;
+ + { "meta": { "theme": + "elegant" } } + +

+
+

+ Use your own repository (instead of a gist) +
+
+ Basically, you can just make a Github Action, that publishes + your gist when you push to your own repo. Example below; +
+
+ EXAMPLE - + + https://github.com/thomasdavis/resume + +

+
+

+ Raw Formats +
+
+ You can access more raw formats of your resume too! +
+
+ JSON - + + https://registry.jsonresume.org/thomasdavis.json + +
+ YAML - + + https://registry.jsonresume.org/thomasdavis.yaml + +
+ TEXT - + + https://registry.jsonresume.org/thomasdavis.txt + +

+
+

+ AI (completely experimental) +
+
+ These urls are integrated with OpenAI ChatGPT, and will pass + your resume to them with a predefined prompt to get a new + response generated each time. (they take over 10 seconds to run + so be paitience) +
+
+ Interview Yourself or Be Interviewed (using + OpenAI GPT-3 your resume.json gets inserted in the prompt and + you can talk to or at yourself) - + + https://registry.jsonresume.org/thomasdavis/interview + +
+
+ Recommended Jobs (tries to match your resume to + recent Who is Hiring? hn posts) - + + https://registry.jsonresume.org/thomasdavis/jobs + +
+
+ Cover Letter (attempts to write a cover letter + that matches your resume) - + + https://registry.jsonresume.org/thomasdavis/letter + +
+
+ Resume Suggestions (it asks ChatGPT to give + precise feedback for improvements you could make to your resume) + - + + https://registry.jsonresume.org/thomasdavis/suggestions + +

+
+

+ QR Service +
+
+ If you want to generate a QR code that links to your hosted + resume, use + + https://registry.jsonresume.org/thomasdavis.qr + + e.g.
+ +

+
+ +
+
+
+
+ + ); +} diff --git a/apps/homepage2/pages/schema.js b/apps/homepage2/pages/schema.js new file mode 100644 index 00000000..d2464486 --- /dev/null +++ b/apps/homepage2/pages/schema.js @@ -0,0 +1,169 @@ +export default function Schema() { + return ( + <> + + +
+
+
+

What is it?

+

+ JSON Resume is a community driven open source initiative to create + JSON-based standard for resumes. +

+

Why JSON?

+

+ We believe that the strengths of the JSON format makes it a good + fit for resumes. It's lightweight, easy to use and it's perfect to + build tools for! +

+

+ We also feel that the{' '} + JSON Schema +  is mature enough for writing usable semantics. +

+

Open Source

+

+ The schema is{' '} + + open source + {' '} + and community-driven. We release everything we do under the MIT + license. +

+
+
+
+
version 1.0.0
+ resume.json +
+ 
"John Doe",
+    "label": "Programmer",
+    "image": "",
+    "email": "john@gmail.com",
+    "phone": "(912) 555-4321",
+    "url": "https://johndoe.com",
+    "summary": "A summary of John Doe…",
+    "location": {
+      "address": "2712 Broadway St",
+      "postalCode": "CA 94115",
+      "city": "San Francisco",
+      "countryCode": "US",
+      "region": "California"
+    },
+    "profiles": [{
+      "network": "Twitter",
+      "username": "john",
+      "url": "https://twitter.com/john"
+    }]
+  },
+  "work": [{
+    "name": "Company",
+    "position": "President",
+    "url": "https://company.com",
+    "startDate": "2013-01-01",
+    "endDate": "2014-01-01",
+    "summary": "Description…",
+    "highlights": [
+      "Started the company"
+    ]
+  }],
+  "volunteer": [{
+    "organization": "Organization",
+    "position": "Volunteer",
+    "url": "https://organization.com/",
+    "startDate": "2012-01-01",
+    "endDate": "2013-01-01",
+    "summary": "Description…",
+    "highlights": [
+      "Awarded 'Volunteer of the Month'"
+    ]
+  }],
+  "education": [{
+    "institution": "University",
+    "url": "https://institution.com/",
+    "area": "Software Development",
+    "studyType": "Bachelor",
+    "startDate": "2011-01-01",
+    "endDate": "2013-01-01",
+    "score": "4.0",
+    "courses": [
+      "DB1101 - Basic SQL"
+    ]
+  }],
+  "awards": [{
+    "title": "Award",
+    "date": "2014-11-01",
+    "awarder": "Company",
+    "summary": "There is no spoon."
+  }],
+  "certificates": [{
+    "name": "Certificate",
+    "date": "2021-11-07",
+    "issuer": "Company",
+    "url": "https://certificate.com"
+  }],
+  "publications": [{
+    "name": "Publication",
+    "publisher": "Company",
+    "releaseDate": "2014-10-01",
+    "url": "https://publication.com",
+    "summary": "Description…"
+  }],
+  "skills": [{
+    "name": "Web Development",
+    "level": "Master",
+    "keywords": [
+      "HTML",
+      "CSS",
+      "JavaScript"
+    ]
+  }],
+  "languages": [{
+    "language": "English",
+    "fluency": "Native speaker"
+  }],
+  "interests": [{
+    "name": "Wildlife",
+    "keywords": [
+      "Ferrets",
+      "Unicorns"
+    ]
+  }],
+  "references": [{
+    "name": "Jane Doe",
+    "reference": "Reference…"
+  }],
+  "projects": [{
+    "name": "Project",
+    "startDate": "2019-01-01",
+    "endDate": "2021-01-01",
+    "description": "Description...",
+    "highlights": [
+      "Won award at AIHacks 2016"
+    ],
+    "url": "https://project.com/"
+  }]
+}
+`,
+              }}
+            >
+
+
+
+ + ); +} diff --git a/apps/homepage2/pages/styles.css b/apps/homepage2/pages/styles.css new file mode 100644 index 00000000..f58e143f --- /dev/null +++ b/apps/homepage2/pages/styles.css @@ -0,0 +1,521 @@ +@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,800); + +html, +body { + height: 100%; +} +body { + color: #222; + background: #fff; + font: 14px 'Open Sans'; + margin: 0; + overflow-x: hidden; +} +a:hover { + text-decoration: none; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +h1 { + font: 300 40px 'Open Sans'; + margin: 0; +} +h1, +h2, +h3 { + margin-top: 0; +} +p { + margin: 1em 0; +} +p, +li { + line-height: 1.6; +} +pre { + background: none; + border: 0; + border-radius: 0; + margin: 0; + padding: 0; +} +.container { + max-width: 970px; + padding: 0 30px; +} +.btn { + background: #fff; + border: 2px solid #ddd; + border-radius: 3px; + color: #aaa; + display: inline-block; + font-size: 11px; + letter-spacing: 1px; + padding: 8px 16px; + text-transform: uppercase; + -webkit-transition: background 0.1s, color 0.1s; + transition: background 0.1s, color 0.1s; + word-spacing: 3px; +} +.btn:hover { + border-color: #aaa; + color: #666; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +.btn-red { + background: #df4848; + border: 2px solid #df4848; + color: #fff; +} +.btn-red:hover { + background: #ce2424; + border: 2px solid #ce2424; + color: #fff; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +.btn-big { + font-size: 12px; + font-weight: 600; + padding: 12px 24px; +} +.button { + background-color: #ececec; + background-image: -webkit-linear-gradient(#f4f4f4, #ececec); + background-image: linear-gradient(#f4f4f4, #ececec); + border-radius: 3px; + border: none; + border: 1px solid #ddd; + border-bottom-color: #ccc; + color: #333; + cursor: pointer; + display: inline-block; + line-height: 18px; + outline: 0; + padding: 8px 20px; + text-align: center; +} +.button:hover { + border-color: #ccc; + color: inherit; + text-decoration: none; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +.post-list { + margin: 0; + padding: 0; + list-style: none; +} +.stats h4 { + line-height: 62px; + font-size: 24px; + padding: 0; + margin: 0; +} +.float-right { + float: right; +} +.atss { + top: 15% !important; +} +.atss .at-share-close-control { + display: none !important; +} +#wrap { + height: 100%; + overflow: hidden; +} +#viewport { + min-height: 100%; + width: 100%; + -webkit-transition: all 0.4s; + transition: all 0.4s; + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +#sidebar { + background: #f2f2f2; + bottom: 0; + left: -225px; + position: absolute; + padding-top: 19px; + top: 0; + width: 225px; +} +#sidebar a { + display: block; + color: #000; + font: 600 15px 'Open Sans'; + padding: 15px 30px; +} +#sidebar a + a { + border-top: 1px solid #e3e3e3; +} +#nav { + background: #fff18f; + font: 600 15px 'Open Sans'; + overflow: hidden; +} +#nav button { + margin-left: 10px; +} +#nav a { + display: inline-block; + color: #000; + padding: 25px 15px; +} +#nav a:hover { + color: #ce2424; + text-decoration: none; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +#nav .lt { + display: none; + position: absolute; + left: 10px; + margin-top: -2px; + outline: none; + z-index: 2; +} +#nav .col-sm-3 { + padding-left: 0; +} +#nav .col-sm-9 { + text-align: right; + padding-right: 0; +} +#nav #sidebar-toggle { + display: none; + position: absolute; + outline: 0; + margin-left: -20px; + text-decoration: none; + top: 1px; +} +#nav #logo { + color: #000; + font: 700 16px Ubuntu; + margin-right: 20px; + padding: 10px 0; +} +#header { + background: #f9f9f9; + padding: 50px 0 50px; +} +#header.yellow { + background: #fff18f; +} +#header.promo { + padding: 80px 0 120px; + text-align: center; +} +#header.promo p { + font-size: 15px; + max-width: 520px; + margin: 25px auto; +} +#header .btn { + margin-top: 10px; +} +#start { + background: #f9f9f9; + padding: 60px 0; +} +#start .feature { + text-align: center; +} +#start .feature h2 { + font-weight: 300; +} +#start .feature img { + margin-bottom: 20px; + opacity: 0.3; +} +#start .feature .btn { + margin-top: 10px; +} +#twitter { + padding: 40px 0; +} +#search:before { + color: #ccc; + content: '\f002'; + cursor: text; + font: 24px FontAwesome; + position: absolute; + top: 74px; + right: 34px; +} +#search input { + border: 1px solid #ddd; + border-radius: 2px; + font-size: 20px; + margin-top: 20px; + padding: 16px 20px; + outline: 0; + width: 100%; +} +#docs section { + margin-top: 60px; +} +#docs h2 { + margin-bottom: 30px; + line-height: 1.2; +} +#docs .desc { + color: #aaa; + display: block; + font-size: 12px; + margin-top: 8px; +} +#docs .item { + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 2px; + color: #666; + display: block; + min-height: 20px; + margin-bottom: 30px; + padding: 20px; +} +#docs .item:hover { + color: #000; + text-decoration: none; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +#getting-started { + margin-top: 20px; +} +#getting-started h2 { + margin-top: 40px; +} +#getting-started section + section { + margin-top: 60px; +} +#stats { + margin-top: 20px; +} +#stats h4 { + line-height: 28px; + font-size: 20px; + font-weight: 400; + margin: 0; + padding: 10px 0; +} +#stats .counter { + background: rgba(0, 0, 0, 0.04); + font-size: 24px; + font-weight: 400; + padding: 10px; + text-align: center; +} +#schema { + margin-top: 40px; + font-size: 13px; +} +#schema hr { + border-top: 1px solid #000; + position: absolute; + margin: 0; + margin-top: 8px; +} +#schema pre { + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + padding: 0 10px; + overflow: hidden; +} +#schema pre span { + color: #bbb; +} +#schema .header { + background: #f9f9f9; + border: 1px solid #ddd; + border-bottom: 0; + border-radius: 2px; + color: #666; + padding: 14px 18px; + line-height: 19px; + text-transform: uppercase; + font-size: 12px; +} +#schema .version { + color: #ccc; +} +#schema .schema { + padding-top: 10px; + border-bottom: 1px solid #ddd; + border-radius: 0 0 2px 2px; + padding-bottom: 10px; +} +#schema .integration p { + margin-top: 0; + margin-bottom: 0.5em; +} +#schema .row div[class^='col-sm-'] { + margin-bottom: 30px; +} +#themes { + margin-top: 40px; +} +#themes .theme { + /*background: #f9f9f9;*/ + border: 1px solid #ddd; + border-radius: 2px; + color: #000; + margin-bottom: 30px; + padding: 20px; +} +#themes .theme img { + max-width: 100%; + margin: 0 auto !important; + display: block; +} +#themes .theme img:hover { + border-color: #ccc; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +#themes .theme .name { + margin-top: 10px; +} +#themes .theme .btn { + display: block; + margin-top: 20px; + text-align: center; +} +#themes #themes .meta { + margin-top: 10px; + line-height: 1.4; +} +#themes .meta .name { + font-size: 18px; + font-weight: 700; +} +#themes .meta .rating { + margin-top: 5px; + font-size: 12px; + letter-spacing: 1px; +} +#blog h2 { + margin-top: 10px; +} +#blog article { + margin-top: 40px; +} +#blog header { + margin-bottom: 1.5em; +} +#blog .date { + color: #999; + margin-top: 5px; +} +#team { + margin-top: 40px; +} +#team .contributing { + margin-bottom: 40px; +} +#team .tile { + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 2px; + color: #666; + display: block; + font-size: 13px; + min-height: 20px; + overflow: hidden; + margin-bottom: 30px; + padding: 20px; +} +#team .avatar { + border-radius: 2px; + float: left; + margin-right: 16px; +} +#team .person { + overflow: hidden; + margin-bottom: 16px; +} +#team .person .name { + margin: 5px 0 3px; +} +#team .person a { + color: #999; + font-size: 13px; +} +#team .person a + a { + margin-left: 6px; +} +#team .person a:hover, +#team .person a:hover:before { + color: #d14; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +#team .person .github:before { + color: #ccc; + font: 14px FontAwesome; + content: '\f09b'; + margin-right: 6px; +} +#team .person .twitter:before { + color: #ddd; + font: 14px FontAwesome; + content: '\f099'; + margin-right: 6px; +} +#footer { + color: #bbb; + font-size: 11px; + line-height: 1em; + margin-top: 40px; + margin-bottom: 60px; + text-align: center; + text-transform: uppercase; +} +#footer a { + color: inherit; + text-decoration: none; +} +#footer a:hover { + color: #000; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} + +@media (max-width: 991px) { + #nav a { + padding: 25px 10px; + } +} +@media (max-width: 767px) { + #nav .lt { + display: block; + } + #viewport.open { + -webkit-transform: translate3d(225px, 0, 0); + transform: translate3d(225px, 0, 0); + } + #nav { + text-align: center; + } + #nav .col-sm-3 { + padding-left: 15px; + } + #header.promo { + padding-top: 20px; + padding-bottom: 60px; + } + #start .feature { + margin: 0 auto; + max-width: 314px; + } + #start .feature + .feature { + margin-top: 50px; + } +} diff --git a/apps/homepage2/playwright.config.js b/apps/homepage2/playwright.config.js new file mode 100644 index 00000000..8047602c --- /dev/null +++ b/apps/homepage2/playwright.config.js @@ -0,0 +1,76 @@ +// @ts-check +const { defineConfig, devices } = require('@playwright/test'); + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * @see https://playwright.dev/docs/test-configuration + */ +module.exports = defineConfig({ + webServer: { + command: 'npm run dev', + url: 'http://localhost:3002', + reuseExistingServer: !process.env['CI'], + }, + testDir: './tests', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env['CI'], + /* Retry on CI only */ + retries: process.env['CI'] ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env['CI'] ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + // baseURL: 'http://127.0.0.1:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], +}); diff --git a/apps/homepage2/tests/render.spec.js b/apps/homepage2/tests/render.spec.js new file mode 100644 index 00000000..50dcd139 --- /dev/null +++ b/apps/homepage2/tests/render.spec.js @@ -0,0 +1,9 @@ +// @ts-check +const { test, expect } = require('@playwright/test'); + +test.skip('has title', async ({ page }) => { + await page.goto('http://localhost:3002/thomasdavis'); + + // Expect a title "to contain" a substring. + await expect(page).toHaveTitle(/Thomas Davis/); +});