tailwind_dsl 0.0.21 → 0.0.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/.builders/generators/utilities.rb +10 -10
  3. data/.components/readme.md +22 -0
  4. data/.components/tui/marketing/sections/cta-sections/01.data.json +10 -0
  5. data/.components/tui/marketing/sections/cta-sections/02.clean.html +10 -9
  6. data/.components/tui/marketing/sections/cta-sections/02.data.json +9 -0
  7. data/.components/tui/marketing/sections/cta-sections/02.html +10 -9
  8. data/.components/tui/marketing/sections/cta-sections/03.clean.html +16 -13
  9. data/.components/tui/marketing/sections/cta-sections/03.data.json +13 -0
  10. data/.components/tui/marketing/sections/cta-sections/03.html +16 -13
  11. data/.components/tui/marketing/sections/cta-sections/04.clean.html +13 -9
  12. data/.components/tui/marketing/sections/cta-sections/04.data.json +9 -0
  13. data/.components/tui/marketing/sections/cta-sections/04.html +13 -9
  14. data/.components/tui/marketing/sections/cta-sections/05.clean.html +16 -13
  15. data/.components/tui/marketing/sections/cta-sections/05.data.json +13 -0
  16. data/.components/tui/marketing/sections/cta-sections/05.html +16 -13
  17. data/.components/tui/marketing/sections/cta-sections/06.data.json +13 -0
  18. data/.components/tui/marketing/sections/cta-sections/07.data.json +14 -0
  19. data/.components/tui/marketing/sections/cta-sections/08.clean.html +40 -8
  20. data/.components/tui/marketing/sections/cta-sections/08.data.json +13 -0
  21. data/.components/tui/marketing/sections/cta-sections/08.html +54 -7
  22. data/.components/tui/marketing/sections/cta-sections/08.settings.json +6 -0
  23. data/CHANGELOG.md +9 -0
  24. data/lib/tailwind_dsl/etl/extractors/base_extractor.rb +22 -0
  25. data/lib/tailwind_dsl/etl/{component_models/extractor.rb → extractors/batch_extraction.rb} +28 -36
  26. data/lib/tailwind_dsl/etl/extractors/data_extractor.rb +23 -0
  27. data/lib/tailwind_dsl/etl/raw_components/transformer.rb +1 -1
  28. data/lib/tailwind_dsl/version.rb +1 -1
  29. data/lib/tailwind_dsl.rb +3 -1
  30. data/package-lock.json +2 -2
  31. data/package.json +1 -1
  32. metadata +14 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7cd0c0909e9a48950228de203ff226826d232fa82798e57ce11513d8fb333ffa
4
- data.tar.gz: 38307842f83d9d0f9d55aab36baba41e3e62b4f6ebffeacf80a27850757ece74
3
+ metadata.gz: b52114795df0523de540e30bd352f12ccbe578eedbf3d257aba35313450b2631
4
+ data.tar.gz: 412b03343badafa5f010eb2e8dea4f230b4c7c87398f84dd2946be8fc9beefe7
5
5
  SHA512:
6
- metadata.gz: 894085b30a5b7219cb9c02b31c6ea1ab187cf7a7a26b4c0c5e670b6ff079b56ac31cfd9f3bd707a0018dce2237d8d0f20733f013e830860dd70bfb6284d1634a
7
- data.tar.gz: 155bbf81aa7e67918d4eb904f92a1f8f06fbd74537893e8cf3c7b4f3483428ff0a96797479b3e5473cc9c2dbfbd2ca8f83272757cba5254a3c32b5d0f071a391
6
+ metadata.gz: 48fa80daa96fed641bd899da748f4e05d4ea77693bd25d92255a8d9ce82c8ed9de998e7bddddfc02cf40f3e0fbda920cae124503affd7e7401fc8f4a12a8fdda
7
+ data.tar.gz: 3243f22ccac987436ac435306a1ae39319cb52023846e5073713bd21e0df13e6930ea051f2a381db821a6c57946fea4510011c1e941092e3c7883de3e5e1ed17
@@ -20,7 +20,7 @@ KManager.action :utilities do
20
20
  target_component_model_path = k_builder.target_folders.get(:component_models)
21
21
 
22
22
  # Builds the design_system.json by reading all the HTML templates for every UIKit found the source_component_path
23
- uikit = helpers.build_design_systems(source_component_path)
23
+ uikit = helpers.load_design_systems(source_component_path)
24
24
 
25
25
  add('design_system.json', content: JSON.pretty_generate(uikit.to_h))
26
26
 
@@ -49,16 +49,16 @@ KManager.action :utilities do
49
49
 
50
50
  end
51
51
 
52
- def build_design_systems(source_component_path)
53
- director = TailwindDsl::Etl::RawComponents::Director.new
52
+ def load_design_systems(source_component_path)
53
+ loader = TailwindDsl::Etl::RawComponents::Load.new
54
54
 
55
- director.add_design_system(File.join(source_component_path, 'tui'))
56
- # director.add_design_system(File.join(source_component_path, 'codepen'))
57
- # director.add_design_system(File.join(source_component_path, 'devdojo'))
58
- # director.add_design_system(File.join(source_component_path, 'merakiui'))
59
- # director.add_design_system(File.join(source_component_path, 'noq'))
60
- # director.add_design_system(File.join(source_component_path, 'starter-kit'))
61
- director.uikit
55
+ loader.add_design_system(File.join(source_component_path, 'tui'))
56
+ # loader.add_design_system(File.join(source_component_path, 'codepen'))
57
+ # loader.add_design_system(File.join(source_component_path, 'devdojo'))
58
+ # loader.add_design_system(File.join(source_component_path, 'merakiui'))
59
+ # loader.add_design_system(File.join(source_component_path, 'noq'))
60
+ # loader.add_design_system(File.join(source_component_path, 'starter-kit'))
61
+ loader.uikit
62
62
  end
63
63
 
64
64
  def generate_components(uikit, source_component_path, target_folder, reset_root_path: false)
@@ -0,0 +1,22 @@
1
+ # UI Components
2
+
3
+ A set of UI Components with supporting files.
4
+
5
+ Most of these files started from `templates/tailwind` where the original HTML component examples were stored.
6
+
7
+ This list of files was then processed to generate files under `ui-components/tailwind`
8
+
9
+ The output files are segmented by their extension.
10
+
11
+ ## templates/tailwind
12
+
13
+ The original HTML file will contain tailwind CSS with both static content data. Any comments that were originally in the file are there as well. These files can be considered the source of truth and basically are copied form a source.
14
+
15
+ ## ui-components/tailwind
16
+
17
+ - `[component-group][component-name].settings.json` - any settings that can be extracted from original html or have been manually updated live in this file.
18
+ - `[component-group][component-name].data.json` - any data that can be extracted from the HTML is in this file, this is done using GPT3.
19
+ - `[component-group][component-name].astro` - the HTML component and it's data interface (Astro.props) go into this file
20
+
21
+
22
+
@@ -0,0 +1,10 @@
1
+ {
2
+ "heading": "Ready to dive in?",
3
+ "subheading": "Start your free trial today.",
4
+ "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.",
5
+ "button": {
6
+ "text": "Sign up for free",
7
+ "url": "#"
8
+ },
9
+ "imageUrl": "https://tailwindui.com/img/component-images/full-width-with-sidebar.jpg"
10
+ }
@@ -1,9 +1,10 @@
1
- {
2
- "heading": "Boost your productivity.",
3
- "subheading": "Start using our app today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.",
5
- "button": {
6
- "text": "Sign up for free",
7
- "url": "#"
8
- }
9
- }
1
+ <div class="bg-indigo-700">
2
+ <div class="mx-auto max-w-2xl py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
4
+ <span class="block">Boost your productivity.</span>
5
+ <span class="block">Start using our app today.</span>
6
+ </h2>
7
+ <p class="mt-4 text-lg leading-6 text-indigo-200">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
8
+ <a href="#" class="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50 sm:w-auto">Sign up for free</a>
9
+ </div>
10
+ </div>
@@ -0,0 +1,9 @@
1
+ {
2
+ "heading": "Boost your productivity.",
3
+ "subheading": "Start using our app today.",
4
+ "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.",
5
+ "button": {
6
+ "text": "Sign up for free",
7
+ "url": "#"
8
+ }
9
+ }
@@ -1,9 +1,10 @@
1
- {
2
- "heading": "Boost your productivity.",
3
- "subheading": "Start using our app today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.",
5
- "button": {
6
- "text": "Sign up for free",
7
- "url": "#"
8
- }
9
- }
1
+ <div class="bg-indigo-700">
2
+ <div class="mx-auto max-w-2xl py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
4
+ <span class="block">Boost your productivity.</span>
5
+ <span class="block">Start using our app today.</span>
6
+ </h2>
7
+ <p class="mt-4 text-lg leading-6 text-indigo-200">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
8
+ <a href="#" class="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50 sm:w-auto">Sign up for free</a>
9
+ </div>
10
+ </div>
@@ -1,13 +1,16 @@
1
- {
2
- "heading": "Ready to dive in?",
3
- "subheading": "Start your free trial today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
- "button1": {
6
- "text": "Get started",
7
- "url": "#"
8
- },
9
- "button2": {
10
- "text": "Learn more",
11
- "url": "#"
12
- }
13
- }
1
+ <div class="bg-white">
2
+ <div class="mx-auto max-w-7xl py-12 px-4 text-center sm:px-6 lg:py-16 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
4
+ <span class="block">Ready to dive in?</span>
5
+ <span class="block">Start your free trial today.</span>
6
+ </h2>
7
+ <div class="mt-8 flex justify-center">
8
+ <div class="inline-flex rounded-md shadow">
9
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">Get started</a>
10
+ </div>
11
+ <div class="ml-3 inline-flex">
12
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-100 px-5 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-200">Learn more</a>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ </div>
@@ -0,0 +1,13 @@
1
+ {
2
+ "heading": "Ready to dive in?",
3
+ "subheading": "Start your free trial today.",
4
+ "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
+ "button1": {
6
+ "text": "Get started",
7
+ "url": "#"
8
+ },
9
+ "button2": {
10
+ "text": "Learn more",
11
+ "url": "#"
12
+ }
13
+ }
@@ -1,13 +1,16 @@
1
- {
2
- "heading": "Ready to dive in?",
3
- "subheading": "Start your free trial today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
- "button1": {
6
- "text": "Get started",
7
- "url": "#"
8
- },
9
- "button2": {
10
- "text": "Learn more",
11
- "url": "#"
12
- }
13
- }
1
+ <div class="bg-white">
2
+ <div class="mx-auto max-w-7xl py-12 px-4 text-center sm:px-6 lg:py-16 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
4
+ <span class="block">Ready to dive in?</span>
5
+ <span class="block">Start your free trial today.</span>
6
+ </h2>
7
+ <div class="mt-8 flex justify-center">
8
+ <div class="inline-flex rounded-md shadow">
9
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">Get started</a>
10
+ </div>
11
+ <div class="ml-3 inline-flex">
12
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-100 px-5 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-200">Learn more</a>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ </div>
@@ -1,9 +1,13 @@
1
- {
2
- "heading": "Ready to dive in?",
3
- "subheading": "Start your free trial today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
- "button1": {
6
- "text": "Get started",
7
- "url": "#"
8
- }
9
- }
1
+ <div class="bg-indigo-50">
2
+ <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
4
+ <span class="block">Ready to dive in?</span>
5
+ <span class="block text-indigo-600">Start your free trial today.</span>
6
+ </h2>
7
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
8
+ <div class="inline-flex rounded-md shadow">
9
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">Get started</a>
10
+ </div>
11
+ </div>
12
+ </div>
13
+ </div>
@@ -0,0 +1,9 @@
1
+ {
2
+ "heading": "Ready to dive in?",
3
+ "subheading": "Start your free trial today.",
4
+ "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
+ "button1": {
6
+ "text": "Get started",
7
+ "url": "#"
8
+ }
9
+ }
@@ -1,9 +1,13 @@
1
- {
2
- "heading": "Ready to dive in?",
3
- "subheading": "Start your free trial today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
- "button1": {
6
- "text": "Get started",
7
- "url": "#"
8
- }
9
- }
1
+ <div class="bg-indigo-50">
2
+ <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
4
+ <span class="block">Ready to dive in?</span>
5
+ <span class="block text-indigo-600">Start your free trial today.</span>
6
+ </h2>
7
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
8
+ <div class="inline-flex rounded-md shadow">
9
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">Get started</a>
10
+ </div>
11
+ </div>
12
+ </div>
13
+ </div>
@@ -1,13 +1,16 @@
1
- {
2
- "heading": "Ready to dive in?",
3
- "subheading": "Start your free trial today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
- "button1": {
6
- "text": "Get started",
7
- "url": "#"
8
- },
9
- "button2": {
10
- "text": "Learn more",
11
- "url": "#"
12
- }
13
- }
1
+ <div class="bg-gray-50">
2
+ <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
4
+ <span class="block">Ready to dive in?</span>
5
+ <span class="block text-indigo-600">Start your free trial today.</span>
6
+ </h2>
7
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
8
+ <div class="inline-flex rounded-md shadow">
9
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">Get started</a>
10
+ </div>
11
+ <div class="ml-3 inline-flex rounded-md shadow">
12
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">Learn more</a>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ </div>
@@ -0,0 +1,13 @@
1
+ {
2
+ "heading": "Ready to dive in?",
3
+ "subheading": "Start your free trial today.",
4
+ "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
+ "button1": {
6
+ "text": "Get started",
7
+ "url": "#"
8
+ },
9
+ "button2": {
10
+ "text": "Learn more",
11
+ "url": "#"
12
+ }
13
+ }
@@ -1,13 +1,16 @@
1
- {
2
- "heading": "Ready to dive in?",
3
- "subheading": "Start your free trial today.",
4
- "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
- "button1": {
6
- "text": "Get started",
7
- "url": "#"
8
- },
9
- "button2": {
10
- "text": "Learn more",
11
- "url": "#"
12
- }
13
- }
1
+ <div class="bg-gray-50">
2
+ <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
3
+ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
4
+ <span class="block">Ready to dive in?</span>
5
+ <span class="block text-indigo-600">Start your free trial today.</span>
6
+ </h2>
7
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
8
+ <div class="inline-flex rounded-md shadow">
9
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">Get started</a>
10
+ </div>
11
+ <div class="ml-3 inline-flex rounded-md shadow">
12
+ <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">Learn more</a>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ </div>
@@ -0,0 +1,13 @@
1
+ {
2
+ "heading": "Ready to dive in?",
3
+ "subheading": "Start your free trial today.",
4
+ "text": "Ac euismod vel sit maecenas id pellentesque eu sed consectetur.",
5
+ "button1": {
6
+ "text": "Get started",
7
+ "url": "#"
8
+ },
9
+ "button2": {
10
+ "text": "Learn more",
11
+ "url": "#"
12
+ }
13
+ }
@@ -0,0 +1,14 @@
1
+ {
2
+ "image": {
3
+ "src": "https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&blend=6366F1&sat=-100&blend-mode=multiply",
4
+ "alt": "",
5
+ "caption": ""
6
+ },
7
+ "heading": "Award winning support",
8
+ "subheading": "We’re here to help",
9
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
10
+ "button": {
11
+ "text": "Visit the help center",
12
+ "url": "#"
13
+ }
14
+ }
@@ -1,8 +1,40 @@
1
- {
2
- "heading": "Join our team",
3
- "text": "Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.",
4
- "button": {
5
- "text": "Explore open positions",
6
- "url": "#"
7
- }
8
- }
1
+ <div class="relative bg-white py-16">
2
+ <div class="absolute inset-x-0 top-0 hidden h-1/2 bg-gray-50 lg:block" aria-hidden="true"></div>
3
+ <div class="mx-auto max-w-7xl bg-indigo-600 lg:bg-transparent lg:px-8">
4
+ <div class="lg:grid lg:grid-cols-12">
5
+ <div class="relative z-10 lg:col-span-4 lg:col-start-1 lg:row-start-1 lg:bg-transparent lg:py-16">
6
+ <div class="absolute inset-x-0 h-1/2 bg-gray-50 lg:hidden" aria-hidden="true"></div>
7
+ <div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
8
+ <div class="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
9
+ <img class="rounded-3xl object-cover object-center shadow-2xl" src="https://images.unsplash.com/photo-1507207611509-ec012433ff52?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80" alt="">
10
+ </div>
11
+ </div>
12
+ </div>
13
+ <div class="relative bg-indigo-600 lg:col-span-10 lg:col-start-3 lg:row-start-1 lg:grid lg:grid-cols-10 lg:items-center lg:rounded-3xl">
14
+ <div class="absolute inset-0 hidden overflow-hidden rounded-3xl lg:block" aria-hidden="true">
15
+ <svg class="absolute bottom-full left-full translate-y-1/3 -translate-x-2/3 transform xl:bottom-auto xl:top-0 xl:translate-y-0" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
16
+ <defs>
17
+ <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
18
+ <rect x="0" y="0" width="4" height="4" class="text-indigo-500" fill="currentColor" />
19
+ </pattern>
20
+ </defs>
21
+ <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
22
+ </svg>
23
+ <svg class="absolute top-full -translate-y-1/3 -translate-x-1/3 transform xl:-translate-y-1/2" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
24
+ <defs>
25
+ <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
26
+ <rect x="0" y="0" width="4" height="4" class="text-indigo-500" fill="currentColor" />
27
+ </pattern>
28
+ </defs>
29
+ <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
30
+ </svg>
31
+ </div>
32
+ <div class="relative mx-auto max-w-md space-y-6 py-12 px-4 sm:max-w-3xl sm:py-16 sm:px-6 lg:col-span-6 lg:col-start-4 lg:max-w-none lg:p-0">
33
+ <h2 class="text-3xl font-bold tracking-tight text-white" id="join-heading">Join our team</h2>
34
+ <p class="text-lg text-white">Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.</p>
35
+ <a class="block w-full rounded-md border border-transparent bg-white py-3 px-5 text-center text-base font-medium text-indigo-700 shadow-md hover:bg-gray-50 sm:inline-block sm:w-auto" href="#">Explore open positions</a>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </div>
@@ -0,0 +1,13 @@
1
+ {
2
+ "image": {
3
+ "src": "https://images.unsplash.com/photo-1507207611509-ec012433ff52?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80",
4
+ "alt": "",
5
+ "caption": ""
6
+ },
7
+ "heading": "Join our team",
8
+ "text": "Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.",
9
+ "button": {
10
+ "text": "Explore open positions",
11
+ "url": "#"
12
+ }
13
+ }
@@ -1,8 +1,55 @@
1
- {
2
- "heading": "Join our team",
3
- "text": "Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.",
4
- "button": {
5
- "text": "Explore open positions",
6
- "url": "#"
1
+ <!--
2
+ This example requires some changes to your config:
3
+
4
+ ```
5
+ // tailwind.config.js
6
+ module.exports = {
7
+ // ...
8
+ plugins: [
9
+ // ...
10
+ require('@tailwindcss/aspect-ratio'),
11
+ ],
7
12
  }
8
- }
13
+ ```
14
+ -->
15
+ <div class="relative bg-white py-16">
16
+ <div class="absolute inset-x-0 top-0 hidden h-1/2 bg-gray-50 lg:block" aria-hidden="true"></div>
17
+ <div class="mx-auto max-w-7xl bg-indigo-600 lg:bg-transparent lg:px-8">
18
+ <div class="lg:grid lg:grid-cols-12">
19
+ <div class="relative z-10 lg:col-span-4 lg:col-start-1 lg:row-start-1 lg:bg-transparent lg:py-16">
20
+ <div class="absolute inset-x-0 h-1/2 bg-gray-50 lg:hidden" aria-hidden="true"></div>
21
+ <div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
22
+ <div class="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
23
+ <img class="rounded-3xl object-cover object-center shadow-2xl" src="https://images.unsplash.com/photo-1507207611509-ec012433ff52?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80" alt="">
24
+ </div>
25
+ </div>
26
+ </div>
27
+
28
+ <div class="relative bg-indigo-600 lg:col-span-10 lg:col-start-3 lg:row-start-1 lg:grid lg:grid-cols-10 lg:items-center lg:rounded-3xl">
29
+ <div class="absolute inset-0 hidden overflow-hidden rounded-3xl lg:block" aria-hidden="true">
30
+ <svg class="absolute bottom-full left-full translate-y-1/3 -translate-x-2/3 transform xl:bottom-auto xl:top-0 xl:translate-y-0" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
31
+ <defs>
32
+ <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
33
+ <rect x="0" y="0" width="4" height="4" class="text-indigo-500" fill="currentColor" />
34
+ </pattern>
35
+ </defs>
36
+ <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
37
+ </svg>
38
+ <svg class="absolute top-full -translate-y-1/3 -translate-x-1/3 transform xl:-translate-y-1/2" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
39
+ <defs>
40
+ <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
41
+ <rect x="0" y="0" width="4" height="4" class="text-indigo-500" fill="currentColor" />
42
+ </pattern>
43
+ </defs>
44
+ <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
45
+ </svg>
46
+ </div>
47
+ <div class="relative mx-auto max-w-md space-y-6 py-12 px-4 sm:max-w-3xl sm:py-16 sm:px-6 lg:col-span-6 lg:col-start-4 lg:max-w-none lg:p-0">
48
+ <h2 class="text-3xl font-bold tracking-tight text-white" id="join-heading">Join our team</h2>
49
+ <p class="text-lg text-white">Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.</p>
50
+ <a class="block w-full rounded-md border border-transparent bg-white py-3 px-5 text-center text-base font-medium text-indigo-700 shadow-md hover:bg-gray-50 sm:inline-block sm:w-auto" href="#">Explore open positions</a>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
@@ -5,5 +5,11 @@
5
5
  "body": null
6
6
  },
7
7
  "tailwind_config": {
8
+ "plugins": {
9
+ "forms": false,
10
+ "aspect_ratio": true,
11
+ "line_clamp": false,
12
+ "typography": false
13
+ }
8
14
  }
9
15
  }
data/CHANGELOG.md CHANGED
@@ -1,3 +1,12 @@
1
+ ## [0.0.21](https://github.com/klueless-io/tailwind_dsl/compare/v0.0.20...v0.0.21) (2022-10-22)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * add unit tests for extracting data using FakeDataExtrator ([80f32f8](https://github.com/klueless-io/tailwind_dsl/commit/80f32f8b68d2d4a4a9321a62d4d2c92eb6ee5ad0))
7
+ * add unit tests for extracting data using FakeDataExtrator ([088edb1](https://github.com/klueless-io/tailwind_dsl/commit/088edb175f3f35b7e71a1225722676243aca88af))
8
+ * add unit tests for extracting data using FakeDataExtrator ([ef210a6](https://github.com/klueless-io/tailwind_dsl/commit/ef210a6dbc713a2642c1cf0c473684d3227ba9a0))
9
+
1
10
  ## [0.0.20](https://github.com/klueless-io/tailwind_dsl/compare/v0.0.19...v0.0.20) (2022-10-21)
2
11
 
3
12
 
@@ -0,0 +1,22 @@
1
+ # frozen_string_literal: true
2
+
3
+ module TailwindDsl
4
+ module Etl
5
+ module Extractors
6
+ # Extract component data an place into a new file using a an extractor.
7
+ #
8
+ # Currently designed to work with GPT3 to infer some type of target structure.
9
+ class BaseExtractor
10
+ attr_accessor :component
11
+
12
+ def target_file
13
+ raise NotImplementedError, 'target_file is not implemented'
14
+ end
15
+
16
+ def extract
17
+ raise NotImplementedError, 'extract is not implemented'
18
+ end
19
+ end
20
+ end
21
+ end
22
+ end
@@ -2,25 +2,15 @@
2
2
 
3
3
  module TailwindDsl
4
4
  module Etl
5
- module ComponentModels
6
- class Gpt3Extractor
7
- def extract_data(component)
8
- puts "extract data for #{component} using GPT3"
9
- end
10
-
11
- def extract_model(component)
12
- puts "extract model for #{component} using GPT3"
13
- end
14
- end
15
-
16
- # Extract component models by reading the cleansed component HTML and then using GPT3 to infer both the data/model structure.
17
- class Extractor
5
+ module Extractors
6
+ # Extract component data an place into a nwe file using a an extractor.
7
+ # Currently designed to work with GPT3 to infer some type of target structure.
8
+ class BatchExtraction
18
9
  attr_reader :components
19
10
  attr_reader :target_root_path
20
11
  attr_reader :batch_size
21
12
  attr_reader :use_prompt
22
- attr_reader :filter_design_system
23
- attr_reader :extract_handler
13
+ attr_reader :filter_design_system # this should be renamed and reshaped to a complex filter object
24
14
 
25
15
  # Create comment for this initialize method
26
16
 
@@ -30,14 +20,14 @@ module TailwindDsl
30
20
  # @option args [Integer] :batch_size number of components to process, default is 1
31
21
  # @option args [Boolean] :use_prompt console based prompt so the user can guide the extractor, default is false
32
22
  # @option args [String] :filter_design_system name of the design system to filter on, default is nil meaning all
33
- # @option args [Class] :extract_handler class that implements the extract_data and extract_model methods, default is Gpt3Extractor
23
+ # @option args [Class] :extract_handler class that implements an extract method
34
24
  def initialize(components, target_root_path, **args)
35
25
  @components = components
36
26
  @target_root_path = target_root_path
37
27
  @batch_size = args[:batch_size] || 1
38
28
  @use_prompt = args[:use_prompt] || false
39
29
  @filter_design_system = args[:filter_design_system] || nil
40
- @extract_handler = (args[:extract_handler] || Gpt3Extractor).new
30
+ @extract_handler = args[:extract_handler]
41
31
  end
42
32
 
43
33
  # Goal: Extract the next (batch_size) component models using GPT3 and save them to target_root_path
@@ -53,16 +43,17 @@ module TailwindDsl
53
43
  # process the component by calling the GPT3 API and save the results to the target folder.
54
44
 
55
45
  def extract
56
- guards
46
+ raise "Batch size must be greater than 0, got: #{batch_size}" if batch_size <= 0
57
47
 
58
48
  remaining = batch_size
59
49
 
60
50
  filter_components.each do |component|
61
51
  # puts "Processing: #{component.design_system.name} -> #{component.group.key} -> #{component.name} -> remaining#: #{remaining}"
62
52
 
63
- component_guards(component)
53
+ component_guard(component)
54
+ extractor.component = component
64
55
 
65
- next if data_file_exist?(component) && model_file_exist?(component)
56
+ next if File.exist?(extractor.target_file)
66
57
 
67
58
  # if use_prompt
68
59
  # puts "Input: #{component.cleansed_html_path}"
@@ -71,24 +62,29 @@ module TailwindDsl
71
62
  # next unless STDIN.gets.chomp == 'y'
72
63
  # end
73
64
 
74
- extract_handler.extract_data(component) unless data_file_exist?(component)
75
- extract_handler.extract_model(component) unless model_file_exist?(component)
65
+ extractor.extract
76
66
 
77
67
  remaining -= 1
78
68
  break if remaining.zero?
79
69
  end
80
70
  end
81
71
 
82
- private
72
+ def extractor
73
+ return @extractor if defined? @extractor
83
74
 
84
- def guards
85
- raise "Batch size must be greater than 0, got: #{batch_size}" if batch_size <= 0
86
- raise 'Extract handler is required' unless extract_handler
87
- raise 'Extract handler must implement extract_data method' unless extract_handler.respond_to?(:extract_data)
88
- raise 'Extract handler must implement extract_model method' unless extract_handler.respond_to?(:extract_model)
75
+ raise 'Extract handler is required' unless @extract_handler
76
+
77
+ @extractor = @extract_handler.new
78
+
79
+ raise 'Extract handler must implement extract method' unless @extractor.respond_to?(:extract)
80
+ raise 'Extract handler must implement target_file method' unless @extractor.respond_to?(:target_file)
81
+
82
+ @extractor
89
83
  end
90
84
 
91
- def component_guards(component)
85
+ private
86
+
87
+ def component_guard(component)
92
88
  path = File.join(component.design_system.target_path, component.group.folder)
93
89
  raise "Folder does not exist: '#{path}', make sure you run component structure generator first." unless File.exist?(path)
94
90
  end
@@ -99,13 +95,9 @@ module TailwindDsl
99
95
  components.select { |component| component.design_system.name == filter_design_system }
100
96
  end
101
97
 
102
- def data_file_exist?(component)
103
- File.exist?(component.absolute.target_data_file)
104
- end
105
-
106
- def model_file_exist?(component)
107
- File.exist?(component.absolute.target_model_file)
108
- end
98
+ # def target_file(component)
99
+ # raise NotImplementedError, 'target_file is not implemented'
100
+ # end
109
101
  end
110
102
  end
111
103
  end
@@ -0,0 +1,23 @@
1
+ # frozen_string_literal: true
2
+
3
+ module TailwindDsl
4
+ module Etl
5
+ module Extractors
6
+ # Extract component data an place into a new file using a GTP3 extraction.
7
+ class DataExtractor < TailwindDsl::Etl::Extractors::BaseExtractor
8
+ attr_accessor :component
9
+
10
+ def target_file
11
+ component.absolute.target_data_file
12
+ end
13
+
14
+ def extract
15
+ puts 'do some magic and write to target_file'
16
+ puts "target_file: #{target_file}"
17
+ File.write(target_file, 'GTP3 data')
18
+ # do some GPT3 magic
19
+ end
20
+ end
21
+ end
22
+ end
23
+ end
@@ -31,7 +31,7 @@ module TailwindDsl
31
31
  private
32
32
 
33
33
  def process_files
34
- glob = File.join(path, '**', '*')
34
+ glob = File.join(path, '**', '*.html')
35
35
 
36
36
  Dir.glob(glob) do |entry|
37
37
  next if reject?(entry)
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module TailwindDsl
4
- VERSION = '0.0.21'
4
+ VERSION = '0.0.22'
5
5
  end
data/lib/tailwind_dsl.rb CHANGED
@@ -18,7 +18,9 @@ require_relative 'tailwind_dsl/etl/raw_components/schema/uikit'
18
18
  require_relative 'tailwind_dsl/etl/component_structures/raw_component_query'
19
19
  require_relative 'tailwind_dsl/etl/component_structures/generator'
20
20
 
21
- require_relative 'tailwind_dsl/etl/component_models/extractor'
21
+ require_relative 'tailwind_dsl/etl/extractors/base_extractor'
22
+ require_relative 'tailwind_dsl/etl/extractors/batch_extraction'
23
+ # require_relative 'tailwind_dsl/etl/extractors/data_extractor'
22
24
  # require_relative 'tailwind_dsl/astro_demo/generate_astro_page_data'
23
25
 
24
26
  module TailwindDsl
data/package-lock.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "tailwind_dsl",
3
- "version": "0.0.21",
3
+ "version": "0.0.22",
4
4
  "lockfileVersion": 2,
5
5
  "requires": true,
6
6
  "packages": {
7
7
  "": {
8
8
  "name": "tailwind_dsl",
9
- "version": "0.0.21",
9
+ "version": "0.0.22",
10
10
  "devDependencies": {
11
11
  "@klueless-js/semantic-release-rubygem": "github:klueless-js/semantic-release-rubygem",
12
12
  "@semantic-release/changelog": "^6.0.1",
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailwind_dsl",
3
- "version": "0.0.21",
3
+ "version": "0.0.22",
4
4
  "description": "Tailwind DSL will build tailwind websites useing Domain Specific Language conventions",
5
5
  "scripts": {
6
6
  "release": "semantic-release"
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: tailwind_dsl
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.21
4
+ version: 0.0.22
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Cruwys
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2022-10-22 00:00:00.000000000 Z
11
+ date: 2022-10-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: cmdlet
@@ -57,6 +57,7 @@ files:
57
57
  - ".builders/generators/domain-model.rb"
58
58
  - ".builders/generators/project-plan.rb"
59
59
  - ".builders/generators/utilities.rb"
60
+ - ".components/readme.md"
60
61
  - ".components/tui/application-ui/application-shells/multi-column/01.clean.html"
61
62
  - ".components/tui/application-ui/application-shells/multi-column/01.html"
62
63
  - ".components/tui/application-ui/application-shells/multi-column/01.settings.json"
@@ -1849,28 +1850,36 @@ files:
1849
1850
  - ".components/tui/marketing/sections/content/06.html"
1850
1851
  - ".components/tui/marketing/sections/content/06.settings.json"
1851
1852
  - ".components/tui/marketing/sections/cta-sections/01.clean.html"
1853
+ - ".components/tui/marketing/sections/cta-sections/01.data.json"
1852
1854
  - ".components/tui/marketing/sections/cta-sections/01.html"
1853
1855
  - ".components/tui/marketing/sections/cta-sections/01.settings.json"
1854
1856
  - ".components/tui/marketing/sections/cta-sections/01.tailwind.config.js"
1855
1857
  - ".components/tui/marketing/sections/cta-sections/02.clean.html"
1858
+ - ".components/tui/marketing/sections/cta-sections/02.data.json"
1856
1859
  - ".components/tui/marketing/sections/cta-sections/02.html"
1857
1860
  - ".components/tui/marketing/sections/cta-sections/02.settings.json"
1858
1861
  - ".components/tui/marketing/sections/cta-sections/03.clean.html"
1862
+ - ".components/tui/marketing/sections/cta-sections/03.data.json"
1859
1863
  - ".components/tui/marketing/sections/cta-sections/03.html"
1860
1864
  - ".components/tui/marketing/sections/cta-sections/03.settings.json"
1861
1865
  - ".components/tui/marketing/sections/cta-sections/04.clean.html"
1866
+ - ".components/tui/marketing/sections/cta-sections/04.data.json"
1862
1867
  - ".components/tui/marketing/sections/cta-sections/04.html"
1863
1868
  - ".components/tui/marketing/sections/cta-sections/04.settings.json"
1864
1869
  - ".components/tui/marketing/sections/cta-sections/05.clean.html"
1870
+ - ".components/tui/marketing/sections/cta-sections/05.data.json"
1865
1871
  - ".components/tui/marketing/sections/cta-sections/05.html"
1866
1872
  - ".components/tui/marketing/sections/cta-sections/05.settings.json"
1867
1873
  - ".components/tui/marketing/sections/cta-sections/06.clean.html"
1874
+ - ".components/tui/marketing/sections/cta-sections/06.data.json"
1868
1875
  - ".components/tui/marketing/sections/cta-sections/06.html"
1869
1876
  - ".components/tui/marketing/sections/cta-sections/06.settings.json"
1870
1877
  - ".components/tui/marketing/sections/cta-sections/07.clean.html"
1878
+ - ".components/tui/marketing/sections/cta-sections/07.data.json"
1871
1879
  - ".components/tui/marketing/sections/cta-sections/07.html"
1872
1880
  - ".components/tui/marketing/sections/cta-sections/07.settings.json"
1873
1881
  - ".components/tui/marketing/sections/cta-sections/08.clean.html"
1882
+ - ".components/tui/marketing/sections/cta-sections/08.data.json"
1874
1883
  - ".components/tui/marketing/sections/cta-sections/08.html"
1875
1884
  - ".components/tui/marketing/sections/cta-sections/08.settings.json"
1876
1885
  - ".components/tui/marketing/sections/cta-sections/08.tailwind.config.js"
@@ -2151,10 +2160,12 @@ files:
2151
2160
  - lib/_.rb
2152
2161
  - lib/tailwind_dsl.rb
2153
2162
  - lib/tailwind_dsl/astro_demo/generate_astro_page_data.rb
2154
- - lib/tailwind_dsl/etl/component_models/extractor.rb
2155
2163
  - lib/tailwind_dsl/etl/component_structures/generator.rb
2156
2164
  - lib/tailwind_dsl/etl/component_structures/raw_component_query.rb
2157
2165
  - lib/tailwind_dsl/etl/element.rb
2166
+ - lib/tailwind_dsl/etl/extractors/base_extractor.rb
2167
+ - lib/tailwind_dsl/etl/extractors/batch_extraction.rb
2168
+ - lib/tailwind_dsl/etl/extractors/data_extractor.rb
2158
2169
  - lib/tailwind_dsl/etl/raw_components/load.rb
2159
2170
  - lib/tailwind_dsl/etl/raw_components/schema/design_system.rb
2160
2171
  - lib/tailwind_dsl/etl/raw_components/schema/group.rb