commit
b6b197a3db
37 changed files with 5259 additions and 0 deletions
@ -0,0 +1,12 @@
|
||||
{ |
||||
"presets": [ |
||||
[ |
||||
"next/babel", |
||||
{ |
||||
"styled-jsx": { |
||||
"plugins": ["styled-jsx-plugin-postcss"] |
||||
} |
||||
} |
||||
] |
||||
] |
||||
} |
||||
@ -0,0 +1,86 @@
|
||||
{ |
||||
// Configuration for JavaScript files |
||||
"extends": [ |
||||
"airbnb-base", |
||||
"next/core-web-vitals", |
||||
"plugin:prettier/recommended" |
||||
], |
||||
"rules": { |
||||
"prettier/prettier": [ |
||||
"error", |
||||
{ |
||||
"singleQuote": true |
||||
} |
||||
] |
||||
}, |
||||
"overrides": [ |
||||
// Configuration for TypeScript files |
||||
{ |
||||
"files": [ |
||||
"**/*.ts", |
||||
"**/*.tsx" |
||||
], |
||||
"plugins": [ |
||||
"@typescript-eslint", |
||||
"unused-imports" |
||||
], |
||||
"extends": [ |
||||
"airbnb-typescript", |
||||
"next/core-web-vitals", |
||||
"plugin:prettier/recommended" |
||||
], |
||||
"parserOptions": { |
||||
"project": "./tsconfig.json" |
||||
}, |
||||
"rules": { |
||||
"prettier/prettier": [ |
||||
"error", |
||||
{ |
||||
"singleQuote": true |
||||
} |
||||
], |
||||
"react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable |
||||
"jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system |
||||
"react/require-default-props": "off", // Allow non-defined react props as undefined |
||||
"react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form |
||||
"@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode |
||||
"import/order": [ |
||||
"error", |
||||
{ |
||||
"groups": [ |
||||
"builtin", |
||||
"external", |
||||
"internal" |
||||
], |
||||
"pathGroups": [ |
||||
{ |
||||
"pattern": "react", |
||||
"group": "external", |
||||
"position": "before" |
||||
} |
||||
], |
||||
"pathGroupsExcludedImportTypes": [ |
||||
"react" |
||||
], |
||||
"newlines-between": "always", |
||||
"alphabetize": { |
||||
"order": "asc", |
||||
"caseInsensitive": true |
||||
} |
||||
} |
||||
], |
||||
"@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier |
||||
"import/prefer-default-export": "off", // Named export is easier to refactor automatically |
||||
"class-methods-use-this": "off", // _document.tsx use render method without `this` keyword |
||||
"@typescript-eslint/no-unused-vars": "off", |
||||
"unused-imports/no-unused-imports": "error", |
||||
"unused-imports/no-unused-vars": [ |
||||
"error", |
||||
{ |
||||
"argsIgnorePattern": "^_" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1 @@
|
||||
custom: ['https://creativedesignsguru.com/category/nextjs/', 'https://www.buymeacoffee.com/ixartz'] |
||||
@ -0,0 +1,35 @@
|
||||
# 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 |
||||
Thumbs.db |
||||
|
||||
# debug |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# dotenv local files |
||||
.env*.local |
||||
|
||||
# local folder |
||||
local |
||||
|
||||
# vercel |
||||
.vercel |
||||
@ -0,0 +1,5 @@
|
||||
#!/bin/sh |
||||
. "$(dirname "$0")/_/husky.sh" |
||||
|
||||
# Disable concurent to run build-types after ESLint in lint-staged |
||||
npx lint-staged --concurrent false |
||||
@ -0,0 +1,11 @@
|
||||
{ |
||||
"recommendations": [ |
||||
"dbaeumer.vscode-eslint", |
||||
"esbenp.prettier-vscode", |
||||
"mikestead.dotenv", |
||||
"csstools.postcss", |
||||
"blanu.vscode-styled-jsx", |
||||
"msjsdiag.debugger-for-chrome", |
||||
"bradlc.vscode-tailwindcss" |
||||
] |
||||
} |
||||
@ -0,0 +1,31 @@
|
||||
{ |
||||
// Use IntelliSense to learn about possible attributes. |
||||
// Hover to view descriptions of existing attributes. |
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 |
||||
"version": "0.2.0", |
||||
"configurations": [ |
||||
{ |
||||
"type": "chrome", |
||||
"request": "launch", |
||||
"name": "Next: Chrome", |
||||
"url": "http://localhost:3000", |
||||
"webRoot": "${workspaceFolder}" |
||||
}, |
||||
{ |
||||
"type": "node", |
||||
"request": "launch", |
||||
"name": "Next: Node", |
||||
"program": "${workspaceFolder}/node_modules/.bin/next", |
||||
"args": ["dev"], |
||||
"autoAttachChildProcesses": true, |
||||
"skipFiles": ["<node_internals>/**"], |
||||
"console": "integratedTerminal" |
||||
} |
||||
], |
||||
"compounds": [ |
||||
{ |
||||
"name": "Next: Full", |
||||
"configurations": ["Next: Node", "Next: Chrome"] |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
{ |
||||
"editor.tabSize": 2, |
||||
"editor.detectIndentation": false, |
||||
"jest.autoRun": { |
||||
"watch": false, |
||||
"onSave": "test-file" |
||||
}, |
||||
"search.exclude": { |
||||
"package-lock.json": true |
||||
}, |
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint", |
||||
"editor.formatOnSave": false, |
||||
"editor.codeActionsOnSave": [ |
||||
"source.addMissingImports", |
||||
"source.fixAll.eslint" |
||||
], |
||||
// Multiple language settings for json and jsonc files |
||||
"[json][jsonc]": { |
||||
"editor.formatOnSave": true, |
||||
"editor.defaultFormatter": "esbenp.prettier-vscode" |
||||
}, |
||||
"[typescriptreact]": { |
||||
"editor.defaultFormatter": "esbenp.prettier-vscode" |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
{ |
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558 |
||||
// for the documentation about the tasks.json format |
||||
"version": "2.0.0", |
||||
"tasks": [ |
||||
{ |
||||
"label": "Project wide type checking with TypeScript", |
||||
"type": "npm", |
||||
"script": "build-types", |
||||
"problemMatcher": ["$tsc"], |
||||
"group": { |
||||
"kind": "build", |
||||
"isDefault": true |
||||
}, |
||||
"presentation": { |
||||
"clear": true, |
||||
"reveal": "never" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2020 Remi W. |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,5 @@
|
||||
module.exports = { |
||||
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'eslint'], |
||||
'**/*.ts?(x)': () => 'npm run build-types', |
||||
'*.json': ['prettier --write'], |
||||
}; |
||||
@ -0,0 +1,3 @@
|
||||
[build] |
||||
publish = "out" |
||||
command = "npm run build-prod" |
||||
@ -0,0 +1,5 @@
|
||||
/// <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.
|
||||
@ -0,0 +1,14 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */ |
||||
const withBundleAnalyzer = require('@next/bundle-analyzer')({ |
||||
enabled: process.env.ANALYZE === 'true', |
||||
}); |
||||
|
||||
module.exports = withBundleAnalyzer({ |
||||
poweredByHeader: false, |
||||
trailingSlash: true, |
||||
basePath: '', |
||||
// The starter code load resources from `public` folder with `router.basePath` in React components.
|
||||
// So, the source code is "basePath-ready".
|
||||
// You can remove `basePath` if you don't need it.
|
||||
reactStrictMode: true, |
||||
}); |
||||
@ -0,0 +1,53 @@
|
||||
{ |
||||
"name": "next-js-boilerplate", |
||||
"version": "1.0.0", |
||||
"scripts": { |
||||
"dev": "next dev", |
||||
"build": "next build", |
||||
"start": "next start", |
||||
"build-stats": "cross-env ANALYZE=true npm run build", |
||||
"export": "next export", |
||||
"build-prod": "run-s clean build export", |
||||
"clean": "rimraf .next out", |
||||
"lint": "next lint", |
||||
"build-types": "tsc --noEmit --pretty", |
||||
"prepare": "husky install" |
||||
}, |
||||
"dependencies": { |
||||
"next": "^12.0.9", |
||||
"next-seo": "^4.29.0", |
||||
"react": "^17.0.2", |
||||
"react-dom": "^17.0.2", |
||||
"styled-jsx-plugin-postcss": "^4.0.1" |
||||
}, |
||||
"devDependencies": { |
||||
"@next/bundle-analyzer": "^12.0.9", |
||||
"@types/node": "^17.0.13", |
||||
"@types/react": "^17.0.38", |
||||
"@typescript-eslint/eslint-plugin": "^5.10.1", |
||||
"@typescript-eslint/parser": "^5.10.1", |
||||
"autoprefixer": "^10.4.2", |
||||
"cross-env": "^7.0.3", |
||||
"cssnano": "^5.0.16", |
||||
"eslint": "^8.7.0", |
||||
"eslint-config-airbnb-base": "^15.0.0", |
||||
"eslint-config-airbnb-typescript": "^16.1.0", |
||||
"eslint-config-next": "^12.0.9", |
||||
"eslint-config-prettier": "^8.3.0", |
||||
"eslint-plugin-import": "^2.25.4", |
||||
"eslint-plugin-jsx-a11y": "^6.5.1", |
||||
"eslint-plugin-prettier": "^4.0.0", |
||||
"eslint-plugin-react": "^7.28.0", |
||||
"eslint-plugin-react-hooks": "^4.3.0", |
||||
"eslint-plugin-unused-imports": "^2.0.0", |
||||
"husky": "^7.0.4", |
||||
"lint-staged": "^12.3.2", |
||||
"npm-run-all": "^4.1.5", |
||||
"postcss": "^8.4.5", |
||||
"prettier": "^2.5.1", |
||||
"rimraf": "^3.0.2", |
||||
"tailwindcss": "^3.0.17", |
||||
"typescript": "^4.5.5" |
||||
}, |
||||
"license": "ISC" |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
// Please do not use the array form (like ['tailwindcss', 'postcss-preset-env'])
|
||||
// it will create an unexpected error: Invalid PostCSS Plugin found: [0]
|
||||
|
||||
module.exports = { |
||||
plugins: { |
||||
tailwindcss: {}, |
||||
autoprefixer: {}, |
||||
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}), |
||||
}, |
||||
}; |
||||
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 254 KiB |
|
After Width: | Height: | Size: 445 B |
|
After Width: | Height: | Size: 1001 B |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,95 @@
|
||||
export default function BottomNav() { |
||||
return ( |
||||
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 inline-flex justify-between bg-blue-600 w-11/12 rounded-3xl z-20 "> |
||||
<a |
||||
aria-current="page" |
||||
className="inline-flex flex-col items-center text-xs font-medium py-3 px-4 text-white flex-grow transition-all hover:bg-blue-200 hover:rounded-3xl hover:text-blue-600" |
||||
href="#" |
||||
> |
||||
<svg |
||||
className="w-7 h-7" |
||||
fill="currentColor" |
||||
viewBox="0 0 20 20" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path> |
||||
</svg> |
||||
<span className="sr-only">Home</span> |
||||
</a> |
||||
|
||||
<a |
||||
className="inline-flex flex-col items-center text-xs font-medium text-blue-400 py-3 px-4 flex-grow transition-all hover:bg-blue-200 hover:rounded-3xl hover:text-blue-600" |
||||
href="#" |
||||
> |
||||
<svg |
||||
className="w-8 h-8" |
||||
fill="currentColor" |
||||
viewBox="0 0 20 20" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
fillRule="evenodd" |
||||
d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" |
||||
clipRule="evenodd" |
||||
></path> |
||||
</svg> |
||||
<span className="sr-only">Chat</span> |
||||
</a> |
||||
|
||||
<button className="relative inline-flex flex-col items-center text-xs font-medium text-white py-3 px-6 flex-grow"> |
||||
<div className="absolute bottom-4 p-3 rounded-full border-2 border-blue-600 bg-blue-600 hover:border-blue-400 hover:bg-blue-400 hover:bottom-6 transition-all ease-in-out delay-50"> |
||||
<svg |
||||
className="w-7 h-7" |
||||
fill="currentColor" |
||||
viewBox="0 0 20 20" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
fillRule="evenodd" |
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" |
||||
clipRule="evenodd" |
||||
></path> |
||||
</svg> |
||||
</div> |
||||
<span className="sr-only">Upload</span> |
||||
</button> |
||||
|
||||
<a |
||||
className="inline-flex flex-col items-center text-xs font-medium text-blue-400 py-3 px-4 flex-grow transition-all hover:bg-blue-200 hover:rounded-3xl hover:text-blue-600" |
||||
href="#" |
||||
> |
||||
<svg |
||||
className="w-7 h-7" |
||||
fill="currentColor" |
||||
viewBox="0 0 20 20" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
fillRule="evenodd" |
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" |
||||
clipRule="evenodd" |
||||
></path> |
||||
</svg> |
||||
<span className="sr-only">Search</span> |
||||
</a> |
||||
<a |
||||
className="inline-flex flex-col items-center text-xs font-medium text-blue-400 py-3 px-4 flex-grow transition-all hover:bg-blue-200 hover:rounded-3xl hover:text-blue-600" |
||||
href="#" |
||||
> |
||||
<svg |
||||
className="w-7 h-7" |
||||
fill="currentColor" |
||||
viewBox="0 0 20 20" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
fillRule="evenodd" |
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" |
||||
clipRule="evenodd" |
||||
></path> |
||||
</svg> |
||||
<span className="sr-only">Profile</span> |
||||
</a> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
export default function SidebarNav() { |
||||
return ( |
||||
<div className="fixed bg-purple-400/80 mx-auto min-h-screen transition-all duration-150 ease-in z-10 w-32 -left-32 md:left-0"> |
||||
<ul> |
||||
<li> |
||||
<span role="img" aria-label="fire"> |
||||
🔥 |
||||
</span>{' '} |
||||
<a href="https://nextjs.org" rel="nofollow"> |
||||
Next.js |
||||
</a>{' '} |
||||
for Static Site Generator |
||||
</li> |
||||
<li> |
||||
<span role="img" aria-label="art"> |
||||
🎨 |
||||
</span>{' '} |
||||
Integrate with{' '} |
||||
<a href="https://tailwindcss.com" rel="nofollow"> |
||||
Tailwind CSS |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,66 @@
|
||||
import { NextSeo } from 'next-seo'; |
||||
import Head from 'next/head'; |
||||
import { useRouter } from 'next/router'; |
||||
|
||||
import { AppConfig } from '@/utils/AppConfig'; |
||||
|
||||
type IMetaProps = { |
||||
title: string; |
||||
description: string; |
||||
canonical?: string; |
||||
}; |
||||
|
||||
const Meta = (props: IMetaProps) => { |
||||
const router = useRouter(); |
||||
|
||||
return ( |
||||
<> |
||||
<Head> |
||||
<meta charSet="UTF-8" key="charset" /> |
||||
<meta |
||||
name="viewport" |
||||
content="width=device-width,initial-scale=1" |
||||
key="viewport" |
||||
/> |
||||
<link |
||||
rel="apple-touch-icon" |
||||
href={`${router.basePath}/apple-touch-icon.png`} |
||||
key="apple" |
||||
/> |
||||
<link |
||||
rel="icon" |
||||
type="image/png" |
||||
sizes="32x32" |
||||
href={`${router.basePath}/favicon-32x32.png`} |
||||
key="icon32" |
||||
/> |
||||
<link |
||||
rel="icon" |
||||
type="image/png" |
||||
sizes="16x16" |
||||
href={`${router.basePath}/favicon-16x16.png`} |
||||
key="icon16" |
||||
/> |
||||
<link |
||||
rel="icon" |
||||
href={`${router.basePath}/favicon.ico`} |
||||
key="favicon" |
||||
/> |
||||
</Head> |
||||
<NextSeo |
||||
title={props.title} |
||||
description={props.description} |
||||
canonical={props.canonical} |
||||
openGraph={{ |
||||
title: props.title, |
||||
description: props.description, |
||||
url: props.canonical, |
||||
locale: AppConfig.locale, |
||||
site_name: AppConfig.site_name, |
||||
}} |
||||
/> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export { Meta }; |
||||
@ -0,0 +1,9 @@
|
||||
import { AppProps } from 'next/app'; |
||||
|
||||
import '../styles/global.css'; |
||||
|
||||
const MyApp = ({ Component, pageProps }: AppProps) => ( |
||||
<Component {...pageProps} /> |
||||
); |
||||
|
||||
export default MyApp; |
||||
@ -0,0 +1,20 @@
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document'; |
||||
|
||||
import { AppConfig } from '@/utils/AppConfig'; |
||||
|
||||
// Need to create a custom _document because i18n support is not compatible with `next export`.
|
||||
class MyDocument extends Document { |
||||
render() { |
||||
return ( |
||||
<Html lang={AppConfig.locale}> |
||||
<Head /> |
||||
<body> |
||||
<Main /> |
||||
<NextScript /> |
||||
</body> |
||||
</Html> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default MyDocument; |
||||
@ -0,0 +1,79 @@
|
||||
import { Meta } from '@/layout/Meta'; |
||||
import { Main } from '@/templates/Main'; |
||||
|
||||
const About = () => ( |
||||
<Main meta={<Meta title="Lorem ipsum" description="Lorem ipsum" />}> |
||||
<div className="flex flex-col flex-grow"> |
||||
<blockquote className="text-2xl font-semibold italic text-center text-slate-900"> |
||||
{' '} |
||||
When you look |
||||
<span className="relative"> |
||||
<span |
||||
className="block absolute -inset-1 -skew-y-3 bg-amber-500 " |
||||
aria-hidden="true" |
||||
></span> |
||||
<span className="relative text-white after:content-['__↗']"> |
||||
annoyed |
||||
</span> |
||||
</span> |
||||
all the time, people think that you're busy. |
||||
</blockquote> |
||||
|
||||
<div className="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-slate-200"> |
||||
<img |
||||
className="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" |
||||
src="https://tailwindcss.com/img/erin-lindford.jpg" |
||||
alt="Woman's Face" |
||||
/> |
||||
<div className="text-center space-y-2 sm:text-left"> |
||||
<div className="space-y-0.5"> |
||||
<p className="text-lg text-black font-semibold">Erin Lindford</p> |
||||
<p className="text-slate-500 font-medium">Product Engineer</p> |
||||
</div> |
||||
<button className="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"> |
||||
Message |
||||
</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<figure className="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> |
||||
<img |
||||
className="w-24 h-24 rounded-xl md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" |
||||
src={`https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg`} |
||||
alt="" |
||||
width="384" |
||||
height="512" |
||||
/> |
||||
<div className="pt-6 md:p-8 text-center md:text-left space-y-4"> |
||||
<blockquote> |
||||
<p className="text-lg font-medium"> |
||||
“Tailwind CSS is the only framework that I've seen scale on |
||||
large teams. It's easy to customize, adapts to any design, |
||||
and the build size is tiny.” |
||||
</p> |
||||
</blockquote> |
||||
<figcaption className="font-medium"> |
||||
<div className="text-sky-500 dark:text-sky-400">Sarah Dayan</div> |
||||
<div className="text-slate-700 dark:text-slate-500"> |
||||
Staff Engineer, Algolia |
||||
</div> |
||||
</figcaption> |
||||
</div> |
||||
</figure> |
||||
<p> |
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga |
||||
recusandae quidem. Quaerat molestiae blanditiis doloremque possimus |
||||
labore voluptatibus distinctio recusandae autem esse explicabo molestias |
||||
officia placeat, accusamus aut saepe. |
||||
</p> |
||||
<p> |
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga |
||||
recusandae quidem. Quaerat molestiae blanditiis doloremque possimus |
||||
labore voluptatibus distinctio recusandae autem esse explicabo molestias |
||||
officia placeat, accusamus aut saepe. |
||||
</p> |
||||
</div> |
||||
</Main> |
||||
); |
||||
|
||||
export default About; |
||||
@ -0,0 +1,26 @@
|
||||
import { Meta } from '@/layout/Meta'; |
||||
import { Main } from '@/templates/Main'; |
||||
|
||||
export default function Blank() { |
||||
return ( |
||||
<Main meta={<Meta title="Lorem ipsum" description="Lorem ipsum" />}> |
||||
<div className="flex flex-col flex-grow border-4 border-gray-400 border-dashed bg-white rounded mt-4"> |
||||
BLANK |
||||
</div> |
||||
<blockquote className="text-2xl font-semibold italic text-center text-slate-900"> |
||||
{' '} |
||||
When you look |
||||
<span className="relative"> |
||||
<span |
||||
className="block absolute -inset-1 -skew-y-3 bg-amber-500 " |
||||
aria-hidden="true" |
||||
></span> |
||||
<span className="relative text-white after:content-['__↗']"> |
||||
annoyed |
||||
</span> |
||||
</span> |
||||
all the time, people think that you're busy. |
||||
</blockquote> |
||||
</Main> |
||||
); |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
@tailwind base; |
||||
|
||||
/* a { |
||||
@apply text-blue-700; |
||||
} */ |
||||
|
||||
/* a:hover { |
||||
@apply border-b-2 border-blue-700; |
||||
} */ |
||||
|
||||
@tailwind components; |
||||
|
||||
@tailwind utilities; |
||||
|
||||
.content p { |
||||
@apply my-6; |
||||
} |
||||
|
||||
.content ul { |
||||
@apply my-6; |
||||
} |
||||
@ -0,0 +1,20 @@
|
||||
import { ReactNode } from 'react'; |
||||
|
||||
import BottomNav from '@/components/BottomNav'; |
||||
|
||||
type IMainProps = { |
||||
meta: ReactNode; |
||||
children: ReactNode; |
||||
}; |
||||
|
||||
const Main = (props: IMainProps) => ( |
||||
<div className="flex flex-row min-h-screen bg-gray-100 text-gray-800"> |
||||
<BottomNav /> |
||||
{/* <SidebarNav /> */} |
||||
<main className="flex flex-col flex-grow transition-all duration-150 ease-in m-5"> |
||||
{props.children} |
||||
</main> |
||||
</div> |
||||
); |
||||
|
||||
export { Main }; |
||||
@ -0,0 +1,6 @@
|
||||
export const AppConfig = { |
||||
site_name: 'Starter', |
||||
title: 'Nextjs Starter', |
||||
description: 'Starter code for your Nextjs Boilerplate with Tailwind CSS', |
||||
locale: 'en', |
||||
}; |
||||
@ -0,0 +1,45 @@
|
||||
module.exports = { |
||||
content: ['./src/**/*.{js,ts,jsx,tsx}'], |
||||
theme: { |
||||
fontSize: { |
||||
xs: '0.75rem', |
||||
sm: '0.875rem', |
||||
base: '1rem', |
||||
lg: '1.125rem', |
||||
xl: '1.25rem', |
||||
'2xl': '1.5rem', |
||||
'3xl': '1.875rem', |
||||
'4xl': '2.25rem', |
||||
'5xl': '3rem', |
||||
'6xl': '4rem', |
||||
}, |
||||
extend: { |
||||
colors: { |
||||
gray: { |
||||
100: '#f7fafc', |
||||
200: '#edf2f7', |
||||
300: '#e2e8f0', |
||||
400: '#cbd5e0', |
||||
500: '#a0aec0', |
||||
600: '#718096', |
||||
700: '#4a5568', |
||||
800: '#2d3748', |
||||
900: '#1a202c', |
||||
}, |
||||
blue: { |
||||
100: '#ebf8ff', |
||||
200: '#bee3f8', |
||||
300: '#90cdf4', |
||||
400: '#63b3ed', |
||||
500: '#4299e1', |
||||
600: '#3182ce', |
||||
700: '#2b6cb0', |
||||
800: '#2c5282', |
||||
900: '#2a4365', |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
variants: {}, |
||||
plugins: [], |
||||
}; |
||||
@ -0,0 +1,46 @@
|
||||
{ |
||||
"compilerOptions": { |
||||
"lib": ["dom", "dom.iterable", "esnext"], |
||||
"module": "esnext", |
||||
"moduleResolution": "node", |
||||
"resolveJsonModule": true, |
||||
"removeComments": true, |
||||
"preserveConstEnums": true, |
||||
"strict": true, |
||||
"alwaysStrict": true, |
||||
"strictNullChecks": true, |
||||
"noUncheckedIndexedAccess": true, |
||||
|
||||
"noImplicitAny": true, |
||||
"noImplicitReturns": true, |
||||
"noImplicitThis": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"allowUnreachableCode": false, |
||||
"noFallthroughCasesInSwitch": true, |
||||
|
||||
"target": "es5", |
||||
"outDir": "out", |
||||
"declaration": true, |
||||
"sourceMap": true, |
||||
|
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true, |
||||
"allowJs": false, |
||||
"skipLibCheck": true, |
||||
"forceConsistentCasingInFileNames": true, |
||||
|
||||
"jsx": "preserve", |
||||
"noEmit": true, |
||||
"isolatedModules": true, |
||||
"incremental": true, |
||||
|
||||
"baseUrl": ".", |
||||
"paths": { |
||||
"@/*": ["./src/*"], |
||||
"@/public/*": ["./public/*"] |
||||
} |
||||
}, |
||||
"exclude": ["./out/**/*", "./node_modules/**/*"], |
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
Loading…
Reference in new issue