Installer: Update demo files

Use Tailwind from CDN instead of a compiling the article.css file into
the host app. We do not know which css processor they are using and will
not make any assumption. The demo fles will be removed anyway before
going live and you can skip them with `--skip-demo-files`.

lib/generators/alchemy/install/files/_article.html.erb

@@ -1,7 +1,9 @@
 <%- cache(article) do -%>
-  <%= element_view_for(article, tag: 'article') do |el| -%>
-    <h2><%= el.render :headline %></h2>
-    <%= el.render :picture, size: '1200x600' %>
-    <%= el.render :text %>
+  <%= element_view_for(article, tag: "article", class: "w-full max-w-xl mx-auto bg-slate-100 shadow my-8 px-8 py-4 rounded") do |el| -%>
+    <%= el.render :headline, {}, class: "text-2xl font-bold my-4" %>
+    <%= el.render :picture %>
+    <div class="[&>p]:my-2 [&>h2]:font-bold [&>h2]:text-xl [&>h2]:my-4 [&>h3]:font-bold [&>h3]:my-2 [&>ul]:list-disc [&>ul]:ml-4 [&>p>a]:underline [&>p>code]:text-sm [&>p>code]:bg-gray-50 [&>p>code]:p-1 [&>p>code]:whitespace-nowrap">
+      <%= el.render :text %>
+    </div>
   <%- end -%>
 <%- end -%>

lib/generators/alchemy/install/files/alchemy.en.yml

@@ -17,11 +17,30 @@ en:
     # Default texts for new ingredients created
     default_ingredient_texts:
       article_headline: "Welcome to your first Alchemy CMS page"
-      article_text: '<p><strong>How to get started.</strong></p><p>First of all you should read about Alchemy and its architecture in the <a class="external" href="http://guides.alchemy-cms.com/alchemy_approach.html" target="_blank" data-link-target="blank">guidelines</a>.</p><p>The most important things to know about Alchemy are elements and page layouts.</p><p><span style="text-decoration: underline;"><strong>Elements:</strong></span></p><p>With Alchemy you can split pages into content parts, elements. These elements can be defined out of several base content types: ingredients. The ingredients are:</p><ul><li>Text - <em>A single line of text</em></li><li>Richtext - <em>A TinyMCE powered formatted text block</em></li><li>Picture - <em>A reference to an image</em></li><li>Html - <em>HTML embed code</em></li><li>Select - <em>A selection of values</em></li><li>Boolean - <em>A checkbox</em></li></ul><p>Elements get defined in a YAML file <strong>config/alchemy/elements.yml</strong></p><p><a class="external" href="http://guides.alchemy-cms.com/elements.html" target="_blank" data-link-target="blank">Read more about elements and how to define them in the guidelines.</a></p><p><span style="text-decoration: underline;"><strong>Page types:</strong></span></p><p>You can define several types of pages, called page layouts. You can assign elements to page layouts and control how elements and the page of a certain layout behave.</p><p>Page layouts get defined in a YAML file <strong>config/alchemy/page_layouts.yml</strong></p><p><a class="external" href="http://guides.alchemy-cms.com/page_layouts.html" target="_blank" data-link-target="blank">Read more about defining page layouts in the guidelines.</a></p>'
+      article_text: |
+        <h2>How to get started.</h2>
+        <p>First of all you should read about Alchemy and it's architecture <a class="external" href="http://guides.alchemy-cms.com/alchemy_approach.html" target="_blank" data-link-target="blank">in the guidelines</a>.</p>
+        <p>The most important things to know about Alchemy are elements and page layouts.</p>
+        <h3>Elements:</h3>
+        <p>With Alchemy you can split pages into content parts, elements. These elements can be defined out of several base content types: ingredients. The ingredients are:</p>
+        <ul>
+          <li>Text - <em>A single line of text</em></li>
+          <li>Richtext - <em>A TinyMCE powered formatted text block</em></li>
+          <li>Picture - <em>A reference to an image</em></li>
+          <li>Html - <em>HTML embed code</em></li>
+          <li>Select - <em>A selection of values</em></li>
+          <li>Boolean - <em>A checkbox</em></li>
+        </ul>
+        <p>Elements get defined in <code>config/alchemy/elements.yml</code>.</p>
+        <p>Read more about elements and how to define them <a class="external" href="http://guides.alchemy-cms.com/elements.html" target="_blank" data-link-target="blank">in the guidelines</a>.</p>
+        <h3>Page types:</h3>
+        <p>You can define several types of pages, called page layouts. You can assign elements to page layouts and control how elements and the page of a certain layout behave.</p>
+        <p>Page layouts get defined in <code>config/alchemy/page_layouts.yml</code>.</p>
+        <p>Read more about defining page layouts <a class="external" href="http://guides.alchemy-cms.com/page_layouts.html" target="_blank" data-link-target="blank">in the guidelines</a>.</p>
 
     # Hint texts for elements
     element_hints:
-      article: "This is a hint text for the article element. You can change this text in `config/locales/alchemy.en.yml`. Feel free to change it as you like, it's yours."
+      article: "This is a hint text for the article element. You can change this text in <code>config/locales/alchemy.en.yml</code>. Feel free to change it as you like, it's yours."
 
     # Hint texts for ingredients
     ingredient_hints:

lib/generators/alchemy/install/files/application.html.erb

@@ -7,6 +7,11 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
+    <!--
+      Inserted by Alchemy demo file installer.
+      You probably want to remove this and use your custom css.
+    -->
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
 
   <body>

lib/generators/alchemy/install/install_generator.rb

@@ -65,22 +65,16 @@ def copy_yml_files
 
       def install_assets
         copy_file "custom.css", app_assets_path.join("stylesheets/alchemy/admin/custom.css")
-        append_to_file Rails.root.join("app/assets/config/manifest.js"), "//= link alchemy/admin/custom.css\n"
+        sprockets_manifest = Rails.root.join("app/assets/config/manifest.js")
+        if File.exist?(sprockets_manifest)
+          append_to_file sprockets_manifest, "//= link alchemy/admin/custom.css\n"
+        end
       end
 
       def copy_demo_views
         return if options[:skip_demo_files]
 
         copy_file "application.html.erb", app_views_path.join("layouts", "application.html.erb")
-        copy_file "article.css", app_assets_path.join("stylesheets", "alchemy", "elements", "_article.css")
-
-        stylesheet_require = %(@import "alchemy/elements/article";\n)
-        if File.exist?(app_assets_path.join("stylesheets", "application.css"))
-          prepend_file app_assets_path.join("stylesheets", "application.css"), stylesheet_require
-        else
-          create_file app_assets_path.join("stylesheets", "application.css"), stylesheet_require
-        end
-
         copy_file "_article.html.erb", app_views_path.join("alchemy", "elements", "_article.html.erb")
         copy_file "_standard.html.erb", app_views_path.join("alchemy", "page_layouts", "_standard.html.erb")
         copy_file "alchemy.en.yml", app_config_path.join("locales", "alchemy.en.yml")

lib/generators/alchemy/install/templates/elements.yml.tt

@@ -8,12 +8,14 @@
   unique: true
   ingredients:
     - role: headline
-      type: Text
+      type: Headline
       default: :article_headline
       hint: true
     - role: picture
       type: Picture
       hint: true
+      settings:
+        size: 1200x600
     - role: text
       type: Richtext
       default: :article_text