Skip to content

Commit

Permalink
documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@cblanquera
cblanquera committed Sep 1, 2024
1 parent 1cdefe9 commit b5103a1
Show file tree
Hide file tree
Showing 25 changed files with 9,547 additions and 359 deletions.
5 changes: 3 additions & 2 deletions docs/500.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<link rel="stylesheet" type="text/css" href="/temple/styles/theme.css" />
<link rel="stylesheet" type="text/css" href="/temple/build/055f1a2f37d39d4fe92a.css" />

<script data-app="eyJwcm9wcyI6eyJlcnJvciI6ImV4YW1wbGVzIGlzIG5vdCBkZWZpbmVkIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>
<script data-app="eyJwcm9wcyI6eyJlcnJvciI6IkJ1aWxkIGZhaWxlZCB3aXRoIDEgZXJyb3I6XG4uLi90ZW1wbGUvZGlzdC9FeGNlcHRpb24uanM6ODoxNTogRVJST1I6IFtwbHVnaW46IHRlbXBsZS1kb2N1bWVudC1zZXJ2ZXItcGx1Z2luXSBNaXNtYXRjaGVkIGNsb3NpbmcgdGFnIGlkZS1jb2RlIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>

<script src="/dev.js"></script>

Expand Down Expand Up @@ -54,7 +54,8 @@ <h1>Oops...</h1>
Something went wrong. Please try again later.
</i18n-translate>
</p>
<div class="error"><pre>examples is not defined</pre></div>
<div class="error"><pre>Build failed with 1 error:
../temple/dist/Exception.js:8:15: ERROR: [plugin: temple-document-server-plugin] Mismatched closing tag ide-code</pre></div>
</div>
</panel-main>
</body>
Expand Down
5 changes: 3 additions & 2 deletions docs/build/client/055f1a2f37d39d4fe92a.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<link rel="stylesheet" type="text/css" href="/temple/styles/theme.css" />
<link rel="stylesheet" type="text/css" href="/temple/build/055f1a2f37d39d4fe92a.css" />

<script data-app="eyJwcm9wcyI6eyJlcnJvciI6ImV4YW1wbGVzIGlzIG5vdCBkZWZpbmVkIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>
<script data-app="eyJwcm9wcyI6eyJlcnJvciI6IkJ1aWxkIGZhaWxlZCB3aXRoIDEgZXJyb3I6XG4uLi90ZW1wbGUvZGlzdC9FeGNlcHRpb24uanM6ODoxNTogRVJST1I6IFtwbHVnaW46IHRlbXBsZS1kb2N1bWVudC1zZXJ2ZXItcGx1Z2luXSBNaXNtYXRjaGVkIGNsb3NpbmcgdGFnIGlkZS1jb2RlIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>

<script src="/dev.js"></script>

Expand Down Expand Up @@ -54,7 +54,8 @@ <h1>Oops...</h1>
Something went wrong. Please try again later.
</i18n-translate>
</p>
<div class="error"><pre>examples is not defined</pre></div>
<div class="error"><pre>Build failed with 1 error:
../temple/dist/Exception.js:8:15: ERROR: [plugin: temple-document-server-plugin] Mismatched closing tag ide-code</pre></div>
</div>
</panel-main>
</body>
Expand Down
85 changes: 85 additions & 0 deletions docs/build/client/13781afd4fbd704a9789.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,91 @@ <h6>Contributing</h6>
<panel-main class="panel-main">
<div class="docs container">
<h1>Developer Tools</h1>

<i18n-translate p trim>
Temple provides a separate package for a better development
experience when working with server frameworks that utilize
the native http module. Start by installing adding
<ide-code lang="js" inline>'@ossph/temple-dev'</ide-code>
to your project.
</i18n-translate>
<ide-app title="Terminal">
<ide-code lang="bash">
npm install --save-dev @ossph/temple-dev
</ide-code>
</ide-app>
<i18n-translate p trim>
Next, import the <ide-code lang="js" inline>dev()</ide-code>
function from the package and use it in your existing
<ide-code lang="js" inline>'src/index.ts'</ide-code>
file to create a development server as shown in the example below.
</i18n-translate>
<ide-app title="src/index.ts">
<ide-code lang="js" numbers trim >
import http from 'http';
import temple from '@ossph/temple/compiler';
import { dev } from '@ossph/temple-dev';

//create temple compiler
const compiler = temple({ cwd: __dirname });
//1. create dev tools
const { router, refresh } = dev({ cwd: __dirname });

//create http server
const server = http.createServer(async (req, res) =&gt; {
//2. Add dev router
if (router(req, res)) return;
//if home page
if (req.url === '/') {
//3. sync builder with refresh server
refresh.sync(compiler.fromSource('./page.dtml'));
//compile the document
const html = await compiler.render('./page.dtml');
//... send response ...
}
//... other routes ...
});
//listen on port 3000
server.listen(3000);
</ide-code>
</ide-app>
<i18n-translate p trim>
Lastly, update the document file
<ide-code lang="js" inline>'src/page.dtml'</ide-code>
to include the development script
<ide-code inline>&lt;script src="/dev.js"&gt;&lt;/script&gt;</ide-code>
as shown below.
</i18n-translate>
<ide-app title="src/page.dtml">
<ide-code numbers trim >
&lt;script&gt;
//...
&lt;/script&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!-- ... --&gt;
&lt;!-- 4. include dev script --&gt;
&lt;script src="/dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... --&gt;
&lt;/body&gt;
&lt;/html&gt;
</ide-code>
</ide-app>
<i18n-translate p trim>
Run the following command in terminal.
</i18n-translate>
<ide-app title="Terminal">
<ide-code lang="bash">
npx ts-node src/index.ts
</ide-code>
</ide-app>
<i18n-translate p trim>
Whenever <ide-code lang="js" inline>'src/page.dtml'</ide-code>
is updated, the development server will automatically refresh
the page. Components will also be updated in real-time.
</i18n-translate>

<nav class="pager">
<a class="prev" href="/temple/docs/component-publisher.html">
Expand Down
Loading

0 comments on commit b5103a1

Please sign in to comment.