diff --git a/website/.eleventy.js b/website/.eleventy.js new file mode 100644 index 0000000000..96e37eb405 --- /dev/null +++ b/website/.eleventy.js @@ -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', + }; +}; \ No newline at end of file diff --git a/website/.gitignore b/website/.gitignore new file mode 100644 index 0000000000..a8fe7aec09 --- /dev/null +++ b/website/.gitignore @@ -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 \ No newline at end of file diff --git a/website/markdown/index.md b/website/markdown/index.md new file mode 100644 index 0000000000..64cc3f8ec6 --- /dev/null +++ b/website/markdown/index.md @@ -0,0 +1 @@ +comming from markdown diff --git a/website/package.json b/website/package.json new file mode 100644 index 0000000000..c96929fd94 --- /dev/null +++ b/website/package.json @@ -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" + } +} diff --git a/website/src/_data/card.json b/website/src/_data/card.json new file mode 100644 index 0000000000..474eee1b51 --- /dev/null +++ b/website/src/_data/card.json @@ -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" + } +] \ No newline at end of file diff --git a/website/src/_includes/basehead.html b/website/src/_includes/basehead.html new file mode 100644 index 0000000000..3060827122 --- /dev/null +++ b/website/src/_includes/basehead.html @@ -0,0 +1,6 @@ + + + + + +{{ title }} diff --git a/website/src/_includes/components/Card.js b/website/src/_includes/components/Card.js new file mode 100644 index 0000000000..d4d60ab960 --- /dev/null +++ b/website/src/_includes/components/Card.js @@ -0,0 +1,12 @@ +const { html } = require("common-tags"); + +const Card = ({ title, link, linkText, raised }) => { + return html` +
+

${title}

+ ${linkText} +
+ `; +}; + +module.exports = Card; diff --git a/website/src/_includes/layouts/base.html b/website/src/_includes/layouts/base.html new file mode 100644 index 0000000000..c393b62be1 --- /dev/null +++ b/website/src/_includes/layouts/base.html @@ -0,0 +1,13 @@ + + + + + {% include "basehead.html" %} + {% block head %}{% endblock %} + + + + {{ content | safe }} + + + \ No newline at end of file diff --git a/website/src/_includes/layouts/contact.html b/website/src/_includes/layouts/contact.html new file mode 100644 index 0000000000..1bb4a3cd30 --- /dev/null +++ b/website/src/_includes/layouts/contact.html @@ -0,0 +1,6 @@ +{% extends "layouts/base.html" %} + +{% block head %} + + +{% endblock %} \ No newline at end of file diff --git a/website/src/assets/images/hotel.jpg b/website/src/assets/images/hotel.jpg new file mode 100644 index 0000000000..e08bcf604e Binary files /dev/null and b/website/src/assets/images/hotel.jpg differ diff --git a/website/src/contact.html b/website/src/contact.html new file mode 100644 index 0000000000..3167cba977 --- /dev/null +++ b/website/src/contact.html @@ -0,0 +1,7 @@ +--- +layout: layouts/contact.html +title: contact page +description: hey i'm on the contact page only +--- + +

I'm the {{ title }}

\ No newline at end of file diff --git a/website/src/css/contact.css b/website/src/css/contact.css new file mode 100644 index 0000000000..a674b60493 --- /dev/null +++ b/website/src/css/contact.css @@ -0,0 +1,3 @@ +body{ + background-color: coral; +} \ No newline at end of file diff --git a/website/src/css/global.css b/website/src/css/global.css new file mode 100644 index 0000000000..f82bc48f15 --- /dev/null +++ b/website/src/css/global.css @@ -0,0 +1,5 @@ +@import url('./reset.css'); + +body{ + background-color: aquamarine; +} \ No newline at end of file diff --git a/website/src/css/reset.css b/website/src/css/reset.css new file mode 100644 index 0000000000..69e48f238a --- /dev/null +++ b/website/src/css/reset.css @@ -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; + } +} diff --git a/website/src/index.html b/website/src/index.html new file mode 100644 index 0000000000..f3bc10cd40 --- /dev/null +++ b/website/src/index.html @@ -0,0 +1,20 @@ +--- +layout: layouts/base.html +title: 11ty demo +--- + +

{{ title }}

+

i am also on the home page

+go to contact + +This is a Hotel Picture. + +{% for item in card %} +{% Card title=item.title ,link=item.link, linkText=item.linkText %} +{% endfor %} + +

+ {% include "../markdown/index.md" %} +

+ + diff --git a/website/tailwind.config.js b/website/tailwind.config.js new file mode 100644 index 0000000000..e9f30401c7 --- /dev/null +++ b/website/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + content: ["./src/**/*.{html,js,njk}"], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/website/tailwind.css b/website/tailwind.css new file mode 100644 index 0000000000..bd6213e1df --- /dev/null +++ b/website/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file