From d16afd3f036993935528634c5c21f065df99fc38 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Mon, 7 Feb 2022 02:14:31 +0000 Subject: [PATCH] finally a handle on how I want to work with the data. Frontend Mentor projects are now pulled from a json data file. Need to add the FreeCodeCamp projects to it next. Probably better to rearrange a bit and have seperate md files for each project/challenge that pulls in whatever readme there is for each project. Will see. Considering tracking date too. Issue with how project cards look in Safari compared to Firefox or Chrome. --- .eleventy.js | 18 ++- package.json | 7 +- src/404.njk | 13 ++ src/_data/site.json | 9 ++ src/_data/webprojects.json | 121 ++++++++++++++++++ src/_includes/MD/footer.md | 21 ++++ src/_includes/components/project.njk | 39 ++++++ src/_includes/global/site-css.njk | 12 ++ src/_includes/global/site-favicon.njk | 9 ++ src/_includes/global/site-footer.njk | 32 +++++ src/_includes/global/site-header.njk | 5 + src/_includes/global/site-main.njk | 3 + src/_includes/global/site-meta.njk | 4 + src/_includes/layouts/base.njk | 16 +++ src/css/error.css | 30 +++++ src/css/footer.css | 19 +++ src/{data/.forgit => css/header.css} | 0 src/css/style.css | 21 +--- src/includes/.forgit | 0 src/{index.html => index.html-old} | 15 +-- src/index.md-- | 8 -- src/index.njk | 160 ++++++++++++++++++++++++ src/index.old | 23 ---- src/layouts/base.njk | 17 --- src/{playground.html => playground.njk} | 46 +++---- src/svgs/purple_fedora.svg | 9 ++ 26 files changed, 548 insertions(+), 109 deletions(-) create mode 100644 src/404.njk create mode 100644 src/_data/site.json create mode 100644 src/_data/webprojects.json create mode 100644 src/_includes/MD/footer.md create mode 100644 src/_includes/components/project.njk create mode 100644 src/_includes/global/site-css.njk create mode 100644 src/_includes/global/site-favicon.njk create mode 100644 src/_includes/global/site-footer.njk create mode 100644 src/_includes/global/site-header.njk create mode 100644 src/_includes/global/site-main.njk create mode 100644 src/_includes/global/site-meta.njk create mode 100644 src/_includes/layouts/base.njk create mode 100644 src/css/error.css create mode 100644 src/css/footer.css rename src/{data/.forgit => css/header.css} (100%) delete mode 100644 src/includes/.forgit rename src/{index.html => index.html-old} (98%) delete mode 100644 src/index.md-- create mode 100644 src/index.njk delete mode 100644 src/index.old delete mode 100644 src/layouts/base.njk rename src/{playground.html => playground.njk} (76%) diff --git a/.eleventy.js b/.eleventy.js index 92e497d..ac66a10 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,3 +1,5 @@ +const { EleventyRenderPlugin } = require("@11ty/eleventy"); + module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css"); eleventyConfig.addPassthroughCopy("./src/fonts"); @@ -19,21 +21,27 @@ module.exports = function (eleventyConfig) { // "./src/assets/images": "img", //}); + // PLUGINS + eleventyConfig.addPlugin(EleventyRenderPlugin); + // WATCH Targets eleventyConfig.addWatchTarget("./src/css/"); eleventyConfig.addWatchTarget("./src/js/"); // Return your Object options: return { + // markdownTemplateEngine: "njk", dir: { input: "src", output: "www", - // ⚠️ These values are both relative to the input directory. + // ⚠️ These values are relative to the input directory. // 📝 _includes is a default value, as is _data but I like them - // visible here as a reminder - includes: "includes", - layouts: "layouts", - data: "data", + // visible here as a reminder 🤷 + includes: "_includes", + // done to shorten the frontmater so layout: base + // rather than layout: layouts/base + layouts: "_includes/layouts", + data: "_data", }, }; }; diff --git a/package.json b/package.json index deae731..9a695a8 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "rmcg.dev", - "version": "1.0.1", + "version": "1.1.0", "description": "Projects completed while working through various HTML/CSS/JavaScript things. Primarily focused on Frontend Mentor. Ultimately it will aim to be a portfolio site.", "main": "index.js", "scripts": { "start": "npx @11ty/eleventy --serve", "build": "npx @11ty/eleventy", - "build-inc": "npx @11ty/eleventy --incremental", + "serve-inc": "npx @11ty/eleventy --serve --incremental", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { @@ -19,5 +19,4 @@ "devDependencies": { "@11ty/eleventy": "^1.0.0" } - -} +} \ No newline at end of file diff --git a/src/404.njk b/src/404.njk new file mode 100644 index 0000000..daaff28 --- /dev/null +++ b/src/404.njk @@ -0,0 +1,13 @@ +--- +title: Oops! Page Not Found +layout: base +permalink: /404.html +css: ["/css/error.css"] +--- + +
+ +

+ Apologies, nothing to see here. Maybe try the main page +

+
\ No newline at end of file diff --git a/src/_data/site.json b/src/_data/site.json new file mode 100644 index 0000000..0ac955b --- /dev/null +++ b/src/_data/site.json @@ -0,0 +1,9 @@ +{ + "name": "Robert McGovern's Practice Projects", + "url": "https://rmcg.dev", + "authorName": "Robert McGovern", + "authorUrl": "https://tarasis.net", + "authorEmail": "work@tarasis.net", + "description": "Projects from Frontend Mentor, FreeCodeCamp and more. Playground for learning.", + "favicon": "./svgs/purple_fedora.svg" +} \ No newline at end of file diff --git a/src/_data/webprojects.json b/src/_data/webprojects.json new file mode 100644 index 0000000..0dd28de --- /dev/null +++ b/src/_data/webprojects.json @@ -0,0 +1,121 @@ +{ + "frontendMentor": { + "serviceName": "Frontend Mentor", + "svgSource": "/svgs/frontendmentor.svg", + "svgAltText": "Frontend Mentor Logo", + "description": "Collection of challenges I completed for Frontend Mentor", + "difficulty": [ + { + "title": "Newbie", + "challenges": [ + { + "title": "Order Summary Card Component", + "url": "/FrontendMentor/newbie/order-summary-component/", + "description": "Test", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/screenshots/fem-newbie-order-summary-component.png", + "screenshotAltText": "Order Summary Component Challenge from FrontendMentor" + }, + { + "title": "Profile Card Component", + "url": "/FrontendMentor/newbie/profile-card-component/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg", + "screenshotAltText": "Profile Card Component Challenge from FrontendMentor" + }, + { + "title": "Stats Preview Card Component", + "url": "/FrontendMentor/newbie/stats-preview-card-component/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg", + "screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor" + }, + { + "title": "Article Preview Component", + "url": "/FrontendMentor/newbie/article-preview-component/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg", + "screenshotAltText": "Article Preview Component Challenge from FrontendMentor" + }, + { + "title": "Four Card Feature Section", + "url": "/FrontendMentor/newbie/four-card-feature-section/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg", + "screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor" + }, + { + "title": "Single Price Grid Component", + "url": "/FrontendMentor/newbie/single-price-grid-component-master/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg", + "screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor" + }, + { + "title": "Ping Coming-Soon", + "url": "/FrontendMentor/newbie/ping-coming-soon-page-master/", + "description": "", + "techUsed": [ + "html5", + "css3", + "js" + ], + "screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg", + "screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor" + }, + { + "title": "The Huddle Landing Page", + "url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/", + "description": "", + "techUsed": [ + "html5", + "css3", + "js" + ], + "screenshotURL": "/screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png", + "screenshotAltText": "The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section." + } + ] + }, + { + "title": "Junior", + "challenges": [] + }, + { + "title": "Intermediate", + "challenges": [] + }, + { + "title": "Advanced", + "challenges": [] + }, + { + "title": "Guru", + "challenges": [] + } + ] + } +} \ No newline at end of file diff --git a/src/_includes/MD/footer.md b/src/_includes/MD/footer.md new file mode 100644 index 0000000..6187fb1 --- /dev/null +++ b/src/_includes/MD/footer.md @@ -0,0 +1,21 @@ + + + +{% set projectPrefix = project %} + +{% if projectContent %} +{% set projectPrefix = projectContent %} +{% endif %} + +{{projectPrefix.name}} + + {% renderTemplate "md", + "nkj" %} + +All projects are the work of Robert McGovern, 2020-2022. Site V3 +[Email](emailto:{{projectPrefix.name}}), [Website/Blog]({{projectPrefix.name}}) + +[Background SVG provided by Steve Schoger @ Hero Patterns](http://www.heropatterns.com/) +{% endrenderTemplate %} + + diff --git a/src/_includes/components/project.njk b/src/_includes/components/project.njk new file mode 100644 index 0000000..f5afa30 --- /dev/null +++ b/src/_includes/components/project.njk @@ -0,0 +1,39 @@ +{# {% set projectPrefix = project %} #} + +{% if projectContent %} +
+ + {{projectContent.AltText}} + +
+

+ {{projectContent.title}} +

+ {% if projectContent.description | length %} +

+ {{projectContent.description}} +

+ {% endif %} +
    + {% for tech in projectContent.techUsed %} + {% if tech === "html5" %} +
  • + HTML5 +
    • + {% endif %} + {% if tech === "css3" %} +
  • + CSS3 +
    • + {% endif %} + {% if tech === "js" %} +
  • + JavaScript +
    • + {% endif %} + {% endfor %} +
+
+
+{% endif %} \ No newline at end of file diff --git a/src/_includes/global/site-css.njk b/src/_includes/global/site-css.njk new file mode 100644 index 0000000..88534f3 --- /dev/null +++ b/src/_includes/global/site-css.njk @@ -0,0 +1,12 @@ +{% if cssReset %} + +{% endif %} + + + + +{% if css %} + {% for link in css %} + + {% endfor %} +{% endif %} \ No newline at end of file diff --git a/src/_includes/global/site-favicon.njk b/src/_includes/global/site-favicon.njk new file mode 100644 index 0000000..0ccf5b9 --- /dev/null +++ b/src/_includes/global/site-favicon.njk @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/src/_includes/global/site-footer.njk b/src/_includes/global/site-footer.njk new file mode 100644 index 0000000..9a0b7b6 --- /dev/null +++ b/src/_includes/global/site-footer.njk @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/src/_includes/global/site-header.njk b/src/_includes/global/site-header.njk new file mode 100644 index 0000000..07eea17 --- /dev/null +++ b/src/_includes/global/site-header.njk @@ -0,0 +1,5 @@ +
+
+

{{ title }}

+
+
\ No newline at end of file diff --git a/src/_includes/global/site-main.njk b/src/_includes/global/site-main.njk new file mode 100644 index 0000000..8eae41f --- /dev/null +++ b/src/_includes/global/site-main.njk @@ -0,0 +1,3 @@ +
+ {{ content | safe }} +
\ No newline at end of file diff --git a/src/_includes/global/site-meta.njk b/src/_includes/global/site-meta.njk new file mode 100644 index 0000000..4baef8e --- /dev/null +++ b/src/_includes/global/site-meta.njk @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk new file mode 100644 index 0000000..e2c895c --- /dev/null +++ b/src/_includes/layouts/base.njk @@ -0,0 +1,16 @@ + + + + + {{ title }} - {{ site.url }} + + {% include "global/site-meta.njk" %} + {% include "global/site-css.njk" %} + {% include "global/site-favicon.njk" %} + + + {% include "global/site-header.njk" %} + {% include "global/site-main.njk" %} + {% include "global/site-footer.njk" %} + + \ No newline at end of file diff --git a/src/css/error.css b/src/css/error.css new file mode 100644 index 0000000..4e1e1c7 --- /dev/null +++ b/src/css/error.css @@ -0,0 +1,30 @@ +*, +::before, +::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + min-height: 100vh; + width: 100%; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +main { + margin: auto 0; +} + +.error404 p { + font-size: 2rem; +} + +.error404 img { + width: 25%; +} diff --git a/src/css/footer.css b/src/css/footer.css new file mode 100644 index 0000000..b5c9771 --- /dev/null +++ b/src/css/footer.css @@ -0,0 +1,19 @@ +footer { + margin-top: 2rem; + text-align: center; + font-size: 0.9rem; + margin-left: auto; + margin-right: auto; + width: 85%; +} + +footer > * { + margin-top: 0.5rem; +} + +footer div { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} diff --git a/src/data/.forgit b/src/css/header.css similarity index 100% rename from src/data/.forgit rename to src/css/header.css diff --git a/src/css/style.css b/src/css/style.css index 069c9d5..f242654 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -84,11 +84,11 @@ body { /* .frontEndMentorChallenges {} */ -.frontEndMentorChallenges .newbieChallenges { +.frontEndMentorChallenges { margin-left: 1rem; } -.newbieChallenges > h3, +.frontEndMentorChallenges > h3, .responsiveProjects > h3 { font-weight: 600; font-size: 1.3rem; @@ -98,23 +98,6 @@ body { /* .completeWebDev2020Projects {} */ /* .vanillaJSProjects {} */ -footer { - margin-top: 3rem; - text-align: center; - font-size: 0.9rem; - margin-left: auto; - margin-right: auto; - width: 85%; -} - -footer * { - margin-top: 1rem; -} - -footer > a { - display: block; -} - .alignedHeader { display: flex; flex-wrap: wrap; diff --git a/src/includes/.forgit b/src/includes/.forgit deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.html b/src/index.html-old similarity index 98% rename from src/index.html rename to src/index.html-old index ea57bb5..8b54004 100644 --- a/src/index.html +++ b/src/index.html-old @@ -8,13 +8,14 @@ - - - - - - - + + + + + + + + diff --git a/src/index.md-- b/src/index.md-- deleted file mode 100644 index d593833..0000000 --- a/src/index.md-- +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Hello World -layout: "base.njk" ---- - -## In the House! - -Hello Jamstack fam! diff --git a/src/index.njk b/src/index.njk new file mode 100644 index 0000000..1ace4dc --- /dev/null +++ b/src/index.njk @@ -0,0 +1,160 @@ +--- +title: Practice Projects +layout: base.njk +css: ["/css/style.css"] +cssReset: true +--- + +
+

+ These are completed projects done to practice using HTML, + CSS & Javascript. They come from different sources, and + most are freely available for anyone to practice with. + Where not, I'll indicate if it is from a premium source. +

+   +

+ I've put them all into a single GIT repository rather than + litter my git service with many different projects. This may + change in future depending on how many of these that I do. +

+   +

Robert McGovern

+
+ +
+
+

{{webprojects.frontendMentor.serviceName}}

+ {{webprojects.frontendMentor.svgAltText}} +
+

{{webprojects.frontendMentor.description}}

+ + {% for difficultyLevel in webprojects.frontendMentor.difficulty %} + {% if difficultyLevel.challenges | length %} +
+

{{difficultyLevel.title}} Challenges

+ +
+ + {% for challenge in difficultyLevel.challenges %} + + {% set projectContent = challenge %} + {% include "components/project.njk" %} + {% endfor %} +
+
+ + {% endif %} + {% endfor %} +
+ +
+
+

Freecodecamp

+ Freecodecamp +
+
+

Responsive Web Design Projects

+

+ Note: As of 11 Oct 2020, these require a partial rework + to look good on mobile. 1-3 where written much earlier + in my learning, so while they fufill all the + requirements, they don't look great on mobile. +

+
+
+ + Project 1 - Tribute Page + +
+

+ Project 1 - Tribute Page +

+ +
    +
  • + HTML5 +
    • +
  • + CSS3 +
    • +
+
+
+
+ + Project 2 - Build A Survey Form + +
+

+ Project 2 - Build A Survey Form +

+ +
    +
  • + HTML5 +
    • +
  • + CSS3 +
    • +
+
+
+
+ + Project 3 - Product Landing Page + +
+

+ Project 3 - Product Landing Page +

+ +
    +
  • + HTML5 +
    • +
  • + CSS3 +
    • +
+
+
+
+
+
+ +
+ +
+

+ The Complete 2022 Web Development Bootcamp +

+ The Complete 2022 Web Development Bootcamp Udemy Course +
+

coming soon

+
+ +
+

Vanilla JS Projects

+

coming soon

+
+ +
+

Playground

+

+ Intended for just little snippets of code that look useful +

+ The Playground +
\ No newline at end of file diff --git a/src/index.old b/src/index.old deleted file mode 100644 index 2d52788..0000000 --- a/src/index.old +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - rmcg.dev - - - -
-
- -

Coming Soon™

-

Projects from Frontend Mentor and more. Playground for learning.

-
-
- - - \ No newline at end of file diff --git a/src/layouts/base.njk b/src/layouts/base.njk deleted file mode 100644 index 4ba220c..0000000 --- a/src/layouts/base.njk +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - Going Beyond Static Sites With Eleventy - - - -
-

Going Beyond Static Sites With Eleventy

-
-
- {{ content | safe }} -
- - \ No newline at end of file diff --git a/src/playground.html b/src/playground.njk similarity index 76% rename from src/playground.html rename to src/playground.njk index 9f89950..8302f49 100644 --- a/src/playground.html +++ b/src/playground.njk @@ -1,19 +1,16 @@ - - +--- +layout: base.njk +title: Playground +css: ["/css/playground.css"] +--- +{# css: ["/css/reset.css", "/css/playground.css"] + #} +{# #} +{# #} - - - - - Playground - - - +

Tricks

- -

Tricks

- -

Gradient text with CSS

+

Gradient text with CSS

This one comes from Kevin Powell, on a YouTube video short "Gradient text with CSS | CSS Tip of the Day". It applies a colored gradient to text. @@ -22,14 +19,14 @@

Thingy Text thats with a gradient

-

Tip for screen sized approriate images

+

Tip for screen sized approriate images

- shiny black dog looking pensive - 
+
 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" 
 srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg  2x, 
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, 
@@ -41,21 +38,21 @@ width="480" height="360">
     Better though is
 
     
-        
-        
-        smiling black dog
-    
+
 
-    
+
 <picture>
     <source media="(min-width:600px)"
             srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg  320w,
@@ -74,7 +71,4 @@ width="480" height="360">
 </picture>
     

 
-    
???

-
-
-
\ No newline at end of file
+
???

\ No newline at end of file
diff --git a/src/svgs/purple_fedora.svg b/src/svgs/purple_fedora.svg
index d3b772c..fe5cf58 100644
--- a/src/svgs/purple_fedora.svg
+++ b/src/svgs/purple_fedora.svg
@@ -1,6 +1,15 @@
 
 
 
+