Post Nr. 1

First post

Always first! --> see post 6 for documentation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec erat quis augue porta ornare. Maecenas auctor, metus et consectetur fringilla, quam justo iaculis nunc, vel malesuada diam leo at massa. Ut tristique elit eu gravida condimentum. Quisque mi mauris, tristique non diam ut, fermentum laoreet elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sem ex, euismod non magna porta, ornare convallis lectus.

Curabitur tempus elementum lorem, at porttitor libero vehicula id. Mauris vel purus euismod, malesuada nunc quis, imperdiet augue. Morbi dapibus quam lacinia, suscipit tellus vel, commodo libero.

Post Nr. 2

Time for a little game!

this is ZIM in action

Nullam tempus enim dolor, non dictum magna imperdiet sed. Nullam dignissim vehicula ante, id dictum diam ultricies nec. Curabitur eget augue in nulla porta blandit quis ut mauris. Duis mollis tempor luctus. Nunc porta turpis libero, vel porttitor libero luctus vel. Morbi egestas malesuada purus, vel dapibus odio egestas eget. Aliquam iaculis placerat risus, non maximus risus gravida et. Curabitur tincidunt magna ac tellus blandit, nec ultrices lectus egestas. Vestibulum vitae tempus dui, a porta tellus. Morbi massa orci, rutrum a nisl at, tempus aliquet orci. Nullam pellentesque aliquam lacus sit amet auctor. Donec eget orci at ligula lacinia consequat. Sed fringilla,arcu nec tincidunt pellentesque, sapien tortor viverra libero, in cursus risus eros eleifend quam. Cras eu odio rutrum, interdum nisl a, congue nulla. In sit amet iaculis erat, eget consequat purus. Maecenas in neque est.

Post Nr. 3

Supidupi

Das geht super mit markdown.

Visit my homepage

Post Nr. 4

Coin Collector Game:

Post Nr. 5

Fünfter Eintrag

Ich bin der 5. im Bunde.

Post Nr. 6

Funktionsübersicht / Andi's JAMstack

Layout / Styling

Grundsätze:

• Parent to child - Komponente erhält Attribute als props: <MyComponent name="Andi" /> sendet an

  const MyComponent = (props) => { return (props.name)}

• Child to parent - Use a callback:

  In parent:

  myCallback = (dataFromChild) => {
      [...use dataFromChild here...]
  },
  
  return (
  <div>
    <ChildComponent callbackFromParent={myCallback}/>
  </div>
  );
  

  In child:

  someFn = () => {
    [...here define a variable infoFromChild...]
    props.callbackFromParent(infoFromChild);
  }
  

• Komponenten rendern neu wenn deren props oder state ändert. Das Verhalten kann mit useCallback() useMemo()und useEffect() gesteuert werden. useEffect() wird immer ausgeführt, nachdem eine Komponente gerendert wurde (erlaubt über das zweite Argument [list of dependencies] auch ein tracken von state Änderungen). Sideeffects und Async operations immer als Funktion in useEffect()
• Conditional rendering mittels Ternary operator: if (check) return <x> : <y> / null
• Wiederholende Elemente in Array auslagern (sieh constans/links.js) und mittels myArray.map() mehrfach rendern.
• State mit React Hooks: const [myText, setMyText] = useState("default value") und dann z.B. two way binding: <input type="text" value={myText} onChange={event => setMyText(event.target.value)} />
• Element Referenzieren mit React Hooks: const myElement = useRef(null) - <p ref={myElement} .../> - myElement.current

Hilfsmittel:

• react-bootsrap für Komponenten (oder Ionic & Co.)
• react-icons für Icons

allgemein gültiges CSS

Das layout.css enthält algemein gültiges CSS. Hier können auch Variablen gesetzt werden (auf :root), die überall abgerufen werden können var(--myVar).

module.css

Die xyz.module.css sind komponenten-spezifisch (siehe navbar.module.css). Somit keine Überschneidungen von Klassennamen.

styled components

TODO in code

Umgebungsvariabeln

Environment variables für lokalen Gebrauch in .env.local file und für porduktiv direkt in Netlify hinterlegt. Abrufbar mit process.env siehe: `Bearer ${process.env.GATSBY_GRAPHCMS_KEY}`.

Braucht diesen Import in gatsby-config.js:

require("dotenv").config({
  path: `.env.local`,
})

Links

• Alle files unter pages erhalten automatisch einen eigenen slug. Link und navigate aus gatsby nutzen um zu Navigieren.
• AniLink für animierte transitions (fade, paintDrip, swipe, and cover)

Images

• direkt importieren (siehe jamstackdiagonal.png)
• für optimierte Bilder (siehe jamstack.png): gatsby Image (fixed und fluid)

Login

Netlifiy Identity:

• loginmodal.js für das Login-Modal
• const identity = useIdentityContext() und dann check mit {identity && identity.user ? (do stuff) : null}

Forms

• folgende Zeilen verbinden mit Netlify Forms:

  data-netlify="true"
  data-netlify-honeypot="bot-field"
  >
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="contactform" />
  

• Alternative: <form action="https://formspree.io/email@domain.com" method="POST">

Data

Gatsby Queries (at build-time) - alle gatsby-source-... plugins

• Page Queries: werden ausgeführt sobald die Komponente erstellt wird uns stellen die Daten auf props.data bereit. Page Queries können Argumente aufnehmen. Nützlich für automatische Seitenerstellung (siehe templates)
• Static Quieries: Können keine Argumente nehmen, aber überall zur Abfrage eingesetzt werden (siehe useStaticQuery())

Apollo Client (at run-time)

• Queries: useQuery() on page load / useLazyQuery() on event
• Mutations: useMutation() on event

Der apollo client wird über das wrapRootElement der ganzen App zur Verfügung gestellt (<ApolloProvider>). Der entsprechende export muss in diesen beiden files aufgeführt werden: gatsby-browser.js and gatsby-ssr.js

Automatisch Seiten generieren / Blog & Co.

Die Templates (siehe folder templates) ziehen über die Page Queries ihre Daten aus den Markdown files (unter content/posts) und werden über die Funktionen im gatsby-node.js befüllt (siehe createPage()).

Lambda Functions

Lambda function at: https://gatsby.andierni.ch/.netlify/functions/hello-world?name=Andi

Braucht den Pfad zu den Funktionen im netlify.toml file: [build]functions = "functions"

GatsbyJS Konfigurationsdateien

• gatsby-config.js : siteMetadata und Registrierung aller plugins
• gatsby-node.js : um automatisch Seiten zu erstellen aus templates
• gatsby-browser.js : um importe und exporte dem ganzen Projekt zur Verfügung zu stellen (client seitig)
• gatsby-ssr.js : um importe und exporte dem ganzen Projekt zur Verfügung zu stellen (server seitig)

Post Nr. 7

Der Siebte.

Ich sollte bei 2er Pagination als Siebter und letzter Eintrag alleine auf der 4ten Seite sein.