Adding sample pages

web-illinois · Jul 17, 2024 · 9c78035 · 9c78035
1 parent a110d6b
commit 9c78035
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 32 deletions.
diff --git a/site/_includes/sample.liquid b/site/_includes/sample.liquid
@@ -36,6 +36,35 @@
     <title>{{ title }}</title>
 </head>
 <body style="margin: 0;">
-    {{ content }}
+<ilw-page {{ illinoisToggle }}>
+<il-header slot="header">
+  <a slot="primary-unit" href="/">Toolkit Builder 3</a>
+  <a slot="site-name" href="/sample_page/index.html">Whispering Pines College</a>
+  <il-header-nav slot="navigation">
+    <ul>
+      <li><a href="/sample_page/index.html">About</a></li>
+      <li><a href="/sample_page/index.html">Academics</a></li>
+      <li><a href="/sample_page/index.html">Admissions</a></li>
+      <li><a href="/sample_page/index.html">Research</a></li>
+      <li><a href="/sample_page/index.html">Diversity</a></li>
+    </ul>
+  </il-header-nav>
+</il-header>
+
+<main>
+  {{ content }}
+  <ilw-back-to-top></ilw-back-to-top>
+</main>
+<il-footer slot='footer'>
+  <a slot="primary-unit" href="/">Toolkit Builder 3</a>
+  <a slot="site-name" href="/sample_page/index.html">Whispering Pines College</a>
+  <address slot="address">
+    <div>1313 Pine Avenue</div>
+    <div>Normal, ZZ 99999</div>
+    <div>Phone: 555-874-3000</div>
+    <div>Email: contact@iou.edu</div>
+  </address>
+</il-footer>
+</ilw-page>
 </body>
 </html>
diff --git a/site/index.md b/site/index.md
@@ -10,7 +10,7 @@ The toolkit is a way to see components that have been designed by the WIGG Web C
 
 The web components may not meet all of your needs, so don't feel like you are constrained to use just these options or force your content to these components. The only official requirements are that your Illinois site must meet [accessibility guidelines](https://itaccessibility.illinois.edu/) and [brand guidelines](https://brand.illinois.edu/). These web components help ensure that you meet these requirements. 
 
-One of the things the toolkit is going to be better about is giving full page options. 
+One of the things we needed in the last iteration are full-page setups. How do these components interact with each other? Will one component cause another component to have problems? There are two sample pages: <a href="/sample_page/index.html">one without the "illinois" mode</a> (preferred), and <a href="/sample_page_mode/index.html">one with the "illinois" mode</a> (for CMSs that can't put everything in an il-content block). This uses the <a href="https://cdn.brand.illinois.edu/">brand stylesheets</a> and components. Note that the header and footer are in beta, so be warned. 
 
 Why does this page not look like an "Illinois site"? I was going to build this site with the latest web components, but these aren't really ready for prime-time. As these components and tools become more production-ready, we'll add them to this site to make it more branded. 
 

diff --git a/site/sample_page.md b/site/sample_page.md
@@ -1,23 +1,9 @@
 ---
 title: Sample Page
 layout: sample.liquid
+illinoisToggle: ''
 ---
-<ilw-page>
-<il-header slot="header">
-  <a slot="primary-unit" href="/">Toolkit Builder 3</a>
-  <a slot="site-name" href="/sample_page/index.html">Whispering Pines College</a>
-  <il-header-nav slot="navigation">
-    <ul>
-      <li><a href="/sample_page/index.html">About</a></li>
-      <li><a href="/sample_page/index.html">Academics</a></li>
-      <li><a href="/sample_page/index.html">Admissions</a></li>
-      <li><a href="/sample_page/index.html">Research</a></li>
-      <li><a href="/sample_page/index.html">Diversity</a></li>
-    </ul>
-  </il-header-nav>
-</il-header>
-
-<main>
+
 <ilw-hero shadow="true" width="full">
   <img src="/img/header_image.png" alt="" slot="background">
   <h1>Knowledge is Evergreen</h1>
@@ -47,17 +33,3 @@ layout: sample.liquid
 
   <p>With state-of-the-art facilities and a commitment to excellence, Whispering Pines College is more than an institution—it is a community united by a shared pursuit of knowledge, integrity, and the boundless possibilities that await each student who walks through its gates. Whether delving into the archives of its esteemed library or forging lifelong friendships in its bustling student center, Whispering Pines College promises an unforgettable collegiate experience unlike any other.</p>
 </ilw-content>
-
-<ilw-back-to-top></ilw-back-to-top>
-</main>
-<il-footer slot='footer'>
-  <a slot="primary-unit" href="/">Toolkit Builder 3</a>
-  <a slot="site-name" href="/sample_page/index.html">Whispering Pines College</a>
-  <address slot="address">
-    <div>1313 Pine Avenue</div>
-    <div>Normal, OR 99999</div>
-    <div>Phone: 555-874-3000</div>
-    <div>Email: contact@iou.edu</div>
-  </address>
-</il-footer>
-</ilw-page>
diff --git a/site/sample_page_mode.md b/site/sample_page_mode.md
@@ -0,0 +1,33 @@
+---
+title: Sample Page
+layout: sample.liquid
+illinoisToggle: illinois
+---
+
+<ilw-hero shadow="true" width="full">
+  <img src="/img/header_image.png" alt="" slot="background">
+  <h1>Knowledge is Evergreen</h1>
+  <ul class="ilw-buttons">
+    <li><a href="#">Apply</a></li>
+    <li><a href="#">Contact Us</a></li>
+    <li><a href="#">Our Programs</a></li>
+  </ul>
+</ilw-hero>
+
+<ilw-content mode="introduction" theme="blue" width="full" padding="50px">
+  <p><em>Soar on the wings of knowledge.</em></p>
+
+  <p>Whispering Pines College stands as a beacon of intellectual curiosity and personal growth.</p>
+
+  <p>Students at Whispering Pines College embark on a transformative journey where academic excellence and vibrant campus life converge seamlessly</a>.</p>
+</ilw-content>
+
+  <h2>Whispering Pines College: Where Wisdom Finds Its Home</h2>
+
+  <p>Nestled deep within the tranquil embrace of Whispering Pines, this storied institution stands as a beacon of higher learning and intellectual discovery. Established over a century ago, Whispering Pines College has earned a distinguished reputation for nurturing minds and fostering a community where curiosity thrives.</p>
+
+  <p>At Whispering Pines College, students embark on a transformative journey guided by esteemed scholars and mentors who are leaders in their fields. The sprawling campus, adorned with century-old oak trees and winding pathways, provides a picturesque backdrop for academic exploration and personal growth.</p>
+
+  <p>Beyond academics, Whispering Pines College boasts a vibrant tapestry of cultural diversity and extracurricular activities. From spirited debates in the hallowed halls of the Philosophy Department to the harmonious notes resonating from the Music Conservatory, every corner of the campus resonates with creativity and passion.</p>
+
+  <p>With state-of-the-art facilities and a commitment to excellence, Whispering Pines College is more than an institution—it is a community united by a shared pursuit of knowledge, integrity, and the boundless possibilities that await each student who walks through its gates. Whether delving into the archives of its esteemed library or forging lifelong friendships in its bustling student center, Whispering Pines College promises an unforgettable collegiate experience unlike any other.</p>