This repository is deprecated, the Datenguide blog is now part of the main datengui.de website, see github.com/datenguide/datenguide
This repository contains the source code for the datengui.de blog. For general information about the Datenguide project, see the main Datenguide repository.
This project uses a JAMstack approach:
Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript.
All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services.
Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.
(explanation from jamstack.org)
This web application is built upon React and Gatsby. It uses Yarn for managing dependencies.
- Install the Node.js runtime
- Install the Yarn package manager
Note: This web application uses sharp for image optimization. This requires libvips, which should come pre-installed on most UNIX-based systems. If not, look in your package manager for a package called libvips-dev and install it before installing the node dependencies in the next step.
yarn install
yarn dev
yarn build
yarn serve
An overview of the files and directories you'll work with when contributing to this project:
.
(1) ├── gatsby-browser.js
(2) ├── gatsby-config.js
(3) ├── gatsby-node.js
(4) ├── node_modules
(5) ├── package.json
(6) ├── public
(7) ├── src
(8) │ ├── html.js
(9) │ ├── assets
│ │ └── images
(10) │ ├── blog
│ │ ├── 2018
│ │ └── ...
(11) │ ├── components
│ │ ├── Article.js
│ │ └── ....
(12) │ ├── pages
│ │ ├── 404.js
│ │ ├── privacy.md
│ │ └── ...
(13) │ ├── regions
│ │ ├── ahrweiler.md
│ │ └── ...
(14) │ ├── scss
(15) │ │ ├── _baseline.scss
(16) │ │ ├── _fonts.scss
(17) │ │ ├── _variables.scss
(18) │ │ ├── components
(19) │ │ └── main.scss
(20) │ └── templates
│ ├── article.js
│ └── ...
(21) ├── static
│ └── images
(22) ├── yarn.lock
(23) ├── .editorconfig
(24) ├── .gitignore
(25) └── .prettierrc
-
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs. These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs. These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
/node_modules: This directory contains all of the modules of code that your project depends on (external packages). It is automatically created and populated when you runyarn install. -
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. -
/public: This directory contains the generated files that we deploy to the web. It is automatically created and populated when you runyarn build. -
/src: This directory contains all of the code related to what you see in the browser, such as templates and styling. -
/src/html.js: This component is used to generate the wrapper for the individual HTML pages, including<head>and<body>tags. -
/src/assets: This directory contains any assets, such as images, etc. The content of this directory is processed through the Webpack module bundler. -
/src/posts: This directory contains blog posts, ordered by year. Each blog post has its own directory which includes a markdown file and all images used in the blog post. The blog post's slug is based on the directory's path name. -
/src/components: This directory contains individual UI components used in the web application. Typically, a UI component consists of a React component and an optional GraphQL query. -
/src/pages: This directory contains text and specific markup for generating individual content pages. Typically, a page is either a React component or a markdown file. Markdown files typically specify which template should be used for rendering them. React components should only be used for pages that do not contain much content. -
/src/regions: This directory contains a markdown file for each district and city covered by Datenguide. The markdown files can be used to add specific information to be rendered in the regions pages on datengui.de. -
/src/scss: This directory contains the styling information used in the Datenguide web application. It uses SCSS. -
/src/scss/_baseline.scss: This file has the basic styling information used across the Datenguide web application. -
/src/scss/_fonts.scss: This file imports the web fonts used in the Datenguide web application. -
/src/scss/_variables.scss: This file specifies SCSS variables for colors, font stacks, and other visual properties of the web application. It also overrides the default Material Design styling. -
/src/scss/components: This directory contains the styling information for UI components. -
/src/scss/main.scss: This file is the main entry point for generating a single CSS file for the application. It imports variables, component styles, external dependencies, etc. -
/src/templates: This directory contains templates for generating individual pages, written as React components. -
/src/static: Just like/src/assets, this directory contains assets, such as images. The main difference is that the content of/src/staticis simply copied over to the final build and not processed through Webpack. -
yarn.lock: This is an automatically generated file based on the exact versions of dependencies that were installed for your project based onpackage.json(see below). It is updated automatically by Yarn, the package manager used in this Project. You won’t change this file directly. -
.gitignore: This file tells git which files it should not track / not maintain a version history for. -
.editorconfig: This is a configuration file used by various text editors and IDEs to keep the file formatting consistent. -
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.