├── starter.json ├── screenshot.png ├── starter ├── public │ └── favicon.ico ├── .prettierrc ├── .eslintrc ├── components │ ├── layout.js │ ├── image.js │ ├── card.js │ ├── nav.js │ ├── articles.js │ └── seo.js ├── lib │ ├── media.js │ └── api.js ├── assets │ └── css │ │ └── style.css ├── package.json ├── pages │ ├── index.js │ ├── _document.js │ ├── category │ │ └── [slug].js │ ├── _app.js │ └── article │ │ └── [slug].js └── yarn.lock ├── LICENSE.txt ├── .gitignore └── README.md /starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": "https://github.com/strapi/strapi-template-blog" 3 | } 4 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/strapi/strapi-starter-next-blog/HEAD/screenshot.png -------------------------------------------------------------------------------- /starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/strapi/strapi-starter-next-blog/HEAD/starter/public/favicon.ico -------------------------------------------------------------------------------- /starter/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "singleQuote": false, 4 | "trailingComma": "es5", 5 | "semi": false, 6 | "tabWidth": 2 7 | } -------------------------------------------------------------------------------- /starter/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next", 4 | "prettier" 5 | ], 6 | "plugins": [ 7 | "prettier" 8 | ], 9 | "rules": { 10 | "prettier/prettier": "error" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /starter/components/layout.js: -------------------------------------------------------------------------------- 1 | import Nav from "./nav" 2 | 3 | const Layout = ({ children, categories, seo }) => ( 4 | <> 5 |

6 | {children} 7 | 8 | ) 9 | 10 | export default Layout 11 | -------------------------------------------------------------------------------- /starter/lib/media.js: -------------------------------------------------------------------------------- 1 | import { getStrapiURL } from "./api" 2 | 3 | export function getStrapiMedia(media) { 4 | const imageUrl = media.url.startsWith("/") 5 | ? getStrapiURL(media.url) 6 | : media.url 7 | return imageUrl 8 | } 9 | -------------------------------------------------------------------------------- /starter/lib/api.js: -------------------------------------------------------------------------------- 1 | export function getStrapiURL(path = "") { 2 | return `${ 3 | process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337" 4 | }${path}` 5 | } 6 | 7 | // Helper to make GET requests to Strapi 8 | export async function fetchAPI(path) { 9 | const requestUrl = getStrapiURL(path) 10 | const response = await fetch(requestUrl) 11 | const data = await response.json() 12 | return data 13 | } 14 | -------------------------------------------------------------------------------- /starter/components/image.js: -------------------------------------------------------------------------------- 1 | import { getStrapiMedia } from "../lib/media" 2 | import NextImage from "next/image" 3 | 4 | const Image = ({ image, style }) => { 5 | const { url, alternativeText } = image 6 | 7 | const loader = () => { 8 | return getStrapiMedia(image) 9 | } 10 | 11 | return ( 12 | 21 | ) 22 | } 23 | 24 | export default Image 25 | -------------------------------------------------------------------------------- /starter/assets/css/style.css: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration: none; 3 | } 4 | 5 | h1 { 6 | font-family: Staatliches; 7 | font-size: 120px; 8 | } 9 | 10 | #category { 11 | font-family: Staatliches; 12 | font-weight: 500; 13 | } 14 | 15 | #title { 16 | letter-spacing: 0.4px; 17 | font-size: 22px; 18 | font-size: 1.375rem; 19 | line-height: 1.13636; 20 | } 21 | 22 | #banner { 23 | margin: 20px; 24 | height: 800px; 25 | } 26 | 27 | #editor { 28 | font-size: 16px; 29 | font-size: 1rem; 30 | line-height: 1.75; 31 | } 32 | 33 | .uk-navbar-container { 34 | background: #fff !important; 35 | font-family: Staatliches; 36 | } 37 | 38 | img:hover { 39 | opacity: 1; 40 | transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); 41 | } 42 | -------------------------------------------------------------------------------- /starter/components/card.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Link from "next/link" 3 | import NextImage from "./image" 4 | 5 | const Card = ({ article }) => { 6 | return ( 7 | 8 | 9 |

13 |

14 |

15 | {article.category.name} 16 |

17 |

18 | {article.title} 19 |

20 |

21 |

22 | 23 | 24 | ) 25 | } 26 | 27 | export default Card 28 | -------------------------------------------------------------------------------- /starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strapi-starter-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "develop": "next dev", 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "deploy": "next build && next export", 11 | "lint": "next lint", 12 | "lint:fix": "next lint --fix" 13 | }, 14 | "dependencies": { 15 | "moment": "^2.24.0", 16 | "next": "^11.0.0", 17 | "react": "17.0.0", 18 | "react-dom": "17.0.0", 19 | "react-markdown": "^4.2.2", 20 | "react-moment": "^0.9.6" 21 | }, 22 | "license": "MIT", 23 | "devDependencies": { 24 | "eslint": "^7.30.0", 25 | "eslint-config-next": "^11.0.1", 26 | "eslint-config-prettier": "^8.3.0", 27 | "eslint-plugin-prettier": "^3.4.0", 28 | "prettier": "^2.3.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /starter/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Articles from "../components/articles" 3 | import Layout from "../components/layout" 4 | import Seo from "../components/seo" 5 | import { fetchAPI } from "../lib/api" 6 | 7 | const Home = ({ articles, categories, homepage }) => { 8 | return ( 9 | 10 | 11 |

12 |

13 |

{homepage.hero.title}

14 | 15 |

16 |

17 | 18 | ) 19 | } 20 | 21 | export async function getStaticProps() { 22 | // Run API calls in parallel 23 | const [articles, categories, homepage] = await Promise.all([ 24 | fetchAPI("/articles"), 25 | fetchAPI("/categories"), 26 | fetchAPI("/homepage"), 27 | ]) 28 | 29 | return { 30 | props: { articles, categories, homepage }, 31 | revalidate: 1, 32 | } 33 | } 34 | 35 | export default Home 36 | -------------------------------------------------------------------------------- /starter/components/nav.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Link from "next/link" 3 | 4 | const Nav = ({ categories }) => { 5 | return ( 6 |

7 | 31 |

32 | ) 33 | } 34 | 35 | export default Nav 36 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /starter/components/articles.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Card from "./card" 3 | 4 | const Articles = ({ articles }) => { 5 | const leftArticlesCount = Math.ceil(articles.length / 5) 6 | const leftArticles = articles.slice(0, leftArticlesCount) 7 | const rightArticles = articles.slice(leftArticlesCount, articles.length) 8 | 9 | return ( 10 |

11 |

12 |

13 | {leftArticles.map((article, i) => { 14 | return ( 15 | 16 | ) 17 | })} 18 |

19 |

20 |

21 | {rightArticles.map((article, i) => { 22 | return ( 23 | 27 | ) 28 | })} 29 |

30 |

31 |

32 |

33 | ) 34 | } 35 | 36 | export default Articles 37 | -------------------------------------------------------------------------------- /starter/pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from "next/document" 2 | 3 | class MyDocument extends Document { 4 | render() { 5 | return ( 6 | 7 | 8 | {/* eslint-disable-next-line */} 9 | 13 | 17 |