From 5c439ea851b690c1c01bcfbe0906f00684314bfd Mon Sep 17 00:00:00 2001 From: Niklas Date: Wed, 3 Aug 2022 15:20:04 +0200 Subject: [PATCH] Add math-logo.svg, informatics-logo.svg, coding-logo.svg for landing page; Reformat code --- README.md | 1 + babel.config.js | 2 +- blog/2022-08-02-willkommen.md | 2 +- docusaurus.config.js | 248 +++++++++--------- sidebars.js | 24 +- src/components/HomepageFeatures/index.js | 118 +++++---- .../HomepageFeatures/styles.module.css | 12 +- src/css/custom.css | 48 ++-- src/pages/index.js | 54 ++-- src/pages/index.module.css | 20 +- static/img/coding-logo.svg | 4 + static/img/informatics-logo.svg | 4 + static/img/math-logo.svg | 4 + static/img/niklas-birk-logo.svg | 63 +++-- 14 files changed, 323 insertions(+), 281 deletions(-) create mode 100644 static/img/coding-logo.svg create mode 100644 static/img/informatics-logo.svg create mode 100644 static/img/math-logo.svg diff --git a/README.md b/README.md index 4821722..d7c4cba 100644 --- a/README.md +++ b/README.md @@ -3,5 +3,6 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. ## Über den Blog + Ich möchte gelegentlich über coole der Themen der Mathematik, der Informatik oder das programmieren schreiben. diff --git a/babel.config.js b/babel.config.js index e00595d..0adade1 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], }; diff --git a/blog/2022-08-02-willkommen.md b/blog/2022-08-02-willkommen.md index a7790cc..322a0fe 100644 --- a/blog/2022-08-02-willkommen.md +++ b/blog/2022-08-02-willkommen.md @@ -5,6 +5,6 @@ authors: niklas tags: [hallo] --- -Willkommen +Willkommen WIP \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index 5ccb710..f7a867e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -6,136 +6,136 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus/types').Config} */ const config = { - title: 'Mathematik, Informatik und Programmierung', - tagline: 'Mathematik und Informatik sind cool', - url: 'https://www.niklas-birk.de', - baseUrl: '/', - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', - favicon: 'img/niklas-birk-icon.ico', + title: 'Mathematik, Informatik und Programmierung', + tagline: 'Mathematik und Informatik sind cool', + url: 'https://www.niklas-birk.de', + baseUrl: '/', + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'warn', + favicon: 'img/niklas-birk-icon.ico', - // GitHub pages deployment config. - // If you aren't using GitHub pages, you don't need these. - // organizationName: 'niklas', // Usually your GitHub org/user name. - // projectName: 'niklas_birk_blog', // Usually your repo name. + // GitHub pages deployment config. + // If you aren't using GitHub pages, you don't need these. + // organizationName: 'niklas', // Usually your GitHub org/user name. + // projectName: 'niklas_birk_blog', // Usually your repo name. - // Even if you don't use internalization, you can use this field to set useful - // metadata like html lang. For example, if your site is Chinese, you may want - // to replace "en" with "zh-Hans". - i18n: { - defaultLocale: 'de', - locales: ['de'], - }, + // Even if you don't use internalization, you can use this field to set useful + // metadata like html lang. For example, if your site is Chinese, you may want + // to replace "en" with "zh-Hans". + i18n: { + defaultLocale: 'de', + locales: ['de'], + }, - presets: [ - [ - 'classic', - /** @type {import('@docusaurus/preset-classic').Options} */ - ({ - docs: false, //{ - // sidebarPath: require.resolve('./sidebars.js'), - // // Please change this to your repo. - // // Remove this to remove the "edit this page" links. - // // editUrl: - // // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', - // }, - blog: { - showReadingTime: true, - // Please change this to your repo. - // Remove this to remove the "edit this page" links. - // editUrl: - // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', - }, - theme: { - customCss: require.resolve('./src/css/custom.css'), - }, - }), + presets: [ + [ + 'classic', + /** @type {import('@docusaurus/preset-classic').Options} */ + ({ + docs: false, //{ + // sidebarPath: require.resolve('./sidebars.js'), + // // Please change this to your repo. + // // Remove this to remove the "edit this page" links. + // // editUrl: + // // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', + // }, + blog: { + showReadingTime: true, + // Please change this to your repo. + // Remove this to remove the "edit this page" links. + // editUrl: + // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', + }, + theme: { + customCss: require.resolve('./src/css/custom.css'), + }, + }), + ], ], - ], - themeConfig: + themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ - ({ - colorMode: { - defaultMode: 'dark', - disableSwitch: true, - respectPrefersColorScheme: false, - }, - navbar: { - title: 'Mathematik und Informatik', - logo: { - alt: 'Logo von Niklas Birk', - src: 'img/niklas-birk-logo.svg', - }, - items: [ - // { - // type: 'doc', - // docId: 'intro', - // position: 'left', - // label: 'Tutorial', - // }, - {to: '/blog', label: 'Blog', position: 'left'}, - { - href: 'https://git.niklas-birk.de/niklas/niklas_birk_blog', - label: 'Gitea', - position: 'right', - }, - ], - }, - footer: { - style: 'dark', - links: [ - // { - // title: 'Docs', - // items: [ - // { - // label: 'Tutorial', - // to: '/docs/intro', - // }, - // ], - // }, - { - title: 'Community', - items: [ - { - label: 'Twitter', - href: 'https://twitter.com/SirNik_OdTW', - }, - { - label: 'Mastodon', - href: 'https://mastodon.social/web/@SirNik', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Blog', - to: '/blog', - }, - { - label: 'Website', - href: 'https://www.niklas-birk.de', - }, - { - label: 'Gitea', - href: 'https://git.niklas-birk.de', - }, - { - label: 'Surveys', - href: 'https://survey.niklas-birk.de', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} Niklas Birk. Built with Docusaurus.`, - }, - prism: { - theme: lightCodeTheme, - darkTheme: darkCodeTheme, - }, - }), + ({ + colorMode: { + defaultMode: 'dark', + disableSwitch: true, + respectPrefersColorScheme: false, + }, + navbar: { + title: 'Mathematik und Informatik', + logo: { + alt: 'Logo von Niklas Birk', + src: 'img/niklas-birk-logo.svg', + }, + items: [ + // { + // type: 'doc', + // docId: 'intro', + // position: 'left', + // label: 'Tutorial', + // }, + {to: '/blog', label: 'Blog', position: 'left'}, + { + href: 'https://git.niklas-birk.de/niklas/niklas_birk_blog', + label: 'Gitea', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + // { + // title: 'Docs', + // items: [ + // { + // label: 'Tutorial', + // to: '/docs/intro', + // }, + // ], + // }, + { + title: 'Community', + items: [ + { + label: 'Twitter', + href: 'https://twitter.com/SirNik_OdTW', + }, + { + label: 'Mastodon', + href: 'https://mastodon.social/web/@SirNik', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'Blog', + to: '/blog', + }, + { + label: 'Website', + href: 'https://www.niklas-birk.de', + }, + { + label: 'Gitea', + href: 'https://git.niklas-birk.de', + }, + { + label: 'Surveys', + href: 'https://survey.niklas-birk.de', + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} Niklas Birk. Built with Docusaurus.`, + }, + prism: { + theme: lightCodeTheme, + darkTheme: darkCodeTheme, + }, + }), }; module.exports = config; diff --git a/sidebars.js b/sidebars.js index fd342f2..4cfd076 100644 --- a/sidebars.js +++ b/sidebars.js @@ -13,19 +13,19 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { - // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], + // By default, Docusaurus generates a sidebar from the docs folder structure + tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], - // But you can create a sidebar manually - /* - tutorialSidebar: [ - { - type: 'category', - label: 'Tutorial', - items: ['hello'], - }, - ], - */ + // But you can create a sidebar manually + /* + tutorialSidebar: [ + { + type: 'category', + label: 'Tutorial', + items: ['hello'], + }, + ], + */ }; module.exports = sidebars; diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index f51146d..a7093f2 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -3,59 +3,79 @@ import clsx from 'clsx'; import styles from './styles.module.css'; const FeatureList = [ - { - title: 'Mathematik', - Svg: require('@site/static/img/niklas-birk-logo.svg').default, - description: ( - <> - Mathematik ist ... - - ), - }, - { - title: 'Informatik', - Svg: require('@site/static/img/niklas-birk-logo.svg').default, - description: ( - <> - Informatik ist ... - - ), - }, - { - title: 'Programmierung', - Svg: require('@site/static/img/niklas-birk-logo.svg').default, - description: ( - <> - Programmierung ist ... - - ), - }, + { + title: 'Mathematik', + Svg: require('@site/static/img/math-logo.svg').default, + description: ( + <> +

Mathematik ist eine Wissenschaft, die selbstgeschaffene abstrakte Strukturen auf ihre Eigenschaften + und Muster untersucht.

+

Sie ist mehr als dir die Schule zeigt und wesentlich cooler als du glaubst!
+ Gib ihr eine Chance!

+ + ), + }, + { + title: 'Informatik', + Svg: require('@site/static/img/informatics-logo.svg').default, + description: ( + <> +

Informatik ist eine Strukturwissenschaft, die sich mit der Information und deren automatischer + Verarbeitung befasst.

+

+ In der Informatik geht es genau so wenig um Computer, wie in der Astronomie um + Teleskope. +

+ - Edsger Wybe Dijkstra + + ), + }, + { + title: 'Programmierung', + Svg: require('@site/static/img/coding-logo.svg').default, + description: ( + <> +

Programmierung ist das Erstellen von Programmen mit einer Programmiersprache.

+

+ 

+                        
+                            int main(void)

+                            {

+                                printf("Programmierst du auch?");

+                                return 0;

+                            }
+                        
+
+

+ + ), + }, ]; function Feature({Svg, title, description}) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); + return ( +
+
+ +
+
+

{title}

+

{description}

+
+
+ ); } export default function HomepageFeatures() { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); } diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index b248eb2..a3b8f27 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -1,11 +1,11 @@ .features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; } .featureSvg { - height: 200px; - width: 200px; + height: 30%; + width: 30%; } diff --git a/src/css/custom.css b/src/css/custom.css index 859b778..3bafe4a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,33 +6,33 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --ifm-color-primary: #2e8555; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --ifm-color-primary-darkest: #205d3b; + --ifm-color-primary-light: #33925d; + --ifm-color-primary-lighter: #359962; + --ifm-color-primary-lightest: #3cad6e; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - /*--ifm-color-primary: #25c2a0;*/ - /*--ifm-color-primary-dark: #21af90;*/ - /*--ifm-color-primary-darker: #1fa588;*/ - /*--ifm-color-primary-darkest: #1a8870;*/ - /*--ifm-color-primary-light: #29d5b0;*/ - /*--ifm-color-primary-lighter: #32d8b4;*/ - /*--ifm-color-primary-lightest: #4fddbf;*/ + /*--ifm-color-primary: #25c2a0;*/ + /*--ifm-color-primary-dark: #21af90;*/ + /*--ifm-color-primary-darker: #1fa588;*/ + /*--ifm-color-primary-darkest: #1a8870;*/ + /*--ifm-color-primary-light: #29d5b0;*/ + /*--ifm-color-primary-lighter: #32d8b4;*/ + /*--ifm-color-primary-lightest: #4fddbf;*/ - --ifm-color-primary: #bd93f9; /* dracula purple */ - --ifm-color-primary-dark: #ffb86c; /* dracula orange */ - --ifm-color-primary-darker: #ff79c6; /* dracula pink */ - --ifm-color-primary-darkest: #ff5555; /* dracula red */ - --ifm-color-primary-light: #50fa7b; /* dracula green */ - --ifm-color-primary-lighter: #f1fa8c; /* dracula yellow */ - --ifm-color-primary-lightest: #8be9fd; /* dracula cyan */ - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-color-primary: #bd93f9; /* dracula purple */ + --ifm-color-primary-dark: #ffb86c; /* dracula orange */ + --ifm-color-primary-darker: #ff79c6; /* dracula pink */ + --ifm-color-primary-darkest: #ff5555; /* dracula red */ + --ifm-color-primary-light: #50fa7b; /* dracula green */ + --ifm-color-primary-lighter: #f1fa8c; /* dracula yellow */ + --ifm-color-primary-lightest: #8be9fd; /* dracula cyan */ + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } diff --git a/src/pages/index.js b/src/pages/index.js index ebb6e7f..00749b5 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -8,34 +8,34 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures'; import styles from './index.module.css'; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Zur Mathematik, Informatik und Programmierung! - -
-
-
- ); + const {siteConfig} = useDocusaurusContext(); + return ( +
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + Zu den Themen! + +
+
+
+ ); } export default function Home() { - const {siteConfig} = useDocusaurusContext(); - return ( - - -
- -
- - ); + const {siteConfig} = useDocusaurusContext(); + return ( + + +
+ +
+ + ); } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5d..b1fb774 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -4,20 +4,20 @@ */ .heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; } @media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } + .heroBanner { + padding: 2rem; + } } .buttons { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } diff --git a/static/img/coding-logo.svg b/static/img/coding-logo.svg new file mode 100644 index 0000000..b91f9a5 --- /dev/null +++ b/static/img/coding-logo.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/static/img/informatics-logo.svg b/static/img/informatics-logo.svg new file mode 100644 index 0000000..afbc3ee --- /dev/null +++ b/static/img/informatics-logo.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/static/img/math-logo.svg b/static/img/math-logo.svg new file mode 100644 index 0000000..5d70484 --- /dev/null +++ b/static/img/math-logo.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/static/img/niklas-birk-logo.svg b/static/img/niklas-birk-logo.svg index 6e3208e..6a05b1d 100644 --- a/static/img/niklas-birk-logo.svg +++ b/static/img/niklas-birk-logo.svg @@ -1,56 +1,59 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -58,26 +61,32 @@ - + - - + + - - - - - - - + + + + + + + - +