add 11ty files to website folder

2026-04-29 08:15:52 +00:00 · 2022-07-26 13:16:01 +05:00
parent abfb62c028
commit 4057d1006a
17 changed files with 245 additions and 0 deletions
@@ -0,0 +1,25 @@
+const Card = require('./src/_includes/components/Card');
+
+module.exports = function (eleventyConfig) {
+    // Keeps the same directory structure.
+    eleventyConfig.addPassthroughCopy("src/assets/");
+    eleventyConfig.addPassthroughCopy("src/css");
+
+    eleventyConfig.addWatchTarget("src/css");
+    eleventyConfig.addWatchTarget("markdown/");
+    eleventyConfig.addWatchTarget("components/Card.js");
+
+    eleventyConfig.addShortcode("Card",Card);
+
+    return {
+        dir: {
+            input: 'src',
+            includes: '_includes',
+            output: '_site',
+        },
+        templateFormats: ['md', 'njk', 'html'],
+        markdownTemplateEngine: 'njk',
+        htmlTemplateEngine: 'njk',
+        dataTemplateEngine: 'njk',
+    };
+};
@@ -0,0 +1,25 @@
+# Generated files
+package/generated*
+
+# Ignore installed npm modules
+node_modules/
+
+# Ignore build tool output, e.g. code coverage
+.nyc_output/
+coverage/
+
+# Ignore API documentation
+api-docs/
+
+# Ignore folders from source code editors
+.vscode
+.idea
+
+# Ignore eleventy output when doing manual tests
+_site/
+
+package-lock.json
+
+# Ignore test files
+.cache
+test/stubs-layout-cache/_includes/*.js
@@ -0,0 +1 @@
+comming from markdown
@@ -0,0 +1,21 @@
+{
+  "name": "11ty-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "eleventy",
+    "start": "npx eleventy --serve",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch-tailwind": "npx tailwindcss -i ./tailwind.css -o ./_site/css/tailwind.css --watch",
+    "build-tailwind": "npx tailwindcss -i ./tailwind.css -o ./_site/css/tailwind.css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@11ty/eleventy": "^1.0.1",
+    "common-tags": "^1.8.2",
+    "tailwindcss": "^3.0.24"
+  }
+}
@@ -0,0 +1,17 @@
+[
+    {
+        "title": "Hello 1",
+        "link": "./contact",
+        "linkText": "go to contact"
+    },
+    {
+        "title": "Hello 2",
+        "link": "./contact",
+        "linkText": "Go To Contact"
+    },
+    {
+        "title": "Hello 3",
+        "link": "./contact",
+        "linkText": "go to contact page"
+    }
+]
@@ -0,0 +1,6 @@
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="/11ty-demo/css/global.css">
+<link rel="stylesheet" href="/11ty-demo/css/tailwind.css">
+<title>{{ title }}</title>
@@ -0,0 +1,12 @@
+const { html } = require("common-tags");
+
+const Card = ({ title, link, linkText, raised }) => {
+  return html`
+    <div>
+      <h2>${title}</h2>
+      <a href="${link}" class="text-blue-700 mb-4 inline-block underline">${linkText}</a>
+    </div>
+  `;
+};
+
+module.exports = Card;
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {% include "basehead.html" %}
+    {% block head %}{% endblock %}
+</head>
+
+<body>
+    {{ content | safe }}
+</body>
+
+</html>
@@ -0,0 +1,6 @@
+{% extends "layouts/base.html" %}
+
+{% block head %}
+    <meta name="description" content="{{ description }}"/>
+    <link rel="stylesheet" href="/11ty-demo/css/contact.css">
+{% endblock %}
@@ -0,0 +1,7 @@
+---
+layout: layouts/contact.html
+title: contact page
+description: hey i'm on the contact page only
+---
+
+<h1 class="bg-green-400">I'm the {{ title }}</h1>
@@ -0,0 +1,3 @@
+body{
+    background-color: coral;
+}
@@ -0,0 +1,5 @@
+@import url('./reset.css');
+
+body{
+    background-color: aquamarine;
+}
@@ -0,0 +1,74 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
@@ -0,0 +1,20 @@
+---
+layout: layouts/base.html
+title: 11ty demo
+---
+
+<h1 class="bg-orange-400">{{ title }}</h1>
+<p>i am also on the home page</p>
+<a href="/11ty-demo/contact" class="text-blue-700 mb-4 inline-block underline">go to contact</a>
+
+<img src="/11ty-demo/assets/images/hotel.jpg" alt="This is a Hotel Picture." width="300px">
+
+{% for item in card %}
+{% Card title=item.title ,link=item.link, linkText=item.linkText %}    
+{% endfor %}
+
+<h1 class="text-2xl font-bold text-red-500">
+    {% include "../markdown/index.md" %}    
+</h1>
+
+
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{html,js,njk}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;