diff --git a/docs/css_import_documentation.md b/docs/css_import_documentation.md new file mode 100644 index 0000000..6a4c677 --- /dev/null +++ b/docs/css_import_documentation.md @@ -0,0 +1,18 @@ +# CSS Import implementation + +### Introduction +This document describes the usage of importing CSS resources as separate files into Starfyre projects. + + +### Feature Description +The app now supports a way to provide CSS styling via external file. To do that, use the syntax: +`import ` +If relative path is used, it must start from `.` and the css file should be placed in the (same folder as the template, and both should be inside the application folder.) + + +### Usage Example +An example is located in the test-project `test_application` folder under Starfyre’s [repo](https://github.com/sparckles/starfyre/tree/main/test_application) + +```python +import "./css_file_test.css" +``` \ No newline at end of file diff --git a/docs/slot_documentation.md b/docs/slot_documentation.md new file mode 100644 index 0000000..03a47dd --- /dev/null +++ b/docs/slot_documentation.md @@ -0,0 +1,130 @@ +# Component Implementation + +### Introduction +This document provides an overview of component re-usage thought special tag ``. + +### Feature Description +This feature allows Starfyre developers to reuse parts of a Component for their application using a special tag ``. It provides a better design and flexibility to the app. + +## Implementation Details + +### Component Definition +Every Component in Starfyre is defined in a separate `.fyre file`. It allows developers to specify the position on the pyml source code to insert a custom content when using a defined component in another `.fyre template` (as part of a different page/component.) +To mark such placeholder, ` tag` should be inserted into the component definition. +Example of a component definition: + +```python +user_component.fyre + + +
+ + Hello +

World

+
+
+``` + +### Component Usage +When there are a `` inside another `.fyre template`, everything between open and close tags `` are considered it’s “children content”, for example: + +```python +__init__.fyre + +from .user_component import user_component + + + +
I will replace slot
+ I will replace slot too +
+ +``` +When the result HTML for the Application is rendered, this “children content” will be inserted instead of the ` tag` in the same position as it was defined. + +Here is a HTML file result: + +```python +index.html + +
+
+
+
+I will replace slot +
+
+ +
+I will replace slot too +
+ +
+Hello +
+ +

+

+World +
+

+
+
+
+
+Hello +
+ +

+

+World +
+

+ +
+
+I will replace slot +
+
+ +
+I will replace slot too +
+
+