5t3ph

Begin the Project

npm init -y && npm install @11ty/eleventy

Update scripts in package.json

  "scripts": {
    "develop": "eleventy --serve",
 "build": "eleventy"

5t3ph

/*
OLD hacky way
*/
ul {
  list-style: none;
  padding: 0;
}

li {
  position: relative;

5t3ph

/*
Project Structure:

src/
- sass/
- - style.scss
- index.html

npm start - copies src files to dist/ and starts Browsersync server at localhost:3000
npm run build - copies files to dist/ and autoprefixes/minifies css

5t3ph

import * as React from 'react';

import { useLocation } from '@reach/router';
import queryString from 'query-string';

const getSelectedTheme = (query) => {
  const fallback = 'light';
  
  if (query) {
    const queriedTheme = queryString.parse(query);

5t3ph

*[class],
*[id] {
  position: relative;
  outline: 2px dashed red;
}

*[class]::before, *[class]::after,
*[id]::before,
*[id]::after {
  position: absolute;

5t3ph

const HighlightPairedShortcode = require("@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode");

const highlightCodeDemo = (code, lang) => {
  const highlightedCode = HighlightPairedShortcode(code, lang);
  return highlightedCode;
};

5t3ph

Classic Sugar Cookies

Adapted from TikTok @chloebluffcakes

Very buttery, and the perfect balance between soft and crunchy. Be sure not to over bake!

• 1 c butter
• 1 cup sugar
• 1 egg
• 1/2 tsp almond extract

5t3ph

Project Requirements

Join my stream on Twitch to help build this app! Feel free to add comments about additional features we should explore.

• Structure of the RSS item
  • Name of the source
  • Article title
  • Date
  • Excerpt
• Full article

5t3ph

{% set imgBase %}/img/post-directory/{% endset %}


5t3ph

$color-primary: purple;
$color-secondary: blue;
$color-support: green;

$theme-colors: (
  primary: $color-primary,
  secondary: $color-secondary,
  support: $color-support
);