Strona główna Odkrywaj Pomoc
Zaloguj się
tati
/
kitchn
1
0
Forkuj 0

4 Commity ae01a0ecaf ... 3262cc6802

Autor SHA1 Wiadomość Data
  Tatiana Inama 3262cc6802 More setup 5 lat temu
  Tatiana Inama 098e953ac6 Add eslint 5 lat temu
  Tatiana Inama 75abf8d02c Add some stylings and configs 5 lat temu
  Tatiana Inama c5a881b8f9 Init next app 5 lat temu
26 zmienionych plików z 1378 dodań i 116 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 45 0
      next-recipes/.eslintrc.js
  2. 2 0
      next-recipes/.gitignore
  3. 1 0
      next-recipes/.prettierrc.json
  4. 18 0
      next-recipes/components/Layout/index.tsx
  5. 3 0
      next-recipes/components/Layout/layout.module.css
  6. 0 0
      next-recipes/components/RecipeItem/RecipeItem.module.css
  7. 23 0
      next-recipes/components/RecipeItem/index.tsx
  8. 7 1
      next-recipes/package.json
  9. 3 3
      next-recipes/pages/_app.tsx
  10. 2 2
      next-recipes/pages/api/hello.js
  11. 10 65
      next-recipes/pages/index.tsx
  12. 31 0
      next-recipes/pages/recipes.tsx
  13. 7 0
      next-recipes/postcss.config.js
  14. BIN
      next-recipes/public/fonts/Lekton-Bold.ttf
  15. BIN
      next-recipes/public/fonts/Lekton-Italic.ttf
  16. BIN
      next-recipes/public/fonts/Lekton-Regular.ttf
  17. BIN
      next-recipes/public/fonts/Raleway-Italic-VariableFont_wght.ttf
  18. BIN
      next-recipes/public/fonts/Raleway-Medium.ttf
  19. BIN
      next-recipes/public/fonts/Raleway-Regular.ttf
  20. BIN
      next-recipes/public/fonts/Raleway-SemiBold.ttf
  21. BIN
      next-recipes/public/fonts/Raleway-VariableFont_wght.ttf
  22. 58 9
      next-recipes/styles/globals.css
  23. 34 0
      next-recipes/tailwind.config.js
  24. 8 13
      next-recipes/tsconfig.json
  25. 29 0
      next-recipes/types/recipes.d.ts
  26. 1097 23
      next-recipes/yarn.lock

+ 45 - 0
next-recipes/.eslintrc.js
Wyświetl plik 

@@ -0,0 +1,45 @@
 
+module.exports = {
 
+    "env": {
 
+        "browser": true,
 
+        "es6": true
 
+    },
 
+    "extends": [
 
+        "eslint:recommended",
 
+        "plugin:react/recommended",
 
+        "plugin:@typescript-eslint/eslint-recommended"
 
+    ],
 
+    "globals": {
 
+        "Atomics": "readonly",
 
+        "SharedArrayBuffer": "readonly"
 
+    },
 
+    "parser": "@typescript-eslint/parser",
 
+    "parserOptions": {
 
+        "ecmaFeatures": {
 
+            "jsx": true
 
+        },
 
+        "ecmaVersion": 2018,
 
+        "sourceType": "module"
 
+    },
 
+    "plugins": [
 
+        "react",
 
+        "@typescript-eslint"
 
+    ],
 
+    "rules": {
 
+        "indent": [
 
+            "error",
 
+            2
 
+        ],
 
+        "linebreak-style": [
 
+            "error",
 
+            "windows"
 
+        ],
 
+        "quotes": [
 
+            "error",
 
+            "single"
 
+        ],
 
+        "semi": [
 
+            "error",
 
+            "always"
 
+        ]
 
+    }
 
+};

+ 2 - 0
next-recipes/.gitignore
Wyświetl plik 

@@ -32,3 +32,5 @@ yarn-error.log*
 
 
 # vercel
 
 .vercel
 
+
 
+.prettierignore

+ 1 - 0
next-recipes/.prettierrc.json
Wyświetl plik 

@@ -0,0 +1 @@
 
+{}

+ 18 - 0
next-recipes/components/Layout/index.tsx
Wyświetl plik 

@@ -0,0 +1,18 @@
 
+import Head from 'next/head';
 
+import styles from './layout.module.css';
 
+
 
+const Layout = ({ title = 'Recipes', children }) => {
 
+  return (
 
+    <div className={styles.layout}>
 
+      <Head>
 
+        <title>{title}</title>
 
+        <meta name='description' content='Recipes app' />
 
+        <link rel='icon' href='/favicon.ico' />
 
+      </Head>
 
+      <main>{children}</main>
 
+      <footer>✨</footer>
 
+    </div>
 
+  );
 
+};
 
+
 
+export default Layout;

+ 3 - 0
next-recipes/components/Layout/layout.module.css
Wyświetl plik 

@@ -0,0 +1,3 @@
 
+.layout {
 
+  @apply p-4;
 
+}

+ 0 - 0
next-recipes/components/RecipeItem/RecipeItem.module.css
Wyświetl plik


+ 23 - 0
next-recipes/components/RecipeItem/index.tsx
Wyświetl plik 

@@ -0,0 +1,23 @@
 
+import { Recipe } from '@/types/recipes';
 
+import { FC } from 'react';
 
+import styles from './RecipeItem.module.css';
 
+
 
+type RecipeItemProps = {
 
+  tagName?: keyof JSX.IntrinsicElements,
 
+  recipe: Recipe
 
+};
 
+
 
+export const RecipeItem: FC<RecipeItemProps> = ({ tagName, recipe }) => {
 
+  const Tag = tagName as keyof JSX.IntrinsicElements;
 
+  return (
 
+    <Tag>
 
+      <h3>{recipe.name}</h3>
 
+    </Tag>
 
+  )
 
+};
 
+
 
+RecipeItem.defaultProps = {
 
+  tagName: 'div',
 
+};
 
+
 
+export default RecipeItem;

+ 7 - 1
next-recipes/package.json
Wyświetl plik 

@@ -3,17 +3,23 @@
 
   "version": "0.1.0",
 
   "private": true,
 
   "scripts": {
 
-    "dev": "next dev",
 
+    "dev": "next dev -p 3005",
 
     "build": "next build",
 
     "start": "next start"
 
   },
 
   "dependencies": {
 
     "next": "10.2.0",
 
+    "postcss-import": "^14.0.1",
 
     "react": "17.0.2",
 
     "react-dom": "17.0.2"
 
   },
 
   "devDependencies": {
 
     "@types/react": "^17.0.4",
 
+    "autoprefixer": "^10.2.5",
 
+    "eslint": "^7.26.0",
 
+    "postcss": "^8.2.13",
 
+    "prettier": "2.2.1",
 
+    "tailwindcss": "^2.1.2",
 
     "typescript": "^4.2.4"
 
   }
 
 }

+ 3 - 3
next-recipes/pages/_app.tsx
Wyświetl plik 

@@ -1,7 +1,7 @@
 
-import '../styles/globals.css'
 
+import "../styles/globals.css";
 
 
 function MyApp({ Component, pageProps }) {
 
-  return <Component {...pageProps} />
 
+  return <Component {...pageProps} />;
 
 }
 
 
-export default MyApp
 
+export default MyApp;

+ 2 - 2
next-recipes/pages/api/hello.js
Wyświetl plik 

@@ -1,5 +1,5 @@
 
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 
 export default (req, res) => {
 
-  res.status(200).json({ name: 'John Doe' })
 
-}
 
+  res.status(200).json({ name: "John Doe" });
 
+};

+ 10 - 65
next-recipes/pages/index.tsx
Wyświetl plik 

@@ -1,69 +1,14 @@
 
-import Head from 'next/head'
 
-import Image from 'next/image'
 
-import styles from '../styles/Home.module.css'
 
+import Layout from "components/Layout";
 
 
 export default function Home() {
 
   return (
 
-    <div className={styles.container}>
 
-      <Head>
 
-        <title>Create Next App</title>
 
-        <meta name="description" content="Generated by create next app" />
 
-        <link rel="icon" href="/favicon.ico" />
 
-      </Head>
 
-
 
-      <main className={styles.main}>
 
-        <h1 className={styles.title}>
 
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
 
-        </h1>
 
-
 
-        <p className={styles.description}>
 
-          Get started by editing{' '}
 
-          <code className={styles.code}>pages/index.js</code>
 
-        </p>
 
-
 
-        <div className={styles.grid}>
 
-          <a href="https://nextjs.org/docs" className={styles.card}>
 
-            <h2>Documentation &rarr;</h2>
 
-            <p>Find in-depth information about Next.js features and API.</p>
 
-          </a>
 
-
 
-          <a href="https://nextjs.org/learn" className={styles.card}>
 
-            <h2>Learn &rarr;</h2>
 
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
 
-          </a>
 
-
 
-          <a
 
-            href="https://github.com/vercel/next.js/tree/master/examples"
 
-            className={styles.card}
 
-          >
 
-            <h2>Examples &rarr;</h2>
 
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
 
-          </a>
 
-
 
-          <a
 
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 
-            className={styles.card}
 
-          >
 
-            <h2>Deploy &rarr;</h2>
 
-            <p>
 
-              Instantly deploy your Next.js site to a public URL with Vercel.
 
-            </p>
 
-          </a>
 
-        </div>
 
-      </main>
 
-
 
-      <footer className={styles.footer}>
 
-        <a
 
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 
-          target="_blank"
 
-          rel="noopener noreferrer"
 
-        >
 
-          Powered by{' '}
 
-          <span className={styles.logo}>
 
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
 
-          </span>
 
-        </a>
 
-      </footer>
 
-    </div>
 
-  )
 
+    <Layout>
 
+      <h1>H1 Headline!!</h1>
 
+      <h2>H2 Headline</h2>
 
+      <h3>H3 Headline</h3>
 
+      <h4>H4 Headline</h4>
 
+      <h5>H5 Headline</h5>
 
+      <h6>H6 Headline</h6>
 
+    </Layout>
 
+  );
 
 }

+ 31 - 0
next-recipes/pages/recipes.tsx
Wyświetl plik 

@@ -0,0 +1,31 @@
 
+import Layout from "@/components/Layout";
 
+import { GetStaticProps, InferGetStaticPropsType } from "next";
 
+import { Recipe } from "types/recipes";
 
+import RecipeItem from "components/RecipeItem";
 
+
 
+export const getStaticProps = async () => {
 
+  const res = await fetch("http://localhost:3000/recipes/all/");
 
+  const recipeList: Recipe[] = await res.json();
 
+  return {
 
+    props: {
 
+      recipeList,
 
+    },
 
+  };
 
+};
 
+
 
+const Recipes = ({
 
+  recipeList = [],
 
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
 
+  return (
 
+    <Layout>
 
+      <div>
 
+      </div>
 
+      <h1>Recipes</h1>
 
+      {recipeList.map((recipe, index) => (
 
+        <RecipeItem recipe={recipe} key={index} />
 
+      ))}
 
+    </Layout>
 
+  );
 
+};
 
+
 
+export default Recipes;

+ 7 - 0
next-recipes/postcss.config.js
Wyświetl plik 

@@ -0,0 +1,7 @@
 
+module.exports = {
 
+  plugins: {
 
+    "postcss-import": {},
 
+    tailwindcss: {},
 
+    autoprefixer: {},
 
+  },
 
+};

BIN
next-recipes/public/fonts/Lekton-Bold.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Lekton-Italic.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Lekton-Regular.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Raleway-Italic-VariableFont_wght.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Raleway-Medium.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Raleway-Regular.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Raleway-SemiBold.ttf
Wyświetl plik


BIN
next-recipes/public/fonts/Raleway-VariableFont_wght.ttf
Wyświetl plik


+ 58 - 9
next-recipes/styles/globals.css
Wyświetl plik 

@@ -1,16 +1,65 @@
 
 html,
 
 body {
 
-  padding: 0;
 
-  margin: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 
+  @apply m-0;
 
 }
 
 
-a {
 
-  color: inherit;
 
-  text-decoration: none;
 
+@font-face {
 
+  font-family: "Lekton";
 
+  src: url("/fonts/Lekton-Regular.ttf") format("truetype");
 
 }
 
 
-* {
 
-  box-sizing: border-box;
 
+@font-face {
 
+  font-family: "Lekton";
 
+  src: url("/fonts/Lekton-Bold.ttf") format("truetype");
 
+  font-weight: 800;
 
 }
 
+
 
+@font-face {
 
+  font-family: "Raleway";
 
+  src: url("/fonts/Raleway-Regular.ttf") format("truetype");
 
+  font-weight: 400;
 
+}
 
+
 
+@font-face {
 
+  font-family: "Raleway";
 
+  src: url("/fonts/Raleway-Medium.ttf") format("truetype");
 
+  font-weight: 500;
 
+}
 
+
 
+@font-face {
 
+  font-family: "Raleway";
 
+  src: url("/fonts/Raleway-SemiBold.ttf") format("truetype");
 
+  font-weight: 600;
 
+}
 
+
 
+body {
 
+  @apply font-default;
 
+}
 
+
 
+h1 {
 
+  @apply font-display text-7xl leading-none;
 
+}
 
+
 
+h2 {
 
+  @apply font-display text-6xl leading-none tracking-tight;
 
+}
 
+
 
+h3 {
 
+  @apply font-display;
 
+  font-size: 3.375rem;
 
+}
 
+
 
+h4 {
 
+  @apply font-display tracking-wide;
 
+  font-size: 2.375rem;
 
+}
 
+
 
+h5 {
 
+  @apply font-default font-medium;
 
+  font-size: 1.75rem;
 
+}
 
+
 
+h6 {
 
+  @apply font-default font-semibold uppercase text-xl;
 
+  letter-spacing: 0.75px;
 
+}

+ 34 - 0
next-recipes/tailwind.config.js
Wyświetl plik 

@@ -0,0 +1,34 @@
 
+const colors = require("tailwindcss/colors");
 
+const defaultTheme = require("tailwindcss/defaultTheme");
 
+
 
+module.exports = {
 
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 
+  darkMode: false, // or 'media' or 'class'
 
+  theme: {
 
+    colors: {
 
+      primary: colors.yellow,
 
+      secondary: colors.purple,
 
+    },
 
+    fontFamily: {
 
+      default: ["Raleway", "sans-serif"],
 
+      display: ["Lekton"],
 
+    },
 
+    letterSpacing: {
 
+      tightest: "-.05em",
 
+      tight: "-.05px",
 
+      comfy: ".15px",
 
+      wide: ".25px",
 
+      wider: "1.25px",
 
+      widest: "1.5px",
 
+    },
 
+    extend: {
 
+      fontSize: {
 
+        "7xl": "5rem",
 
+      },
 
+    },
 
+  },
 
+  variants: {
 
+    extend: {},
 
+  },
 
+  plugins: [],
 
+};

+ 8 - 13
next-recipes/tsconfig.json
Wyświetl plik 

@@ -1,11 +1,12 @@
 
 {
 
   "compilerOptions": {
 
     "target": "es5",
 
-    "lib": [
 
-      "dom",
 
-      "dom.iterable",
 
-      "esnext"
 
-    ],
 
+    "lib": ["dom", "dom.iterable", "esnext"],
 
+    "baseUrl": ".",
 
+    "paths": {
 
+      "@/components/*": ["components/*"],
 
+      "@/types/*": ["types/*"]
 
+    },
 
     "allowJs": true,
 
     "skipLibCheck": true,
 
     "strict": false,
 
@@ -18,12 +19,6 @@
 
     "isolatedModules": true,
 
     "jsx": "preserve"
 
   },
 
-  "include": [
 
-    "next-env.d.ts",
 
-    "**/*.ts",
 
-    "**/*.tsx"
 
-  ],
 
-  "exclude": [
 
-    "node_modules"
 
-  ]
 
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
 
+  "exclude": ["node_modules"]
 
 }

+ 29 - 0
next-recipes/types/recipes.d.ts
Wyświetl plik 

@@ -0,0 +1,29 @@
 
+export type Recipe = {
 
+  id: string;
 
+  name: string;
 
+  summary: string;
 
+  tags: string[];
 
+  course: string[];
 
+  image: string;
 
+  autor: {
 
+    name: string;
 
+    website: string;
 
+  };
 
+  details: {
 
+    url: string;
 
+    video: string;
 
+    preparationTime: string;
 
+    cookingTime: string;
 
+    servings: number;
 
+  };
 
+  ingredients: {
 
+    name: string;
 
+    ingredients: {
 
+      name: string;
 
+      quantity: number;
 
+      unit: string;
 
+      _original: string;
 
+    }[];
 
+  }[];
 
+  instructions: string[];
 
+};

Plik diff jest za duży
+ 1097 - 23
next-recipes/yarn.lock