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