init

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.cache/
+public

README copy.md

@@ -0,0 +1,49 @@
+<p align="center">
+  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
+    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
+  </a>
+</p>
+<h1 align="center">
+  Gatsby Minimal Starter
+</h1>
+
+## 🚀 Quick start
+
+1.  **Create a Gatsby site.**
+
+    Use the Gatsby CLI to create a new site, specifying the minimal starter.
+
+    ```shell
+    # create a new Gatsby site using the minimal starter
+    npm init gatsby
+    ```
+
+2.  **Start developing.**
+
+    Navigate into your new site’s directory and start it up.
+
+    ```shell
+    cd my-gatsby-site/
+    npm run develop
+    ```
+
+3.  **Open the code and start customizing!**
+
+    Your site is now running at http://localhost:8000!
+
+    Edit `src/pages/index.js` to see your site update in real-time!
+
+4.  **Learn more**
+
+    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+    - [Tutorials](https://www.gatsbyjs.com/docs/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+    - [Guides](https://www.gatsbyjs.com/docs/how-to/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+## 🚀 Quick start (Netlify)
+
+Deploy this starter with one click on [Netlify](https://app.netlify.com/signup):
+
+[<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-minimal)

gatsby-browser.js

@@ -0,0 +1,3 @@
+// import React from 'react'
+
+import './src/styles/global.css'

gatsby-config.js

@@ -0,0 +1,29 @@
+/**
+ * @type {import('gatsby').GatsbyConfig}
+ */
+module.exports = {
+  siteMetadata: {
+    title: `Akmalov Artur`,
+    siteUrl: `https://dev.akmalov.com`
+  },
+  plugins: ["gatsby-plugin-image", "gatsby-plugin-sitemap", "gatsby-plugin-postcss", {
+    resolve: 'gatsby-plugin-manifest',
+    options: {
+      "icon": "src/images/icon.png"
+    }
+  }, "gatsby-plugin-mdx", "gatsby-transformer-remark", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      "name": "images",
+      "path": "./src/images/"
+    },
+    __key: "images"
+  }, {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      "name": "pages",
+      "path": "./src/pages/"
+    },
+    __key: "pages"
+  }]
+};

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "blog",
+  "version": "1.0.0",
+  "private": true,
+  "description": "blog",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "@mdx-js/react": "^2.3.0",
+    "gatsby": "^5.9.0",
+    "gatsby-plugin-image": "^3.9.0",
+    "gatsby-plugin-manifest": "^5.9.0",
+    "gatsby-plugin-mdx": "^5.9.0",
+    "gatsby-plugin-sharp": "^5.9.0",
+    "gatsby-plugin-sitemap": "^6.9.0",
+    "gatsby-source-filesystem": "^5.9.0",
+    "gatsby-transformer-remark": "^6.9.0",
+    "gatsby-transformer-sharp": "^5.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "gatsby-plugin-postcss": "^6.9.0",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/footer.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const Footer = () => {
+  const year = new Date().getFullYear()
+  // const { biolinkUrl } = useSiteMetadata()
+
+  return (
+    <footer className="mt-4 flex items-center justify-center gap-2 bg-surface py-6 shadow-inner">
+      <div>© {year}</div>
+      {/* <a href={biolinkUrl} className="!no-underline">
+        Stephen Cavender
+      </a> */}
+      <h2 className="text-2xl font-bold">
+        Footer
+      </h2>
+      {/* <Ichthys alt="ichthys" className="w-8" /> */}
+    </footer>
+  )
+}
+
+export default Footer

src/components/header.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import Logo from '../images/icon.png'
+
+//mr-4 text-2xl text-gray-500 hover:no-underline shrink-0 font-normal
+
+export const Header = () => {
+  return (
+    <header className="bg-white border-gray-200 dark:bg-gray-900">
+    <div className="mx-auto max-w-screen-xl">
+        <div className="mx-6 flex justify-between">
+          <Link className="flex gap-1 text-lg" to="/">
+            <img alt="logo" src={Logo} className="w-10 object-contain" />
+            <span className="ml-3 hidden shrink-0 text-gray-800 py-5 text-3xl sm:block">Artur Akmalov</span> 
+          </Link>
+          <nav className="flex gap-6 py-5">
+            <Link
+              className="border-b-[3px] border-transparent text-lg"
+              to="/"
+            >
+              Home
+            </Link>
+            <Link
+              className="border-b-[3px] border-transparent text-lg"
+              to="/blog"
+            >
+              Blog
+            </Link>
+            <Link
+              className="border-b-[3px] border-transparent text-lg"
+              to="/about"
+            >
+              About
+            </Link>
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/index.js

@@ -0,0 +1,3 @@
+export * from './footer'
+export * from './header'
+export * from './layout'

src/components/layout.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Header } from './header'
+import { Footer } from './footer'
+
+export const Layout = ({ children }) => {
+  return (
+    <div className="prose prose-sm min-w-full bg-bg sm:prose">
+      <Header />
+      <main className="mx-auto min-h-screen max-w-2xl px-2 sm:px-4">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  )
+}

src/pages/404.js

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry 😔, we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage
+
+export const Head = () => <title>Not found</title>

src/pages/about.js

@@ -0,0 +1,18 @@
+import * as React from "react"
+import Header from "../components/header"
+
+
+const AboutPage = () => {
+  return (
+    <main>
+      <Header></Header>
+      <h1 className="text-3xl font-bold">
+        About page
+      </h1>
+    </main>
+  )
+}
+
+export const Head = () => <title>About Page</title>
+
+export default AboutPage

src/pages/blog.js

@@ -0,0 +1,18 @@
+import * as React from "react"
+import Header from "../components/header"
+
+
+const BlogPage = () => {
+  return (
+    <main>
+      <Header></Header>
+      <h1 className="text-3xl font-bold">
+        Blog page
+      </h1>
+    </main>
+  )
+}
+
+export const Head = () => <title>Blog Page</title>
+
+export default BlogPage

src/pages/index.js

@@ -0,0 +1,24 @@
+import * as React from "react"
+// import { Link } from 'gatsby'
+import Footer from "../components/footer"
+import Header from "../components/header"
+
+const IndexPage = () => {
+  return (
+    <main>
+      <Header />
+      <div className="mx-auto max-w-screen-xl">
+        <div className="ml-7 mt-6 justify-between">
+          <h1>Welcome to my Gatsby site!</h1>
+          <p>I'm making this by following the Gatsby Tutorial.</p>
+        </div>
+      </div>
+      <Footer />
+    </main>
+  )
+}
+
+
+export const Head = () => <title>Home Page</title>
+
+export default IndexPage

src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,jsx,ts,tsx}",
+    "./src/components/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+