GithubHelp home page GithubHelp logo

the-ai-summer / blog-template Goto Github PK

View Code? Open in Web Editor NEW
74.0 4.0 10.0 1.26 MB

Scientific blog template based on theaisummer.com

Home Page: https://theaisummer.com/

License: Apache License 2.0

HTML 0.20% CSS 0.12% JavaScript 8.34% SCSS 25.80% TypeScript 65.54%
gatsby react markdown mdx katex typescript tsx prismjs static-site blog-template

blog-template's Introduction

Scientific blog template based on AI Summer

example-home

The current template can be used for scientific blogs as it supports a wide variety of necessary components such as:

  • Latex rendering
  • Code blocks with highlighting
  • References and citations
  • Embed gifs and videos
  • Interactive components
  • Table of contents
  • Similar articles

Other important features:

  • Ability to filter and display posts by topic
  • Customizable author pages
  • 100% responsive
  • Pages can be created with standard React code or using Markdown
  • Search with a local index using flexsearch
  • SEO ready
  • Responsive images and image preprocessing pipeline
  • Google analytics and tag manager
  • robots.txt generation
  • XML feed generation
  • Sitemap generation

See a live example in our website

The template is based on theaisummer.com, which we strip from all the unecessary stuff in order to provide a minimal, ready-to-use but feature-rich framework for scientific blogs.

example-blog-1

Important information

  • The template is built with Gatsby v2 so some familiarity with React is required. For those who want to customize it, we highly recommend to check out the official Gatsby docs
  • Typescript and TSX is used instead of Javascript
  • The Sass preprocessor is used for styling
  • MDX is used instead of Markdown so we can add custom React components inside markdown. That enables us high customizeability, interactive widgets and more.
  • Latex is rendered with Katex and remark-math
  • Code blocks are rendered with prism-react-renderer
  • Following Gatsby paradigm, GraphQL is used to query the website content
  • Content can also be sourced using YAML files
  • Forms can be created using react-hook-form
  • Annimations on scroll support

example-blog-2

How to run the template

  1. Instal the necessary dependencies
$ yarn install
  1. Run Gatsby
$ yarn start

What you need to do before deploying?

  • Update gatsby-config with your site information
  • Upload your logos and icons in assets/images/
  • Update the Seo.tsx component
  • Update your themes in styles/
  • Update the yaml files in site-content

How to deploy

  1. Build the final static files
$ yarn build
  1. Preview the website
$ yarn serve
  1. Transfer the public folder to your hosting option of choice. For exammple, AI Summer is deployed on Firebase hosting, but any object storage will do just fine.
$ firebase deploy

example-home-2

Support

If you really like this repository and find it useful, please consider (โ˜…) starring it, so that it can reach a broader audience of like-minded people. It would be highly appreciated :) !

Contributing and Reporting Bugs

You are more than welcome to contribute to the template by adding more features, fixing bugs and more. Remember that this template was created by machine learning engineers and not web developers, so our sincere apologies in advance ๐Ÿ˜‚

If you find a bug, create a GitHub issue, or even better, submit a pull request. Similarly, if you have questions, simply post them as GitHub issues. More info here.

Current team

License

Copyright 2022, AI Summer.

Licensed under the Apache License, Version 2.0

See the full license.

blog-template's People

Contributors

sergioskar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

blog-template's Issues

Blog Template does not build on Apple M1 (With fixes)

Describe the bug
The templates does not build on apple silicon m1 since "gatsby-plugin-sharp" in packages in JSON is 2.7.X does not work. See screenshot

To Reproduce
Steps to reproduce the behavior:

  1. "yarn install" on apple silicon macbook.

Expected behavior
Trying to build and start the website using YARN as stated in README. it works on windows but not in Apple M1

Screenshots
See attached for the problem stated and the FIX!

FAILED MESSAGE
failed message

FIX
Fix

SUCCESS MESSAGE
success message

I need help

I am having problem in favicon of the website , its not showing

and another for home page design :

image
how to edit this section
I am a student and for practicing i cloned your repository from website

another question is Do i need to create another folder or mdx file in /site-content/ folder where it will be automatically converted to a page

last one :

on which file can i edit its link and text ??

image

Dark theme

  • Dark theme support
  • The ability to toggle between light and dark theme

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.