صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
tati
/
kitchn
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

Add some stylings and configs

Tatiana Inama 5 سال پیش
والد
c5a881b8f9
کامیت
75abf8d02c
25فایلهای تغییر یافته به همراه205 افزوده شده و 123 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 2 0
      next-recipes/.gitignore
  2. 1 0
      next-recipes/.prettierrc.json
  3. 18 0
      next-recipes/components/Layout/index.tsx
  4. 0 0
      next-recipes/components/Layout/layout.module.css
  5. 0 0
      next-recipes/components/RecipeItem/RecipeItem.module.css
  6. 23 0
      next-recipes/components/RecipeItem/index.tsx
  7. 1 0
      next-recipes/package.json
  8. 3 4
      next-recipes/pages/_app.tsx
  9. 2 2
      next-recipes/pages/api/hello.js
  10. 10 65
      next-recipes/pages/index.tsx
  11. 26 21
      next-recipes/pages/recipes.tsx
  12. 2 2
      next-recipes/postcss.config.js
  13. BIN
      next-recipes/public/fonts/Lekton-Bold.ttf
  14. BIN
      next-recipes/public/fonts/Lekton-Italic.ttf
  15. BIN
      next-recipes/public/fonts/Lekton-Regular.ttf
  16. BIN
      next-recipes/public/fonts/Raleway-Italic-VariableFont_wght.ttf
  17. BIN
      next-recipes/public/fonts/Raleway-Medium.ttf
  18. BIN
      next-recipes/public/fonts/Raleway-Regular.ttf
  19. BIN
      next-recipes/public/fonts/Raleway-SemiBold.ttf
  20. BIN
      next-recipes/public/fonts/Raleway-VariableFont_wght.ttf
  21. 49 13
      next-recipes/styles/globals.css
  22. 26 3
      next-recipes/tailwind.config.js
  23. 8 13
      next-recipes/tsconfig.json
  24. 29 0
      next-recipes/types/recipes.d.ts
  25. 5 0
      next-recipes/yarn.lock

+ 2 - 0
next-recipes/.gitignore
مشاهده فایل 

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

+ 1 - 0
next-recipes/.prettierrc.json
مشاهده فایل 

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

+ 18 - 0
next-recipes/components/Layout/index.tsx
مشاهده فایل 

@@ -0,0 +1,18 @@
 
+import Head from "next/head";
 
+import React from "react";
 
+
 
+const Layout = ({ title = "Recipes", children }) => {
 
+  return (
 
+    <div>
 
+      <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;

+ 0 - 0
next-recipes/components/Layout/layout.module.css
مشاهده فایل


+ 0 - 0
next-recipes/components/RecipeItem/RecipeItem.module.css
مشاهده فایل


+ 23 - 0
next-recipes/components/RecipeItem/index.tsx
مشاهده فایل 

@@ -0,0 +1,23 @@
 
+import { Recipe } from '@/types/recipes';
 
+import { FunctionComponent, 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;

+ 1 - 0
next-recipes/package.json
مشاهده فایل 

@@ -17,6 +17,7 @@
 
     "@types/react": "^17.0.4",
 
     "autoprefixer": "^10.2.5",
 
     "postcss": "^8.2.13",
 
+    "prettier": "2.2.1",
 
     "tailwindcss": "^2.1.2",
 
     "typescript": "^4.2.4"
 
   }

+ 3 - 4
next-recipes/pages/_app.tsx
مشاهده فایل 

@@ -1,8 +1,7 @@
 
-import '../styles/globals.css'
 
-import 'tailwindcss/tailwind.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
مشاهده فایل 

@@ -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
مشاهده فایل 

@@ -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>
 
+  );
 
 }

+ 26 - 21
next-recipes/pages/recipes.tsx
مشاهده فایل 

@@ -1,30 +1,35 @@
 
-import { GetStaticProps, InferGetStaticPropsType } from 'next';
 
+import Layout from "@/components/Layout";
 
+import { GetStaticProps, InferGetStaticPropsType } from "next";
 
+import { Recipe } from "types/recipes";
 
+import RecipeItem from "components/RecipeItem";
 
 
-type Recipe = {
 
-  title: string,
 
-}
 
-
 
-export const getStaticProps: GetStaticProps = async () => {
 
-  const res = await fetch('http://localhost:3000/recipes/all/');
 
+export const getStaticProps = async () => {
 
+  const res = await fetch("http://localhost:3000/recipes/all/");
 
   const recipeList: Recipe[] = await res.json();
 
   return {
 
     props: {
 
-      recipeList
 
-    }
 
-  }
 
-}
 
+      recipeList,
 
+    },
 
+  };
 
+};
 
 
-const Recipes = ({ recipeList = [] }: InferGetStaticPropsType<typeof getStaticProps>) => {
 
-  return(
 
-    <div>
 
+const Recipes = ({
 
+  recipeList = [],
 
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
 
+  return (
 
+    <Layout>
 
+      <p>
 
+        No aliquip repudiare vis, consul deterruisset ne est, nec aliquid
 
+        mediocrem argumentum at. Nec malis saepe in. Legere nostrum eu eos, nam
 
+        ea facer diceret repudiare. Ad dicta omnes has. Ut tale brute vis, usu
 
+        ei solet dolores. Fuisset periculis in has.
 
+      </p>
 
       <h1>Recipes</h1>
 
       {recipeList.map((recipe, index) => (
 
-        <div key={index}>
 
-          <h3>{recipe.name}</h3>
 
-        </div>
 
+        <RecipeItem recipe={recipe} key={index} />
 
       ))}
 
-    </div>
 
-  )
 
-}
 
+    </Layout>
 
+  );
 
+};
 
 
-export default Recipes;
 
+export default Recipes;

+ 2 - 2
next-recipes/postcss.config.js
مشاهده فایل 

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

BIN
next-recipes/public/fonts/Lekton-Bold.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Lekton-Italic.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Lekton-Regular.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Raleway-Italic-VariableFont_wght.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Raleway-Medium.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Raleway-Regular.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Raleway-SemiBold.ttf
مشاهده فایل


BIN
next-recipes/public/fonts/Raleway-VariableFont_wght.ttf
مشاهده فایل


+ 49 - 13
next-recipes/styles/globals.css
مشاهده فایل 

@@ -1,20 +1,56 @@
 
-@tailwind base;
 
-@tailwind components;
 
-@tailwind utilities;
 
+@font-face {
 
+  font-family: "Lekton";
 
+  src: url("/fonts/Lekton-Regular.ttf") format("truetype");
 
+}
 
+@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;
 
+}
 
 
-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 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;
 
 }
 
 
-a {
 
-  color: inherit;
 
-  text-decoration: none;
 
+h5 {
 
+  @apply font-default font-medium;
 
+  font-size: 1.75rem;
 
 }
 
 
-* {
 
-  box-sizing: border-box;
 
+h6 {
 
+  @apply font-default font-semibold uppercase text-xl;
 
+  letter-spacing: 0.75px;
 
 }

+ 26 - 3
next-recipes/tailwind.config.js
مشاهده فایل 

@@ -1,11 +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}'],
 
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 
   darkMode: false, // or 'media' or 'class'
 
   theme: {
 
-    extend: {},
 
+    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
مشاهده فایل 

@@ -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
مشاهده فایل 

@@ -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[];
 
+};

+ 5 - 0
next-recipes/yarn.lock
مشاهده فایل 

@@ -1772,6 +1772,11 @@ postcss@^6.0.9:
 
     source-map "^0.6.1"
 
     supports-color "^5.4.0"
 
 
+prettier@2.2.1:
 
+  version "2.2.1"
 
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
 
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
+
 
 pretty-hrtime@^1.0.3:
 
   version "1.0.3"
 
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"