-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathsearch.php
143 lines (127 loc) · 6.79 KB
/
search.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<?php
$pagetitle = 'search';
$ignore_tracking = false;
require 'core/core.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php echo $global_meta_header;?>
<title>Search</title>
<meta name="description" content="Instant search demo using ajax." />
<?php if($tc==true){?>
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@brutalistfwk">
<meta name="twitter:title" content="Search BF">
<meta name="twitter:description" content="An ajax instant sitewide search demo.">
<meta name="twitter:creator" content="@brutalistfwk">
<meta name="twitter:image" content="https://www.brutalistframework.com/core/files/images/bf-social-tile.jpg">
<?php }
if($og==true){ ?>
<!-- Open Graph data -->
<meta property="og:title" content="Brutalist Framework || bIcons" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.brutalistframework.com" />
<meta property="og:image" content="https://www.brutalistframework.com/core/files/images/bf-social-tile.jpg" />
<meta property="og:description" content="An ajax instant sitewide search demo." />
<meta property="og:site_name" content="Brutalist Framework" />
<?php } ?>
<?php echo $global_header;?>
<!-- Theme CSS -->
<link href="app/themes/default/theme.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<!-- Sticky Nav -->
<?php include 'app/inc/content/nav.php';?>
<!-- PAGE -->
<header class="brickbuild padded flex middle" id="uptop" style="min-height: 25vh; margin-bottom: 0;">
<a href="index.php"><img class="large-thumb brdr-s-k red-b invert-h" src="app/files/images/bf3logo.png" alt="Brutalist Framework" /></a>
</header>
<div class="passion white-t courier flex" style="height: 25vh; margin: 0;">
<div class="shape point-right violence center flex middle" style="min-width: 15vw; height: 100%; margin: 0 1rem 0 0;">
<div class="fluid-text-h1" style="margin-left: -20px;"><i class="bi bi-zoom-left"></i></div>
</div>
<div class="flex middle column rebecca-t bitstream">
<h1 class="fluid-text start rice-t-s" style="margin: -10px 0 0 0;">Search</h1>
<h2 class="flow-text start" style="margin: 0; padding: 0;"><span class="rice-t-s baffle">Instant search demo</span></h2>
</div>
</div>
<div class="fossil">
<div class="padded bitstream smoke-t"><div class="wrap-1200">
<p><strong>DEMO:</strong> start typing, and results will display below. If there are no matches, nothing is displayed.</p>
<?php echo $instant_search; ?>
</div></div>
<div class="padded">
<div class="clear-block jagged"><p class="checkerboard padding"></p></div>
<div class="flex">
<div class="glued start sidebar">
<nav class="simple nav3">
<ul class="bitstream flow-text" style="margin-top: 1em;">
<li><a href="#intro">Implement</a></li>
<li><a href="#data">Edit Data</a></li>
<li><a href="#style">Styling</a></li>
</ul>
</nav>
</div>
<div class="padded bitstream smoke-t main">
<!-- Implement -->
<h3 class="fluid-text monolisk" id="intro">Implement</h3>
<p style="margin-bottom: 1rem;">Simply include <em>/core/core.php</em> on the page, and use the code below to render. No additional resources are needed.</p>
<code class="padded flow-text"><?php echo $instant_search; ?></code>
<p style="margin-top: 1rem; margin-bottom: 1rem;">Instant search uses XML data to search application page links, and returns results via AJAX.</p>
<p class="padded warning"><strong>NOTE:</strong> Only one Instant Search widget can be used per page, as it uses a unique ID.</p>
<!-- EDIT DATA -->
<p class="spacer"></p>
<div class="clear-block jagged"><p class="checkerboard padding"></p></div>
<h3 class="fluid-text monolisk" id="data">Edit Data</h3>
<div class="flex"><div class="half padded">
<p>Instant search uses the XML data file: <span class="black lime-t">/core/data/xml/pages.xml</span>. Each page link needs a <em>title</em>, <em>keywords</em>, and <em>url</em> specified. Use the following XML markup:</p>
<code class="padded" style="margin-top: 1rem;">
<link><br /> <title>Page Title</title><br />
<keywords>...</keywords><br />
<url>...</url><br />
<target>_self</target><br />
</link>
</code>
<p style="margin-top: 1rem;">URLs should be fully qualified (absolute URLs), especially if they are linked to an external page or application. By default, all links open in the same window (<em>target</em> set to "<em>_self</em>"). To open links in a new window, set <em>target</em> to "<em>_blank</em>".</p>
</div><div class="padded half">
<h4 class="flow-text">Page Titles & Keywords</h4>
<p>The search results uses data from page titles and keywords. Data from these are matched with the input as the user types in real-time. Keywords can be single words, or phrases that are related to the page title (no need to separate by commas). An example might be:</p>
<p class="info padded" style="margin-top: 1rem; margin-bottom: 1rem;"><strong>TITLE:</strong> Auto Services<br /><strong>KEYWORDS:</strong> car repair maintenance help</p>
<p>Keywords <em>don't</em> display in search results, although they do affect them. As with the above example, if a user searches <em>"car repair"</em>, the result <em>"Auto Services"</em> will appear.</p>
</div></div>
<!-- Styling -->
<p class="spacer"></p>
<div class="clear-block jagged"><p class="checkerboard padding"></p></div>
<h3 class="fluid-text monolisk" id="style">Styling</h3>
<p style="margin-bottom: 1rem;">Instant Search can be easily styled through custom theme CSS. The HTML output markup is as follows:</p>
<code class="padded">
<div class="instant-search"><br />
<form><br />
<input type="text"><br />
<div class="search-results"><br />
<ul class="result-list"><br />
<li><a href="">Page Title</a></li><br />
</ul><br />
</div><br />
</form><br />
</div>
</code>
</div>
</div>
</div>
<?php include 'app/inc/content/footer.php';?>
</div>
<!-- Download Modal -->
<?php include 'app/inc/content/ui/download-modal.php';?>
<!-- Initiate and display modal itself -->
<div class="modal">
<div class="modal-inner draggable"><!-- Remove "draggable" class to prevent modals from being moveable -->
<span data-modal-close>×</span>
<div class="modal-content"></div>
</div>
</div>
<?php echo $global_footer;?>
</body>
</html>