index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Sierra - A Python micro templating engine for web frameworks">
    <meta name="keywords" content="html, css, js, jinja, django, python, web framework, templating">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Sierra</title>
    <link rel="apple-touch-icon" href="./img/sierra.png">
    <link href="./css/prism.css" rel="stylesheet">
    <script src="./js/prism.js"></script>
</head>

<body>
    <div className="flex h-screen justify-center items-center"></div>
    <header class="text-gray-700 body-font">
        <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
            <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                <a class="ml-3 text-xl"> Sierra </a>
            </a>
            <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
                <a class="mr-5 hover:text-gray-900" href="Documentation.html" target="_blank" rel="noopener noreferrer"> Documentation </a>
                <a class="mr-5 hover:text-gray-900" href="http://github.com/BrainStormYourWayIn/sierra" target="_blank" rel="noopener noreferrer"> GitHub </a>
                <a class="mr-5 hover:text-gray-900" href="ContactUs.html" target="_blank" rel="noopener noreferrer"> Contact us </a>
            </nav>
        </div>
    </header>

    <section class="text-gray-700 body-font relative">
        <div class="container px-5 py-32 mx-auto">
            <div class="flex flex-col text-center w-full mb-12">
                <h1 class="sm:text-5xl text-4xl font-medium title-font mb-4 text-gray-900"> Sierra </h1>
            </div>
            <br>
            <!--About Section-->
            <div class="flex flex-col text-left w-full">
                <h2 class="sm:text-4xl text-3xl font-medium title-font mb-3 text-gray-900">About</h2>
            </div>
            <b>Sierra is a Python library to write HTML and CSS in pure Python using the DOM API in a simple yet elegant manner.</b> 
            Take advantage of Python's powerful functionalities with ease. 
            Loops, variables, functions, libraries - you name it, you have it.
            <br>
            Here are a few advantages of using Sierra over other Python libraries that use the DOM API:

            <ul class="list-disc leading-relaxed">
                <li>Out-of-the-box support for all CSS styling attributes for all tags</li>
                <li>Display a table by simply putting in a CSV file</li>
                <li>Create your own tag functions with absolute ease using <code class="language-py">@tag</code> and <code class="language-py">@CmTag</code>. You can decide their behavior and use them within content-managers too</li>
                <li>Improvement in the arrangement look of the code and intelligent handling of tags with <code class="language-py">autoPrettify()</code> - Powered by bs4 and a feature like no other</li>
            </ul>
            <b>You may also use this as a templating engine, although jinja and Django's templating engine is strongly recommended over this.</b>
            <br><br>
            <!--Installation Section-->
            <div class="flex flex-col text-left w-full">
                <h2 class="sm:text-4xl text-3xl font-medium title-font mb-3 text-gray-900">Installation</h2>
            </div>
            To Download the library:
            <pre class="command-line language-powershell" data-prompt="$"><code>pip3 install sierra</code></pre>
            <br>
            <!--Upgrade Section-->
            <div class="flex flex-col text-left w-full">
                <h2 class="sm:text-4xl text-3xl font-medium title-font mb-3 text-gray-900">Upgrade</h2>
            </div>
            To Upgrade the library:
            <pre class="command-line language-powershell" data-prompt="$"><code>pip3 install --upgrade sierra</code></pre>
            <br>
            <!--Documentation Section-->
            <div class="flex flex-col text-left w-full">
                <h2 class="sm:text-4xl text-3xl font-medium title-font mb-3 text-gray-900">Documentation</h2>
            </div>
            Check out the <a href="Documentation.html" target="_blank" class="font-bold">documentation</a> of Sierra
            Starting off is pretty simple and straightforward:
            <pre class="line-numbers"><code class="language-py">from sierra import *

title('Hello World!')</code></pre>
            The <code class="language-py">title()</code> function at the start is mandatory, since it commences the HTML and the CSS file, which is created in the working directory upon execution on the code. <br>
            You can create custom tag functions with <code class="language-py">@tag</code> and <code class="language-py">@CmTag</code> with just three lines of code. Say you want to create a function for <code class="language-html">&lt;meta&gt;</code>

            <pre class="line-numbers"><code class="language-py">@tag
def meta(**kwargs):
    pass

# Using them
meta(name="description", content="This is some description")
meta(name="viewport", content="width=device-width", initial_scale=1.0)</code></pre>

            Underscores are used for hyphens (same applies to CSS) and Python-conficting arguments are prefixed with a double underscore.
            Using argument text inside of a function defined in <code class="language-py">@tag</code> will create a tag that opens, enters text, and closes. Something like this:

            <pre class="line-numbers"><code class="language-py">@tag
def script(**kwargs):
    pass
script(__async="", src="some_src", text="some_text")</code></pre>

            Is the equivalent of:

            <pre class="line-numbers"><code class="language-html">&lt;script async="" src="some_src"&gt;some_text&lt;/script&gt;</code></pre>
            
            Want to add some JS? Simple enough. Just create a function for the <code class="language-html">&lt;script&gt;</code> tag with a context manager behavior using <code class="language-py">@CmTag</code> and you're golden.

            <pre class="line-numbers"><code class="language-py">@CmTag
def script(**kwargs):
    pass

# Here I'll be replicating the script needed to add Google Analytics to a webpage

with script(__aync="", src="https://www.googletagmanager.com/gtag/js?id=UA—XXXXXXXX-X"):
    pass

with script():  
    writeWA('''
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA—XXXXXXXX-X');''')</code></pre>

            This is the equivalent of:

            <pre class="line-numbers"><code class="language-js">&lt;script async src="https://www.googletagmanager.com/gtag/js?id=UA—XXXXXXXX-X"&gt;&lt;/script&gt;

&lt;script&gt;
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA—XXXXXXXX-X');
&lt;/script&gt;</code></pre>

            <code class="language-py">writeWA()</code> writes text entered into it into the HTML file as it is. <br>
            You can add fonts using <code class="language-py">addFont()</code>

            <pre class="line-numbers"><code class="language-py">addFont("https://fonts.googleapis.com/css2?family=Roboto&display=swap")</code></pre>

            Once things at the <head> of the HTML are settled (CSS is automatically linked), begin the body of the HTML with:

                <pre class="line-numbers"><code class="language-py">openBody()
# You can add any number of styling arguments to the body within openBody()
openBody(background_color='yellowgreen', opacity='0.9')</code></pre>

            You can create &lt;div&gt; and &lt;section&gt; tags this way:

            <pre class="line-numbers"><code class="language-py">with div(__class="some_class") as d:
p('This is a paragraph!')
d.css(background_color="#5886d1")</code></pre>

            Let's break this down but-by-bit:<br>
            First, we start a div with a context manager behavior and give it an attribute <code class="language-py">__class</code>, which is essentially the tag attribute class (remember Python-conflicting) arguments are prefixed by a double underscore. <br><br>
            <code class="language-py">p()</code> is a function, as the name suggests, to add a <code class="language-html">&lt;p&gt;</code> tag. You can give the tag attributes with <code class="language-py">**kwargs</code>, if you like.<br>
            <code class="language-py">p('Hello World!', __class='p_class')</code> is the same as <code class="language-html">&lt;p class="p_class"&gt;Hello World!&lt;/p&gt;</code> <br><br>
            After the paragraph, there's a <code class="language-py">d.css()</code>. This adds CSS to the class mentioned within <code class="language-py">div()</code>. If a class is mentioned, CSS is added to that class as the first priority. If an id is mentioned, CSS is added to that id as a second priority. If none of both are mentioned, CSS is just added to div. <br><br>
            The behavior of div shown above also applies to section.<br><br>
            You can open a new tag with <code class="language-py">Tag()</code>

            <pre class="line-numbers"><code class="language-py">with Tag('some_tag', id='some_id') as t:
    p('A paragraph in <some_tag>')
    t.css(color='blue')</code></pre>

            Although here, <code>.css()</code> behaves differently. It is independent of tag attributes, meaning CSS is added directly to the tag mentioned, which is some_tag<br>
            You can add a table to the HTML page by inputting in a CSV file this way:

            <pre class="line-numbers"><code class="language-py">with Table() as t:
    t.get_table("path/to/file.csv")   # Add attributes with **kwargs here
    t.css(border="1px solid black")   # Use writeCSS to add CSS to a specific attribute</code></pre>

            There are MANY more functionalities to Sierra that you can see from the <a href="Documentation.html" target="_blank">documentation</a> <br><br>
            At the end of all development with Sierra, use

            <pre class="line-numbers"><code class="language-py">autoPrettify()</code></pre>
            It takes in no arguments, but provides SO much to the code. <br>
            Have a look at this example to see just how <code class="language-py">autoPrettify()</code> works.
            <br>
            <!--Example Section-->
            <div class="flex flex-col text-left w-full">
                <h2 class="sm:text-4xl text-3xl font-medium title-font mb-3 text-gray-900">Example</h2>
            </div>
            Using this with Flask makes life easier if you're developing web applications with just HTML and CSS.
            It can also be used standalone in developing web applications. You can also use this as an alternative to jinja or Django or another templating engine, or use it along with one.
            It's got features like displaying a table on the web application by loading in a .csv file, adding a bulleted list (ol/ul) by just passing in a Python list, automatic support for CSS styling arguments and more! You can use for loops, variables, functions - you name it, you have it, with Sierra. 
            Improvement in the overall look of the code and intelligent handling of tags with <code class="language-py">autoPrettify()</code>, a feature like no other. Harness the power of Python for your web applications!
            <div class="bg-green-100 text-green-700 border-l-8 border-green-500 p-4 mb-2">
                <p class="font-bold">Note for users</p>
                <p>If you have any suggestions or issue or just want to open a discussion, feel free to do so!</p>
            </div>
            <br>
            <!--Contact Us Section-->
            <div class="flex flex-col text-left w-full">
                <h2 class="sm:text-4xl text-3xl font-medium title-font mb-3 text-gray-900">Contact Us</h2>
            </div>
            <address>
                Write to us at: <a href="mailto:brainstormyourwayin@gmail.com"><b>brainstormyourwayin@gmail.com</b></a>
            </address>
        </div>
    </section>

    <!--Footer-->
    <footer class="text-gray-700 body-font">
        <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
            <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
                <span class="ml-3 text-xl">Sierra</span>
            </a>
            <p class="text-sm text-gray-700 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
                <a href="https://github.com/BrainStormYourWayIn" class="text-gray-800 ml-1" rel="noopener noreferrer" target="_blank">@BrainStormYourWayIn</a>
            </p>
            <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
                <a class="ml-4 text-gray-500" href="http://github.com/BrainStormYourWayIn/sierra" target="_blank" rel="noopener noreferrer">
                    <img src="https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg" height="10" width="10" alt="GitHub logo" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                </a>
                <a class="ml-4 text-gray-500" href="http://gitlab.com/BrainStormYourWayIn/sierra" target="_blank" rel="noopener noreferrer">
                    <img src="https://docs.gitlab.com/assets/images/gitlab-logo.svg" height="10" width="10" alt="Gitlab logo" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                </a>
            </span>
        </div>
    </footer>
</body>
</html> 