add glosarry page and abbreviation links

mascazubi commented 4 weeks ago

TODO

[x] create glossary template
[x] create toc glosary variant
[x] add styles
[x] add starter terms from M&V guide acronyms
[ ] add final set of acronyms and definitions
[ ] add abbr and links from all terms in main content

Glossary page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glossary of Terms</title>
    <style>
        body { font-family: Arial, sans-serif; }
        h1 { text-align: center; }
        dl { margin: 20px; }
        dt { font-weight: bold; }
        dd { margin-left: 20px; }
    </style>
</head>
<body>
    <h1>Glossary of Terms</h1>
    <dl>
        <dt id="html"><abbr title="Hypertext Markup Language">HTML</abbr></dt>
        <dd>The standard markup language used to create web pages.</dd>

        <dt id="css"><abbr title="Cascading Style Sheets">CSS</abbr></dt>
        <dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>

        <dt id="json"><abbr title="JavaScript Object Notation">JSON</abbr></dt>
        <dd>A lightweight data interchange format.</dd>

        <dt id="dom"><abbr title="Document Object Model">DOM</abbr></dt>
        <dd>An interface for structuring a web page as a tree of objects.</dd>
    </dl>
</body>
</html>
(edited)

Main content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Content</title>
    <style>
        abbr {
            text-decoration: underline;
            cursor: pointer;
            color: blue; /* Optional styling */
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    <p>The <a href="glossary.html#html"><abbr title="Hypertext Markup Language">HTML</abbr></a> is the standard markup language for web pages.</p>
    <p>The <a href="glossary.html#css"><abbr title="Cascading Style Sheets">CSS</abbr></a> controls the presentation of the web page.</p>
    <p>Learn more about <a href="glossary.html#json"><abbr title="JavaScript Object Notation">JSON</abbr></a> in our documentation.</p>
</body>
</html>

mascazubi commented 4 weeks ago

@SideSwipeX01 to provide final list of terms and definitions @Sulaiman-Alam to assist @mascazubi with adding abbreviation tags and links to glossary page terms

SideSwipeX01 commented 3 weeks ago

@mascazubi @Sulaiman-Alam here is a list of terms and definitions https://www.notion.so/nycsustainability/130279213dc3809f8874e60612219822?v=130279213dc381eab2d1000c5d4751fc&pvs=4

mascazubi commented 3 weeks ago

@mascazubi @Sulaiman-Alam here is a list of terms and definitions https://www.notion.so/nycsustainability/130279213dc3809f8874e60612219822?v=130279213dc381eab2d1000c5d4751fc&pvs=4

Thanks @SideSwipeX01, can you filter to only what is relevant to the P+P content?

SideSwipeX01 commented 3 weeks ago

@mascazubi sure i will create a new view of the notion database and add filters so it only show's PnP terms, might take me a day to go through the entire list of terms

cunybpl / nycet_pnp

add glosarry page and abbreviation links #240