From a596a61a178cc838b885a8ee84d312ebb9394fa8 Mon Sep 17 00:00:00 2001 From: Konrad Szwarc Date: Wed, 24 Aug 2022 21:00:38 +0200 Subject: [PATCH] Create SectionCard and typography-related components --- package-lock.json | 181 +++++++++++++++++- package.json | 3 +- src/components/Card.astro | 76 -------- src/components/section-card.astro | 11 ++ src/components/typography/content.astro | 10 + .../typography/item-description.astro | 10 + src/components/typography/item-subtitle.astro | 10 + src/components/typography/item-title.astro | 10 + src/components/typography/key-value.astro | 25 +++ src/components/typography/main-subtitle.astro | 10 + src/components/typography/main-title.astro | 10 + .../typography/section-subtitle.astro | 10 + src/components/typography/section-title.astro | 10 + src/layouts/Layout.astro | 56 ------ src/pages/index.astro | 139 +++++--------- 15 files changed, 346 insertions(+), 225 deletions(-) delete mode 100644 src/components/Card.astro create mode 100644 src/components/section-card.astro create mode 100644 src/components/typography/content.astro create mode 100644 src/components/typography/item-description.astro create mode 100644 src/components/typography/item-subtitle.astro create mode 100644 src/components/typography/item-title.astro create mode 100644 src/components/typography/key-value.astro create mode 100644 src/components/typography/main-subtitle.astro create mode 100644 src/components/typography/main-title.astro create mode 100644 src/components/typography/section-subtitle.astro create mode 100644 src/components/typography/section-title.astro delete mode 100644 src/layouts/Layout.astro diff --git a/package-lock.json b/package-lock.json index dc7f64e..b22810e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "name": "devscard", "version": "0.0.1", "devDependencies": { - "astro": "^1.0.8" + "astro": "^1.0.8", + "sass": "^1.54.5" } }, "node_modules/@ampproject/remapping": { @@ -879,6 +880,19 @@ "node": ">=4" } }, + "node_modules/anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -1010,6 +1024,15 @@ } ] }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/bl": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/bl/-/bl-5.0.0.tgz", @@ -1269,6 +1292,33 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/ci-info": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz", @@ -2386,6 +2436,12 @@ } ] }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", + "dev": true + }, "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", @@ -2422,6 +2478,18 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-buffer": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", @@ -3863,6 +3931,15 @@ "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -4290,6 +4367,18 @@ "node": ">= 6" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/recast": { "version": "0.20.5", "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz", @@ -4649,6 +4738,23 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "node_modules/sass": { + "version": "1.54.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.5.tgz", + "integrity": "sha512-p7DTOzxkUPa/63FU0R3KApkRHwcVZYC0PLnLm5iyZACyp15qSi32x7zVUhRdABAATmkALqgGrjCJAcWvobmhHw==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", @@ -6362,6 +6468,16 @@ "color-convert": "^1.9.0" } }, + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -6461,6 +6577,12 @@ "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", "dev": true }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true + }, "bl": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/bl/-/bl-5.0.0.tgz", @@ -6623,6 +6745,22 @@ "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==", "dev": true }, + "chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, "ci-info": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz", @@ -7349,6 +7487,12 @@ "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", "dev": true }, + "immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", + "dev": true + }, "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", @@ -7377,6 +7521,15 @@ "is-decimal": "^2.0.0" } }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-buffer": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", @@ -8293,6 +8446,12 @@ "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==", "dev": true }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, "npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -8577,6 +8736,15 @@ "util-deprecate": "^1.0.1" } }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, "recast": { "version": "0.20.5", "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz", @@ -8835,6 +9003,17 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "sass": { + "version": "1.54.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.5.tgz", + "integrity": "sha512-p7DTOzxkUPa/63FU0R3KApkRHwcVZYC0PLnLm5iyZACyp15qSi32x7zVUhRdABAATmkALqgGrjCJAcWvobmhHw==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", diff --git a/package.json b/package.json index bc3002e..bcdd4c2 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "astro": "astro" }, "devDependencies": { - "astro": "^1.0.8" + "astro": "^1.0.8", + "sass": "^1.54.5" } } diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index aea28c8..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,76 +0,0 @@ ---- -export interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props as Props; ---- - -
  • - -

    - {title} - → -

    -

    - {body} -

    -     -
    • - diff --git a/src/components/section-card.astro b/src/components/section-card.astro new file mode 100644 index 0000000..51d7b24 --- /dev/null +++ b/src/components/section-card.astro @@ -0,0 +1,11 @@ + + +
    diff --git a/src/components/typography/content.astro b/src/components/typography/content.astro new file mode 100644 index 0000000..f4a9efe --- /dev/null +++ b/src/components/typography/content.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/item-description.astro b/src/components/typography/item-description.astro new file mode 100644 index 0000000..6a7a77f --- /dev/null +++ b/src/components/typography/item-description.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/item-subtitle.astro b/src/components/typography/item-subtitle.astro new file mode 100644 index 0000000..8ba4269 --- /dev/null +++ b/src/components/typography/item-subtitle.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/item-title.astro b/src/components/typography/item-title.astro new file mode 100644 index 0000000..16525b2 --- /dev/null +++ b/src/components/typography/item-title.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/key-value.astro b/src/components/typography/key-value.astro new file mode 100644 index 0000000..3c1062e --- /dev/null +++ b/src/components/typography/key-value.astro @@ -0,0 +1,25 @@ +--- +const { key, value } = Astro.props; +--- + + + +
    + {key}: + {value} +
    diff --git a/src/components/typography/main-subtitle.astro b/src/components/typography/main-subtitle.astro new file mode 100644 index 0000000..3337c21 --- /dev/null +++ b/src/components/typography/main-subtitle.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/main-title.astro b/src/components/typography/main-title.astro new file mode 100644 index 0000000..e96b7a0 --- /dev/null +++ b/src/components/typography/main-title.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/section-subtitle.astro b/src/components/typography/section-subtitle.astro new file mode 100644 index 0000000..8d963f1 --- /dev/null +++ b/src/components/typography/section-subtitle.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/components/typography/section-title.astro b/src/components/typography/section-title.astro new file mode 100644 index 0000000..fb72f30 --- /dev/null +++ b/src/components/typography/section-title.astro @@ -0,0 +1,10 @@ + + +

    diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro deleted file mode 100644 index 1cea980..0000000 --- a/src/layouts/Layout.astro +++ /dev/null @@ -1,56 +0,0 @@ ---- -export interface Props { - title: string; -} - -const { title } = Astro.props as Props; ---- - - - - - - - - - {title} - - - - - - diff --git a/src/pages/index.astro b/src/pages/index.astro index 4867875..4c675f0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,96 +1,53 @@ --- -import Layout from '../layouts/Layout.astro'; -import Card from '../components/Card.astro'; +import SectionCard from "../components/section-card.astro"; +import SectionTitle from "../components/typography/section-title.astro"; +import SectionSubtitle from "../components/typography/section-subtitle.astro"; +import ItemTitle from "../components/typography/item-title.astro"; +import ItemSubtitle from "../components/typography/item-subtitle.astro"; +import Content from "../components/typography/content.astro"; +import ItemDescription from "../components/typography/item-description.astro"; +import MainTitle from "../components/typography/main-title.astro"; +import KeyValue from "../components/typography/key-value.astro"; --- - -
    -

    Welcome to Astro

    -

    - Check out the src/pages directory to get started.
    - Code Challenge: Tweak the "Welcome to Astro" message above. -

    -
      - - - - -
    -
    -     + + + + + + + + Welcome to Astro + + +
    + + Main title + Section title + Section subtitle + Item title + Item subtitle + Item description + Content + + +
    + + body { + margin: 0; + } + + +