fix: Remove components

- Use render_template to render web_block and image_with_blur

frappe/templates/components/button.html

@@ -1,29 +0,0 @@
----
-name: "button"
-variant: "secondary"
-size: "small"
-disabled: 0
-url: null
----
-
-{%- set static_classes = "border inline-flex justify-center items-center focus:outline-none font-medium transition duration-150 ease-in-out" -%}
-{%- set dynamic_classes = {
-	"px-4 py-2 text-sm leading-5 rounded-md": size == "small",
-	"px-8 py-3 sm:px-10 sm:py-4 text-base sm:text-lg leading-6 rounded-lg": size == "large",
-	"opacity-50 cursor-not-allowed pointer-events-none": disabled,
-	"bg-primary-500 border-transparent hover:bg-primary-400 text-white focus:shadow-outline-primary focus:border-primary-600":
-	  variant == "primary",
-	"bg-primary-100 border-transparent text-primary-700 hover:text-primary-600 hover:bg-primary-50 focus:shadow-outline-primary focus:border-primary-300":
-	  variant == "secondary",
-	"bg-red-500 border-transparent hover:bg-red-400 text-white focus:shadow-outline-red focus:border-red-700":
-	  variant == "danger"
-  }
--%}
-{%- set html_tag = "a" if url else "button" -%}
-
-<{{html_tag}}
-	class="{{ resolve_class([static_classes, dynamic_classes, class]) }}"
-	{{ 'disabled' if disabled else '' }}
-	{{ ('href="' + url + '"') if url else '' }}>
-	{{ label }}
-</{{html_tag}}>

frappe/templates/components/dropdown.html

@@ -1,25 +0,0 @@
-<details class="relative inline-block text-left dropdown hide-summary-arrow">
-	<summary class="block cursor-pointer focus:outline-none">
-		<span class="inline-flex items-center justify-center text-gray-800 hover:text-gray-900">
-			{{ label }}
-			<svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
-				<path fill-rule="evenodd"
-					d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-					clip-rule="evenodd" />
-			</svg>
-		</span>
-	</summary>
-	<div
-		class="absolute right-0 w-56 mt-2 origin-top-right rounded-md shadow-lg">
-		<div class="bg-white rounded-md shadow-xs">
-			<div class="py-1">
-				{%- for item in items -%}
-				<a href="{{ item.link or item.url }}"
-					class="block px-4 py-2 text-sm leading-5 text-gray-800 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
-					{{ item.label }}
-				</a>
-				{%- endfor -%}
-			</div>
-		</div>
-	</div>
-</details>

frappe/templates/components/navbar_link.html

@@ -1,3 +0,0 @@
-<a href="{{ url }}" class="font-medium text-gray-900 hover:text-primary-500">
-	{{ label }}
-</a>

frappe/templates/components/web_blocks.html

@@ -1,3 +0,0 @@
-{%- for web_block in web_blocks -%}
-{{ c('web_block', web_block=web_block, htmltag=htmltag) }}
-{%- endfor -%}

frappe/templates/includes/web_block.html

@@ -1,4 +1,3 @@
-{%- set htmltag = htmltag or 'section' -%}
 {%- set classes = resolve_class([
 	{
 		'section-padding-top': web_block.add_top_padding,
@@ -9,7 +8,7 @@
 ]) -%}
 
 {%- if not web_block.hide_block -%}
-<{{htmltag}} class="section {{ classes }}" data-section-idx="{{ web_block.idx | e }}"
+<section class="section {{ classes }}" data-section-idx="{{ web_block.idx | e }}"
 	data-section-template="{{ web_block.web_template | e }}">
 	{%- if web_block.add_container -%}
 	<div class="container">
@@ -18,5 +17,5 @@
 	{%- if web_block.add_container -%}
 	</div>
 	{%- endif -%}
-</{{htmltag}}>
+</section>
 {%- endif -%}

frappe/utils/jinja.py

@@ -20,8 +20,6 @@ def get_jenv():
 		jenv.globals.update(get_safe_globals())
 		jenv.globals.update(get_jenv_customization('methods'))
 		jenv.globals.update({
-			'component': component,
-			'c': component,
 			'resolve_class': resolve_class,
 			'inspect': inspect
 		})
@@ -166,29 +164,6 @@ def get_jenv_customization(customization_type):
 	return out
 
 
-def component(name, **kwargs):
-	from jinja2 import TemplateNotFound
-
-	template_name = 'templates/components/' + name + '.html'
-	jenv = get_jenv()
-
-	try:
-		source = jenv.loader.get_source(jenv, template_name)[0]
-	except TemplateNotFound:
-		return '<pre>Component "{0}" not found</pre>'.format(name)
-
-	attributes, html = parse_front_matter_attrs_and_html(source)
-	context = {}
-	context.update(attributes)
-	context.update(kwargs)
-
-	if 'class' in context:
-		context['class'] = resolve_class(context['class'])
-	else:
-		context['class'] = ''
-
-	return get_jenv().from_string(html).render(context)
-
 def resolve_class(classes):
 	import frappe
 
@@ -206,21 +181,6 @@ def resolve_class(classes):
 
 	return classes
 
-def parse_front_matter_attrs_and_html(source):
-	from frappe.website.router import get_frontmatter
-
-	html = source
-	attributes = {}
-
-	if not source.startswith('---'):
-		return attributes, html
-
-	res = get_frontmatter(source)
-	if res['attributes']:
-		attributes = res['attributes']
-		html = res['body']
-
-	return attributes, html
 
 def inspect(var, render=True):
 	context = { "var": var }

frappe/website/doctype/web_page/web_page.py

@@ -12,7 +12,7 @@ from jinja2.exceptions import TemplateSyntaxError
 import frappe
 from frappe import _
 from frappe.utils import get_datetime, now, strip_html
-from frappe.utils.jinja import render_template, component
+from frappe.utils.jinja import render_template
 from frappe.website.doctype.website_slideshow.website_slideshow import get_slideshow
 from frappe.website.router import resolve_route
 from frappe.website.utils import (extract_title, find_first_image, get_comment_list,
@@ -205,7 +205,8 @@ def get_web_blocks_html(blocks):
 	out = frappe._dict(html='', scripts=[])
 	extracted_scripts = []
 	for block in blocks:
-		rendered_html = component('web_block', web_block=block)
+		rendered_html = frappe.render_template('templates/includes/web_block.html',
+			context={'web_block': block})
 		html, scripts = extract_script_tags(rendered_html)
 		out.html += html
 		if block.web_template not in extracted_scripts:

frappe/website/web_template/full_width_image/full_width_image.html

@@ -1 +1,5 @@
-{{ c('image_with_blur', src=url, alt=description, class="full-width-image") }}
+{{ frappe.render_template('templates/includes/image_with_blur.html', {
+	"src": url,
+	"alt": description,
+	"class": "full-width-image"
+}) }}

frappe/website/web_template/hero_with_right_image/hero_with_right_image.html

@@ -24,10 +24,10 @@
 		</div>
 	</div>
 	{%- if image -%}
-	{{ c('image_with_blur',
-		class=["hero-image", "contain-image" if contain_image else ""],
-		src=image,
-		alt="")
-	}}
+	{{ frappe.render_template('templates/includes/image_with_blur.html', {
+		"src": image,
+		"alt": "",
+		"class": ["hero-image", "contain-image" if contain_image else ""]
+	}) }}
 	{%- endif -%}
 </div>

frappe/website/web_template/section_with_image/section_with_image.html

@@ -1,5 +1,8 @@
 <h2 class="section-title">{{ title }}</h2>
 <p class="section-description">{{ subtitle }}</p>
 
-{{ c('image_with_blur', src=image, alt=image_description, class="section-image") }}
-
+{{ frappe.render_template('templates/includes/image_with_blur.html', {
+	"src": image,
+	"alt": image_description,
+	"class": "section-image"
+}) }}